@define AvatarSpecSizeMax: 78px;
@define AvatarSpecSize: 52px;
@define AvatarSpecImageWidth: 52px;
@define AvatarSpecImageHeight: 52px;
@define AvatarSpecBGWidth: 52px;
@define AvatarSpecBGHeight: 52px;

.compass
{
	width: 100%;
	              
    	               
    	height: 100%;
	overflow: clip;
}

                                       
.compass-bg-container
{
	width: 100%;
	height: 45px;
	flow-children:right;
    vertical-align: top;
}
.compass-bg-left
{
	width:30%;
	height:100%;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), to( #00000025 ) );
}
.compass-bg-center
{
	width:40%;
	height:100%;
	background-color: #00000025;
}
.compass-bg-right
{
	width:30%;
	height:100%;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000025 ), to( #00000000 ) );
}

                        
.compass-line-container
{
	width: 100%;
	height: 1px;
	vertical-align: top;
    horizontal-align:center;
	margin-top:45px;
	                     
	flow-children:right;
}
.compass-line-left
{
	width:30%;
	height:1px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #FFFFFF00 ), to( #FFFFFF60 ) );
}
.compass-line-center
{
	width:40%;
	height:1px;
	background-color: #FFFFFF60;
}
.compass-line-right
{
	width:30%;
	height:1px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #FFFFFF60 ), to( #FFFFFF00 ) );
}

                                
.compass-line-forward
{
	horizontal-align:center;
	vertical-align:top;
	width: 1px;
	height: 65px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #FFFFFF00 ), to( #FFFFFFFF ) );
}

                                 
.compass-pip
{
	width: 100px;
	margin-left: -50px;
	height: 50px;
}
.compass-pip-hash
{
	horizontal-align:center;
	vertical-align:top;
	width: 1px;
	height: 8px;
	margin-top: 38px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #FFFFFF00 ), to( #FFFFFF78 ) );
}
.compass-pip-text
{
	margin-top: 2px;
	horizontal-align:center;
	font-family: Stratum2, 'Arial Unicode MS';
	text-shadow: 0px 0px 3px 0.0 #000000;
	color: #EEEEEEFF;
	font-size: 14px;
	text-align: center;
}

                           
.compass-heading-container-left
{
	margin-top: 50px;
	width: 50%;
	horizontal-align:left;
}
.compass-heading-container-right
{
	margin-top: 50px;
	width: 50%;
	horizontal-align:right;
}
.compass-heading
{
	vertical-align:top;
	horizontal-align:right;
	font-family: Stratum2 Monodigit, 'Arial Unicode MS';
	color: #EEEEEEFF;
	font-size: 14px;
}
.compass-cardinal
{
	vertical-align:top;
	horizontal-align:left;
	font-family: Stratum2, 'Arial Unicode MS';
	color: #EEEEEEFF;
	font-size: 14px;
}

.compass-teammate-parent
{
    margin-top: 6px;
                          

    width: AvatarSpecSizeMax;
	height: AvatarSpecSizeMax;
	                     
	                   
    opacity: 0.0;
}

                            
.compass-teammate-img
{
	width: 52px;
	height: 52px;
    horizontal-align: center;
	vertical-align: center;
	                     
	                   
	background-image:url("file://{images}/survival/teammate/teammate.png");
	background-size: 52px 52px;
                   
}

                          
.compass-rescue-img
{
	width: 44px;
	height: 44px;
	margin-left: -22px;
	margin-top: 26px;
	background-image:url("file://{images}/hud/radar/icon-hostage-zone.png");
	background-size: 100% 100%;
}

.region-name
{
	margin-top: 68px;
	margin-left: 0px;
	                      
	padding: 2px 12px 2px 12px;
	horizontal-align: center;
	vertical-align: top;
	font-family: Stratum2 Monodigit, 'Arial Unicode MS';
	border: 1px solid #EEEEEE22;
	background-color: #00000022;
	font-size: 14px;
	text-align: center;
}


@keyframes 'RegionNameFadeIn'
{
	0%
	{
		opacity: 0.0;
	}

	100%
	{
		opacity: 1.0;
	}
}


.region-name
{
	opacity: 0;
}

.show-region .region-name
{
	opacity: 1;

	animation-name: RegionNameFadeIn;
	animation-duration: 0.75s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;	
	animation-fill-mode: forwards;
}

                                                                               
                                       
                                                                               

