﻿body {
}

.alert_neg
{
    padding: 0; 
    text-align: center;
    background: #FFBABA;
    color: #FF4444;
    font-family: Roboto;
    font-size: 11pt;
    background-repeat: no-repeat;
    background-position: 10px center;
    -webkit-animation: alert_animation_negative .8s linear;
    box-shadow: inset 0 -1px 8px rgba(0,0,0,.2);
    line-height: 46px;
    /*height: 46px;*/
    vertical-align: middle;
}

.alert_pos
{
    line-height: 46px;
    /*height: 46  px;*/
    text-align: center;
    background: #DFF2BF;
    color: #669900;
    font-family: Roboto;
    font-size: 11pt; 
    background-repeat: no-repeat;
    background-position: 10px center;
    box-shadow: inset 0 -1px 8px rgba(0,0,0,.1);
    position: relative;
    overflow: hidden;
    -webkit-animation: alert_animation_positive .8s linear;
}

.alert_neu
{       
    line-height: 46px;
    text-align: center;
    background: #b5b5b5;
    color: #7d7878;
    font-family: Roboto;
    font-size: 11pt; 
    background-repeat: no-repeat;
    background-position: 10px center;
    box-shadow: inset 0 -1px 8px rgba(0,0,0,.1);
    position: relative;
    overflow: hidden;
    -webkit-animation: alert_animation_neutro .8s linear;
}

@-webkit-keyframes alert_animation_positive
{
    0%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #99CC00;
    }
    15%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 4px #99CC00;
    }
    30%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #99CC00;
    }
    45%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 8px #99CC00;
    }
    70%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #99CC00;
    }
    85%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 4px #99CC00;
    }
    100%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #99CC00;
    }
}

@-webkit-keyframes alert_animation_negative
{
    0%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #CC0000;
    }
    15%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 4px #CC0000;
    }
    30%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #CC0000;
    }
    45%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 8px #CC0000;
    }
    70%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #CC0000;
    }
    85%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 4px #CC0000;
    }
    100%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #CC0000;
    }
}

@-webkit-keyframes alert_animation_neutro
{
    0%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #525252;
    }
    15%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 4px #525252;
    }
    30%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #525252;
    }
    45%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 8px #525252;
    }
    70%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #525252;
    }
    85%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 4px #525252;
    }
    100%
    {
        box-shadow: inset 0 -1px 8px rgba(0,0,0,.1), inset 0 0 0 0px #525252;
    }
}