#taguiNotifications
{
    position:fixed;

    z-index:2000;
}

/* 
-----------------------------------------------------------------------
--  Container Positioning
-----------------------------------------------------------------------
*/
#taguiNotifications.tr
{
    top:0;
    right:0;
}
#taguiNotifications.tl
{
    top:0;
    left:0;
}
#taguiNotifications.br
{
    bottom:0;
    right:0;
}
#taguiNotifications.bl
{
    bottom:20px;
    left:15px;
}
#taguiNotifications.tr .notification, #taguiNotifications.br .notification
{
    /* keeps display block without 100% width */
    float: right;
    clear: right;
    margin-right:10px;
}

#taguiNotifications.tl .notification, #taguiNotifications.bl .notification
{
    /* keeps display block without 100% width */
    float: left;
    clear: left;
    margin-left:10px;
}

/* 
-----------------------------------------------------------------------
--  Notification Container
-----------------------------------------------------------------------
*/
    #taguiNotifications .notification {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        /*max-width:300px;*/

        margin-top: 5px;
        margin-bottom: 5px;
        padding: 25px 30px 25px 60px;
        border-radius: 4px;
        box-shadow: 0 0 8px rgba(0,0,0,.35);
        background-color: #FFF;
        display: none;
        color: #555;
        font-size: 0.9em;
        font-family: arial;
        cursor: pointer;
    }

#taguiNotifications .notification .progressbr
{
    position:absolute;
    bottom:0;
    left:0;
    height:3px;
}


/* 
-----------------------------------------------------------------------
--  Success Notification
-----------------------------------------------------------------------
*/
#taguiNotifications .notification.success
{
    border:1.5px solid #3ba939;
    
}

#taguiNotifications .notification.success .progressbr
{
    background-color:#3ba939;
}

#taguiNotifications .notification.success:before {
    content: '\f058';
    font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS';
    font-size:18px;
    position:absolute;
    margin-top:-2px;
    margin-left:-32px;
    color:#3ba939;
}

/* 
-----------------------------------------------------------------------
--  Success Warning
-----------------------------------------------------------------------
*/
#taguiNotifications .notification.warning
{
    border:1.5px solid #FF9800;
}

#taguiNotifications .notification.warning .progressbr
{
    background-color:#FF9800;
}

#taguiNotifications .notification.warning:before {
    content: '\f071';
    font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS';
    font-size:18px;
    position:absolute;
    margin-top:-2px;
    margin-left:-32px;
    color:#FF9800;
}


/* 
-----------------------------------------------------------------------
--  Success Error
-----------------------------------------------------------------------
*/
#taguiNotifications .notification.error
{
    border:1.5px solid #851b1b;
}

#taguiNotifications .notification.error .progressbr
{
    background-color:rgba(133,27,27,1);
}

#taguiNotifications .notification.error:before {
    content: '\f057';
    font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS';
    font-size:18px;
    position:absolute;
    margin-top:-2px;
    margin-left:-32px;
    color:#851b1b;
}

/*
-----------------------------------------------------------------------
--  Info Notification
-----------------------------------------------------------------------
*/
#taguiNotifications .notification.info
{
   border:1.5px solid #318fe7; 
}

#taguiNotifications .notification.info .progressbr
{
    background-color:#318fe7;
}

#taguiNotifications .notification.info:before {
    content: '\f05a';
    font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS';
    font-size:18px;
    position:absolute;
    margin-top:-2px;
    margin-left:-32px;
    color:#318fe7;
}