/* styles for the social widgets */


@define sectionbg_inactive: #222629;
@define sectionbg_active: gradient( linear, 0% 0%, 0% 100%, from( #3e474b ), to( #282e2d ) );

DOTAPlay
{
	vertical-align: bottom;
	horizontal-align: right;
	margin-top: 57px;
	height: 100%;
	opacity: 0.9999;
}

//
// Play Button
//

#LowPriorityWarning
{
	visibility: collapse;
}

DOTAPlay.MatchingRestriction #LowPriorityWarning
{
	visibility: visible;
	background-color: red;
}
DOTAPlay.MatchingRestriction #LowPrioritySection
{
	visibility: visible;
}

#SearchReturnToWeekendTourneyButton
{
	background-position: 50% 50%;
	background-image: url("s2r://panorama/images/weekend_tourney/battle_cup_return_psd.vtex");
	background-size: 100% 100%;
    background-repeat: no-repeat;
	//wash-color: #00000066;
	border: 0px;

	width: 0px;
	opacity: 0.0;
	height: 40px;
	transition-property: width, opacity;
	transition-duration: .2s;
	margin: 6px 10px 0px 7px;
}

#ReturnVictoryIcon
{
	margin-top: 8px;
	margin-left: 9px;
	wash-color: #000000ee;
}


.CanReturnToWeekendTourney #SearchReturnToWeekendTourneyButton
{
	opacity: 1.0;
	width: 40px;
}

.CanReturnToWeekendTourney #SearchReturnToWeekendTourneyButton:hover
{
	brightness: 2;
}

#WeekendTourneyReturnToBracketButton Label
{
	horizontal-align: center;
}

.StateParticipatingInTourney #AbovePlayButtonStack
{
	margin-bottom: 68px;
}

#AbovePlayButtonStack
{
	flow-children: down;
	width: 330px;
	margin-bottom: 90px;
	margin-right: 58px;
	vertical-align: bottom;
	horizontal-align: right;
	transition-property: margin;
	transition-duration: .2s;
}

DOTAPlay.FindingMatch #AbovePlayButtonStack,
DOTAPlay.Connecting #AbovePlayButtonStack
{
	margin-bottom: 110px;
}

.StateParticipatingInTourney #AbandonButton
{
	margin-bottom: 10px;
}

#AbandonButton
{
	text-overflow: shrink;
	overflow: clip;
}

#AbandonButton Label
{
	max-height: 23px;
	max-width: 180px;
	text-overflow: shrink;
}

#AbandonGameLabel,
#AbandonTourneyLabel
{
	visibility: collapse;
}

DOTAPlay.CanAbandonGame #AbandonButton,
DOTAPlay.CanAbandonGame #AbandonGameLabel,
DOTAPlay.CanAbandonTourney #AbandonButton,
DOTAPlay.CanAbandonTourney #AbandonTourneyLabel
{
	opacity: 1;
	visibility: visible;
}

DOTAPlay.CanSafeLeaveGame #SafeLeaveButton
{
	visibility: visible;
	opacity: 1;
	height: 33px;
}


.LeaveGameButton
{
	width: 330px;
	min-width: 330px;

	margin-bottom: 100px;
	margin-right: 58px;

	padding: 4px 12px 4px 12px;

	vertical-align:bottom;
	horizontal-align: right;

	border-top: 1px solid #ffffff05;
	border-right: 1px solid #00000088;
	border-left: 1px solid #ffffff05;
	border-bottom: 1px solid #00000088;

	visibility: collapse;
}

.LeaveGameButton Label
{
	margin-top: 2px;
	horizontal-align: center;
	font-size: 18px;
	font-weight: bold;
	color: white;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: center;

	transition-property: color;
	transition-delay: 0.0s;
	transition-duration: 0.2s;
}

#DisconnectButton:active
{
	sound: "ui_custom_lobby_quit";
}

#ExtraReturnToWeekendTourneyButton
{
	background-position: 50% 50%;
	background-image: url("s2r://panorama/images/weekend_tourney/battle_cup_return_psd.vtex");
	background-size: 100% 100%;
    background-repeat: no-repeat;
	border: 0px;
	vertical-align: bottom;
	horizontal-align: right;
	width: 0px;
	height: 49px;
	transition-property: width, brightness;
	transition-duration: .2s;
	margin: 0px 340px 21px 0px;


	visibility: collapse;
}

#ExtraReturnToWeekendTourneyButton:hover
{
	brightness: 2;
}

#ExtraReturnVictoryIcon
{
	margin-top: 9px;
	margin-left: 10px;
	wash-color: #000000ee;
	width: 29px;
	height: 29px;
}

.CanReturnToWeekendTourney.CanReconnect #ExtraReturnToWeekendTourneyButton,
.CanReturnToWeekendTourney.CanDisconnect #ExtraReturnToWeekendTourneyButton
{
	visibility: visible;
	width: 49px;
}

DOTAPlay.CanDisconnect #DisconnectButton,
DOTAPlay.CanDisconnect #ReturnToGameButton
{
	visibility: visible;
}

DOTAPlay.Connecting #DisconnectButton,
DOTAPlay.Connecting #ReturnToGameButton
{
	visibility: collapse;
}

.StateParticipatingInTourney DOTAPlay.CanReturnToWeekendTourney.CanDisconnect #DisconnectButton
{
	width: 270px;
	transition-property: width;
	transition-duration: .2s;
	min-width: 270px;
}

#ReturnToGameButton
{
	vertical-align: bottom;
	horizontal-align: right;
	height: 47px;
	max-height: 47px;
	opacity: 0;

	margin-bottom: 40px;
	transition-property: opacity, background-color, box-shadow, border;
	transition-duration: 0.2s;
	transition-delay: 0.3s, 0s;
}

DOTAPlay.CanDisconnect #ReturnToGameButton
{
	opacity: 1;
}

#ReconnectButton
{
	vertical-align: bottom;
	horizontal-align: right;

	height: 47px;
	max-height: 47px;
	opacity: 0;

	margin-bottom: 40px;

	transition-property: opacity, background-color, box-shadow, border;
	transition-duration: 0.2s;
	transition-delay: 0.3s, 0s;
}

DOTAPlay.CanReconnect #ReconnectButton
{
	opacity: 1;
}

.StateParticipatingInTourney DOTAPlay.CanReturnToWeekendTourney.CanReconnect #ReconnectButton
{
	width: 270px;
	transition-property: width;
	transition-duration: .2s;
}

DOTAPlay.Connecting #ReconnectButton
{
	visibility: collapse;
}

DOTAPlay.ReconnectInProgress .ReconnectLabel
{
	visibility: collapse;
}

.Spinner
{
	horizontal-align: center;
	vertical-align: center;
}

.ReconnectSpinner
{
	visibility: collapse;
	horizontal-align: center;
	vertical-align: center;
	flow-children: right;
	width: fit-children;
}

DOTAPlay.ReconnectInProgress .ReconnectSpinner
{
	visibility: visible;
}

#WeekendTourneySetup
{
	visibility: collapse;
}
.WeekendTourneySetupVisible #WeekendTourneySetup
{
	visibility: visible;
}

#WeekendTourneyPlayStatusContainer
{

	vertical-align: bottom;
	horizontal-align: right;
}

#WeekendTourneyPlayStatusContainer Label
{
	text-align: center;
	text-transform: uppercase;
	line-height: 16px;
	color: #888;
	font-size: 16px;
	width:330px;
}

#WeekendTourneyPlayStatus,
#WeekendTourneyQueueDeadlineTooLateLabel,
#WeekendTourneyQueueDeadlineTimeRemainingContainer
{
	horizontal-align: center;
}

#WeekendTourneyQueueDeadlineTimeRemainingContainer
{
	flow-children: right;
	visibility: collapse;
}

.QueueDeadlineTimeRemaining #WeekendTourneyQueueDeadlineTimeRemainingContainer,
.QueueDeadlineExpiringSoon #WeekendTourneyQueueDeadlineTimeRemainingContainer
{
	visibility: visible;
}

.QueueDeadlineExpiringSoon #WeekendTourneyQueueDeadlineTimeRemainingLabel
{
	color: red;
}

#WeekendTourneyQueueDeadlineTooLateLabel
{
	visibility: collapse;
	color: red;
}



.QueueDeadlineTooLate #WeekendTourneyQueueDeadlineTooLateLabel
{
	visibility: visible;
}

.PlayButton
{
	width: 330px;
	max-height: 49px;

	margin-bottom: 21px;
	margin-right: 58px;

	padding: 4px 12px 4px 12px;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5A615Ecc ), to( #879695cc ) );
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5Aa15E ), to( #87d69533 ) );
	background-image: url("s2r://panorama/images/backgrounds/background_play_button_2x_png.vtex");
	background-size: 328px 50px;
    //background-repeat: no-repeat;


	box-shadow: fill #002a6644 -4px -4px 8px 9px;

	border-top: 1px solid #ffffff44;
	border-right: 1px solid #00000088;
	border-left: 1px solid #ffffff44;
	border-bottom: 1px solid #00000088;

	opacity: 1.0;

	transition-property: box-shadow, background-color, opacity, transform;
	transition-delay: 0.0s;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	

	/* TI10 STYLES */
	//background-color: gradient( linear, 0% 0%, 0% 100%, from( shadeColor ), to( accentColor ) );
	//box-shadow: fill ultraDarkColor -4px -4px 8px 9px;
}

.FindMatchSpinner
{
	visibility: collapse;
	horizontal-align: center;
	vertical-align: center;
}

.FindMsgInFlight .FindMatchSpinner, .WeekendTourneyParticipationMsgInFlight .FindMatchSpinner
{
	visibility: visible;
}

.FindMsgInFlight .PlayButton Label, .WeekendTourneyParticipationMsgInFlight .PlayButton Label
{
	opacity: 0.0;
}

/* Certain pages may want the play button to show up as disabled */
.DisablePlayButton #PlayButton,
.DisablePlayButton #DeniedPlayButton
{
	opacity: 0.1;
}

/* Certain pages might want to hide the play button entirely */
.HidePlayButton #PlayButton,
.HidePlayButton #DeniedPlayButton
{
	opacity: 0.0;
}

/* raise the visibility back up if they have the tab open */
.SlideOutVisible.DisablePlayButton #PlayButton,
.SlideOutVisible.DisablePlayButton #DeniedPlayButton,
.SlideOutVisible.HidePlayButton #PlayButton,
.SlideOutVisible.HidePlayButton #DeniedPlayButton
{
	opacity: 1.0;
}

.PlayButton:hover
{
	//background-color: gradient( linear, 0% 0%, 0% 100%, from( #5A615E ), to( #b7c6c5 ) );
	box-shadow: fill #414f4daa -4px -4px 8px 8px;
	brightness: 1.2;

	/* TI10 STYLES */
	//background-color: gradient( linear, 0% 0%, 0% 100%, from( defaultColor ), to( accentColorBright ) );
	//box-shadow: fill darkColor -4px -4px 8px 8px;
}

.PlayButton:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5A615E ), to( #ffffff ) );

	/* TI10 STYLES */
	//background-color: gradient( linear, 0% 0%, 0% 100%, from( shadeColor ), to( accentColor ) );
	//brightness: 0.8;
}

.PlayButton Label
{
	margin-top: 2px;
	horizontal-align: center;
	font-size:28px;
	font-weight: bold;
	color: white;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: center;
	height: 40px;
	text-overflow: shrink;
	text-shadow: 0px 0px 5px #000000;

	transition-property: color;
	transition-delay: 0.0s;
	transition-duration: 0.2s;
}


#PlayButton:activationdisabled Label
{
	wash-color: #aaaaaa;
}

#PlayButton
{
	visibility: visible;
	vertical-align: bottom;
	horizontal-align: right;
}

DOTAPlay.FindMsgInFlight #PlayButton
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5Aa15E ), to( #87d69533 ) );
}

DOTAPlay.FindMsgInFlight #PlayButton:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5Aa15E ), to( #87d695 ) );
}

DOTAPlay.PlayButtonStartsSearching #PlayButton,
#ReconnectButton,
#ReturnToGameButton
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5Aa15E ), to( #87d69533 ) );
	//box-shadow: fill #5Aa15E30 -4px -4px 8px 8px;
}

DOTAPlay.PlayButtonStartsSearching #PlayButton:enabled:hover,
#ReconnectButton:enabled:hover,
#ReturnToGameButton:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5Aa15E ), to( #87d695 ) );
	box-shadow: fill #5Aa15E20 -4px -4px 8px 8px;
}

DOTAPlay.PlayButtonStartsSearching #PlayButton:activationdisabled
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5A615Ecc ), to( #879695cc ) );
	saturation: 0.1;
	opacity: 0.5;
	box-shadow: none;
}

DOTAPlay.LobbySelectorVisible.MatchingRestriction #PlayButton,
DOTAPlay.LobbySelectorVisible #PlayButton
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #14161a ), to( #23262b ) );
	box-shadow: fill #00000000 0px 0px 0px 0px;
	border-top: 1px solid #ffffff03;
	border-left: 1px solid #ffffff03;
}

DOTAPlay.LobbyLeaderStart.MatchingRestriction #PlayButton,
DOTAPlay.LobbyLeaderStart #PlayButton
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2d4881cc ), to( #486ca9cc ) );
	box-shadow: fill #486ca922 -4px -4px 8px 8px;
	border-top: 1px solid #ffffff03;
	border-left: 1px solid #ffffff03;
}

DOTAPlay.LobbyLeaderStart.MatchingRestriction #PlayButton:not(:activationdisabled):hover,
DOTAPlay.LobbyLeaderStart #PlayButton:not(:activationdisabled):hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2d4881cc ), to( #84acff ) );
	box-shadow: fill #486ca966 -4px -4px 18px 8px;
}

DOTAPlay.LobbySelectorVisible #PlayButton Label
{
	color: #ffffff11;
}

DOTAPlay.LobbySelectorVisible.MatchingRestriction #PlayButton:not(:activationdisabled):hover,
DOTAPlay.LobbySelectorVisible #PlayButton:not(:activationdisabled):hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #14161a ), to( #23262b ) );
	box-shadow: fill #00000000 0px 0px 0px 0px;
}

