.hud-progress-bar
{
    opacity: 0;
    width: 500px;
    height: 120px;
    horizontal-align: center;
    background-color: hud-blur-bg-color;
    border-radius: 10px;
}

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

@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%;
}

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

.hud-progress-bar-circle
{
    width:95px;
    height:95px;
    margin: 10px;
    margin-right: 20px;
    -s2-mix-blend-mode: additive;
}

.hud-progress-bar-circle-background
{
    width: 99px;
    height: 99px;
    border: 8px solid #80808040;
    border-radius: 50%;
}

@keyframes 'circle-full-to-empty'
{
    0%
    {
        clip:radial(50% 50%, 180deg, 0deg);
        wash-color: red;
    }
    
    50%
    {
        wash-color: yellow;
    }
    
    100%
    {
        clip:radial(50% 50%, 0deg, 360deg);
        wash-color: 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: 50px;
    width: height-percentage(100);
    img-shadow: 1px 1px 2px #000000;
}

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

.hud-progress-bar__defuse .hud-progress-bar-circle-icon
{
    wash-color: 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: color-icon-bomb;
        transform: scaleX(1.0) scaleY(1.0);
    }
    
    50%
    {
        wash-color: hsv-transform(color-icon-bomb, 0, 0, 1.5);
    }
    
    90%
    {
        transform: scaleX(1.05) scaleY(1.05);
    }
    
    100%
    {
        wash-color: 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: 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: color-icon-hostage-transit;
        transform: scaleX(1.0) scaleY(1.0) translateY(-3px);
    }
    
    50%
    {
        wash-color: hsv-transform(color-icon-hostage-transit, 0, 0, 1.5);
    }
    
    90%
    {
        transform: scaleX(1.05) scaleY(1.05) translateY(-3px);
    }
    
    100%
    {
        wash-color: 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: 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;
    margin: 0px 10px;
    height: 80%;
}

.hud-progress-bar-info-title
{
    font-family: Stratum2, 'Arial Unicode MS' ;
    font-weight: bold;
    font-size: 18px;
    color: #ffffff;
    margin-right: 8px;
    text-overflow: shrink;
    -s2-mix-blend-mode: additive;
}

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

.hud-progress-bar-side
{
    background-color: white;
    width: 4px;
    height: 100%;
    wash-color: gray;
    box-shadow: rgba(0,0,0, 0.452) 0px 0px 160px 2px;
    -s2-mix-blend-mode: additive;
    animation-name: hud-progress-bar-sides-animate;
    animation-timing-function: ease-in-out;
    animation-iteration-count:1;
}

.hud-progress-bar__defuse-nokit .hud-progress-bar-side
{
    wash-color: gray;
    box-shadow: rgba(128, 128, 128, 0.452) 0px 0px 160px 2px;
}

@keyframes 'side-empty-to-full'
{
    0%
    {
        wash-color: red;
        box-shadow: rgba(255, 0, 0, 0.2) 0px 0px 0px 2px;
    }
    
    50%
    {
        wash-color: yellow;
        box-shadow: rgba(255, 255, 0, 0.2) 0px 0px 400px 2px;
    }
    
    100%
    {
        wash-color: green;
        box-shadow: rgba(0, 255, 0, 0.2) 0px 0px 800px 2px;
    }
    
}