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

.Prediction
{
	margin: 4px;
	width: 286px;
	height: 320px;
	overflow: noclip;
	background-image: url("s2r://panorama/images/compendium/international2020/compendium/mainpredictions_well_psd.vtex");
	background-size: 100%;
}

.PredictionSpotlight
{
	ignore-parent-flow: true;
	width: 120%;
	height: 100%;
	overflow: noclip;
	horizontal-align: center;
	background-size: 100%;
	-s2-mix-blend-mode: screen;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.12s;
	transition-timing-function: ease;
}

.PredictionCell
{
	width: 100%;
	height: 100%;
}

.Prediction:disabled
{
	brightness: 0.5;
	saturation: 0.0;
}

.Prediction:disabled .UnselectedMark
{
	visibility: collapse;
}

.PredictionCell:hover .PredictionSpotlight
{
	opacity: 1;
}

.DisabledBlocker
{
	width: 100%;
	height: 100%;
	visibility: collapse;
	z-index: 2;
}

.Prediction:disabled .DisabledBlocker
{
	width: 36px;
	height: 36px;
	margin-top: 84px;
	vertical-align: top;
	horizontal-align: center;
	background-image: url("s2r://panorama/images/control_icons/lock_large_png.vtex");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.1;
	visibility: visible;
}

.Prediction.Hero:disabled .DisabledBlocker
{
	margin-top: 100px;
}

.Prediction.Player:disabled .DisabledBlocker
{
	margin-top: 100px;
}

.Small.Prediction
{
	margin-right: 40px;
	margin-top: 20px;
	width: 304px;
	height: 190px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2a2a2a ), to( #1e1e1e ) );
	border-top-color: #5D738E00;
	border-left-color: #ffffff04;
	border-bottom-color: #ffffff03;
	border-right-color: #ffffff04;
	overflow: noclip;
}

#MakePrediction
{
	horizontal-align: center;
}

.Prediction:disabled #MakePrediction
{
	visibility: collapse;
}

#PredictionContainer
{
	width: 100%;
	height: 100%;
	flow-children: down;
	horizontal-align: center;
}

.Unselected
{
	background-size: 100% auto;
}

.MakeLabel,.MadeSelection .ChangeLabel
{
	visibility: visible;
}

.ChangeLabel,.MadeSelection .MakeLabel
{
	visibility: collapse;
}

.Unowned #MakePrediction
{
	visibility: collapse;
}

#PredictionContainer .RemainingTime
{
	font-size: 15px;
	text-align: center;
}

#Question,#SingleRanking
{
	width: 100%;
	text-align: center;
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 2px;
	font-size: 16px;
	line-height: 20px;
	color: #e6e6e8;
	vertical-align: top;
}

.Team.MadeSelection #Question
{
	margin-top: 2px;
}

.Player:not(.MadeSelection) #Question
{
	margin-top: 10px;
}

.Team #Question
{
	margin-top: 14px;
}

.Small #Question,.Small #SingleRanking
{
	height: 24px;
}

#PredictionLines
{
	flow-children: down;
	visibility: collapse;
}

#ShowRanking
{
	horizontal-align: center;
	visibility: collapse;
	width: 170px;
}

.Locked #ShowRanking
{
	visibility: visible;
}

.NoAnswer #ShowRanking
{
	visibility: collapse;
}

#RankingText
{
	vertical-align: middle;
	font-size: 16px;
	horizontal-align: center;
}

.Locked .NoRanking #ShowRanking
{
	visibility: collapse;
}

.Locked #MakePrediction,.Unowned #MakePrediction
{
	visibility: collapse;
}

#PredictionLines
{
	flow-children: down;
	width: 100%;
}

.ShowingStandings #PredictionLines
{
	visibility: visible;
}

.ShowingStandings #RevealStandings,.ShowingStandings .RemainingTime,.ShowingStandings #Picker
{
	visibility: collapse;
}

#HideStandings
{
	visibility: collapse;
}

.ShowingStandings #HideStandings
{
	visibility: visible;
}

