                                                                               
                                         
                                                                               


                                                                                         
                                                                                         
                                                                                         

@define MapOverview_PanelSize : 900px;
@define MapOverview_PanelHeight : fit-children;

@define MapOverview_VisSize : 900px;   
@define MapOverview_WithBorderSize : 900px;                              

                                                                               
   
                                                                               

CSGOMapOverview
{
	horizontal-align: center;
	y: 100px;

	opacity: 1.0;
	
	flow-children: down;

	transition-property: opacity;
	transition-timing-function: linear;
    transition-duration: 0.1s;

	width: MapOverview_PanelSize;
	height: MapOverview_PanelHeight;	

    background-color: #ffffff00;
}

CSGOMapOverview Label
{
    font-family: Stratum2, 'Arial Unicode MS';
}

                                                                               
                         
                                                                               

#MapOverview
{
	flow-children: none;
	
  	       
  	        
	width: MapOverview_PanelSize;
	height: MapOverview_PanelSize;
}

#MapOverview__Square
{
	width: MapOverview_WithBorderSize;
	height: MapOverview_WithBorderSize;

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

	background-color: black;

	border-width: 2px;
	border-style: solid;
	border-color: rgba(191, 191, 191, 0.3);

	opacity: 1.0;
}

#MapOverview__Map 
{
	width: MapOverview_VisSize;
	height: MapOverview_VisSize;
	
	horizontal-align: center;
	vertical-align: center;	

	background-color: black;

	visibility: visible;

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

#MapOverview__DangerZone
{
	width: MapOverview_VisSize;
	height: MapOverview_VisSize;
	
	horizontal-align: center;
	vertical-align: center;	

	visibility: collapse;

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

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

	transform-origin: 50% 50%;
}

#MapOverview__Overlay
{
	width: 100%;
	height: 100%;
	horizontal-align: center;
	vertical-align: center;
	background-color: gradient(radial, 50% 50%, 0px 0px, 125px 125px, from( #00000000 ), to( #000000FF ) );

	opacity: 0.9;
}

.MapOverview__key-hints
{
	width: 100%;
    height: 30px;
    horizontal-align: left;
    vertical-align: bottom;
	                                                                                           
    margin-left: 8px;
	visibility: visible;
	flow-children: right;
}

.MapOverview__key-hints-text
{
    font-family: Stratum2, 'Arial Unicode MS';
	font-size: 18px;
    text-align: center;
    text-shadow: 1px 1px 1px 2.0 black;
    color: #BBBBBBFF;
                      
                          
	font-weight: medium;
	                       
	width: 25%;
}

                                                                               
             
                                                                               

.PlayerIcons
{
	width: 100%;
	height: 100%;
	overflow: noclip;
  	                        	
}

.PlayerIcons.PlayerIcons__Player
{
    z-index:4;
}

.PlayerIcons.PlayerIcons__Hostage
{
    z-index:3;
}

.PlayerIcons.PlayerIcons__Grenade
{
    z-index:1;
}

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

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



#PI_NonRotated
{
	width: 400px;
	height: 400px;

	                                                                     
	transform-origin: 50% 50%;
	                                                                             
	x: -200px;	                  
	y: -200px;                     

	flow-children: none;
  	                         
}

#PI_FirstRotated
{
	width: 200px;
	height: 200px;

	                                                                     
	transform-origin: 50% 50%;
	                                                                             
	x: -100px;	                  
	y: -100px;                     

	flow-children: none;
  	                      
}

.PI_Above
{
	width: 13px;
	height: 10px;

	y: 10px;                                            
	
    horizontal-align: center;
	vertical-align: center;	

	opacity: 0.8;
}

.PI_Below
{
	width: 13px;
	height: 10px;

	y: -10px;                                            
	
    horizontal-align: center;
	vertical-align: center;	

	opacity: 0.8;
}

.PI_EnemyOnMap
{
	width: 13px;
	height: 13px;
	
    horizontal-align: center;
	vertical-align: center;	
}

.PI_HostageOnMap
{
	width: 15px;
	height: 15px;
	
    horizontal-align: center;
	vertical-align: center;	
}

.PI_OnMap
{
	width: 16px;
	height: 16px;
	
    horizontal-align: center;
	vertical-align: center;	
}

.PI_Death
{
	width: 24px;
	height: 22px;
	
    horizontal-align: center;
	vertical-align: center;	
}

.PI_Ghost
{
	width: 10px;
	height: 15px;
	
    horizontal-align: center;
	vertical-align: center;	
}

.PI_Indicator
{
	width: 12px;
	height: 12px;
	
    horizontal-align: center;
	vertical-align: center;	
}

.PI_Text
{
    font-weight: medium;
	font-size: 15px;
	
                               
	                         	
	
    letter-spacing: 0px;
	
	x: 197px;
	y: 0px;
}

.PI_Text_Number
{
	x: 0%;
	y: 0%;
	width: 100%;
	text-align: center;
	color: white;
    text-shadow: 0px 0px 1px 2.0 black;
}

.player-team-ct .PI_TextName
{
	width: 256px;
	text-align: right;
	x: -64px;
	y: -14px;
	text-shadow: 0px 0px 2px 2.5 #00000033;
}

.player-team-t .PI_TextName
{
	x: 206px;
	y: 12px;
	text-shadow: 0px 0px 2px 2.5 #00000033;
}

#HostageTransitOnMap
{
	width: 64px;
	height: 64px;
	
    horizontal-align: center;
	vertical-align: center;	
}

#Selected
{
	width: 56px;
	height: 52px;
	
	y: -15px;                                            
	
    horizontal-align: center;
	vertical-align: center;	
}

#Defuser
{
	width: 24px;
	height: 24px;
	
    horizontal-align: center;
	vertical-align: center;	
}

#MuzzleFlash
{
	width: 20px;
	height: 20px;

	y: -10px;                                            

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

#LowHealth
{
	width: 20px;
	height: 20px;
    horizontal-align: center;
	vertical-align: center;	

	                                     
	                          
	                                  
	                                      	
}

                                 
 
  
 
	             
 
   
 
	             
 
   
 
	             
 
   
 
	             
 
    
 
	             
 
   

#SpeakingOnMap
{
	width: 24px;
	height: 24px;
	
    horizontal-align: center;
	vertical-align: center;	

  	                           
}


#DirectionalIndicator
{
	height: 4px;

	horizontal-align: center;
	         
	y: 91px;                                            
}

#Grenade_HE
{
	width: 70px;
	height: 70px;

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

#Grenade_FLASH
{
	width: 96px;
	height: 96px;
	
    horizontal-align: center;
	vertical-align: center;	
}

#Grenade_SMOKE
{
	width: 128px;
	height: 128px;
    horizontal-align: center;
	vertical-align: center;	
}

#Grenade_MOLOTOV
{
	width: 128px;
	height: 128px;
	
    horizontal-align: center;
	vertical-align: center;	
}

#Grenade_DECOY
{
	width: 64px;
	height: 64px;

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

#Flashed
{
	width: 24px;
	height: 24px;

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

#SurvivalCrate
{
	width: 64px;
	height: 64px;
	
    horizontal-align: center;
	vertical-align: center;	
}

                                                                               
             
                                                                               

#RI_BombDefuserPackage
{
	width: 200px;
	height: 200px;

	                                                                     
	transform-origin: 50% 50%;
	                                                                             
	x: -100px;	                  
	y: -100px;                     

	flow-children: none;
	  	                      
}


#BombPlantedIcon
{
	width: 24px;
	height: 24px;
	
    horizontal-align: center;
	vertical-align: center;	
	
  	                           
}

#BombPlantedIconMedium
{
	width: 24px;
	height: 24px;
	
    horizontal-align: center;
	vertical-align: center;	
	
  	                           
}

#BombPlantedIconFast
{
	width: 24px;
	height: 24px;
	
    horizontal-align: center;
	vertical-align: center;	
	
  	                           
}

#PlantedBomb
{
	width: 70px;
	height: 70px;

	transform: scale3d( 1, 1, 1 );
	
	horizontal-align: center;
  	                       
	y: 78px;                                                                     	
	
	border-radius: 50% / 50%;

	border-width: 2px;
	border-style: solid;
	border-color: red;

	animation-name: DroppedBomb--Animate;
	animation-duration: 0.75s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	
	-s2-mix-blend-mode: screen;
}

#DroppedBomb
{
	width: 110px;
	height: 110px;

	transform: scale3d( 1, 1, 1 );
	
	horizontal-align: center;
  	                       
	y: 58px;                                                                     	
	
	border-radius: 50% / 50%;

	border-width: 2px;
	border-style: solid;
	border-color: red;

	animation-name: DroppedBomb--Animate;
	animation-duration: 0.75s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

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

@keyframes 'DroppedBomb--Animate'
{
	0%
	{
        opacity: 1.0;
        transform: scale3d( 0.1, 0.1, 1 );
    }
    25%
    {
        opacity: 1.0;
        transform: scale3d( 0.25, 0.25, 1 );
    }
    50%
    {
        opacity: 0.5;
        transform: scale3d( 0.5, 0.5, 1 );
    }
    75%
    {
        opacity: 0.25;
        transform: scale3d( 0.75, 0.75, 1 );
    }
	100%
	{
        opacity: 0.0;
        transform: scale3d( 1, 1, 1 );
	}
}

#RI_DefuserPackage
{
	width: 200px;
	height: 200px;

	                                                                     
	transform-origin: 50% 50%;
	                                                                             
	x: -100px;	                  
	y: -100px;                     

	flow-children: none;
	  	                      
}

                     
 
	            
	             
	
                             
	                       	
   

#DefuserIconDropped
{
	width: 110px;
	height: 110px;

	transform: scale3d( 1, 1, 1 );
	
	horizontal-align: center;
	vertical-align: center;
	
	border-radius: 50% / 50%;

	border-width: 2px;
	border-style: solid;
	border-color: blue;

	animation-name: DroppedDefuser--Animate;
	animation-duration: 0.75s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

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

@keyframes 'DroppedDefuser--Animate'
{
	0%
	{
        opacity: 1.0;
        transform: scale3d( 0.1, 0.1, 1 );
    }
    25%
    {
        opacity: 1.0;
        transform: scale3d( 0.25, 0.25, 1 );
    }
    50%
    {
        opacity: 1.0;
        transform: scale3d( 0.5, 0.5, 1 );
    }
    75%
    {
        opacity: 1.0;
        transform: scale3d( 0.75, 0.75, 1 );
    }
	100%
	{
        opacity: 0.0;
        transform: scale3d( 1, 1, 1 );
	}
}

#DefuserIconPackage
{
	width: 64px;
	height: 64px;
	
    horizontal-align: center;
	vertical-align: center;	
}

#BombCT
{
	width: 24px;
	height: 24px;
	
	transform-origin: 50% 50%;
	
  	                           
}

#BombT
{
	width: 24px;
	height: 24px;
	transform-origin: 50% 50%;
	
  	                           
}

#CreateBombPack
{
	width: 23px;
	height: 17px;

	horizontal-align: center;
	                         	

	y: 104px;                              	

	wash-color: red;
	                             

    img-shadow: 0px 0px 1px 1.1 #11111111;
}


                                                                               
                             
                                                                               

.BombZone
{
	height: 23px;
	transform-origin: 50% 50%;
	x: -9px;
	y: -9px;

    wash-color:#ffcc00;
    img-shadow: 0px 0px 1px 2 #111111FF;

    opacity: 0.8;
	                        
}

.HZone
{
	height: 23px;
	transform-origin: 50% 50%;
	x: -8px;
	y: -4px;

	                        
	                             
}
                                                                               
            
                                                                               
#DashboardLabel
{
	color: #d3e798;  
	font-weight: bold;
    font-size: 26px;
    horizontal-align: left;
	vertical-align: center;
	letter-spacing: 0px;
	
	margin-left: 16px;
	
	opacity: 0.7;
	-s2-mix-blend-mode: screen;
}

#Dashboard
{
    background-color: gradient( linear, 0% 0%, 100% 0%, from( #0000007f ), color-stop( 0.72, #0000007f ), to( #00000000 ) );
    width: MapOverview_PanelSize;
    height: 42px;
    opacity: 0.9;
}

#Dashboard__BombIconsContainer
{
	flow-children: down;
    width: MapOverview_PanelSize;
	height: fit-children;
    opacity: 1.0;
}


#Dashboard__BombCT
{
	width: 40px;
	height: 40px;
	margin-top: 4px;

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

#Dashboard__BombT
{
	width: 38px;
	height: 44px;
	margin-top: 4px;

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

#Dashboard__HostageIcons
{
	flow-children: down;
    width: MapOverview_PanelSize;
	height: 128px;
    opacity: 1.0;
}

#Dashboard__HostageIconsRow
{
	flow-children: right;
    width: MapOverview_PanelSize;
	height: 56px;
	margin-left: 24px;
    opacity: 1.0;
}

#Dashboard__HostageStatusIcons
{
	flow-children: right;
    width: 256px;                                                            
	height: 60px;
	                  
	margin-left: 6px;
    opacity: 1.0;
}

#Dashboard__EmptyHostagePanelForMoney
{
	flow-children: right;
    width: MapOverview_PanelSize;
	height: 96px;       
	margin-left: 24px;
	opacity: 1.0;
	
	visibility: visible;
}

#Dashboard__EmptyBombPanelForMoney
{
	flow-children: right;
    width: 64px;
	height: 56px;
	margin-left: 24px;
	opacity: 1.0;
	
	visibility: visible;
}

#HostageAlive
{
	width: 17px;
	height: 38px;
	margin: 6px;

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

#HostageDead
{
	width: 17px;
	height: 38px;
	margin: 6px;

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

#HostageRescued
{
	width: 17px;
	height: 38px;
	margin: 6px;

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

#HostageTransit
{
	width: 26px;
	height: 38px;
	margin: 6px;

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

#Dashboard__HZone
{
	width: 36px;
	height: 40px;
	margin-top: 4px;

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


