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

@define textSecondaryBrightColor: white;
@define textSecondaryUltraBrightColor: white;
DOTA2025CTACollectorsCacheVotePage
{
	width: 100%;
	height: 100%;
}

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

#VotesLoading,#MainContents
{
	visibility: collapse;
}

.VotesLoading #VotesLoading,.VotesLoaded #MainContents,.VotesFailedToLoad #MainContents
{
	visibility: visible;
}

#VotesLoading
{
	vertical-align: middle;
	horizontal-align: center;
	flow-children: down;
}

#VotesLoading .Spinner
{
	horizontal-align: center;
	margin-bottom: 16px;
	width: 48px;
	height: 48px;
	wash-color: #999;
}

#VotesLoadingLabel
{
	text-align: center;
	horizontal-align: center;
	font-size: 24px;
	wash-color: #999;
}

#MainContents
{
	width: 100%;
	height: 100%;
	margin-top: 60px;
}

.TitleContainer
{
	horizontal-align: center;
	width: 100%;
	margin-bottom: -36px;
}

.TitleContainer .TitleLogoBackgroundImage
{
	width: 580px;
	horizontal-align: center;
	vertical-align: center;
	transform: translateY( -28px );
}

.TitleContainer .TitleTextContainer
{
	horizontal-align: center;
	vertical-align: center;
	flow-children: down;
	margin: 24px 0px;
}

.TitleContainer .TitleTextContainer Label
{
	text-align: center;
	horizontal-align: center;
}

