/* ================================ ESTILOS GENERALES ===================================== */
/* Alerta 1 */
.alerts.active{
    display: none;
}
.alerts{
    position: absolute;
    right: 0;
    z-index: 1;
    display: grid;
}
.toast{
    position: sticky;
    z-index: 2;
    background: #fff;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.toast.active{
    display: none;
}
.toast .toast-content{
    display: flex;
    align-items: center;
}
.toast.alert{
    opacity: 80;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.toast-content .check{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4070f4;
    color: #fff;
    border-radius: 50%;
}
.toast-content .message{
    display: flex;
    flex-direction: column;
}
.message .text{
    font-weight: 400;;
    color: #666666;
}
.message .text.text-1{
    font-weight: 600;
    color: #333;
    text-align: initial;
}
.toast .close{
    position: absolute;
    cursor: pointer;
    opacity: 0.7;
}
.toast .close:hover{
    opacity: 1;
}
.toast .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ddd;
}
.toast .progress:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #4070f4;
}
.progress.active:before{
    animation: progress 7s linear forwards;
}
@keyframes progress {
    100%{
        right: 100%;
    }
}

/* Alerta 2 */
.validation{
    position: sticky;
    background: #fff;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.validation.active{
    opacity: 0;
    display: none;
}
.validation.alert{
    opacity: 80;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.validation-content{
    display: flex;
    align-items: center;
}
.validation-content .key{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #28a745;
    color: #fff;
    border-radius: 50%;
}
.validation-content .clean{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4070f4;
    color: #fff;
    border-radius: 50%;
}
.validation-content .message{
    display: flex;
    flex-direction: column;
}
.validation .closeValidation{
    position: absolute;
    cursor: pointer;
    opacity: 0.7;
}
.validation .closeValidation:hover{
    opacity: 1;
}
.validation .progress-validation{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}
.validation .progress-validation:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: red;
}
.progress-validation.active:before{
    animation: progress 7s linear forwards;
}

/* Alerta 3 */
.incorrect{
    position: sticky;
    background: #fff;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.incorrect.active{
    opacity: 0;
    display: none;
}
.incorrect.alert{
    opacity: 80;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.incorrect .incorrect-content{
    display: flex;
    align-items: center;
}
.incorrect-content .key{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
    color: #fff;
    border-radius: 50%;
}
.incorrect-content .message{
    display: flex;
    flex-direction: column;
}
.incorrect .closeIncorrect{
    position: absolute;
    cursor: pointer;
    opacity: 0.7;
}
.incorrect .closeIncorrect:hover{
    opacity: 1;
}
.incorrect .progress-incorrect{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}
.incorrect .progress-incorrect:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: red;
}
.progress-incorrect.active:before{
    animation: progress 7s linear forwards;
}

/* ================================ CALIDAD NORMAL, HD ===================================== */
@media screen and (max-width: 1080px), screen and (min-width: 1080px){
    .alerts{
        grid-gap: 10px;
        margin: 20px;
        width: 370px;
    }
    /* Alerta Captcha */
    .toast{
        top: 25px;
        padding: 10px 20px 10px 20px;
    }
    .toast.alert{
        right: 25px;
    }
    .toast-content .check{
        height: 35px;
        width: 35px;
        font-size: 20px;
    }
    .toast-content .message{
        margin: 0 20px;
    }
    .message .text{
        font-size: 1rem;
    }
    .toast .close{
        top: 10px;
        right: 15px;
        padding: 5px;
    }
    .toast .progress{
        height: 3px;
    }
    /* Alerta Validacion */
    .validation{
        top: 25px;
        z-index: 2;
        padding: 10px 20px 10px 20px;
    }
    .validation.alert{
        right: 25px;
    }
    .validation-content .key{
        height: 35px;
        width: 35px;
        font-size: 20px;
    }
    .validation-content .clean{
        height: 35px;
        width: 35px;
        font-size: 20px;
    }
    .validation-content .message{
        margin: 0 20px;
    }
    .validation .closeValidation{
        top: 10px;
        right: 15px;
        padding: 5px;
    }
    .validation .progress-validation{
        height: 3px;
        width: 100%;
    }
    /* Alerta Incorrecto */
    .incorrect{
        top: 25px;
        z-index: 2;
        padding: 10px 20px 10px 20px;
    }
    .incorrect.alert{
        right: 25px;
    }
    .incorrect-content .key{
        height: 35px;
        width: 35px;
        font-size: 20px;
    }
    .incorrect-content .message{
        margin: 0 20px;
    }
    .incorrect .closeIncorrect{
        top: 10px;
        right: 15px;
        padding: 5px;
    }
    .incorrect .progress-incorrect{
        height: 3px;
        width: 100%;
    }
}
/* ================================ CALIDAD FULL HD ===================================== */
@media screen and (min-width: 1920px){
    .alerts{
        grid-gap: 15px;
        margin: 30px;
        width: 540px;
    }
    /* Alerta Captcha */
    .toast{
        border-radius: 16px;
        padding: 30px 45px 30px 35px;
        box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
        border-left: 8px solid #4070f4;
    }
    .toast.alert{
        right: 35px;
    }
    .toast-content .check{
        height: 55px;
        width: 55px;
        font-size: 30px;
    }
    .toast-content .message{
        margin: 0 30px;
    }
    .message .text{
        font-size: 1.2rem;
    }
    .toast .close{
        top: 20px;
        right: 20px;
        padding: 10px;
        font-size: 25px;
    }
    .toast .progress{
        height: 5px;
    }
    /* Alerta Validacion */
    .validation.alert{
        right: 35px;
    }
    .validation-content .key{
        height: 55px;
        width: 55px;
        font-size: 30px;
    }
    .validation-content .clean{
        height: 55px;
        width: 55px;
        font-size: 30px;
    }
    .validation-content .message{
        margin: 0 30px;
    }
    .validation .closeValidation{
        top: 20px;
        right: 20px;
        padding: 10px;
        font-size: 25px;
    }
    .validation .progress-validation{
        height: 5px;
        width: 100%;
    }
    /* Alerta Incorrecto */
    .incorrect.alert{
        right: 35px;
    }
    .incorrect-content .key{
        height: 55px;
        width: 55px;
        font-size: 30px;
    }
    .incorrect-content .message{
        margin: 0 30px;
    }
    .incorrect .closeIncorrect{
        top: 20px;
        right: 20px;
        padding: 10px;
        font-size: 25px;
    }
    .incorrect .progress-incorrect{
        height: 5px;
        width: 100%;
    }
}
/* ================================ CELULAR ===================================== */
@media (max-width: 767px){
    .alerts{
        grid-gap: 10px;
        margin: 20px;
        width: 330px;
    }
}
/* ================================ TABLET ===================================== */
@media (min-width: 768px) and (max-width: 990px){
    .alerts{
        grid-gap: 10px;
        margin: 20px;
        width: 370px;
    }
}