DOTAPlay.LobbySelectorVisible.LobbyBrowserRowSelected #PlayButton
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2d4881cc ), to( #486ca9cc ) );
	box-shadow: fill #486ca922 -4px -4px 8px 8px;
}

DOTAPlay.LobbySelectorVisible.LobbyBrowserRowSelected #PlayButton:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2d4881cc ), to( #84acff ) );
	box-shadow: fill #486ca966 -4px -4px 18px 8px;
}


DOTAPlay.LobbySelectorVisible.LobbyBrowserRowSelected #PlayButton Label
{
	color: white;
}

DOTAPlay.LobbySelectorVisible.LobbyBrowserRowSelected #PlayButton Label
{
	color: white;
}

DOTAPlay.FindingMatch #PlayButton
{
	transform: translateX(-10px);
}

DOTAPlay.1v1Disallowed.SectionVisible_1v1  #PlayButton
{
	background-color: #444444;
}

DOTAPlay.CanReturnToWeekendTourney #DeniedPlayButton,
DOTAPlay.InReadyUp #DeniedPlayButton,
DOTAPlay.ReturningToQueue #DeniedPlayButton,
DOTAPlay.PlayButtonHidden #DeniedPlayButton,
{
	visibility: collapse;
}

DOTAPlay.InReadyUp #PlayButton,
DOTAPlay.ReturningToQueue #PlayButton,
DOTAPlay.PlayButtonHidden #PlayButton,
{
	visibility: collapse;
}

/* Normally this button shouldn't be needed, but if people get
   stuck in a bad state try to give them an out. This shows up
   on a delay so that hopefully it doesn't show in normal operation */
#LeaveQueueButton
{
	visibility: visible;

	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 0.2s;
	transition-delay: 5s;
}

DOTAPlay.ReturningToQueue #LeaveQueueButton
{
	opacity: 1.0;
	transition-delay: 0.0s;
}

#Searching
{
	//margin-right: 78px;
	padding-right: 78px;
	margin-bottom: 21px;
	width: 540px;
	vertical-align: bottom;
	horizontal-align: right;
	flow-children: down;
	opacity: 0.0;
	overflow: noclip;

	transition-property: transform, opacity;
	transition-duration: 0.4s;
	transition-delay: 0.0s;
	transition-timing-function: ease-in;

	transform: translatex(200px);
}


DOTAPlay.FindingMatch #Searching,
DOTAPlay.Connecting #Searching
{
	visibility: visible;
	opacity: 1.0;
	transform: none;
}

DOTAPlay.InReadyUp #Searching,
DOTAPlay.ReturningToQueue #Searching
{
	visibility: collapse;
}

DOTAPlay.FindingMatch #FXSearching
{
	opacity: 1.0;
}

DOTAPlay.MatchingRestriction #FXSearching
{
	wash-color: #ff5522;
}

#FXSearching
{
	width: 640px;
	height: 150px;
	horizontal-align: right;
	vertical-align: bottom;
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_png.vtex");
	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}

.StateParticipatingInTourney #FXSearching
{
	hue-rotation: 150deg;
	opacity: .5;
	brightness: .3;
}

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

.InHighPriorityQueue .FXSearchingParticles
{
	visibility: collapse;
}

.FXSearchingParticles.HighPriority
{
	visibility: collapse;
}
.InHighPriorityQueue .FXSearchingParticles.HighPriority
{
	visibility: visible;
}

#JoinPlaytestButton
{
	vertical-align: bottom;
	horizontal-align: right;
	margin-bottom: 76px;
	hue-rotation: 300deg;
	saturation: 15;
	visibility: collapse;
}

.MainBranch.PlaytestActive #JoinPlaytestButton
{
	visibility: visible;
}

/* The .PlayButton at the end is so we're more specific than the above. Gross, but it works. */
DOTAPlay.FindingMatch #JoinPlaytestButton.PlayButton,
DOTAPlay.Connecting #JoinPlaytestButton.PlayButton,
DOTAPlay.InReadyUp #JoinPlaytestButton.PlayButton,
DOTAPlay.ReturningToQueue #JoinPlaytestButton.PlayButton,
DOTAPlay.PlayButtonHidden #JoinPlaytestButton.PlayButton,
DOTAPlay.SlideOutVisible #JoinPlaytestButton.PlayButton,
.FindMsgInFlight #JoinPlaytestButton.PlayButton
{
	visibility: collapse;
}

#SearchWeekendTourneyDeadlineMissed
{
	color: red;
}

#SearchWeekendTourneyDontStopWarning,
#SearchWeekendTourneyDeadlineMissed,
#SearchWeekendTourneyEligibleForRefund
{
	visibility: collapse;
	width: 540px;
	padding-right: 57px;
	text-align: right;
	text-transform: uppercase;
	line-height: 16px;
	color: #888;
}

.QueueDeadlineExpiringSoon #SearchWeekendTourneyDontStopWarning,
.QueueDeadlineExpiredOK #SearchWeekendTourneyDontStopWarning,
.QueueDeadlineTooLate #SearchWeekendTourneyDeadlineMissed,
.QueueDeadlineEligibleForRefund #SearchWeekendTourneyEligibleForRefund
{
	visibility: visible;
}

#SearchSettingsContainer
{
	width: 100%;
	height: 26px;
}

#SearchSettingsContainer .LeftRightFlow
{
	flow-children: none;
	horizontal-align: right;
}

DOTAPlay.Connecting #SearchSettingsContainer
{
	visibility: collapse;
}