.TitleContainer .TitleTextContainer .ContestTitle
{
	color: gradient( linear, 0% 35%, 0% 100%, from( white ), color-stop( 0.48, #EFE2D4 ), color-stop( 0.52, #B2A79B ), to( #555359 ) );
	margin-bottom: -4px;
	text-shadow: 0px 8px 48px 16 rgba(0, 0, 0, 0.6);
	max-height: 132px;
	text-overflow: shrink;
}

.TitleContainer .TitleTextContainer .ContestDescription
{
	font-family: titleFont;
	margin: 4px 56px 0px;
	font-size: 21px;
	color: LightestGrey;
	opacity: 0.6;
	text-shadow: 0px 4px 48px black;
	max-height: 63px;
	text-overflow: shrink;
}

.DashDotDivider .Dot
{
	width: 6px;
}

.DashDotDivider .Dash
{
	opacity: 0.4;
}

.CreatorsItemsContainer
{
	flow-children: right;
	margin-top: 16px;
}

#LargeModelPreview
{
	width: 1920px;
	height: 1000px;
	horizontal-align: center;
	margin-right: 700px;
	margin-top: 30px;
	opacity-mask: url("s2r://panorama/images/masks/hero_model_preview_mask_loadout_psd.vtex");
	opacity-mask-position: 0% -3%;
	transition-property: opacity;
	transition-duration: 0.3s;
}

@define justVotedAnimationDuration: 0.3s;
@keyframes 'JustUpvotedAnimation'
{
	0%
	{
		transform: none;
		opacity: 1.0;
	}
	
	100%
	{
		transform: rotateZ( 12deg ) translateX( 300px );
		opacity: 0.0;
	}
	
}

.JustUpvoted #LargeModelPreview
{
	sound: "contest_upvote";
	opacity: 0.0;
	transition-delay: 0.5s;
	animation-name: JustUpvotedAnimation;
	animation-duration: justVotedAnimationDuration;
	animation-timing-function: ease-in;
}

@keyframes 'JustDownvotedAnimation'
{
	0%
	{
		transform: none;
		opacity: 1.0;
	}
	
	100%
	{
		transform: rotateZ( -12deg ) translateX( -300px );
		opacity: 0.0;
	}
	
}

.JustDownvoted #LargeModelPreview
{
	sound: "contest_downvote";
	opacity: 0.0;
	transition-delay: 0.5s;
	animation-name: JustDownvotedAnimation;
	animation-duration: justVotedAnimationDuration;
	animation-timing-function: ease-in;
}

#ModelControls
{
	width: 700px;
	horizontal-align: center;
	vertical-align: bottom;
	flow-children: down;
	margin-bottom: 110px;
	margin-right: 700px;
}

#ButtonsContainer
{
	horizontal-align: center;
	flow-children: right;
}

.NavigateButton
{
	width: 48px;
	height: 48px;
	margin: 0px 8px;
	border-radius: 3px;
	border-top: 1px solid #d6e2ff10;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #354b60 ), to( #253646 ) );
	vertical-align: middle;
	box-shadow: 0px 0px 96px #00000030;
}

.NavigateButton:hover:enabled
{
	brightness: 2.0;
}

.NavigateButton:active
{
	brightness: 1.5;
}

.NavigateButton Label
{
	vertical-align: middle;
	horizontal-align: center;
	font-size: 24px;
}

.VoteButton
{
	width: 72px;
	height: 72px;
	margin: 0px 8px;
	border-radius: 3px;
	border-top: 1px solid #d6e2ff10;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #354b60 ), to( #253646 ) );
	vertical-align: middle;
	box-shadow: 0px 0px 18px #00000025;
	visibility: collapse;
}

.OwnsContestEvent .VoteButton
{
	visibility: visible;
}

.VoteButton:hover:enabled
{
	brightness: 2.0;
}

.VoteButton:active
{
	brightness: 1.5;
}

.VoteButton Label
{
	vertical-align: middle;
	horizontal-align: center;
	font-size: 32px;
}

#UpvoteButton
{
	background-image: url("s2r://panorama/images/control_icons/thumbs-up-voting_png.vtex");
	background-position: 50% 50%;
	background-size: 45%;
	background-repeat: no-repeat;
	z-index: 10;
}

#DownvoteButton
{
	background-image: url("s2r://panorama/images/control_icons/thumbs-down-voting_png.vtex");
	background-position: 50% 60%;
	background-size: 45%;
	background-repeat: no-repeat;
}

.Downvoted
{
	wash-color: #485677EE;
}

#NextButton
{
	background-image: url("s2r://panorama/images/control_icons/arrow_right_png.vtex");
	background-position: center;
	background-size: 50%;
	background-repeat: no-repeat;
}

#PreviousButton
{
	background-image: url("s2r://panorama/images/control_icons/arrow_left_png.vtex");
	background-position: center;
	background-size: 50%;
	background-repeat: no-repeat;
}

#ItemNumber
{
	margin-top: 10px;
	margin-bottom: 18px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: semi-bold;
	color: LighterGrey;
	horizontal-align: center;
	font-size: 18px;
}

#RightPanel
{
	horizontal-align: center;
	margin-top: 16px;
	margin-left: 750px;
	flow-children: down;
	width: 640px;
}

.AspectRatio21x9 #RightPanel
{
	margin-left: 860px;
}

#VotingTimeCountdown
{
	horizontal-align: center;
	margin-top: 60px;
	margin-right: 700px;
	width: 600px;
	padding: 24px 0px 16px;
	border-bottom: 1px solid rgba(219, 236, 255, 0.02);
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( rgba(255, 255, 255, 0) ), color-stop( 0.3, white ), color-stop( 0.7, white ), to( rgba(255, 255, 255, 0) ) );
	background-color: gradient( radial, 50% 100%, 0% 0%, 50% 80%, from( rgba(80, 113, 152, 0.2) ), to( gold3&00 ) );
}

#VotingTimeRemaining,#VotingFinished
{
	text-transform: uppercase;
	font-weight: semi-bold;
	letter-spacing: 2px;
	color: white;
	text-shadow: 0px 4px 16px black;
	visibility: collapse;
	horizontal-align: center;
}

#VotingTimeCountdown.CountdownActive #VotingTimeRemaining,#VotingTimeCountdown.CountdownAfterEnd #VotingFinished
{
	visibility: visible;
}

#ContestSubtitle
{
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: 3px;
	color: accentColor;
	text-shadow: 2px 2px 4px black;
	margin-top: -4px;
}

#HeroInfo
{
	flow-children: right;
	margin-top: 12px;
}

#HeroInfo #HeroImage
{
	height: 60px;
	width: 107px;
	margin-right: 16px;
	box-shadow: 0px 4px 24px -2px #000000a5;
}

#HeroInfo #HeroName
{
	vertical-align: center;
	color: LightestGrey;
	color: gradient( linear, 0% 35%, 0% 100%, from( #FFF2DF ), color-stop( 0.48, #ebc386 ), color-stop( 0.52, #BA8C47 ), to( #8d6c3a ) );
	text-shadow: 0px 4px 16px black;
}

.InfoSection
{
	width: fill-parent-flow(1);
	flow-children: down;
}

#CreatorsSection
{
	visibility: collapse;
}

.InfoSectionHeader
{
	width: 100%;
	flow-children: right;
}

#InGamePreviewSection .InfoSectionHeader
{
	margin-bottom: 8px;
}

#InGamePreviewSection .InfoSectionLabel,#InGamePreviewSection DemoModeButton
{
	vertical-align: bottom;
}

.InfoSectionLabel
{
	text-transform: uppercase;
	letter-spacing: 2px;
	color: LighterGrey;
	margin-bottom: 4px;
	font-weight: semi-bold;
}

#CreatorsContainer
{
	width: 100%;
	height: 100px;
}

.CreatorsState
{
	width: 100%;
	height: 100%;
	visibility: collapse;
}

.CreatorsState_Loaded #CreatorsList,.CreatorsState_Loading #CreatorsLoading,.CreatorsState_FailedToLoad #CreatorsFailedToLoad
{
	visibility: visible;
}

#CreatorsFailedToLoad Label
{
	color: Grey;
}

#CreatorsList
{
	flow-children: down;
	overflow: squish scroll;
}

.Creator
{
	width: 224px;
	margin-right: 8px;
	margin-bottom: 8px;
	flow-children: right;
	margin-top: 4px;
}

.Creator #CreatorAvatarImage
{
	width: 36px;
	height: 36px;
	margin-right: 12px;
}

.Creator #CreatorName
{
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 16px;
	padding-top: 4px;
}

#IncludedItemsList
{
	flow-children: right;
	height: 100px;
	width: 100%;
	overflow: scroll clip;
}

.IncludedItem
{
	width: 88px;
	height: 90px;
	border-bottom: 2px solid #485677;
	background-color: #060A13;
	margin-right: 8px;
}

.IncludedItem:selected
{
	border-bottom: 4px solid #A1B5D8;
}

.IncludedItem:hover
{
	brightness: 2.0;
}

.IncludedItem:active
{
	brightness: 1.5;
}

#InGamePreviewSection
{
	width: 640px;
	margin-top: 16px;
}

#InGamePreviewScene
{
	width: 100%;
	height: 268px;
	background-color: black;
}

.status
{
	font-size: 16px;
	font-weight: normal;
	horizontal-align: center;
	margin-bottom: 12px;
	text-shadow: 0px 2px 12px black;
	visibility: collapse;
}

#status-liked
{
	color: winnerGreenLow;
}

#status-disliked
{
	color: loserRed;
}

.Upvoted:not(.JustUpvoted) #status-liked,.Downvoted:not(.JustDownvoted) #status-disliked
{
	visibility: visible;
}

.DefaultButton
{
	width: 280px;
	height: 84px;
	margin: 0px 12px;
	border-top: 1px solid #485677;
	background-color: #253646;
	vertical-align: middle;
	box-shadow: 0px 0px 18px #00000025;
}

.DefaultButton:hover:enabled
{
	brightness: 2.0;
}

.DefaultButton:active
{
	brightness: 1.5;
}

#NoBpButton
{
	flow-children: right;
}

.OwnsContestEvent #NoBpButton
{
	visibility: collapse;
}

.bp-shield-container
{
	background-color: #162034;
	padding: 10px 0px 10px 0px;
}

.bp-shield
{
	width: 84px;
	height: 84px;
	background-color: #162034;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 10;
}

.bp-text
{
	width: 208px;
	height: 100%;
	flow-children: down;
}

.needs-battle-pass,.buy-battle-pass-link
{
	width: 100%;
	text-align: center;
	font-size: 14px;
}

.needs-battle-pass
{
	color: #fff;
	padding: 4px 12px;
	padding-top: 12px;
	line-height: 14px;
}

.buy-battle-pass-link
{
	color: #A1B5D8;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-decoration: underline;
}