   
	            
	
	                                                                                              
	                                                                                       
  

.hud-progress-bar
{
	opacity: 0;
	width: 600px;
	height: 120px;
	                     
	horizontal-align: center;
	vertical-align: middle;
}


.hud-progress-bar.hud-progress-bar--visible
{
                                                                 
                                                  
       
	opacity: 1;
	transition-property: opacity; 
	transition-timing-function: ease-in-out;
	transition-duration: 0.4s;
}

                                                                                     
.hud-progress-bar.hud-progress-bar--switched
{
}

@keyframes 'hudProgressBarCancelShake'
{
	0%
	{
		position: -4px 0px 0px;
	}

	50%
	{
		position: 4px 0px 0px;
	}

	100%
	{
		position: 0px 0px 0px;
	}
}

.hud-progress-bar.hud-progress-bar--canceled
{
	animation-name: hudProgressBarCancelShake;
	animation-duration: 0.1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 3; 
}

@keyframes 'hudProgressBarSuccessZoom'
{
	0%
	{
		transform: scale3d( 1, 1, 1 );
		brightness: 1;
	}

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

.hud-progress-bar.hud-progress-bar--finished
{
	animation-name: hudProgressBarSuccessZoom;
	animation-duration: 0.4s;
	animation-timing-function: ease-in;
}

.hud-progress-bar-background
{
	width: 600px;
	height:100%;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.1, #0000000d ), color-stop( 0.15, #00000033 ), color-stop( 0.50, #000000bf ), color-stop( 0.85, #00000033 ), color-stop( 0.9, #0000000d ), to( #00000000 ) );
}

.hud-progress-bar-background-top { 
	width: 100%;
	height: 2px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.10, #0000000d ) , color-stop(0.5, #000000d9), color-stop( 0.90, #0000000d ), to( #00000000 ) );
	vertical-align: top;
}

.hud-progress-bar-background-bot { 
	width: 100%;
	height: 2px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #00000000 ), color-stop( 0.10, #0000000d ) , color-stop(0.5, #000000d9), color-stop( 0.90, #0000000d ), to( #00000000 ) );
	vertical-align: bottom;
}

.hud-progress-bar-layout {
	flow-children: right;
	horizontal-align: center;
}

.hud-progress-bar-circle {
    width:95px;
    height:95px;
    margin: 10px;
	margin-right: 20px;
}

.hud-progress-bar-circle-background {
    width: 99px;
    height: 99px;  
    border: 8px solid #80808040;
	border-radius: 50%;
	box-shadow:  fill #000000aa 0px 0px 8px;
}


@keyframes 'circle-full-to-empty' {
    0% {
        clip:radial(50% 50%, -180deg, 360deg);
        wash-color-fast: red;
    }
    50% {
        wash-color-fast: yellow;
    }
    100% {
        clip:radial(50% 50%, 0deg, 0deg);
        wash-color-fast: green;
    }
}

.hud-progress-bar-circle-animator {
    width: 99px;
    height: 99px;  
    horizontal-align:center;
    vertical-align:middle;
    border: 8px solid #ffffff;                                          
    border-radius: 50%;
	animation-name: circle-full-to-empty;
	opacity: 0.7;
}


.hud-progress-bar-circle-border-outer {
    width: 100%;
    height: 100%;  
    horizontal-align: center;
    vertical-align: middle;
    border: 2px solid #00000099;
	border-radius: 50%;
	z-index: 0;
}

.hud-progress-bar-circle-border-inner {
    width: 82%;
    height: 82%;  
    horizontal-align: center;
    vertical-align: middle;
    border: 2px solid #00000049;
    border-radius: 50%;
}

.hud-progress-bar-circle-icon {
    vertical-align: middle; 
    horizontal-align: center;
    height: 60px;
    width: 60px;
	brightness: 2;
	img-shadow: 1px 1px 2px #000000;
}

@keyframes hud-progress-bar-defuse-animate
{
    0% {
        wash-color-fast: color-CT;
        transform: scaleX(0.95) scaleY(0.95) translateX(2px) translateY(2px);
    }
    50% {
        wash-color-fast: hsv-transform(color-CT, 0, 0, 1.5);
    }
    90% {
        transform: scaleX(1.0) scaleY(1.0) translateX(2px) translateY(2px);
    }
    100% {
        wash-color-fast: color-CT;
        transform: scaleX(0.95) scaleY(0.95) translateX(2px) translateY(2px);
    }
}

.hud-progress-bar__defuse .hud-progress-bar-circle-icon
{
    wash-color-fast: color-CT;

    animation-name: hud-progress-bar-defuse-animate;
    animation-timing-function: ease-in-out;
    animation-duration:0.8s;
    animation-iteration-count:infinite;
}

@keyframes hud-progress-bar-bomb-animate
{
    0% {
        wash-color-fast: color-icon-bomb;
        transform: scaleX(1.0) scaleY(1.0);
    }
    50% {
        wash-color-fast: hsv-transform(color-icon-bomb, 0, 0, 1.5);
    }
    90% {
        transform: scaleX(1.05) scaleY(1.05);
    }
    100% {
        wash-color-fast: color-icon-bomb;
        transform: scaleX(1.0) scaleY(1.0);
    }
}
.hud-progress-bar__defuse-nokit .hud-progress-bar-circle-icon,
.hud-progress-bar__open-survival-safe .hud-progress-bar-circle-icon
{
    wash-color-fast: color-icon-bomb;

    animation-name: hud-progress-bar-bomb-animate;
    animation-timing-function: ease-in-out;
    animation-duration:0.8s;
    animation-iteration-count:infinite;
}

@keyframes hud-progress-bar-hostage-animate
{
    0% {
        wash-color-fast: color-icon-hostage-transit;
        transform: scaleX(1.0) scaleY(1.0) translateY(-3px);
    }
    50% {
        wash-color-fast: hsv-transform(color-icon-hostage-transit, 0, 0, 1.5);
    }
    90% {
        transform: scaleX(1.05) scaleY(1.05) translateY(-3px);
    }
    100% {
        wash-color-fast: color-icon-hostage-transit;
        transform: scaleX(1.0) scaleY(1.0) translateY(-3px);
    }
}
.hud-progress-bar__pickup-hostage .hud-progress-bar-circle-icon,
.hud-progress-bar__drop-hostage .hud-progress-bar-circle-icon,
.hud-progress-bar__drop-heavyarmor .hud-progress-bar-circle-icon,
{
    wash-color-fast: color-icon-hostage-transit;

    animation-name: hud-progress-bar-hostage-animate;
    animation-timing-function: ease-in-out;
    animation-duration:0.8s;
    animation-iteration-count:infinite;
}

.hud-progress-bar-info
{
	flow-children: down;
	vertical-align: middle;
}

.hud-progress-bar-info-title
{
	font-family: Stratum2, 'Arial Unicode MS' ;
	font-weight: bold;
	font-size: 21px;
	letter-spacing: 0.5px;
	color: #ffffff;
	text-shadow-fast: 1px 1px #000000;
	margin-right: 8px;
	overflow: noclip;
}

.hud-progress-bar-info-countdown-text
{
	font-family: Stratum2 Bold Monodigit, 'Arial Unicode MS';
	font-weight: bold;
	font-size: 18px;
	horizontal-align: right;
}
