#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: 'FontAwesome', '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: 'FontAwesome', '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: 'FontAwesome', '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: 'FontAwesome', 'Arial Unicode MS';
    font-size:28px;
    position:absolute;
    margin-top:-8px;
    margin-left:-35px;
    color:#b9d8ff;
}