/*-------------------------------------------*\
    Alerts Personalizados
\*-------------------------------------------*/

.alert{
    font-family:var(--font)!important;
    position: absolute;    
    border-radius: 12px;
    background: white;    
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    z-index:2000;
}

.alert.pos-top-left,
.alert.pos-top-right,
.alert.pos-top-center,
.alert.pos-bottom-left,
.alert.pos-bottom-right,
.alert.pos-bottom-center,
.alert.pos-middle{
    padding: 12px 10px 20px 10px;
}

.alert.pos-top-left,
.alert.pos-bottom-left{
    border-right: 7px solid #0275d8;
    left: 10px;
    overflow: hidden;
}

.alert.error.pos-top-left,
.alert.error.pos-bottom-left{
    border-right: 7px solid #ca0707;
    left: 10px;
    overflow: hidden;
}

.alert.warning.pos-top-left,
.alert.warning.pos-bottom-left{
    border-right: 7px solid #f6c31a;
    left: 10px;
    overflow: hidden;
}

.alert.pos-top-right,
.alert.pos-bottom-right{
    border-left: 7px solid #0275d8;
    right: 15px;        
}

.alert.error.pos-top-right,
.alert.error.pos-bottom-right{
    border-left: 7px solid #ca0707;
    right: 15px;        
}

.alert.warning.pos-top-right,
.alert.warning.pos-bottom-right{
    border-left: 7px solid #f6c31a;
    right: 15px;        
}

.alert.pos-top-left,
.alert.pos-top-right,
.alert.pos-top-center,
.alert.pos-bottom-left,
.alert.pos-bottom-right,
.alert.pos-bottom-center{
    overflow: hidden;
}

.alert.pos-bottom-center{
    border-bottom: 7px solid #0275d8; 
}

.alert.error.pos-bottom-center{
    border-bottom: 7px solid #ca0707; 
}

.alert.pos-top-center{
    border-top: 7px solid #0275d8;
}

.alert.error.pos-top-center{
    border-top: 7px solid #ca0707;
}

.alert.pos-top-left,
.alert.pos-top-center,
.alert.pos-top-right{
    top: 56px;    
}

.alert.pos-bottom-left,
.alert.pos-bottom-center,
.alert.pos-bottom-right{
    bottom: 25px;
}

/* Para el efecto de deslizar*/
.alert.pos-top-left,
.alert.pos-top-right,
.alert.pos-bottom-left,
.alert.pos-bottom-right,
.alert.pos-top-center,
.alert.pos-bottom-center{
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265,1.35);    
}

.alert.pos-top-right,
.alert.pos-bottom-right{
    transform: translateX(calc(100% + 35px));
}

.alert.pos-top-left,
.alert.pos-bottom-left{
    transform: translateX(calc(-100% - 35px));
}

.alert.pos-top-center{
    transform: translateY(calc(-100% - 70px));
}

.alert.pos-bottom-center{
    transform: translateY(calc(100% + 60px));
}

.alert.pos-top-left .content-alert,
.alert.pos-top-center .content-alert,
.alert.pos-top-right .content-alert,
.alert.pos-bottom-left .content-alert,
.alert.pos-bottom-center .content-alert,
.alert.pos-bottom-right .content-alert,
.alert.pos-middle .content-alert{
    display: flex;
    align-items: center;
}

.alert.pos-middle .content-alert{
    flex-direction: column;
}

.alert.pos-top-left .content-alert .check,
.alert.pos-top-center .content-alert .check,
.alert.pos-top-right .content-alert .check,
.alert.pos-bottom-left .content-alert .check,
.alert.pos-bottom-center .content-alert .check,
.alert.pos-bottom-right .content-alert .check,
.alert.pos-middle .content-alert .check,
.alert.pos-top-left .content-alert .error,
.alert.pos-top-center .content-alert .error,
.alert.pos-top-right .content-alert .error,
.alert.pos-bottom-left .content-alert .error,
.alert.pos-bottom-center .content-alert .error,
.alert.pos-bottom-right .content-alert .error,
.alert.pos-middle .content-alert .error,
.alert.pos-top-left .content-alert .warning,
.alert.pos-top-center .content-alert .warning,
.alert.pos-top-right .content-alert .warning,
.alert.pos-bottom-left .content-alert .warning,
.alert.pos-bottom-center .content-alert .warning,
.alert.pos-bottom-right .content-alert .warning,
.alert.pos-middle .content-alert .warning{
    display: flex;
    align-items: center;
    justify-content: center;       
    border-radius: 50%;
}