.Avatar__PlayerImage .AvatarImage
{
	width: AvatarSpecSizeMax;
	height: AvatarSpecSizeMax;
}

.Avatar__BG--Hidden
{
    background-image: none;
}


.Avatar__Skull
{
    wash-color-fast: #4e4227;
}

.AvatarSpec
{
   
    width: AvatarSpecSizeMax;
    height: AvatarSpecSizeMax;

    margin-left: 0px;
    margin-right: 0px;
}

#AvatarSpec__ImageBG
{
    width: AvatarSpecImageWidth;
    height: AvatarSpecImageHeight;

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

                                

    opacity-mask: url( "file://{images}/masks/circle.png" );
}

.AvatarSpec__Internal
{
    width: AvatarSpecSizeMax;
    height: AvatarSpecSizeMax;

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

    background-color: #7f7f7f00;

    opacity-mask: url( "file://{images}/masks/circle.png" );
}

.AvatarSpec__HealthBarOld
{
    opacity: 0;
}

.AvatarSpec__HealthBarGlow
{
    opacity: 0.0;

    visibility: visible;
    horizontal-align: center;
    vertical-align: center;

                         
                          

    width: 74px;
    height: 74px;

    wash-color-fast: #e31517;
}

.AvatarSpec__HealthBar
{
    visibility: visible;
    horizontal-align: center;
    vertical-align: center;

    margin-right: -2px;
    margin-bottom: -2px;

    width: 54px;
    height: 54px;
}

.AvatarSpec__HealthBar .CircularProgressBarBG
{
    visibility: visible;
    background-image: url( "file://{images}/masks/ring.png" );
    background-size: 54px 54px;
    wash-color-fast: #313839;

    width: 54px;
    height: 54px;

    img-shadow: 0px 0px 2px #000000AA;
}

.AvatarSpec__HealthBar_PulseOnce
{
    opacity: 0.5;
    animation-name: barPulse;
    animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 12;	
    animation-fill-mode: both;
}

@keyframes 'barPulse'
{
    0%
    {
        opacity: 0.0;
    }
    10%
    {
        opacity: 0.5;
    }
    50%
    {
        opacity: 1.0;
    }
    90%
    {
        opacity: 0.5;
    }
    100%
    {
        opacity: 0.0;
    }
}

.AvatarSpec__HealthBar .CircularProgressBarFG
{
    visibility: visible;
    background-image: url( "file://{images}/masks/ring.png" );
    background-size: 54px 54px;
    wash-color-fast: #f00e0e;

    width: 54px;
    height: 54px;
}


.AvatarSpec__Default--CT
{
	background-image: url( "file://{images}/hud/teamcounter/teamcounter_alivebgCT.png" );
	background-size: 58px 58px;
    background-position: left 0px top 0px;
    background-repeat: no-repeat;
}

.AvatarSpec__Default--T
{
	background-image: url( "file://{images}/hud/teamcounter/teamcounter_alivebgT.png" );
    background-size: 58px 58px;
    background-position: left 0px top 0px;
    background-repeat: no-repeat;
}


.AvatarSpec__Skull
{
    visibility: collapse;
    width: 48px;
    height: 48px;
    x: 5px;
    y: 4px;
}

.AvatarSpec__PlayerColorParent
{
    visibility: visible;
    width: 78px;
    height: 78px;

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

.AvatarSpec__PlayerColor
{
              

    width: 32px;
    height: 24px;

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

    transform: scaleY( -1 );

    img-shadow: 0px 0px 1px 1.0 #000000CC;
}

.AvatarSpec__Spectator
{
}

.teammate-respawn-countdown
{
	horizontal-align: left;
	vertical-align: top;
	margin-top: 68px;
	margin-left: 240px;
	                      
	padding: 2px 12px 2px 12px;
	font-family: Stratum2 Monodigit, 'Arial Unicode MS';
	border: 1px solid #EEEEEE22;
	background-color: #00000022;
	font-size: 14px;
	text-align: center;

	visibility: collapse;
}

.show-respawn-countdown .teammate-respawn-countdown
{
	visibility: visible;
}

                              
   
                                              
   

                              
   
  	                                      
  	                          
  	                                  
  	                                    
   

                                    
   
  	  
  	 
                                                   
       
         
       
                                                   
       
  	    
  	 
                                                   
  	 
   