#taguiNotifications
{
    position:fixed;
    padding:15px;

    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:0;
    left:0;
}
#taguiNotifications.tr .notification, #taguiNotifications.br .notification
{
    /* keeps display block without 100% width */
    float: right;
    clear: right;
}

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

/* 
-----------------------------------------------------------------------
--  Notification Container
-----------------------------------------------------------------------
*/
#taguiNotifications .notification
{
    position: relative;
    box-sizing:border-box;

    /*max-width:300px;*/

    margin-bottom:5px;
    padding:17px 20px 17px 50px;
    border-radius:5px;
    display:none;

    font-size:0.95em;
    font-family: arial;

    cursor: pointer;
}


/* 
-----------------------------------------------------------------------
--  Success Notification
-----------------------------------------------------------------------
*/
#taguiNotifications .notification.success
{
    color: #FFF;
    background-color:rgba(80,193,78,.92);
    
}

    #taguiNotifications .notification.success:before {
        content: '\f00c';
        font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS';
        font-size: 28px;
        position: absolute;
        margin-top: -8px;
        margin-left: -35px;
        color: #a0f59f;
    }

/* 
-----------------------------------------------------------------------
--  Success Warning
-----------------------------------------------------------------------
*/
#taguiNotifications .notification.warning
{
    color: #FFF;
    background-color:rgba(255,188,45,.92);
    
}

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


/* 
-----------------------------------------------------------------------
--  Success Error
-----------------------------------------------------------------------
*/
#taguiNotifications .notification.error
{
    color: #FFF;
    background-color:rgba(195,37,37,.92);
    
}

    #taguiNotifications .notification.error:before {
        content: '\f057';
        font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS';
        font-size: 28px;
        position: absolute;
        margin-top: -6px;
        margin-left: -37px;
        background-color: #FFF;
        color: #f00;
        border-radius: 25px;
        height: 28px;
        padding: 0px 2px;
    }

/*
-----------------------------------------------------------------------
--  Info Notification
-----------------------------------------------------------------------
*/
#taguiNotifications .notification.info
{
    color: #FFF;
    background-color:rgba(49, 143, 231, 0.92);
    
}

    #taguiNotifications .notification.info:before {
        content: '\f05a';
        font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS';
        font-size: 28px;
        position: absolute;
        margin-top: -8px;
        margin-left: -35px;
        color: #b9d8ff;
    }