notificationManager.css

@keyframes progress-shrink
{
    0%
    {
        width:100%;
    }

    100%
    {
        width:0%;
    }
}

@keyframes notify-in
{
    0%   
    {
        left:-50px;
        opacity:0;
    }

    100% 
    {
        left:0px;
        opacity:1;
    }

}

@keyframes notify-in-out 
{
    0%   
    {
        left:-50px;
        opacity:0;
    }
    
    5% 
    {
        left:0px;
        opacity:1;
    }

    95% 
    {
        left:0px;
        opacity:1;
    }

    100%   
    {
        left:-50px;
        opacity:0;
    }
}

#notificationsContainer
{
    position: fixed;
    max-width: 310px;
    z-index:10;
    margin: 5px;
}

.bottomleft
{
    left: 0;
    bottom: 0;
}

.bottomright
{
    right: 0;
    bottom: 0;
}

.topright
{
    right: 0;
    top: 0;
}

.topleft
{
    left: 0;
    top: 0;
}

#notificationsContainer .notification
{
    float: left;
    position: relative;
    /* top: 0; */
    /* right: 0; */
    margin: 3px;
    background-color: #B5D3ED;
    width: 300px;
    border-radius: 5px;

    -webkit-box-shadow: 0px 0px 53px -7px rgba(101,101,101,0.3);
    -moz-box-shadow: 0px 0px 53px -7px rgba(101,101,101,0.3);
    box-shadow: 0px 0px 53px -7px rgba(101,101,101,0.3);
}

.n-animate-in
{
    -webkit-animation-name: notify-in; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    animation-name: notify-in;
    animation-duration: 0.5s;

    animation-timing-function: linear;
}

.n-animate
{
    -webkit-animation-name: notify-in-out; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */
    animation-name: notify-in-out;
    animation-duration: 6s;

    animation-timing-function: linear;
}

.notification .pad
{
    padding: 10px;
    margin-bottom:10px;
}

.notification .pad .message
{
    display:inline-block;
    float:left;
    width:calc(100% - 15px);
}

.notification .pad .close
{
    display:inline-block;
    float:right;
    width:15px;
}

.close-btn
{
    height:10px;
    width:10px;
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 41.756 41.756' style='enable-background:new 0 0 41.756 41.756;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M27.948,20.878L40.291,8.536c1.953-1.953,1.953-5.119,0-7.071c-1.951-1.952-5.119-1.952-7.07,0L20.878,13.809L8.535,1.465 c-1.951-1.952-5.119-1.952-7.07,0c-1.953,1.953-1.953,5.119,0,7.071l12.342,12.342L1.465,33.22c-1.953,1.953-1.953,5.119,0,7.071 C2.44,41.268,3.721,41.755,5,41.755c1.278,0,2.56-0.487,3.535-1.464l12.343-12.342l12.343,12.343 c0.976,0.977,2.256,1.464,3.535,1.464s2.56-0.487,3.535-1.464c1.953-1.953,1.953-5.119,0-7.071L27.948,20.878z' fill='%23FFFFFF'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size: 10px 10px;
}

.notification .progressContainer
{
    clear: both;
    float: left;
    padding-top: 10px;
    width: 100%;
    text-align:left;
}

.notification .progressContainer .progress
{
    background-color: #98BFE0;
    min-height: 4px;
    width: 100%;
    border-radius: 10px;
    bottom: 0px; 
}

.progress-animate
{
    
    -webkit-animation-name: progress-shrink; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */
    animation-name: progress-shrink;
    animation-duration: 6s;

    animation-timing-function: linear;
}