DotaStyle

@define goldColor: #ffcc33;

@define dotalevelgradient: gradient( linear, 0% 0%, 0% 100%, from( #BBCAEA ), color-stop( 0.5, #ffffff), color-stop( 0.5, #D9DFEC), to( #BBCAEA ) );
@define dotaplaytimegradient: gradient( linear, 0% 0%, 0% 100%, from( #3db451 ), color-stop( 0.5, #beffc7), color-stop( 0.5, #91d69a), to( #3db451 ) );

@define HeroSlot0Color: #3375FFFF;
@define HeroSlot1Color: #66FFBFFF;
@define HeroSlot2Color: #BF00BFFF;
@define HeroSlot3Color: #F3F00BFF;
@define HeroSlot4Color: #FF6B00FF;
@define HeroSlot5Color: #FE86C2FF;
@define HeroSlot6Color: #A1B447FF;
@define HeroSlot7Color: #65D9F7FF;
@define HeroSlot8Color: #008321FF;
@define HeroSlot9Color: #A46900FF;

@define HeroSlot0ColorHalf: #3375FF33;
@define HeroSlot1ColorHalf: #66FFBF44;
@define HeroSlot2ColorHalf: #BF00BF88;
@define HeroSlot3ColorHalf: #F3F00B33;
@define HeroSlot4ColorHalf: #FF6B0033;
@define HeroSlot5ColorHalf: #FE86C244;
@define HeroSlot6ColorHalf: #A1B44766;
@define HeroSlot7ColorHalf: #65D9F733;
@define HeroSlot8ColorHalf: #00832133;
@define HeroSlot9ColorHalf: #A4690033;

@define RuneDDColor: #82CAFF;
@define RuneHasteColor: #F62817;
@define RuneIllusionColor: #FFD700;
@define RuneInvisColor: #8B008B;
@define RuneRegenColor: #7FFF00;
@define RuneArcaneColor: #FD3AFB;
@define RuneBountyColor: #FF7800;

@define PreConnectedTransitionDuration: 1s;


/* ContextMenu - used in code -- dont rename */
@define ContextMenuFadoutTime: 0.2s;

/* Z layers */
@define contextmenu_zindex:	   	10000100;

@define mousepanningcursorsize: 64px;

@define monospaceFont: Courier New,Courier;

/* ------------------------------------------------------------------------- */
/*  Fonts                                                                    */
/* ------------------------------------------------------------------------- */

/* Default fonts */
Label, TextEntry
{
	font-family: Radiance,FZLanTingHei-R-GBK,TH Sarabun New,YDYGO 540,Gulim,MingLiU;
}

/* Default font, but with monospaced numbers for use in things like the scoreboard */
Label.MonoNumbersFont, TextEntry.MonoNumbersFont
{
	font-family: RadianceM,Radiance,FZLanTingHei-R-GBK,TH Sarabun New,YDYGO 540,Gulim,MingLiU;
}

/* Title Fonts */
Label.TitleFont, TextEntry.TitleFont
{
	font-family: Goudy Trajan Medium,FZKai-Z03,TH Sarabun New,YDYGO 540;
}

/* Monospaced fonts, used mostly for debugging */
Label.MonoFont, TextEntry.MonoFont
{
	font-family: monospaceFont;
}

/* ------------------------------------------------------------------------- */
/*  Simple Text Styles                                                       */
/* ------------------------------------------------------------------------- */
.Headline1
{
	color: white;
	font-size: 54px;
	font-weight: Bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: -12px;
	margin-top: -10px;
}

.Headline2
{
	font-size: 32px;
	color: offWhite;
	letter-spacing: 1px;
	//font-weight: medium;
}

.Capital
{
	text-transform: uppercase;
}


/* ------------------------------------------------------------------------- */
/*  DropDown                                                                 */
/* ------------------------------------------------------------------------- */
DropDown, DOTASettingsEnumDropDown
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #292e2e ), to( #191e1e ) );

	background-image: url("s2r://panorama/images/control_icons/arrow_dropdown_png.vtex");

	background-repeat: no-repeat;
	background-position: right 38px 35%;
	background-size: 32px 32px;
	box-shadow: #00000055 -2px -2px 1px 4px;

	border: 2px solid #5e686966;

	font-size: 24px;
	width: 320px;
	height: 41px;
	padding: 4px 8px;
	z-index: 1;

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

DropDown:enabled:hover, DOTASettingsEnumDropDown:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #393e3e ), to( #292e2e ) );
}

DropDown:focus .TickBox, DOTASettingsEnumDropDown:focus .TickBox
{
	text-overflow: clip;
	white-space: nowrap;
}

DropDown:focus, DOTASettingsEnumDropDown:focus
{

}

DropDown:disabled
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #292e2e ), to( #191e1e ) );
	border: 2px solid #3b414266;
	background-image: url("s2r://panorama/images/control_icons/arrow_dropdown_disabled_png.vtex");
}

DropDown.DropDownMenuVisible:hover, DOTASettingsEnumDropDown.DropDownMenuVisible:hover
{

}

DropDown.DropDownMenuVisible:focus, DOTASettingsEnumDropDown.DropDownMenuVisible:focus
{
	animation-name: none;
}

DropDown Label, DOTASettingsEnumDropDown Label
{
	width: 100%;
	margin: 3px 29px 0px 6px;
	font-size: 18px;

	transition-property: color;
	transition-duration: 0.15s;
	transition-timing-function: linear;
}

DropDown:focus Label, DOTASettingsEnumDropDown:focus Label
{
	color: white;
}

DropDown:disabled Label
{
	color: #444444;
}

DropDown.DropDownMenuVisible:focus Label, DOTASettingsEnumDropDown.DropDownMenuVisible:focus Label
{
	color: white;
}

DropDownMenu
{
	width: 320px;
	flow-children: down;
	background-color: #3d4448;
	color: #e1e1e1;
	font-size: 28px;
	overflow: squish scroll;
	z-index: 0;
	transform: translateY(-40px);
	opacity: 0.0;

	transition-property: opacity, transform;
	transition-duration: 0.15s;
	transition-timing-function: ease-in;

	box-shadow: fill #00000066 -3px -3px 6px 6px;
}

DropDownMenu Label
{
	width: 100%;
	padding: 6px 0px 2px 0px;
	margin-top: 0px 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 16px;

	color: #ffffff99;
	background-color: #3d4448;

	font-size: 18px;
	font-weight: normal;
	z-index: 0;
	border-top: 1px solid #00000066;
	border-bottom: 1px solid #00000066;

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

DropDownMenu Label:hover
{
	background-color: #585e62;
}

DropDownMenu.DropDownMenuVisible
{
	opacity: 1.0;

	max-height: 444px;
	transition-property: box-shadow;
	transform: translateY(0px);
}

DropDown.ThinDropDown
{
	height: 32px;

	background-size: 24px 24px;
	background-position: right 32px 35%;
}

.ThinDropDown Label
{
	font-size: 18px;
}

/* Scroll Bars */
VerticalScrollBar, HTMLVerticalScrollBar
{
	width: 8px;
	margin: 0px, 8px, 0px 8px;
	border-radius: 0px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	/*box-shadow: fill #00000055 -3px 0px 3px 4px;*/
	horizontal-align: right;
	vertical-align: center;

	transition-property: transform;
}

VerticalScrollBar .ScrollThumb, HTMLVerticalScrollBar .ScrollThumb
{
	width: 8px;
	min-height: 32px;  // need to get the scrollthumb to hit the bottom of the scrollbar
	background-color: #566767;
	border-top: 1px solid #aaaaaa22;
	border-right: 1px solid #000000aa;
	transition-property: position;
	/*background-color: gradient( linear, 0% 0%, 0% 100%, from( #3e4446 ), to( #33383a ) );*/
	transition-property: background-color, transform;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

VerticalScrollBar:hover .ScrollThumb, HTMLVerticalScrollBar:hover .ScrollThumb
{
	background-color: #566767;
}


VerticalScrollBar:active .ScrollThumb, HTMLVerticalScrollBar:active .ScrollThumb
{
	background-color: #566767;
}

HorizontalScrollBar, HTMLHorizontalScrollBar
{
	height: 12px;
	margin: 0px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 0px;
	horizontal-align: left;
	vertical-align: bottom;
	box-shadow: fill #00000055 0px -3px 3px 4px;

	transition-property: transform;
}

HorizontalScrollBar .ScrollThumb, HTMLHorizontalScrollBar .ScrollThumb
{
	height: 12px;
	min-width: 32px;
	border-top: 1px solid #aaaaaa22;
	border-bottom: 1px solid #000000aa;
	background-color: #566767;
	transition-property: background-color, transform;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

HorizontalScrollBar:hover .ScrollThumb, HTMLHorizontalScrollBar:hover .ScrollThumb

{
	background-color: #566767;
}

HorizontalScrollBar:active .ScrollThumb, HTMLHorizontalScrollBar:active .ScrollThumb

{
	background-color: #566767;
}

VerticalScrollBar,
VerticalScrollBar .ScrollThumb,
HorizontalScrollBar,
HorizontalScrollBar .ScrollThumb
HTMLHorizontalScrollBar,
HTMLHorizontalScrollBar .ScrollThumb,
HTMLVerticalScrollBar,
HTMLVerticalScrollBar .ScrollThumb,
{
	// The transition duration and timing function must match constants used in code:
	// k_flScrollTransitionTime, k_flScrollTransitionFunc, so dont change without talking with a dev
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

VerticalScrollBar.MouseDown,
VerticalScrollBar.MouseDown .ScrollThumb,
HorizontalScrollBar.MouseDown,
HorizontalScrollBar.MouseDown .ScrollThumb
HTMLHorizontalScrollBar.MouseDown,
HTMLHorizontalScrollBar.MouseDown .ScrollThumb,
HTMLVerticalScrollBar.MouseDown,
HTMLVerticalScrollBar.MouseDown .ScrollThumb,
{
	// Disable the transition when the mouse is dragging the scroll thumb. Note that this must match
	// when IUIScrollBar::IsMouseDown returns true, or else the content will be out of sync
	transition-duration: 0.0s;
}

//
// HTTP styles used by labels
//

a
{
	//color: blue;
}

a:hover
{
	text-decoration: underline;
}

b
{
	font-weight: bold;
}

i
{
	font-style: italics;
}

strong
{
	font-weight: bold;
}

em
{
	font-style: italics;
}

h1
{
	font-weight: bold;
}

h2
{
	font-weight: bold;
}

pre
{
	font-family: monospaceFont;
}

//
// ContextMenu
//
.ContextMenu
{
	width: 100%;
	height: 100%;
	transition-property: opacity, transform;
	transition-duration: ContextMenuFadoutTime;
	transition-timing-function: ease-in-out;
	opacity: 1.0;

	z-index: contextmenu_zindex;


	visibility: visible;
}

.ContextMenu.Destructing
{
	transform: translatex( 0px );
	opacity: 0.0;
}


//
// Simple Convenience styles
//

.LeftRightFlow
{
	flow-children: right;
}

.TopBottomFlow
{
	flow-children: down;
}

.NoFlow
{
	flow-children: none;
}

.Hide
{
	visibility: collapse;
}

.Show
{
	visibility: visible;
}

.HorizontalCenter
{
	horizontal-align: center;
}


.FullWidth
{
	width: 100%;
}

.FullHeight
{
	height: 100%;
}

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

.Center
{
	horizontal-align: center;
}


//
// Label
//
Label
{
	color: baseText;
	font-size: 18px;
}

//
//  TOGGLE BUTTON / CHECK BOX
//

ToggleButton, DOTASettingsCheckbox
{
	flow-children: right;
	padding: 1px 4px;
	color: white;

	transition-property: background-color, box-shadow, color;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

ToggleButton .TickBox, DOTASettingsCheckbox .TickBox
{
	width: 18px;
	height: 18px;
	vertical-align: center;
	background-color: black;
	border: 2px solid #5e686966;
	box-shadow: #00000055 -2px -2px 1px 4px;

	transition-property: background-color, box-shadow, color, border, background-image, wash-color, pre-transform-scale2d;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;

}

ToggleButton:selected .TickBox, DOTASettingsCheckbox:selected .TickBox
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #e7f6f5 ), to( #a0d6d7 ) );
	border: 3px solid #000000;
	box-shadow: #5b62bf77 -4px -4px 8px 8px;

}

ToggleButton:hover .TickBox, DOTASettingsCheckbox:hover .TickBox
{
	//background-color: gradient( linear, 0% 0%, 0% 100%, from( #e7f6f5 ), to( #a0d6d7 ) );
	border: 2px solid #697879;
}

ToggleButton Label, DOTASettingsCheckbox Label
{
	margin-top: 4px;
	font-size: 16px;
	margin-left: 8px;
	color: baseText;

	transition-property: color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

ToggleButton:enabled:hover Label, DOTASettingsCheckbox:enabled:hover Label
{
	color: #d2d6d1;
}

ToggleButton:selected Label, DOTASettingsCheckbox:selected Label
{
	color: white;
}

ToggleButton:disabled Label, DOTASettingsCheckbox:disabled Label
{
	color: #333333;
}

ToggleButton:disabled .TickBox, DOTASettingsCheckbox:disabled .TickBox
{
	border-color: #333333;
}

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


ToggleButton.ExpandCollapseToggleButton
{
	margin: 0px;
	padding: 0px;
}

.ExpandCollapseToggleButton .TickBox
{
	margin: 0px;
	padding: 0px;
	width: 19px;
	height: 19px;
	vertical-align: middle;
	background-image: url("s2r://panorama/images/control_icons/expand_collapse_png.vtex");
	background-size: 100% 100%;
	background-color: none;
	box-shadow: none;
	border: 0px solid transparent;
	wash-color: #888888;
	transform: rotateZ( -90deg );

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


.ExpandCollapseToggleButton:hover .TickBox
{
	border: 0px solid transparent;
}

.ExpandCollapseToggleButton:selected .TickBox
{
	width: 19px;
	height: 19px;
	vertical-align: middle;
	background-image: url("s2r://panorama/images/control_icons/expand_collapse_png.vtex");
	background-size: 100% 100%;
	background-color: none;
	box-shadow: none;
	border: 0px solid transparent;
	wash-color: #888888;

	transform: rotateZ( 0deg );

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

//
// Radio Button
//

RadioButton
{
	background-color: none;
	flow-children: right;
//	padding: 4px 4px;
	color: white;

	transition-property: background-color, box-shadow, color, brightness;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

RadioButton > .RadioBox
{
	min-width: 20px;
	min-height: 20px;

	border-radius: 50%;
	background-color: gradient( radial, 50% 50%, 0% 0%, 10% 10%, from( #000000 ), to( #000000 ) );

	border: 2px solid #5e686966;
	box-shadow: #00000055 -2px -2px 1px 4px;

	transition-property: background-color, box-shadow, color, border;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

RadioButton:selected > .RadioBox
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #e7f6f5 ), to( #333399 ) );
	border: 3px solid #000000;

	box-shadow: #5b62bf77 -3px -3px 6px 6px;

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

RadioButton:enabled:hover > .RadioBox
{
	border: 2px solid #697879;
}

RadioButton:enabled:selected:hover > .RadioBox
{
	border: 3px solid #000000;
}

RadioButton > Label
{
	color: baseText;
	margin-left: 8px;
	font-size: 16px;

	transition-property: color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

DOTASettingsEnum RadioButton > Label
{
	font-size: 18px;
	color: #7d8688;
}


RadioButton:selected > Label
{
	color: white;

	transition-property: color, text-shadow;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

RadioButton:enabled:hover > Label
{
	color: white;

	transition-property: color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

RadioButton:disabled > .RadioBox
{
	color: transparent;
	box-shadow: #33333377 -4px -4px 8px 8px;
	background-color: #00000000;
}

RadioButton:disabled:selected > .RadioBox
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #e7f6f533 ), to( #33339933 ) );
}

RadioButton:disabled > Label
{
	color: #333333;
}



//
// Grey button with a small bevel
//
.ButtonBevel
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #373d45 ), to( #4d5860 ) );
	border-style: solid;
	border-width: 1px;

	padding: 4px 10px;

	border-top-color: #555555;
	border-left-color: #494949;
	border-bottom-color: #333333;
	border-right-color: #404040;

	transition-property: background-color, opacity;
	transition-duration: 0.05s;
	transition-timing-function: linear;
	box-shadow: #00000055 -2px -2px 4px 4px;

	min-width: 192px;
	min-height: 36px;
}

.ButtonBevel.Green
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2a481f ), to( #226326 ) );

	border-top-color: #355639;
	border-left-color: #2c4d30;
	border-bottom-color: #1e371e;
	border-right-color: #214123;
}

.ButtonBevel.DarkGreen
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1a2c13 ), to( #18441b ) );

	border-top-color: #223524;
	border-left-color: #2c4d30;
	border-bottom-color: #091009;
	border-right-color: #132615;

}

.ButtonBevel:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #4c5561 ), to( #6c7d88 ) );

	border-top-color: #aaaaaa77;
	border-left-color: #aaaaaa33;
	border-bottom-color: #333333;
	border-right-color: #404040;
}

.ButtonBevel.Green:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #226528 ), to( #288a36 ) );

	border-top-color: #030503;
	border-left-color: #000000;
	border-bottom-color: #1e371d;
	border-right-color: #244426;
}

.ButtonBevel.DarkGreen:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #17421b ), to( #185321 ) );

	border-top-color: #000000;
	border-left-color: #000000;
	border-bottom-color: #172a16;
	border-right-color: #152716;
}

.ButtonBevel:disabled
{
	wash-color: #999999;
	saturation: 0;
}

.ButtonBevel:disabled Label
{
	color: #888888;
}

.ButtonBevel:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #393939), to( #555555 ) );

	border-top-color: #222222;
	border-left-color: #303030;
	border-bottom-color: #666666;
	border-right-color: #444444;
	sound: "ui_generic_button_click";
}

.ButtonBevel.Green:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1f3d25), to( #2b562c ) );

	border-top-color: #132416;
	border-left-color: #192f1b;
	border-bottom-color: #386b3b;
	border-right-color: #264a29;
}

.ButtonBevel.Green:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #132416), to( #183019 ) );

	border-top-color: #09110a;
	border-left-color: #0f1b10;
	border-bottom-color: #1f3820;
	border-right-color: #172c19;
}

.ButtonBevel Label
{
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #FFFFFF;
	horizontal-align: center;
	text-align: center;
	vertical-align: middle;
	text-shadow: 2px 2px 4px 1.0 #000000;

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

.ButtonBevel:active Label
{
		transform: translateY(1px);
}

.ExternalIcon
{
	background-image: url("s2r://panorama/images/control_icons/arrow_popout_png.vtex");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	wash-color: white;
	height: 16px;
	width: 16px;
	margin-left: 6px;
	vertical-align: middle;
}

//
// Grey button with a small bevel
//
.ButtonDark
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #191e1e ), to( #292e2e ) );
	border: 2px solid #5e686966;

	transition-property: border, background-color;
	transition-duration: 0.1s;
	transition-timing-function: linear;

	min-width: 192px;
	min-height: 36px;
}

.ButtonDark:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #191e1e ), to( #292e2e ) );
	border: 2px solid #5e6869ff;
}

.ButtonDark:hover Label
{
	color: white;
}

.ButtonDark:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #191e1e ), to( #292e2e ) );

	border: 2px solid #5e686922;

	sound: "ui_generic_button_click";
}

.ButtonDark Label
{
	margin-top: 2px;
	text-transform: uppercase;
	color: #7f8b8d;
	horizontal-align: center;
	text-align: center;
	vertical-align: middle;
	text-shadow: 0px 0px 6px 1.0 #000000;
	padding-left: 8px;
	padding-right: 8px;


	transition-property: color;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

.ButtonDark:active Label
{
	transform: translateY(1px);
}

.ButtonDark:disabled
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #191e1e ), to( #292e2e ) );
	border: 2px solid #111111;
}

.ButtonDark:disabled Label
{
	color: #5d676933;
}

//
// SimpleBevel - adds a very simple bevel effect to any button
//
.SimpleBevel
{
	border-top: 1px solid #99999905;
	border-left: 1px solid #99999905;
	border-right: 1px solid #00000060;
	border-bottom: 1px solid #00000060;
}

//
// Default Button for Popup panels
//

.PopupButton
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5a6c75 ), to( #3d4a50 ) );
	border: 1px solid black;

	margin: 8px;
	//margin-left: 32px;
	//margin-right: 32px;
	min-width: 192px;
	padding: 5px 10px 5px 10px;
	border-top: 1px solid #ffffff44;
	border-right: 1px solid #4e5b60;
	border-left: 1px solid #4e5b60;
	border-bottom: 1px solid #00000088;

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

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

.PopupButton:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #a9c8da ), to( #596b75 ) );
}

.PopupButton:disabled
{
	wash-color: #999999;
	saturation: 0;
}

.PopupButton:disabled Label
{
	color: #999999;
}

.PopupButton:active Label
{
	transform: translateY(1px);
}

.PopupButton:active
{
	border: 1px solid black;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #272f33 ), to( #5a6c75 ) );

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

.PopupButton.Activated
{
	sound: "ui_quit_menu_fadeout";
}

.PopupButton.Green
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5e842c ), to( #40621d ) );
	border-top: 1px solid #859d6e;
	border-right: 1px solid #496922;
	border-left: 1px solid #496922;
	border-bottom: 1px solid #294211;
}

.PopupButton.Green:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #9eb46c ), to( #60823d ) );
}

.PopupButton.Green:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #204200 ), to( #5e842c ) );
	border-top: 1px solid #294211;
	border-right: 1px solid #496922;
	border-left: 1px solid #496922;
	border-bottom: 1px solid #859d6e;
}

.PopupButton.Blue
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #65a9db ), to( #2b4b75 ) );
	border-top: 1px solid #80bceb;
	border-right: 1px solid #507693;
	border-left: 1px solid #507693;
	border-bottom: 1px solid #273a48;
}

