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

DOTAAbilityDraft
{
	width: 100%;
	height: 100%;
	background-color: #00000000;
	visibility: collapse;
}

.IsAbilityDraft > DOTAAbilityDraft
{
	visibility: visible;
}

.DOTA_GAMERULES_STATE_PLAYER_DRAFT DOTAAbilityDraft
{
	visibility: collapse;
}

#MainContainer
{
	wash-color: black;
	transition-property: opacity, wash-color;
	transition-duration: 2s;
	transition-delay: 1s;
	transition-timing-function: ease-in-out;
}

#MainContainer.HeroesReady
{
	wash-color: white;
	transition-delay: 0s;
	transition-duration: 0.2s;
}

.AspectRatio4x3 #MainContainer
{
	ui-scale: 83.3333% 83.3333% 100%;
	height: 1080px;
	vertical-align: center;
}

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

#MainContainer
{
	width: 100%;
	height: 100%;
	background-color: #182027fa;
}

.MapLoadingOutro #MainContainer,.StrategyVersusTransition #MainContainer,.MapLoading #MainContainer
{
	opacity: 0;
}

#MainContainer.CameraMoveDone #AbilityDraftUltimatesHitbox,#MainContainer.CameraMoveDone #AbilityDraftAbilitiesHitbox
{
	visibility: visible;
}

#AbilityDraftUltimatesHitbox,#AbilityDraftAbilitiesHitbox
{
	visibility: collapse;
}

#AbilityDraftAbilitiesHitbox
{
	width: 1024px;
	height: 1024px;
	horizontal-align: center;
	vertical-align: middle;
	flow-children: right-wrap;
	transform: rotateX(21deg) translateZ(0px) translateY(22px);
	pre-transform-scale2d: .6;
}

#AbilityDraftHeroesHitbox
{
	width: 100%;
	width: 1254px;
	height: 1024px;
	horizontal-align: center;
	vertical-align: center;
	transform: rotateX(21deg) translateZ(0px) translateY(22px);
	pre-transform-scale2d: .6;
}

#TopLeftHeroes
{
	horizontal-align: left;
	vertical-align: top;
	margin-top: 74px;
}

#BottomLeftHeroes
{
	horizontal-align: left;
	vertical-align: bottom;
	margin-bottom: 74px;
}

#TopRightHeroes
{
	horizontal-align: right;
	vertical-align: top;
	margin-top: 74px;
}

#BottomRightHeroes
{
	horizontal-align: right;
	vertical-align: bottom;
	margin-bottom: 74px;
}

.Ability DOTAAbilityImage
{
	visibility: collapse;
	opacity: 1;
	pre-transform-scale2d: .5;
}

#CenterBlock
{
	horizontal-align: center;
	vertical-align: top;
	flow-children: right-wrap;
	margin-top: 74px;
}

.AbilitiesSet
{
	flow-children: down;
}

.Ability,.Hero
{
	width: 128px;
	height: 126px;
	margin: 4px;
	margin-top: 4px;
	margin-bottom: 4px;
}

#AbilityDraftUltimatesHitbox .Ability
{
	width: 128px;
	height: 126px;
	margin-right: 18px;
	margin-bottom: 16px;
}

#UltimateCorners,#AbilityDraftUltimatesHitbox
{
	horizontal-align: center;
	transform: rotateX(-15deg) translateZ(50px) translateY(116px) translateX(6px);
	pre-transform-scale2d: .6;
}

#UltimateCorners
{
	border-radius: 1px;
	width: 910px;
	height: 296px;
	transform: rotateX(-15deg) translateZ(50px) translateY(110px) translateX(2px);
}

#AbilityDraftUltimatesHitbox .AbilitiesSet
{
	margin: 0px;
}

#UltimateAbilities
{
	flow-children: down;
	horizontal-align: center;
	margin-top: 82px;
	visibility: collapse;
}

#UltimateAbilities .Ability
{
	width: 76px;
	height: 76px;
	margin: 10px;
}

.BottomLeftSet,.TopLeftSet
{
	margin-right: 54px;
}

.TopRightSet,.TopLeftSet
{
	margin-bottom: 72px;
}

.BottomRightSet,.BottomLeftSet
{
	margin-bottom: 0px;
}

#AbilitiesScene
{
	width: 100%;
	height: 100%;
	wash-color: white;
	transition-property: wash-color;
	transition-duration: 2s;
	transition-timing-function: ease-out;
}

.IsAbilityDraft.StrategyVisible.StrategyTimeActive #AbilitiesScene
{
	wash-color: rgb(133, 90, 163);
}

#AbilitiesScene.Dark
{
	transition-delay: 0.2s;
}

#UIElements
{
	width: 100%;
	width: 1640px;
	margin-right: 40px;
	margin-left: 40px;
	height: 820px;
	height: 100%;
	horizontal-align: center;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 2s;
	transition-delay: .25s;
	transition-timing-function: ease-in-out;
}

.CameraMoveDone #UIElements
{
	opacity: 1;
}

.TeamContainer
{
	height: 100%;
	flow-children: down;
	margin-top: 146px;
}

#DireHeroes
{
	horizontal-align: right;
}

.HeroContainer
{
	width: 320px;
	height: 146px;
	height: 152px;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), color-stop( 0.5, #0022005f ), color-stop( 0.55, #0033006f ), to( #006600ff ) );
	margin-bottom: 16px;
	border-radius: 12px;
	border-top-left-radius: 22px;
	border-bottom-left-radius: 22px;
	transition-property: background-color;
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}

