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

.PopupPanel
{
	width: 1040px;
	height: 560px;
	padding: 8px;
	overflow: clip;
	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/battlepass/international2022/ti_bundle_sale_2_psd.vtex");
	background-size: cover;
}

.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;
	flow-children: down;
	width: 100%;
	margin: 48px;
}

#Contents Label
{
	horizontal-align: center;
	text-align: center;
}

#Contents Button
{
	horizontal-align: center;
}

.SubTitle
{
	font-size: 16px;
	font-family: titleFont;
	text-transform: uppercase;
	font-weight: semi-bold;
	letter-spacing: 1px;
	opacity: 0.6;
	visibility: visible;
}

.Title
{
	font-size: 48px;
	margin-bottom: 12px;
}

.Description
{
	font-size: 20px;
	margin: 0px 40px 40px;
}

.Description b
{
	font-weight: semi-bold;
	color: whitesmoke;
	font-size: 24px;
}

#PrimaryButton
{
	animation-name: glowButton;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate-reverse;
}

#SecondaryButton
{
	margin-top: 24px;
	color: ultraBrightColor;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}

#SecondaryButton:hover
{
	color: whitesmoke;
}

@keyframes 'glowButton'
{
	0%
	{
		box-shadow: 0px 0px 24px #2E7395;
		brightness: 1;
	}
	
	100%
	{
		box-shadow: 0px 0px 32px #2E7395;
		brightness: 2;
	}
	
}

#PurchaseContainer
{
	flow-children: down;
	width: 100%;
	height: 200px;
}

#PurchaseAsyncContainer
{
	flow-children: down;
	width: 100%;
	height: 200px;
}

.PurchaseButtonsRow
{
	flow-children: right;
	horizontal-align: center;
	margin-bottom: 16px;
}

.PurchaseButton
{
	flow-children: right;
	margin: 0px 8px;
	border-radius: 3px;
	box-shadow: 0px 2px 8px #00000033;
	transition-property: brightness;
	transition-duration: 0.2s;
}

.PurchaseButton Label
{
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0px 0px 4px black;
}

.PurchaseButton .PurchaseLabel
{
	padding: 8px 6px 8px 12px;
	min-width: 180px;
	text-align: center;
	font-weight: semi-bold;
	text-overflow: shrink;
	width: 180px;
}

.PurchaseButton .PurchasePrice
{
	padding: 8px 12px 8px 6px;
	text-align: right;
}

#PurchaseOneButton .PurchaseLabel
{
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #2E6295 ), to( #3690EA ) );
}

#PurchaseOneButton .PurchasePrice
{
	background-color: shadeColor;
}

#PurchaseTwoButton .PurchaseLabel
{
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #2E8495 ), to( #36CCEA ) );
}

#PurchaseTwoButton .PurchasePrice
{
	background-color: shadeColor;
}

.PurchaseButton:hover:enabled
{
	brightness: 1.3;
}

.PurchaseButton:active
{
	brightness: 0.5;
}

.PurchaseButton:disabled
{
	brightness: 0.2;
	saturation: 0.0;
}

.PurchaseStateTitle
{
	text-transform: uppercase;
	horizontal-align: center;
	text-align: center;
	letter-spacing: 2px;
	color: white;
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 2px;
	margin-top: 5px;
}

.PurchaseNeedsOwnership
{
	horizontal-align: center;
}

.SelfEventActive .PurchaseNeedsOwnership
{
	visibility: collapse;
}

.AlreadyPurchased2 .PurchaseButtonsRow
{
	visibility: collapse;
}

.PurchaseAvailable
{
	visibility: collapse;
}

.AlreadyPurchased1 .PurchaseAvailable
{
	visibility: visible;
}

.PurchaseComplete
{
	visibility: collapse;
}

.AlreadyPurchased2 .PurchaseComplete
{
	visibility: visible;
}

#TwoLimit
{
	font-size: 14px;
	color: #666;
}

.PurchaseStatus
{
	text-transform: uppercase;
	horizontal-align: center;
	text-align: center;
	letter-spacing: 2px;
	color: accentColorBright;
	font-size: 18px;
	margin-bottom: 0px;
}