/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

.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-img-opacity: 0.3;
	background-repeat: no-repeat;
}

.ExtendedContainer
{
	width: 100%;
	height: 140px;
	vertical-align: center;
	margin-bottom: 00px;
	transform: rotateZ(-10deg);
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #08aac700), color-stop(.2, #3ebe98), color-stop(.8, #3ebe98), to(#08aac700 ));
	animation-name: ShowBanner;
	animation-duration: 0.8s;
	animation-timing-function: ease-in;
}

@keyframes 'ShowBanner'
{
	0%
	{
		opacity: 0;
	}
	
	50%
	{
		transform: rotateZ(-6deg) scale3d(2, 2, 1);
		opacity: 0;
	}
	
	75%
	{
		transform: rotateZ(-10deg) scale3d(0.9, 0.9, 1);
		opacity: 1;
	}
	
	100%
	{
		transform: rotateZ(-10deg) scale3d(1, 1, 1);
		opacity: 1;
	}
	
}

.ExtendedTitle
{
	vertical-align: center;
	horizontal-align: center;
	font-family: titleFont;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 4px 8px 10px #362623;
	font-size: 64px;
	letter-spacing: 3px;
	margin: 0px 0px 30px 0px;
	color: gradient( linear, 0% 65%, 0% 100%, from( #FFFFFF ), color-stop( 0.2, #cfd7db ), to( #e1e8eb ) );
	text-overflow: shrink;
	max-width: 900px;
}

.ExtendedInfo
{
	vertical-align: center;
	horizontal-align: right;
	font-family: titleFont;
	font-size: 26px;
	letter-spacing: 3px;
	margin: 80px 160px 0px 0px;
	color: #d0dce2;
	text-overflow: shrink;
	max-width: 600px;
}

@keyframes 'Gleam'
{
	0%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #58abff00 ), color-stop(.01, #58abff00), color-stop(.2, #58abff22), color-stop(.4, #58abff00), to( #58abff00 ) );
	}
	
	1.2%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #58abff00 ), color-stop(0, #58abff00), color-stop(.3, #58abff22), color-stop(.6, #58abff00), to( #58abff00 ) );
	}
	
	3.2%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #58abff00 ), color-stop(.3, #58abff00), color-stop(.5, #58abffff), color-stop(.7, #58abff00), to( #58abff00 ) );
	}
	
	5.2%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #58abff00 ), color-stop(.4, #58abff00), color-stop(.7, #58abff22), color-stop(1, #58abff00), to( #58abff00 ) );
	}
	
	6%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #58abff00 ), color-stop(.6, #58abff00), color-stop(.8, #58abff22), color-stop(.99, #58abff00), to( #58abff00 ) );
	}
	
	7.2%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #58abff00 ), color-stop(.6, #58abff00), color-stop(.8, #58abff00), color-stop(.99, #58abff00), to( #58abff00 ) );
	}
	
	100%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #58abff00 ), color-stop(.2, #58abff00), color-stop(.5, #58abff00), color-stop(.6, #58abff00), to( #58abff00 ) );
	}
	
}

.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
{
	opacity: 0.5;
	flow-children: right;
	horizontal-align: center;
	padding-top: 20px;
	margin-bottom: 30px;
	ui-scale: 85%;
}

.TreasureOverview .Big10Container
{
	overflow: noclip;
	width: 240px;
	height: 220px;
	margin-top: -30px;
	margin-left: 40px;
}

.TreasureOverview .Big10Container .Big10Emblem
{
	width: 280px;
	height: 280px;
	margin-top: 0px;
	margin-left: -10px;
	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: 30px 0px 0px 40px;
	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 );
}