.PopupButton.Blue:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #9ccaf4 ), to( #2b4b75 ) );
}

.PopupButton.Blue:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2b4b75 ), to( #65a9db ) );

	border-top: 1px solid #273a48;
	border-right: 1px solid #496922;
	border-left: 1px solid #496922;
	border-bottom: 1px solid #567e9e;
}

.PopupButton.Grey
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #585858 ), to( #3f3f3f ) );
	border-top: 1px solid #858585;
	border-bottom: 1px solid #292929;
	border-left: 1px solid #707070;
	border-right: 1px solid #292929;
}

.PopupButton.Grey:enabled:hover
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #787878 ), to( #5f5f5f ) );
}

.PopupButton.Grey:active
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #3f3f3f ), to( #585858 ) );
	border-top: 1px solid #292929;
	border-right: 1px solid #707070;
	border-left: 1px solid #292929;
	border-bottom: 1px solid #858585;
}

.BlueButton
{
	margin: 8px;
	border: 1px solid #3366aa55;
	height: 34px;
	background-color: #3366aa11;
}

.BlueButton Label
{
	margin: 7px 24px 0px 24px;
	color: #66aadd;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: uppercase;
}

.BlueButton:enabled:hover Label
{
	color: white;
}

.BlueButton:enabled:hover
{
	border: 1px solid #22aaffaa;
	background-color: #3366aa44;
}