.alert.pos-top-left .content-alert .check,
.alert.pos-top-center .content-alert .check,
.alert.pos-top-right .content-alert .check,
.alert.pos-bottom-left .content-alert .check,
.alert.pos-bottom-center .content-alert .check,
.alert.pos-bottom-right .content-alert .check,
.alert.pos-top-left .content-alert .error,
.alert.pos-top-center .content-alert .error,
.alert.pos-top-right .content-alert .error,
.alert.pos-bottom-left .content-alert .error,
.alert.pos-bottom-center .content-alert .error,
.alert.pos-bottom-right .content-alert .error,
.alert.pos-top-left .content-alert .warning,
.alert.pos-top-center .content-alert .warning,
.alert.pos-top-right .content-alert .warning,
.alert.pos-bottom-left .content-alert .warning,
.alert.pos-bottom-center .content-alert .warning,
.alert.pos-bottom-right .content-alert .warning{
    height: 30px;
    width: 30px;    
    color: white;
    font-size: 18px;
}

.alert.pos-top-left .content-alert .check,
.alert.pos-top-center .content-alert .check,
.alert.pos-top-right .content-alert .check,
.alert.pos-bottom-left .content-alert .check,
.alert.pos-bottom-center .content-alert .check,
.alert.pos-bottom-right .content-alert .check{
    background-color: #07ca27;
}

.alert.pos-top-left .content-alert .error,
.alert.pos-top-center .content-alert .error,
.alert.pos-top-right .content-alert .error,
.alert.pos-bottom-left .content-alert .error,
.alert.pos-bottom-center .content-alert .error,
.alert.pos-bottom-right .content-alert .error{    
    background-color: #ca0707;    
}

.alert.pos-top-left .content-alert .warning,
.alert.pos-top-center .content-alert .warning,
.alert.pos-top-right .content-alert .warning,
.alert.pos-bottom-left .content-alert .warning,
.alert.pos-bottom-center .content-alert .warning,
.alert.pos-bottom-right .content-alert .warning{    
    background-color: #f6c31a;    
}

.alert.pos-middle .content-alert .check,
.alert.pos-middle .content-alert .error,
.alert.pos-middle .content-alert .warning{
    margin-top:10px;    
    height: 45px;
    width: 45px;
    background-color: white;    
    font-size: 22px;
    animation: bote .5s alternate infinite ease-in;
}

.alert.pos-middle .content-alert .check{
    border: 2px solid #07ca27;    
    color: #07ca27;
}

.alert.pos-middle .content-alert .error{    
    border: 2px solid #ca0707;    
    color: #ca0707;    
}

.alert.pos-middle .content-alert .warning{    
    border: 2px solid #f6c31a;    
    color: #f6c31a;    
}

