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

.PopupPanel
{
	width: 1010px;
	height: 650px;
	padding: 0px;
	overflow: clip;
	flow-children: none;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #333f ), to( #222f ) );
}

.Contents
{
	flow-children: down;
}

.CloseButton
{
	background-image: url("s2r://panorama/images/control_icons/x_close_png.vtex");
	horizontal-align: right;
	width: 38px;
	height: 38px;
	background-size: 60%;
	background-color: #0000;
	margin-top: 8px;
	margin-right: 8px;
	wash-color: #ccc;
	pre-transform-scale2d: 0.8;
}

.CloseButton:hover
{
	wash-color: white;
	opacity: 1;
	pre-transform-scale2d: 1;
}

.OverlayText
{
	flow-children: down;
	margin-left: 20px;
	margin-top: 16px;
	padding-right: 16px;
}

#headerBGContainer
{
	width: 100%;
	height: 100%;
	overflow: noclip;
}

#headerBackground
{
	transform: scaleX(-1) translateY(265px);
	opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #fff ), color-stop( 0.19, #fff ), color-stop( 0.19, #fff0 ), to( #fff0 ) );
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #cc97eb ), color-stop( 0.39, #a668a8 ), to( #342436 ) );
	background-size: 100%;
	width: 25%;
	height: 150%;
	z-index: 100;
	horizontal-align: center;
	vertical-align: middle;
	pre-transform-scale2d: 4;
	blur: gaussian(3px);
	contrast: 0.9;
}

#SplashImage
{
	horizontal-align: center;
	width: 1010px;
	height: 650px;
	background-image: url("s2r://panorama/images/compendium/international2023/ti23_short_film_popup_background_png.vtex");
	background-repeat: no-repeat;
	background-size: 100%;
}

.OverlayDetails
{
	text-align: center;
	padding: 12px 48px;
}

.ContentsContainer
{
	flow-children: down;
	horizontal-align: right;
	vertical-align: center;
	width: 540px;
	padding: 0px 32px;
}

#Contents
{
	flow-children: down;
	margin-left: 20px;
	margin-top: 20px;
	background-color: #000e;
	padding: 16px 20px 20px 20px;
}

.header
{
	width: 100%;
	flow-children: down;
}

.header #SubTitle
{
	horizontal-align: center;
	text-align: center;
	color: gradient( linear, 0% 0%, 0% 100%, from( primaryColor1 ), to( primaryColor2 ) );
}

.header #Title
{
	horizontal-align: center;
	text-align: center;
	color: whitesmoke;
	line-height: 1.1;
	font-size: 42px;
}

#Message
{
	color: #ccc;
	vertical-align: bottom;
	max-width: 640px;
	font-size: 20px;
	padding: 8px;
}

#DetailsButton
{
	margin-top: 12px;
	padding-left: 48px;
	padding-right: 48px;
}

#Countdown
{
	width: 100%;
	vertical-align: top;
	flow-children: down;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( secondaryColor1&00 ), color-stop( 0.3, secondaryColor1 ), color-stop( 0.7, secondaryColor1 ), to( secondaryColor1&00 ) );
	padding: 12px 0px 16px;
	margin: 4px 0px;
}

#Countdown .time-left
{
	font-weight: normal;
	horizontal-align: center;
	text-align: center;
	color: gradient( linear, 0% 0%, 0% 100%, from( secondaryColor1 ), to( secondaryColor3 ) );
	text-shadow: textShadowSmall;
	brightness: 1.3;
}

#Countdown .remaining,#Countdown .finished
{
	horizontal-align: center;
	text-align: center;
	margin-top: -10px;
	color: secondaryColor2;
}

#Countdown.CountdownActive .finished
{
	visibility: collapse;
}

#Countdown.CountdownAfterEnd .time-left,#Countdown.CountdownAfterEnd .remaining
{
	visibility: collapse;
}

#Countdown.CountdownActive .finished
{
	visibility: collapse;
}