/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 15, 2017, 5:13:05 PM
    Author     : zarkov
*/
.admin .flash_notifications{
    bottom: 60px;
}
.flash_notifications{
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000000;
}
.flash_notifications .flash_notification{
    background: #55505a;
    padding: 12px 0 12px 16px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    width: 390px;
    position: relative;
    margin-bottom: 8px;
    border-radius: 3px;
}
.flash_notifications .flash_notification img{
    float: left;
/*    margin-right: 32px;
    width: auto;
    height: 28px;*/
    height: auto;
    width: 16%;
    margin-right: 16px;
}
.flash_notifications .flash_notification .flash_message{
    width: calc(85% - 16px);
    margin-left: 16%;
}
.flash_notifications .flash_notification i.icon-close-notification{
    display: block;
    width: 12px;
    height: 12px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 40px;
    position: absolute;
    top: 8px;
    right: 8px;
    background-image: url(../images/symbols/icon-close-white.svg);
    cursor: pointer;
    z-index: 100010;
}
.flash_notifications .flash_notification p{
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    color: #ffffff;
    margin: 0;
}
.hideMe {
    -moz-animation: cssAnimation 0.3s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0.3s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0.3s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0.3s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        overflow:hidden;
        opacity:0;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        opacity: 0;
        visibility:hidden;
    }
}
@media (max-width: 480px){
    .admin .flash_notifications{
        bottom:5px;
        width: calc(100% - 16px);
    }
    .admin .flash_notifications .flash_notification{
        width: 100%;
        right: 8px;
    }
}