.alert.pos-top-left .cerrar,
.alert.pos-top-right .cerrar,
.alert.pos-bottom-left .cerrar,
.alert.pos-bottom-right .cerrar,
.alert.pos-top-center .cerrar,
.alert.pos-bottom-center .cerrar,
.alert.pos-middle .cerrar{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

.alert.pos-top-left .cerra:hover,
.alert.pos-top-right .cerrar:hover,
.alert.pos-bottom-left .cerrar:hover,
.alert.pos-bottom-right .cerrar:hover,
.alert.pos-top-center .cerrar:hover,
.alert.pos-bottom-center .cerrar:hover,
.alert.pos-middle .cerrar:hover{
    opacity: 1;
}

.alert.pos-top-left .buttons,
.alert.pos-top-right .buttons,
.alert.pos-bottom-left .buttons,
.alert.pos-bottom-right .buttons,
.alert.pos-top-center .buttons,
.alert.pos-bottom-center .buttons,
.alert.pos-middle .buttons{
    display: none;
}

.alert.pos-middle.confirm .buttons,
.alert.pos-middle.okcancel .buttons{
    display: flex;
    width: 100%;
    justify-content: center;
}

.alert.pos-middle.okcancel .buttons.left,
.alert.pos-middle.confirm .buttons.left{
    justify-content: start;
}

.alert.pos-middle.okcancel .buttons.center,
.alert.pos-middle.confirm .buttons.center{
    justify-content: center;
}

.alert.pos-middle.okcancel .buttons.right,
.alert.pos-middle.confirm .buttons.right{
    justify-content: end;
}

.alert.pos-middle.confirm .buttons .abortar{
    display:none;
}

.alert.pos-top-left .content-alert .mensaje,
.alert.pos-top-center .content-alert .mensaje,
.alert.pos-top-right .content-alert .mensaje,
.alert.pos-bottom-left .content-alert .mensaje,
.alert.pos-bottom-center .content-alert .mensaje,
.alert.pos-bottom-right .content-alert .mensaje,
.alert.pos-middle .content-alert .mensaje{
    display: flex;    
    flex-direction: column;
    margin: 0 20px;
    padding-right: 5px;
    max-width: 250px;
}

.alert.pos-middle .content-alert .mensaje{
    align-items: center;
    margin-bottom: 10px;
}

.alert.pos-top-left .mens-titulo,
.alert.pos-top-right .mens-titulo,
.alert.pos-bottom-left .mens-titulo,
.alert.pos-bottom-right .mens-titulo,
.alert.pos-top-center .mens-titulo,
.alert.pos-bottom-center .mens-titulo,
.alert.pos-middle .mens-titulo,
.alert.error.pos-top-left .mens-titulo,
.alert.error.pos-top-right .mens-titulo,
.alert.error.pos-bottom-left .mens-titulo,
.alert.error.pos-bottom-right .mens-titulo,
.alert.error.pos-top-center .mens-titulo,
.alert.error.pos-bottom-center .mens-titulo,
.alert.error.pos-middle .mens-titulo{
    font-weight: var(--font-semibold);    
}

.alert.pos-top-left .mens-titulo,
.alert.pos-top-right .mens-titulo,
.alert.pos-bottom-left .mens-titulo,
.alert.pos-bottom-right .mens-titulo,
.alert.pos-top-center .mens-titulo,
.alert.pos-bottom-center .mens-titulo,
.alert.pos-middle .mens-titulo{
    color: #333;
}

.alert.error.pos-top-left .mens-titulo,
.alert.error.pos-top-right .mens-titulo,
.alert.error.pos-bottom-left .mens-titulo,
.alert.error.pos-bottom-right .mens-titulo,
.alert.error.pos-top-center .mens-titulo,
.alert.error.pos-bottom-center .mens-titulo,
.alert.error.pos-middle .mens-titulo{
    color: #ca0707;
}

.alert.warning.pos-top-left .mens-titulo,
.alert.warning.pos-top-right .mens-titulo,
.alert.warning.pos-bottom-left .mens-titulo,
.alert.warning.pos-bottom-right .mens-titulo,
.alert.warning.pos-top-center .mens-titulo,
.alert.warning.pos-bottom-center .mens-titulo,
.alert.warning.pos-middle .mens-titulo{
    color: #f6c31a;
}

.alert.pos-middle .mens-titulo{
    font-size: 22px;
}

.alert.pos-top-left .mens-cont,
.alert.pos-top-right .mens-cont,
.alert.pos-bottom-left .mens-cont,
.alert.pos-bottom-right .mens-cont,
.alert.pos-top-center .mens-cont,
.alert.pos-bottom-center .mens-cont,
.alert.pos-middle .mens-cont{
    font-weight: var(--font-light);
    overflow-wrap: break-word;
}

.alert.error.pos-top-left .mens-cont,
.alert.error.pos-top-right .mens-cont,
.alert.error.pos-bottom-left .mens-cont,
.alert.error.pos-bottom-right .mens-cont,
.alert.error.pos-top-center .mens-cont,
.alert.error.pos-bottom-center .mens-cont,
.alert.error.pos-middle .mens-cont{
    color: #e23e3e;
    overflow-wrap: break-word;
}

.alert.pos-top-left .barra-progreso,
.alert.pos-top-center .barra-progreso,
.alert.pos-top-right .barra-progreso,
.alert.pos-bottom-left .barra-progreso,
.alert.pos-bottom-center .barra-progreso,
.alert.pos-bottom-right .barra-progreso{
    position: absolute;
    height: 3px;
    width: 100%;
    background: #ddd;
}

.alert.pos-top-left .barra-progreso,
.alert.pos-top-center .barra-progreso,
.alert.pos-top-right .barra-progreso{    
    bottom: 0;       
}

.alert.pos-bottom-left .barra-progreso,
.alert.pos-bottom-center .barra-progreso,
.alert.pos-bottom-right .barra-progreso{    
    top: 0;       
}

.alert.pos-top-center .barra-progreso,
.alert.pos-bottom-center .barra-progreso,
.alert.pos-bottom-right .barra-progreso,
.alert.pos-top-right .barra-progreso{
    left: 0;
}

.alert.pos-bottom-left .barra-progreso,
.alert.pos-top-left .barra-progreso{
    right: 0; 
}

.alert.pos-top-left .barra-progreso::before,
.alert.pos-top-center .barra-progreso::before,
.alert.pos-top-right .barra-progreso::before,
.alert.pos-bottom-left .barra-progreso::before,
.alert.pos-bottom-center .barra-progreso::before,
.alert.pos-bottom-right .barra-progreso::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;    
}