.PanelBackground
{
	width: 100%;
	height: 100%;
	opacity-mask: url("s2r://panorama/images/masks/gradient_leftright_png.vtex");
	opacity: 0;
	border-radius: 22px;
	border: 2px solid #fff;
	border-right: 0px solid #fff;
	border-left: 6px solid #fff;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #55ff00 ), color-stop( .1, #137000 ),to( #137000) );
}

#DireHeroes .PanelBackground
{
	opacity-mask: url("s2r://panorama/images/masks/gradient_rightleft_png.vtex");
	border-left: 0px solid #fff;
	border-right: 6px solid #fff;
}

.LocalPlayer .PanelBackground
{
	opacity: 1;
}

.HeroContainer.CurrentPicker
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), color-stop( 0.5, #0000005f ), color-stop( 0.55, #0000006f ), to( #ffdd55ff ) );
	animation-name: pickpulse;
	animation-duration: .6s;
	animation-iteration-count: infinite;
}

.AbilityDraftPreRound .HeroContainer.CurrentPicker,.AbilityDraftComplete .HeroContainer.CurrentPicker
{
	animation-name: none;
}

#DireHeroes .HeroContainer.CurrentPicker
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.5, #0000005f ), color-stop( 0.55, #0000006f ), to( #ffdd55ff ) );
}

.HeroContainer.LocalPlayer
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), color-stop( 0.5, #0000005f ), color-stop( 0.55, #0000006f ), to( #00ff00ff ) );
}

#DireHeroes .HeroContainer.LocalPlayer
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.5, #0000001f ), color-stop( 0.55, #0000001f ), to( #00ff0022 ) );
}

.LocalPlayerIsDire #DireHeroes .HeroContainer
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.5, #0022005f ), color-stop( 0.55, #0033006f ), to( #006600ff ) );
}

.LocalPlayerIsDire .HeroContainer
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), color-stop( 0.5, #2200005f ), color-stop( 0.55, #3300006f ), to( #660000ff ) );
}