.BlueButton:active
{
	background-color: #23468a44;
	sound: "ui_select_blue";
}

.BlueButton:active Label
{
	color: #76baed;
}

.BlueButton:disabled
{
	wash-color: #000000DD;
	saturation: 0;
}

//
//  Flat Button for the times when the understated look says more
//

.FlatButton
{
	margin: 8px;
	height: 28px;
	background-color: #202626;
}

.FlatButton Label
{
	margin: 4px 24px 0px 24px;
	color: #737e7e;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.FlatButton:hover Label
{
	color: white;
}

.FlatButton:hover
{
	background-color: #333d3c;
}

.FlatButton:active
{
	background-color: #181c1c;
	sound: "ui_select_blue";
}

.FlatButton:active Label
{
	color: #6c6c6c;
}



//
//  Play Button Looking Button
//

.PlayGameButton
{
	vertical-align: bottom;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5A615Ecc ), to( #879695cc ));
	box-shadow: fill #002a6644 -4px -4px 8px 9px;
	border-top: 1px solid #ffffff44;
	border-right: 1px solid #00000088;
	border-left: 1px solid #ffffff44;
	border-bottom: 1px solid #00000088;

	transition-property: background-color;
	transition-duration: .2s;

	wash-color: #99999922;
}

.PlayGameButton:hover
{

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #5f6663 ), to( #b4c2c1 ));
}

.PlayGameButton:active
{
	wash-color: #ffffff;
}

.PlayGameButton Label
{
	font-size: 24px;
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #d5d7d7;
	vertical-align: middle;
}

.PlayGameButton:hover Label
{
	color: white;
}


//
// Loading throbber
//

/* haven't designed this yet */

//
// Text Entry
//

TextEntry
{
	border: 1px solid baseBorder;
	width: 352px;
	height: 36px;

	padding: 5px 7px 3px 7px;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #111111FF ), to( #222222FF ) );

	color: white;
	font-size: 20px;

	text-overflow: clip;
	white-space: nowrap;
}

TextEntry:disabled
{
	border-color: #44444440;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #11111140 ), to( #22222240 ) );
	color: #999999ff;
}

TextEntry #PlaceholderText
{
	opacity: 1.0;

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

	margin-top: -2px;

	color: #555555;
	font-size: 18px;
}

TextEntry:focus #PlaceholderText, TextEntry.HasInput #PlaceholderText
{
	opacity: 0.0;
}

.TextEntryIMECandidateRow
{
	flow-children: right;
	background-color: #000000;
}

.TextEntryIMECandidateRowPrefix
{
	font-size: 20px;
	font-weight: normal;
	color:#FFFFFF;
	background-color: #000000;
	vertical-align: middle;
}

.TextEntryIMECandidateRowSuffix
{
	font-size: 25px;
	font-weight: normal;
	color:#FFFFFF;
	background-color: #333333;
	vertical-align: middle;
}

.TextEntryIMECandidateRow.Highlight .TextEntryIMECandidateRowSuffix
{
	background-color: #4444FF;
}

.TextEntryIMEReadingString
{
	font-size: 20px;
	font-weight: normal;
	color: #DDDDDD;
	background-color: #333333;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	border: 1px solid #FFFFFF;
}

.TextEntryIMEReadingString.NoReadingString
{
	visibility: collapse;
}

.TextEntryIMECandidateList
{
	color: #DDDDDD;
	background-color: #333333;
	flow-children: down;
	border: 1px solid #FFFFFF;
}

TextEntryIMEControls
{
	flow-children: down;
}

TextEntryAutocomplete
{
	width: 320px;
	flow-children: down;
	background-color: #3d4448;
	color: #e1e1e1;
	font-size: 28px;
	overflow: squish scroll;
	z-index: 0;
	//transform: translateY(-40px);
	opacity: 1.0;

	//transition-property: opacity, transform;
	//transition-duration: 0.15s;
	//transition-timing-function: ease-in;

	box-shadow: fill #00000066 -3px -3px 6px 6px;
}

TextEntryAutocomplete > Label
{
	width: 100%;
	padding: 6px 0px 2px 0px;
	margin-top: 0px 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 16px;

	color: #ffffff99;
	background-color: #3d4448;

	font-size: 18px;
	font-weight: normal;
	z-index: 0;
	border-top: 1px solid #00000066;
	border-bottom: 1px solid #00000066;

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

TextEntryAutocomplete > Label:hover
{
	background-color: #585e62;
}

TextEntryAutocomplete > Label:focus
{
	background-color: #585e62;
}

TextEntry.ThinTextEntry
{
	height: 32px;
	font-size: 18px;
}

DropDownMenu Label
{
	width: 100%;
	padding: 6px 0px 2px 0px;
	margin-top: 0px 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 16px;

	color: #ffffff99;
	background-color: #3d4448;

	font-size: 18px;
	font-weight: normal;
	z-index: 0;
	border-top: 1px solid #00000066;
	border-bottom: 1px solid #00000066;

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

DropDownMenu Label:hover
{
	background-color: #585e62;
}

DropDownMenu.DropDownMenuVisible
{
	opacity: 1.0;

	max-height: 480px;
	transition-property: box-shadow;
	transform: translateY(0px);
}

//
// Slider
//

Slider
{
	// needs to be at least as wide as the thumb and, as the thumb center stops at end
	// of track, needs to allow for 1/2 the height of the thumb on each end
	width: 30px;
	height: 130px;
	margin-bottom: 20px;
}

#SliderTrack
{
	height: 120px;
	width: 16px;
	background-color: #283842;
	align: center center;
	background-color: black;
	border: 2px solid #5e686966;
	box-shadow: #00000055 -2px -2px 1px 4px;
	z-index: 2;

}

SlottedSlider.HorizontalSlider .SliderNotch
{
	margin-top: 14px;
	border-bottom: 2px solid #5e686966;
	border-left:2px solid #5e686966;
	border-right:2px solid #5e686966;
	background-color: black;
	//border-radius: 13%;
	width: 12px;
	height: 12px;
	vertical-align: bottom;
	z-index: 3;
}

#SliderTrackProgress
{
	width: 10px;
	height: 99%;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #222222FF ), to( #444f52FF ) );
	align: center center;
	border-radius: 3px;
	z-index: 3;
}

#SliderThumb
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #91a5b9 ), to( #444f52 ) );
	border-radius: 13%;
	width: 30px;
	height: 16px;
	box-shadow: fill black 1px 1px 32px 0px;
	z-index: 4;
}

// VR
ClientUIDialogPanel #SliderThumb
{
	box-shadow: none;
}

#SliderThumb:hover
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #b8c5d3 ), to( #444f52 ) );
}

Slider.HorizontalSlider, SlottedSlider.HorizontalSlider
{
	width: 420px;
	height: 30px;
}

Slider.HorizontalSlider #SliderTrack, SlottedSlider.HorizontalSlider #SliderTrack
{
	height: 16px;
	width: 100%;

	padding: 10px;
}

Slider.HorizontalSlider #SliderTrackProgress, SlottedSlider.HorizontalSlider #SliderTrackProgress
{
	width: 100%;
	height: 10px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #222222FF ), to( #444f52FF ) );
	box-shadow: inset black 0px 1px 4px 0px;
	margin-left: 1px;
}

Slider.HorizontalSlider #SliderTrackProgress:disabled, SlottedSlider.HorizontalSlider #SliderTrackProgress:disabled
{
	width: 100%;
	height: 10px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #010101FF ), to( #333333FF ) );
	box-shadow: inset black 0px 1px 4px 0px;  // flickering when sliding...bug?
	margin-left: 1px;
}


Slider.HorizontalSlider #SliderThumb, SlottedSlider.HorizontalSlider #SliderThumb
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #91a5b9 ), to( #444f52 ) );
	border-radius: 13%;
	width: 16px;
	height: 30px;
}

