@define TimeToDisplayBonusKill: 1.0s;
.bonuspanel
{
    width: 100%;
    height: 100px;
    vertical-align:top;
    transform: translateX( -400px );
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    visibility: collapse;
    overflow: noclip;
}

.bonuspanel-bkg-TOP
{
    width: 400px;
    height: 2px;
    vertical-align: top;
    background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), to( #000000BB ) );
}

.bonuspanel-bkg-BOT
{
    width: 400px;
    height: 2px;
    vertical-align: bottom;
    background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), to( #000000BB ) );
}

.bonuspanel.bonuspanel--deathmatch
{
    visibility: visible;
}

.bonuspanel.bonuspanel--active
{
    transform: translateX( 0px );
    opacity: 1;
    sound:"UI.DeathMatchBonusAlertStart";
    sound-out:"UI.DeathMatchBonusAlertEnd";
}

.bonuspanel-bg
{
    flow-children: right;
    width: 400px;
    height: 100%;
    background-color: gradient( linear, 0% 0%, 100% 0%, from( #000000ED ), color-stop(0.8, #00000020), to( #00000000 ) );
}

.bonuspanel-content
{
    width: 480px;
    margin: 10px, 10px;
    flow-children: right;
}

.bonuspanel-title
{
    flow-children: right;
    width: 360px;
    padding-top: -2px;
}

.bonuspanel-title-text
{
    color: #c2c2c2;
    font-size: 20px;
    letter-spacing: normal;
    text-transform: uppercase;
}

.bonuspanel-title-weapon
{
    color: #ffffff;
    font-size: 20px;
    padding-left: 4px;
}

.bonuspanel-info
{
    flow-children: down;
    margin-left: 14px;
}

.bonuspanel-subinfo
{
    flow-children: right;
    width: 333px;
}

.bonuspanel-icon-container
{
    min-width: 180px;
    height: 64px;
    horizontal-align: left;
    vertical-align: center;
}

.bonuspanel-icon
{
    height: 64px;
    color: white;
    margin-top: 0px;
    horizontal-align: left;
    vertical-align: center;
}

.bonuspanel-points-container
{
    height: 28px;
    opacity:1;
    margin-top: 6px;
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.bonuspanel--bonuskill .bonuspanel-points-container
{
    opacity:0;
}

.bonuspanel-points
{
    color:#ffffff;
    font-size: 14px;
    text-align: center;
    padding-top: 6px;
    letter-spacing: normal;
}

.bonuspanel-timer
{
    flow-children: down;
    vertical-align: middle;
}

.bonuspanel-timerbar
{
    margin-top: 3px;
    height: 5px;
    width: 100%;
    background-color: #615F5F;
}

.bonuspanel-bonuspoints
{
    x:292px;
    y:40px;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    opacity: 0;
}

@keyframes 'bonuspanel-kill-animation'
{
    0%
    {
        transform: translateX(0px);
        opacity: 0;
    }
    
    20%
    {
        transform: scaleX(2) scaleY(2) translateX(100px);
        opacity: 1;
    }
    
    30%
    {
        transform: translateX(100px) scaleX(1) scaleY(1);
        opacity: 1;
    }
    
    80%
    {
        transform: translateX(100px);
        opacity:1;
    }
    
    100%
    {
        transform: translateX(0px);
        opacity:0;
    }
    
}

.bonuspanel--bonuskill .bonuspanel-bonuspoints
{
    animation-name: bonuspanel-kill-animation;
    animation-duration: TimeToDisplayBonusKill;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    sound:"UIPanorama.DeathMatchBonusKill";
}

.bonuspanel-bonuspoints-points
{
    font-family: Stratum2;
    font-size: 32px;
    font-weight: bold;
    color: white;
    vertical-align: middle;
    text-shadow: 1px 1px 1px 1.0 #000000;
    text-align: center;
    margin-left: 10px;
}

.pie
{
    width: 50px;
    height: 50px;
    horizontal-align: center;
}

.circle-background
{
    width: 100%;
    height: 100%;
    border: 6px solid #ffffff05;
    border-radius: 50%;
}

.circle
{
    width: 100%;
    height: 100%;
    border: 6px solid #ffffff;
    border-radius: 50%;
    animation-name: bonuspanel-timerbar-animation;
    animation-duration:30s;
    animation-timing-function:linear;
    animation-fill-mode:both;
}

@keyframes 'bonuspanel-timerbar-animation'
{
    0%
    {
        clip:radial(50% 50%, 0deg, 360deg);
        wash-color:#00ff00;
    }
    
    30%
    {
        wash-color:#00ff00;
    }
    
    55%
    {
        wash-color:#ffff00;
    }
    
    60%
    {
        wash-color:#ffff00;
    }
    
    85%
    {
        wash-color:#ff0000;
    }
    
    100%
    {
        clip:radial(50% 50%, 180deg, 0deg);
        wash-color:#ff0000;
    }
    
}

.bonuspanel-timer-text
{
    color: #fff;
    width: 64px;
    font-size: 24px;
    font-weight: bold;
    vertical-align: middle;
    horizontal-align: center;
    line-height: 0px;
    padding: 5px 0px 0px -1px;
    text-overflow: shrink;
    text-align: center;
}