#snackbar
{

    color: #fff;    

    background-color: #00aa00;   
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;    
}

#modal-snackbar
{
    visibility: hidden;
    position:absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 38px;  
    color: #fff;
    padding-top: 5px;
    padding-left: 5px;    
}

#snackbar.show-success,#modal-snackbar.show-success
{
    background-color: #00aa00;   
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar.show-warning,#modal-snackbar.show-warning
{
    background-color: #ffaa00;   
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar.show-danger,#modal-snackbar.show-danger
{
    background-color: #ff7f7f;   
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein 
{
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein 
{
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout 
{
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout 
{
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}