.LeftRightFlow
{
	flow-children: right-wrap;
}

.SettingsSecondaryPanel
{
	margin-top: 40px;
	padding-top: 6px;
	opacity: 1;
    width: 100%;
    height: 100%;
	
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;	
}

#HotkeysTabContent
{
	padding-top: 0px;
}

PopupSettings
{
	width: 1588px;
	height: 920px;
	vertical-align: center;
	horizontal-align: center;
	opacity: 1.0;
	transform: none;
	perspective-origin: 62% 5% invert;
	perspective: 1000;
	//flow-children: down;

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

	background-color: gradient( linear, 0% 0%, 0% 25%, from( #232326 ), to( #1c1d20 ) );
	box-shadow: #00000099 -4px -4px 8px 8px;
	border: 2px solid #32383677;
}

.AspectRatio4x3  PopupSettings
{
	width: 1395px;
	height: 930px;
}

PopupSettings.Hidden
{
	opacity: 0.0;
	transform: translateX( -120px ) translateY( -60px );
	pre-transform-scale2d: 0.95;
	wash-color: #33cccc;
}

#DOTASettingsButton
{
	background-image: url("s2r://panorama/images/control_icons/settings_png.vtex");
	wash-color: none;
}

#DOTACloseSettingsButton
{
	margin-left: 6px;
	margin-top: 6px;
	width: 32px;
	height: 32px;
	background-image: url("s2r://panorama/images/control_icons/gear_return_png.vtex");
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	horizontal-align: right;
	margin-right: 28px;
	wash-color: #575d5f;
}

#DOTACloseSettingsButton:hover
{
	wash-color: #939da0;
}

#DOTACloseSettingsButton:active
{
	sound: "ui_settings_out_multi";
}

.SettingsTabSeparator
{
	margin-left: 16px;
	margin-right: 16px;
	font-size: 20px;
	color: #939da022;
	vertical-align: middle;
}

PopupSettings Label
{
	letter-spacing: 2px;
	color: white;
}

#ChatWheelWheelPanel Label
{
	letter-spacing: 1px;
}

/* NAV BAR */

#SettingsNavBar
{
	background-color: #00000077;
	margin-top: 0px;
	//padding-bottom: 8px;

	vertical-align: top;
	horizontal-align: left;
	flow-children: right;
	width: 100%;
}

.SettingsNavBarButton
{
	height: 40px;
	margin-left: 6px;
	margin-right: 6px;
	padding-top: 4px;
}

.SettingsNavBarButton Label
{
	color: #939da044;
	font-size: 20px;
	vertical-align: middle;
	horizontal-align: center;
	text-transform: uppercase;
	margin: 0px;
}

.SettingsNavBarButton .RadioBox
{
	visibility: collapse;
}

.SettingsNavBarButton:hover Label
{
	color: #CCCCCC;
}

 .SettingsNavBarButton:selected Label
 {
	 color: white;
	sound: "ui_rollover_micro";
 }

.SettingsNavBarButton:active
{
	transform: translateY(2px);
}

.SettingsNavBarButton:active:selected
{
	transform: translateY(0px);
}

.HotKeyPageButton
{
	margin-left: 6px;
	margin-right: 6px;
	padding-top: 1px;
	background-color: #333333;
	//border-color: #FFFFFF;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
}

.HotKeyPageButton Label
{
	color: #939da0;
	font-size: 20px;
	vertical-align: middle;
	horizontal-align: center;
	text-transform: uppercase;
}

.HotKeyPageButton:hover
{
	background-color: #666666;
}

.HotKeyPageButton:hover Label
{
	color: white;
}

.HotKeyMainTab
{
    width: 100%;
    height: 100%;
	transition-property: transform, opacity;
	transition-duration: 0.3s;
	transition-delay: 0.0s;
	transition-timing-function: ease-in;
}

.HotKeyMainTab.Focused
{
	opacity: 1.0;
	transform: translatex(0px);
}

.HotKeyMainTab.LeftOfFocus
{		
	opacity: 0.0;
	transform: translatex( -400px );
}

.HotKeyMainTab.RightOfFocus
{		
	opacity: 0.0;
	transform: translatex( 400px );
}

.HotKeyEmbeddedTab
{
	background-color: gradient( linear, 0% 0%, 0% 5%, from( #232326 ), to( #1c1d20 ) );
	//background-color: #000000dd;
	border: 2px solid #32383677;
   	box-shadow: fill #00000099 0px 0px 8px 8px;

    padding: 5px 7px 5px 7px;

    opacity: 0.0;

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

.HotKeyEmbeddedTab.Focused
{
    opacity: 1.0;
}

/* Main Content */

.SettingsColumnContainer
{
	flow-children: right;
	width: 100%;
    height: 100%;
	margin-top: 0px;
	padding: 0px 38px 0px 38px;
}


.AspectRatio4x3 .SettingsColumnContainer
{
	margin-top: 0px;
	padding: 0px 0px 0px 16px;
}

.SettingsColumn
{
	flow-children: down;
	margin: 0px;
	width: 33.333%;
	padding: 0px 16px 0px 16px;
}

.SettingsDualColumn
{
	flow-children: down;
	margin: 0px;
	width: 50%;
	padding: 0px 16px 0px 16px;
}

.FullHeight
{
	height: 100%;
}

.HotKeySettingsColumn
{
	flow-children: down;
	margin: 0px;
	width: fill-parent-flow( 1.0 );
	width: 502px;
	padding: 0px 16px 0px 16px;
	//height:100%;
}

.AspectRatio4x3 .HotKeySettingsColumn
{
	width: 453px;
}

.HotKeySettingsColumn .SettingsSection
{
	margin-top: 0px;
}

#HotKeyScrollContainer
{
	vertical-align: bottom;
	width: 100%;
}

#ResetHotkeysButton
{
	vertical-align: bottom;
	horizontal-align: left;
}

.ScrollButtonIcon
{
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background-image: url("s2r://panorama/images/control_icons/double_arrow_right_png.vtex");
    background-position: 1.5% 50%;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	
	transform: translateX( -6px );
	
	transition-property: transform;
	transition-delay: 0.0s;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

#ScrollRightButtonIcon
{
	background-image: url("s2r://panorama/images/control_icons/double_arrow_right_png.vtex");
	transform: translateX( -6px );
	horizontal-align: right;
}

#ScrollLeftButtonIcon
{
	background-image: url("s2r://panorama/images/control_icons/double_arrow_left_png.vtex");
	transform: translateX( 6px );
	horizontal-align: left;
	margin-right: 8px;
}

#ScrollRightButton:hover #ScrollRightButtonIcon, #ScrollLeftButton:hover #ScrollLeftButtonIcon
{
    background-position: 0% 50%;
	transform: translateX( 0px );
	wash-color: white;
}

#ScrollRightButton
{
	horizontal-align:right;
}

#ScrollLeftButton
{
	horizontal-align:right;
	opacity: 0;
	flow-children: right;
	margin-right: 24px;
}

.PageButtonPushed #ScrollRightButton
{
	opacity: 0;
}

.PageButtonPushed #ScrollLeftButton
{
	opacity: 1;
}

.ShowingAdvanced.ResetButtonPushed #GotoBasicHotkeys,
.ResetButtonPushed #GotoBasicHotkeys,
.ResetButtonPushed #GotoAdvancedHotkeys,
.ResetButtonPushed #ResetHotkeysButton,
.ResetButtonPushed #ScrollRightButton,
.ResetButtonPushed #ScrollLeftButton
{
	opacity: 0;
}


.ShowingAdvanced.PageButtonPushed #GotoBasicHotkeys,
.PageButtonPushed #GotoAdvancedHotkeys
{
	opacity: 0;
}

.ExpandDownArrow
{
	width: 32px;
	height: 32px;
	wash-color: none;
}

#GotoAdvancedHotkeys:hover .ExpandDownArrow
{
	transform: translateY(5px);
}


#GotoBasicHotkeys .ExpandDownArrow
{
	transform: rotateZ(180deg)  translateY(3px);
}

#GotoBasicHotkeys:hover .ExpandDownArrow
{
	transform: rotateZ(180deg) translateY(-2px);
}

.HotkeysBottomButton
{
	height:34px;
	margin-left: 18px;
	margin-right: 12px;
	margin-bottom: 6px;
	vertical-align: bottom;
	opacity: 1;
	wash-color: #66aadd;
	
	transition-property: wash-color, opacity;
	transition-delay: 0.0s;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.HotkeysBottomButton Label
{
	margin-top: 5px;
	color: white;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
}

#ScrollRightButton Label
{
	margin-right: 28px;
	text-align: right;
}

#ScrollLeftButton Label
{
	margin-right: 0px;	
	text-align: right;
}

.HotkeysBottomButton:hover
{
	wash-color: white;
}

.HideButton
{
	opacity: .1;
}

.HideSection
{
	opacity: 0;
}


.BottomNav
{
	width: 100%;
	margin-top: -14px;
	vertical-align: bottom;
}

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

#RebindKeysInternal
{
	vertical-align: middle;
	horizontal-align: center;
	width:33%;
}

#RebindKeysAbilities, #RebindKeysItems, #RebindKeysCamera
{
	horizontal-align: center;
	vertical-align: middle;
}

#KeybindListDropdown
{
    margin-bottom: 8px;
}

#RebindKeysItems
{
    margin-bottom: 8px;
}

#RebindKeysCameraFull
{
	horizontal-align: center;
	vertical-align: center;
}

#RebindKeysCameraFull Image, #RebindKeysCameraFull Label
{
	horizontal-align: center;
	vertical-align: center;
	margin-right: 10%;
	margin-top: -10%;
} 

#RebindKeysCameraSTANDARD
{
	margin-top: 10%;
}

#RebindKeysCameraSTANDARDUp
{
	horizontal-align: center;
}

#RebindKeysCameraSTANDARDLeftRight
{
	horizontal-align: center;
}

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

#RebindKeysFinalize Button
{
	margin-left: 40px;
	margin-right: 40px;
}

#RebindKeysAbilitiesSTANDARD, #RebindKeysItemsSTANDARD
{
	vertical-align: middle;
}

#RebindKeysAbilitiesLEGACY
{
	vertical-align: middle;
	height:100%;
	pre-transform-scale2d: 0.9;
}

#RebindKeysAbilitiesLEGACYRow2
{
	margin-left:10px;
}

#RebindKeysAbilitiesLEGACYRow3
{
	margin-left:20px;
}

#PhrasesButton, #ChatWheelButton, #PingWheelButton
{
	padding-top: 12px;
	height: 100%;
	horizontal-align: center;
	z-index: 3;
}

#ChatWheelButton .ChatDialogButtonImage,
#PingWheelButton .ChatDialogButtonImage
{
	wash-color: #666;
}

#ChatWheelEmoticon
{
	width: 28px;
	height: 28px;
	margin: 8px;
	visibility: collapse;
}

.ChatWheelButton.HasEmoticon #ChatWheelEmoticon
{
	visibility: visible;
}

#PhrasesButton
{
	//visibility: collapse;
	/* margin-left: 38px; */
}

#PhrasesButton:hover, #ChatWheelButton:hover
{
	//transform: translateY(-1px);
	//background-color: #222222;
	brightness: 2;
}

#PhrasesButton:selected, #ChatWheelButton:selected
{
	//border: 2px solid #32383677;
	//background-color: gradient( linear, 0% 0%, 0% 5%, from( #232326 ), to( #1c1d20 ) );
	brightness: 2;
	//transform: translateY(0px);
	//border-width: 2px 2px 0px 2px;
}

#PhrasesSubTab
{
	vertical-align: top;
	horizontal-align: right;
	width:33%;
	margin-right: 30px;
	margin-left: 30px;
	margin-top: 190px;
	z-index: 1;
	padding-left: 30%;
	padding-right: 30%;
	padding-top: 120px;
}

#PhrasesSubTab,
#ChatWheelSubTab,
#PingWheelSubTab
{
	vertical-align: top;
	horizontal-align: right;
	width: 100%;
    height: 100%;
	flow-children: down;
	margin: 0px;
}

#ChatWheelContents
{
	width: 100%;
    height: 80%;
	flow-children: right;
}

#PingWheelContents
{
	width: 100%;
    height: 88%;
	flow-children: right;
}

#ChatWheelWheelPanel
{
	width: fill-parent-flow( 1.0 );
	vertical-align: top;
	overflow: squish;
	margin-top: 16px;
}

#PingWheelWheelPanel
{
	width: fill-parent-flow( 1.0 );
	vertical-align: top;
	overflow: squish;
	margin: 16px 0;
	height: 100%;
	/* background-color: #16181D;
	border: 2px solid #30313Ddd; */
	padding: 32px 0 0 0;
}

#MiddleChatWheelPanel,
#MiddlePingWheelPanel
{
	vertical-align: middle;
	flow-children: none;
	width: 100%;
}

#MiddlePingWheelPanel
{
	margin-top: 0px;
}

#ChatWheelIcon
{
	horizontal-align: center;
	vertical-align: middle;
	background-image: url("s2r://panorama/images/settings_chatwheel_png.vtex");
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
    width: 127px;
    height: 128px;
	wash-color: #666;
}

#TopChatWheelPanel
{
	width: 100%;
	vertical-align: bottom;
}
.ChatWheelButton .PingWheelButtonText
{
	vertical-align: bottom;
}

.PingWheelButtonText
{
	text-transform: uppercase;
	text-align: center;
	horizontal-align: center;
	width: 100%;
}

#TopPingWheelPanel
{
	width: 100%;
	vertical-align: bottom;
	margin-top:100px;
	visibility: collapse;
}

#BottomPingWheelPanel
{
	/* vertical-align: bottom; */
	horizontal-align:center;
	/* margin-top: 100px; */
	flow-children: right;
	width: 100%;
}

#LeftChatWheelContents, #RightChatWheelContents
{
	width: 500px;
	vertical-align: middle;
	flow-children: down;
}

#LeftChatWheelContents
{
	horizontal-align: left;
}

#RightChatWheelContents
{
	horizontal-align: right;
}

#BottomChatWheelPanel
{
	vertical-align: top;
	width: 100%;
}

.ChatWheelLine
{
		width: 400px;
		height: 3px;
		background-color: #2B2F30;
		background-color: gradient( linear, 0% 0%, 100% 0%, from( #2B2F3088 ), color-stop( .3, #2B2F30 ), color-stop( .35, transparent), color-stop( .65, transparent), color-stop( .7, #2B2F30 ), to( #2B2F3088 ) ); 
		vertical-align: middle;
		horizontal-align: center;
}

.ShowingAdvanced #GotoAdvancedHotkeys
{
	opacity: 0;
}

.ShowingAdvanced #GotoBasicHotkeys
{
	opacity: 1;
}


#GotoBasicHotkeys
{
	opacity: 0;
}

.AdvancedButton 
{
	vertical-align: top;
	horizontal-align: center;
}

#ChatWheelLine2
{
	transform: rotateZ(45deg);
}

#ChatWheelLine3
{
	transform: rotateZ(-45deg);
}

#ChatWheelLine4
{
	transform: rotateZ(90deg);
	width: 440px;
}

#PhrasesClose,
#ChatWheelClose,
#PingWheelClose
{
	horizontal-align:center;
	margin-top: 32px;
	padding: 7px;
	padding-left: 16px;
	padding-right: 16px;
}

#PingWheelClose
{
	margin-top: 8px;
}

#PhrasesClose
{
	vertical-align: bottom;
	margin-bottom: 132px;
}

#ChatWheelPhraseListContainer,
#PingWheelListContainer
{
	margin: 16px;
	margin-right: 42px;
    flow-children: down;
	height: 100%;
    width: fill-parent-flow( 0.5 );
    padding: 16px;
}


#PingWheelListContainer
{
	padding: 0;
	width: fill-parent-flow( 0.2 );
}

.ChatWheelBindOptionsContainer
{
	border: 1px solid #000000;
	box-shadow: #00000033 -2px -2px 4px 4px;

	background-color: #202023;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #202023 ), to( #202023 ) ); 
	
	transition-property: background-color, box-shadow, border;
	transition-duration: 0.32s;
	transition-timing-function: ease-in-out;	
}

.ChatWheelBindOptionsContainer.Active 
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #28395C ), to( #1F2533 ) ); 
	box-shadow: #000000dd -6px -6px 12px 12px;
}

#ChatWheelPhraseList,
#PingWheelItemList
{
    flow-children: down;
	height: 100%;
	width: 100%;
	overflow: squish scroll;
    padding: 16px;
    background-color: transparent;
	opacity-mask: url("s2r://panorama/images/masks/softedge_vertical_vscroll_psd.vtex") 1.0;	
}

#PingWheelItemList
{
	padding: 16px 0 0 0;
}

.SettingsSection
{
	flow-children: down;
    width: 100%;
	margin-top: 12px;
	//margin-top: 5px;
}

.SectionHeader
{
	font-size: 24px;
	font-weight: thin;
	color: #939da0;
	text-transform: uppercase;
}

#Items .SectionHeader
{
	margin-left: 164px;
}

.AdvancedHeader
{
	color: #66aadd;	
	font-size: 32px;
}

#ChatWheelSubTab .SectionHeader,
#PingWheelSubTab .SectionHeader
{
	horizontal-align: center;
	margin-top: 16px;
}

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

#ChatWheelTabs TabButton
{
	margin: 0px 24px;
}

#ChatWheelTabs TabButton:selected
{
	border-bottom: 2px solid #66aadd;
}
#ChatWheelTabs TabButton:hover
{
	brightness: 2.0;
}
#ChatWheelTabs TabButton:active
{
	brightness: 1.5;
}


#ChatWheelTabs TabButton Label
{
	text-transform: uppercase;
	text-align: center;
	padding: 6px 0px 4px 0px;
	//min-width: 120px;
	color: #ccc;
}

.SectionHeaderLine
{
	height: 2px;
	width: 100%;
	margin: 2px;
	background-color: #3b3f40;
	margin-bottom: 12px;
}

.SectionHeaderLineNoMargin
{
	height: 2px;
	width: 100%;
	background-color: #3b3f40;
	margin-top: 2px;
	margin-bottom: 12px;
}

.ShortSectionHeaderLine
{
	height: 2px;
	width: 280px;
	margin: 2px;
	background-color: #3b3f4066;
	margin-bottom: 12px;
}

.CheckBox,
DOTASettingsCheckbox
{
	background-color: none;
	height:40px;
	//width: 50%;
	margin: -4px;
}

.OptionsRow
{
//	background-color: none;
	//height:40px;
	//width: 50%;
	//margin: -2px;
}

.OptionsCheckBox
{
	//background-color: #14161600;
	//width: 100%;
	//height: 32px;
	//margin: 5px;
	//padding-left: 8px;
	padding-top: 12px;
	padding-bottom: 12px;
	//horizontal-align: left;
}

.OptionsCheckBox Label
{
	vertical-align: center;
	margin-top: 2px;
	margin-bottom: 0px;
	margin-left: 8px;
	font-size: 18px;
	color: #7d8688;
}

#LegacyKeysCheckLabel
{
	font-size: 12px;
	horizontal-align: right;
	vertical-align: center;
}

#LegacyKeysCheckBox
{
}

#ContextLegacy
{
	horizontal-align: center;
}

#PerUnitHotkeysCheckBox
{
	margin: 0px;
	padding: 0px;
	//margin-right: 24px;
    margin-left: 100px;
	vertical-align: middle;
}

#PerUnitHotkeysCheckBox Label
{
	text-transform: uppercase;
	padding-left: 12px;
}

#ResetHotkeysButton Label
{
	horizontal-align: left;
	text-align: left;
	font-size: 18px;
}

#SpectatorHotkeysButton
{
	horizontal-align: right;
	font-size: 18px;
	background-color: #666666;
	width: 180px;
	height: 24px;
	text-align: center;
}

#Items,
#Abilities
{
	width: 694px;
	width: 50%;
	//margin-left: 16px;
	//margin-right: 16px;
}


#Items
{
	horizontal-align: right;
}

#AbilitiesContents
{
    width: 100%;
}

#AbilitiesActive
{
    width: 100%;
    opacity: 1.0;
	margin-top: 4px;

    border: 1px solid #000000;
	box-shadow: fill #00000033 -2px -2px 4px 4px;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #202023 ), to( #1C1D20 ) ); 
	
	transition-property: background-color, box-shadow, border, opacity;
	transition-duration: 0.32s;
	transition-timing-function: ease-in-out;		
	
}

.PerUnitKeybindsActive #AbilitiesActive
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #232627 ), to( #1C1D20 ) ); 
	box-shadow: fill #00000088 -2px -2px 12px 12px;
}

#AbilitiesDisabled
{
    width: 100%;
    height: 100%;
	padding-top: 32px;

    opacity: 0.0;

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

#AbilitiesDisabled Label
{
    color: #7d8688;
    horizontal-align: center;
    //text-align: center;
    vertical-align: center;
    margin: 20px;
}


#Abilities.LegacyKeys #AbilitiesDisabled
{
    opacity: 1.0;
}

#Abilities.LegacyKeys #AbilitiesActive
{
    /* Leave this faintly visible. It can't be opacity: 0, or else the
       height: 100% for AbilitiesDisabled will collapse down to nothing. */
    opacity: 0.001;
}

.SectionHeaderContainer
{
	width: 100%;
	flow-children: right;
	padding: 0px;
	margin-bottom: 6px;
}

.SectionHeaderContainer .CheckBox
{
	horizontal-align: right;
	margin-top: 6px;
}

.CheckBox
{
}

#AutoAttackOptions
{
	margin-left: 16px;
	padding-bottom: 0px;
}

#AutoAttackOptions Label
{
	font-size: 18px;
	color: #7d8688;
}

#NetworkQuality Label,
.CheckBox Label
{
	font-size: 18px;
	color: #7d8688;
	vertical-align: center;
	margin: 0px;
	padding-top: 4px;
	padding-left: 5px;
	letter-spacing: 1px;
	font-weight: thin;
}

#NetworkQualityLabel
{
	margin-right: 12px;
}

#NetworkQuality Label
{
	margin: 0px;
	padding-top: 0px;
	padding-left: 5px;
	letter-spacing: 1px;
	font-weight: thin;
	margin-bottom: 6px;
	vertical-align: top;
}

	

.CheckBox .TickBox
{
	//background-color: red;
	width: 18px;
	height: 18px;
}

.ItemsQuickcastContainer .TickBox,
#DefaultAbilityQuickcastCheckBox .TickBox,
.QuickCastCheckBox.CheckBox .TickBox
{
	width: 22px;
	height: 22px;
	border-color: #66AADD;	
	border-radius: 4px;
	border-width: 1px;
}

.ItemsQuickcastContainer .TickBox,
#DefaultAbilityQuickcastCheckBox .TickBox
{
	border-color: #3C4343;	
	border-width: 2px;
}

#DefaultItemQuickcastCheckBox:selected .TickBox,
#DefaultAbilityQuickcastCheckBox:selected .TickBox,
.QuickCastCheckBox.CheckBox:selected .TickBox
{
	background-image: url("s2r://panorama/images/status_icons/quickcast_lightning_psd.vtex");
	background-size: 10px 16px;
	background-position: 50% 50%;
	background-repeat: no-repeat;	
}

#DefaultItemQuickcastCheckBox:selected .TickBox,
#DefaultAbilityQuickcastCheckBox:selected .TickBox,
{
	border-color: #66AADD;	
	border-radius: 4px;
	border-width: 1px;
}
	
#DefaultItemQuickcastCheckBox:hover .TickBox,
#DefaultAbilityQuickcastCheckBox:hover .TickBox,
.QuickCastCheckBox.CheckBox:hover .TickBox
{
	width: 22px;
	height: 22px;
	border-color: #88CCFF;	
	border-radius: 4px;
	border-width: 2px;
	background-image: url("s2r://panorama/images/status_icons/quickcast_lightning_unchecked_psd.vtex");
	background-size: 10px 16px;
	background-position: 50% 50%;
	background-repeat: no-repeat;			
}

#ButtonCodeIsScanCodeCheckBox
{
    width: 400px;
}

.KeyImage
{
	background-image: url("s2r://panorama/images/key_illustration_psd.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 6px;
	padding-bottom: 14px;
	width: 64px;
	height: 64px;
}

.KeyImage Label
{
	vertical-align: center;
	horizontal-align: center;
	text-align: center;
	margin: 0px;
	font-size: 16px;
}

.KeyBlank
{
	background-image: url("s2r://panorama/images/key_illustration_psd.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0.5;
	width: 64px;
	height: 64px;
}
/* Custom blocks */


/* Ability Binding custom block*/
#AbilityBindingTabBar
{
	flow-children: right;
    width: 100%;
	height: 32px;
}

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

.AbilityNavBarButton Label
{
	width: 100%;
	height: 32px;
	color: #888888;
	font-size: 18px;
	background-color: gradient( linear, 0% 80%, 0% 100%, from( #1C1D2000 ), to( #00000000 ) ); 
	padding-top: 4px;
	margin: 0px;
	text-transform: uppercase;

	text-align: center;
	border-left: 4px solid #1c1d2000;
	border-right: 4px solid #1c1d2000;
}

.AbilityNavBarButton:hover Label
{
	background-color: gradient( linear, 0% 80%, 0% 100%, from( #242628 ), to( #00000033 ) ); 
	color: white;
	margin-left: 4px;
	margin-right: 4px;
}

.AbilityNavBarButton:selected Label
{
	background-color: gradient( linear, 0% 0%, 0% 90%, from( #343638 ), to( #242628 ) ); 
	color: white;
	border-bottom: 4px solid transparent;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}


.AbilityNavBarButton:selected:hover Label
{
	margin: 0px;

}

#AbilityBindingContents
{
	background-color: #24262800;
	width: 100%;
	height: fit-children;
	height: 300px;
	margin-bottom: 4px;
	margin-top: 4px;
    flow-children: down;
//	border: 1px solid black;
}

.AbilityBindingTopRow
{
    width: 100%;
    height: fit-children;
    margin-top: 16px;
}

.DefaultAbilityQuickcastContainer
{
    horizontal-align: center;
    flow-children: right;
    margin-bottom: 9px;
	//margin-left: 30px;
	vertical-align: bottom;
}

.ItemsQuickcastContainer
{
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 10px;
	visibility: visible;
}



.ItemsQuickcastContainer Label,
.DefaultAbilityQuickcastContainer Label
{
    color: #939DA0;
    text-transform: uppercase;
	padding-left: 12px;
}

#AbilitiesDisabled .LegacyQuickCast Label
{
    margin: 0px;
}

.HeroSpecificAbilityQuickcastContainer
{
	height: 118px;
    horizontal-align: center;
    flow-children: none;
	//border:1px solid #484848;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

#Abilities.HasQuickcast .HeroSpecificAbilityQuickcastContainer
{
	opacity: 1;
}

#ItemBindingContents .HeroSpecificAbilityQuickcastContainer
{
	opacity: 0;
}

#Abilities.IsDefaultHeroKeybinds .HeroSpecificAbilityQuickcastContainer
{
    opacity: 0;
}

.HeroAbilityQuickCastButtons
{
	opacity: 1;
    horizontal-align: center;
    vertical-align: bottom;
    margin-top: 8px;
    margin-bottom: 0px;
    flow-children: right;
}

.AspectRatio4x3 .HeroSpecificAbilityQuickcastContainer
{
	height: 128px;
}

#Abilities.HasPerUnitKeybinds .HeroAbilityQuickCastButton
{
	visibility: visible;
}

.QuickCastCheckBoxContainer
{
    width: 96px;
    margin-left: 12px;
    margin-right: 0px;

}

.QuickCastCheckBox
{
    horizontal-align: right;
	margin-right: 0px;
	margin-bottom: 0px;
}

#AbilityBindingsHeroSelector
{
    margin-left: 35px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #191e1e ), to( #292e2e ) );
    width: 300px;
    height: 24px;
    vertical-align: center;
	border: 2px solid #444C4C;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

.PerUnitKeybindsActive.HasPerUnitKeybinds #ClearHeroAbilityBindings
{
	opacity: 1;
}
.PerUnitKeybindsActive #AbilityBindingsHeroSelector
{
	opacity: 1;
}

#AbilityBindingsHeroSelector:disabled 
{
	
}

#AbilityBindingsHeroSelector Label
{
    margin: 2px 2px 3px 8px;
    text-transform: uppercase;
	font-size: 14px;
}

#AbilityBindingsHeroSelector:disabled Label 
{
    color: #55555577;
}

.AbilityBindingsHeroSelectorArrow
{
    width: 20px;
	height: 20px;
	margin-left: 5px;
	wash-color: baseText;
    horizontal-align: right;

	background-size: contain;
	background-position: 50% 50%;
	background-image: url("s2r://panorama/images/control_icons/arrow_dropdown_png.vtex");
}

#ClearHeroAbilityBindings
{
    height: 24px;
    min-height: 24px;
    min-width: 100px;
    vertical-align: center;
    horizontal-align: right;
    padding: 2px 10px;
    margin-right: 24px;
	opacity: 0;
	
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;	
}



#ClearHeroAbilityBindings Label
{
    font-size: 14px;
    margin-top: 1px;
}

#AbilityQuickCastCheckBox
{
    horizontal-align: right;
    vertical-align: center;
}

#AbilityBindings_Hero
{
	width: 100%;
	height: 140px;
	background-color: #24262800;
}

.AbilityBindingOptions
{
	width: 100%;
	padding-right: 4px;
	background-color: #242628;
}

.MirrorHotkeysCheckBox
{
	horizontal-align: right;
	margin-top: 4px;
}

.HeroAbilityIcon
{
    width: 84px;
    height: 84px;
    margin: 12px;
	margin-top: 13px;
    background-color: #2B2F30;
	flow-children: none;
}

.HeroAbilityIcon DOTAAbilityImage
{
	border: 4px solid #414a45;
	width: 84px;
	height: 84px;
//	saturation: .5;
//	brightness: .25;
	opacity: .3;
	//blur: gaussian( 1, 1, 1 );
}
/*
.AspectRatio4x3 .HeroAbilityIcon
{
	width: 54px;
	height: 54px;
}

.AspectRatio4x3 .HeroAbilityIcon Label
{
	font-size: 12px;
}
*/


.HeroAbilityIcon:hover
{
	wash-color: red;
}

.HeroAbilityIcon Label
{
	width: 100%;
	color: #414a45;
    font-size: 40px;
	font-weight: thin;
    background-color: transparent;
    vertical-align: bottom;
    horizontal-align: right;
    text-align: right;
    height: fit-children;
	margin-right: 6px;
    margin-bottom: -10px;
    opacity: 1;
	
	transition-property: color, background-color;
	transition-duration: 0.16s;
	transition-timing-function: ease-in-out;
}

.HasIcon.HeroAbilityIcon Label
{
	opacity: 0;
}

#AbilityBoxes, #AbilityBoxesCast, #AbilityBoxesQuickCast, #AbilityBoxesAutoCast, #AbilityBoxesBG
{
	flow-children: right;
	horizontal-align: center;
	margin-top: 12px;
	overflow: noclip;
	pre-transform-scale2d: 1;

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

#ItemCast, #ItemQuickcast
{
	transition-property: wash-color, opacity, pre-transform-scale2d;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

#AbilityBoxes.HideSection, #AbilityBoxesCast.HideSection, #AbilityBoxesQuickCast.HideSection, #AbilityBoxesAutoCast.HideSection, #ItemCast.HideSection, #ItemQuickcast.HideSection
{
	pre-transform-scale2d: 0.8;
	wash-color: #242628;
}

#ItemCast,
#ItemQuickCast
{
	padding-top: 12px;
}

#AbilityBoxesBG
{
}

.AbilityBindings_Hero #AbilityBoxes, #AbilityBoxesCast, #AbilityBoxesQuickCast, #AbilityBoxesAutoCast, #AbilityBoxesBG
{
	height: 100%;
}

#HeroAbilityBindTypeButtons
{
	width: 600px;
	height: 24px;
	margin-bottom: 5px;
	horizontal-align: center;
	flow-children: right;
	vertical-align: bottom;
	visibility: collapse;
}

#AbilityCastButton
{
	border-right: 1px solid #7c858722;
}

#AbilityQuickCastButton
{
	border-right: 1px solid #7c858722;
}

.HeroAbilityBindTypeButton 
{
	width: fill-parent-flow( 1.0 );
	text-align: center;
	color: #444444;
	font-size: 14px;
	tooltip-position: bottom;
}

#Abilities.EnableAbilityQuickcastSlots .DefaultAbilityQuickcastContainer
{ 
	visibility: collapse;
}

/* always visible for legacy key quickcast */
#Abilities.EnableAbilityQuickcastSlots #AbilitiesDisabled .DefaultAbilityQuickcastContainer
{ 
	visibility: visible;
}

#Abilities.EnableAbilityQuickcastSlots #HeroAbilityBindTypeButtons
{
	visibility: visible;
}

#Abilities.EnableAbilityQuickcastSlots .QuickCastCheckBoxContainer
{
	visibility: collapse;
}

.HeroAbilityBindTypeButton Label
{
	horizontal-align: center;
	text-align: center;
	color: #7d8688;
	font-size: 18px;
	text-transform: uppercase;
}


#AbilityBindingContents.EnableAbilityQuickcastSlots .HeroAbilityBindTypeButton
{
	visibility: visible;
}

#AbilityBindingContents.EnableAbilityQuickcastSlots .DefaultAbilityQuickcastContainer
{
	visibility: collapse;
}

.EnableAbilityQuickcastSlots #Defau

.HeroAbilityBindTypeButton:hover Label
{	
	color: #CCCCCC;
}

.HeroAbilityBindTypeButton:selected Label
{   
	color: white;
}

/* Item Binding custom block*/
#ItemBindingContents
{
	background-color: none;
	width: 100%;
	height: 260px;
	margin-bottom: 4px;
}

#ItemBindTypeButtons
{
	width: 384px;
	height: 24px;
	vertical-align: bottom;
	margin-bottom: 5px;
	horizontal-align: center;
	flow-children: right;
}

#ItemCastButton
{
	border-right: 1px solid #7c858722;
}

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

.ItemBindTypeButton
{
	width: fill-parent-flow(1.0);
	text-align: center;
	color: #444444;
	font-size: 14px;
	tooltip-position: bottom;
	visibility: collapse;
}

.ItemBindTypeButton:hover Label
{	
	color: #cccccc;
}

.ItemBindTypeButton .RadioBox, .HeroAbilityBindTypeButton .RadioBox, .AbilityNavBarButton .RadioBox
{
	visibility:collapse;
}

#Items.EnableItemQuickcastSlots .ItemsQuickcastContainer
{ 
	visibility: collapse;
}

#Items.EnableItemQuickcastSlots .ItemBindTypeButton
{
	visibility: visible;
}

.ItemBindTypeButton Label
{
	color: #7d8688;
	text-transform: uppercase;
	font-size: 18px;
	horizontal-align: center;
}

.ItemBindTypeButton:selected Label
{
	color: white;
}

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

#ChatBindDialogsContents
{
	background-color: none;
	width: 100%;
	height: 172px;
	flow-children: right;
	padding-top: 0px;
	margin-top: 12px;
	margin-bottom: 4px;
}


.ChatDialogButton
{
	width: 33%;
	height: 130px;
	flow-children: down;
}

.ChatDialogButton:hover
{
	brightness: 2;
}

.ChatDialogButtonImage
{
	width: 80px;
	height: 80px;
	vertical-align: center;
	horizontal-align: center;
//	visibility: collapse;
}

.ChatBindDialogButtonLabel
{
	text-align: center;
	width: 100%;
	font-size: 18px;
	text-transform: uppercase;
	color: #AAAAAA;
	width: 164px;
	horizontal-align: center;
	text-align: center;
	margin-top: 12px;
}

Slider.HorizontalSlider
{
	width: 100%;
	height: 30px;
}

.DOTASettingsSlider
{
	width: 100%;
}

#AspectRatioPanel
{
    width: 100%;
}

#AspectRatioPanel RadioButton
{
	padding-top: 6px;
	margin-right: 10px;
}

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

.ControlGroupRow
{
	flow-children: right;
    width: 100%;
	overflow: noclip;
}

.ControlGroupRow DOTASettingsKeyBinder
{
	width: 238px;
	padding-right: 5px;
}

.AspectRatio4x3 .ControlGroupRow DOTASettingsKeyBinder
{
	width: 212px;
}


#TextureEnum 
{
    width: 100%;
    margin-left: 6px;
}

#ParticleEnum 
{
    width: 100%;
    margin-left: 6px;
}

#ShadowEnum 
{
    width: 100%;
    margin-left: 6px;
}

.EnumButton
{
	max-width: 200px;
	width: 100%;
	color: white;
	font-size: 16px;
	background-color: #33333300;
	margin: 0px 2px 2px 6px;
	padding-top: 2px;
	text-align: center;
}

.ChatWheelButton
{
	width: 210px;
	font-size: 16px;
	height: 92px;
	background-color: #2B2F30;
	border: 2px solid #414A45;
	margin: 12px;
    padding: 8px;
    horizontal-align: center;
	text-align: center;
	border-radius: 32px;
	//visibility: collapse;
	
	transition-property: transform, background-color, border, color;
	transition-duration: 0.16s;
	transition-timing-function: ease-in-out;	
}

.PingWheelButton
{
	width: 132px;
	height: 132px;
	border-radius: 100px;
	background-color: #2B2F30;
	border: 2px solid #414A45;
	margin: 32px 12px;
	margin: 16px 0px;
	padding: 0;
}

#PingWheelButton6,
#PingWheelButton2
{
	margin-left: 352px;
}

#PingWheelButton7,
#PingWheelButton3
{
	margin-right: 352px;
}

#PingWheelButton4
{
	margin-left:252px;
}
#PingWheelButton5
{
	margin-right: 252px;
}
#PingWheelButton0,
#PingWheelButton1
{
	horizontal-align: center;
}

.StandardPingWheelButton,
.AlternatePingWheelButton
{
	flow-children: down;
	width: 200px;
}

.StandardPingWheelButton
{
	horizontal-align: left;
	margin-left: 164px;
}

.AlternatePingWheelButton
{
	horizontal-align: right;
	margin-right: 164px;
}


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

.IsSpray .ChatWheelButtonContents
{
	visibility: collapse;
}

.ChatWheelButton.HasEmoticon .ChatWheelButtonContents > Label
{
	max-width: 125px;
}

.ChatWheelButton .ChatWheelSoundIcon
{
	vertical-align: middle;
	margin-right: 4px;
	visibility: collapse;
}

.ChatWheelButton.HasSound .ChatWheelSoundIcon
{
	visibility: visible;
}

.ChatWheelButton .ChatWheelSprayImage
{
	visibility: collapse;
	width: 64px;
	height: 64px;
	margin-left: 8px;
	margin-right: 8px;
	horizontal-align: center;
	wash-color: #fff;
}

.ChatWheelButton .PingWheelImage
{
	width: 54px;
	height: 54px;
	margin-left: 8px;
	margin-right: 8px;
	margin: 0;
	horizontal-align: center;
	wash-color: #fff;
}

.ChatWheelButton.IsSpray .ChatWheelSprayImage,
.ChatWheelButton.IsSpray .PingWheelImage
{
	visibility: visible;
}

.ChatWheelButton.IsSpray Label
{
	margin-right: 96px;
}

#BottomChatWheelPanel .ChatWheelButton
{
	margin-top: 0px;
}

#TopChatWheelPanel .ChatWheelButton
{
	margin-bottom: 0px;
}

#ChatWheelButton7,
#ChatWheelButton1
{
	margin-left: 0px;
}

#ChatWheelButton5,
#ChatWheelButton3
{
	margin-right: 0px;
}

#ChatWheelButton4
{
	margin-right: 90px;
	margin-top: 64px;
	margin-bottom: 64px;
}

#ChatWheelButton0
{
	margin-left: 90px;
	margin-top: 64px;
	margin-bottom: 64px;
}

.ChatWheelButton:hover
{
	border-color: #5B6A62;
}

.ChatWheelButton:selected
{
	background-color: #0570BB;
	border-color: #5C99FF;
	box-shadow: #5c99ff22 -4px -4px 8px 8px;
	
	animation-name: BackgroundPulse;
	animation-duration: 1.35s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes 'BackgroundPulse'
{
	0%
	{
		background-color: #1350a9;
	}

	50%
	{
		background-color: #021088;
	}
				
	
	100%
	{
		background-color: #1350a9;
	}
}



.ChatWheelButton:selected Label
{
	color: white;
}

.ChatWheelButton Label
{
	color: #939da0;
	horizontal-align: center;
	vertical-align: middle;
    text-align: center;
}

.ChatWheelButton:hover Label
{
	color: white;
}

.ChatWheelPhraseChoiceLine,
.PingWheelPhraseChoiceLine
{
	width: 100%;
	flow-children: right;
    margin-left: 4px;
	padding: 4px;
}

.PingWheelPhraseChoiceLine
{
	padding: 16px 0;
	margin-left: 16px;
}

.PingWheelPhraseChoiceLine:hover
{
	background-color:#191922;
}

.PingWheelPhraseChoiceText
{
	margin-left: 32px;
	color: #aaa;
	font-size: 20px;
	letter-spacing: 0;

	vertical-align: middle;
}

#ChatWheelPhraseListContainer.Active .ChatWheelPhraseChoiceLine.MessageIsUnlocked:hover,
#PingWheelListContainer.Active .ChatWheelPhraseChoiceLine.MessageIsUnlocked:hover
{
	background-color: #0570BB;
}

.ChatWheelSoundIcon
{
	width: 20px;
	height: 20px;

	background-image: url("s2r://panorama/images/hud/reborn/icon_scoreboard_mute_sound_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;
}

#ChatWheelSoundButton
{
	margin-right: 4px;

	visibility: collapse;
}
#ChatWheelSoundButton:hover
{
	brightness: 2.0;
}
#ChatWheelSoundButton:active
{
	brightness: 1.5;
}
.ChatWheelPhraseChoiceLine.MessageHasSound:not(.IsSpray) #ChatWheelSoundButton
{
	visibility: visible;
}
.IsSpray #ChatWheelSoundButton
{
	vertical-align: center;
}

.ChatWheelAllLabel
{
	color: white;
	transition-property: color;
	transition-duration: .32s;

	visibility: collapse;
}

.ChatWheelPhraseChoiceLine.MessageIsToAll .ChatWheelAllLabel
{
	visibility: visible;
}

.ChatWheelPhraseChoiceText, .ChatWheelAllLabel
{
	color: #aaa;

	transition-property: color;
	transition-duration: .32s;	

	letter-spacing: 0;
}

.ChatWheelPhraseChoiceLine.MessageHasSound.MessageIsUnlocked .ChatWheelPhraseChoiceText,
#ChatWheelPhraseListContainer.Active .ChatWheelPhraseChoiceLine.MessageHasSound.MessageIsUnlocked .ChatWheelPhraseChoiceText,
#PingWheelListContainer.Active .ChatWheelPhraseChoiceLine.MessageHasSound.MessageIsUnlocked .ChatWheelPhraseChoiceText,
#ChatWheelPhraseListContainer.Active .ChatWheelPhraseChoiceLine.MessageHasSound.MessageIsUnlocked .ChatWheelAllLabel
#PingWheelListContainer.Active .ChatWheelPhraseChoiceLine.MessageHasSound.MessageIsUnlocked .ChatWheelPhraseChoiceText,
{
	color: white;
}

.ChatWheelUnlockInfo_EventLevel > Label
{
	text-align: right;
	margin-right: 6px;
	width: 90px;
	letter-spacing: 0px;
	//color: textShadeColor;
	text-transform: uppercase;
}

.IsSpray .ChatWheelUnlockInfo_EventLevel > Label
{
	vertical-align: center;
}

.ChatWheelPhraseChoiceLine.MessageHasSound .ChatWheelPhraseChoiceText
{
	color: #555;
}

#ChatWheelMessageUnlockInfo
{
	vertical-align: center;
}

.ChatWheelSprayImage
{
	visibility: collapse;

	horizontal-align: left;
	vertical-align: middle;
	background-image: url("s2r://panorama/images/settings_chatwheel_png.vtex");
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
    width: 64px;
    height: 64px;
	wash-color: #666;
	margin-left: 24px;
}

.PingWheelImage
{
	horizontal-align: left;
	vertical-align: middle;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 48px;
	height: 48px;
	wash-color: #666;
	margin-left: 24px;
}


.IsSpray .ChatWheelSprayImage
{
	visibility: visible;
}

.MessageHasSound.IsSpray .ChatWheelSprayImage
{
	margin-left: 0px;
}

.MessageIsUnlocked .ChatWheelSprayImage,
.MessageIsUnlocked .PingWheelImage
{
	wash-color: #fff;
}

.MessageIsUnlocked .ChatWheelUnlockInfo_EventLevel > Label
{
	//color: textAccentColor;
}

.ChatWheelUnlockInfo_ShardsPurchase
{
	margin-right: 8px;
}

.ChatWheelUnlockInfo_ShardsPurchase #LockIcon,
.ChatWheelUnlockInfo_EventGeneric #LockIcon
{
	width: 20px;
	height: 20px;
	background-image: url("s2r://panorama/images/control_icons/lock_medium_png.vtex");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	wash-color: dotaPlusGold;
	tooltip-position: left;
	tooltip-body-position: 50% 50%;
	opacity: 1.0;
}

.ChatWheelUnlockInfo_ShardsPurchase #LockIcon:hover,
.ChatWheelUnlockInfo_EventGeneric #LockIcon:hover
{
	brightness: 2.0;
}

.ChatWheelUnlockInfo_ShardsPurchase #LockIcon:active,
.ChatWheelUnlockInfo_EventGeneric #LockIcon:active
{
	brightness: 1.5;
}

.MessageIsUnlocked .ChatWheelUnlockInfo_ShardsPurchase #LockIcon,
.MessageIsUnlocked .ChatWheelUnlockInfo_EventGeneric #LockIcon
{
	opacity: 0.0;
}

#ChatWheelMessageUnlockInfo.ChatWheelUnlockInfo_GuildPercentile
{
	vertical-align: top;
}

.IsSpray #ChatWheelMessageUnlockInfo.ChatWheelUnlockInfo_GuildPercentile
{
	vertical-align: middle;
}


.ChatWheelUnlockInfo_GuildPercentile .ChatWheelUnlockLevel
{
	letter-spacing: 0px;
	width: 120px;
	font-size: 16px;
	text-align: right;
	margin-right: 4px;
}

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

#ChatWheelHeader
{
	width: 100%;
	border-bottom: 1px solid #3b3f40;
    margin-top: 10px;
    margin-bottom: 4px;
	flow-children: right;
}

#ChatWheelHeader > Label
{
	color:  #939da0;
	font-size: 20px;
	text-transform: uppercase;

	transition-property: color, border;
	transition-duration: .32s;		
}

#ChatWheelHeader #ChatWheelCategoryLink
{
	font-size: 16px;
	vertical-align: middle;
	color: #999;
	letter-spacing: 2px;
}

#ChatWheelHeader #ChatWheelCategoryLink:hover
{
	brightness: 2.0;
}
#ChatWheelHeader #ChatWheelCategoryLink:active
{
	brightness: 1.5;
}

#ChatWheelHeader.First
{
    margin-top: 0px;
}

#ChatWheelHeader .CategoryIcon
{
	width: 22px;
	height: 22px;

	margin-right: 4px;

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

	visibility: collapse;

	tooltip-position: top;
	tooltip-body-position: 0% 50%;

}

.ChatWheelCategory.ActiveEventCategory #ChatWheelHeader
{
	border-bottom: 1px solid textUltraBrightColor&33;
}

.ChatWheelCategory.ActiveEventCategory #ChatWheelHeader .CategoryIcon
{
	visibility: visible;
	//background-image: chatWheelCategoryIcon;
}

.ChatWheelCategory.ActiveEventCategory #ChatWheelHeader > Label
{
	//color: textUltraBrightColor;
	letter-spacing: 1px;
}


.ChatWheelCategory.DotaPlusCategory #ChatWheelHeader
{
	border-bottom: 1px solid dotaPlusGold&66;
}

.ChatWheelCategory.DotaPlusCategory #ChatWheelHeader .CategoryIcon
{
	visibility: visible;
	background-image: url("s2r://panorama/images/dota_plus/dotaplus_logo_small_png.vtex");
	width: 20px;
	height: 20px;
	vertical-align: middle;
	transform: translateY( -2px );
}

.ChatWheelCategory.DotaPlusCategory #ChatWheelHeader > Label
{
	margin-left: 2px;
	color: dotaPlusGoldGradient;
}

.ChatWheelCategory #ChatWheelMessages
{
	flow-children: down;
	width: 100%;
}

.AudioVideoPanelButton
{
	border:1px solid #DDDDDD;
	background-color: #333333;
	margin: 4px;
}

.AudioVideoPanelButton:hover
{
	border: 1px solid #FFFFFF;
	background-color: #666666;
}
   
.AudioVideoPanelButton:active
{
	transform: translateY(2px);
}

.AudioVideoPanelButton:active:selected
{
	transform: translateY(0px);
}

#BottomVideoButtonsPanel, #AudioDefaultsButton
{
	margin-top: 50px;
}

#VideoDefaultsButton
{
    margin-left: 16px;
}

#CustomVideoResolution
{
	margin-top: 16px;
	padding-left: 24px;
	padding-right: 0px;
}

DropDown
{
	width: 314px;
}

#RenderSystemPanel
{
	width: 100%;
}

#RenderSystemCurrent
{
	margin-bottom: 16px;
}

#RenderSystemDropDown
{
	width: 100%;
}


#CustomVideoResolution:disabled RadioButton,
#CustomVideoResolution:disabled Label,
#CustomVideoResolution:disabled DropDown,
#CustomVideoResolution:disabled .radiobox,
#CustomVideoResolution:disabled Button
{
	border-color: #444444;
	color: #444444;
	background-color:#00000000;
}

#AdvancedVideo
{
	padding-left: 12px;
    flow-children: down;
}

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


.advancedvideo
{
	width: 40%;
	flow-children:down;
	margin-bottom: 24px;
}

#RenderQuality
{
	margin-left: 10px;
	margin-top: 12px;
}

#FpsMaxSlider
{
	margin-left: 10px;
	margin-top: 8px;
}

#ResolutionPanel, #DisplayModePanel, #FullscreenBrightness
{
	//margin: 5px;
	margin-top: 16px;
}

#ResolutionPanel
{
	margin-right: 25px;
}

#DevicePanel
{
	margin-right: 28px;
	margin-bottom: 20px;
}

.AspectRatio4x3 #DevicePanel
{
	margin-right: 12px;
}


#BasicVideo SlottedSlider
{
	width: 100%;
	margin-left: 28px;
}

#VideoSliderLabels
{
	width: 100%;
	margin-left: 28px;
	margin-bottom: 12px;
	margin-top: 6px;
}

#VideoSliderLabels:disabled Label
{
	color: #333333;
}

#VideoFastestLabel
{
	horizontal-align: left;
}

#VideoBestLookingLabel
{
	horizontal-align: right;
}

.AutocastContainer
{
	border: 2px solid #414a4566;
	margin: 2px;
	margin-top: 8px;
}

#VoiceHeader
{
    margin-top: 30px;
}

#VoiceControls
{
	flow-children: down;
	width: 100%;
	margin-bottom: 20px;
}

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

.VoiceControlsSpacer
{
	height: 100%;
	width: fill-parent-flow( 0.495 );
	margin-right: 8px;
}

#PushToTalkHeader
{
	width: fill-parent-flow( 0.21 );
	text-align: center;
}

#OpenMicHeader
{
	width: fill-parent-flow( 0.3 );
	text-align: center;
	margin-left: 8px;
}

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

.VoiceControlsRow DOTASettingsKeyBinder
{
	width: 70%;
}

.VoiceControlsRow DOTASettingsCheckbox 
{
	margin-left: 10px;
	vertical-align: middle;
	width: fill-parent-flow( 1.0 );
}

.VoiceControlsRow DOTASettingsCheckbox .TickBox
{
	horizontal-align: center;
}

ProgressBar
{
	width: 100%;
	height: 16px;
}

ProgressBar .ProgressBarLeft
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #222222FF ), to( #11ff66 ) );
	height: 12px;
}

.PlainLabel
{
	vertical-align: center;
	margin-top: 2px;
	margin-bottom: 0px;
	font-size: 18px;
	color: #7d8688;
}

a
{
    text-decoration: underline;
}

.PlainLabel a:hover
{
	color: #ffffff;
}

#VoiceConfigInSteamLabel, #CurrentMicLevel
{
    margin-bottom: 20px;
}

#HideProfileButton
{
	visibility: collapse;
}

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

#AboutTabContentContainer
{
	vertical-align: middle;
	horizontal-align: middle;
	flow-children: down;
	margin-bottom: 100px;
}


.AboutVersion
{
	horizontal-align: center;
}

#AboutValveLogo, #AboutDotaLogo
{
	horizontal-align: center;
	background-position: center;
	background-repeat: no-repeat;
}

#AboutDotaLogo
{
	width: 1720px;
	height: 172px;
	
	background-image: url("s2r://panorama/images/logos/dota_logo_psd.vtex");
	background-size: contain;
	
	margin-bottom: 32px;
}

#AboutValveLogo
{
	height: 100px;
	width: height-percentage( 240% );
	background-image: url("s2r://panorama/images/logos/valve_white_png.vtex");
	background-size: contain;
	wash-color: #696a6c;

	margin-top: 20px;
}

.AboutVersion
{
	text-transform: uppercase;
	color: #646462;
	margin-bottom: 2px;
}

.AboutVersion .VersionNumber
{
	color: #9ea9ac;
}

#CreditsButton
{
	horizontal-align: center;
	margin-top: 85px;
}

#OptionsTabContent.ShowingAdvanced,
#InGameSubTab.ShowingAdvanced
{
	background-color: gradient( linear, 0% 0%, 0% 25%, from( #66AADD33 ), color-stop( 0.02, #3C408A33 ), color-stop( 0.2, #2F325A33 ), color-stop( 0.8, #1c1d2000 ), to( #1c1d2000 ) );
}

#OptionsTabContent
{
	background-color: gradient( linear, 0% 0%, 0% 25%, from( #3C40d800 ), color-stop( 0.02, #3C408A00 ), color-stop( 0.2, #2F325A00 ), color-stop( 0.8, #1c1d2000 ), to( #1c1d2000 ) );	
}

#InGameSubTab
{
	padding-top: 6px;
	background-color: gradient( linear, 0% 0%, 0% 25%, from( #3C40d800 ), color-stop( 0.02, #3C408A00 ), color-stop( 0.2, #2F325A00 ), color-stop( 0.8, #1c1d2000 ), to( #1c1d2000 ) );
	transition-property: background-color, transform, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;	
}

#AdvancedOptions,
#BasicOptions,
#OptionsTabContent,
#BasicHotkeys,
#AdvancedHotKeys
{
	transition-property: opacity, transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;		
	flow-children: down;
}

#OptionsTabContent
{
	flow-children: none;
	transition-property: background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;	
}

#BasicOptions
{
	flow-children: right;
}

#BasicHotkeys
{
	opacity: 1;
	transform: translateY(0px);
}

#InGameSubTab.ShowingAdvanced #BasicHotkeys
{
	opacity: 0;
	transform: translateY(-120px);
}

#AdvancedOptions,
#AdvancedHotKeys
{
	padding-top: 16px;
	opacity: 0;
	transform: translateY(120px);
}

#InGameSubTab.ShowingAdvanced #AdvancedHotKeys
{
	opacity: 1;
	transform: translateY(0px);
}

#OptionsTabContent.ShowingAdvanced #BasicOptions
{
	opacity: 0;
	transform: translateY(-120px);
}

#OptionsTabContent.ShowingAdvanced #AdvancedOptions
{
	opacity: 1;
	transform: translateY(0px);
}

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

.SummonedUnitAutoattackEnum
{
    horizontal-align: center;
    width: 400px;
}

#AbilitiesAndItems
{
	width: 100%;
	height: 300px;
	horizontal-align: center;
	padding: 0px 16px 0px 16px;
}

#BasicHotkeysContainer
{
	//width: 1508px;
	flow-children: right;
	//height: fill-parent-flow (1.0);
	margin-top: 20px;
}


#MinimapPreview
{
	width: 100%;
	margin-top: 16px;
	margin-bottom: 16px;
}
#MinimapContainer
{
	width: 290px;
	height: 274px;	
	horizontal-align: center;
}

#MinimapImage
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/textures/minimap_game_png.vtex");
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	horizontal-align: center;
	transition-property:  opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;		
}

.SimpleBackground #MinimapImage
{
	background-image: url("s2r://panorama/images/minimap/dotamap_psd.vtex");
	background-size: 106%;
}

#MinimapImageBlank
{
	width: 100%;
	height: 100%;
	background-color: #171719;
}

.NoBackground #MinimapImage
{
	opacity: 0;
}

.MinimapIcon
{
	width: 48px;
	height: 48px;
	background-image: url("s2r://panorama/images/textures/minimap_hero_team_psd.vtex");
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;	
	wash-color: white;
	
	transition-property:  transform, opacity, background-image, wash-color;
	transition-duration: 0.0s, 0.2s;
	transition-delay: 0.0s, 0.0s;
	transition-timing-function: ease-in-out;		
	
}


#AltKeycontainer
{
	width: 56px;
	height: 56px;	

	vertical-align: bottom;
	margin-bottom: 36px;	
	margin-left: 56px;	
	wash-color: #cccccc;
	box-shadow: fill #000000 -2px -3px 6px 6px;	
	
	transition-property:  transform, box-shadow, wash-color;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;	
	
}


#AltKeycontainer:hover
{
	wash-color: #ffffff;
	//box-shadow: fill #000000aa 0px -1px 3px 3px;	
}

.AltDown #AltKeycontainer #AltKey
{
	transform: translateY(2px);
	brightness: 2.0;
	pre-transform-scale2d: .95;
}

#AltKey
{
	width: 56px;
	height: 56px;
	
	background-image: url("s2r://panorama/images/key_illustration_psd.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	transition-property:  transform, pre-transform-scale2d, wash-color, brightness;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;		
	
}

#AltKey Label
{
	margin-left: 12px;
	margin-top: 8px;
	letter-spacing: 0px;
	font-size: 14px;
}

.MinimapIcon.MinimapEnemy{
	background-image: url("s2r://panorama/images/textures/minimap_hero_enemy_psd.vtex");
}

#Hero1
{
	background-image: url("s2r://panorama/images/textures/minimap_hero_self_psd.vtex");
}

.MinimapIcon.MinimapEnemy,
.MinimapIcon.MinimapTeam
{
	wash-color: white;
}

#Hero1 .MinimapIcon.MinimapTeam
{
	wash-color: #3375FF;
}
	
.AltDown #MinimapContainer.UseHeroIcons.SimpleColors.SwapToggle .MinimapIcon.MinimapTeam,
#MinimapContainer.SimpleColors .MinimapIcon.MinimapTeam
{
	wash-color: #00ff00;
}

.AltDown #MinimapContainer.UseHeroIcons.SimpleColors.ColorBlindMode.SwapToggle .MinimapIcon.MinimapTeam,
#MinimapContainer.SimpleColors.ColorBlindMode .MinimapIcon.MinimapTeam
{
	wash-color: #20A1FF;
}

.AltDown #MinimapContainer.UseHeroIcons.SimpleColors.ColorBlindMode.SwapToggle #Hero1,
#MinimapContainer.SimpleColors.ColorBlindMode #Hero1
{
	hue-rotation: -16deg;
	wash-color: white;
}

.AltDown #MinimapContainer.UseHeroIcons.SimpleColors.SwapToggle #Hero1,
#MinimapContainer.SimpleColors #Hero1
{
	hue-rotation: -110deg;
	wash-color: white;
}

#MinimapContainer.UseHeroIcons.SimpleColors #Hero1
{
	hue-rotation: -110deg;
	wash-color: white;
}

.AltDown #MinimapContainer.UseHeroIcons.SimpleColors #Hero1,
#MinimapContainer.UseHeroIcons.SimpleColors.SwapToggle #Hero1
{
	hue-rotation: 0deg;
	wash-color: white;
}

.AltDown #MinimapContainer.UseHeroIcons.SimpleColors.ColorBlindMode #Hero1,
#MinimapContainer.UseHeroIcons.SimpleColors.ColorBlindMode #Hero1
{
	hue-rotation: -16deg;
}

.AltDown #MinimapContainer.UseHeroIcons.SimpleColors.SwapToggle .MinimapIcon.MinimapEnemy,
#MinimapContainer.SimpleColors .MinimapIcon.MinimapEnemy
{
	wash-color: red;
}

#MinimapContainer.UseHeroIcons.SimpleColors.SwapToggle .MinimapIcon,
.AltDown #MinimapContainer.UseHeroIcons.SimpleColors .MinimapIcon
{
	wash-color: white;
	saturation: 1;
}

.AltDown .SwapToggle.UseHeroIcons #Hero1 .MinimapIcon,
#Hero1 { x: 220px; y: 196px; transform: rotateZ(-45deg);}

.AltDown .SwapToggle.UseHeroIcons #Hero2,
#Hero2Label, #Hero2 { wash-color: #66FFBF; x: 80px; y: 120px; transform: rotateZ(-85deg); }

.AltDown .SwapToggle.UseHeroIcons #Hero3,
#Hero3Label, #Hero3 { wash-color: #BF00BF; x: 135px; y: 166px; transform: rotateZ(205deg); }

.AltDown .SwapToggle.UseHeroIcons #Hero4,
#Hero4Label, #Hero4 { wash-color: #F3F00B; x: 200px; y: 206px; transform: rotateZ(0deg); }

.AltDown .SwapToggle.UseHeroIcons #Hero5,
#Hero5Label, #Hero5 { wash-color: #FF6B00; x: 0px; y: 80px; transform: rotateZ(-90deg); }

.AltDown .SwapToggle.UseHeroIcons #Hero6,
#Hero6Label, #Hero6 { wash-color: #E57BB1; x: 120px; y: 100px; transform: rotateZ(-215deg); }

.AltDown .SwapToggle.UseHeroIcons #Hero7,
#Hero7Label, #Hero7 { wash-color: #A1B447; x: 90px; y: 20px; transform: rotateZ(-145deg); }

.AltDown .SwapToggle.UseHeroIcons #Hero8,
#Hero8Label, #Hero8 { wash-color: #65D9F7; x: 0px; y: 40px; transform: rotateZ(-245deg); }

.AltDown .SwapToggle.UseHeroIcons #Hero9,
#Hero9Label, #Hero9 { wash-color: #008321; x: 220px; y: 160px; transform: rotateZ(-345deg); }

.AltDown .SwapToggle.UseHeroIcons #Hero10,
#Hero10Label, #Hero10 { wash-color: #A46900; x: 120px; y: 60px; transform: rotateZ(-45deg); }

.AltDown .UseHeroIcons #Hero1,
.AltDown .UseHeroIcons #Hero2,
.AltDown .UseHeroIcons #Hero3,
.AltDown .UseHeroIcons #Hero4,
.AltDown .UseHeroIcons #Hero5,
.AltDown .UseHeroIcons #Hero6,
.AltDown .UseHeroIcons #Hero7,
.AltDown .UseHeroIcons #Hero8,
.AltDown .UseHeroIcons #Hero9,
.AltDown .UseHeroIcons #Hero10,
.SwapToggle.UseHeroIcons #Hero1,
.SwapToggle.UseHeroIcons #Hero2,
.SwapToggle.UseHeroIcons #Hero3,
.SwapToggle.UseHeroIcons #Hero4,
.SwapToggle.UseHeroIcons #Hero5,
.SwapToggle.UseHeroIcons #Hero6,
.SwapToggle.UseHeroIcons #Hero7,
.SwapToggle.UseHeroIcons #Hero8,
.SwapToggle.UseHeroIcons #Hero9,
.SwapToggle.UseHeroIcons #Hero10
{
	wash-color: white;
}


#Hero1Label, #Hero2Label, #Hero3Label, #Hero4Label, #Hero5Label, #Hero6Label, #Hero7Label, #Hero8Label, #Hero9Label, #Hero10Label
{
	transform: none;
	wash-color: white;
}

#Hero1Label
{
	x: 220px;
	y: 196px;
}

.SwapToggle.UseHeroIcons .MinimapIcon,
.AltDown .UseHeroIcons .MinimapIcon
{
	box-shadow: fill #00ff0022 -9px -9px 18px 18px;
	border-radius: 30%;
	transition-delay: 0.3s, 0.0s;	
}

.SwapToggle.UseHeroIcons #Hero1,
.AltDown .UseHeroIcons #Hero1
{
	box-shadow: fill #00ff0022 -9px -9px 18px 18px;
	border-radius: 30%;
	transition-delay: 0.3s, 0.0s;	
}

.SwapToggle.UseHeroIcons #Hero1 .MinimapIcon,
.AltDown .UseHeroIcons #Hero1 .MinimapIcon
{
	box-shadow: none;
}

.AltDown .UseHeroIcons.SimpleColors .MinimapIcon.MinimapEnemy,
.AltDown .UseHeroIcons.SimpleColors .MinimapIcon
{
	saturation: 0;
	//box-shadow: none;
}

.AltDown .UseHeroIcons.SimpleColors #Hero1 .MinimapIcon
{
	saturation: 1;
}

.SwapToggle.UseHeroIcons .MinimapIcon.MinimapEnemy,
.AltDown .UseHeroIcons .MinimapIcon.MinimapEnemy
{
	box-shadow: fill #ff000022 -9px -9px 18px 18px;
	border-radius: 30%;
}

.SwapToggle.UseHeroIcons #Hero1,
.AltDown .UseHeroIcons #Hero1 { transform: none; wash-color: none; }

.AltDown .SwapToggle.UseHeroIcons #Hero1 { transform: rotateZ(-45deg); }

.SwapToggle.UseHeroIcons #Hero1,
.AltDown .UseHeroIcons #Hero1 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_juggernaut_png.vtex"); }

.SwapToggle.UseHeroIcons #Hero1 .MinimapTeam,
.AltDown .UseHeroIcons #Hero1 .MinimapTeam { visibility: collapse; }

.AltDown .SwapToggle.UseHeroIcons #Hero1
{
	background-image: url("s2r://panorama/images/textures/minimap_hero_self_psd.vtex");	
	visibility: visible; 
	box-shadow: none;
}

.AltDown .SwapToggle.UseHeroIcons #Hero1 .MinimapTeam
{
	background-image: url("s2r://panorama/images/textures/minimap_hero_team_psd.vtex");	
}
	
.SwapToggle.UseHeroIcons #Hero2,
.AltDown .UseHeroIcons #Hero2 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_invoker_png.vtex"); transform: none; }

.SwapToggle.UseHeroIcons #Hero3,
.AltDown .UseHeroIcons #Hero3 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_axe_png.vtex"); transform: none; }

.SwapToggle.UseHeroIcons #Hero4,
.AltDown .UseHeroIcons #Hero4 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_vengefulspirit_png.vtex"); transform: none; }

.SwapToggle.UseHeroIcons #Hero5,
.AltDown .UseHeroIcons #Hero5 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_zuus_png.vtex"); transform: none;  }

.SwapToggle.UseHeroIcons #Hero6,
.AltDown .UseHeroIcons #Hero6 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_ember_spirit_png.vtex"); transform: none;  }

.SwapToggle.UseHeroIcons #Hero7,
.AltDown .UseHeroIcons #Hero7 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_enigma_png.vtex"); transform: none; }

.SwapToggle.UseHeroIcons #Hero8,
.AltDown .UseHeroIcons #Hero8 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_kunkka_png.vtex"); transform: none;  }

.SwapToggle.UseHeroIcons #Hero9,
.AltDown .UseHeroIcons #Hero9 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_crystal_maiden_png.vtex"); transform: none;  }

.SwapToggle.UseHeroIcons #Hero10,
.AltDown .UseHeroIcons #Hero10 { background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_bounty_hunter_png.vtex"); transform: none;  }



.AltDown .SwapToggle.UseHeroIcons #Hero2,
.AltDown .SwapToggle.UseHeroIcons #Hero3,
.AltDown .SwapToggle.UseHeroIcons #Hero4,
.AltDown .SwapToggle.UseHeroIcons #Hero5
{
	background-image: url("s2r://panorama/images/textures/minimap_hero_team_psd.vtex");
	box-shadow: none;
}

.AltDown .SwapToggle.UseHeroIcons #Hero6,
.AltDown .SwapToggle.UseHeroIcons #Hero7,
.AltDown .SwapToggle.UseHeroIcons #Hero8,
.AltDown .SwapToggle.UseHeroIcons #Hero9,
.AltDown .SwapToggle.UseHeroIcons #Hero10
{
	background-image: url("s2r://panorama/images/textures/minimap_hero_enemy_psd.vtex");
	box-shadow: none;
}

#MinimapContainer.SwapToggle.UseHeroIcons.SimpleColors .MinimapIcon
{
	//wash-color: white;
}


.MinimapLabel
{
	min-width: 72px;
	color: #00ff00;
	font-size: 12px;
	letter-spacing: 0px;
	margin-top: 28px;
	text-align: center;
	text-shadow: 0px 0px 6px 3.0 black;
	opacity: 0;
	font-weight: thin;

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

.MinimapLabel.EnemyLabel
{
	color: #ff0000;
}

.HeroNames .MinimapIcon
{
	opacity: 0;
}	

.HeroNames .MinimapLabel
{
	opacity: 1;
}	

.AltDown .MinimapIcon
{
	opacity: 0;
}	

.AltDown .MinimapLabel
{
	opacity: 1;
}	

.AltDown .UseHeroIcons .MinimapIcon
{
	opacity: 1;
}	

.AltDown .UseHeroIcons .MinimapLabel
{
	opacity: 0;
}	

.AltDown #AltKeyPressed
{
	opacity: 1;
}

.SwapToggle .MinimapIcon
{
	opacity: 0;
}

.SwapToggle .MinimapLabel
{
	opacity: 1;
}

.SwapToggle.UseHeroIcons .MinimapIcon,
.AltDown .SwapToggle .MinimapIcon
{
	opacity: 1;
}

.SwapToggle.UseHeroIcons .MinimapLabel,
.AltDown .SwapToggle .MinimapLabel
{
	opacity: 0;
}

#AltKeyPressed
{
	width: 164px;
	text-align: center;
	font-size: 14px;
	letter-spacing: 1px;
	opacity: 0;
	vertical-align: bottom;
	text-transform: uppercase;
	margin-bottom: 6px;
	text-shadow: 0px 0px 3px 3.0 black;
	margin-left: 2px;
	padding-top: 3px;
	border-radius: 4px;
	
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;		
}

#AltKeyPreviewLabel
{
	width: 56px;
	text-align: center;
	text-overflow: shrink;
	vertical-align: bottom;
	margin-bottom: 6px;
	font-size: 14px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #7d8688;
}

#dota_minimap_hero_size
{
	margin-top: 0px;
	//flow-children: none;
}

DOTASettingsEnum .EnumButton
{
	margin-bottom: 13px;
	wash-color: red;
}

.InfoIcon
{
	wash-color: #414A45;
}

#dota_hud_colorblind Label,
#SelfFocus Label
{
	font-size: 18px;
	color: #7d8688;
	vertical-align: center;
	margin: 0px;
	padding-top: 4px;
	padding-left: 5px;
	letter-spacing: 1px;
	font-weight: thin;	
}

#dota_hud_colorblind,
#SelfFocus
{
	height: 40px;
	padding: 1px 4px;
	margin: -2px;
}

#SelfFocus.ColorblindActive
{
}

#SelfFocus.ColorblindActive Label
{
	color: #333333;
}

#SelfFocus.ColorblindActive:selected .TickBox
{
	border: 3px solid black;
	background-color: #333333;
	box-shadow: none;
}

#SelfFocus.ColorblindActive .TickBox
{
	border: 2px solid #333333;
	background-color: black;
	box-shadow: none;
}

#SelfFocus.ColorblindActive #SelfFocusInfo
{
	opacity: 1;
}

#SelfFocusInfo
{
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;	
}

#AutoCursorScaleButton
{
	height: 40px;
	padding: 1px 4px;
	margin: -2px;
}


#AutoCursorScaleButton Label
{
	font-size: 18px;
	color: #7d8688;
	vertical-align: center;
	margin: 0px;
	padding-top: 4px;
	padding-left: 5px;
	letter-spacing: 1px;
	font-weight: thin;
}


#MinimapOptions .SliderTick
{
	//transform: translateY(-26px);
	margin-left: 171px;
	z-index: -1;
}

#CameraSpeedTick
{
	//transform: translateY(-26px);
	margin-left: 99px;
	z-index: -1;	
}

#CursorTickContainer
{
	width: 100%;
	height: 20px;
	transform: translateY(-20px);
	z-index: -1;		
}

#CursorScaleTick
{
	margin-left: 96px;
	background-color: #738492;
}

#CursorScaleTick0
{
	margin-left: 0px;
	height: 6px;
}

#CursorScaleTick1
{
	margin-left: 188px;
	height: 6px;
}

#CursorScaleTick2
{
	margin-left: 324px;
	height: 6px;
}

#CursorScaleTick3
{
	horizontal-align: right;
	height: 6px;
}

#HelpTipsContainer
{
	flow-children: right;
}

#HelpTipsEnabled
{
	tooltip-position: left;
}


#dota_minimap_hero_size,
#CameraSpeedSlider,
#CameraDecel
{
	margin-left: 20px;
}

#CameraOptions,
#ApplicationOptions,
#NetworkOptions,
#ExtraVideoOptionsSection
{
	margin-top: 40px;
}


#MiscConvars
{
	border: 1px solid red;
    flow-children: down;
    width: 100%;
    padding: 16px;
	border: 1px solid #000000;
	box-shadow: inset #00000033 -2px -2px 4px 4px;
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #202023 ), to( #202023 ) ); 
	background-color: #00000044;
	
	transition-property: background-color, box-shadow, border;
	transition-duration: 0.32s;
	transition-timing-function: ease-in-out;	
}

#MiscConvarsList
{
	width: 100%;
    flow-children: down;
	height: 620px;
	overflow: clip scroll;
	padding-top: 10px;
	padding-left: 6px;
    background-color: transparent;
	opacity-mask: url("s2r://panorama/images/masks/softedge_vertical_vscroll_psd.vtex") 1.0;	
}

#MiscConvars DOTASettingsSlider
{
	width: 100%;
}

#MinimapSizeSlider
{
	margin-left: 20px;
	width: 100%;
}

#MinimapSizeSliderLabels
{
	width: 100%;
	margin-left: 28px;
	margin-bottom: 24px;
	margin-top: 6px;
}

#MinimapSizeSliderLabels Label
{
	font-size: 18px;
	font-weight: thin;
	color: #7d8688;
	letter-spacing: 1px;
}

#MinimapSizeSliderLabels:disabled Label
{
	color: #333333;
}

#MinimapSmallestLabel
{
	horizontal-align: left;
}

#MinimapLargestLabel
{
	horizontal-align: right;
}

#MinimapSizeLabel
{
	margin-left: 24px;
	font-size: 18px;
	font-weight: thin;
	color: #7d8688;
	letter-spacing: 1px;
}

#ItemsTPBindingContainer
{
	horizontal-align: right;
	vertical-align: bottom;
	margin-right: 106px;
	margin-bottom: 52px;
	overflow: noclip;
}

#ItemsNeutralSlotBindingContainer
{
	horizontal-align: right;
	vertical-align: bottom;
	margin-right: 106px;
	margin-bottom: 151px;
	overflow: noclip;
}


.AspectRatio4x3 #ItemsTPBindingContainer, .AspectRatio4x3 #ItemsNeutralSlotBindingContainer
{
	margin-right: 88px;
}

.AspectRatio4x3 #ItemsTPBindingImage,
.AspectRatio4x3 #ItemsNeutralSlotBindingImage
{
	margin-right: 104px;
}


#ItemsTPBindingContainer .ItemBindButton,
#ItemsNeutralSlotBindingContainer .ItemBindButton
{
	width: 69px;
	height: 69px;
	border-radius: 50%;
}

#ItemsTPBindingContainer .ItemBindButton.Quickcast,
#ItemsNeutralSlotBindingContainer .ItemBindButton.Quickcast
{
	visibility: collapse;
}

.ItemQuickcastTabVisible #ItemsTPBindingContainer .ItemBindButton,
.ItemQuickcastTabVisible #ItemsNeutralSlotBindingContainer .ItemBindButton
{
	visibility: collapse;
}


.ItemQuickcastTabVisible #ItemsTPBindingContainer .ItemBindButton.Quickcast,
.ItemQuickcastTabVisible #ItemsNeutralSlotBindingContainer .ItemBindButton.Quickcast
{
	visibility: visible;
}


#ItemsNeutralSlotBindingImage
{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-image: url("s2r://panorama/images/hud/reborn/bg_neutral_slot_png.vtex");
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;	
	horizontal-align: right;
	vertical-align: bottom;
	margin-right: 122px;
	margin-bottom: 165px;
	saturation: 0;
	brightness: 18;
	wash-color: #2B2F30;
	opacity: .2;
	z-index: 20;	
}

#ItemsTPBindingImage
{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-image: url("s2r://panorama/images/items/tpscroll_png.vtex");
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;	
	horizontal-align: right;
	vertical-align: bottom;
	margin-right: 122px;
	margin-bottom: 66px;
	saturation: 0;
	brightness: 18;
	wash-color: #2B2F30;
	opacity: .2;
	z-index: 20;	
}

#ChatWheelEmoticonListContainer
{
	margin: 8px;
    flow-children: down;
	height: 100%;
    width: fill-parent-flow( 0.20 );
    padding: 8px;
}


#ChatWheelEmoticonListContainer DOTAEmoticonPicker
{
	background-color: #00000000;
}

.ChatWheelEmoticonListTitle
{
	horizontal-align: center;
	text-align: center;
}

#ChatWheelEmoticonPicker
{
	height: 100%;
}


#ChatWheelEmoticonListContainer DOTAEmoticonPicker #EmoticonDisplay
{
	height: 100%;
	visibility: collapse;
}

.ChatWheelEmoticonPicker > #EmoticonsContainer
{
	max-width: 999px;
    max-height: 999px;
	height: 95%;
}

.BPFeatureIcon
{
	horizontal-align: left;
	vertical-align: top;
	width: 14px;
	height: 14px;
	margin: 2px;
	margin-top: 4px;
	margin-right: 2px;
	background-size: 100%;
	//background-image: bp_point_log_pass_activated;
}

.PlusFeatureIcon
{
	horizontal-align: left;
	vertical-align: top;
	width: 14px;
	height: 14px;
	margin: 2px;
	margin-top: 4px;
	margin-right: 2px;
	background-size: 100%;
}

.EmoticonsContainerTitle
{
	margin-left: 4px;
	horizontal-align: left;
}

.RecalibrationUsed #MMR_Recalibration_CountdownLabel,
.RecalibrationAvailable #MMR_Recalibration_CountdownLabel
{
	visibility: collapse;
}

#MMR_Recalibration_Consumed
{
	visibility: collapse;
}

.RecalibrationUsed #MMR_Recalibration_Consumed
{
	visibility: visible;
}

#RecalibrateMMRButton
{
	visibility: collapse;
}

.RecalibrationUsed #RecalibrateMMRButton
{
}

.RecalibrationAvailable #RecalibrateMMRButton
{
	visibility: visible;
}


#ProInfoSection
{
	margin-top: 32px;
}