/*=========================================================
 ERP UI FRAMEWORK
 File        : erp_alert.css
 Version     : 1.0
 Purpose     : Common ERP Alert & Notification Components
=========================================================*/

/*=========================================================
 COMMON ALERT GROUP
=========================================================*/
.erp-alert{
    position:relative;
    padding:8px 12px;
    margin-bottom:8px;
    font-size:var(--erp-font-size);
    border:1px solid transparent;
    border-radius:var(--erp-border-radius);
    box-sizing:border-box;
}

/*=========================================================
 SUCCESS ALERT GROUP
=========================================================*/
.erp-alert-success{
    color:#0f5132;
    background:#d1e7dd;
    border-color:#badbcc;
}

/*=========================================================
 ERROR ALERT GROUP
=========================================================*/
.erp-alert-danger{
    color:#842029;
    background:#f8d7da;
    border-color:#f5c2c7;
}

/*=========================================================
 WARNING ALERT GROUP
=========================================================*/
.erp-alert-warning{
    color:#664d03;
    background:#fff3cd;
    border-color:#ffecb5;
}

/*=========================================================
 INFORMATION ALERT GROUP
=========================================================*/
.erp-alert-info{
    color:#055160;
    background:#cff4fc;
    border-color:#b6effb;
}

/*=========================================================
 ALERT TITLE GROUP
=========================================================*/
.erp-alert-title{
    font-weight:var(--erp-font-bold);
    margin-bottom:2px;
}

/*=========================================================
 ALERT CLOSE GROUP
=========================================================*/
.erp-alert-close{
    position:absolute;
    top:6px;
    right:8px;
    border:0;
    background:transparent;
    font-size:14px;
    line-height:1;
    cursor:pointer;
}

/*=========================================================
 FORM VALIDATION GROUP
=========================================================*/
.erp-validation-error{
    display:block;
    margin-top:2px;
    font-size:11px;
    
    color:var(--erp-danger);
}

.erp-validation-success{
    display:block;
    margin-top:2px;
    font-size:11px;
    
    color:var(--erp-success);
}

/*=========================================================
 TOAST CONTAINER GROUP
=========================================================*/
.erp-toast-container{
    position:fixed;
    top:20px;
    right:20px;
    z-index:1100;
}

/*=========================================================
 TOAST GROUP
=========================================================*/
.erp-toast{
    min-width:280px;
    max-width:360px;
    padding:10px 12px;
    margin-bottom:8px;
    font-size:12px;
    background:#ffffff;
    border:1px solid var(--erp-border-color);
    border-radius:var(--erp-border-radius);
    box-shadow:0 3px 10px rgba(0,0,0,.15);
    box-sizing:border-box;
}

.erp-toast-title{
    font-weight:var(--erp-font-bold);
    margin-bottom:4px;
}

/*=========================================================
 TOAST SUCCESS GROUP
=========================================================*/
.erp-toast-success{
    border-left:4px solid var(--erp-success);
}

/*=========================================================
 TOAST ERROR GROUP
=========================================================*/
.erp-toast-danger{
    border-left:4px solid var(--erp-danger);
}

/*=========================================================
 TOAST WARNING GROUP
=========================================================*/
.erp-toast-warning{
    border-left:4px solid var(--erp-warning);
}

/*=========================================================
 TOAST INFO GROUP
=========================================================*/
.erp-toast-info{
    border-left:4px solid var(--erp-info);
}

/*=========================================================
 RESPONSIVE ALERT GROUP
=========================================================*/
@media(max-width:576px){
    .erp-toast-container{
        left:10px;
        right:10px;
    }
    .erp-toast{
        min-width:auto;
        width:100%;
    }
}