Slider.HorizontalSlider #SliderThumb:hover, SlottedSlider.HorizontalSlider #SliderThumb:hover
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #b8c5d3 ), to( #444f52 ) );
}

Slider.HorizontalSlider #SliderThumb:disabled, SlottedSlider.HorizontalSlider #SliderThumb:disabled
{
	background-color: #333333;
}

.PreGame #PreGameLabel
{
	opacity: 1;
}

.SliderTick
{
	width: 4px;
	height: 14px;
	background-color: #3B4242;
}


.CarouselContainer
{
	vertical-align: top;
	horizontal-align: right;
	margin-top: 18px;
	margin-right: 18px;
	flow-children: right;
}

.CarouselDot
{
	background-color: none;
	box-shadow:  none;

}

.CarouselDot Label
{
	visibility: collapse;

}

.CarouselDot .RadioBox
{

	min-height: 16px;
	min-width: 16px;
	margin: 8px;
	border: 0px;
	border-radius: 50%;
	box-shadow:  black 0px 0px 4px 0px;
	background-color: #ffffff08;
	//transition-duration: 0s;
}

.CarouselDot:selected .RadioBox
{
	border: 0px;
	background-color: white;
	transition-duration: 0.16s;
	box-shadow:  black 0px 0px 4px 0px;
}

.CarouselDot:hover .RadioBox
{
	box-shadow:  none 0px 0px 4px 0px;
	border: 1px solid white;
}

.CarouselDot:selected:hover .RadioBox
{
	box-shadow:  black 0px 0px 4px 0px;
	border: 0px solid white;
}


//
// ContextMenu
//
.ContextMenu
{
	width: 100%;
	height: 100%;

	transition-property: opacity, transform;
	transition-duration: ContextMenuFadoutTime;
	transition-timing-function: ease-in-out;
	opacity: 1.0;

	z-index: contextmenu_zindex;

	visibility: visible;
}

.ContextMenu.Destructing
{
	opacity: 0.0;
}


//
// SimpleContextMenu - Shows a list of text buttons
//
SimpleContextMenu .ContextMenuBody
{
	padding: 5px;

	flow-children: down;
	width: 230px;

	opacity: 1.0;

	background-color: #212828;
	border: 2px solid black;
	box-shadow: fill 4px 4px 4px #0009;
}

SimpleContextMenu.Wider .ContextMenuBody
{
	width: 250px;
}

SimpleContextMenu.ExtraWide .ContextMenuBody
{
	width: 300px;
}

SimpleContextMenu .ContextMenuBody Button
{
	width: 100%;

	padding: 6px 10px 6px 10px;
	margin: 0px 0px;
	border: 1px solid black;
	background-color: #00000040;
 //   border-radius: 8px;

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

SimpleContextMenu .ContextMenuBody Label
{
	horizontal-align: left;
}

SimpleContextMenu .ContextMenuBody Button:enabled:hover
{
	background-color: #00000080;
}

SimpleContextMenu .ContextMenuBody Button:enabled:hover Label
{
	color: white;
}

SimpleContextMenu .ContextMenuBody Button:disabled Label
{
	color: #444444;
}

//
//   PROGRESS BAR
//


ProgressBar
{
	width: 320px;
	height: 22px;
	border: 3px solid black;
	border-radius: 2px;
	background-color: #000000ff;
	box-shadow: #00000066 -3px -3px 6px 6px;
}

.ProgressBarLeft
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #222222FF ), to( #444f52FF ) );
}

//
//   CLOSE BUTTON
//

.CloseButton
{
	width: 24px;
	height: 24px;
	wash-color: #888888;

	background-image: url("s2r://panorama/images/control_icons/x_close_png.vtex");
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	margin: 4px;

	transition-property: wash-color, pre-transform-scale2d, background-color;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;
}

.CloseButton:hover
{
	wash-color: #bbbbbb;
}

.CloseButton:active
{
	wash-color: white;
	background-size: 20px 20px;
	//pre-transform-scale2d: 0.8;
	sound: "ui_friends_slide_in";
}

//
//   HELP BUTTON
//