#DireHeroes .HeroContainer
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.5, #2200005f ), color-stop( 0.55, #3300006f ), to( #660000ff ) );
	border-top-right-radius: 22px;
	border-bottom-right-radius: 22px;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.HeroImage
{
	width: 100%;
	height: 100%;
	background-color: black;
	horizontal-align: left;
	opacity-brush: gradient( linear, 0% 0%, 100% 0%, from( #ffff ), color-stop( .6, #ffff ), color-stop( .7, #fffe ), color-stop( .8, #fffc ), to( #0000 ) );
	z-index: -1;
	transition-property: brightness, background-color, wash-color, saturation;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

#HeroStrip .HeroImage
{
	opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #ffffffff ), to( #fff ) );
}

.Disconnected #PlayerHeroImage
{
	wash-color: #a33;
	saturation: 0;
}

#PlayerHeroImage
{
	width: 112px;
}

.AbilityDraftPreRound .FirstPlayerInRound.CurrentPicker .HeroImage
{
	height: 20px;
}

.HeroAbilityContainerOuter
{
	vertical-align: bottom;
	flow-children: down;
	width: 100%;
}

.HeroAbilityContainerOuter .FacetsContainer:not(#PerAbilityFacetsContainer) .FacetHolder
{
	width: fill-parent-flow(1);
	height: width-percentage(100%);
	max-width: 32px;
	vertical-align: bottom;
}

.HeroAbilityContainer
{
	flow-children: right;
	horizontal-align: right;
	margin-left: 4px;
	margin-right: 4px;
	margin-bottom: 4px;
}

#DireHeroes .HeroAbilityContainer
{
	horizontal-align: left;
}

#DireHeroes .HeroImage
{
	horizontal-align: right;
	opacity-brush: gradient( linear, 100% 0%, 0% 0%, from( #ffff ), color-stop( .6, #ffff ), color-stop( .7, #fffe ), color-stop( .8, #fffc ), to( #0000 ) );
}

.CurrentPicker .HeroImage
{
	brightness: 2;
	background-color: black;
}

.CurrentPicker .HeroImage
{
	color: red;
	font-size: 34px;
}

.DraftedAbilityContainer
{
	width: 56px;
	height: 56px;
	margin: 2px;
	border: 1px solid #353;
	border-radius: 8px;
	box-shadow: #00000088 0px 0px 6px 0px;
	background-color: #000e;
}

.LocalPlayerIsDire .DraftedAbilityContainer,#DireHeroes .DraftedAbilityContainer
{
	border: 1px solid #533;
}

.LocalPlayerIsDire #DireHeroes .DraftedAbilityContainer
{
	border: 1px solid #353;
}

.HeroAbility
{
	width: 100%;
	height: 100%;
	opacity: 0;
	brightness: 8;
	transform: rotateZ(90deg);
	border-radius: 8px;
	pre-transform-scale2d: .3;
	transition-property: brightness, transform, pre-transform-scale2d, opacity ;
	transition-duration: .8s, 0.3s, 0.3s, .3s;
	transition-timing-function: ease-in;
	background-color: black;
}

.HeroAbility.AbilityDrafted
{
	opacity: 1;
	brightness: 1;
	pre-transform-scale2d: 1;
	transform: rotateZ(0deg);
	transition-duration: .2s;
}

.DraggingHeroAbility
{
	visibility: visible;
	opacity: 1;
	brightness: 1;
	width: 50px;
	height: 50px;
	pre-transform-scale2d: 1;
	transition-duration: 0s, 0s,0s,0s;
}

#Header
{
	width: 100%;
	height: 200px;
	margin-left: 128px;
	margin-right: 128px;
}

#HeroStripContainer
{
	width: 100%;
	height: 200px;
	margin-left: -64px;
	padding-left: 64px;
	opacity-mask: url("s2r://panorama/images/masks/gradient_leftright_ad_strip_psd.vtex");
}

.AspectRatio21x9 #HeroStripContainer
{
	width: 75%;
	horizontal-align: center;
}

#HeroStripClipPanel
{
	margin-top: 12px;
	overflow: noclip;
}

.AbilityDraftComplete #HeroStripClipPanel
{
	visibility: collapse;
}

#HeroStrip
{
	height: 122px;
	horizontal-align: left;
	transition-property: position;
	transition-duration: .1s;
}

#HeroStrip .HeroImage
{
	box-shadow: #0000003f 0px 0px 6px 0px ;
	background-color: #000a;
	opacity-mask: none;
	border-radius: 5px;
	margin-top: 4px;
	margin-bottom: 4px;
	transition-property: width, height, border, saturation, contrast, brightness;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

#HeroStrip .HeroImage:not(.LocalPlayer)
{
	border-color: #1a9a00;
	border-brush: gradient( linear, 0% 0%, 0% 100%, from( #0f0 ), color-stop( .5, #35be1a ),to( #32562b) );
}

#HeroStrip .IsEnemy .HeroImage:not(#DraftOrderRoundMarker)
{
	border-color: red;
	border-brush: gradient( linear, 0% 0%, 0% 100%, from( #c60000 ), color-stop( .5, #8f1901 ),to( #3a1c1c) );
}

#HeroStrip #DraftOrderRoundMarker.HeroImage
{
	border-color: rgb(24, 24, 24);
}

#HeroStrip .NotDrafting .HeroImage
{
	saturation: 0.2;
	contrast: 0.9;
	brightness: .3;
	border-color: transparent;
}

#HeroStrip .FirstPlayerInRound .HeroImage
{
	width: 54px;
}

.AbilityDraftInProgress #HeroStrip .FirstPlayerInRound.CurrentPicker .HeroImage
{
	width: 82px;
}

#HeroStrip .NotDrafting .HeroImage.LocalPlayer
{
	border-color: transparent;
}

#HeroStrip .HeroImage.LocalPlayer
{
	border: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 4px solid #fff;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #0f0 ), color-stop( .3, #1a9a00 ),to( #1a9a00) );
	brightness: 2;
}

.StripHeroImage
{
	height: 70px;
	width: 54px;
	border: 1px solid #333;
}

.CurrentPicker .StripHeroImage
{
	border: 2px solid #fd5;
}

.CurrentPicker #DraftOrderRoundMarker
{
	border: 1px solid #cda;
	margin-right: 10px;
	brightness: 1;
}

.DraftEntryContainer
{
	height: 78px;
	width: 54px;
	margin-left: 8px;
	transition-property: width, height;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
	flow-children: right;
}

.DraftEntryContainer.FirstPlayerInRound
{
	width: fit-children;
}

.DraftEntryContainer.CurrentPicker,.DraftEntryContainer.CurrentPicker .HeroImage
{
	height: 120px;
	width: 82px;
}

.AbilityDraftPreRound .DraftEntryContainer.CurrentPicker.FirstPlayerInRound
{
	height: 78px;
}

.DraftEntryContainer.CurrentPicker.FirstPlayerInRound
{
	height: 120px;
	width: fit-children;
	border-color: red;
}

.AbilityDraftPreRound .DraftEntryContainer.CurrentPicker.FirstPlayerInRound #DraftOrderHeroImage
{
	height: 70px;
	width: 54px;
	border: 1px solid #333;
}

.AbilityDraftPreRound .DraftEntryContainer.CurrentPicker.FirstPlayerInRound #DraftOrderHeroImage.LocalPlayer
{
	border: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 3px solid #fff;
	border-brush: gradient( linear, 0% 0%, 100% 0%, from( #0f0 ), color-stop( .3, #1a9a00 ),to( #1a9a00) );
}

.NameContainer
{
	margin-left: 86px;
	vertical-align: top;
	flow-children: down;
	margin-top: 4px;
}

#DireHeroes .NameContainer
{
	margin-left: 0px;
	margin-right: 86px;
	horizontal-align: right;
}

.PlayerNameAvatar
{
	margin-top: -2px;
}

#DireHeroes .PlayerNameAvatar
{
	horizontal-align: right;
}

.AvatarImage
{
	height: 24px;
	width: 24px;
}

#NoImageBackground
{
	height: width-percentage( 100% );
	width: 50%;
	background-image: url("s2r://panorama/images/control_icons/question_mark_circle_psd.vtex");
	background-size: contain;
	vertical-align: center;
	horizontal-align: center;
	wash-color: #687b93;
	opacity: 1;
	z-index: -2;
}

.StripAvatarImage
{
	height: width-percentage( 100% );
	width: 80%;
	vertical-align: center;
	horizontal-align: center;
	border-radius: 6px;
}

.DraftedHero .StripAvatarImage
{
	visibility: collapse;
}

.HeroName
{
	text-transform: uppercase;
	font-size: 22px;
	margin-top: 0px;
	color: #4f4;
	horizontal-align: left;
	text-align: left;
	letter-spacing: 2px;
	text-shadow: 1px 1px 2px 3.0 #000;
	text-shadow: 1px 1px 0px 2.0 #000;
	width: 198px;
	height: 30px;
	text-overflow: shrink;
}

.LocalPlayerIsDire .HeroName,#DireHeroes .HeroName
{
	color: #f31;
}

.LocalPlayerIsDire #DireHeroes .HeroName
{
	color: #4f4;
}

.LocalPlayer .HeroName
{
	color: #fff;
	font-weight: bold;
}

.LocalPlayer .PlayerName
{
	color: white;
}

#GuildTag.PlayerName
{
	color: gray;
	font-size: 14px;
	vertical-align: bottom;
	margin-bottom: 4px;
}

#DireHeroes .PlayerName,#DireHeroes .HeroName
{
	horizontal-align: right;
	text-align: right;
}

.PlayerName
{
	font-size: 20px;
	font-weight: light;
	color: #ccc;
	text-shadow: 1px 1px 0px 2.0 #000;
	margin-left: 4px;
	height: 24px;
	text-overflow: ellipsis;
}

.CloseButton:hover,.ReloadButton:hover Label
{
	color: white;
	wash-color: white;
}

.CloseButton,.ReloadButton
{
	margin-top: 70px;
}

#ADTitle
{
	font-size: 32px;
	font-weight: thin;
	text-transform: uppercase;
	margin: 16px;
	margin-bottom: 2px;
	color: white;
	horizontal-align: right;
	text-shadow: 1px 1px 2px 3.0 #000;
	color: gradient( linear, 0% 0%, 0% 100%, from( #A3E4E4 ), color-stop( 0.5, #72A0A0 ), color-stop( 0.55, #72A0A0 ), to( #72A0A0aa ) );
	letter-spacing: 4px;
}

#TimerContainer
{
	horizontal-align: center;
	flow-children: right;
	margin-top: 92px;
}

.LocalPlayerIsNextPicker #TimerContainer
{
	animation-name: textpulse;
	animation-duration: 1.0s;
	animation-iteration-count: infinite;
}

.AbilityDraftWaitForStrategyTime #TimerContainer
{
	visibility: collapse;
}

#AbilityDraft.LocalPlayerIsDrafting.AbilityDraftInProgress #TimerContainer
{
	wash-color: #6f3;
	margin-top: 86px;
}

#TimerLabel
{
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #ccc;
	vertical-align: middle;
	font-size: 20px;
}

#Timer
{
	color: white;
	font-size: 36px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding-top: 1px;
}

#AbilityDraft.LocalPlayerIsDrafting.AbilityDraftInProgress #Timer
{
	font-size: 45px;
}

#AbilityDraft.LocalPlayerIsDrafting.AbilityDraftInProgress #TimerLabel
{
	font-size: 36px;
}

.LocalPlayerIsNextPicker #Timer
{
	font-size: 38px;
}

.LocalPlayerIsNextPicker #TimerLabel
{
	font-size: 28px;
}

.LocalPlayerIsNextPicker #TimerContainer
{
	wash-color: #fd3;
}

.StatBranch
{
	width: 32px;
	height: 32px;
	horizontal-align: left;
	vertical-align: bottom;
	margin-bottom: 6px;
	margin-left: 6px;
	tooltip-position: right;
	background-color: #000000dd;
	border-radius: 50%;
	background-size: 90%;
	background-position: 50%;
}

.NoHeroPicked .StatBranch
{
	wash-color: #708D9F;
}

#DireHeroes .StatBranch
{
	horizontal-align: right;
	margin-right: 6px;
	margin-left: 0px;
	tooltip-position: left;
}

#InnateIcon
{
	width: 32px;
	height: 32px;
	horizontal-align: left;
	vertical-align: bottom;
	margin-bottom: 6px;
	margin-left: 42px;
	tooltip-position: right;
	z-index: 999;
	border-radius: 50%;
	border: 1px solid black;
	background-color: #000d;
	transition-property: saturation, brightness, wash-color;
	transition-timing-function: ease-in-out;
	transition-duration: .21s;
}

.NoHeroPicked #InnateIcon,#InnateIcon.InvalidInnate
{
	saturation: 0;
	brightness: 1;
	wash-color: #4b5d85;
}

#DireHeroes #InnateIcon
{
	horizontal-align: right;
	margin-right: 42px;
	margin-left: 0px;
	tooltip-position: left;
}

#ADFacetPicker
{
	width: 36px;
	height: 36px;
	horizontal-align: right;
	vertical-align: top;
	margin-top: 6px;
	margin-right: 6px;
	tooltip-position: right;
	visibility: collapse;
}

#DireHeroes #ADFacetPicker
{
	horizontal-align: left;
	margin-right: 0px;
	margin-left: 6px;
	tooltip-position: right;
}

#Chat
{
	width: 620px;
	height: 160px;
	border: 1px solid #333;
	background-color: #000000a8;
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 20px;
}

#Chat Label
{
	horizontal-align: center;
	vertical-align: middle;
	text-align: center;
	font-size: 22px;
	letter-spacing: 2px;
}

#HeroStrAgiIntIcon
{
	width: 22px;
	height: 22px;
	horizontal-align: right;
	vertical-align: top;
	margin: 6px;
	background-size: cover;
	background-color: black;
	border-radius: 50%;
	z-index: 5;
	visibility: collapse;
	border: 1px solid black;
	saturation: .5;
	wash-color: #0008;
}

.LocalPlayer #HeroStrAgiIntIcon
{
	saturation: 1;
	wash-color: #0000;
}

#DireHeroes #HeroStrAgiIntIcon
{
	horizontal-align: left;
}

.DOTA_ATTRIBUTE_AGILITY #HeroStrAgiIntIcon
{
	background-image: url("s2r://panorama/images/primary_attribute_icons/primary_attribute_icon_agility_psd.vtex");
	visibility: visible;
}

.ColorBlindModeEnabled .DOTA_ATTRIBUTE_AGILITY #HeroStrAgiIntIcon
{
	background-image: url("s2r://panorama/images/primary_attribute_icons/primary_attribute_icon_agility_colorblind_psd.vtex");
	visibility: visible;
}

.DOTA_ATTRIBUTE_STRENGTH #HeroStrAgiIntIcon
{
	background-image: url("s2r://panorama/images/primary_attribute_icons/primary_attribute_icon_strength_psd.vtex");
	visibility: visible;
}

.DOTA_ATTRIBUTE_INTELLECT #HeroStrAgiIntIcon
{
	background-image: url("s2r://panorama/images/primary_attribute_icons/primary_attribute_icon_intelligence_psd.vtex");
	visibility: visible;
}

#HeroStrip #DraftOrderRoundMarker
{
	visibility: collapse;
	background-color: #75A3A3;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #75A3A3 ), color-stop( 0.5, #75A3A355 ), to( #75A3A322 ) );
	border-radius: 50%;
	border-width: 2px;
	width: 48px;
	height: 48px;
	margin-right: 8px;
	transform: translateY( 12px );
}

#HeroStrip .NotDrafting #DraftOrderRoundMarker
{
	height: 0px;
	width: 0px;
}

#HeroStrip .Round0 #DraftOrderRoundMarker
{
	border-radius: 6px;
}

#HeroStrip .Round0 #DraftOrderRoundMarker .RoundNumber
{
	font-size: 32px;
	font-weight: normal;
}

#HeroStrip #DraftOrderRoundMarker .RoundNumber
{
	color: white;
	vertical-align: middle;
	horizontal-align: center;
	visibility: collapse;
	font-size: 32px;
	font-weight: bold;
	padding-top: 1px;
	text-shadow: 1px 1px 2px 2.0 #000;
}

#HeroStrip .Round0 #DraftOrderRoundMarker .RoundNumber.R0,#HeroStrip .Round1 #DraftOrderRoundMarker .RoundNumber.R1,#HeroStrip .Round2 #DraftOrderRoundMarker .RoundNumber.R2,#HeroStrip .Round3 #DraftOrderRoundMarker .RoundNumber.R3,#HeroStrip .Round4 #DraftOrderRoundMarker .RoundNumber.R4
{
	visibility: visible;
}

#HeroStrip .FirstPlayerInRound #DraftOrderRoundMarker
{
	visibility: visible;
}

.AbilityDraftPreRound #HeroStrip .FirstPlayerInRound.CurrentPicker #DraftOrderRoundMarker
{
	width: 72px;
	height: 72px;
	transform: translateY(0px);
}

.AbilityDraftInProgress #HeroStrip .FirstPlayerInRound.NotDrafting #DraftOrderRoundMarker,.AbilityDraftInProgress #HeroStrip .FirstPlayerInRound.CurrentPicker #DraftOrderRoundMarker
{
	width: 0px;
	height: 0px;
}

#PickingGlowContainer
{
	width: 100%;
	height: 100%;
	opacity-mask: url("s2r://panorama/images/masks/ad_mask_psd.vtex");
	opacity: 0;
	transition-property: opacity;
	transition-duration: .3s;
}

.AbilityDraftInProgress #PickingGlowContainer
{
	opacity: 1;
}

#PickingGlow
{
	width: 320px;
	height: 152px;
	border-radius: 12px;
	background-color: #fd83;
	horizontal-align: center;
	border: 2px solid transparent;
	transition-property: transform, opacity, width, height, border;
	transition-duration: .3s;
	transform: translateX(0px) translateY(312px);
	opacity: 0;
	z-index: -10;
}

@keyframes 'textpulse'
{
	0%
	{
		pre-transform-scale2d: 1;
	}
	
	50%
	{
		pre-transform-scale2d: 1.1;
	}
	
	100%
	{
		pre-transform-scale2d: 1;
	}
	
}

@keyframes 'pickpulse'
{
	0%
	{
		border: 1px solid #fd5;
	}
	
	50%
	{
		border: 4px solid #fff;
	}
	
	100%
	{
		border: 1px solid #fd5;
	}
	
}

.PickingPlayer0 #PickingGlow,.PickingPlayer2 #PickingGlow,.PickingPlayer4 #PickingGlow,.PickingPlayer6 #PickingGlow,.PickingPlayer8 #PickingGlow,.PickingPlayer1 #PickingGlow,.PickingPlayer3 #PickingGlow,.PickingPlayer5 #PickingGlow,.PickingPlayer7 #PickingGlow,.PickingPlayer9 #PickingGlow
{
	opacity: 1;
}

.PickingPlayer0 #PickingGlow,.PickingPlayer1 #PickingGlow,.PickingPlayer2 #PickingGlow,.PickingPlayer3 #PickingGlow,.PickingPlayer4 #PickingGlow
{
	border-radius: 12px;
	border-top-left-radius: 22px;
	border-bottom-left-radius: 22px;
}

.PickingPlayer5 #PickingGlow,.PickingPlayer6 #PickingGlow,.PickingPlayer7 #PickingGlow,.PickingPlayer8 #PickingGlow,.PickingPlayer9 #PickingGlow
{
	border-radius: 12px;
	border-top-right-radius: 22px;
	border-bottom-right-radius: 22px;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.PickingPlayer0 #PickingGlow
{
	transform: translateX(-660px) translateY(146px);
}

.PickingPlayer1 #PickingGlow
{
	transform: translateX(-660px) translateY(314px);
}

.PickingPlayer2 #PickingGlow
{
	transform: translateX(-660px) translateY(482px);
}

.PickingPlayer3 #PickingGlow
{
	transform: translateX(-660px) translateY(650px);
}

.PickingPlayer4 #PickingGlow
{
	transform: translateX(-660px) translateY(818px);
}

.PickingPlayer5 #PickingGlow
{
	transform: translateX(660px) translateY(146px);
}

.PickingPlayer6 #PickingGlow
{
	transform: translateX(660px) translateY(314px);
}

.PickingPlayer7 #PickingGlow
{
	transform: translateX(660px) translateY(482px);
}

.PickingPlayer8 #PickingGlow
{
	transform: translateX(660px) translateY(650px);
}

.PickingPlayer9 #PickingGlow
{
	transform: translateX(660px) translateY(818px);
}

.DraggingHeroAbility
{
	border-radius: 6px;
	pre-transform-scale2d: 1.2;
	border: 1px solid white;
	box-shadow: #000000ff 2px 2px 6px 0px ;
	opacity: 1;
}

.DraggingSource.AbilityDrafted
{
	opacity: 0.7;
	wash-color: #000a;
	pre-transform-scale2d: .9;
}

.HoveringAbility.AbilityDrafted
{
	border: 1px solid #555;
	transform: translateY(6px);
}

.PickingNext
{
	opacity: 0;
	text-transform: uppercase;
	color: #fd5;
	letter-spacing: 2px;
	transition-property: opacity;
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}

#DireHeroes .PickingNext
{
	horizontal-align: right;
	text-align: right;
}

.NextPicker .PickingNext
{
	opacity: 1;
}

.TransitionInitializer #LoadingContainer
{
	pre-transform-scale2d: 1;
	opacity: 1;
	transition-duration: 2s;
}

#LoadingContainer
{
	opacity: 1;
	pre-transform-scale2d: 1;
	horizontal-align: center;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/backgrounds/ad_bg_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;
	transition-property: pre-transform-scale2d, opacity, wash-color;
	transition-duration: 3s;
	transition-timing-function: ease-in-out;
}

.SpinnerContainer
{
	margin-top: 78px;
}

#ADLoadingTitle
{
	margin-top: 32px;
	text-transform: uppercase;
	text-align: center;
	font-size: 84px;
	font-weight: thin;
	color: gradient( linear, 0% 0%, 0% 100%, from( #A3E4E4 ), color-stop( 0.5, #c079e6 ), color-stop( 0.65, #613d96 ), to( #c294ffaa ) );
	text-shadow: 1px 1px 2px 3.0 #000;
	letter-spacing: 16px;
	horizontal-align: center;
	transition-property: pre-transform-scale2d, opacity, blur, transform;
	transition-duration: 3s;
	transition-timing-function: ease-in-out;
}

#ADLoading
{
	text-transform: uppercase;
	font-size: 22px;
	margin-right: 16px;
	vertical-align: middle;
	letter-spacing: 4px;
	horizontal-align: center;
	color: white;
	transition-property: opacity;
	transition-duration: 0.34s;
	transition-timing-function: ease-in-out;
}

#LoadingContainer .Spinner
{
	vertical-align: middle;
	margin-bottom: 4px;
	width: 20px;
	wash-color: white;
	transition-property: opacity, transform;
	transition-duration: 0.34s;
	transition-timing-function: ease-in-out;
}

#LoadingContainer.LoadingFinished
{
	opacity: 0;
	pre-transform-scale2d: 1.1;
}

#LoadingContainer.LoadingFinished #ADLoadingTitle
{
	opacity: 0;
	pre-transform-scale2d: 0.9;
	transform: translateY(20px);
	blur: gaussian(12px);
}

#LoadingContainer.LoadingFinished .Spinner,#LoadingContainer.LoadingFinished #ADLoading
{
	opacity: 0;
	z-index: 2;
}

.TypeLabel
{
	font-size: 24px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #44FF8888;
}

#AbilityLabelContainer
{
	margin-top: 18px;
	horizontal-align: center;
	vertical-align: middle;
}

#AbilityLabelContainer .TypeLabel
{
	font-size: 18px;
}

#UltLabelContainer
{
	horizontal-align: center;
	vertical-align: middle;
	margin-top: 0px;
}

#AbilityLabel
{
	color: #C5AB42;
}

#AbilityLabelContainer .InfoIcon
{
	width: 18px;
	height: 18px;
	wash-color: #C5AB42;
	vertical-align: middle;
	margin-top: -2px;
}

#UltLabelContainer .InfoIcon
{
	width: 24px;
	wash-color: #31BD64;
	vertical-align: middle;
	margin-top: -2px;
}

#UltimateCorners .Corners
{
	border-color: #41EE7F44;
	width: 32px;
	height: 32px;
	border-width: 4px;
}

.Corners
{
	width: 32px;
	height: 32px;
	border: 3px solid #C5AB42cc;
	border-radius: 4px;
}

#TopLeftCorner
{
	horizontal-align: left;
	vertical-align: top;
	border-bottom: 0px solid transparent;
	border-right: 0px solid transparent;
}

#TopRightCorner
{
	horizontal-align: right;
	vertical-align: top;
	border-bottom: 0px solid transparent;
	border-left: 0px solid transparent;
}

#BottomRightCorner
{
	vertical-align: bottom;
	horizontal-align: right;
	border-top: 0px solid transparent;
	border-left: 0px solid transparent;
}

#BottomLeftCorner
{
	horizontal-align: left;
	vertical-align: bottom;
	border-right: 0px solid transparent;
	border-top: 0px solid transparent;
}

#UltimateCorners #TopLeftCorner
{
	border-bottom: 0px solid transparent;
	border-right: 0px solid transparent;
}

#UltimateCorners #TopRightCorner
{
	border-bottom: 0px solid transparent;
	border-left: 0px solid transparent;
}

#UltimateCorners #BottomRightCorner
{
	border-top: 0px solid transparent;
	border-left: 0px solid transparent;
}

#UltimateCorners #BottomLeftCorner
{
	border-right: 0px solid transparent;
	border-top: 0px solid transparent;
}

#AbilityCorners
{
	border-radius: 1px;
	width: 530px;
	height: 530px;
	horizontal-align: center;
	vertical-align: middle;
	transform: rotateX(21deg) translateZ(0px) translateY(24px);
	flow-children: none;
}

.ContainerCorners
{
	opacity: 0;
	transition-property: opacity;
	transition-duration: 1s;
	transition-delay: 0.75s;
	transition-timing-function: ease-in-out;
}

.CameraMoveDone .ContainerCorners
{
	opacity: 1;
	transition-duration: 0s;
	transition-delay: 0s;
}

.MapLoadingOutro .ContainerCorners
{
	visibility: collapse;
}

#MainDisconnectedIcon,#DisconnectedIcon
{
	width: 100%;
	height: 100%;
	vertical-align: middle;
	margin: 1px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-image: url("s2r://panorama/images/hud/reborn/icon_disconnect_png.vtex");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	background-color: #400c;
	border-radius: 6px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.3s;
}

.Disconnected #MainDisconnectedIcon,.Disconnected #DisconnectedIcon
{
	opacity: 1;
}

#MainDisconnectedIcon
{
	width: 80px;
	background-color: none;
}

#TopRightContainer
{
	horizontal-align: right;
	vertical-align: top;
}

#ADLog
{
	font-size: 22px;
	font-weight: thin;
	text-transform: uppercase;
	margin-left: 4px;
	color: rgb(138, 172, 172);
	horizontal-align: right;
	text-shadow: 1px 1px 2px #000;
}

#ADLog:hover
{
	color: white;
}

#ADLogButtonContainer
{
	flow-children: right;
	horizontal-align: right;
	tooltip-position: left;
	tooltip-body-position: 10% 50%;
	margin: 16px;
	margin-right: 24px;
	margin-top: 0;
}

#ADLogButtonContainer.HasADPing #ADLogPing
{
	opacity: 1;
}

#ADLogButtonContainer.HasADPing #ADLog
{
	color: rgb(255, 174, 0);
}

#ADLogButtonContainer.HasADPing:hover #ADLog
{
	color: rgb(255, 214, 110);
}

#ADLogPing
{
	opacity: 0;
}

.PingNotice
{
	border-radius: 50%;
	background-color: rgb(255, 214, 110);
	width: 12px;
	height: 12px;
	margin-top: 8px;
	margin-right: 6px;
}

#ChangelogDetailsScroll .PingNotice
{
	margin-left: 12px;
	margin-top: 16px;
}

#ADLogPingCircle
{
	border: 1px solid rgb(255, 174, 0);
	background-color: rgba(255, 251, 0, 0);
	animation-name: ping;
	animation-duration: .8s;
	animation-iteration-count: infinite;
}

@keyframes 'ping'
{
	0%
	{
		pre-transform-scale2d: 1;
		border: 1px solid rgb(255, 251, 0);
		opacity: 1;
	}
	
	100%
	{
		pre-transform-scale2d: 4;
		border: 1px solid rgb(255, 114, 0);
		opacity: 0;
	}
	
}

#ChangeLogContainer
{
	width: 420px;
	height: 600px;
	padding: 16px;
	background-color: rgb(43, 41, 53);
	vertical-align: top;
	horizontal-align: right;
	margin: 32px;
	margin-top: 100px;
	margin-right: 0;
	box-shadow: 0px 0px 20px #000;
	opacity: 0;
	wash-color: rgb(122, 56, 255);
	transition-property: opacity, transform, wash-color;
	transition-duration: .21s, .21s, .31s;
	transition-timing-function: ease-in-out;
	transform: translateX(420px);
}

#ChangeLogContainer.Show
{
	opacity: 1;
	transform: translateX(0px);
	wash-color: white;
}

.ChangeLogTitle
{
	text-transform: uppercase;
	font-size: 22px;
	color: #9876FD;
	margin-bottom: 12px;
	width: 100%;
	text-align: left;
	letter-spacing: 1px;
	margin-left: 4px;
}

#ChangelogDetails
{
	width: 100%;
	height: 100%;
	box-shadow: inset #00000088 0px 3px 3px 6px;
	border: 1px solid #423377;
}

.AbilityDraftIcon
{
	background-image: url("s2r://panorama/images/spellicons/ad_psd.vtex");
	width: 32px;
	height: 32px;
	background-size: 100% 100%;
	wash-color: rgb(152, 118, 255);
	margin: 5px;
	margin-top: -6px;
	margin-left: 0px;
}

#LoadingContainer .AbilityDraftIcon
{
	width: 100px;
	height: 100px;
}

.AbilityDraftUpgradeHeader
{
	flow-children: right;
	width: 100%;
	height: fit-children;
	vertical-align: center;
}

#ChangelogDetailsScroll
{
	width: 100%;
	height: 100%;
	overflow: squish scroll;
	background-color:#181239;
}

#ChangeLogContainer .CloseButton
{
	horizontal-align: right;
	vertical-align: top;
	margin: 0px;
	wash-color: #bbb;
	width: 20px;
	height: 20px;
	margin: 2px;
}

#ChangeLogContainer .CloseButton:hover
{
	wash-color: #fff;
}

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

.ChangeLogText
{
	padding-left: 12px;
	padding-top: 12px;
	padding-right: 12px;
	padding-bottom: 24px;
	color: #98ADC8;
	font-size: 16px;
}

.ChangeLogText.Latest
{
	padding-bottom: 0px;
}

.ADYellowNote
{
	color: orange;
}

.NoHeroPicked .HeroImage
{
	background-color: #042b02;
}

#DireHeroes .NoHeroPicked .HeroImage
{
	background-color: #2b0202;
}

.NoHeroPickedStub
{
	background-image: url("s2r://panorama/images/control_icons/question_mark_circle_psd.vtex");
	background-size: 110%;
	background-position: -16px 0;
	background-repeat: no-repeat;
	width: 96px;
	height: 96px;
	vertical-align: middle;
	wash-color: #1d3b1c;
	margin-bottom: 12px;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: .32s;
	-s2-mix-blend-mode: additive;
	opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #ffff ), color-stop( .4, #fffa ), color-stop( .6, #fffc ), to( #0000 ) );
}

.NoHeroPicked .NoHeroPickedStub
{
	opacity: 1;
}

#DireHeroes .NoHeroPickedStub
{
	background-position: 16px 0;
	horizontal-align: right;
	wash-color: #560303;
}

.LocalPlayer .NoHeroPickedStub
{
	margin-left: 6px;
	background-position: -22px 0;
}

#DireHeroes .LocalPlayer .NoHeroPickedStub
{
	margin-left: 0px;
	margin-right: 6px;
	background-position: -10px 0;
}

.FacetsContainer
{
	flow-children: right;
	width: fit-children;
	height: fit-children;
	overflow: squish;
	padding: 2px;
}

.FacetsContainer .FacetHolder
{
	width: fit-children;
	height: fit-children;
	padding: 4px;
	padding-bottom: 4px;
	margin-left: -2px;
	margin-right: -2px;
}

.DraftedAbilityContainer .FacetsContainer .FacetHolder
{
	padding: 0px;
	margin: 1px;
}

.DraftedAbilityContainer .FacetsContainer .FacetHolder #FacetIcon
{
	transform: none;
}

.FacetsContainer .FacetHolder.InvalidFacet
{
	visibility: collapse;
}

.FacetsContainer .FacetHolder #FacetIcon
{
	horizontal-align: center;
	tooltip-position: top;
	tooltip-body-position: 50% 25px;
	saturation: .75;
	transform: translateY(2px);
	brightness: .8;
	box-shadow: rgba(0, 0, 0, .8) 0px 1px 5px 1;
	transition-property: transform, saturation, box-shadow, brightness;
	transition-duration: .21s;
	transition-timing-function: ease-in-out;
}

.FacetsContainer .FacetHolder #FacetIcon.FacetSelected
{
	box-shadow: rgba(85, 255, 0, 1) 0px 0px 10px 1;
	saturation: 1;
	brightness: 1.2;
	transform: translateY(0px);
}

#FacetsContainer
{
	horizontal-align: right;
	margin-right: 2px;
	max-width: 244px;
	height: 36px;
}

#DireHeroes #FacetsContainer
{
	flow-children: right;
	horizontal-align: left;
	margin-right: 0px;
	margin-left: 2px;
}

.ShardMarker,.ScepterMarker
{
	width: 24px;
	height: 24px;
	background-image: url("s2r://panorama/images/hud/reborn/aghsstatus_scepter_marker_psd.vtex");
	background-size: contain;
	background-position: center;
	wash-color: #007ACC;
	opacity: 0;
	margin: 3px;
	vertical-align: top;
	horizontal-align: center;
	visibility: collapse;
	transition-property: opacity;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.ShardMarker
{
	background-image: url("s2r://panorama/images/hud/reborn/aghsstatus_shard_marker_psd.vtex");
	vertical-align: bottom;
	margin-bottom: 10px;
}

.HeroAbility.HasScepterUpgrade .ScepterMarker
{
	visibility: visible;
}

.HeroAbility.HasShardUpgrade .ShardMarker
{
	visibility: visible;
	wash-color: #007ACC;
}

.AltIsDown .ShardMarker,.AltIsDown .ScepterMarker
{
	opacity: 1;
}

#PerAbilityFacetsContainer
{
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 2px;
	opacity: 0;
	pre-transform-scale2d: .5;
	transition-property: pre-transform-scale2d, opacity;
	transition-duration: .21s;
	transition-timing-function: ease-in-out;
}

.DraftedAbilityContainer #PerAbilityFacetsContainer
{
	margin-bottom: 0px;
}

#PerAbilityFacetsContainer .FacetHolder #FacetIcon
{
	box-shadow: rgba(0, 0, 0, 1) 0px 2px 12px 1;
	saturation: 1;
	brightness: 1;
}

.AltIsDown .DraftedAbilityContainer.HasFacets #PerAbilityFacetsContainer,.AltIsDown .Hero.HasFacets:not(.HeroChosen) #PerAbilityFacetsContainer,.AltIsDown .Ability.HasFacets:not(.AbilityChosen) #PerAbilityFacetsContainer
{
	opacity: 1;
	pre-transform-scale2d: 1;
}

#ADCtrlAltTip
{
	horizontal-align: right;
	text-align: right;
	margin-right: 24px;
	margin-top: -8px;
	width: fit-children;
	flow-children: right;
	wash-color: rgb(148, 180, 185);
}

#ADCtrlAltTip .InfoIcon
{
	wash-color: white;
}

#ADCtrlAltTip Label
{
	font-size: 20px;
	color: white;
	text-transform: uppercase;
}