.alert.pos-top-left .barra-progreso::before,
.alert.pos-top-center .barra-progreso::before,
.alert.pos-top-right .barra-progreso::before,
.alert.pos-bottom-left .barra-progreso::before,
.alert.pos-bottom-center .barra-progreso::before,
.alert.pos-bottom-right .barra-progreso::before{
    background-color: #0275d8;
}

.alert.error.pos-top-left .barra-progreso::before,
.alert.error.pos-top-center .barra-progreso::before,
.alert.error.pos-top-right .barra-progreso::before,
.alert.error.pos-bottom-left .barra-progreso::before,
.alert.error.pos-bottom-center .barra-progreso::before,
.alert.error.pos-bottom-right .barra-progreso::before{
    background-color: #ca0707;
}

.alert.warning.pos-top-left .barra-progreso::before,
.alert.warning.pos-top-center .barra-progreso::before,
.alert.warning.pos-top-right .barra-progreso::before,
.alert.warning.pos-bottom-left .barra-progreso::before,
.alert.warning.pos-bottom-center .barra-progreso::before,
.alert.warning.pos-bottom-right .barra-progreso::before{
    background-color: #f6c31a;
}

.alert.pos-top-left .barra-progreso::before,
.alert.pos-top-center .barra-progreso::before,
.alert.pos-top-right .barra-progreso::before{    
    bottom: 0;  
}

.alert.pos-bottom-left .barra-progreso::before,
.alert.pos-bottom-center .barra-progreso::before,
.alert.pos-bottom-right .barra-progreso::before{   
    top: 0;
}

.alert.pos-top-center .barra-progreso::before,
.alert.pos-bottom-center .barra-progreso::before,
.alert.pos-bottom-right .barra-progreso::before,
.alert.pos-top-right .barra-progreso::before{
    right: 0;
}

.alert.pos-bottom-left .barra-progreso::before,
.alert.pos-top-left .barra-progreso::before{
    left: 0;
}

.pos-top-center .barra-progreso.active::before,
.pos-bottom-center .barra-progreso.active::before,
.pos-bottom-right .barra-progreso.active::before,
.pos-top-right .barra-progreso.active::before{
    animation: cargarR 4s linear forwards;
}

.pos-bottom-left .barra-progreso.active::before,
.pos-top-left .barra-progreso.active::before{
    animation: cargarL 4s linear forwards;
}

.alert.active{
    transform: translateX(0%);
    transform: translateY(0%);
}

.alert.pos-middle{
    opacity: 0;
    transition: .3s ease all;
    visibility: hidden;
    transform: scale(0.7); 
}

.alert.pos-middle.active{
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}
/* Animaciones */

@keyframes bote{
    0%{
        transform: translateY(-15%);
    }
    100%{
        transform: translateX(0%);
    }
}

@keyframes cargarR{
    100%{
        right: 100%;
    }
}

@keyframes cargarL{
    100%{
        left: 100%;
    }
}