.HelpButton Label
{
	font-weight: bold;
	padding: 0px 8px 0px 8px;
	wash-color: #888888;
	color: white;
	font-size: 20px;

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

.HelpButton:hover Label
{
	wash-color: #bbbbbb;
}

.HelpButton:active Label
{
	wash-color: white;
}


//
//   CONTROL ICON BUTTON
//

.ControlIconButton
{
	width: 28px;
	height: 28px;
	wash-color: #888888;
	background-image: url("s2r://panorama/images/control_icons/dota_logo_white_png.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	pre-transform-scale2d: 1;
	margin: 4px;
	transition-property: wash-color, pre-transform-scale2d;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;
}

.ControlIconButton:hover
{
	wash-color: #bbbbbb;
}

.ControlIconButton:active
{
	wash-color: white;
	background-size: 24px 24px;
}

//
//   SETTINGS BUTTON
//

.SettingsButton
{
	background-image: url("s2r://panorama/images/control_icons/gear_png.vtex");
}

.SettingsButton.Activated
{
	animation-name: SettingsButtonAnimation;
	animation-duration: 0.50s;
	animation-delay: 0.15s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

.SettingsButton:active
{
	sound: "ui_rollover_micro";
}


@keyframes 'SettingsButtonAnimation'
{
	0%
	{
		transform: rotateZ( 0deg );
	}

	100%
	{
		transform: rotateZ( 45deg );
	}
}

//
//   REFRESH BUTTON
//

.RefreshButton
{
	background-image: url("s2r://panorama/images/control_icons/refresh_psd.vtex");
}

.RefreshButton.Activated
{
	animation-name: RefreshButtonAnimation;
	animation-duration: 0.55s;
	animation-delay: 0.15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-direction: reverse;
}


@keyframes 'RefreshButtonAnimation'
{
	0%
	{
		transform: rotateZ( 0deg );
	}
	100%
	{
		transform: rotateZ( 180deg );
	}

}

//
// 	EDIT BUTTON
//

.EditButton
{
	background-image: url("s2r://panorama/images/control_icons/edit_png.vtex");
	background-size: 65%;
}



//
// 	SPINNERS
//

.Spinner
{
	width: 28px;
	height: 28px;

	background-image: url("s2r://panorama/images/status_icons/loadingthrobber_round_psd.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;

	animation-name: SpinnerRotate;
	animation-duration: 1.0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes 'SpinnerRotate'
{
	0%
	{
		transform: rotateZ( 360deg );
	}


	50%
	{
		transform: rotateZ( 180deg );
	}

	100%
	{
		transform: rotateZ( 0deg );
	}
}

//
//   ARROWS
//

.Arrow
{
	width: 60px;
	height: 60px;
	vertical-align: middle;
	wash-color: #9db1b7;
	background-image: url("s2r://panorama/images/control_icons/arrow_right_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;

	margin-right: 3px;
	margin-left: 3px;

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

.Arrow:enabled:hover
{
	wash-color: white;
}

.Arrow.Left
{
	horizontal-align: left;
	transform: scaleX(-1);
}

.Arrow.Left:enabled:hover
{
	transform: scaleX(-1) translateX(-3px);
}

.Arrow.Right
{
	horizontal-align: right;
}

.Arrow.Right:enabled:hover
{
	transform: translateX(3px);
}

.Arrow.Left:active
{
	transform: scaleX(-1) translateX(-6px);
	sound: "ui_select_arrow";
}

.Arrow.Right:active
{
	transform: translateX(6px);
	sound: "ui_select_arrow";
}

.Arrow.Left:disabled
{
	opacity: 0.1;
	transform: scaleX(-1) translateX(0px);
	pre-transform-scale2d: .1;
}

.Arrow.Right:disabled
{
	opacity: 0.1;
	transform: translateX(0px);
	pre-transform-scale2d: .1;
}

.ExpandDownArrow
{
	height: 16px;
	width: 16px;
	background-image: url("s2r://panorama/images/control_icons/arrow_dropdown_png.vtex");
	background-size: contain;
	wash-color: #888888;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: -1px;

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

//
//   RARITY COLORS
//

@define rarity_color_common: #b0c3d9;
@define rarity_color_uncommon: #5e98d9;
@define rarity_color_rare: #4b69ff;
@define rarity_color_mythical: #8847ff;
@define rarity_color_legendary: #d32ce6;
@define rarity_color_ancient: #eb4b4b;
@define rarity_color_immortal: #e4ae39;
@define rarity_color_arcana: #ade55c;
@define rarity_color_seasonal: #fff34f;


.ItemRarity_common .ItemRarityBackgroundColor, .ItemRarity_common.ItemRarityBackgroundColor
{
	background-color: rarity_color_common;
}

.ItemRarity_uncommon .ItemRarityBackgroundColor, .ItemRarity_uncommon.ItemRarityBackgroundColor
{
	background-color: rarity_color_uncommon;
}

.ItemRarity_rare .ItemRarityBackgroundColor, .ItemRarity_rare.ItemRarityBackgroundColor
{
	background-color: rarity_color_rare;
}

.ItemRarity_mythical .ItemRarityBackgroundColor, .ItemRarity_mythical.ItemRarityBackgroundColor
{
	background-color: rarity_color_mythical;
}

.ItemRarity_legendary .ItemRarityBackgroundColor, .ItemRarity_legendary.ItemRarityBackgroundColor
{
	background-color: rarity_color_legendary;
}

.ItemRarity_ancient .ItemRarityBackgroundColor, .ItemRarity_ancient.ItemRarityBackgroundColor
{
	background-color: rarity_color_ancient;
}

.ItemRarity_immortal .ItemRarityBackgroundColor, .ItemRarity_immortal.ItemRarityBackgroundColor
{
	background-color: rarity_color_immortal;
}

.ItemRarity_arcana .ItemRarityBackgroundColor, .ItemRarity_arcana.ItemRarityBackgroundColor
{
	background-color: rarity_color_arcana;
}

.ItemRarity_seasonal .ItemRarityBackgroundColor, .ItemRarity_seasonal.ItemRarityBackgroundColor
{
	background-color: rarity_color_seasonal;
}

.ItemRarity_common .ItemRarityColor, .ItemRarity_common.ItemRarityColor, a.ItemRarity_common.ItemRarityColor
{
	color: rarity_color_common;
}

.ItemRarity_uncommon .ItemRarityColor, .ItemRarity_uncommon.ItemRarityColor, a.ItemRarity_uncommon.ItemRarityColor
{
	color: rarity_color_uncommon;
}

.ItemRarity_rare .ItemRarityColor, .ItemRarity_rare.ItemRarityColor, a.ItemRarity_rare.ItemRarityColor
{
	color: rarity_color_rare;
}

.ItemRarity_mythical .ItemRarityColor, .ItemRarity_mythical.ItemRarityColor, a.ItemRarity_mythical.ItemRarityColor
{
	color: rarity_color_mythical;
}

.ItemRarity_legendary .ItemRarityColor, .ItemRarity_legendary.ItemRarityColor, a.ItemRarity_legendary.ItemRarityColor
{
	color: rarity_color_legendary;
}

.ItemRarity_ancient .ItemRarityColor, .ItemRarity_ancient.ItemRarityColor, a.ItemRarity_ancient.ItemRarityColor
{
	color: rarity_color_ancient;
}

.ItemRarity_immortal .ItemRarityColor, .ItemRarity_immortal.ItemRarityColor, a.ItemRarity_immortal.ItemRarityColor
{
	color: rarity_color_immortal;
}

.ItemRarity_arcana .ItemRarityColor, .ItemRarity_arcana.ItemRarityColor, a.ItemRarity_arcana.ItemRarityColor
{
	color: rarity_color_arcana;
}

.ItemRarity_seasonal .ItemRarityColor, .ItemRarity_seasonal.ItemRarityColor, a.ItemRarity_seasonal.ItemRarityColor
{
	color: rarity_color_seasonal;
}

.ItemRarity_common:hover .ItemRarityColor, .ItemRarity_common.ItemRarityColor:hover, a.ItemRarity_common.ItemRarityColor:hover
{
	text-decoration: none;
}

.ItemRarity_uncommon:hover .ItemRarityColor, .ItemRarity_uncommon.ItemRarityColor:hover, a.ItemRarity_uncommon.ItemRarityColor:hover
{
	text-decoration: none;
}

.ItemRarity_rare:hover .ItemRarityColor, .ItemRarity_rare.ItemRarityColor:hover, a.ItemRarity_rare.ItemRarityColor:hover
{
	text-decoration: none;
}

.ItemRarity_mythical:hover .ItemRarityColor, .ItemRarity_mythical.ItemRarityColor:hover, a.ItemRarity_mythical.ItemRarityColor:hover
{
	text-decoration: none;
}

.ItemRarity_legendary:hover .ItemRarityColor, .ItemRarity_legendary.ItemRarityColor:hover, a.ItemRarity_legendary.ItemRarityColor:hover
{
	text-decoration: none;
}

.ItemRarity_ancient:hover .ItemRarityColor, .ItemRarity_ancient.ItemRarityColor:hover, a.ItemRarity_ancient.ItemRarityColor:hover
{
	text-decoration: none;
}

.ItemRarity_immortal:hover .ItemRarityColor, .ItemRarity_immortal.ItemRarityColor:hover, a.ItemRarity_immortal.ItemRarityColor:hover
{
	text-decoration: none;
}

.ItemRarity_arcana:hover .ItemRarityColor, .ItemRarity_arcana.ItemRarityColor:hover, a.ItemRarity_arcana.ItemRarityColor:hover
{
	text-decoration: none;
}

.ItemRarity_seasonal:hover .ItemRarityColor, .ItemRarity_seasonal.ItemRarityColor:hover, a.ItemRarity_seasonal.ItemRarityColor:hover
{
	text-decoration: none;
}

.PersonaName
{
	color: #FFFFFF;
}

.PersonaName:hover
{
	text-decoration: none;
}

#MousePanningImage
{
	wash-color: #ffffffff;
	visibility: visible;
	width: mousepanningcursorsize;
	height: mousepanningcursorsize;
	z-index: 10;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

.MousePanning #MousePanningImage
{
	opacity: 0.5;
}

.StateParticipatingInTourney .RedBackgroundImageButton Label
{
	text-transform: uppercase;
	font-size: 21px;
	color: #ccc;
	//color: #d04721;
	margin-top: 2px;
	transition-property: color;
	transition-duration: .2s;
}

.RedBackgroundImageButton
{
	background-image: url("s2r://panorama/images/red_large_off_png.vtex");
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transition-property: brightness, saturation;
	transition-duration: .3s;

}

.RedBackgroundImageButton:hover
{
	background-image: url("s2r://panorama/images/red_large_off_png.vtex");
	background-size: 100% 100%;
	brightness: 3;
	saturation: 1.4;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	overflow: noclip noclip;
}

.RedBackgroundImageButton Panel
{
	horizontal-align: center;
	vertical-align: center;
}

.RedBackgroundImageButton Label
{
	margin-top: 1px;
	margin-right: 4px;
	color: white;
	font-size: 22px;
}

.RedBackgroundImageButton Image
{
	margin-top: 4px;
	width: 22px;
	height: 22px;
}

.DOTAReturnToDashboardOverlay
{
	margin: 2px;
	width: 48px;
	height: 48px;
	background-image: url("s2r://panorama/images/control_icons/return_to_dashboard_background_psd.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100%;
}

.DOTAShowDashboardButton
{
	transform: rotateZ( 180deg );

	horizontal-align: center;
	vertical-align: center;
	width: 62px;
	height: 57px;
	background-image: url("s2r://panorama/images/control_icons/return_to_game_png.vtex");
	background-size: 27px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	wash-color: #ffffff;

	transition-property: background-color, wash-color;
	transition-delay: 0.0s;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

.DOTAShowDashboardButton:hover
{
	wash-color: #ffffff;
	background-size: 32px;
}

#DOTANotificationButton .TopBarSmallButton
{
	background-position: 20% 50%;
}

.TopBarSmallButton
{
	margin: 0px;
	width: 62px;
	height: 61px;

	background-size: 30px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	wash-color: #bd5e2d;

	transition-property: background-color, wash-color;
	transition-delay: 0.0s;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

.TopBarSmallButton:hover
{
	wash-color: #bd5e2daa;
}

.TopBarSmallButton:active
{
	background-position: 50% 55%;
}

.RadialSweep
{
	width: 150%;
	height: 150%;

	transform: translateX(-6px) translateY(-6px);

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

	animation-name: RadialSweep;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}


@keyframes 'RadialSweep'
{
	0%
	{
		transform: rotateZ( 0deg ) translateX(-6px) translateY(-6px);
	}

	50%
	{
		transform: rotateZ( -180deg ) translateX(-6px) translateY(-6px);
	}

	100%
	{
		transform: rotateZ( -360deg ) translateX(-6px) translateY(-6px);
	}
}


.ReadyToPlay
{
	color: #aceba9;
	font-size: 42px;
}

.HorizontalDivider
{
	width: 100%;
	height: 1px;
	background-color: #ffffff88;
}

.VerticalDivider
{
	width: 1px;
	height: 100%;
	background-color: #ffffff88;
}

.HorizontalLineFill
{
	width: fill-parent-flow (1.0);
	height: 1px;
	background-color: white;
	vertical-align: middle;
	margin-left: 4px;
	margin-right: 4px;
}


.Star
{
	background-image: url("s2r://panorama/images/status_icons/icon_star_empty_png.vtex");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	wash-color: #666666;
	height: 19px;
	width: 19px;
	margin-right: 3px;
}

.StarLit
{
	background-image: url("s2r://panorama/images/status_icons/icon_star_png.vtex");
	wash-color: #ffffff;
}


.HelpIcon,
.InfoIcon
{
	width: 18px;
	height: 18px;
	background-image: url("s2r://panorama/images/status_icons/information_psd.vtex");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	margin-left: 6px;
	margin-right: 6px;

	tooltip-position: right;
	tooltip-body-position: 50% 10%;
	wash-color: #888888;
	vertical-align: middle;

	transition-property: wash-color;
	transition-timing-function: ease-in-out;
	transition-duration: 0.2s;

}

.HelpIcon
{
	background-image: url("s2r://panorama/images/status_icons/helpicon_psd.vtex");
}


.TextGlowPulse
{
	animation-name: TextGlowPulse;
	animation-duration: 1.1s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}



@keyframes 'TextGlowPulse'
{
	0%
	{
		text-shadow: 0px 0px 4px 1.0 #AAE9A700;
	}

	50%
	{
		text-shadow: 0px 0px 4px 1.0 #AAE9A7dd;
	}

	100%
	{
		text-shadow: 0px 0px 4px 1.0 #AAE9A700;
	}
}

/* Rich Presence colors */

.StateFindingMatch DOTAUserRichPresence.FriendPlayingDota Label, .StateFindingMatch DOTAUserName.FriendPlayingDota Label a .PersonaName		{ color: #CDFFC9; text-shadow: 0px 0px 6px 2.0 #6A9561;}
.LookingForPartyMembers DOTAUserRichPresence.FriendPlayingDota Label, .LookingForPartyMembers DOTAUserName.FriendPlayingDota Label a .PersonaName		{ color: #CDFFC9; text-shadow: 0px 0px 6px 2.0 #6A9561;}
DOTAUserRichPresence.FriendPlayingDota Label, DOTAUserName.FriendPlayingDota Label a .PersonaName			{ color: #6A9561; }
DOTAUserRichPresence.FriendPlayingDotaIdle Label, DOTAUserName.FriendPlayingDotaIdle Label a .PersonaName	{ color: #6A9561; }
DOTAUserRichPresence.FriendPending Label, DOTAUserName.FriendPending Label a .PersonaName					{ color: #eeee82; }
DOTAUserRichPresence.FriendOnline Label, DOTAUserName.FriendOnline Label a .PersonaName						{ color: #6a9dcc; }
DOTAUserRichPresence.FriendOffline Label, DOTAUserName.FriendOffline Label a .PersonaName					{ color: #aaaaaa; }

@keyframes 'ProbablyUnlocalizedAnimation'
{
	0%
	{
		pre-transform-scale2d: 0.95;
	}

	50%
	{
		pre-transform-scale2d: 1.05;
	}

	100%
	{
		pre-transform-scale2d: 0.95;
	}
}

Label.ProbablyUnlocalizedText
{
	background-color: red;
	color: yellow;

	animation-name: ProbablyUnlocalizedAnimation;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}


/* EdgeScroller */
EdgeScroller.CanScrollHorizontal
{
	padding-left: 18px;
	padding-right: 18px;
}

EdgeScroller.CanScrollVertical
{
	padding-top: 18px;
	padding-bottom: 18px;
}

EdgeScrollBar
{
	width: 100%;
	height: 100%;

	/* Must match k_flScrollTransitionTime & k_flScrollTransitionFunc */
	transition-property: transform;
	transition-timing-function: ease-in-out;
	transition-duration: 0.2s;
}

EdgeScrollBar .EdgeScrollButton
{
	background-color: #ffffff10;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	wash-color: #999999;

	transition-property: wash-color;
	transition-duration: 0.1s;
}

EdgeScrollBar .EdgeScrollButton:hover
{
	wash-color: #cccccc;
}
EdgeScrollBar .EdgeScrollButton:active
{
	wash-color: #ffffff;
}

EdgeScrollBar.Horizontal .EdgeScrollButton
{
	width: 16px;
	height: 100%;
}
EdgeScrollBar.Horizontal #MinButton
{
	horizontal-align: left;
	background-image: url("s2r://panorama/images/control_icons/arrow_solid_left_png.vtex");
}
EdgeScrollBar.Horizontal #MaxButton
{
	horizontal-align: right;
	background-image: url("s2r://panorama/images/control_icons/arrow_solid_right_png.vtex");
}

EdgeScrollBar.Vertical .EdgeScrollButton
{
	width: 100%;
	height: 16px;
}
EdgeScrollBar.Vertical #MinButton
{
	vertical-align: top;
	background-image: url("s2r://panorama/images/control_icons/arrow_solid_up_png.vtex");
}
EdgeScrollBar.Vertical #MaxButton
{
	vertical-align: bottom;
	background-image: url("s2r://panorama/images/control_icons/arrow_solid_down_png.vtex");
}


/* Pagination arrows and buttons */
.PaginationArrow
{
	background-image: url("s2r://panorama/images/control_icons/arrow_solid_right_png.vtex");
	background-repeat: no-repeat;
	background-color: #90a3a8;
	background-size: 12px 12px;
	background-position: 63% 50%;
	border-radius: 50%;
	width: 23px;
	height: 23px;
	vertical-align: top;
	margin-right: 4px;
	opacity: 0.2;
	transition-property: opacity;
	transition-duration: 0.2s;
}

.PaginationArrow:enabled:hover
{
	opacity: 0.6;
}

.PaginationArrow:active
{
	opacity: 1.0;
}

.PaginationArrow:disabled
{
	brightness: 0.5;
}

.PaginationArrow.Left
{
	transform: scaleX( -1.0 );
}

.PaginationArrow.Right
{
}

.PaginationArrow.Up
{
	transform: rotateZ( -90.0deg );
}

.PaginationArrow.Down
{
	transform: rotateZ( 90.0deg );
}

.PaginationButton
{
	//background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #7e8f93 ), to( #000000 ) );
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, color-stop(0.0, #7e8f93 ), color-stop(0.5, #7e8f93), color-stop(0.6, #00000000 ) );
	//background-color: #7e8f93;
	background-repeat: no-repeat;
	//background-size: 10px 20px;
	background-position: 50% 50%;
	width: 16px;
	height: 16px;
	//padding: 10px;
	margin: 1px 0px 1px 1px;
	vertical-align: center;
	opacity: .2;
	border-radius: 50%;
}

.Gold.PaginationButton,
.Gold.PaginationButton:selected
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, color-stop(0.0, #FAAB36 ), color-stop(0.5, #FAAB36), color-stop(0.6, #00000000 ) );
}

.Silver.PaginationButton,
.Silver.PaginationButton:selected
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, color-stop(0.0, #B7B7B7 ), color-stop(0.5, #B7B7B7), color-stop(0.6, #00000000 ) );
}

.Red.PaginationButton,
.Red.PaginationButton:selected
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, color-stop(0.0, #aa2305 ), color-stop(0.5, #aa2305), color-stop(0.6, #00000000 ) );
}

.Green.PaginationButton,
.Green.PaginationButton:selected
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, color-stop(0.0, #0caa05 ), color-stop(0.5, #20aa05), color-stop(0.6, #00000000 ) );
}

.Blue.PaginationButton,
.Blue.PaginationButton:selected
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, color-stop(0.0, #0563aa ), color-stop(0.5, #0563aa), color-stop(0.6, #00000000 ) );
}


.PaginationButton:enabled:hover
{
	opacity: 0.6;
}

.PaginationButton:selected
{
	//background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #e7f6f5 ), to( #333399 ) );
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, color-stop(0.0, #9db1b7 ), color-stop(0.5, #9db1b7), color-stop(0.6, #00000000 ) );
	//background-color: #90a3a8;
	opacity: 1;
	border-radius: 50%;
}

@keyframes 'OpacityPulse'
{
	0%
	{
		opacity: 1.0;
	}

	50%
	{
		opacity: 0.2;
	}

	100%
	{
		opacity: 1.0;
	}
}


/* Use a tiny border-radius to use a different shader and get proper anti-aliasing, but only on high-end machines.
   On low end machines, the memory cost from the render target is really high. */
.Rotating2dPanel
{
	border-radius: 0.1px;
}
.LowVisualQuality .Rotating2dPanel
{
	border-radius: 0px;
}

/* AvatarImage */
DOTAAvatarImage .AvatarImage
{
	width: 100%;
	height: 100%;
	z-index: 2;
}

DOTAAvatarImage .AvatarBorderImage
{
	width: 100%;
	height: 100%;
	opacity: 0;
}

DOTAAvatarImage.EventPointTierBronze .AvatarImage,
DOTAAvatarImage.EventPointTierSilver .AvatarImage,
DOTAAvatarImage.EventPointTierGold .AvatarImage,
DOTAAvatarImage.EventPointTierPlatinum .AvatarImage
{
	border: 8% solid #00000000;
}

DOTAAvatarImage.EventPointTierBronze .AvatarBorderImage,
DOTAAvatarImage.EventPointTierSilver .AvatarBorderImage,
DOTAAvatarImage.EventPointTierGold .AvatarBorderImage,
DOTAAvatarImage.EventPointTierPlatinum .AvatarBorderImage
{
	background-image: url("s2r://panorama/images/compendium/avatarborder_gold_psd.vtex");
	background-size: contain;
	opacity: 1;
}

DOTAAvatarImage.EventPointTierBronze .AvatarBorderImage
{
	/* Fall 2016 */
	background-image: url("s2r://panorama/images/compendium/avatarborder_default_fall_2016_psd.vtex");

	/* Winter 2017 */
	background-image: url("s2r://panorama/images/compendium/winter/avatarborder_default_winter_psd.vtex");
	saturation: 1;
}

DOTAAvatarImage.EventPointTierSilver .AvatarBorderImage
{
	background-image: url("s2r://panorama/images/compendium/avatarborder_silver_fall_2016_psd.vtex");
	saturation: 1;
}

DOTAAvatarImage.EventPointTierGold .AvatarBorderImage
{
	background-image: url("s2r://panorama/images/compendium/avatarborder_gold_fall_2016_psd.vtex");
	saturation: 1;
}

DOTAAvatarImage.EventPointTierPlatinum .AvatarBorderImage
{
	/* Fall 2016 */
	background-image: url("s2r://panorama/images/compendium/avatarborder_max_fall_2016_psd.vtex");

	/* Winter 2017 */
	background-image: url("s2r://panorama/images/compendium/winter/avatarborder_max_winter_psd.vtex");
	saturation: 1;
}



/* Styles for the DragZoom Panel */
DragZoom
{
	z-index: 2;
	flow-children: down;
}

#DragZoomContentPanel
{
	vertical-align: middle;
	horizontal-align: middle;
	overflow: noclip;
	z-index: 1;
	transition-property: transform, position;
	transition-delay: 0.0s;
	transition-timing-function: ease-in-out;
}

.DragZoomFastTransition
{
	transition-duration: 0.0s;
}

.DragZoomSlowTransition
{
	transition-duration: 0.5s;
}

/* End of Styles for DragZoom Panel */


/* DOTASortHeader */
DOTASortHeader
{
	flow-children: right;
}

DOTASortHeader .SortDirectionArrow
{
	width: 20px;
	height: 20px;
	margin-left: 2px;
	margin-bottom: 3px;
	vertical-align: middle;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

DOTASortHeader.SortAscending .SortDirectionArrow
{
	background-image: url("s2r://panorama/images/control_icons/arrow_dropdown_png.vtex");
	transform: scaleY( -1.0 );
}
DOTASortHeader.SortDescending .SortDirectionArrow
{
	background-image: url("s2r://panorama/images/control_icons/arrow_dropdown_png.vtex");
}


/* DOTAPunchCard */
DOTAPunchCard
{
	flow-children: right;
}

DOTAPunchCard .StampPanel
{
	width: 100px;
	height: 83px;

	margin-left: -50px;

	background-size: 100% 100%;

	background-image: url("s2r://panorama/images/punch_card/punch_card_arrow_pip_off_png.vtex");
}

DOTAPunchCard .StampPanel:selected
{
	background-image: url("s2r://panorama/images/punch_card/punch_card_arrow_pip_on_png.vtex");
}

DOTAPunchCard .StampPanel.StampIndex0
{
	margin-left: 0px;
}

DOTAPunchCard .StampPanel.StampIndex0 { z-index: 100; }
DOTAPunchCard .StampPanel.StampIndex1 { z-index: 99; }
DOTAPunchCard .StampPanel.StampIndex2 { z-index: 98; }
DOTAPunchCard .StampPanel.StampIndex3 { z-index: 97; }
DOTAPunchCard .StampPanel.StampIndex4 { z-index: 96; }
DOTAPunchCard .StampPanel.StampIndex5 { z-index: 95; }
DOTAPunchCard .StampPanel.StampIndex6 { z-index: 94; }
DOTAPunchCard .StampPanel.StampIndex7 { z-index: 93; }
DOTAPunchCard .StampPanel.StampIndex8 { z-index: 92; }
DOTAPunchCard .StampPanel.StampIndex9 { z-index: 91; }

DOTAPunchCard #RewardPanel
{
	height: 83px;
	width: 200px;
	vertical-align: middle;

	margin-left: -50px;
	margin-right: 28px;
}

DOTAPunchCard.StampsFull #RewardPanel
{
	background-image: url("s2r://panorama/images/punch_card/punch_card_bonus_backer_on_png.vtex");
	background-position: 0% 50%;
}

DOTAPunchCard #RewardPanelBackground
{
	background-color: black;
	height: 33px;
	width: 180px;
	vertical-align: middle;
}

DOTAPunchCard.StampsFull #RewardPanelBackground
{
	visibility: collapse;
}

DOTAPunchCard #RewardPanel Label
{
	horizontal-align: center;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	margin-top: 3px;
	color: white;
	font-weight: bold;
}

DOTAPunchCard.StampCount0 #RewardPanel Label { text-shadow: 0px 0px 4px 1.0 #00ffff; }
DOTAPunchCard.StampCount1 #RewardPanel Label { text-shadow: 0px 0px 4px 2.0 #00ffff; }
DOTAPunchCard.StampCount2 #RewardPanel Label { text-shadow: 0px 0px 4px 3.0 #00ffff; }
DOTAPunchCard.StampCount3 #RewardPanel Label { text-shadow: 0px 0px 4px 4.0 #00ffff; }
DOTAPunchCard.StampCount4 #RewardPanel Label { text-shadow: 0px 0px 4px 5.0 #00ffff; }
DOTAPunchCard.StampCount5 #RewardPanel Label { text-shadow: 0px 0px 5px 5.0 #00ffff; }
DOTAPunchCard.StampCount6 #RewardPanel Label { text-shadow: 0px 0px 6px 5.0 #00ffff; }
DOTAPunchCard.StampCount7 #RewardPanel Label { text-shadow: 0px 0px 7px 5.0 #00ffff; }
DOTAPunchCard.StampCount8 #RewardPanel Label { text-shadow: 0px 0px 8px 5.0 #00ffff; }
DOTAPunchCard.StampCount9 #RewardPanel Label { text-shadow: 0px 0px 9px 5.0 #00ffff; }

EconItemImage #Overlay
{
    width: 100%;
    height: 100%;
}

.FillWidth
{
	width: fill-parent-flow( 1.0 );
}
.FillHeight
{
	height: fill-parent-flow( 1.0 );
}


.Vignette
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/backgrounds/dashboard_vignette_png.vtex");
	background-size: cover;

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

.RightVignette
{
	horizontal-align: right;
	height: 100%;
	width: 64px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), to( #000000ff ) );
}

.LeftVignette
{
	horizontal-align: left;
	height: 100%;
	width: 64px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #000000ff ), to( #00000000 ) );
}



.PanelSlideThumb
{
	width: 32px;
	height: 96px;
	transform: translateX( 0px );
	background-color: #181818cc;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	box-shadow: #000000aa -4px -4px 8px 8px;
	vertical-align: middle;
	horizontal-align: right;
}

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

	transform: translateX( -9px );

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

.PanelSlideThumb:hover
{
	background-color: #383838cc;
}

.PanelSlideThumb:hover .PanelSlideThumbArrow
{
	transform: translateX( -12px );
	wash-color: white;
}

.DrawerClosed .PanelSlideThumbArrow
{
	transform: rotateZ(180deg) translateX( -6px );
}

.DrawerClosed .PanelSlideThumb:hover .PanelSlideThumbArrow
{
	transform: translateX( 3px ) rotateZ(180deg);
	wash-color: white;
}

.DrawerClosed
{
    transform: translateX( -10px );
}

.RightAlign
{
	horizontal-align: right;
}

.LeftAlign
{
	horizontal-align: left;
}

.CenterAlign
{
	horizontal-align: center;
}


.TopAlign
{
	vertical-align: top;
}


.BottomAlign
{
	vertical-align: bottom;
}

.MiddleAlign
{
	vertical-align: center;
}

.VisibilityCollapsed
{
	visibility: collapse;
}


/* Ability Modifiers */
.ModifierIcon
{
	width: 24px;
	height: 24px;
	background-image: url("s2r://panorama/images/status_icons/modifier_animation_psd.vtex");
	background-repeat: no-repeat;
	background-position: center 50% 50%;
	background-size: 24px 24px;
}

.ModifierIcon.Empty
{
    visibility: collapse;
}

.ModifierIcon.icon_replacement
{
	background-image: url("s2r://panorama/images/status_icons/modifier_icons_psd.vtex");
}

.ModifierIcon.particle
{
	background-image: url("s2r://panorama/images/status_icons/modifier_spelleffects_psd.vtex");
}

.ModifierIcon.particle_create
{
	background-image: url("s2r://panorama/images/status_icons/modifier_ambienteffects_psd.vtex");
}

.ModifierIcon.speech
{
	background-image: url("s2r://panorama/images/status_icons/modifier_voice_psd.vtex");
}

.ModifierIcon.activity
{
	background-image: url("s2r://panorama/images/status_icons/modifier_animation_psd.vtex");
}

.ModifierIcon.loading_screen
{
    background-image: url("s2r://panorama/images/status_icons/modifier_loading_screen_psd.vtex");
}

.ModifierIcon.cursor_pack
{
    background-image: url("s2r://panorama/images/status_icons/modifier_cursor_pack_psd.vtex");
}

.ModifierIcon.portrait_game
{
    background-image: url("s2r://panorama/images/status_icons/modifier_portrait_game_psd.vtex");
}

.ModifierIcon.model
{
    background-image: url("s2r://panorama/images/status_icons/modifier_model_psd.vtex");
}

.ModifierIcon.custom_kill_effect
{
    background-image: url("s2r://panorama/images/status_icons/modifier_kill_effect_psd.vtex");
}

/*these are temp*/

.ModifierIcon.soundscape
{
    background-image: url("s2r://panorama/images/status_icons/modifier_voice_psd.vtex");
}

.ModifierIcon.sound
{
    background-image: url("s2r://panorama/images/status_icons/modifier_voice_psd.vtex");
}

.ModifierIcon.announcer
{
    background-image: url("s2r://panorama/images/status_icons/modifier_voice_psd.vtex");
}

.ModifierIcon.pet
{
    background-image: url("s2r://panorama/images/status_icons/modifier_model_psd.vtex");
}


/* ToolTip Styles */

#DOTAHud .TooltipContainer
{
	transition-duration: 0.0s;
}

DOTATooltipFriendsMenu #Contents
{
    background-color: #333f3d;
}

DOTATooltipFriendsMenu #BottomArrow
{
	wash-color: #333f3d;
}

DOTATooltipCustomGame #Contents
{
	padding: 0px;

    border: 1px solid #9BCAF455;
}

DOTATooltipCustomGame #LeftArrow, DOTATooltipCustomGame #RightArrow, DOTATooltipCustomGame #TopArrow, DOTATooltipCustomGame #BottomArrow
{
}

DOTATooltipCustomGame #BottomArrow
{
    background-image: url("s2r://panorama/images/tooltips/tooltip_arrow_bottom_customgames_psd.vtex");
    wash-color: white;
}
DOTATooltipCustomGame #LeftArrow
{
    background-image: url("s2r://panorama/images/tooltips/tooltip_arrow_left_customgames_psd.vtex");
    wash-color: white;
}
DOTATooltipCustomGame #RightArrow
{
    background-image: url("s2r://panorama/images/tooltips/tooltip_arrow_right_customgames_psd.vtex");
    wash-color: white;
}
DOTATooltipCustomGame #TopArrow
{
    background-image: url("s2r://panorama/images/tooltips/tooltip_arrow_top_customgames_psd.vtex");
    wash-color: white;
}

/* Custom styling for Profile Card tooltip */
DOTATooltipProfileCard #Contents
{
    background-color: transparent;
    padding: 0px;
    border: 0px solid transparent;
    box-shadow: none;
	transition-delay: 0.2s;
}

DOTATooltipProfileCard.TooltipVisible
{
	transition-delay: 0.0s;
}

/* Use margins on the arrows to make sure that we don't try to show the arrow over top of the badge */
DOTATooltipProfileCard #RightArrow
{
	background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_right_png.vtex");
	wash-color: #495757;
	width: 16px;
	height: 32px;

	margin-left: -1px;
}

DOTATooltipProfileCard #TopArrow
{
    background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_top_png.vtex");
	wash-color: #495757;

	width: 32px;
	height: 16px;

	margin-bottom: -1px;
}

DOTATooltipProfileCard #LeftArrow
{
    background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_left_png.vtex");
	wash-color: #495757;
	width: 16px;
	height: 32px;

	margin-right: -1px;
}

DOTATooltipProfileCard #BottomArrow
{
    background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_bottom_png.vtex");
	wash-color: #495757;

	width: 32px;
	height: 16px;

	margin-top: -1px;
}

.BindingsTooltip #Contents
{
    min-width: 576px;
    max-width: 576px;
    background-color: #393E3F;
    border: 2px solid black;
}

.BindingsTooltip .TooltipRow
{
    width: 450px;
}

.BindingsTooltip #LeftArrow,
.BindingsTooltip #TopArrow
{
    opacity: 1;
    height: 10px;
    wash-color: #2B2F30;
}

.BindingsTooltip .TextContents
{
    width: 100%;
    transform: translateX(5px);
}

.BindingsTooltip.TooltipContainer
{
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.1s;
    margin-top: -2px;
    margin-left: 8px;
}

.BindingsTooltip.TooltipContainer.TooltipVisible
{
    opacity: 1;
}

.OptionsTooltip #Contents
{
    min-width: 576px;
    max-width: 576px;
    background-color: #393E3F;
    border: 2px solid black;
}

.OptionsTooltip .TooltipRow
{
    width: 450px;
}

.OptionsTooltip #LeftArrow
{
    opacity: 1;
    height: 10px;
    wash-color: #2B2F30;
	margin: 0px;
	width: fit-children;
}

.RightArrowVisible.OptionsTooltip #RightArrow
{
	visibility: visible;
}

.OptionsTooltip .TextContents
{
    width: 100%;
    transform: translateX(5px);
}

.OptionsTooltip.TooltipContainer
{
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.1s;
    margin-top: -2px;
    margin-left: 8px;
}

.OptionsTooltip.TooltipContainer.TooltipVisible
{
    opacity: 1;
}

.LeaverConsequencesTooltip #Contents
{
	width: 330px;
	background-color: #69312c;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2d2d2d ), color-stop(.5, #2d2d2d), to( #69312c ) );
}

.LeaverConsequencesTooltip #TextLabel
{
	color: red;
}

.LeaverConsequencesTooltip #BottomArrow,
{
	wash-color: #69312c;
}

#SeasonPassRewardPreview.TooltipContainer
{
    pre-transform-scale2d: .3;

    transition-property: opacity, pre-transform-scale2d;
    transition-timing-function: ease-in-out;
	//transition-delay: .3s;


    animation-duration: 0.61s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

@keyframes 'BubbleUp'
{
    0%
    {
        pre-transform-scale2d: .2;
        opacity: 0;
    }

    50%
    {
        pre-transform-scale2d: 1.1;
        opacity: 1;
    }

    100%
    {
        pre-transform-scale2d: 1;
        opacity: 1;
    }
}

#SeasonPassRewardPreview.TooltipContainer.TooltipVisible
{
    animation-name: BubbleUp;
    transition-delay: 0.0s;
    pre-transform-scale2d: 1;
    transition-duration: 0.175s, 0.12s;
    animation-delay: 0.0s;
}

/* Context menu properties moved from context_menu_base.css */

DOTAContextMenuPlayer #RightArrow
{
    background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_right_png.vtex");
	wash-color: #495757;

	width: 16px;
	height: 32px;

	margin-left: -1px;
}

DOTAContextMenuPlayer #TopArrow
{
	background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_top_png.vtex");
	wash-color: #495757;

	width: 32px;
	height: 16px;

	margin-bottom: -1px;
}

DOTAContextMenuPlayer #LeftArrow
{
	background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_left_png.vtex");
	wash-color: #495757;

	width: 16px;
	height: 32px;

	margin-right: -1px;
}

DOTAContextMenuPlayer #BottomArrow
{
	background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_bottom_png.vtex");
	wash-color: #495757;

	width: 32px;
	height: 16px;

	margin-top: -1px;
}

DOTATooltipDroppedItem
{
	tooltip-position: top;
	tooltip-body-position: 50% 50%;
}

DOTATooltipRune
{
	tooltip-position: bottom;
}

/* Custom styling for customize profile card arrow */
.ContextMenuGrayArrow #RightArrow, .ContextMenuGrayArrow #LeftArrow
{
	width: 16px;
	height: 32px;
}
.ContextMenuGrayArrow #TopArrow, .ContextMenuGrayArrow #BottomArrow
{
	width: 32px;
	height: 16px;
}

.ContextMenuGrayArrow #RightArrow, .ContextMenuGrayArrow #LeftArrow, .ContextMenuGrayArrow #TopArrow, .ContextMenuGrayArrow #BottomArrow
{
	wash-color: #495757;
}

.ContextMenuGrayArrow #RightArrow
{
	background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_right_png.vtex");
	margin-left: 0px;
}
.ContextMenuGrayArrow #TopArrow
{
	background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_top_png.vtex");
	margin-bottom: 0px;
}
.ContextMenuGrayArrow #LeftArrow
{
	background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_left_png.vtex");
	margin-right: 0px;
}
.ContextMenuGrayArrow #BottomArrow
{
	background-image: url("s2r://panorama/images/tooltips/profilecard_tooltip_arrow_bottom_png.vtex");
	margin-top: 0px;
}

.ContextMenuBlackArrow #RightArrow
{
	background-image: url("s2r://panorama/images/tooltips/black_tooltip_arrow_right_png.vtex");
	height: 27px;
	width: 14px;
	margin-left: -1px;
}
.ContextMenuBlackArrow #TopArrow
{
	background-image: url("s2r://panorama/images/tooltips/black_tooltip_arrow_top_png.vtex");
	height: 14px;
	width: 27px;
	margin-bottom: -1px;
}
.ContextMenuBlackArrow #LeftArrow
{
	background-image: url("s2r://panorama/images/tooltips/black_tooltip_arrow_left_png.vtex");
	height: 27px;
	width: 14px;
	margin-bottom: -1px;
}
.ContextMenuBlackArrow #BottomArrow
{
	background-image: url("s2r://panorama/images/tooltips/black_tooltip_arrow_bottom_png.vtex");
	height: 14px;
	width: 27px;
	margin-top: -1px;
}


/* TournamentMatchDetails custom styling */
TournamentMatchDetails #Contents
{
	padding: 0px;
	border: 0px;
	border-top: 1px solid #384041;
	border-bottom: 1px solid #1e2424;
	background-color: #2a3334;
}

/* CenterBuffer for Alignment transitions*/

.CenterBuffer
{
	width: fill-parent-flow( 1.0 );
	//background-color: #ff000022;
	height: 100%;
	transition-property: width;
	transition-timing-function: ease-in-out;
	transition-duration: 0.5s;
}


/* -- NumberEntry ---------------------------------------------------------- */

NumberEntry
{
	flow-children: right;
	width: 100px;
	height: 36px;
}

NumberEntry #TextEntry
{
	width: fill-parent-flow( 1.0 );
	height: 100%;
}

NumberEntry .ChangeValueButtons
{
	flow-children: down;
	margin-left: 2px;
}

NumberEntry .ChangeValueButton
{
	width: 17px;
	height: 17px;

	border: 1px solid baseBorder;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #111111FF ), to( #222222FF ) );
}

NumberEntry .ChangeValueButton Label
{
	text-align: center;
	vertical-align: middle;
	horizontal-align: center;
	margin-top: -4px;
}

NumberEntry .ChangeValueButton:disabled
{
	brightness: 0.5;
}

NumberEntry .ChangeValueButton:hover:enabled
{
	brightness: 2.0;
}

NumberEntry .ChangeValueButton:active
{
	brightness: 1.5;
}

NumberEntry #IncrementButton
{
	margin-bottom: 2px;
}

/*
DOTAScenePanel
{
	opacity: 0;
	transition-property: opacity, pre-transform-scale2d, transform, wash-color;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}

DOTAScenePanel.SceneLoaded
{
	opacity: 1;
}
*/

DOTAVRPopupManager
{
	width: 100%;
	height: 100%;
}

/* Used for static images */
.BattleCupVictoryIcon
{
	background-image: url("s2r://panorama/images/icon_trophy_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;
	width: 18px;
	height: 18px;
}

.BattleCupVictoryIcon.IsChampionsCup
{
	background-image: url("s2r://panorama/images/icon_trophy_champions_cup_psd.vtex");
}

DOTABattleCupVictoryIcon.Kludge
{
	/* Set through code.  Force a reference so this image will get compiled.*/
	background-image: url("s2r://panorama/images/icon_trophy_champions_cup_animation_png.vtex");
}

/* Used to show dynamic state of a particular user */
DOTABattleCupVictoryIcon
{
	background-image: url("s2r://panorama/images/icon_trophy_psd.vtex");
	background-repeat: repeat-x;
	background-size: 18px 18px;
	width: 18px;
	height: 18px;
	visibility: collapse;
}


DOTABattleCupVictoryIcon.BattleCupVictoryIsChampionsCup
{
	/* We'll add a sub-panel with the animation strip */
	background-image: none;
}
DOTABattleCupVictoryIcon #ChampionsCup
{
    width: 100%;
    height: 100%;
}

DOTABattleCupVictoryIcon.BattleCupVictoryIconLarge
{
	width: 28px;
	height: 28px;
	background-size: 28px 28px;
}

DOTABattleCupVictoryIcon.BattleCupVictoryVisible
{
	visibility: visible;
}

DOTABattleCupVictoryIcon.BattleCupStreak2
{
	width: 36px;
}

DOTABattleCupVictoryIcon.BattleCupStreak3
{
	width: 54px;
}

DOTABattleCupVictoryIcon.BattleCupStreak4
{
	width: 72px;
}

DOTABattleCupVictoryIcon.BattleCupStreak5
{
	width: 90px;
}

DOTABattleCupVictoryIcon.BattleCupVictoryIconLarge.BattleCupStreak2
{
	width: 56px;
}

DOTABattleCupVictoryIcon.BattleCupVictoryIconLarge.BattleCupStreak3
{
	width: 84px;
}

DOTABattleCupVictoryIcon.BattleCupVictoryIconLarge.BattleCupStreak4
{
	width: 112px;
}

DOTABattleCupVictoryIcon.BattleCupVictoryIconLarge.BattleCupStreak5
{
	width: 140px;
}


DOTAItemImage
{
	background-image: url("s2r://panorama/images/items/emptyitembg_png.vtex");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}


#dragImage
{
	box-shadow: fill #000000cc 4px 4px 8px 8px;
	border-radius: 4px;
	border: 1px solid #343434;
	transform: translateX(6px) translateY(6px);
}

@keyframes 'StunPortrait'
{
	0%
	{
		transform: translateX(-24px);

	}

	10%
	{
		transform: translateX(24px);

	}

	20%
	{
		transform: translateX(-18px);

	}

	30%
	{
		transform: translateX(18px);

	}

	40%
	{
		transform: translateX(-12px);

	}
	50%
	{
		transform: translateX(12px);

	}
	60%
	{
		transform: translateX(-6px);

	}
	70%
	{
		transform: translateX(6px);

	}
	80%
	{
		transform: translateX(-4px);

	}
	90%
	{
		transform: translateX(4px);

	}
	100%
	{
		transform: translateX(0px);

	}
}



@keyframes 'StunPortraitReverse'
{
	0%
	{
		transform: translateX(24px);

	}

	10%
	{
		transform: translateX(-24px);

	}

	20%
	{
		transform: translateX(18px);

	}

	30%
	{
		transform: translateX(-18px);

	}

	40%
	{
		transform: translateX(12px);

	}
	50%
	{
		transform: translateX(-12px);

	}
	60%
	{
		transform: translateX(6px);

	}
	70%
	{
		transform: translateX(-6px);

	}
	80%
	{
		transform: translateX(4px);

	}
	90%
	{
		transform: translateX(-4px);

	}
	100%
	{
		transform: translateX(0px);

	}
}


.StatBranch
{
	background-image: url("s2r://panorama/images/spellicons/statbranch_psd.vtex");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.GradientTopBottom
{
	width: 100%;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #000000aa ), color-stop( .10, #00000000), color-stop( .90, #00000000), to( #00000088 ) );
}

#CourierContextMenu #LeftArrow, #CourierContextMenu #RightArrow,
{
    wash-color: black;
}