@define spawnselect-height: 880px;
@define spawnselect-bg-color: rgba(0, 0, 0, 0.85);
@define spawnselect-yellow: #D9BC00;

                                  
                                  
                           
                            
                                    
                                   

.spawnselect
{
    height:100%;
    width:100%;
    transform: scale3d(1.2, 1.2, 1.2 );

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

.spawnselect--PopOut.spawnselect
{
    opacity: 1;
    transform: scale3d(1, 1, 1 );

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

.spawnselect--FadeOut.spawnselect
{
    opacity: 0;
    transform: scale3d(1.2, 1.2, 1.2 );

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

.spawnselect-blurtarget
{
	height: 100%;
	width: 100%;
	brightness: .3;
	blur: fastgaussian( 6, 6, 3);

	transition-property: brightness, blur;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.spawnselect-blurtarget-background
{
	width: 100%;
	height: 100%;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( rgba(0, 0, 0, 0) ),  to( rgba(0, 0, 0, 0.7) ) );
}

.spawnselect-layout-container
{
    height: 100%;
    flow-children: right;
    margin-top: 48px;
    horizontal-align: center;
}

.spawnselect-layout
{
    height:fit-children;
    width:fit-children;
    flow-children: down;
                                 
    horizontal-align: center;
    z-index: 2;
                             

	transition-property: transform;
	transition-duration: 1s;
    transition-timing-function: cubic-bezier(1.000, 0.000, 0.610, 1.000);
}

.spawnselect-toprow,
.spawnselect-equipment-row
{
    background-color: spawnselect-bg-color;
    width:100%;
    height:fit-children;
    margin-bottom: 10px;
    visibility: visible;

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

.spawnselect-section-active-anim,
.spawnselect--stage-perk-selection .spawnselect-equipment-row
{
    animation-name: spawnselect-notready-animation;
    animation-duration: 2s;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
}

                                                                                  
.spawnselect--stage-perk-selection .spawnselect-toprow,
.spawnselect--stage-perk-ready .spawnselect-toprow
{
    background-color: spawnselect-bg-color;

    transition-property: background-color;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
    
    animation-duration: .1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 0;
}

@keyframes 'spawnselect-notready-animation'
{
    0% {
        background-color: gradient( linear, 0% 120%, 0% 100%, from( spawnselect-bg-color ),  to( spawnselect-bg-color ) );
    }
    50% {
        background-color: gradient( linear, 0% 0%, 0% 250%, from( spawnselect-bg-color ),  to( spawnselect-yellow ) );
    }
    0% {
        background-color: gradient( linear, 0% 120%, 0% 100%, from( spawnselect-bg-color ),  to( spawnselect-bg-color ) );
    }
}

.spawnselect-toprow-title,
.spawnselect--local-player-ready .spawnselect-equipment-row .spawnselect-toprow-title
{
    horizontal-align: left;
    vertical-align: center;
    font-family: Stratum2, 'Arial Unicode MS';
    color: spawnselect-yellow;
    text-shadow-fast:2px 2px #00000088;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}

.spawnselect--local-player-ready .spawnselect-toprow-title,
.spawnselect-equipment-row .spawnselect-toprow-title
{
    color: rgba(255, 255, 255, 0.219);
}

.spawnselect-toprow-info {
    margin: 0px 0px 0px 0px;
    horizontal-align: left;
    vertical-align: bottom;
    flow-children: right;

}

.spawnselect--stage-respawn .spawnselect-toprow-info 
{
	visibility: collapse;
}

.spawnselect-ready-count,
.spawnselect-not-ready
{
    color: rgb(233, 233, 233);
    font-family: Stratum2, 'Arial Unicode MS';
    font-size: 20px;
}

.spawnselect-not-ready
{
    margin-left: 35px;
    visibility: collapse;
}

.spawnselect--local-player-ready .spawnselect-not-ready
{
    visibility:collapse;
}

.spawnselect-timer
{
    horizontal-align:right;
    vertical-align: center;
    width: 60px;
    height: 60px;
                                 
    opacity:0;                                       
    margin: 10px;

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

.spawnselect--stage-selection .spawnselect-toprow .spawnselect-timer
{
    opacity: 1;

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

.spawnselect--stage-perk-selection .spawnselect-equipment-row .spawnselect-timer
{
    opacity:1;

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

.spawnselect-timer-circle-background
{
    margin:5px;
    width: 100%;
    height: 100%;  
                         
    border: 4px solid #ffffff05;
    border-radius: 50%;
}

.spawnselect-timer-circle {
    margin:5px;
    width: 100%;
    height: 100%;
    border: 4px solid #ffffff79;
    border-radius: 50%;
    animation-name: spawnselect-timerbar-animation;
    animation-duration:30s;
    animation-timing-function:linear;
    animation-iteration-count:1;
}

@keyframes 'spawnselect-timerbar-animation'
{
    0% {
        clip:radial(50% 50%, 0deg, 0deg);
    }
    100% {
        clip:radial(50% 50%, 0deg, 360deg);
    }
}

.spawnselect-timer-bar-background
{
    background-color: rgba(0, 0, 0, 0.445);
    height: 8px;
    width: 100%;
}

.spawnselect-timer-bar
{
    background-color: gradient( linear, 0% 0%, 100% 0%, from( #6D5E00 ),  to( spawnselect-yellow) );

    height: 8px;
    transform: scaleX( 0 );
    transform-origin: 0% 0%;
    width: 100%;

    animation-name: spawnselect-timerbar-animation;
    animation-duration:30s;
    animation-timing-function:linear;
    animation-iteration-count:1;
}

                                              
 
        
                               
     
          
                               
     
    

.spawnselect-timer-text {
	color: #ffffff79;
    font-family: Stratum2, 'Arial Unicode MS';
    font-size: 24px;
    font-weight: bold;
    vertical-align: middle;
    horizontal-align: center;
    line-height: 0px;
    padding: 0px 0px 0px 2px;

}

.map-location-container
{
	padding-left: -50%;
	padding-top: -50%;
	width: 256px;
	height: 256px;
}

.map-location-label
{
	opacity: 0.90;
	text-shadow: 0px 0px 2px 4 #000000;
	color: #dddddd;
	font-size: 15px;
	text-align: center;
	horizontal-align: center;
	vertical-align: center;
}

.spawnselect-map
{
    height: spawnselect-height;
    width: spawnselect-height;
    opacity: 1;
    border: 10px solid spawnselect-bg-color;
}

.spawnselect-zoneimage
{
	height: spawnselect-height;
	width: spawnselect-height;
	horizontal-align: center;
	vertical-align: center;	
	visibility: collapse;
	-s2-mix-blend-mode: normal;
}

.spawnselect-blursrc        { height:100%; width: 100%; }
.spawnselect-mapimage       { height:100%; width: 100%; }
.spawnselect-hexes          { height:100%; width: 100%; overflow: clip clip; }
.spawnselect-hexes-tablet {
    height: 100%;
    width: 100%;
    overflow: clip clip;
    opacity: 0;

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

.spawnselect--stage-ready .spawnselect-hexes-tablet,
.spawnselect--stage-perk-selection .spawnselect-hexes-tablet,
.spawnselect--stage-perk-ready .spawnselect-hexes-tablet,
.spawnselect--stage-respawn .spawnselect-hexes-tablet
{
    opacity: 1;
}

.spawnselect-map-hex-holder
{
                  
}

.spawnselect-map-hex-button
{
    height:100%;
    width:100%;
}

.spawnselect-map-hex {
                                                                             
                            
                            
                
                 
                                  

                                                                   
                          
                          
                
                 
                                  

                            
    margin-left: -50%;
    margin-right: -50%;
    margin-top: -75%;
    margin-bottom: -75%;
    width: 200%;
    height: 250%;
    background-size: 100% 100%;
}

.tile--enabled .spawnselect-map-hex
{
                  
}
.tile--enabled .spawnselect-map-hex-button
{
                           
}
.tile--enabled .spawnselect-map-hex-button:hover .spawnselect-map-hex
{
    background-image:url("file://{images}/survival/spawnselect/hex-hover.png");                    
   	-s2-mix-blend-mode: additive;
}

.tile--disabled .spawnselect-map-hex
{
                  
}

.tile--selected-local-player .spawnselect-map-hex
{
    background-image:url("file://{images}/survival/spawnselect/hex-selected.png");                    
}

.tile--selected-local-teammate .spawnselect-map-hex
{
    background-image:url("file://{images}/survival/spawnselect/hex-selected-teammate.png");                    
}

.tile--selected-other-player .spawnselect-map-hex
{
    background-image:url("file://{images}/survival/spawnselect/hex-opponent.png");                    
}

.spawnselect--stage-respawn .tile--selected-other-player
{
	visibility: collapse;
}

.spawnselect-tablet-hex-holder
{
                                          
}

.spawnselect-tablet-hex {
                                                    
    margin-top: -16.666%;
    margin-bottom: -16.666%;
    width: 100%;
    height: 133%;
}

.spawnselect-tablet-hex-image {
                                                                            
                                                                           
    margin-top: -0.341296928%;
    margin-bottom: -0.341296928%;
    background-size: 100% 100%;
    height: 100.682593857%;
    width: 100%;

    background-image:url("file://{images}/survival/spawnselect/tablet-hex.png");                    
    transform: scale3d( 0.6, 0.6, 0.6);

    transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

.tablet-tile--full.spawnselect-tablet-hex-holder
{
                                                                    
                                        
    z-index:1;

    background-size: 100% 100%;
}

.tablet-tile--full .spawnselect-tablet-hex-image 
{
	background-image:url("file://{images}/survival/spawnselect/tablet-hex-selected.png");                    
}

.spawnselect--stage-ready .spawnselect-tablet-hex-image,
.spawnselect--stage-perk-selection .spawnselect-tablet-hex-image,
.spawnselect--stage-perk-ready .spawnselect-tablet-hex-image,
.spawnselect--stage-respawn .spawnselect-tablet-hex-image
{
    transform: scale3d(1, 1, 1);
}

                    
.spawnselect-equipment
{
    width: 400px;
    height: 100%;
	flow-children: down;
    margin-left: 10px;
    brightness: 1;

    transition-property:  transform;
	transition-duration: .5s;
    transition-timing-function: ease-in-out;
}

                          
.spawnselect--stage-respawn .spawnselect-equipment
{
	visibility: collapse;
}

.spawnselect-equipment-list
{
    flow-children: down;
    width: 100%;
    height: spawnselect-height;
    background-color: rgba(0, 0, 0, 0.93);
    padding: 10px 0px;
                                  
}

.spawnselect-equipment__tooltip
{
	width: 100%;
    height: fill-parent-flow( 1 );
    padding: 2px 0px;
}

.spawnselect-equipment__btn
{
    height: 100%;
    width: 100%;
    background-color: gradient( linear, 0% 0%, 100% 0%, from( rgba(255, 255, 255, 0.040) ), color-stop( 0.0125, rgba(255, 255, 255, 0.030)  ), color-stop( 0.0125, rgba(255, 255, 255, 0.040)  ), color-stop( 0.025, rgba(255, 255, 255, 0.040) ), to( rgba(255, 255, 255, 0.040) ) );
    margin: 0px 10px;

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

.spawnselect--local-player-ready .spawnselect-equipment__btn
{
    wash-color: none;
}

.spawnselect-equipment__btn:disabled,
.spawnselect-equipment__btn,
.equipment-locked .spawnselect-equipment__btn
{
    wash-color: disabledColor;

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

.spawnselect-equipment__btn:hover
{
    background-color: gradient( linear, 0% 0%, 100% 0%, from( white ), color-stop( 0.0125, white ), color-stop( 0.0125, #ffffff40 ), color-stop( 0.03, rgba(255, 255, 255, 0.070) ), to( rgba(255, 255, 255, 0.070) ) );
	sound: "UIPanorama.sidemenu_rollover";
	transition-property:  background-color, wash-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.spawnselect-equipment__btn:selected
{
    background-color: gradient( linear, 0% 0%, 100% 0%, from( white ), color-stop( 0.0125, white ), color-stop( 0.02, #ffffff40 ), color-stop( 0.2, rgba(255, 255, 255, 0.070) ), to( rgba(255, 255, 255, 0.070) ) );
    wash-color: positiveColor;
    sound: "UIPanorama.tab_mainmenu_watch";

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

.spawnselect-equipment__btn .RadioBox
{
    visibility: collapse;
}

.spawnselect-equipment__btn__image
{
    width: 30%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.24);
}

.spawnselect-equipment__btn__image Image
{
    vertical-align: center;
    horizontal-align: center;
}

.spawnselect-equipment__btn Label,
.spawnselect-equipment__btn:disabled Label
{
    font-size: 16px;
    font-weight: medium;
    text-transform: uppercase;
    font-family: Stratum2, 'Arial Unicode MS';
    vertical-align: center;
    width: 60%;
    margin-left: 16px;
}

.equipment-locked .spawnselect-equipment__btn__locked
{
    visibility: visible;
}

.spawnselect-equipment__btn__locked
{
    flow-children: right;
    vertical-align: bottom;
    margin-left: 140px;
    padding: 4px;
    border-radius: 3px;
    Background-color: rgba(0, 0, 0, 0.5);
    wash-color: disabledColor;
    visibility: collapse;
}

.spawnselect-equipment__btn__locked--image
{
    margin-right: 8px;
    vertical-align: center;
}

.spawnselect-equipment__btn__locked--label
{
    font-family: Stratum2, 'Arial Unicode MS';
    font-size: 16px;
    font-weight: bold;
    color: white;
}

@keyframes 'spawnselect-respawn-location-pulse'
{
    0% {
		   transform: scale3d( 1.5, 1.5, 1 );
		   brightness: 1.5;
    }
    50% {
       	transform: scale3d( 1.0, 1.0, 1 );
		brightness: 1.0;
    }
    100% {
		   transform: scale3d( 1.5, 1.5, 1 );
		   brightness: 1.5;
    }
}

.spawnselect-map__teammate_location
{
	visibility: collapse;
	width: 64px;
	height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	img-shadow: 1px 1px 5px 1.0 #000000;
}

.spawnselect-map__death_location
{
	visibility: collapse;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	margin-top: -16px;
	img-shadow: 1px 1px 5px 1.0 #000000;
}

.spawnselect--stage-respawn .spawnselect-map__teammate_location,
.spawnselect--stage-respawn .spawnselect-map__death_location
{
	visibility: visible;

    animation-name: spawnselect-respawn-location-pulse;
    animation-duration: 2s;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
}