.PopupPanel{

  width: 1040px;
  height: 700px;

  overflow: noclip;
  flow-children: none;
  vertical-align: center;
  horizontal-align: center;
  background-color: #121216;
  background-color: gradient( linear, 0% 0%, 0% 100%, from( #121216 ), to( #1E0E0D ) );
  border: 2px solid white;
  border-brush: gradient( linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 0.02) ), to( rgba(255, 255, 255, 0.01) ) );
  box-shadow: 0px 24px 88px rgba(0, 0, 0, 0.5);
  background-image: url("s2r://panorama/images/events/10th_anniversary/popup_background_psd.vtex");
  background-size: 1040px 700px;
  background-repeat: no-repeat;
}

 .CloseButton{

  margin: 16px;
 }

 .PopupPanel{

  transition-property: transform, pre-transform-scale2d, opacity, background-color, height, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  transition-delay: 0.0s;
 }

 .PopupPanel.Hidden{

  opacity: 0;
  pre-transform-scale2d: 1.25;
  transform: translateY( -10px );
  sound: "ui_custom_lobby_dialog_slide";
 }

 #Contents{

  horizontal-align: center;
  vertical-align: bottom;
  flow-children: down;
  width: 100%;
  width: 70%;
  margin-bottom: 20px;
 }

 .Title{

  font-size: 48px;
  text-transform: uppercase;
  horizontal-align: center;
  color: white;
 }

 .Description{

  font-size: 22px;
  margin-bottom: 32px;
  color: #B0BCC2;
 }

 .TreasureOverview{
  flow-children: right;
  horizontal-align: center;
  padding-top: 20px;
  margin-bottom: 30px;
  ui-scale: 85%;
 }

  .TreasureOverview .Big10Container{
   overflow: noclip;
   width: 220px;
   height: 220px;
   margin-top: 8px;
  }

   .TreasureOverview .Big10Container .Big10Emblem{
    width: 300px;
    height: 300px;
    margin-top: -40px;
    margin-left: -55px;
    background-image: url("s2r://panorama/images/events/10th_anniversary/10th_anniversary_emblem_psd.vtex");
    background-size: 300px 300px;
    background-position: center;
    background-repeat: no-repeat;
    overflow: noclip;
   }

   .TreasureOverview .Big10Container .Big10Particles{
    width: 500px;
    height: 500px;
    vertical-align: center;
    horizontal-align: center;
    opacity-mask: url("s2r://panorama/images/masks/softedge_circle.png");
    saturation: 0.2;
    opacity: 0.3;
   }

   .TreasureOverview .Big10Container .SoftBlurBg{
    width: 300px;
    height: 300px;
    border-radius: 50%;

    vertical-align: center;
    horizontal-align: center;
   }

   .TreasureOverview .Big10Container .Big10Label{
    vertical-align: center;
    horizontal-align: center;
    font-family: titleFont;
    font-weight: bold;
    font-size: 172px;
    letter-spacing: -5px;
    margin-bottom: -12px;
    color: gradient( linear, 0% 20%, 0% 100%, from( #BEAC7B ), color-stop( 0.5, #FFFFFF ), color-stop( 0.7, #AE9663 ), to( #F5E4B5 ) );
    text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
   }

   .TreasureOverview .Big10Container .Big10ParticlesTop{
    width: 500px;
    height: 500px;
    vertical-align: center;
    horizontal-align: center;
    opacity-mask: url("s2r://panorama/images/masks/softedge_circle.png");
    margin-left: -5px;
    hue-rotation: 260deg;
    saturation: 1.2;
   }

    .TreasureOverview .Big10Container .Big10ParticlesTop2{
    width: 200px;
    height: 200px;
    margin-top: -10px;
    vertical-align: center;
    horizontal-align: center;
    opacity-mask: url("s2r://panorama/images/masks/softedge_circle.png");
    hue-rotation: 190deg;
    opacity: 0.7;
    }


  .TreasureOverview .AnniversaryContainer{
   vertical-align: center;
   flow-children: down;
   margin-left: 12px;
   margin-top: 10px;
  }
   .TreasureOverview .AnniversaryContainer .YearsContainer{
    width: 100%;
    flow-children: right;
    margin-right: 12px;
   }
    .TreasureOverview .AnniversaryContainer .YearsContainer .YearsLabel{
     color: #F7E6B5;
    }

    .TreasureOverview .AnniversaryContainer .YearsContainer .Dash{
     margin-left: 8px;
     margin-top: 9px;
    }


   .TreasureOverview .AnniversaryContainer .AnniversaryLabel{
    font-family: titleFont;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 64px;
    letter-spacing: 3px;
    margin: -6px 0px -10px;
    color: gradient( linear, 0% 65%, 0% 100%, from( #FFFFFF ), color-stop( 0.2, #cfd7db ), to( #e1e8eb ) );
    text-overflow: shrink;
    max-width: 560px;
   }

   .TreasureOverview .AnniversaryContainer .TreasureContainer{
    width: 100%;
    flow-children: right;
    margin-right: 8px;
   }
    .TreasureOverview .AnniversaryContainer .TreasureContainer .TreasureLabel{
     color: #F7E6B5;
    }

    .TreasureOverview .AnniversaryContainer .TreasureContainer .Dash{
     margin-right: 8px;
     margin-bottom: 8px;
    }


   .TreasureOverview .AnniversaryContainer .Dash{
    width: fill-parent-flow( 1 );
    height: 1px;
    background-color: #F7E6B5;
    vertical-align: center;
   }

   .TreasureOverview .AnniversaryContainer .TreasureDescription{
    font-family: titleFont;
    font-size: 20px;
    color: #B0BCC2;
    opacity: 0.8;
    text-overflow: shrink;
    width: 100%;
   }



  .TreasureOverview #ViewTreasurePanel{
   horizontal-align: center;
   width: 375px;

   ignore-parent-flow: true;
   vertical-align: bottom;

   margin-top: 200px;
  }
   .TreasureOverview #ViewTreasurePanel.Inactive{
    visibility: collapse;
   }

  .TreasureOverview .ViewTreasureButtonContainer{
   horizontal-align: center;
  }


  .TreasureOverview .ViewTreasure,.TreasureOverview .ClaimTreasure{

   border-radius: 3px;
   padding: 10px 28px;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
   background-size: cover;
   background-img-opacity: 0.3;
   transition-property: background-color, border;
   transition-duration: 0.1s;
   transition-timing-function: ease;
  }
   .TreasureOverview .ViewTreasure Label,.TreasureOverview .ClaimTreasure Label{
    color: white;
    font-size: 20px;
    font-weight: semi-bold;
    horizontal-align: center;
    vertical-align: middle;

    text-transform: uppercase;
    text-shadow: 0px 1px 6px #00000088;
    letter-spacing: 1px;

    transition-property: transform;
    transition-duration: 0.05s;
    transition-timing-function: ease;
   }

   .TreasureOverview .ViewTreasure.Disabled,.TreasureOverview .ViewTreasure:disabled,.TreasureOverview .ClaimTreasure.Disabled,.TreasureOverview .ClaimTreasure:disabled{

    saturation: 0;
    opacity: 0.2;
   }
    .TreasureOverview .ViewTreasure.Disabled Label,.TreasureOverview .ViewTreasure:disabled Label,.TreasureOverview .ClaimTreasure.Disabled Label,.TreasureOverview .ClaimTreasure:disabled Label{
     opacity: 0.6;
    }



  .TreasureOverview .ClaimTreasure{
   background-color: gradient( linear, 0% 0%, 0% 100%, from( #ffebb1 ), color-stop( 0.45, #c6a562 ), color-stop( 0.55, #ae9259 ), to( #dcb870 ) );

   animation-name: GlowTreasureButtonPrimary;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
   animation-direction: alternate;
  }



    .TreasureOverview .ClaimTreasure:hover:enabled:not(.Disabled) Label{
     color: white;
    }


   .TreasureOverview .ClaimTreasure:active:enabled:not(.Disabled){
    sound: "ui_generic_button_click";
   }

    .TreasureOverview .ClaimTreasure:active:enabled:not(.Disabled) Label{
     transform: translateY( 1px );
    }



  .TreasureOverview .ViewTreasure{
   border: 1px solid white;
   border-brush: gradient( linear, 0% 0%, 0% 100%, from( #f7e7b573 ), to( #f7e7b519 ) );

   width: fill-parent-flow(1);

   transition-property: brightness;
   transition-duration: 0.1s;
  }
   .TreasureOverview .ViewTreasure Label{
    color: #FFFFFF;
    font-size: 20px;
    text-align: center;
    text-overflow: shrink;
    opacity: 0.8;
   }

   .TreasureOverview .ViewTreasure:hover:enabled:not(.Disabled){
    brightness: 1.5;
   }.TreasureOverview .ViewTreasure:hover:enabled:not(.Disabled) Label{
     color: #FFFFFF;
    }


   .TreasureOverview .ViewTreasure:active:enabled:not(.Disabled){
    sound: "ui_generic_button_click";
   }
    .TreasureOverview .ViewTreasure:active:enabled:not(.Disabled) Label{
     transform: translateY( 1px );
}