                                 
                                                                
                                                                                            

@define steamOnlineColor: #80a438;
@define blueColor: #3281AC;
@define blueColorDark: #0D354A;
@define disabledColor: rgba(90, 90, 90, 1);
@define negativeColor: #c21b1b;
@define warningColor: #b1af2d;
@define positiveColor: #4caf50;
@define opAccentColor: rgb(129, 41, 211);
@define contentPanelBackground: rgba(20, 20, 20, 0.4);
@define blurBackgroundColor: rgba(40, 40, 40, 0.3);
@define tileBlurBackgroundColor: rgba(0, 0, 0, 0.5);
@define itemBackgroundGradient: gradient( linear, 0% 0%, 0% 100%, from( #1e2a38dd ), to( #19232fdd ) );
@define contextMenuBackground : rgba(44, 44, 44, 0.98);

@define btnBorderRadius: 2px;
@define backgroundGradient: gradient( linear, 75% 100%, 0% 0%, from( #14202b ), to( #1e2d3d ) );
@define textBlueGradient: gradient( linear, 0% 100%, 0% 0%, from( blueColor  ), to( blueColorDark ) );

@define baseText: #ccccccff;
@define baseBorder: #444444ff;
@define selectedTextBackgroundColor: #0D354Abb;

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

                                               
@define ContextMenuFadoutTime: 0.2s; 

              
@define contextmenu_zindex: 10000100;
@define submenu_zindex: 10000100;

@define mousepanningcursorsize: 99px;

@define monospaceFont: notomono-regular;
@define stratum2Font: Stratum2, "Arial Unicode MS";
@define stratum2monoFont: Stratum2 Regular Monodigit, "Arial Unicode MS";
@define stratum2monoFontBold: Stratum2 Bold Monodigit, "Arial Unicode MS";

@define shadowOffset: fill #000000aa 0px 0px 8px 4px;

                
@define subMenuFadoutTime: 0.25s; 

                   
@define color-CT: #B5D4EE;
@define color-T: #EAD18A;

@define color-icon-bomb: #ffb136;
@define color-icon-hostage-alive:    yellow;
@define color-icon-hostage-transit:  lightgreen;
@define color-icon-hostage-rescued:  green;
@define color-icon-hostage-dead:     red;

                                  
@define color-rarity-default: #6a6156;
@define color-rarity-common: #b0c3d9;
@define color-rarity-uncommon: #5e98d9;
@define color-rarity-rare: #4b69ff;
@define color-rarity-mythical: #8847ff;
@define color-rarity-legendary: #d32ce6;
@define color-rarity-ancient: #eb4b4b;
@define color-rarity-immortal: #e4ae39;
@define color-rarity-strange: #CF6A32;
@define color-rarity-unusual: #ffd700;

                                          
@define color-rarity-0: color-rarity-default;                        
@define color-rarity-1: color-rarity-common;                                     
@define color-rarity-2: color-rarity-uncommon;                                       
@define color-rarity-3: color-rarity-rare;                                       
@define color-rarity-4: color-rarity-mythical;                               
@define color-rarity-5: color-rarity-legendary;                          
@define color-rarity-6: color-rarity-ancient;                               
@define color-rarity-7: color-rarity-immortal;                  
@define color-rarity-99: color-rarity-unusual;         

                               
@define color-hud-0: #e8e8e8;                                                          
@define color-hud-1: #ffffff;                   
@define color-hud-2: #96c8ff;                 
@define color-hud-3: #356eff;           
@define color-hud-4: #c864ff;             
@define color-hud-5: #ff2924;          
@define color-hud-6: #ff7124;             
@define color-hud-7: #fff724;             
@define color-hud-8: #3eff24;            
@define color-hud-9: #24ff90;           
@define color-hud-10: #ff7999;           
@define color-hud-11: #d5e286;                                        

@define color-player-yellow: rgb(248, 246, 45);
@define color-player-purple: rgb(161, 25, 240 );
@define color-player-green: rgb(0, 181, 98);
@define color-player-blue: rgb( 92, 168, 255);
@define color-player-orange: rgb(255, 155, 37);

             
@define curve__ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
@define curve__ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);


                                                                               
                                                                               
                                                                               

                   
Label, TextEntry
{
	font-family: notosans, 'Arial Unicode MS';
	text-overflow: clip;

}

                                                                                     
Label.MonoNumbersFont, TextEntry.MonoNumbersFont
{
	font-family: Stratum2 Regular Monodigit, 'Arial Unicode MS';
}

.stratum-font
{
	font-family: Stratum2, 'Arial Unicode MS';
}

.mono-spaced-font
{
	font-family: Stratum2 Regular Monodigit, 'Arial Unicode MS';
}
.mono-spaced-font-bold
{
	font-family: Stratum2 Bold Monodigit, 'Arial Unicode MS';
}


                                                                               
                                                                               
                                                                               
.fontSize-xxxl
{
	font-size: 64px; 
}
.fontSize-xxl
{
	font-size: 40px; 
}
.fontSize-xl
{
	font-size: 32px; 
}
.fontSize-l
{
	font-size: 24px; 
}
.fontSize-ml
{
	font-size: 20px; 
}
.fontSize-m
{
	font-size: 18px; 
}
.fontSize-sm
{
	font-size: 16px; 
}
.fontSize-s
{
	font-size: 12px; 
}
.fontSize-xs
{
	font-size: 8px; 
}

.fontWeight-Bold
{
	font-weight: bold;
}

.fontWeight-Medium
{
	font-weight: medium;
}

.fontWeight-Light
{
	font-weight: lighter;
}

.fontcolor-white
{
	color:white;
}

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

.text-align-right
{
	text-align: right;
}

.text-align-left
{
	text-align: left;
}

.text-uppercase
{
	text-transform: uppercase;
}

.text-letterspace-2px
{
	letter-spacing: 2px;
}




                                                                               
                                     				                           
                                                                               
.positiveColor
{
	wash-color: positiveColor;
}

.operationColor
{
	wash-color: opAccentColor;
}

.negativeColor
{
	wash-color: negativeColor;
}

.blueColor
{
	wash-color: blueColor;
}

.warningColor
{
	wash-color: warningColor;	
}

.clearWashColor
{
	wash-color: none;	
}

                                                                               
                                                                               
                                                                               
                                                                               
                                                                               
                                                                               
                                                                               
                                                                               

.csgo-hud--cl-hud-color-0  .cl-hud-color { color: color-hud-0; }
.csgo-hud--cl-hud-color-1  .cl-hud-color { color: color-hud-1; }
.csgo-hud--cl-hud-color-2  .cl-hud-color { color: color-hud-2; }
.csgo-hud--cl-hud-color-3  .cl-hud-color { color: color-hud-3; }
.csgo-hud--cl-hud-color-4  .cl-hud-color { color: color-hud-4; }
.csgo-hud--cl-hud-color-5  .cl-hud-color { color: color-hud-5; }
.csgo-hud--cl-hud-color-6  .cl-hud-color { color: color-hud-6; }
.csgo-hud--cl-hud-color-7  .cl-hud-color { color: color-hud-7; }
.csgo-hud--cl-hud-color-8  .cl-hud-color { color: color-hud-8; }
.csgo-hud--cl-hud-color-9  .cl-hud-color { color: color-hud-9; }
.csgo-hud--cl-hud-color-10 .cl-hud-color { color: color-hud-10; }
.csgo-hud--cl-hud-color-11 .cl-hud-color { color: color-hud-11; }

.csgo-hud--cl-hud-color-0  .cl-hud-background-color { background-color: color-hud-0; }
.csgo-hud--cl-hud-color-1  .cl-hud-background-color { background-color: color-hud-1; }
.csgo-hud--cl-hud-color-2  .cl-hud-background-color { background-color: color-hud-2; }
.csgo-hud--cl-hud-color-3  .cl-hud-background-color { background-color: color-hud-3; }
.csgo-hud--cl-hud-color-4  .cl-hud-background-color { background-color: color-hud-4; }
.csgo-hud--cl-hud-color-5  .cl-hud-background-color { background-color: color-hud-5; }
.csgo-hud--cl-hud-color-6  .cl-hud-background-color { background-color: color-hud-6; }
.csgo-hud--cl-hud-color-7  .cl-hud-background-color { background-color: color-hud-7; }
.csgo-hud--cl-hud-color-8  .cl-hud-background-color { background-color: color-hud-8; }
.csgo-hud--cl-hud-color-9  .cl-hud-background-color { background-color: color-hud-9; }
.csgo-hud--cl-hud-color-10 .cl-hud-background-color { background-color: color-hud-10; }
.csgo-hud--cl-hud-color-11 .cl-hud-background-color { background-color: color-hud-11; }

.csgo-hud--cl-hud-color-0  .cl-hud-wash-color { wash-color-fast: color-hud-0; }
.csgo-hud--cl-hud-color-1  .cl-hud-wash-color { wash-color-fast: color-hud-1; }
.csgo-hud--cl-hud-color-2  .cl-hud-wash-color { wash-color-fast: color-hud-2; }
.csgo-hud--cl-hud-color-3  .cl-hud-wash-color { wash-color-fast: color-hud-3; }
.csgo-hud--cl-hud-color-4  .cl-hud-wash-color { wash-color-fast: color-hud-4; }
.csgo-hud--cl-hud-color-5  .cl-hud-wash-color { wash-color-fast: color-hud-5; }
.csgo-hud--cl-hud-color-6  .cl-hud-wash-color { wash-color-fast: color-hud-6; }
.csgo-hud--cl-hud-color-7  .cl-hud-wash-color { wash-color-fast: color-hud-7; }
.csgo-hud--cl-hud-color-8  .cl-hud-wash-color { wash-color-fast: color-hud-8; }
.csgo-hud--cl-hud-color-9  .cl-hud-wash-color { wash-color-fast: color-hud-9; }
.csgo-hud--cl-hud-color-10 .cl-hud-wash-color { wash-color-fast: color-hud-10; }
.csgo-hud--cl-hud-color-11 .cl-hud-wash-color { wash-color-fast: color-hud-11; }

.csgo-hud--cl_hud_background_alpha
{
	opacity: .5;
}

                                                                               
                                      				                           
                                                                               
Label
{
	color: baseText;
	font-size: 18px;
	font-weight: lighter;
	vertical-align: middle;
	letter-spacing: 1px;
}

                  
Label.Positive
{
	color: #558927;
}

Label.Blue
{
	color: #3281ac;
}

Label.Disabled
{
	color: #666666;
}

Label.Negative
{
	color: #c21b1b;
}

Label.Warning
{
	color: #b1af2d;
}

                                                                               
                                                                               
                                                                               
a
{
	                
}

a:hover
{
	text-decoration: underline;
}

b
{
	font-weight: bold;
}

i
{
	font-style: italics;
}

strong
{
	font-weight: bold;
}

em
{
	font-style: italics;
}

pre
{
	font-family: monospaceFont;
}

                        
.player-card-tooltip-icon
{
	width: 16px;
	height: 16px;
}


                                                                               
                                                                               
                                                                               
CSGOAvatarImage 
{
	vertical-align: middle;
	width: 64px;
	height: 64px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( blueColor ), to( blueColorDark) );
}

CSGOAvatarImage .AvatarImage
{
	width: 100%;
	height: 100%;
}

                                                                               
                                                                               
                                                                               

DropDown,
CSGOSettingsEnumDropDown
{
	background-image: url("file://{images}/icons/ui/expand.svg");
	background-repeat: no-repeat;
	background-position: right 32px 50%;
	background-size: 16px 16px;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 1, #00000000 ), to( #00000010 ) );
	margin: 8px;
	
	vertical-align: center;
	horizontal-align: right;
	height: 36px;
	min-width: 32px;
	z-index: 1;
	transition-property: brightness;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

DropDown:hover,
CSGOSettingsEnumDropDown:hover
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 0, #00000050 ), to( #00000050 ) );
	transition-property: brightness;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

DropDown:focus,
CSGOSettingsEnumDropDown:focus
{
	box-shadow: none;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 0, #00000030 ), to( #00000030 ) );
}

                          
   
	             
   

DropDown.NoBackground,
CSGOSettingsEnumDropDown.NoBackground
{
	                              
}

DropDown:enabled:hover, 
CSGOSettingsEnumDropDown:enabled:hover
{
	transition-property: brightness;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

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

DropDown:focus,
CSGOSettingsEnumDropDown:focus
{
	transition-property: brightness;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

DropDown:disabled,
CSGOSettingsEnumDropDown:disabled
{
	background-image: none;
}

DropDown:disabled Label,
CSGOSettingsEnumDropDown:disabled Label
{
	                       
}

DropDown.DropDownMenuVisible:hover, 
CSGOSettingsEnumDropDown.DropDownMenuVisible:hover
{
	                                                                                                                      
}

DropDown.DropDownMenuVisible:focus, 
CSGOSettingsEnumDropDown.DropDownMenuVisible:focus
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 0, #00000050 ), to( #00000050 ) );
}

DropDown Label,
CSGOSettingsEnumDropDown Label
{
	padding: 8px 12px;
	margin-right: 32px;
	vertical-align: center;
	
	font-size: 16px; 
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
		
	transition-property: color;
	transition-duration: 0.15s;
	transition-timing-function: linear;
}

DropDown:enabled:hover Label,
CSGOSettingsEnumDropDown:enabled:hover Label
{
	color:White;
	transition-property: color;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}


DropDown:focus Label,
CSGOSettingsEnumDropDown:focus Label
{
	color: #3E3E3E;
}

DropDown.DropDownMenuVisible:focus Label,
CSGOSettingsEnumDropDown.DropDownMenuVisible:focus Label
{
}

DropDownMenu
{ 
	width: fit-children;
	transform: translateY(-40px);
	flow-children: down;
	overflow: squish scroll;
	max-height:665px;
	padding: 16px 0px;

	background-color: contextMenuBackground;
	opacity: 0.0;
	z-index: 0;

	                                                                                                      
	                                                                                                   
	visibility: collapse;

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

DropDownMenu Label
{
	width: fit-children;
	padding: 10px 24px;

	font-size: 16px;
	font-weight: lighter;

	z-index: 0;
	opacity: 1;
}

DropDownMenu Label:hover
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000080 ), to( #00000000 ) );
	sound: "UIPanorama.submenu_rollover";
}

DropDownMenu.DropDownMenuVisible
{
	opacity: 1.0;
	visibility: visible;
	box-shadow: shadowOffset;
	border-radius: btnBorderRadius;

	max-height: 444px;
	transition-property: box-shadow;
	transform: translateY(0px);
	sound: "UIPanorama.submenu_dropdown_select";
}

DropDown .Width-250,
DropDownMenu .Width-250,
DropDownMenu.Width-250 Label
{
	min-width: 250px;
}

DropDown .Width-300,
DropDownMenu .Width-300,
DropDownMenu.Width-300 Label
{
	min-width: 300px;
}

DropDown .Width-350,
DropDownMenu .Width-350,
DropDownMenu.Width-350 Label
{
	min-width: 350px;
}

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

DropDownMenu .InlineImage
{
	vertical-align: middle;
}
CSGOSettingsEnumDropDown .InlineImage
{
	width: 32px;
	height: 32px;
}
.op-mainmenu__missions DropDown:focus,
.op-mainmenu__missions DropDown.DropDownMenuVisible:focus,
.op-mainmenu__missions CSGOSettingsEnumDropDown.DropDownMenuVisible:focus
{
	background-color: rgba(0, 0, 0, 0.2);
}

.op_mainmenu__dropdown:hover,
.op-mainmenu__missions DropDown:hover,
.op-mainmenu__missions DropDown:hover:focus
{
	horizontal-align: left;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.15);

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

                                                                               
               																   
                                                                               

VerticalScrollBar, HTMLVerticalScrollBar
{
	width: 8px;
	margin: 4px, 8px, 4px 8px;
	height: 100%;
	opacity:.4;
	horizontal-align: right;
	vertical-align: center;
	transition-property: transform, opacity;
	-s2-mix-blend-mode: screen;
}

VerticalScrollBar:hover, HTMLVerticalScrollBar:hover
{
	opacity:.6;
}

VerticalScrollBar .ScrollThumb, HTMLVerticalScrollBar .ScrollThumb
{
	width: 8px;
	min-height: 32px;                                                                      
	opacity:.4;
	background-color: white;
	transition-property: position;
	border-radius: 2px;
	transition-property: opacity, transform;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

VerticalScrollBar:hover .ScrollThumb, HTMLVerticalScrollBar:hover .ScrollThumb
{
    opacity:.6;
	                              
}

VerticalScrollBar:active .ScrollThumb, HTMLVerticalScrollBar:active .ScrollThumb
{
	opacity:.6;
	                              
}

HorizontalScrollBar, HTMLHorizontalScrollBar
{
	height: 8px;
	width: 100%;
	opacity:.4;
	horizontal-align: left;
	vertical-align: bottom;
	transition-property: transform, opacity;

	-s2-mix-blend-mode: screen;
}

HorizontalScrollBar:hover, HTMLHorizontalScrollBar:hover
{
	opacity:.6;
}

HorizontalScrollBar .ScrollThumb, HTMLHorizontalScrollBar .ScrollThumb
{
	height: 8px;
	min-width: 32px;
	background-color: white;
	opacity:.4;
	transition-property: position;
	border-radius: 2px;
	transition-property: background-color, transform;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

HorizontalScrollBar:hover .ScrollThumb, HTMLHorizontalScrollBar:hover .ScrollThumb
{
	opacity:.6;
}

HorizontalScrollBar:active .ScrollThumb, HTMLHorizontalScrollBar:active .ScrollThumb
{
	opacity:.6;
}

VerticalScrollBar, 
VerticalScrollBar .ScrollThumb, 
HorizontalScrollBar, 
HorizontalScrollBar .ScrollThumb
HTMLHorizontalScrollBar, 
HTMLHorizontalScrollBar .ScrollThumb, 
HTMLVerticalScrollBar,
HTMLVerticalScrollBar .ScrollThumb, 
{
	                                                                                    
	                                                                                                   
	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, 
{
	                                                                                                   
	                                                                                          
	transition-duration: 0.0s;
}

                                                                               
                                                                               
                                                                               
.ContextMenu
{
	width: 100%;
	height: 100%;
	opacity: 1.0;
	transform: scaleX( 1);
	z-index: contextmenu_zindex;
	visibility: visible;

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

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

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

                                                                               
                                                                              
                                                                              
                                                                               
SimpleContextMenu .ContextMenuBody
{
	padding: 8px 0px;
	flow-children: down;
	width:fit-children;
	background-color: contextMenuBackground;
    opacity: 1;
	box-shadow: shadowOffset;
	border-radius: btnBorderRadius;
}

SimpleContextMenu.Wider .ContextMenuBody
{
	                      
}

SimpleContextMenu .ContextMenuBody Button,
.ContextMenuItem Button
{
	horizontal-align: left;
	max-width: 340px;

	padding: 16px 32px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), to( #00000000 ) );
}

SimpleContextMenu .ContextMenuBody Button.TopSeparator,
.ContextMenuItem Button.TopSeparator
{
	border-top: 1px solid rgb(68, 68, 68);
}

SimpleContextMenu .ContextMenuBody Button.BottomSeparator,
.ContextMenuItem Button.BottomSeparator
{
	border-bottom: 1px solid rgb(68, 68, 68);
}

SimpleContextMenu .ContextMenuBody Button.NoAction,
.ContextMenuItem Button.NoAction
{
	brightness: .25;
}

SimpleContextMenu .ContextMenuBody Label,
.ContextMenuItem Label
{
	horizontal-align: left;
	vertical-align: center;
	font-weight: medium;
	font-size: 16px;
	min-width: 200px;
	width:fill-parent-flow( 1.0 );
	max-height: 24px;

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


SimpleContextMenu .ContextMenuBody Image,
.ContextMenuItem Image
{
	height: 28px;
	width: height-percentage( 100% );
	vertical-align: center;
	margin: 0px 6px 0px 4px;

	brightness:.7;
}

SimpleContextMenu .ContextMenuBody .Icon Image,
.ContextMenuItem .Icon Image
{
	height: 18px;
	vertical-align: bottom;
	margin-right: 12px;
}

SimpleContextMenu .ContextMenuBody Button:not(.NoAction):enabled:hover,
.ContextMenuItem Button:not(.NoAction):enabled:hover
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000080 ), to( #00000000 ) );
	sound: "UIPanorama.submenu_rollover";
}

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

ContextMenuCustomLayout .ContextMenuBody,
.ContextMenuItem
{
	padding: 8px 0px;
	flow-children: down;
	background-color: gradient( linear, 0% 0%, 0% 120%, from( #CFDAE0 ), to( #88959A ));
	border-radius: 2px;
    opacity: 1;
	box-shadow: #000000BB -4px -4px 8px 8px;
	height: fit-children;
		width: fit-children;
}

.contextmenu-label-with-image
{
	margin-left: 16px;
}

                                                                               
                                              				                   
                                                                               
ToggleButton
{
	                       
	                   

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

ToggleButton .TickBox
{
	width: 18px;
	height: 18px;
	position: 0px 0px 0px;
	vertical-align: center;
	background-color: #1e2d3d;
	border-radius: 20%;
	z-index: 1;

	box-shadow: #00000055 -2px -2px 2px 4px;
	
	transition-property: background-color, box-shadow, color, border, position;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
	
}

ToggleButton:selected .TickBox
{
	position: 16px 0px 0px;
	height: 18px;
	background-color: blueColor;
	box-shadow: #000000FF 0px 0px 3px 0px;

	transition-property: position, background-color;
	transition-duration: 0.2s;
	transition-timing-function: linear;

}



                                                                  
ToggleButton .Capsule
{
	vertical-align: center;
	border-radius: 10%;
	height: 14px;
	width: 32px;
	box-shadow: inset #000000FF 0px 0px 2px 0px;
	background-color: #14202b;
	z-index: 0;

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

ToggleButton:selected .Capsule
{
	background-color: #3281ac40;

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

ToggleButton:hover .TickBox
{
	                                                                                         
}

ToggleButton Label,
{
	position: 42px 0px 0px;
	font-size: 16px;
	color: white;
	font-weight: lighter;
	vertical-align: center;

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

ToggleButton:enabled:hover Label
{
	                    
}

ToggleButton:selected Label
{
	                    
}

ToggleButton:disabled Label
{
	color: white;
}

ToggleButton:disabled
{
	wash-color:disabledColor;
}

ToggleButton:disabled .TickBox
{

	                                 
}

ToggleButton:disabled:selected .TickBox
{
	background-color: #14202b;
}


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

.ExpandCollapseToggleButton .TickBox
{
	margin: 0px;
	padding: 0px;
    width: 19px;
    height: 19px;
    vertical-align: middle;
    background-image: url( "file://{images}/control_icons/expand_collapse.vtf" );
    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( "file://{images}/control_icons/expand_collapse.vtf" );
    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;
}


                                                                               
                                      				                           
                                                                               
RadioButton
{
	background-color: none;
	flow-children: right;
	                     
	color: white;

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

.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:hover .RadioBox
{
	border: 2px solid white;
}

RadioButton:selected:hover .RadioBox
{
	border: 3px solid black;
}

RadioButton Label,
RadioButton:disabled Label
{
	color: White;
	margin-left: 8px;
	font-size: 16px;

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

RadioButton:selected Label
{
	color: white;

	transition-property: color;
	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 ) );
}


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

                                                                               
                                                                               
                                                                               
.SimpleBevel
{
	border-top: 1px solid #99999905;
	border-left: 1px solid #99999905;
	border-right: 1px solid #00000060;
	border-bottom: 1px solid #00000060;
}


                                                                               
                                                                               
                                                                               
                                                                               

              
.SettingsMenuDropdownContainer
{
	             
	flow-children: right;
	vertical-align: middle;
	width: 100%;
}


.SettingsMenuDropdownContainer:hover,
CSGOSettingsEnumDropDown:hover Label
{
	                            
}

.SettingsMenuDropdownContainer Label
{
	wash-color: #ffffff70;
}

.SettingsMenuDropdownContainer:hover Label
{
	color: #ffffff;
}

            
CSGOSettingsSlider
{
    flow-children: right;
	width: 100%;
	vertical-align: center;
}

CSGOSettingsSlider #Title
{
    width: fill-parent-flow(1.0);
}

CSGOSettingsSlider #Slider
{
    width: 25.5%;
	margin-right: 10px;
}

CSGOSettingsSlider #Value
{
	width: 36px;
	text-align: right;
	font-size: 15px;
	color: baseText;
	margin-left: 10px;
}

              
CSGOSettingsKeyBinder:selected .ActiveBindButton
{
    background-color: baseText;
	animation-name: BackgroundPulse;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

CSGOSettingsKeyBinder:selected .ActiveBindFX
{
    opacity: 1;
	transition-duration: 0.1s;
}

CSGOSettingsKeyBinder #LabelFXContainer
{
	background-color: #00000020;
	width: fill-parent-flow( 0.3 );
	height: 100%;
	horizontal-align: right;
	                                                    
	                           
	                                          
	border-radius: 2px;
}

CSGOSettingsKeyBinder .BindingRow #Value.BindingRowButton
{
	color:#ffffff70; 
	font-weight: bold;
}

CSGOSettingsKeyBinder .BindingRow:hover #Value.BindingRowButton
{
	color:#ffffff; 
}

CSGOSettingsKeyBinder .BindingRow:hover #LabelFXContainer
{
	background-color: #00000050;
}

                                              

CSGOSettingsKeyBinder .BindingRow:hover .BindingRowLabel
{
	                     
	                                    
	                    
}

CSGOSettingsKeyBinder .BindingRow:selected #LabelFXContainer
{
	                            
	                                          
}

CSGOSettingsKeyBinder .ActiveBindFX
{
	width: 100%;
	height: 100%;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.36s;
	transition-timing-function: ease-in-out;
}

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

	50%
	{
		background-color: #ccffcc;
	}
				
	
	100%
	{
		background-color: #ffffff;
	}
}

.ControlGroupRow .BindingRowLabel
{
	width: 50%;
}
.ControlGroupRow #LabelFXContainer
{
	width: 47%;
}

  
                                      
 
	                
	               
	                       
	            
	                 
	                  
	                    
	                  
 
  

                                                                               
                                                                               
                                                                               

.PopupButton,
CSGOSettingsEnumDropDown
{
	margin: 4px;
	height: fit-children;
	width: fit-children;
	horizontal-align: right;
	vertical-align: middle;
	brightness: 1;
	flow-children: right;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 1, #00000000 ), to( #00000010 ) );
	tooltip-position: bottom;
	box-shadow: none;
	border-radius: btnBorderRadius;

	transition-property: background-color, width, brightness;
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}

CSGOSettingsEnumDropDown.PopupButton
{
	horizontal-align: right;
}

.PopupButton:not(.no-hover):hover,
.IconButton:not(.no-hover):hover,
.PopupButton.DropDownMenuVisible,
.PopupButton.DropDownMenuVisible:hover,
.PopupButton:enabled:not(.no-hover):hover,
.IconButton:enabled:not(.no-hover):hover,
.PopupButtonDropdown Label:not(.no-hover):hover,
CSGOSettingsEnumDropDown.PopupButton:not(.no-hover):hover
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 0, #00000070 ), to( #00000070 ) );
	box-shadow: none;
	transition-property: background-color;
	transition-duration: 0s;
	transition-timing-function: ease-in-out;
}

.PopupButton:not(.no-hover):hover
{
	sound: "generic_button_rollover";
}

.PopupButton:enabled:focus,
.IconButton:enabled:focus,
.PopupButton.DropDownMenuVisible:focus
CSGOSettingsEnumDropDown.PopupButton:focus
{
	box-shadow: none;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 0, #00000030 ), to( #00000030 ) );
}

.PopupButton Label,
.PopupButton:Selected Label,
DropDown.PopupButton:focus Label,
CSGOSettingsEnumDropDown.PopupButton Label
{
	color: White;
	horizontal-align: left;
	vertical-align: middle;
	text-align: left;
	text-transform: uppercase;
	font-weight: medium;
	font-size: 20px;
	margin: 16px 12px 12px;
	font-family: stratum2Font;
    text-overflow: shrink;
}

.PopupButton Image,
CSGOSettingsEnumDropDown Image,
CSGOSettingsEnumDropDown.PopupButton Image
{
	margin-left: 8px;
	vertical-align: middle;
}

.PopupButton.HasExpandIcon Image
{
	wash-color: White;
	vertical-align: middle;
	margin-left: 8px;
	margin-right: 8px;
}

.PopupButton:disabled:hover
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 1, #00000000 ), to( #00000000 ) );
}

.PopupButton:active
{
	sound: "UIPanorama.generic_button_press";
}


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

.PopupButton.Positive,
.IconButton.Positive
{
	background-color: positiveColor;
}

.IconButton.Positive Image
{
	margin:12px;
}

.PopupButton.Positive:hover,
.IconButton.Positive:hover,
.FlatButton.Positive:hover
{
	background-color: positiveColor;
	brightness: 1.4;

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

.PopupButton.Operation
{
	background-color: opAccentColor;
	height: fit-children;
}

.PopupButton.Operation:active
{
	sound: "UIPanorama.generic_button_press";
}


.PopupButton.Operation:hover
{
	background-color: opAccentColor;
	brightness: 1.4;

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

.IconButton.Operation
{
	background-color: none;
}

.IconButton.Operation:hover
{
	brightness: 1.4;
	background-color: none;
	transition-property: brightness;
	transition-duration: 0s;
	transition-timing-function: ease-in-out;
}

.PopupButton.Warning
{
	background-color: warningColor;
}

.PopupButton.Negative
{
	background-color: negativeColor;
}

.PopupButton .TickBox,
.map-selection-btn .TickBox,
.setting-toggle .TickBox
{
	                                                                     
	                                                                        
	
	width: 24px;
	height: 24px;
	position: 0px 0px 0px;
	vertical-align: center;
	background-color: None;
	border-radius: 2px;
	z-index: 1;
	margin-left: 8px;
	border: 2px solid white;
	box-shadow: #00000000 -2px -2px 2px 4px;

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

.PopupButton:selected .TickBox,
.map-selection-btn:selected .TickBox,
.setting-toggle:selected .TickBox
{
	height: 24px;
	background-image: url("file://{images}/icons/ui/checkbox.svg");
	background-size: 24px 24px;
	background-color: None;
	box-shadow: #00000000 0px 0px 3px 0px;

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

.PopupButton.Zoom .TickBox
{
	width: 36px;
	height: 36px;
	margin: 8px;
	background-image: url("file://{images}/icons/ui/zoom_in.svg");
	background-repeat: no-repeat;
	background-size: 36px 36px;
	box-shadow: #00000000 -2px -2px 2px 4px;
	border: 0px solid white;

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

.PopupButton.Zoom:selected .TickBox
{

	background-image: url("file://{images}/icons/ui/zoom_out.svg");
	background-repeat: no-repeat;
	background-size: 36px 36px;
	background-color: None;
	box-shadow: #00000000 0px 0px 3px 0px;

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

.PopupButton .RadioBox
{
	width: 24px;
	height: 24px;
	position: 0px 0px 0px;
	vertical-align: center;
	background-color: gradient( radial, 50% 50%, 0% 0%, 0% 0%, from( #ffffff00  ), color-stop( 0.8, #ffffff00  ), to( #ffffff00 ) );
	border-radius: 50%;
	z-index: 1;
	margin-left: 8px;
	border: 2px solid white;
	wash-color: white;
	box-shadow: #00000000 -2px -2px 2px 4px;

	transition-property: background-color, wash-color;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;

	sound-trans: "";
}

.PopupButton:selected .RadioBox
{
	height: 24px;
	background-size: 24px 24px;
	background-color: gradient( radial, 50% 50%, 0% 0%, 35% 35%, from( white ), color-stop( .8, white ), to( #ffffff00 ) );
	box-shadow: #00000000 0px 0px 3px 0px;
	border: 2px solid white;

	transition-property: background-color, wash-color;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;

	sound-trans: "UIPanorama.generic_radiobox_selected";
}
                                                                                   
.PopupButton.Row
{
	flow-children: none;
	width: 600px;

}

.PopupButton.Row Label
{
	width: fit-children;
	text-align: left;
	horizontal-align: left;
	position: 0px 0px 0px;
}

.PopupButton.Row Image,
.PopupButton.Row .TickBox,
.PopupButton.Row:selected .TickBox,
.PopupButton.Row .RadioBox
{
	margin-left: 0px;
	margin-right: 8px;
	horizontal-align: right;
	position: 0px 0px 0px;
}

.map-selection-btn .TickBox,
.map-selection-btn:selected .TickBox
{
	                                                           
	
	vertical-align: top;
	horizontal-align: right;
	margin: 8px;
	position: 0px 0px 0px;
}

.PopupButton:disabled,
.PopupButton.Positive:disabled,
.IconButton.Positive:disabled
{
	wash-color: disabledColor;
	brightness: 1;
}


.PopupButtonDropdown.DropDownMenuVisible
{
	background-color: contextMenuBackground;
	box-shadow: shadowOffset;
	width: 372px;
	max-width: 512px;
	padding: 16px 0px;
	border-radius: btnBorderRadius;
}

.PopupButtonDropdown.Numbers
{
	background-color: contextMenuBackground;
	box-shadow: shadowOffset;
	width: 72px;
	max-width: 512px;
	padding: 16px 0px;
	border-radius: btnBorderRadius;
}

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

DropDown.PopupButton Image,
DropDown.PopupButton Image,
.PopupButtonDropdown Image
{
	height: 22px;
	width: height-percentage( 100% );
	vertical-align: center;
	margin-right: 2px;
}

DropDown.PopupButton Label,
CSGOSettingsEnumDropDown.PopupButton Label
{
	padding: 0px 32px 0px 0px;
}

DropDownMenu Label Image
{
	height: 16px;
	width: height-percentage( 100% );
	vertical-align: center;
	margin-right: 2px;
}

                                                                               
                                                                            
                                                                               
.FlatButton
{
	margin: 8px;
	height: fit-children;
	width: fit-children;
	horizontal-align: left;
	vertical-align: middle;
	border-radius: btnBorderRadius;
	box-shadow: shadowOffset;
	brightness: 1;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( blueColor), color-stop( 1, blueColor), to( #1B6085 ) );
	
	transition-property: background-color, brightness;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.FlatButton:hover
{
	brightness:1.2;

	transition-property: background-color, brightness;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.FlatButton Label
{
	horizontal-align: center;
	vertical-align: middle;
	text-align: center;
	text-transform: uppercase;
	margin: 12px 8px;

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

.FlatButton:hover Label
{
	horizontal-align: center;
	vertical-align: middle;
	text-align: center;
	text-transform: uppercase;
	margin: 12px 8px;
	color:White;

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

.FlatButton:enabled:focus
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #1B6085 ), color-stop( .5, #1B6085 ), to( #1B6085) );

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

.FlatButton:disabled
{
	wash-color: disabledColor;
	box-shadow: #00000080 0px 0px 0px 0px;
}

.FlatButton:disabled Label
{
	opacity: .30;
}

.FlatButton:disabled:hover Label
{
	color:baseText;
}

.FlatButton:active
{
	sound: "UIPanorama.generic_button_press";
}

.FlatButton.Activated
{
	                                
}

.FlatButton.Positive
{
	background-color: positiveColor;
}

.FlatButton.Warning
{
	background-color: warningColor;
}

.FlatButton.Negative
{
	background-color: negativeColor;
}

                                                                               
                                                                                
                                                                               
.IconButton
{
	margin: 8px;
	background-color: gradient( linear, 50% 0%, 50% 0%, from( #00000000 ), color-stop( .5, #00000010 ), to( #00000000 ) );
	horizontal-align: center;
	vertical-align: middle;
	border-radius: btnBorderRadius;
	width: fit-children;
	height: fit-children;
	tooltip-position: bottom;

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

.IconButton Image
{
	vertical-align: middle;
	horizontal-align: center;
	width: height-percentage( 100% );
	height: 26px;
	margin: 8px;
	wash-color: white;
}

.IconButton:disabled
{
	wash-color: disabledColor;
}

.IconButton:not(.no-hover):hover
{
	sound: "generic_button_rollover";
}

.IconButton:active
{
	sound: "UIPanorama.generic_button_press";
}

                                                                               
                                                                               
                                                                               

.text-external-Link-button
{
	width: fit-children;
	height: fit-children;
}

.text-external-Link-button Label,
{
	font-size: 14px;
	text-overflow: ellipsis;
	font-weight: normal;
	color: #bbdefb;
	text-decoration: none;

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

.text-external-Link-button:hover Label
{
	width: fit-children;
	height: fit-children;
	color: White;
	text-decoration: underline;

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

.text-external-Link-button:disabled Label
{
	color: baseText;
	text-decoration: none;
}

.text-external-Link-button:active
{
	brightness: 1.5;
	sound: "UIPanorama.generic_button_press";
}


                                                                               
                                                                               
                                                                               
TextEntry
{
	height: 36px;
	width:256px;
	vertical-align: center;	
	padding: 6px 16px 6px 6px;
	color: baseText;

	font-size: 18px;
	text-overflow: clip;
	white-space: nowrap;
	border-radius: 2px;
	border: 1px solid rgb(75, 75, 75);
}

TextEntry #PlaceholderText
{
	transition-property: opacity;
	transition-duration: 0.2s;
	color: rgb(75, 75, 75);
	font-size: 18px;
	horizontal-align: left;
	opacity: 1;

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

TextEntry:focus
{
	box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.493);
}

TextEntry:focus #PlaceholderText
{
	                                             
}

TextEntry.HasInput #PlaceholderText
{
	opacity: 0.0;
}

.TextEntryIMECandidateRow
{
	flow-children: right;
	                            
	padding: 4px 10px;
}

.TextEntryIMECandidateRowPrefix
{
	font-size: 14px;
	font-weight: normal;
	color: baseText;
	                                          
	vertical-align: middle;
}

.TextEntryIMECandidateRowSuffix
{
	font-size: 20px;
	font-weight: normal;
	color: baseText;
	                                          
	vertical-align: middle;
	padding-left: 6px;
}

.TextEntryIMECandidateRow.Highlight
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000), color-stop( 0, #000010 ), to( #00001005 ) );
}

.TextEntryIMEReadingString
{
	font-size: 16px;
	font-weight: normal;
	color: baseText;
	background-color: contextMenuBackground;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	                            
}

.TextEntryIMEReadingString.NoReadingString
{
	visibility: collapse;
}

.TextEntryIMECandidateList
{
	color: baseText;
	background-color: contextMenuBackground;
	flow-children: down;
	border-radius: 2px;
	box-shadow: shadowOffset;
	                            
}

TextEntryIMEControls
{
	flow-children: down;
}

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

	                                 
	                                             
	                                
	                                         
	
	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: #018eec;
}

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

.TextEntry-Background
{
	background-color: blueColorDark;
}

.TextEntry-icon
{
	background-color: blueColorDark;
}

.TextEntry-Background:hover
{
	background-color: blueColorDark;
}

.TextEntry-Cancel-Btn
{
	background-color: blueColorDark;
}

                                                                               
                                                                               
                                                                               
Slider
{
	                                                                                     
	                                                                          
	width: 50%;
	height: 10px;
	                      
}

#SliderTrack
{
	height: 120px;
	width: 16px;
	align: center center;
	background-color: #cccccc20;
	border: 0px;
	                                          
	z-index: 2;
}

SlottedSlider.HorizontalSlider .SliderNotch
{
	margin-top: 4px;
	border-bottom: 2px solid #5e686966;
	border-left:2px solid #5e686966;
	border-right:2px solid #5e686966;
	background-color: #141c27;
	width: 12px;
	height: 12px;
	vertical-align: bottom;
	z-index: 3;
}

#SliderTrackProgress
{
	width: 10px;
	height: 99%;
	background-color: #17212b;
	align: center center;
	                     
	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;
	                                          
	z-index: 4;
}

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

#SliderDefault
{
	background-color: gradient( radial, 50% 50%, -5% -5%, 60% 60%, from( #91a5b9 ), to( #444f52 ) );
	border-radius: 13%;
	width: 30px;
	height: 16px;
	                                          
	z-index: 5;
}


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

Slider.HorizontalSlider #SliderTrack, 
SlottedSlider.HorizontalSlider #SliderTrack
{
	width: 100%;
	height: 8px;
	padding: 10px;
}

Slider.HorizontalSlider #SliderTrackProgress, 
SlottedSlider.HorizontalSlider #SliderTrackProgress
{
	width: 100%;
	height: 8px;
	background-color: #cccccc80;
	                                          
	                   
	border: 0px;
}

Slider.HorizontalSlider.OutOfBounds #SliderTrackProgress, 
Slider.HorizontalSlider.OutOfBounds #SliderTrack 
{
	width: 100%;
	height: 8px;
	background-color: #20202080;
	border: 0px;
}

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;                                   
	margin-left: 1px;
}



Slider.HorizontalSlider #SliderThumb, 
SlottedSlider.HorizontalSlider #SliderThumb
{
	background-color: baseText;
	border-radius: 2px;
	width: 16px;
	height: 10px;
	align: center center;
}

Slider.HorizontalSlider #SliderDefault
{
	align: center center;
	background-color: baseText;
	border-radius: 2px;
	width: 2px;
	height: 12px;
}

Slider.HorizontalSlider #SliderThumb:hover, 
SlottedSlider.HorizontalSlider #SliderThumb:hover
{
	background-color: #fff;
}

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


                         


.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;
	                            
}

.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;
}


                                                                               
                                                                               
                                                                               
ProgressBar
{
	width: 320px;
	height: 22px;
	                          
	                     
	background-color: #000000ff;
	                                          
}

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

                                                                               
                                                                               
                                                                               
.CloseButton
{
	width: 24px;
	height: 24px;
	wash-color: #888888;
	
	background-image: url("file://{images}/control_icons/x_close.vtf");
	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;
	                               
	                                 
}

                                                                               
                                                                               
                                                                               
.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;
}


                                                                               
                                                                               
                                                                               
.ControlIconButton
{
	width: 28px;
	height: 28px;
	wash-color: #888888;
	background-image: url("file://{images}/control_icons/competitive_logo.vtf");
	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;
}

                                                                               
                                                                               
                                                                               
.SettingsButton
{
	background-image: url("file://{images}/control_icons/gear.vtf");
}

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

.SettingsButton:active
{
	                             
}


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

                                                                               
                                                                               
                                                                               
.RefreshButton
{
	background-image: url("file://{images}/control_icons/icon_refresh.vtf");
}

.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 );
	}

}

                                                                               
                                                                               
                                                                               
.EditButton
{
	background-image: url("file://{images}/control_icons/edit.vtf");
	background-size: 65%;
}



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

	background-image: url("file://{images}/icons/ui/loading.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;

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

@keyframes 'SpinnerRotate'
{
	0%
	{
		transform: scaleX( 1 );
		                               
		clip:radial(50% 50%, 0deg, 0deg);
	}
	
	49%
	{
		transform: scaleX( 1 );
		clip:radial(50% 50%, 0deg, 360deg);
	}
	50%
	{
		transform: scaleX( -1 );
		                               
		clip:radial(50% 50%, 0deg, 360deg);
	}
	
	100%
	{
		transform: scaleX( -1 );
		clip:radial(50% 50%, 0deg, 0deg);
	}
}


                                                                               
                                                                               
                                                                               
.Arrow
{
	width: 60px;
	height: 60px;
	vertical-align: middle;
	wash-color: #9db1b7;
	background-image: url( "file://{images}/control_icons/arrow_right.vtf" );
	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;
}

#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: 1.0;
}

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

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

.VerticalDivider.Dark,
.HorizontalDivider.Dark
{
	background-color: #3E3E3E;
}


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

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

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

	                                                                    
	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( "file://{images}/control_icons/arrow_solid_left.vtf" );
}
EdgeScrollBar.Horizontal #MaxButton
{
	horizontal-align: right;
	background-image: url( "file://{images}/control_icons/arrow_solid_right.vtf" );
}

EdgeScrollBar.Vertical .EdgeScrollButton
{
	width: 100%;
	height: 16px;
}
EdgeScrollBar.Vertical #MinButton
{
	vertical-align: top;
	background-image: url( "file://{images}/control_icons/arrow_solid_up.vtf" );
}
EdgeScrollBar.Vertical #MaxButton
{	
	vertical-align: bottom;
	background-image: url( "file://{images}/control_icons/arrow_solid_down.vtf" );
}


                                   

.PaginationArrow:active
{
	opacity: 1.0;
	sound: "UIPanorama.sidemenu_select";
}

.PaginationArrow:disabled
{
	opacity: .15;
}

.PaginationArrow.Left
{
	transform: rotateZ( 90deg );
}

.PaginationArrow.Right
{
	transform: rotateZ( -90deg );
}

.PaginationArrow
{
	background-image: url("file://{images}/icons/ui/expand.svg");
	background-repeat: no-repeat;
    background-size: 24px auto;
	transform: rotateZ( 0deg );
    background-position: 50% 50%;
	border-radius: btnBorderRadius;
    width: 24px;
 	height: 24px;
	vertical-align: middle;
	margin: 0px;
	opacity: 1;

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

.popup-acknowledge .PaginationArrow
{
	width: 32px;
	height: 32px;
	background-size: 32px auto;
}

.store-panel__carousel-container .PaginationArrow
{
	width: 24px;
	height: 24px;
	background-size:24px auto;
}

.PaginationArrow.Right
{
	transform: rotateZ( -90deg );
	horizontal-align: right;
}

.playercard-flair-carousel-container .PaginationArrow,
.playercard-skillgroup-carousel-container .PaginationArrow,
{
	width: 16px;
	height: 16px;
	background-size: 16px auto;
	margin: 2px;
}

.PaginationArrow:enabled:hover
{
	brightness: 4;
	                              

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

.InventoryCarousel-Nav .PaginationButton
{
	visibility: collapse;
}

.PaginationButton:selected
{
	                                                                                                    
	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 ) );
	                                
	opacity: 1;
	border-radius: 50%;
}


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

	50%
	{
		opacity: 0.2;
	}

	100%
	{
		opacity: 1.0;
	}
}

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

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

	background-image: url( "file://{images}/fades/radialsweep.vtf" );
	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);
	}
}

.Rotating2dPanel
{
	border-radius: 0.1px;
}

.DropIn
{
	animation-name: DropIn;
	animation-duration: 0.5s;
	animation-delay: 0.1s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-direction: normal;
}

@keyframes 'DropIn'
{
	0%
	{
		brightness: 10;
		blur: fastgaussian( 4, 4, 5 );
		transform: scale3d( 2, 2, 2 );

	}

	80%
	{
		brightness: 0;
		blur: fastgaussian( 0, 0, 0 );
		transform: scale3d( 1, 1, 1 );

	}

	90%
	{
		brightness: 2;
		blur: fastgaussian( 0, 0, 0 );
		transform: scale3d( 1.2, 1.2, 1.2 );

	}

	100%
	{
		transform: scale3d( 1, 1, 1);
		brightness: 1;
	}
}


                                                                               
                                                    				           
                                                                               
.overflow-noclip
{
	overflow: noclip;
}

.overflow-clip
{
	overflow: clip;
}

.left-right-flow
{
	flow-children: right;
}

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

.right-left-flow
{
	flow-children: left;
}

.top-bottom-flow
{
	flow-children: down;
}

.bottom-top-flow
{
	flow-children: up;
}

.no-flow
{
	flow-children: none;
}

.hide
{
	visibility: collapse;
}

.show
{
	visibility: visible;
}

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

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

.horizontal-align-left
{
	horizontal-align: Left;
}

.vertical-center
{
	vertical-align: middle;
}

.vertical-align-top
{
	vertical-align: top;
}

.vertical-align-bottom
{
	vertical-align: bottom;
}

.full-width
{
    width: 100%;
}

.half-width
{
    width: 50%;
}

.full-height
{
    height: 100%;
}

.fill-parent-flow-height
{
    height: fill-parent-flow(1);
}

.vertical-separator
{
	vertical-align: middle;
	width: 1px;
	height: 40%;
	opacity: .15;
	background-color: blueColor;
}

.vscroll
{
	overflow: squish scroll;
}

.hscroll
{
	overflow: scroll squish;
}

.horizontal-separator
{
	horizontal-align: center;
	width: 100%;
	height: 1px;
	opacity: .25;
	background-color: white;
}

.game-mode-selection-radios-spacer
{
	width: 15px;
	height: 60%;
	margin-left: 8px;
	margin-right: 8px;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	vertical-align: center;
}

.horizontal-separator--dark
{
	background-color: black;
	opacity: .15;
	background-color: #3e3e3e;
}

.height-fit-children
{
	height: fit-children;
}

.width-fit-children
{
	width: fit-children;
}
.debug-border
{
	border: 1px solid #cccccc;
}

.debug-background
{
	background-color: #39b0d325;
}

.left-right-padding
{
	padding: 0px 16px 0px 16px;
}

.bottom-padding
{
	padding-bottom: 8px;
}

.bottom-padding-medium
{
	padding-bottom: 16px;
}

.bottom-padding-large
{
	padding-bottom: 32px;
}

.top-padding
{
	padding-top: 8px;
}

.top-padding-medium
{
	padding-top: 16px;
}

.top-padding-large
{
	padding-top: 32px;
}

.left-padding
{
	padding-left: 8px;
}

.right-padding
{
	padding-right: 8px;
}

.padding-8
{
	padding: 8px;
}

.padding-16
{
	padding: 16px;
}


.icon-blue-24px
{
	height: width-percentage( 100% );
	width: 24px;
	wash-color: blueColor;
	horizontal-align: center;
	vertical-align: middle;
}

.bottom-margin
{
	margin-bottom: 8px;
}

.right-margin
{
	margin-right: 8px;
}

.right-margin-medium
{
	margin-right: 16px;
}

.right-margin-32
{
	margin-right: 32px;
}

.left-margin
{
	margin-left: 8px;
}

.left-margin-medium
{
	margin-left: 16px;
}

.left-margin-32
{
	margin-left: 32px;
}

.top-margin-24
{
	margin-top: 24px;
}

.bottom-margin-32
{
	margin-bottom: 32px;
}

.margin-16
{
	margin: 16px;
}

.margin-8
{
	margin: 8px;
}

.margin-32
{
	margin: 32px;
}

.z-index-2
{
	z-index: 2;
}

.tile-blur-rect-background
{
	background-color: tileBlurBackgroundColor;
}

.panel-border-white
{
	border: 1px solid white;
}

                                                                               
                                            				           
                                                                               

.mainmenu-navbar-container .navbar-btn__notification
{
	ui-scale: 125%;
}

.navbar-btn__notification
{
	height: fit-children;
	width: fit-children;
	background-color: #D8760E;
	border-radius: 2px;
	box-shadow: shadowOffset;
	horizontal-align: center;
	margin-top: 16px;
	margin-left: 32px;
	opacity: 1;
	transform:Scale3d(1, 1, 1);

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

.navbar-btn__notification-dot
{
	background-color: #D8760E;
	border-radius: 50%;
	transform:Scale3d(1, 1, 1);
	opacity: 1;
	vertical-align: center;
	margin: 8px;
	width: 12px;
	height: 12px;
	box-shadow: fill #0000005e 0px 0px 2px 2px;
	visibility: visible;
}

#MainMenuWatchAlert.navbar-btn__notification,
#MainMenuSubscriptionAlert.navbar-btn__notification,
#MainMenuPlayAlert.navbar-btn__notification
{
	margin-left: 8px;
}

.navbar-btn__notification.text-only
{
	background-color: none;
	box-shadow: none;
}

.navbar-btn__notification.overwatch
{
	background-color: blueColor;
}

.navbar-btn__notification.hidden
{
	opacity: 0;
	transform:Scale3d(0, 0, 0);

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

.navbar-btn__notification-dot.hidden
{
	visibility: collapse;
}

.navbar-btn__notification-text
{
	font-size: 14px;
	vertical-align: middle;
	horizontal-align: center;
	text-align: center;
	margin: 0px 6px;
	color: white;
	max-width: 100px;
	text-overflow: ellipsis;
	height: 20px;
}

.navbar-btn__notification-text.shadow
{
	text-shadow: 2px 2px 4px 3.0 #00000040;
}

.store-sale-tag__text
{
	font-size: 14px;
	font-weight: bold;
	color: White;
	text-align: center;
	padding: 3px;
	vertical-align: center;
	margin-left: 8px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #3a863d ), to( #2d682f ) );
}

.store-panel__carousel__item-linked__sale .store-sale-tag__text
{
	font-size: 12px;
	padding: 1.5px;
}

.world-region-label
{
	font-size: 18px;
	text-align: center;
	text-overflow: shrink;
	font-weight: black;
	color: rgb(255, 255, 255);
	text-shadow: 0px 0px 2px 3.0 rgb(0, 0, 0);
	background-color: rgba(121, 120, 120, 0.87);
	border: 1px solid rgb(179, 179, 179);
	border-radius: 50%;
	                       
	width: 42px;
	font-family: Stratum2, 'Arial Unicode MS';

}

.world-region-label--image
{
	background-size : 99% 100%;
	background-position : 50% 50%;
	background-repeat : no-repeat;
	background-img-opacity : 0.8;
}

                                                                               
                                                                               
                                                                               
                                                                               

.visible-if-perfectworld,
.visible-if-not-perfectworld
{
	visibility: collapse;
}

.perfectworld .visible-if-perfectworld,
.worldwide .visible-if-not-perfectworld
{
	visibility: visible;
}

                                   

Label .InlineGlyph
{
	width: 16px;
	height: 16px;
	vertical-align: center;
}

Label .FlickStickInfoIcon
{
	height: 16px;
	width: height-percentage( 100% );
	vertical-align: center;
	margin-right: 2px;
}


                                                                                                        
Label.NumberOfLines1 .InlineGlyph
{
    transform: translateY(0px);	
}

Label.NumberOfLines2 .InlineGlyph
{
    transform: translateY(-11px);	
}

Label.NumberOfLines3 .InlineGlyph
{
    transform: translateY(-22px);	
}