#Picker
{
	width: 162px;
	height: 162px;
	box-shadow: 1px 8px 52px #000a;
	margin-top: 16px;
	horizontal-align: center;
	background-color: #00000088;
	transition-property: border;
	transition-timing-function: ease;
	transition-duration: .1s;
}

.Prediction.Generic #Picker
{
	width: 90%;
	background-color: #0000;
	box-shadow: none;
}

.Team:not(.MadeSelection) #Picker
{
	border-radius: 50%;
	margin-top: 24px;
	border: 3px solid defaultColor&22;
}

.Team:not(.MadeSelection) .PredictionCell:hover #Picker
{
	border-brush: gradient( linear, 0% 0%, 0% 100%, from( #b48441 ), to( #644D2C ) );
}

.Team.MadeSelection #Picker
{
	overflow: noclip;
	width: 180px;
	height: 180px;
	box-shadow: 1px 8px 52px #0000;
	margin-top: 18px;
	horizontal-align: center;
	background-color: #0000;
}

.Team.MadeSelection #Picker #TeamImage Image
{
	img-shadow: 4px 14px 16px #000;
	transition-property: saturation, wash-color, img-shadow, transform, opacity;
	transition-duration: 0.16s;
	transition-timing-function: ease-in-out;
}

.Prediction.Team.MadeSelection .PredictionCell:hover #Picker #TeamImage Image
{
	opacity: 0.08;
}

.Prediction.NoAnswer:hover #Picker
{
	border-color: defaultColor;
}

.Hero #Picker
{
	height: 202px;
	border-radius: 6px;
	padding: 2px;
	background-repeat: no-repeat;
	background-size: 103.5% 102%;
	background-position: -3px -2px;
	border-radius: 4px;
	background-img-opacity: .35;
	border: 3px solid defaultColor&22;
}

.Prediction.Hero .PredictionCell:hover #Picker
{
	background-img-opacity: 1;
}

.Small #Picker
{
	width: 202px;
	height: 80px;
	border: 0px;
	margin-top: 22px;
	margin-left: 0px;
	horizontal-align: center;
}

.UnselectedMark
{
	color: secondaryDefaultColor;
	horizontal-align: center;
	vertical-align: center;
	visibility: visible;
}

.MadeSelection .UnselectedMark
{
	visibility: collapse;
}

.Small #Picker .UnselectedMark
{
	font-size: 40px;
	margin-top: 0px;
}

.Generic #Picker .UnselectedMark
{
	font-size: 64px;
	text-shadow: 2px 2px 12px black;
	color: defaultColor&66;
}

#Picker .UnselectedMark
{
	font-size: 60px;
	transition-property: opacity;
	transition-duration: 0.21s;
	transition-timing-function: ease-in-out;
	opacity: 1;
	color: defaultColor&66;
	z-index: 2;
}

.Prediction:disabled #Picker
{
	visibility: visible;
}

.PredictionCell .PredictionCell:hover #Picker .UnselectedMark
{
	opacity: 0;
}

.GenericLabel
{
	horizontal-align: center;
	vertical-align: center;
	text-overflow: shrink;
}

.Generic.MadeSelection .GenericLabel
{
	visibility: visible;
}

#HeroImage
{
	width: 100%;
	height: 100%;
	visibility: collapse;
}

.Hero.MadeSelection #HeroImage
{
	visibility: visible;
	width: 96%;
	height: 97%;
	border-radius: 4px;
	transition-property: blur, wash-color, saturation;
	transition-duration: .12s, .21s, .16s;
	transition-timing-function: ease-in-out;
}

.Prediction.Hero.MadeSelection .PredictionCell:hover #HeroImage
{
	blur: gaussian(2px);
	wash-color: defaultColor;
	saturation: 0.5;
}

#TeamImage
{
	width: 100%;
	height: 100%;
	vertical-align: center;
	visibility: collapse;
}

#PlayerImage
{
	width: 200px;
	height: 200px;
	margin-top: 16px;
	horizontal-align: center;
	visibility: collapse;
	img-shadow: 4px 4px 16px #000;
	border-radius: 50%;
	background-color: darkColor;
	ignore-parent-flow: true;
	background-size: 98%;
	background-img-opacity: .2;
	transition-property: wash-color;
	transition-duration: .16s;
	transition-timing-function: ease-in-out;
}

.Player.MadeSelection #Picker
{
	overflow: noclip;
	width: 100%;
	height: 70%;
	box-shadow: 1px 8px 52px #0000;
	margin-top: 8px;
	horizontal-align: center;
	background-color: #0000;
}

#PlayerImageUnknown
{
	width: 200px;
	height: 200px;
	transition-property: opacity;
	transition-duration: .16s;
	transition-timing-function: ease-in-out;
	visibility: collapse;
}

.PredictionCell:hover #PlayerImageUnknown
{
	opacity: .5;
}

.Player:not(.MadeSelection) #PlayerImageUnknown
{
	visibility: visible;
	wash-color: #000;
	horizontal-align: center;
	margin-top: 10px;
}

.Player:not(.MadeSelection) .UnselectedMark
{
	visibility: collapse;
}

.Player:not(.MadeSelection) #Picker
{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 3px solid defaultColor&22;
	background-color: gradient( radial, 50% 55%, 0% 0%, 90% 90%, from( #00000088 ), color-stop( .3, #00000088 ), color-stop( .6, #00000088 ), color-stop( .7, #00000088 ),to( #00000088 ) );
	margin-top: 24px;
	background-image: url("s2r://panorama/images/compendium/international2020/compendium/mainpredictions_well_psd.vtex");
	background-size: 98%;
	background-img-opacity: .05;
	box-shadow: none;
}

.Generic:not(.MadeSelection) #Picker
{
	border-radius: 4px;
	border: 3px solid defaultColor&22;
}

.Player.MadeSelection #PlayerImage,.Team.MadeSelection #TeamImage
{
	visibility: visible;
}

#Picker Label
{
	color: white;
	font-size: 18px;
	horizontal-align: center;
	vertical-align: center;
	text-align: center;
	line-height: 24px;
}

.Generic #Picker .GenericLabel
{
	width: 100%;
	padding: 58px 0;
	font-size: 34px;
	line-height: 42px;
	font-family: titleFont;
	background-color: #00000088;
	box-shadow: 2px 2px 4px #0002;
	text-shadow: 2px 2px 8px black;
	font-weight: semi-bold;
	background-size: 100%;
	color: secondaryUltraBrightColor;
	color: gradient( linear, 0% 50%, 0% 100%, from( accentColor ), to( accentColorBright ) );
}

.PredictionReward
{
	color: white;
	text-shadow: -1px 1px 8px 2 #000000bb;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: normal;
	horizontal-align: center;
	margin-left: 0px;
}

.PointsIcon
{
	background-image: bp_total_points;
	background-size: cover;
	width: 18px;
	height: 18px;
	horizontal-align: center;
}

.CompletedPanel
{
	width: 100%;
	height: 100%;
	visibility: collapse;
	z-index: 2;
	border: 1px solid white;
	border-brush: gradient( linear, 0% 0%, 0% 100%, from( #865d02 ), color-stop( 0.38, #ffde98 ),color-stop( 0.3, #ffeabb ), color-stop( 0.52, #aa6e2e ), color-stop( 0.8, #834d06 ), to( #724811 ) );
	border-radius: 3px;
}

.Achieved .CompletedPanel
{
	visibility: visible;
}

.CompletedBackground
{
	width: 54px;
	height: 54px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #865d02 ), color-stop( 0.38, #ffde98 ),color-stop( 0.3, #ffeabb ), color-stop( 0.52, #aa6e2e ), color-stop( 0.8, #BF9A49 ), to( #BF9A49 ) );
	opacity-brush: gradient( linear, 50% 0%, 100% 50%, from( #fff ), color-stop( .5, #fff ), color-stop( .5, #fff0 ), color-stop( .7, #fff0 ),to( #fff0 ) );
}

.CompletedPanel .CheckMark
{
	width: 20px;
	height: 20px;
	margin-left: 8px;
	margin-top: 6px;
	background-image: url("s2r://panorama/images/control_icons/check_png.vtex");
	background-size: contain;
	wash-color: black;
	transform: rotateZ(6deg);
}

#Choice
{
	horizontal-align: center;
	padding: 1px 6px;
	background-color: darkColor;
	border-radius: 4px;
	font-family: titleFont;
	text-align: center;
	font-size: 18px;
	color: ultraBrightColor;
	letter-spacing: 1px;
	margin-top: -18px;
	margin-bottom: 6px;
	box-shadow: 1px 1px 6px black;
	transition-property: opacity;
	transition-duration: .1s;
	transition-timing-function: ease-in-out;
	opacity: 0;
}

.Team #Choice
{
	margin-top: -10px;
}

.MadeSelection:not(.Generic) #Choice
{
	opacity: 1;
}

.Player #Choice
{
	margin-top: -16px;
	margin-bottom: 8px;
}

.Prediction.MadeSelection.Player .PredictionCell:hover #PlayerImage
{
	brightness: 1;
	wash-color: #503525;
}

.Small #Choice
{
	visibility: collapse;
}

i
{
	font-style: normal;
	font-size: 14px;
	color: rgb(139, 119, 110);
}

#HeroPredictions #Choice
{
	text-transform: uppercase;
}

#SingleRanking
{
	color: #93b94c;
	horizontal-align: center;
	width: 100%;
	text-align: center;
	font-size: 20px;
	vertical-align: bottom;
	margin-bottom: 36px;
	visibility: collapse;
	font-weight: thin;
	text-shadow: 3px 3px 4px 2 black;
	background-color: #93b94c05;
}

.Locked .NoRanking #SingleRanking
{
	visibility: visible;
}

.ResultValue
{
	font-weight: normal;
	color: white;
	vertical-align: middle;
}

#FinalPrizePoolPrediction.Prediction
{
	width: 440px;
	height: 110px;
	flow-children: right;
	horizontal-align: right;
	vertical-align: bottom;
	margin-right: 30px;
	margin-bottom: 64px;
	background-color: none;
}

#FinalPrizePoolPrediction.Prediction .XPCircle
{
	width: 64px;
	height: 64px;
	transform: translateX(366px) translateY(10px);
	margin-left: 14px;
	margin-top: 20px;
}

#FinalPrizePoolPrediction.Prediction .UnselectedMark
{
	visibility: collapse;
}

#FinalPrizePoolPrediction.Prediction #Picker
{
	width: 220px;
	height: 36px;
}

#FinalPrizePoolPrediction.Prediction #Question
{
	width: 300px;
	height: 20px;
	margin-top: -94px;
}

#FinalPrizePoolPrediction.Prediction Button
{
	margin-top: 40px;
}

#FinalPrizePoolPrediction.Prediction .PredictionReward
{
	margin-top: 12px;
}

#FinalPrizePoolPrediction.Prediction #PredictionContainer
{
	horizontal-align: left;
	height: 100%;
}

#FinalPrizePoolPredictionLockTime
{
	height: 44px;
	width: 228px;
	text-align: center;
	margin-left: -50px;
	margin-right: 6px;
	margin-top: 8px;
	font-size: 16px;
	color: secondaryUltraBrightColor;
	line-height: 17px;
}

.NoReward .XPCircle
{
	visibility:collapse;
}

.PredictionSection
{
	vertical-align: bottom;
	horizontal-align: center;
	flow-children: left;
	margin: 8px;
	wash-color: accentColorBright;
}

.PredictionButton
{
	width: 100%;
	height: 100%;
	z-index: 2;
	horizontal-align: center;
	transition-property: brightness, text-shadow, opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease;
	opacity: 0;
}

.PredictionCell:hover .PredictionButton
{
	opacity: 1;
}

.Generic .PredictionButtonLabel
{
	margin-top: 64px;
}

.PredictionButtonLabel
{
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	padding: 0px 20px;
	font-weight: semi-bold;
	color: #D0A73C;
	horizontal-align: center;
	vertical-align: center;
	text-align: center;
	text-shadow: 0px 0px 6px 1.5 #12100b44;
}

.CompendiumPoint .PointsIcon
{
	background-image: url("s2r://panorama/images/compendium/international2022/totalpoints_psd.vtex");
	margin-right: 3px;
}