.SearchGradient
{
	width: 100%;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( transparent ), to( #59B0D222 ) );
	opacity-mask: url("s2r://panorama/images/masks/gradient_rightleft_png.vtex")1;
	border-top: 1px solid #59B0D212;
}

/*
.InHighPriorityQueue .SearchGradient
{
	background-color: gradient( linear, 0% 0%, 25% 0%, from( transparent ), to( #224654BB ) );
	opacity-mask: none;
}
*/

.StateParticipatingInTourney .SearchGradient
{
	hue-rotation: 180deg;
	brightness: .8;
	//saturation: .5;
}

#SearchSettings, #SearchSettingsWeekendTourney
{
	horizontal-align: right;
	text-transform: uppercase;
	margin-right: 117px;
	//width: 90%;
	padding-top: 4px;
	font-size: 16px;
	color: #99dfee;
	vertical-align: bottom;
}

#SearchSettingsWeekendTourney
{
	margin-right: 112px;
	color: #c3a771;
}

#SearchSettingsWeekendTourney
{
	visibility: collapse;
}

.SearchingForWeekendTourney #SearchSettings
{
	visibility: collapse;
}

.SearchingForWeekendTourney #SearchSettingsWeekendTourney
{
	visibility: visible;
}

#SearchingTime
{
	font-size: 16px;
	font-weight: thin;
	vertical-align: bottom;
	horizontal-align: right;
	margin-top: 2px;
	margin-left: 12px;
	margin-right: 57px;
	letter-spacing: 1px;

	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}


DOTAPlay.LANLobby #SearchSettings
{
	visibility: collapse;
}

#SearchingContainer
{
	margin-bottom: 0px;
	height: 50px;
	width: 100%;
	horizontal-align: right;
}

#SearchBackground
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( transparent ), to( #59B0D24a ) );
	border-top: 1px solid #59B0D277;
	border-bottom: 1px solid #59B0D277;
}

/*
.InHighPriorityQueue #SearchBackground
{
	background-color: gradient( linear, 0% 0%, 25% 0%, from( transparent ), to( #224654BB ) );
	opacity-mask: none;
	border-top: 1px solid #59B0D277;
	border-bottom: 1px solid #59B0D277;
}
*/

#SearchControlsContainer
{
	flow-children: right;
	horizontal-align: right;
}

#SearchLabelContainer
{
	//margin-right: 56px;
	animation-name: SearchingAnimation;
	animation-duration: 1.2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	horizontal-align: right;
}

.StateParticipatingInTourney #SearchLabelContainer
{
	animation-name: SearchingAnimation-BattleCup;
}

#MinigameButton
{
	visibility: collapse;
	width: 50px;
	height: 50px;
	//background-color: black;
	horizontal-align: right;
	margin-top: 1px;
	margin-right: 2px;
	z-index: 5;
	background-image: url("s2r://panorama/images/compendium/spring2016/treecutter_psd.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	animation-name: Hop;
	animation-duration: 0.20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.Season_International2016.SelfEventActive #MinigameButton
{
	visibility: visible;

}

#MinigameButton:hover
{
	animation-name: HopHover;
	brightness: 1.5;
}


@keyframes 'Hop'
{
	0%
	{
		transform: translateY(-2px);
	}

	50%
	{
		transform: translateY(2px);
	}

	100%
	{
		transform: translateY(-2px);
	}
}

@keyframes 'HopHover'
{
	0%
	{
		transform: translateY(-6px);
	}

	50%
	{
		transform: translateY(6px);
	}

	100%
	{
		transform: translateY(-6px);
	}
}


#MinigameButton Label
{
	font-size:30px;
}

@keyframes 'SearchingAnimation'
{
	0%
	{
		wash-color: white;
	}

	50%
	{
		wash-color: #7aa8b7;
	}

	100%
	{
		wash-color: white;
	}
}

@keyframes 'SearchingAnimation-BattleCup'
{
	0%
	{
		wash-color: white;
	}

	50%
	{
		wash-color: #fdd993cc;
	}

	100%
	{
		wash-color: white;
	}
}

#SearchingLabel
{
	opacity: 1.0;
	font-size: 30px;
	font-weight: thin;
	//color: #w;
	text-shadow: 0px 0px 6px 1.0 #c1c0ff;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 8px;
	//margin-right: 57px;

	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

.StateParticipatingInTourney #SearchingLabel
{
	text-shadow: 0px 0px 6px 1.0 #d77b16;
}

#SearchingCount
{
	visibility: collapse;
	margin-top: 40px;
}

DOTAPlay.SearchingCountVisible #SearchingCount
{
	visibility: visible;
	margin-top: 36px;
	opacity: .2;
	horizontal-align: right;
	//margin-right: 57px;
	font-size: 12px;
	color: white;
	text-shadow: 0px 0px 1px 3 black;
}

#CancelSearch
{
	wash-color: #00000066;
	width: 40px;
	height: 40px;
	horizontal-align: right;
	vertical-align: top;
	margin-top: 6px;
	margin-right: 57px;
	background-image: url("s2r://panorama/images/cancel_search_png.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;

}

#CancelSearch:hover
{
	wash-color: none;
}

DOTAPlay.ReadyUpAccepted #CancelSearch,
DOTAPlay.ReturningToQueue #CancelSearch
{
	visibility: collapse;
}

.PlayTabBackgroundImage
{
	width: 400px;
	height: 100%;
	background-size: 400px 667px;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	opacity: 0.35;
	saturation: 0.55;

	transition-property: opacity, background-image;
	transition-duration: .4s;
	transition-timing-function: ease-in-out;
}

.SectionVisible_Normal .PlayTabBackgroundImage				{ background-image: url("s2r://panorama/images/textures/playtabbg_normal_psd.vtex"); }
.SectionVisible_Ranked .PlayTabBackgroundImage				{ background-image: url("s2r://panorama/images/textures/playtabbg_ranked_psd.vtex"); }
.SectionVisible_1v1 .PlayTabBackgroundImage					{ background-image: url("s2r://panorama/images/textures/playtabbg_1v1_psd.vtex"); }
.SectionVisible_Mutation .PlayTabBackgroundImage			{ background-image: url("s2r://panorama/images/textures/playtabbg_mutations_psd.vtex"); }
.SectionVisible_PracticeBots .PlayTabBackgroundImage		{ background-image: url("s2r://panorama/images/textures/playtabbg_bots_psd.vtex"); }
.SectionVisible_CoachesChallenge .PlayTabBackgroundImage	{ background-image: url("s2r://panorama/images/textures/playtabbg_bots_psd.vtex"); }
.SectionVisible_CustomGames .PlayTabBackgroundImage			{ background-image: url("s2r://panorama/images/textures/playtabbg_bots_psd.vtex"); }

.Season_International2017 .SectionVisible_CustomGames .PlayTabBackgroundImage
{
	background-image: url("s2r://panorama/images/textures/playtabbg_siltbreaker_psd.vtex");
}

.Frostivus2017 .SectionVisible_CustomGames .PlayTabBackgroundImage
{
	background-image: url("s2r://panorama/images/textures/playtabbg_frostivus_psd.vtex");
}

.Season_International2018 .SectionVisible_CustomGames .PlayTabBackgroundImage
{
	background-image: url("s2r://panorama/images/front_page/ads/ti8/underhollow_psd.vtex");
}

.Season_International2019 .SectionVisible_CustomGames .PlayTabBackgroundImage
{
	background-image: url("s2r://panorama/images/compendium/international2019/morokai_play_bg_png.vtex");
	background-size: 100% 100%;
	opacity: .6;
	saturation: .8;
}

.Season_International2020 .SectionVisible_CustomGames .PlayTabBackgroundImage
{
	background-image: url("s2r://panorama/images/textures/playtabbg_aghanim_psd.vtex");
	background-size: 100% 100%;
}


.Season_Diretide.SectionVisible_CustomGames .PlayTabBackgroundImage
{
	background-image: url("s2r://panorama/images/textures/playtabbg_diretide2020_psd.vtex");
	background-size: 100%;
	background-repeat: no-repeat;
}

#DiretideDesc
{
	margin: 132px 20px 0px 20px;
	font-size: 16px;
	line-height: 24px;
	font-family: titleFont;
	font-weight: semi-bold;
	text-align: center;
	color: #ffffffcc;
	letter-spacing: 1px;
	text-shadow: 0px 0px 4px #d5d33144;
	height: 128px;
	text-overflow: shrink;
}

#DiretideRewardTextContainer
{
	margin: 136px 28px 0px 28px;
	height: 60px;
	width: 100%;
	text-overflow: shrink;
	horizontal-align: center;
	flow-children: down;
}

.DiretideRewardText
{
	font-size: 16px;
	line-height: 24px;
	font-family: titleFont;
	font-weight: semi-bold;
	text-align: center;
	color: #e0c3f0;
	color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from(#ffffff ), to(#ff9cff ) );
	text-shadow: 0px 0px 4px 3.0 rgba(155, 0, 155, 0.6);
	letter-spacing: 1px;
	text-transform: uppercase;
	visibility: collapse;
}

.DiretideRewardResetText
{
	font-size: 16px;
	color: #656666;
	font-family: monospaceNumbersFont;
	text-align: center;
	horizontal-align: center;
	text-transform: uppercase;
	text-overflow: shrink;
}

#DiretideDailyBonusCountdown 
{
	width: 100%;
	visibility: collapse;
	horizontal-align: center;
	text-align: center;
}

.DiretideRewardAvailable #DiretideRewardAvailable,
.DiretideRewardClaimed #DiretideRewardEarned,
.DiretideRewardClaimed #DiretideDailyBonusCountdown
{
	visibility: visible;
}


#CustomGamesSectionContent Label#DiretideDesc
{
	line-height: 22px;
	letter-spacing: 1px;
}

#DiretideInfoButton
{
	width: fit-children;
	height: fit-children;
	border: 2px solid #c4e07622;
	horizontal-align: center;
	vertical-align: top;
	margin-top: 80px;
	padding: 8px 16px 8px 18px;
	brightness: 0.6;
	background-color: none;

	transition-property: brightness, background-color;
	transition-duration: 0.2s;
}

#DiretideInfoButton:hover
{
	background-color: #c4e07607;
	brightness: 1.0;
}

#DiretideInfoButton Label
{
	font-size: 16px;
	font-family: titleFont;
	font-weight: semi-bold;
	color: #c4e176;
	letter-spacing: 1px;
    text-shadow: 0px 0px 4px #99a08688;
}

.LobbySelectorVisible .PlayTabBackgroundImage
{
	opacity: 0;
}

#PlaySlideOutBackground
{
	background-color: gradient( linear, 100% 0%, 100% 100%, from( #111111 ), color-stop( 0.01, #202327 ), color-stop( 0.2, #141619 ), to( #000000 ) );
	box-shadow: black -4px -4px 8px 8px;
	height: 100%;
	width: 760px;
	horizontal-align: right;
	//border: 2px solid #ff000012;
	transition-property: transform, opacity, background-color;
	transition-duration: 0.4s, 0.0s;
	transition-delay: 0.0s, 0.4s;
	transition-timing-function: ease-in-out;
}

#PlaySlideOut
{
	background-color: transparent;
	height: 100%;
	width: 760px;
	width: 1484px;
	horizontal-align: right;
	padding-bottom: 0px;

	transform: translatex(760px);
	opacity: 0.0;

	transition-property: transform, opacity, background-color;
	transition-duration: 0.4s, 0.0s;
	transition-delay: 0.0s, 0.4s;
	transition-timing-function: ease-in-out;

	flow-children: none;
	margin-left: 320px;
}

#Lobby
{
	opacity: 0.0;
	pre-transform-scale2d: 1.0;
	transition-property: opacity, pre-transform-scale2d;
	transition-duration: 0.4s;
	//transition-delay: 0.4s;
	transition-timing-function: ease-in-out;
}

DOTAPlay.SlideOutVisible.LobbyVisible #Lobby
{
	opacity: 1.0;
	pre-transform-scale2d: 1.0;
	transition-delay: 0.0s;
}

DOTAPlay.SlideOutVisible #PlaySlideOut
{
	transform: translatex(361px);
	sound: "ui_find_match_slide_in";
	sound-out: "ui_find_match_slide_out";
	opacity: 1.0;

	transition-property: transform, opacity;
	transition-duration: 0.4s, 0.4s;
	transition-delay: 0.0s, 0.4s;
}

DOTAPlay.LobbySelectorVisible #PlaySlideOut
{
	transform: translatex(44px);
	margin-left: 16px;
}

DOTAPlay.WeekendTourneySetupVisible #PlaySlideOut
{
	transform: translatex(44px);
	margin-left: 16px;
}

DOTAPlay.SlideOutVisible.LobbyVisible #PlaySlideOut
{
	transform: translatex(44px);
	margin-left: 16px;
	margin-left: 316px;
}

.AspectRatio16x10 DOTAPlay.SlideOutVisible.LobbyVisible #PlaySlideOut
{
	transform: translatex(44px);
	margin-left: 16px;
	margin-left: 252px;
}

DOTAPlay.SlideOutVisible #CloseButton
{
	opacity: 1.0;
	transition-delay: 0.0s;
}

DOTAPlay.LobbyVisible #CloseButton
{
	//visibility: collapse;
}

#CloseButton
{
	opacity: 0.0;
	height: 100%;
	horizontal-align: right;
	padding-right: 8px;
	background-color: gradient( radial, 100% 25%, 0% 15%, 90% 50%, from( #00000000 ), to( #00000000 ) );
	transition-property: background-color, opacity;
	transition-duration: 0.15s;
	transition-delay: 0.55s;
	transition-timing-function: ease-in-out;
}

#CloseButton:hover
{
	background-color: gradient( radial, 100% 25%, 0% 15%, 90% 50%, from( #48575e44 ), to( #00000000 ) );
}


#CloseButtonIcon
{
	margin-left: 6px;
	vertical-align: center;
	width: 32px;
	height: 32px;

	background-image: url("s2r://panorama/images/control_icons/arrow_solid_right_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;

	transform: translateX(0px);
	wash-color: #445255;

	transition-property: wash-color, transform;
	transition-duration: 0.15s;
	transition-timing-function: ease-in-out;
}

#CloseButton:hover #CloseButtonIcon
{
	transform: translateX(4px);
	wash-color: #445255dd;
}

#LobbyBrowser
{
	width: 100%;
	height: 860px;
}

#LobbySelectorContent
{
	background-color: gradient( linear, 100% 0%, 100% 100%, from( #111111 ), color-stop( 0.01, #202327 ), color-stop( 0.2, #141619 ), to( #000000 ) );
	box-shadow: black -4px -4px 8px 8px;
	width: 720px;
	opacity: 0.0;
	padding-top: 16px;
	margin-right: 46px;
	padding-right: 40px;
	flow-children: down;
	horizontal-align: right;
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

DOTAPlay.LobbySelectorVisible #LobbySelectorContent
{
	opacity: 1.0;
}

DOTAPlay.LobbyVisible #LobbySelectorContent
{
	opacity: 0.0;
}

#WeekendTourneySetup
{
	//background-color: gradient( linear, 100% 0%, 100% 100%, from( #111111 ), color-stop( 0.01, #202327 ), color-stop( 0.2, #141619 ), to( #000000 ) );
	background-color: gradient( linear, 100% 0%, 100% 100%, from( #111111 ), color-stop( 0.01, #1c1e20 ), color-stop( 0.06, #1b1b1b ), color-stop( 0.9, #151515 ), to( #000000 ) );
	box-shadow: black -4px -4px 8px 8px;
	height: 920px;
	width: 715px;
	opacity: 0.0;
	padding-top: 16px;
	margin-right: 46px;
	padding-right: 40px;
	horizontal-align: right;
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
	//border-left:  1px solid #ffffff02;
}

DOTAPlay.WeekendTourneySetupVisible #WeekendTourneySetup
{
	opacity: 1.0;
}

#PlaySlideOutContent
{
	width: 330px;
	vertical-align: bottom;
	horizontal-align: center;
	margin-left: 320px;
	margin-bottom: 70px;
	opacity: 1.0;

	margin-top: 20px;

	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

.AspectRatio4x3 #PlaySlideOutContent
{
	margin-left: 0px;
	margin-right: 50px;
}

.AspectRatio4x3 #DisconnectButton,
.AspectRatio4x3 #ReturnToGameButton,
.AspectRatio4x3 #AbovePlayButtonStack
{
	margin-right: 40px;
}

.AspectRatio16x10 #PlaySlideOutContent
{
	margin-left: 240px;
}

DOTAPlay.LobbySelectorVisible #PlaySlideOutContent,
DOTAPlay.WeekendTourneySetupVisible #PlaySlideOutContent
{
	opacity: 0.0;
	//transform: translateX(430px);
}

DOTAPlay.LobbyVisible #PlaySlideOutContent
{
	opacity: 0.0;
}

Label
{
	color: white;
	font-size: 16px;
}

.RankedContent DOTASettingsCheckbox:disabled:hover Label
{
	color: #d2d6d1;
}

.RankedContent DOTASettingsCheckbox:disabled Label
{
	color: white;
}

ToggleButton:disabled Label
{
	color: black;
}

ToggleButton:disabled:selected .TickBox
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #222222 ), to( #333333 ) );
	border: 3px solid #000000;
	box-shadow: #33333377 -4px -4px 8px 8px;
}

.RankedMMRSection
{
	padding-bottom: 8px;
	background-color: #252B30;
	box-shadow: inset #00000066 0px 2px 6px 0px;

	width: 100%;

	flow-children: down;
}

.RankedMMRSectionContents
{
	flow-children: down;
}

.RankedMMRSection Label
{
	horizontal-align: left;
	margin-top: 2px;
}

.RankedMMRSectionIcon
{
	width: 32px;
	height: 32px;
	margin-right: 8px;
	margin-bottom: 4px;

	vertical-align: middle;

	background-image: url("s2r://panorama/images/icon_mmr_medium_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	wash-color: #777;

	tooltip-position: left;
	tooltip-body-position: 50% 50%;
}

.RankedMMRSection .SectionHeaderLabel
{
	color: white;
	font-weight: bold;
	margin-bottom: 6px;
	margin-left: 4px;
	margin-right: 4px;
}

.RankedMMRSection .UnlockRankedExplain
{
	color: #d6d6d6;
	margin-bottom: 12px;
	width: 100%;
	text-align: center;
	font-size: 14px;
}

.RankedMMRSection .Detail1
{
	color: #d6d6d6;
	margin-bottom: 6px;
	margin-left: 4px;
	margin-right: 4px;
}

.RankedMMRSection .Detail2
{
	color: grey;
	font-size: 14px;
	margin-left: 4px;
	margin-right: 4px;
}

#RankedLockedProgress
{
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.RankedMMRSection .RankedLockedProgressLabel
{
	horizontal-align: center;
	text-transform: uppercase;
	vertical-align: center;
	font-size: 14px;
}

.RankedMMRSection .ProgressBarLeft
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #002222FF ), to( #008fC2FF ) );
}

#PartyMMRLabel
{
	min-width: 36px;
	margin-right: 8px;
	color: #959596;
}

#RankedSection
{
    /* Unfortunately we can't use fit-children as it doesn't transition height properly, so we hardcode possible heights below */
    //height: fit-children;
    overflow: squish clip;
}

DOTAPlay.SectionVisible_Ranked #RankedSection
{
	background-color: sectionbg_active;
    opacity: 1.0;
}

DOTAPlay.SectionVisible_Ranked:not(.EligibleForRanked) #RankedSection
{
    height: 346px;
}

DOTAPlay.SectionVisible_Ranked.EligibleForRanked #RankedSection
{
    /* Unfortunately we can't use fit-children as it doesn't transition height properly, so we hardcode possible heights below */
    /* However, it can be useful to temporarily turn this on to find what the heights actually are when changing things */
    //height: fit-children;

  	height: 514px;
}

DOTAPlay.SectionVisible_Ranked.EligibleForRanked.PlayDisabled_NoModesSelected #RankedSection
{
    height: 528px;
}

DOTAPlay.SectionVisible_Ranked.EligibleForRanked.ValidTeamIdentity #RankedSection
{
    height: 594px;
}

DOTAPlay.SectionVisible_Ranked.EligibleForRanked.ValidTeamIdentity.PlayDisabled_NoModesSelected #RankedSection
{
    height: 608px;
}

DOTAPlay.SectionVisible_Ranked.EligibleForRanked.ClassicRanked #RankedSection
{
  	height: 293px;
}

DOTAPlay.SectionVisible_Ranked.EligibleForRanked.PlayDisabled_NoModesSelected.ClassicRanked #RankedSection
{
    height: 307px;
}

DOTAPlay.SectionVisible_Ranked.EligibleForRanked.ValidTeamIdentity.ClassicRanked #RankedSection
{
    height: 373px;
}

DOTAPlay.SectionVisible_Ranked.EligibleForRanked.ValidTeamIdentity.PlayDisabled_NoModesSelected.ClassicRanked #RankedSection
{
    height: 387px;
}

DOTAPlay.SectionVisible_Normal #GameModeSection
{
	background-color: sectionbg_active;
	opacity: 1.0;
}

DOTAPlay.SectionVisible_1v1 #1v1Section
{
	background-color: sectionbg_active;
	height: 145px;
	opacity: 1.0;
}

DOTAPlay.SectionVisible_1v1.1v1Disallowed #1v1Section
{
	background-color: sectionbg_active;
	height: 175px;
	opacity: 1.0;
}

#1v1PartyWarning
{
	margin-top: 8px;
	visibility: collapse;
	color: red;
}

DOTAPlay.1v1Disallowed #1v1PartyWarning
{
	visibility: visible;
}

DOTAPlay.SectionVisible_Mutation #MutationSection
{
	height: 270px;
	opacity: 1.0;
}

DOTAPlay.SectionVisible_Mutation.MutationCount7 #MutationSection
{
	height: 340px;
	opacity: 1.0;
}


DOTAPlay.SectionVisible_Mutation #MutationSection #CurrentMutation
{
	margin-top: 4px;
	color: #999;
	horizontal-align: center;
}


DOTAPlay.SectionVisible_Mutation .Mutation
{
	width: 250px;
	height: 27px;
	border: 1px solid #6da787;
	background-color: #6da78711;
	horizontal-align: center;
	margin-bottom: 4px;
}


DOTAPlay.SectionVisible_Mutation.MutationCount7 .Mutation
{
	height: 20px;
	margin-bottom: 2px;
}

DOTAPlay.SectionVisible_Mutation .Mutation Label
{
	margin-top: 4px;
	width: 100%;
	text-align: center;
	text-overflow: shrink;
}

DOTAPlay.SectionVisible_Mutation.MutationCount7 .Mutation Label
{
	margin-top: 2px;
}

DOTAPlay.SectionVisible_Mutation .Mutation .InfoIcon
{
	wash-color: #999;
	width: 14px;
	height: 14px;
	margin-top: 2px;
}

DOTAPlay.SectionVisible_Mutation .TimeRemaining
{
	margin-top: 8px;
	flow-children: right;
}
DOTAPlay.SectionVisible_Mutation .TimeRemaining Label
{
	color: #999;
}
DOTAPlay.SectionVisible_Mutation .TimeRemaining Label.Numbers
{
	color: #CCA86E;
}

DOTAPlay.SectionVisible_PracticeBots #PracticeBotsSection
{
	background-color: sectionbg_active;
	height: 370px;
}

.Language_thai DOTAPlay.SectionVisible_PracticeBots #PracticeBotsSection
{
	height: 390px;
}

DOTAPlay.SectionVisible_Lobbies #LobbiesSection
{
	background-color: sectionbg_active;
	height: 103px;
}

#LobbiesSectionContent
{
	width: 100%;
}

#LobbyOptions
{
	flow-children: right;
	width: 100%;
	padding: 8px 12px;
}

#LobbyOptions > Button
{
	width: fill-parent-flow( 1.0 );
	background-color: #1b2020;
	border: 2px solid #444c4c;

	transition-property: brightness;
	transition-duration: 0.2s;
}

#LobbyOptions > Button:hover
{
	brightness: 2.0;
}

#LobbyOptions > Button:active
{
	brightness: 1.5;
}


.LobbyOptionCenter
{
	horizontal-align: center;
	flow-children: right;
}

#LobbyOptions > Button Label
{
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 16px;
	color: #7f8b8d;
	padding-top: 4px;
	padding-bottom: 2px;
	padding-right: 0px;
}

.LobbyOptionIcon
{
	width: 13px;
	height: 13px;
	margin-right: 5px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
	wash-color: #7f8b8d;
}

#CreateNewLobbyButton
{
	margin-right: 6px;
}

#CreateNewLobbyButton .LobbyOptionIcon
{
	background-image: url("s2r://panorama/images/control_icons/plus_thin_png.vtex");
}

#BrowseLobbiesButton
{
	margin-left: 6px;
}
#BrowseLobbiesButton .LobbyOptionIcon
{
	width: 15px;
	height: 15px;
	transform: translateY( -1px );
	background-image: url("s2r://panorama/images/control_icons/icon_search_png.vtex");
}



DOTAPlay.SectionVisible_CustomGames.DarkMoon #CustomGamesSection
{
	background-color: sectionbg_active;
	height: 142px;
}

DOTAPlay.SectionVisible_CustomGames.Season_International2017 #CustomGamesSection
{
	background-color: sectionbg_active;
	height: 185px;
	opacity: 1.0;
}

DOTAPlay.SectionVisible_CustomGames.Frostivus2017 #CustomGamesSection
{
	background-color: sectionbg_active;
	height: 185px;
	opacity: 1.0;
}

DOTAPlay.SectionVisible_CustomGames.Season_International2018 #CustomGamesSection
{
	background-color: sectionbg_active;
	height: 290px;
	opacity: 1.0;
}

DOTAPlay.SectionVisible_CustomGames.Season_International2020 #CustomGamesSection
{
	background-color: sectionbg_active;
}

DOTAPlay.Season_Frostivus2018 #CustomGamesSection
{
	height: 74px;
}

.PlayDividerLine
{
	background-color: #20223088;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 12px;
	margin-bottom: 12px;
	height: 2px;
	width: 100%;
}

#PracticeBotsSectionContent .PlayDividerLine
{
	margin-top: 8px;
	margin-bottom: 8px;
}


.PlayTabRadio
{
	margin-left: 4px;
	margin-bottom: 6px;
}

.CoopOrSolo
{
	margin-left: 4px;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.PlayBotsLabel
{
	margin-left: 32px;
	color: #999999;
}

#RankedCheckBox
{
	margin-top: 5px;
	margin-bottom: 5px;
}

#RankedOff
{
	visibility: visible;
	margin-left: 8px;
	margin-top: 14px;
	color: #dafef6;
}

DOTAPlay.RankedMode #RankedOff
{
	visibility: collapse;
}

#RankedOn
{
	visibility: collapse;
	margin-left: 8px;
	margin-top: 14px;
	color: #dafef6;
}

DOTAPlay.RankedMode #RankedOn
{
	visibility: visible;
}

.Ranked_Lock
{
	margin-right: 16px;
	margin-top: 5px;
	visibility: visible;
	width: 16px;
	height: 16px;
	wash-color: #91ABA6;
	horizontal-align: right;
}

// enable when we unlock ranked
.EligibleForRanked .Ranked_Lock
{
	visibility: collapse;
}

#RankedSectionContent
{
    width: 100%;
    height: fit-children;

	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
    opacity: 0.0;
    visibility: collapse;
}

.SectionVisible_Ranked #RankedSectionContent
{
    opacity: 1.0;
    visibility: visible;
}

#RankedRolesContainer
{
	visibility: visible;
    height: 221px;

	transition-property: height;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}

.ClassicRanked #RankedRolesContainer
{
	//visibility: collapse;
    height: 0px;
}

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

.EligibleForRanked .RankedSectionContent_Locked
{
	visibility: collapse;
}

.RankedContent
{
    width: 100%;
    flow-children: down;
    visibility: collapse;
}


.EligibleForRanked .RankedContent
{
    visibility: visible;
}

.RankedContent__ModeSelection
{
	flow-children: right;
	padding-left: 10px;
	background-color: #252B30;
}

.RankedContent__ModeSelection RadioButton
{
	padding: 8px 8px 8px 0px;
}

#RankDisplayContainer
{
	flow-children: none;
	height: 56px;
	padding-left: 10px;
	overflow: noclip;
	z-index: 3;
}

#RankDisplayContainer.RankTier0
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #636769 ), to( #22272c ) );
}

#RankDisplayContainer.RankTier1
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #506f41 ), to( #21262a ) );
}

#RankDisplayContainer.RankTier2
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #6c4426 ), to( #21262b ) );
}

#RankDisplayContainer.RankTier3
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #2c6366 ), to( #21262b ) );
}

#RankDisplayContainer.RankTier4
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #245751 ), to( #21262a ) );
}

#RankDisplayContainer.RankTier5
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #742124 ), to( #21262b ) );
}

#RankDisplayContainer.RankTier6
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #652e7f ), to( #22272d ) );
}

#RankDisplayContainer.RankTier7
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #796d46 ), to( #21262b ) );
}

#RankDisplayContainer.RankTier8
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #736634 ), to( #21262b ) );
}

#RankDisplayContainer.RankTier8.LeaderboardRank1000
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #736634 ), to( #21262b ) );
}

#RankDisplayContainer.RankTier8.LeaderboardRank100
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #726434 ), to( #24282d ) );
}

#RankDisplayContainer.RankTier8.LeaderboardRank10
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #726535 ), to( #21262b ) );
}

.RankedContent__RankDisplay .RankTierContainer
{
	height: 56px;
	width: 56px;
	horizontal-align: right;
	margin-right: 16px;
	overflow: noclip;
}

.RankedContent__RankDisplay .RankTierImage,
.RankPipImage
{
	background-size: 150%;
	background-position: top;
	background-repeat: no-repeat;
	overflow: noclip;
}

.RankedContent__RankDisplay #RankNameContainer
{
	width: 200px;
	vertical-align: center;
	flow-children: down;
	horizontal-align: left;
	padding: 8px 10px 6px 10px;
}

.RankedContent__RankDisplay #RankNameContainer #RankNameLarge
{
	color: gradient( linear, 0% 0%, 0% 100%, from( #ffffff ), to( #bbb ) );
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
	text-shadow: 1px 2px 2px #00000080;
}


.RankedContent__RankDisplay #RankNameContainer #RankPipsContainer
{
	flow-children: right;
	/* height: 18px; */
	width: 100%;
	/* margin-top: 4px; */
}


.RankedContent__RankDisplay #RankNameContainer #RankPipsContainer .RankPipStar
{
	background-size: contain;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	margin-top: 2px;
}

.RankPipStar
{
	background-image: url("s2r://panorama/images/rank_tier_icons/star_shadow_png.vtex");
}

.RankPips1 #RankPipImage1,
.RankPips2 #RankPipImage1, .RankPips2 #RankPipImage2,
.RankPips3 #RankPipImage1, .RankPips3 #RankPipImage2, .RankPips3 #RankPipImage3,
.RankPips4 #RankPipImage1, .RankPips4 #RankPipImage2, .RankPips4 #RankPipImage3, .RankPips4 #RankPipImage4,
.RankPips5 #RankPipImage1, .RankPips5 #RankPipImage2, .RankPips5 #RankPipImage3, .RankPips5 #RankPipImage4,.RankPips5 #RankPipImage5,
{
	background-image: url("s2r://panorama/images/rank_tier_icons/star_yellow_png.vtex");
	img-shadow: 0px 1px 0px #00000020;
}

#RankDisplayContainer.RankTier8 .RankPipStar
{
	visibility: collapse;	
}

#LeaderboardRankLabelLarge
{
	visibility: collapse;
	color: gradient( linear, 0% 0%, 0% 100%, from( #ffe6b9 ), to( #dfaf57 ) );
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	text-shadow: 1px 1px black;
	font-size: 18px;
}

.LeaderboardRank1000 #LeaderboardRankLabelLarge, .LeaderboardRank100 #LeaderboardRankLabelLarge, .LeaderboardRank10 #LeaderboardRankLabelLarge
{
	visibility: visible;
}


ToggleButton Label
{
	text-transform: uppercase;
}

RadioButton Label
{
	text-transform: uppercase;
}

#CustomGamesSectionContent RadioButton Label,
#1v1SectionContent RadioButton Label,
#MutationSectionContent RadioButton Label
{
	text-transform: none;
}

#1v1SectionContent
{
	padding: 8px;
	width: 100%;
	visibility: collapse;
}

#GameStyle_1v1 Label
{
	text-transform: none;
}

DOTAPlay.SectionVisible_1v1 #1v1SectionContent
{
	visibility: visible;
}

#MutationSectionContent
{
	padding: 14px;
	width: 100%;
	visibility: collapse;
}

#GameStyle_Mutation Label
{
	text-transform: none;
}

DOTAPlay.SectionVisible_Mutation #MutationSectionContent
{
	visibility: visible;
}

#GameStyle_Mutation Label
{
	text-transform: none;
}


#PracticeBotsSectionContent
{
	width: 100%;
	padding: 8px;
	opacity: 0.0;
	overflow: squish clip;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

#PlayBotsSolo, #PlayBotsCoop
{
	width: 150px;
}

#BotSectionContainer
{
	width: 100%;
}

.BotSectionColumn
{
	width: fill-parent-flow( 1.0 );
}

#CustomGamesSection
{
	visibility: collapse;
	height: fit-children;
}

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

DOTAPlay.MatchmadeCustomGameAvailable #CustomGamesSection
{
	visibility: visible;
}

.Season_International2020 #CustomGamesSectionContent
{
	width: 100%;
	height: 0px;
	flow-children: down;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #151d2e ), to( #000000 ) );
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transition-property: height;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
	/* border-left: 2px solid #4F3612;
	border-right: 2px solid #4F3612;
	border-bottom: 2px solid #4F3612; */
	background-image: url("s2r://panorama/images/events/aghanim/aghs_ink_png.vtex");
	background-size: 150%;
	background-position: center;
	background-repeat: no-repeat;
}


.Season_Diretide #CustomGamesSectionContent
{
	width: 100%;
	height: 0px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #151d2e ), to( #000000 ) );
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transition-property: height;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;

	background-image: url("s2r://panorama/images/events/diretide/2020/diretide_play_bg_psd.vtex");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.DiretideLogo
{
	height: 140px;
	width: 100%;
	background-image: url("s2r://panorama/images/events/diretide/2020/diretide_logo_en_psd.vtex");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 8px;
	vertical-align: top;
}

.Language_schinese .DiretideLogo, .Language_tchinese .DiretideLogo {
	background-image: url("s2r://panorama/images/events/diretide/2020/diretide_logo_cn_psd.vtex");
}

.Language_russian .DiretideLogo {
	background-image: url("s2r://panorama/images/events/diretide/2020/diretide_logo_ru_psd.vtex");
}

#Diretide2020HowToPlay
{
    width: 200px;
    height: 50px;
}

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

.CandyCountSection
{
	flow-children: down;
	horizontal-align: center;
	vertical-align: center;
}

.CandyHeader
{
	text-align: center;
	horizontal-align: center;
	vertical-align: top;
}

.CandyBucket
{
	height: 104px;
	width: 134px;
	background-image: url("s2r://panorama/images/events/diretide/candycount_png.vtex");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.CandyBucket.Precache
{
	background-image: url("s2r://panorama/images/events/diretide/chat_line_png.vtex");
	background-image: url("s2r://panorama/images/events/diretide/emoticon_png.vtex");
	background-image: url("s2r://panorama/images/events/diretide/spray_png.vtex");
}

#DifficultySelector
{
	padding: 8px;
	padding-left: 12px;
}

DOTAPlay.SectionVisible_CustomGames #CustomGamesSectionContent
{
	height: 470px;
}

DOTAPlay.Season_Diretide.SectionVisible_CustomGames #CustomGamesSectionContent
{
	height: 420px;
	flow-children: none;
}

#CustomGamesSectionContent Panel
{
}

#CustomGamesSectionContent Label
{
//	color: #fff;
//	font-size: 14px;
	letter-spacing: 2px;
	line-height: 20px;
}

#CustomGamesSectionContent .DifficultySelectorTitle
{
	font-size: 16px;
	line-height: 17px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #acb9d3;

	margin-bottom: 8px;
	margin-left: 8px;
}

.CustomGameDifficultyButton
{
	margin: 5px;
	height: 40px;
	brightness: 0.8;
	padding-left: 8px;
}

.CustomGameDifficultyButton.Challenge
{
	height: 48px;
}

.EventGameCompetitionOver .CustomGameDifficultyButton.Challenge
{
	visibility: collapse;
}

.CustomGameDifficultyButton:selected
{
	brightness: 1.2;
}

.CustomGameDifficultyButton Label
{
	font-size: 16px;
	letter-spacing: 2px;
	vertical-align: middle;
	margin: 0;
	margin-left: -24px;
	width: 260px;
	color: #ffffff;

	background-color: gradient( linear, 0% 0%, 100% 0%, from( #6D553100 ), color-stop(0.2, #6D5531cc ), color-stop(0.4, #c9a16480 ), to( #C9A06400 ) );
	padding: 4px 24px 6px 32px;
	text-shadow: 1px 2px 2px #000000;
	z-index: 1;
}

.CustomGameDifficultyButton Label.Challenge
{
	padding-bottom: 0;
	padding-top: 0;
}

#ChallengeText .Challenge 
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #6d313100 ), color-stop(0.2, #6d3131cc ), color-stop(0.4, #c9646480 ), to( #c9646400 ) );
}

#ChallengeText
{
	flow-children: down;
	vertical-align: middle;
	margin-top: 2px;
}

.CustomGameDifficultyButton Label.Title
{
	font-size: 16px;
	margin-top: 0px;
	color: white;
	padding-top: 2px;
}

.CustomGameDifficultyButton Label.Countdown
{
	font-size: 14px;
	padding-top: -2px;
	color: white;
	padding-bottom: 3px;
}

/* .CustomGameDifficultyButton:disabled Label,
.CustomGameDifficultyButton:disabled .CustomGameLevelIcon
{
	opacity: 0.4;
	color: white;
} */

ToggleButton:disabled
{
	color: #fff;
	opacity: 0.3;
}

ToggleButton:disabled .TickBox
{
	opacity: 0;
}

#AghanimTitle
{
	width: 100%;
	text-align: left;
	padding-left: 22px;
	padding-right: 22px;
	color: #E2EBFF;
	text-shadow: 0 0 2px #3375FF80;

	letter-spacing: 0;
}

#AghanimText
{
	width: 100%;
	margin-top: 5px;
	flow-children: down;
}

#AghanimText #AghanimTitle
{
	letter-spacing: 0px;
}

#AghanimLearnMore
{
	horizontal-align: left;
	padding-left: 20px;
	margin-top: 2px;
	color: #ffffff60;
	text-decoration: underline;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;

	font-size: 14px;
	color: #D9F1FF;
	text-shadow: 0px 0px 4px #3375FF;
}

#AghanimLearnMore:hover
{
	color: #fff;
}


#AghanimLearnMoreActivated
{
	horizontal-align: center;
	color: #ffffff60;
	text-decoration: underline;
	margin-top: 5px;
}

.CustomGameLevelIcon
{
	width: 42px;
	height: 48px;
	margin-left: 12px;

	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 2;
}

#CustomGameDifficulty1 .CustomGameLevelIcon
{
	background-image: url("s2r://panorama/images/events/aghanim/difficulty_1_png.vtex");
}

#CustomGameDifficulty2 .CustomGameLevelIcon
{
	background-image: url("s2r://panorama/images/events/aghanim/difficulty_2_png.vtex");
}

#CustomGameDifficulty3 .CustomGameLevelIcon
{
	background-image: url("s2r://panorama/images/events/aghanim/difficulty_3_png.vtex");
}

#CustomGameDifficulty4 .CustomGameLevelIcon
{
	background-image: url("s2r://panorama/images/events/aghanim/difficulty_4_png.vtex");
}

#CustomGameDifficulty5 .CustomGameLevelIcon
{
	background-image: url("s2r://panorama/images/events/aghanim/difficulty_5_png.vtex");
}

#CustomGameChallengeToggle .CustomGameLevelIcon
{
	background-image: url("s2r://panorama/images/events/aghanim/challenge_png.vtex");
}


#BlessingSkillTreeButton
{
	width: 100%;
	height: 64px;

	background-color: gradient( linear, 0% 100%, 0% 0%, from( #3374ff20 ), color-stop(0.6, #3374ff10 ), to( #3375FF00 ) );
	vertical-align: bottom;
	flow-children: right;

	transition-property: brightness;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

#BlessingSkillTreeButton:hover
{
	brightness: 1.8;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #3374ff26 ), color-stop(0.5, #3374ff14 ), to( #3375FF00 ) );
}

#BlessingSkillTreeButton:active
{
	brightness: 0.8;
}

.BlessingsIcon
{
	width: 32px;
	height: 32px;
	margin-top: 12px;

	vertical-align: top;
	background-repeat: no-repeat;
	background-size: contain;
}

.BlessingsIcon.Left
{
	background-image: url("s2r://panorama/images/events/aghanim/aghanims_blessings_png.vtex");
	transform: scaleX(-1);
	horizontal-align: left;
	margin-left: 12px;
}

.BlessingsIcon.Right
{
	background-image: url("s2r://panorama/images/events/aghanim/aghanims_blessings_png.vtex");
	horizontal-align: Right;
	margin-right: 12px;
}

.BlessingsButtonText
{
	horizontal-align: center;
	text-align: center;
	width: fill-parent-flow( 1.0 );
	vertical-align: middle;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;

	text-shadow: 0 0 4px #3375FF80;
	color: #EEF8FD;
}

DOTAPlay.SectionVisible_PracticeBots #PracticeBotsSectionContent
{
	opacity: 1.0;
}
.GameStyle
{
	background-color: #222629f4;
	width: 100%;
	height: 50px;
	padding-top: 12px;
	padding-bottom: 8px;
	border: 1px solid #000000DD;
}

.GameStyle:hover
{
	background-color: #3e474b;
}

.GameStyle:selected
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #d8efee ), color-stop( 0.015, #b1dddd ), color-stop( 0.02, #3e474b ), to( #3e474b ) );
	padding-left: 12px;
	border: 1px solid #222629;
	box-shadow: fill #00000066 -4px -2px 16px 8px;
	width: 100%;
	height: fit-children;
	padding-top: 12px;
	font-weight: bold;
	transition-property: background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
	sound: "ui_find_match_change_options";
}

.GameStyleIcons
{
	flow-children: right;
	margin-right: 8px;
	vertical-align: middle;
}

.BattlePassSection .GameStyle
{
	//background-color: gradient( linear, 0% 0%, 100% 0%, from( darkColor ), to( ultraDarkColor ) );
}

.BattlePassSection .GameStyle:hover
{
	//background-color: gradient( linear, 0% 0%, 100% 0%, from( hsv-transform( darkColor, 0, 1, 2.0 ) ), to( hsv-transform( ultraDarkColor, 0, 1, 2.0 ) ) );
}

.BattlePassSection .GameStyle Label
{
	color: #ccc;
}

.BattlePassSection .GameStyle:selected Label
{
	color: white;
}

.BattlePassSection .GameStyle:selected
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #503712 ), to( #E8CF8D ) );
}

.BattlePassSection .GameStyle .BattlePassSectionIcon
{
	margin-left: 4px;
	vertical-align: middle;
	//background-image: bp_point_log_pass_activated;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	width: 28px;
	height: 28px;

	brightness: 0.2;
}

.BattlePassSection .GameStyle:selected .BattlePassSectionIcon
{
	brightness: 1.0;
}

.Aghanim .GameStyle
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #275AF2 ), to( #41A0F2 ) );
}

.Aghanim .GameStyle:hover
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( hsv-transform( #275AF2, 0, 1, 2.0 ) ), to( hsv-transform( #41A0F2, 0, 1, 2.0 ) ) );
}

.Diretide2020 .GameStyle
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #23382c), to( #47755e) );
}

#CustomGamesSection.Aghanim .GameStyle:selected
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #DFE9F2 ), color-stop( 0.015, #41A0F2 ), color-stop( 0.02, #41A0F2 ), to( #275AF2 ) );
}

.GameStyle .DotaPlusSectionIcon
{
	margin-left: 4px;
	vertical-align: top;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	width: 24px;
	height: 24px;

	brightness: 0.4;
}

.GameStyle:selected .DotaPlusSectionIcon
{
	brightness: 1.0;
}

.DotaPlusSection .GameStyle
{
	background-color: dotaPlusBrown;
	border-bottom: 1px solid #433620;
}

.DotaPlusSection .GameStyle:hover:not(:selected)
{
	brightness: 2.0;
}

.DotaPlusSection .GameStyle Label
{
	color: dotaPlusGold;
}

.DotaPlusSection .GameStyle:selected Label
{
	color: #fee3a5;
}

.DotaPlusSection .GameStyle:selected
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #433620 ), to( #b78946 ) );
	border-bottom: 1px solid #b78946;
}

#MutationSection
{
	visibility: collapse;
}

.GlobalEventActive.CurrentSeason.Season_International2018 #MutationSection
{
	visibility: visible;
}

DOTAPlay.SectionVisible_Mutation #MutationSection
{
	//background-color: gradient( linear, 0% 0%, 100% 100%, from( ultraDarkColor ), to( darkColor ) );
}

#CustomGamesSection .CustomGameBackgroundImage
{
	horizontal-align: right;
	vertical-align: bottom;
	width: 100px;
	height: 70px;
	//background-image: url("s2r://panorama/images/events/frostivus/frostivus_snowflake_psd.vtex");
	background-size: 140px 140px;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	opacity: 0.6;
}

#CustomGamesSection .GameStyle
{
	flow-children: none;
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	height: 50px;
	padding-top: 12px;
	padding-bottom: 5px;
	overflow: noclip;
	border: 1px solid transparent;
}

#CustomGamesSection .GameStyle:hover
{
	brightness: 2;
}

#CustomGamesSection .GameStyle:selected
{
	//background-color: gradient( linear, 0% 0%, 100% 0%, from( accentColorBright ), color-stop( 0.015, ultraDarkColor ), color-stop( 0.02,ultraDarkColor ), to( darkColor ) );
}

.Season_Diretide #CustomGamesSection .GameStyle:selected
{
	//background-color: gradient( linear, 0% 0%, 100% 0%, from( #e9f86f ), color-stop( 0.015, ultraDarkColor ), color-stop( 0.02,ultraDarkColor ), to( #47755e) );
}

.Season_Diretide #CustomGamesSection .GameStyle:hover
{
	brightness: 1;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #416e55), to( #40b87c) );
}

#DiretideRewardContainer
{
	width: 88px;
	height: 88px;
	z-index: 2000;
	horizontal-align: right;
	margin-right: 0px;
	margin-top: -18px;
	margin-bottom: -20px;
	overflow: noclip;
}

#DiretideRewardIndicator
{
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	img-shadow: 2px 2px 12px 4.0 #00000088;
}

.DiretideRewardClaimed #DiretideRewardIndicator
{
	background-image: url("s2r://panorama/images/events/diretide/2020/rosh_cookie_bite_psd.vtex");
	saturation: 0.9;
	brightness: 0.4;
}

.DiretideRewardAvailable #DiretideRewardIndicator
{
	background-image: url("s2r://panorama/images/events/diretide/2020/rosh_cookie_whole_psd.vtex");
	
	//animation-name: RewardGlow;
	animation-duration: 2.55s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

@keyframes 'RewardGlow'
{
    0%
    {

	    img-shadow: 0px 0px 4px 3.0 #c474c488;
    }
    50%
    {
	    img-shadow: 0px 0px 16px 2.0 #c474c422;
    }
    100%
    {
	    img-shadow: 0px 0px 4px 3.0 #c474c488;
    }
}

#RewardAvaialbleGleam
{
	width: 100%;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #ffffff ), to( #ffffff00 ) );
	opacity-mask: url("s2r://panorama/images/events/diretide/2020/rosh_cookie_mask_psd.vtex");

	animation-name: RewardGleam;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: normal;

    visibility: collapse;
}

.DiretideRewardAvailable #RewardAvaialbleGleam
{
    visibility: visible;
}

@keyframes 'RewardGleam'
{
	0% { background-color: gradient( linear, 0% 0%, 100% 100%, from( #ffffff00 ), color-stop(.01, #ffffff00), color-stop(.2, #ffffff22), color-stop(.4, #ffffff00), to( #ffffff00 ) ); }
	2% { background-color: gradient( linear, 0% 0%, 100% 100%, from( #ffffff00 ), color-stop(0, #ffffff00), color-stop(.3, #ffffff22), color-stop(.6, #ffffff00), to( #ffffff00 ) ); }
	5% { background-color: gradient( linear, 0% 0%, 100% 100%, from( #ffffff00 ), color-stop(.3, #ffffff00), color-stop(.5, #ffffff44), color-stop(.7, #ffffff00), to( #ffffff00 ) ); }
	8% { background-color: gradient( linear, 0% 0%, 100% 100%, from( #ffffff00 ), color-stop(.4, #ffffff00), color-stop(.7, #ffffff22), color-stop(1, #ffffff00), to( #ffffff00 ) ); }
	9% { background-color: gradient( linear, 0% 0%, 100% 100%, from( #ffffff00 ), color-stop(.6, #ffffff00), color-stop(.8, #ffffff22), color-stop(.99, #ffffff00), to( #ffffff00 ) ); }
	11% { background-color: gradient( linear, 0% 0%, 100% 100%, from( #ffffff00 ), color-stop(.6, #ffffff00), color-stop(.8, #ffffff00), color-stop(.99, #ffffff00), to( #ffffff00 ) ); }
	100% { background-color: gradient( linear, 0% 0%, 100% 100%, from( #ffffff00 ), color-stop(.2, #ffffff00), color-stop(.5, #ffffff00), color-stop(.6, #ffffff00), to( #ffffff00 ) ); }
}

#RewardAvailableFX
{
	width: 80%;
	height: 80%;
	margin-right: -24px;
	margin-top: -10px;
	//opacity-mask: url("s2r://panorama/images/masks/softedge_circle_sharper_png.vtex");
	transition-property: opacity;
	transition-duration: 1s;
	//saturation: 0;
	wash-color: #ffc1ff;

    visibility: collapse;
}

.DiretideRewardAvailable #RewardAvailableFX
{
    visibility: visible;
}

#CustomGamesSection #GameStyle_CustomGames .CustomGameName,
#CustomGamesSection #GameStyle_CustomGames:selected .CustomGameName
{
	/*font-family: titleFont;*/
	font-size: 22px;
	
	/*padding-right: 8px;*/
	letter-spacing: 2px;
	text-overflow: shrink;
	height: 32px;
	color: white;
	width: 100%;
	text-shadow: 2px 2px 4px black;
}

#CustomGamesSection #GameStyle_CustomGames .CustomGameSubtitle
{
	margin-top: 38px;
	margin-left: 21px;
	font-size: 18px;
	color: rgb( 161, 183, 211 );
}

.GameStyle Label
{
	font-size: 20px;
	font-weight: thin;
	color: #666666;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-left: 20px;
}

.GameStyle:selected Label
{
	font-size: 20px;
	font-weight: semi-bold;
	margin-left: 8px;
	text-shadow: 0px 0px 5px 2.0 #000000;

}

.GameStyle .RadioBox
{
	visibility: collapse;
}

.PlayTabSection
{
	height: 50px;
	width: 100%;
	background-color: sectionbg_inactive;
	background-color: none;

	margin-bottom: 8px;
	transition-property: height, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}

#GameModeSection
{
	flow-children: down;
	margin-bottom: 8px;
}

DOTAPlay.SectionVisible_Normal #GameModeSection
{
	height: 264px;
}

#NormalSectionContent
{
	opacity: 0.0;
	width: 100%;

	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

DOTAPlay.SectionVisible_Normal #NormalSectionContent
{
	opacity: 1.0;
}

.GameModeCheckBox
{
	width: 100%;
	tooltip-position: left;
	tooltip-body-position: 0% 50%;
}

.RankGameModeHeader {
	flow-children: down;
	margin-bottom: 4px;
}

.RankGameModeTitle
{
	margin-left: 4px;
	margin-top: 4px;

	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.6;
}

.RankGameModeNotSelected {
	margin-left: 4px;

	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.6;
	color: hsv-transform( loserRed, 0, 1, 0.8 );
	text-shadow: 0 1px 1px black;

	//visibility: collapse;
    height: 0px;

	transition-property: height;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}

.PlayDisabled_NoModesSelected .RankGameModeNotSelected {
	visibility: visible;
    height: 14px;
}

#RankedGameModes
{
	width: 100%;
	padding-top: 4px;
	padding-left: 8px;
    flow-children: down;
}

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

.GameModeCheckboxesWithBadge
{
    width: 245px;
    flow-children: down;
}

#UnrankedGameModes
{
	visibility: visible;
	width: 100%;
	padding-top: 8px;
	padding-left: 8px;
	padding-right: 8px;
}

DOTAPlay.RankedMode #UnrankedGameModes
{
	visibility: collapse;
}

.LowPriWarningText
{
	color: #960e0e;
}

#ExpandGameModesButton
{
	horizontal-align: right;
	width: 20px;
	height: 20px;

	background-image: url("s2r://panorama/images/control_icons/icon_collapse_png.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	visibility: collapse;
}

#CollapseGameModesButton
{
	horizontal-align: right;
	width: 20px;
	height: 20px;

	background-image: url("s2r://panorama/images/control_icons/icon_collapse_png.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	visibility: visible;
}

.Divider
{
	height: 0px;
	background-color: #404b4a;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 4px;
}

#RegionLanguageSection
{
	width: 100%;
	flow-children: none;
	margin-bottom: 0px;
}

#RegionLanguageSection Label
{
	color: white;
}

#LanguageButtonLabel
{
	text-transform: uppercase;
	padding: 2px 4px 0px 4px;
	border: 2px solid #aaaaaa00;
	wash-color: #657373;
	margin-right: 16px;

	transition-property: border, wash-color, background-color;
	transition-delay: 0.0s;
	transition-duration: 0.15s;
	transition-timing-function: linear;
}

#LanguageButtonLabel:hover
{
	border: 2px solid #65737322;
	wash-color: white;
	background-color: #65737301;
}

#RegionButton
{
	horizontal-align: right;
	padding: 2px 4px 0px 4px;
	border: 2px solid #aaaaaa00;
	wash-color: #657373;

	transition-property: border, wash-color, background-color;
	transition-delay: 0.0s;
	transition-duration: 0.15s;
	transition-timing-function: linear;
}

#RegionButton Label
{
	text-transform: uppercase;
}

#RegionButton:hover
{
	border: 2px solid #65737322;
	wash-color: white;
	background-color: #65737301;
}

.LobbyButton
{
	margin-bottom: 4px;
	width: 100%;
	height: fit-children;

	padding-top: 10px;
	padding-bottom: 10px;
	background-color: sectionbg_inactive;
	border: 1px solid black;

	margin-bottom: 8px;

	transition-property: wash-color;
	transition-delay: 0.0s;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

#WeekendTourneyButton
{
	flow-children: down;
}

.ExpandWeekendTourney #WeekendTourneyButton
{
	background-color: green;
	background-image: url("s2r://panorama/images/weekend_tourney/battle_cup_tooltip_backer_play_psd.vtex");
	background-size: 100% 100%;
	box-shadow: black -4px -4px 8px 8px;
	transition-property: brightness;
	transition-duration: .2s;
	padding-bottom: 0px;
}

.SelectedTourneyDivisionIsChampionsCup #WeekendTourneyButton #BattleCupRegularSeasonContainer,
#WeekendTourneyButton #ChampionsCupContainer
{
    visibility:collapse;
}

.SelectedTourneyDivisionIsChampionsCup #WeekendTourneyButton #ChampionsCupContainer
{
    visibility:visible;
}

.ExpandWeekendTourney #WeekendTourneyButton:hover
{
	brightness: 2;
}

#WeekendTourneyTitle
{
	width: 100%;
	flow-children: right;
}

#WeekendTourneyButton DOTABattleCupVictoryIcon
{
	margin-top: 4px;
	margin-left: 2px;
	width: 22px;
	height: 22px;
	margin-left: 6px;
	margin-right: 12px;
	background-repeat: no-repeat;
	background-size: contain;
}

#WeekendTourneyStatus
{
	width: 100%;

	background-color: none;

	//margin-bottom: 8px;

	transition-property: wash-color;
	transition-delay: 0.0s;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
	visibility: collapse;

	padding-bottom: 12px;
	padding-top: 5px;
}

.ExpandWeekendTourney #WeekendTourneyStatus
{
	visibility: visible;
}


.PrivateLobbyButtonIcon
{
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background-image: url("s2r://panorama/images/control_icons/double_arrow_left_png.vtex");
	background-position: 1.5% 50%;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	wash-color: #91aba6;

	transform: translateX( 6px );

	transition-property: transform, wash-color;
	transition-delay: 0.0s;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;

	visibility: collapse;
}

.ExpandWeekendTourney #WeekendTourneyButton .PrivateLobbyButtonIcon
{
	wash-color: none;
}

.LobbyButton:hover
{
}

.LobbyButton:hover .PrivateLobbyButtonIcon
{
	background-position: 0% 50%;
	transform: translateX( 0px );
	wash-color: white;
}

.LobbyButton Label
{
	font-size: 20px;
	font-weight: thin;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 4px;
	margin-left: 20px;
	vertical-align: center;

	transition-property: color;
	transition-delay: 0.0s;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.ExpandWeekendTourney #WeekendTourneyButton.LobbyButton Label
{
	color: #ffe0a3;
	text-shadow: 0px 0px 6px 1.0 #fca64a;
	font-weight: bold;
}

.LobbyButton:hover Label
{
	color: white;
}

#CreateLobby
{
	horizontal-align: right;
	padding: 8px;
	padding-bottom: 0px;
	width: 100%;
	margin-top: 0px;
}

#CreateLobbyControls
{
	flow-children: right;
	horizontal-align: right;
	vertical-align: bottom;
	margin-top: 12px;
	margin-right: 8px;
}

#HostLocallyCheckBox
{
	margin-right: 22px;
}

#CreateLobbyButton
{
	width: 330px;
	min-height: 36px;
	box-shadow: fill transparent 0px 0px 0px 0px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #102149cc ), to( #1e3565cc ) );
	border-top: 1px solid #486ca944;
	border-left: 1px solid #486ca944;
	horizontal-align: right;
	margin: 0px;
	padding: 0px;
}

#CreateLobbyButton:hover
{
	box-shadow: fill transparent 0px 0px 0px 0px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #102149ff ), to( #345288 ) );
}


#CreateLobbyButton Label
{
	//color: #486ca9;
}

#CreateLobbyButton:disabled
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #444444cc ), to( #888888cc ) );
}

#CreateLobbyText
{
	width: 100%;
	text-align: center;
	margin-top: 12px;
	font-size: 20px;
	font-weight: thin;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;

}

#LowPrioritySection
{
	width: 100%;
	height: fit-children;
	padding: 0px 12px;
	background-color: none;

	visibility: collapse;
}


#LowPriGlow
{
	vertical-align: bottom;
	height: 50%;
	width: 100%;
	background-color: gradient( radial, 50% 90%, 0% 0%, 50% 50%, from( #88000055 ), to( #00000000 ) );
	opacity: 0;

	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

DOTAPlay.SlideOutVisible.LobbySelectorVisible #LowPriGlow, DOTAPlay.SlideOutVisible.LobbyVisible #LowPriGlow
{
	opacity: 0;
}

DOTAPlay.MatchingRestriction.SlideOutVisible.LobbySelectorVisible #PlaySlideOut, DOTAPlay.MatchingRestriction.SlideOutVisible.LobbyVisible #PlaySlideOut
{
	background-color: gradient( linear, 100% 0%, 100% 100%, from( #111111 ), color-stop( 0.01, #202327 ), color-stop( 0.2, #141619 ), to( #000000 ) );
}

DOTAPlay.MatchingRestriction #LowPriGlow
{
	opacity: 1;
}

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

.ReadyUpSlot
{
	background-color: #222222;
	width: 16px;
	height: 16px;
	margin-bottom: 8px;
}

.ReadyUpSlot.Declined
{
	background-color: #732a2d;
}

.ReadyUpSlot.Accepted
{
	background-color: green;
}

// lobby settings edit button
#SettingsEditButton
{
	horizontal-align: right;
	margin-right: 100px;
}

#SettingsEditButton Label
{
	color: #DDDDDD;
	margin-top: 2px;
}

#SettingsEditButton:hover Label
{
	color: white;
}

#SettingsEditButton Image
{
	margin-top: -1px;
}

#LowPrioritySection Label
{
	color: #d04c23;
	text-overflow: shrink;
	visibility: collapse;
}

.MatchDenied_AccountDisabled #MatchDeniedReason_AccountDisabled
{
	visibility: visible;
}

.MatchDenied_MatchDisabledParty #MatchDeniedReason_MatchDisabledParty
{
	visibility: visible;
}

.MatchDenied_MatchDisabledLocal #MatchDeniedReason_MatchDisabledLocal
{
	visibility: visible;
}

.MatchDenied_MatchDisabledLocalLong #MatchDeniedReason_MatchDisabledLocalLong
{
	visibility: visible;
}

.MatchDenied_LowPriorityParty #MatchDeniedReason_LowPriorityParty
{
	visibility: visible;
}

.MatchDenied_LowPriorityLocal #MatchDeniedReason_LowPriorityLocal
{
	visibility: visible;
}

.MatchDenied_MatchDisabledPermament #MatchDeniedReason_MatchDisabledPermanent
{
	visibility: visible;
}


.MatchDenied #PlayButton
{
	background-color: #530202;
	border-top: 1px solid #6D2929;
	border-left: 1px solid #6D2929;
}

DOTAPlay.MatchDenied #PlayButton:hover
{
	background-color: #6D2929;
}

DOTAPlay.SlideOutVisible.LobbySelectorVisible.MatchDenied_AccountDisabled #DeniedPlayButton, DOTAPlay.SlideOutVisible.LobbyLeaderStart.MatchDenied_AccountDisabled #DeniedPlayButton, DOTAPlay.SlideOutVisible.SectionVisible_PracticeBots #DeniedPlayButton
{
	visibility: collapse;
}

DOTAPlay.SlideOutVisible.MatchDenied_AccountDisabled #DeniedPlayButton, DOTAPlay.SlideOutVisible.MatchDenied_AccountDisabled.SectionVisible_PracticeBots.CoopBotSelected #DeniedPlayButton
{
	visibility: visible;
}

#DeniedPlayButton
{
	visibility: visible;
	vertical-align: bottom;
	horizontal-align: right;
	background-color: #530202;

	border-top: 1px solid #330000;
	border-left: 1px solid #330000;
	box-shadow: #53020266 -4px -4px 8px 8px;
	opacity: 0;

	transition-property: opacity;
	transition-duration: 0.0s;
}

#DeniedPlayButton Label
{
	color: #330000;
}

DOTAPlay.MatchDenied_LowPriorityParty #PlayButton
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #576f3f ), to( #554422 ) );
}

DOTAPlay.MatchDenied_LowPriorityParty #PlayButton:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #779950 ), to( #735E2C ) );
}

// Leaver Consequences

.LeaverConsequences
{
	margin-right: 58px;
	margin-bottom: 8px;
	width: 630px;
	height: fit-children;
	vertical-align: bottom;
	horizontal-align: right;
	flow-children: right;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;

	transition-property: opacity;
	transition-duration: 0.4s;
	transition-delay: 0.3s;
	transition-timing-function: ease-in;

	tooltip-position: top;
	tooltip-body-position: 100% 50%;
	tooltip-arrow-position: 96% 50%;

	opacity: 0;
}

.LeaverConsequences Label
{
	text-align: right;
}

DOTAPlay.CanDisconnect .LeaverConsequences
{
	margin-right: 58px;
}

.Warning
{
	color: #b63b21;
}

.InfoIcon
{
	wash-color: #b63b21dd;
	margin-bottom: 4px;
}

.Consequences
{
	text-align: right;
	//width: 100%;
	font-size: 18px;
}

#ConsequencesContainer
{
	flow-children: right;
	horizontal-align: right;
}

.LeaverConsequence_Safe #LeaverConsequences
{
	opacity: 1;
	visibility: visible;
}

DOTAPlay.Connecting #LeaverConsequences
{
	visibility: collapse;
}

.LeaverConsequence_Safe #LeaverConsequences Label
{
	text-shadow: 0px 0px 6px 1.0 #00ff00aa;
	text-align: right;
	horizontal-align: right;
	color: #bbffdd;
}

.LeaverConsequence_Warning #LeaverConsequences_Warning
{
	opacity: 1;
	visibility: visible;
}

DOTAPlay.Connecting #LeaverConsequences_Warning
{
	visibility: collapse;
}

#BackgroundClickCatcher
{
	width: 100%;
	height: 100%;
	opacity: 1;
	color: red;
	//visibility: collapse;
}

.TeamIdentity
{
	visibility: collapse;
	flow-children: right;

	padding: 16px;
	padding-bottom: 8px;

	background-color: #15171944;
	box-shadow: inset #00000066 0px 2px 6px 0px;

	width: 100%;
	padding-top: 12px;
}

DOTAPlay.ValidTeamIdentity .TeamIdentity
{
	visibility: visible;
}

.UseTeamIdentityCheckbox
{
	width: fill-parent-flow( 1.0 );
}

.TeamPrevious,
.TeamNext
{
	vertical-align: center;
}

.NoValidTeamIdentitiesLabel
{
	visibility: visible;
	width: 100%;
	text-align: center;
	margin-top: 6px;
	color: baseText;
	font-size: 16px;
}

DOTAPlay.ValidTeamIdentity .NoValidTeamIdentitiesLabel
{
	visibility: collapse;
}

.ViolatorTag
{
	margin-top: -70px;
	margin-bottom: 48px;
	horizontal-align: right;
	margin-right: 12px;
	background-color: #ccfaf1;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #ccfaf1 ), to( #52b5A1 ) );
	border: 1px solid #517360;
	padding-left: 6px;
	padding-top: 2px;
	padding-right: 4px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	font-size: 14px;
	color: #384254;
	font-weight: bold;
	transform: translateY(0px);
	opacity: 0;

	transition-property: transform, opacity;
	transition-duration: .2s;
}

.GCStatusVisible .ViolatorTag
{
	opacity: 0;
}

.MatchmadeCustomGameAvailable .ViolatorTag
{
	opacity: 1;
}


.SectionVisible_CustomGames .ViolatorTag
{
	transform: translateY(26px);
}

.TeamLogo
{
	height: 50px;
    width: 50px;
    margin: 5px;
    border-radius: 7px 7px;
    background-color: #000000;
}

#BotScriptWorkshopURL
{
	horizontal-align: right;
}

#BotScriptWorkshopURL Label
{
	color: #888;
	font-size: 16px;
	text-decoration: underline;

	transition-property: color;
	transition-duration: 0.1s;
	transition-timing-function: ease-in-out;
}

#BotScriptWorkshopURL:hover Label
{
	color: #CCC;
}


#BotScriptWorkshopURL:disabled Label
{
	color: #666;
}

#BotScriptWorkshopURL:disabled:hover Label
{
	color: #666;
}

.SmallGameModeViolator,
.GameModeViolator
{
	vertical-align: middle;
	margin-left: 4px;
}

.SmallGameModeViolator.Acknowledged,
.GameModeViolator.Acknowledged
{
	visibility: collapse;
}

.GameModeViolator > Label
{
	color: #94cee1;
	text-shadow: 0px 0px 6px #94cee1;
	font-size: 18px;
	letter-spacing: 1px;
}

.SmallGameModeViolator > Label
{
	color: #94cee1;
	text-shadow: 0px 0px 6px #94cee1;
	font-size: 14px;
	letter-spacing: 1px;
}


.RankTierContainer
{
	horizontal-align: left;
	vertical-align: center;

	width: 65px;
	height: 65px;

	tooltip-position: bottom;
	tooltip-body-position: 50% 10%;

	background-size: 100%;
	overflow: noclip;
	margin-left: 5px;
	margin-top: -8px;
}


.RankTierImage, .RankPipImage
{
	width: 100%;
	height: 100%;
	/* background-size: 100%; */
}

.RankLeaderboardLabel
{
	vertical-align: bottom;
	margin-bottom: 11px;
	color: #F7E5c3;
	letter-spacing: 1px;
	font-size: 14px;
	text-align: center;
	text-shadow: 2px 2px #00000080;
	horizontal-align: center;
	vertical-align: bottom;
	width: 100%;
	visibility: collapse;
}

.HasLeaderboardRank .RankLeaderboardLabel
{
	visibility: visible;
}


.RankTierInfo
{
	width: 24px;
	height: 24px;
	horizontal-align: right;
	vertical-align: bottom;
	background-image: url("s2r://panorama/images/icon_info_png.vtex");
	background-size: 100%;
	opacity: 0.5;
}

.BackgroundFX
{
	width: 100%;
	height: 100%;
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_irregular_png.vtex");
}


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

.RankedLaneToggleButton
{
    margin-top: 1px;
    margin-bottom: 1px;
}

.RankedLaneToggleButtonWithText .WaitLabel
{
	horizontal-align: right;
	vertical-align: center;
	margin-right: 16px;
	font-size: 12px;
	text-overflow: shrink;
	text-align: center;
	vertical-align: center;
	padding: 0px;
	padding-left: 23px;
	wash-color: #44FF44;
	width: 128px;
	background-color: #00000000;
	border: 0px;
	margin-top: -5px;
}

.RankedLaneToggleButtonWithText Label {	color: #8c9aa6; }
.RankedLaneToggleButtonWithText.selected Label { color: white; }

.RankedLaneIcon
{
	width: 16px;
	height: 16px;
	margin: 4px 6px 4px 8px;
	background-size: cover;
	wash-color: #8c9aa6;
}

.selected .RankedLaneIcon 	{	wash-color: #ffffff; img-shadow: 0px 0px 4px rgb(124, 139, 151); }
.RankedLaneIcon.HardSupport { 	background-image: url("s2r://panorama/images/rank_tier_icons/handicap/hardsupporticon_psd.vtex"); }
.RankedLaneIcon.SoftSupport { 	background-image: url("s2r://panorama/images/rank_tier_icons/handicap/softsupporticon_psd.vtex"); }
.RankedLaneIcon.Offlane 	{ 	background-image: url("s2r://panorama/images/rank_tier_icons/handicap/offlaneicon_psd.vtex"); }
.RankedLaneIcon.Midlane 	{	background-image: url("s2r://panorama/images/rank_tier_icons/handicap/midlaneicon_psd.vtex"); }
.RankedLaneIcon.Safelane 	{ 	background-image: url("s2r://panorama/images/rank_tier_icons/handicap/safelaneicon_psd.vtex"); }


#PointsEarnedSection
{
	margin-top: 10px;
	width: 100%;
}

#BattlePointsEarnedValue,
#BattlePointsEarnedDesc,
{
		width: 100%;
	text-align: center;
	color: white;
	letter-spacing: 2px;
	font-size: 16px;
	text-transform: uppercase;
	//horizontal-align: center;
	margin-right: 4px;
}

#BattlePointsEarnedValue
{
	font-size: 30px;
	//color: accentColor;
}

#ResetTimer
{
	
	letter-spacing: 2px;
	font-size: 14px;
	text-transform: uppercase;
	margin-right: 4px;
	margin-top: 10px;

	visibility: collapse;
}

.ResetTimerValid #ResetTimer
{
	visibility: visible;
}


#PointMultiplierSection
{
	width: fit-children;
	horizontal-align: center;
}


#PointMultiplierSection Label,#PointMultiplierSection Label
{

	text-align: center;
	
	letter-spacing: 2px;
	font-size: 16px;
	text-transform: uppercase;
	horizontal-align: center;
	margin-top: 5px;
}

#BattlePointsMultiplierValue
{
	//color: accentColor;
}



DOTAPlay.SectionVisible_CoachesChallenge #CoachesChallengeSection
{
	height: 226px;
	opacity: 1.0;

	//background-color: gradient( linear, 0% 0%, 100% 100%, from( ultraDarkColor ), to( darkColor&66 ) );
}

#CoachesChallengeSection
{
    visibility: collapse;
}

.GlobalEventActive.Season_International2019 #CoachesChallengeSection
{
	visibility: visible;
}

#CoachesChallengeSectionContent
{
	padding: 14px;
	width: 100%;
	visibility: collapse;
}

DOTAPlay.SectionVisible_CoachesChallenge #CoachesChallengeSectionContent
{
	visibility: visible;
}

#CoachRatingContainer
{
	flow-children: down;
}

#CoachRating
{
	ui-scale: 58%;
	horizontal-align: center;
}

#CoachRatingLabel
{
	margin-top: 6px;
	horizontal-align: center;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	//color: textAccentColor;
}

#CoachRatingHeader
{
	flow-children: right;
}

#CoachesChallengeDetails
{
	flow-children: down;
}

.CoachesChallengeInstructions
{
	width: 186px;
}

#CoachLearn
{
	margin-top: 4px;
}

.RankedLaneToggleButtonWithText
{
    //width: 210px;
    flow-children: right;
}

.RankedRoleCall
{
    margin-left: 5px;
    margin-top: 2px;
    flow-children: right;
    //horizontal-align: right;
}
.RankedLaneShardReward
{
	vertical-align: center;
	font-size: 14px;
	//font-family: monospaceNumbersFont;
	letter-spacing: 2px;
	color: dotaPlusLightGold;
}

.RankedLaneShardIcon
{
    background-image: dotaPlusCurrencyIcon;
    background-size: 14px 14px;
    width: 14px;
    height: 14px;
    vertical-align: center;
    margin-bottom: 2px;
}

.RoleSelectionGroup
{
	flow-children: right;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
}

.RoleSelectionGroup__Support
{
    padding-bottom: 2px;
	border-bottom: 3px solid #00000066;
}

#RankTier
{
	tooltip-position: bottom;
	tooltip-body-position: 50% 10%;
}

.RankTierCalibrating #RankTier
{
	tooltip-position: left;
	tooltip-body-position: 50% 50%;
}

.RankedMatchmakingRoleContainer
{
	flow-children: down;
	vertical-align: center;
    /* margin-left: 10px; */
}

.RankedInDemandRoleIcon
{
	vertical-align: middle;
	width: 14px;
	height: 14px;
	transform: translateY( -1px );
	margin-left: 2px;

	background-image: url("s2r://panorama/images/control_icons/star_favorite_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Ranked matchmaking High Priority Queue info area */

#RankedHighPriorityInfo
{
	width: 100%;
	flow-children: down;
	/* background-color: #292F31, gradient( linear, 0% 0%, 100% 0%, from( loserRed&06 ), to( #00000000 ) ); */
	/* box-shadow: inset 0px 0px 16px rgba(0,0,0,0.6); */
	tooltip-position: left;
	max-height: 80px;
	padding-top: 12px;
}

.HighPriorityMMEnabled #RankedHighPriorityInfo
{
	/* background-color: #292F31, gradient( linear, 0% 0%, 100% 0%, from( winnerGreen&06 ), to( #00000000 ) ); */
}

#RankedHighPriorityTitleSection
{
	width: 100%;
	flow-children: right;
}

.RankedHighPriorityTitle
{
	margin-top: 12px;
	margin-left: 12px;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 1px;
	text-shadow: 2px 2px 4px black;
}

#RankedHighPriorityTitleEnabled
{
	color: hsv-transform( winnerGreen, 0, 1, 0.8 );
	visibility: collapse;
}
.HighPriorityMMEnabled #RankedHighPriorityTitleEnabled
{
	visibility: visible;
}

#RankedHighPriorityTitleDisabled
{
	color: hsv-transform( loserRed, 0, 1, 0.8 );
}

.HighPriorityMMEnabled #RankedHighPriorityTitleDisabled
{
	visibility: collapse;
}

#RankedHighPriorityPointChange
{
	width: 100%;
	padding: 0px 12px 8px 12px;
	color: #999;
	text-shadow: 2px 2px 4px black;
	font-size: 15px;
	margin-top: 2px;
    text-overflow: shrink;
    height: 48px;
}

#RankedHighPriorityInfoIcon
{
	vertical-align: bottom;
	wash-color: #999;
	width: 13px;
	height: 13px;
}

#RankedHighPriorityInfo:hover #RankedHighPriorityInfoIcon
{
	wash-color: #ccc;
}




.RankedHighPriorityEnabledContainer
{
	width: 20px;
	height: 13px;
	vertical-align: center;
	margin-left: 4px;
	margin-bottom: 2px;
}
.RankedHighPriorityEnabledCheckmark
{
    width: 13px;
    height: 13px;

    horizontal-align: left;
    vertical-align: bottom;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	background-image: url("s2r://panorama/images/control_icons/x_close_gradient_png.vtex");
	wash-color: hsv-transform( red, 0, 1, 0.6 );
}
.RankedHighPriorityEnabledCheckmarkPlus
{
    width: 8px;
    height: 8px;

    margin-left: 10px;
    
    horizontal-align: left;
    vertical-align: bottom;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	background-image: url("s2r://panorama/images/control_icons/plus_gradient_png.vtex");
	wash-color: hsv-transform( winnerGreen, 0, 1, 0.6 );

    opacity: 0.0;
}

#RankedHighPriorityInfoButton
{
	background-image: url("s2r://panorama/images/control_icons/icon_info_png.vtex");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 16px;
    height: 16px;
    margin-bottom: 4px;
}
#RankedHighPriorityInfoButton:hover
{
    brightness: 1.3;
}
#RankedHighPriorityInfoButton:active
{
    brightness: 0.8;
}


.HighPriorityMMEnabled .RankedHighPriorityEnabledCheckmark
{
	background-image: url("s2r://panorama/images/control_icons/check_gradient_png.vtex");
	wash-color: hsv-transform( winnerGreen, 0, 1, 0.6 );
}
.HighPriorityMMEarningQP .RankedHighPriorityEnabledCheckmarkPlus
{
    opacity: 1.0;
}

/* Ranked roles party table */

#RankedRolesTableSlideOut
{
    horizontal-align: right;
    vertical-align: bottom;

    margin-right: 400px;
    margin-bottom: 161px;
    width: 470px;
    height: 400px;

    background-color: gradient( linear, 0% 0%, 0% 100%, from( #282F31 ), to( #1B201F ) );
    box-shadow: inset 0px 0px 10px rgba( 0, 0, 0, 0.75 );


    flow-children: down;

    transform: translateX( 1000px );

    transition-property: transform, width;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}

.SlideOutVisible #RankedRolesTableSlideOut.RankedRolesTableEnabled
{
    transform: translateX( 0px );
}

#RankedRolesTableSlideOut.Players5
{
    width: 470px;
}
#RankedRolesTableSlideOut.Players4
{
    width: 418px;
}
#RankedRolesTableSlideOut.Players3
{
    width: 366px;
}
#RankedRolesTableSlideOut.Players2
{
    width: 314px;
}
#RankedRolesTableSlideOut.Players1
{
    width: 262px;
}

#RankedRolesTableTitle
{
    width: 100%;
    height: fit-children;

    background-color: #313A3E;
    padding: 12px;
    padding-bottom: 8px;
    box-shadow: fill #00000066 -4px -2px 16px 8px;
}

#RankedRolesTableTitleText
{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#RankedRolesTable
{
    width: 100%;
    flow-children: right;
    padding-top: 12px;
}

#RankedRolesNameColumn
{
    flow-children: down;
    width: 150px;
}

.RoleTableColumn
{
    flow-children: down;
    width: 52px;
}
.RoleTableFillColumn
{
    flow-children: down;
    width: fill-parent-flow(1.0);
}

.RoleTableColumn.Hidden
{
    visibility: collapse;
}

.RankedRolesCheckboxHeader
{
    height: 39px;
    width: 100%;
    padding: 3px;
}
.RankedRolesCheckboxHeaderLabel
{
    vertical-align: center;
    horizontal-align: right;

  	text-transform: uppercase;
	text-overflow: shrink;
    text-align: right;
	font-size: 14px;
	color: #CCCCCC;
	letter-spacing: 1px;
}

.RankedRolesTableCheckbox
{
    height: 39px;
    width: 100%;
}
.RoleTableFillCheckbox
{
    height: 39px;
    width: 100%;
}

.RankedRolesTableCheck
{
    width: 13px;
    height: 13px;

    background-color: #060A13;
    border-radius: 50%;

    vertical-align: center;
    horizontal-align: center;

    box-shadow: inset 0px -1px 0px rgba( 239, 243, 251, 0.25 );
}

.RankedRolesTableCheckbox.Checked .RankedRolesTableCheck
{
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #BFCBE7 ), to( #75829F ) );
    box-shadow: fill 0px 2px 2px #000000, inset 0px 2px 0px #EFF3FB;
}

.RankedRolesTableCheck_HP
{
    width: 100%;
    height: 100%;

	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center;

	background-image: url("s2r://panorama/images/control_icons/x_close_gradient_png.vtex");
	wash-color: hsv-transform( red, 0, 1, 0.6 );
}
.RankedRolesTableCheckbox.Checked .RankedRolesTableCheck_HP,
.RankedRolesTableCheckbox.CheckPlus .RankedRolesTableCheck_HP
{
	background-image: url("s2r://panorama/images/control_icons/check_gradient_png.vtex");
	wash-color: hsv-transform( winnerGreen, 0, 1, 0.6 );
}

.RankedRolesTableCheck_HP_Plus
{
    width: 14px;
    height: 14px;
    margin-left: 32px;
    margin-top: 16px;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	background-image: url("s2r://panorama/images/control_icons/plus_gradient_png.vtex");
	wash-color: hsv-transform( winnerGreen, 0, 1, 0.6 );
    opacity: 0.0;
}
.RankedRolesTableCheckbox.CheckPlus .RankedRolesTableCheck_HP_Plus
{
    opacity: 1.0;
}


.RowE
{
    background-color: #191E1F;
}
.RowO
{
    background-color: none;
}
.RowH
{
    background-color: #313A3E;
}


.RankedRolesAvatarHeader
{
    height: 52px;
}
.RankedRolesTableAvatarContainer
{
    height: 52px;
    width: 52px;
}
.RankedRolesTableAvatar
{
    width: 42px;
    height: 42px;
    horizontal-align: center;
    vertical-align: center;
}
.RoleTableFillAvatar
{
    height: 52px;
    width: 100%;
}

.RankedRolesHPInfo
{
    margin-top: 4px;
    margin-right: 16px;
    margin-left: 4px;
    visibility: visible;
    text-align: right;
    horizontal-align: right;
    font-size: 14px;

    visibility: collapse;
}

.RankedRolesHPInfoNonEligible
{
    visibility: visible;
    color: #E7BA01;
}
.HighPriorityMMEnabled .RankedRolesHPInfoNonEligible
{
    visibility: collapse;
}

.RankedRolesHPInfoEarning,
.RankedRolesHPInfoFiveStack,
.RankedRolesHPInfoHighDemand
{
	color: #6BCB6B;
}
.HighPriorityMMEarningQP .RankedRolesHPInfoEarning
{
    visibility: visible;
}

.HighPriorityMMHighDemand .RankedRolesHPInfoHighDemand
{
	visibility: visible;
}

.HighPriorityMMEnabled .RankedRolesHPInfoFiveStack
{
    visibility: visible;
}
.HighPriorityMMEnabled.HighPriorityMMEarningQP .RankedRolesHPInfoFiveStack,
.HighPriorityMMEnabled.HighPriorityMMUsingResource .RankedRolesHPInfoFiveStack,
.HighPriorityMMEnabled.HighPriorityMMHighDemand .RankedRolesHPInfoFiveStack
{
	visibility: collapse;
}

/* Gauntlet is not currently enabled. Just hide it */
#GauntletSection
{
	visibility: collapse;
}

#GauntletSectionContent {
	visibility: collapse;
}

DOTAPlay.SectionVisible_Gauntlet #GauntletSection
{
	height: 350px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #696249 ), to( #2D2E2B ) );

}

DOTAPlay.SectionVisible_Gauntlet #GauntletSectionContent
{
	visibility: visible;
	width: 100%;
	height: 100%;
	margin-top: 50px;	
	//flow-children: down;
}

DOTAPlay #GauntletSectionContent .GauntletDescription
{
	font-size: 18px;
	font-weight: lighter;
	//color: #ffffff;
	line-height: 24px;
	text-shadow: none;
	padding: 5px;
	text-shadow: 0px 0px 5px 1.0 #000000;
}

.GauntletHasActiveTicket #GauntletSection .BattlePassSectionIcon {
	visibility: collapse;
}

#GauntletTitle
{
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
}

#GauntletText {
	width: 100%;
	margin-top: 5px;
	flow-children: down;
}

#GauntletLearnMore
{
	horizontal-align: center;
	color: #ffffff60;
	text-decoration: underline;
}

#GauntletLearnMore:hover
{
	color: #fff;
}


#GauntletLearnMoreActivated
{
	horizontal-align: center;
	color: #ffffff60;
	text-decoration: underline;
	margin-top: 5px;
}

#GauntletRecordContainer {
	width: 330px;
	height: 160px;
	padding: 10px 20px 5px 20px;
	background-color: #333333;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #111111 ), to( #202528 ) );
	vertical-align: bottom;
	visibility: collapse;
	border-top: 2px solid dotaPlusGold;
	flow-children: down;
}

.RecordLabel {
	text-transform: uppercase;
	font-weight: semi-bold;
	color: #ffffff;
	horizontal-align: center;
	letter-spacing: 1px;
	margin-bottom: 5px;
}

.RecordDesc {
	font-size: 18px;
	color: #ffffffaa;
	text-align: center;
	margin-top: 10px;
	text-overflow: shrink;
}

#GauntletRecord
{
	width: fit-children;
	height: 33px;
	horizontal-align: center;
}

#GauntletImage {
	background-image: url("s2r://panorama/images/compendium/international2020/compendium/gauntlet_playmenu_psd.vtex");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 190px;
	vertical-align: bottom;
	margin-bottom: 0px;
    overflow: clip;
}

.GauntletHasActiveTicket #GauntletImage {
	margin-bottom: 100px;
}

#GauntletRankTimer {
	width: 100%;
	height: 70px;
	//border: 1px solid blue;
	margin-top: 90px;
	flow-children: right;
}

.GauntletHasActiveTicket #GauntletRankTimer {
	margin-top: 10px;
}

#GauntletTier {
	width: 50%;
	//border: 1px solid red;
	flow-children: down;
}

#GauntletTimer {
	width: 50%;
	//border: 1px solid red;
	flow-children: down;

}

.GauntletLabel {
	horizontal-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.6;
}

.GauntletDivider {
	height: 40px;
	width: 1px;
	background-color: #ffffff20;
	vertical-align: middle;
}

.GauntletBigLabel {
	horizontal-align: center;
	font-size: 30px;
	font-weight: semi-bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0px 0px 5px 3.0 #000000;
}

.GauntletCountdown {
	visibility: visible;
	color: gradient( linear, 0% 0%, 100% 0%, from( #F8E8B9 ), to( #C79123 ) );

}

.GauntletOpen .GauntletCountdown {
	visibility: visible;
	color: gradient( linear, 0% 0%, 100% 0%, from( #F8E8B9 ), to( #C79123 ) );
	color: gradient( linear, 0% 0%, 100% 0%, from( #BAF8B9 ), to( #23C76E ) );
}

.GauntletOpenTimer {
	visibility: collapse;
}

#GauntletOpenCountdown {
	font-size: 14px;
	vertical-align: middle;
	color: #ffffffee;
	margin-top: 0px;
}

#GauntletCloseCountdown {
	font-size: 14px;
	vertical-align: middle;
	color: #ffffffee;
	margin-top: 0px;
	padding: 3px;
	padding-left: 8px;
	box-shadow: 0px 0px 5px 3.0 #000000;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( rgb(37, 224, 121) ), to( #1B8E6B ) );
}



.GauntletWinPip, .GauntletLossPip
{
	width: 35px;
	height: 35px;
	background-color: #666666;
	margin-left: 4px;
	margin-right: 4px;
	vertical-align: center;
	border-radius: 50px;
	box-shadow: 0px 0px 10px 10.0 #000000;
	border: 1px solid #5B5B5B;
}

.GauntletWinPip
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #245128 ), to( #2B322B ) );
}

.GauntletLossPip
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #512424 ), to( #2B322B ) );
}

#GauntletButtonContainer {
	width: 100%;
	height: 100%;
}

.GauntletComplete #GauntletButtonContainer,
.SelfEventNotActive #GauntletButtonContainer,
.GauntletHasActiveTicket #GauntletButtonContainer
{
    visibility: collapse;
}

#GauntletTicketButton {
	background-image: url("s2r://panorama/images/compendium/international2020/compendium/gauntlet_btn_bg_png.vtex");
	background-size: contain;
	horizontal-align: center;
	box-shadow: 0px 0px 5px #00000030;
	vertical-align: bottom;
	margin-bottom: 20px;
	width: 300px;
	height: 45px;
	transition-property: brightness, transform;
	transition-duration: 0.3s;
}

#GauntletTicketButton Label {
	color: #ffffff;
	width: 100%;
	text-align: center;
	height: 20px;
	font-weight: semi-bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	vertical-align: middle;
	//padding: 10px 15px;
	font-size: 18px;
	horizontal-align: center;

}

#GauntletTicketButton:hover {
	brightness: 1.4;
	transform: translateY(-3px);
}

#GauntletCompleteContainer
{
    width: 100%;
    vertical-align: bottom;
    visibility: collapse;
    padding: 10px;
}

.GauntletComplete #GauntletCompleteContainer
{
    visibility: visible;
}

#GauntletComplete
{
    text-align: center;
}


.GauntletHasActiveTicket #GauntletCompleteContainer,
.GauntletHasActiveTicket #GauntletTitle,
.GauntletHasActiveTicket #GauntletLearnMore
{
	visibility: collapse;
}

#GauntletRecord
{
	visibility: collapse;
}

.GauntletHasActiveTicket #GauntletRecord,
.GauntletHasActiveTicket #GauntletRecordContainer
{
	visibility: visible;
}

.GauntletWins1 #GauntletWin1, .GauntletWins2 #GauntletWin1, .GauntletWins3 #GauntletWin1,
.GauntletWins2 #GauntletWin2, .GauntletWins3 #GauntletWin2,
.GauntletWins3 #GauntletWin3
{
	background-image: url("s2r://panorama/images/compendium/international2020/compendium/gauntlet_check_png.vtex");
	background-size: contain;
}



.GauntletLosses1 #GauntletLoss1, .GauntletLosses2 #GauntletLoss1,
.GauntletLosses2 #GauntletLoss2
{
	background-image: url("s2r://panorama/images/compendium/international2020/compendium/gauntlet_x_png.vtex");
	background-size: contain;
}

#GauntletRecordDivider
{
	width: 1px;
	height: 64px;
	background-color: #666666;
	margin-left: 8px;
	margin-right: 8px;
}

#GauntletOpenCountdown, #GauntletCloseCountdown
{
	visibility: collapse;
}

.GauntletHasActiveTicket #GauntletOpenCountdown
{
	visibility: visible;
}

.GauntletHasActiveTicket.GauntletOpen #GauntletOpenCountdown
{
	visibility: collapse;
}

.GauntletHasActiveTicket.GauntletOpen #GauntletCloseCountdown
{
	visibility: visible;
}

.GauntletOpen .HiddenWhenGauntletOpen
{
	visibility: collapse;
}


