.fs-24 {
    font-size: 24px;
}

.fs-20 {
    font-size: 20px;
}

.fs-18 {
    font-size: 18px;
}

.fs-16 {
    font-size: 16px;
}

.text-primary {
    color: #479FCC !important;
}

body {
    margin: unset;
    font-family: 'Open Sans';
}

#login {
    background: linear-gradient(to bottom, #202C51, transparent 30%, transparent 70%, #202C51), #0C1226;
    /*height: 79.8vh;*/
    width: 100%;
}

.height-login:not(.mobile) {
    /*height: 100vh;*/
}


@media screen and (min-width: 768px) {
    .height-login:not(.mobile) {
        height: 80vh;
    }
}

    #login .login-container {
        color: white;
        border: 1px solid #479FCC;
        padding: 1.5rem;
        border-radius: 7px;
        box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.2);
    }

    #login .instruccion {
        color: white !important;
    }

    #login .btn-continuar,
    #login .btn-create-account {
        border: 1px solid #479FCC;
        background-color: #19314A;
        padding: 12px;
        border-radius: 7px;
        text-align: center;
        cursor: pointer;
        font-size: 18px;
        position: relative;
    }

.btn-continuar[disabled] {
    cursor: not-allowed;
    background-color: #3a4e5e;
}

.loading-spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.create-account {
    font-size: 18px;
}

.gradient-box {
    height: 100%;
    background: radial-gradient(circle at center, #4586B7 0%, #202C51 100%);
}

.create-account {
    cursor: pointer;
}

.verification-input {
    width: 34px;
    height: 34px;
    font-size: 24px;
    text-align: center;
    border: 1px solid #ccc;
    margin-right: 10px;
    border-radius: 8px;
}

@media screen and (min-width: 440px) {
    .verification-input {
        width: 40px;
        height: 40px;
        font-size: 24px;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 10px;
        border-radius: 8px;
    }
}

@media screen and (min-width: 576px) {
    .verification-input {
        width: 50px;
        height: 50px;
        font-size: 24px;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 10px;
        border-radius: 8px;
    }
}


@media screen and (min-width: 768px) {

    .verification-input {
        width: 34px;
        height: 34px;
        font-size: 24px;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 10px;
        border-radius: 8px;
    }

}

@media screen and (min-width: 992px) {

    .verification-input {
        width: 50px;
        height: 50px;
    }

}


.verification-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.form-control:not(.content-contenido-row .form-control) {
    padding: 10px;
}

.input-group-text, .forgot-password {
    cursor: pointer;
}

.eye-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #479FCC;
    z-index: 2;
}

.error-message {
    color: #f44336;
    margin-top: 5px;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

.position-relative {
    position: relative;
}

.modal-header {
    border-bottom: unset;
}

.modal-content {
    box-shadow: 0 4px 4px 0 #479FCC; /* Aquí aplicamos el drop shadow */
}

#notificationModal .modal-body i {
    font-size: 70px;
}

@media(width < 576px) {
    .verification-container .verification-input {
        width: 35px;
        height: 40px;
    }
}