/**
* Login Form
*/

.login-form {
    width: 28rem;
    background-color: white;
    /* display: flex;
    flex-direction: column; */
    position: relative;
    padding: var(--padding-4);
}

/* .login-form img {max-height: 5rem;} */

/**
* Login Landscape
*/

.login-landscape {
    background-color: var(--primary-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../../images/ImagenLogin.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    width: calc(100vw - 32rem);
    justify-content: center;
    align-items: center;
}

.error-code {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

.email-label {
    width: 100%;
    text-align: center;
}

.login-landscape img {
    width: 35rem;
    height: 13.7rem;
    padding: var(--padding-4);
}

@media (min-width: 1480px) {
    .login-landscape img {
        width: 55rem !important;
        height: 20rem;
    }
}

.logo-login {
    width: 50% !important;
    max-width: 539px !important;
    height: auto !important;
    margin-right: 10px !important;

}

.bottom-form {
    position: absolute;
    bottom: 4rem;
    width: calc(100% - var(--padding-4) * 2) !important;
}


.main {
    display: flex;
}

.bg-danger {
    background-color: #EB415B !important;
}

.bg-success {
    background-color: #51A8A3 !important;
}

.bg-warning {
    background-color: #FABE18 !important;
}

.side-one {
    width: 600px !important;
    height: 717px;

    padding: 45px 45px 20px 45px;
}

.side-two {
    background-size: 100% !important;
    background-color: var(--primary-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../../images/ImagenLogin.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: calc(100vw - 38rem);
    display: flex;
    justify-content: center;
    align-items: center;
}

.element-two {
    width: 75%;
    height: auto;
}

.element-two img {
    width: 100% !important;

}

.side-one-content {

    background-color: white;
    border-radius: 15px;
    width: 100%;
}

.item-one {
    height: 35vh;
    display: flex;
    justify-content: center;
    align-items: end;
}

.item-one img {

    height: 180px !important;
    width: 180px !important;
}

.item-two {
    height: 60vh;
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
}

.item-three {
    height: 10vh;
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
    text-align: center;
}

@media (max-height: 820px) {
    .pt-5 {
        padding-top: 3rem !important;
    }

    .mt-3 {
        margin-top: 2rem !important;
    }

    .item-one img {
        width: 45% !important;
    }
}

/**
* Set password Landscape
*/

.set-password-landscape {
    background-color: var(--primary-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../../images/LoginImagenBackground.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    width: calc(100vw - 32rem);
    justify-content: center;
    align-items: center;
}

/**
* Set password Form
*/

.set-password-form {
    border-radius: 1rem;
    width: 40rem;
    background-color: white;

    position: relative;
    padding: var(--padding-4);
    padding-top: 0;
}

.logo-set-password {
    width: 15rem;
    height: 10rem;
}

.logo-set-password img {
    width: 100%;
    height: auto;


}

.font-sz-1-5-r {
    font-size: 1.5rem;
}

.font-primary {
    font-family: "Montserrat" !important;
    color: #0D1C2C;
}

.font-secondary {
    font-family: sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -0.02em;
}

.btn-recover:disabled {

    opacity: 1 !important;

    background-color: #3B485833 !important;
}

.Outfit-text {
    font-family: 'Outfit' !important;
    font-weight: 400 !important;
    font-style: normal;

    line-height: 120%;
    letter-spacing: 0.02em !important;

    color: #868686;
}

.Outfit-book {
    font-family: 'Outfit' !important;
    font-weight: 400 !important;
    font-style: normal !important;

    font-size: 20px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #3B4858 !important;
    text-align: center !important;
}

.Outfit-text h4 {
    color: #0e0d0d !important;
    font-size: 20px !important;
    line-height: 120%;
    letter-spacing: 0.02em !important;
}

.Outfit-text h2 {
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.02em;
    text-align: center;
}

.a-btn-ok {
    background-color: #25160F;
}

.a-btn-ok:hover {
    color: #FFFFFF !important;

    background-color: #25160F;
    ;
}

.estilo-input-Outfit {
    font-family: 'Outfit' !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
}

/* OVERLAY FULLSCREEN */
.token-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.token-bg {
    /* opacity: 0.5; */
    position: absolute;
    inset: 0;
    /* Evitar "zoom"/recorte: siempre mostrar la imagen completa */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* CARD BLANCA */
.token-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 36px;
    width: 420px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    z-index: 1;
}

/* TÍTULO */
.token-title {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

/* TEXTO */
.token-message {
    font-size: 15px;
    color: #555;
    margin-bottom: 24px;
}

/* BOTÓN */
.token-btn {
    display: block;
    width: 100%;
    background: #2b1a12;
    color: #fff;
    padding: 12px 0;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    transition: background .2s ease;
}

.token-btn:hover {
    background: #1e120c;
}

.token-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}



.token-card {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    width: 480px;
    text-align: center;
    z-index: 1;
}

.token-error-full {
    height: 100vh;
    width: 100%;
}

.token-error-left {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
}

.token-error-box {
    background: white;
    padding: 3rem;
    border-radius: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.token-overlay {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
}


.token-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.token-modal {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    max-width: 747px;
    text-align: center;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.token-modal h2 {
    font-family: 'Outfit' !important;
    font-weight: 700 !important;
    font-style: normal !important;

    font-size: 32px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #0D0D0E !important;
    text-align: center !important;
}

.token-modal p {
    font-family: 'Outfit' !important;
    font-weight: 400 !important;
    font-style: normal !important;

    font-size: 30px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #3B4858 !important;
    text-align: center !important;
}

.gothan-700-24 {
    font-family: 'Outfit' !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 24px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #3B4858 !important;
    text-align: center !important;
}

.gothan-400-14 {
    font-family: 'Outfit' !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #3B4858 !important;
    text-align: center !important;
}

.gothan-700-16 {
    font-family: 'Outfit' !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #0D0D0E !important;
    text-align: center !important;
}

/* =========================================================
   BIOBOX LOGIN - FIGMA 400px
========================================================= */

html,
body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.contenedor {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;

    background-image: url('/resources/images/fondobiobox.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.izquierda {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    background: transparent !important;
    background-image: none !important;
}

.derecha {
    display: none !important;
}

/* FORM CARD */
html body .contenedor .izquierda form#login-form {
    position: absolute !important;

    width: 360px !important;
    max-width: 400px !important;
    height: 534px !important;
    min-height: 534px !important;
    max-height: 627px !important;

    top: 50% !important;
    left: 86px !important;
    transform: translateY(-50%) !important;

    margin: 0 !important;
    padding: 64px 36px !important;

    background: #FFFFFF !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: hidden !important;
}

/* LOGO */
#login-form>div:first-child {
    width: 100% !important;
    height: 130px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 0 0 26px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#login-form .logo-login {
    display: block !important;

    width: 208px !important;
    max-width: 208px !important;
    height: 151px !important;
    max-height: 151px !important;

    object-fit: contain !important;
    object-position: center !important;

    position: relative !important;
    left: -4px !important;

    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 1 !important;
}

/* TÍTULO: más angosto que inputs */
#login-form .title,
#login-form .title b {
    width: 280px !important;
    max-width: 280px !important;

    color: #373940 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;

    margin: 0 auto 34px auto !important;
    padding: 0 !important;
    white-space: normal !important;
}

/* BLOQUE INPUTS + LINK */
#login-form>div:nth-of-type(2) {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 0 !important;
    margin: 0 !important;
    gap: 20px !important;

    box-sizing: border-box !important;
}

#login-form>div:nth-of-type(2) .form-group {
    width: 100% !important;
    margin: 0 !important;
}

#login-form label {
    margin-bottom: 8px !important;

    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #373940 !important;
}

/* INPUTS más grandes que el texto */
#login-form .form-control,
#login-form .input-group {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;

    border-radius: 999px !important;
    box-sizing: border-box !important;
}

#login-form .form-control {
    padding-left: 16px !important;
    padding-right: 44px !important;
}

#login-form .input-group {
    position: relative !important;
}

#login-form .input-group input {
    width: 100% !important;
    padding-right: 44px !important;
}

#login-form .input-group img {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 18px !important;
    height: 18px !important;

    z-index: 5 !important;
}

/* LINK */
#login-form .text-center.mt-2 {
    margin: 4px 0 0 0 !important;
}

#login-form .primary-link,
#login-form a.primary-link,
#login-form .gothan-700-16 {
    color: #00344D !important;
    text-decoration: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* CONTENEDOR BOTÓN */
#login-form>div.text-center.mt-2:last-of-type {
    width: 100% !important;
    padding: 0 !important;
    margin: 28px 0 0 0 !important;
    box-sizing: border-box !important;
}

/* BOTÓN */
#login-form button[type="submit"].btn-primary {
    width: 100% !important;
    height: 46px !important;

    border-radius: 999px !important;
    border: none !important;

    background-color: #00344D !important;
    color: #FFFFFF !important;

    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;

    opacity: 1 !important;
    box-shadow: none !important;
}

#login-form button[type="submit"].btn-primary:disabled {
    background-color: #3B485833 !important;
    color: #FFFFFF !important;

    border: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* =========================================================
   BIOBOX - RESTABLECER CONTRASEÑA
========================================================= */

html body .contenedor .izquierda form#restore-form {
    position: absolute !important;

    width: 400px !important;
    max-width: 400px !important;
    height: 627px !important;
    min-height: 670px !important;
    max-height: 627px !important;

    top: 50% !important;
    left: 86px !important;
    transform: translateY(-50%) !important;

    margin: 0 !important;
    padding: 48px 36px !important;

    background: #FFFFFF !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    overflow: hidden !important;
}

/* Título */
#restore-form>p.text-center {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;

    color: #373940 !important;
    text-align: center !important;
}

#restore-form>p.text-center b {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #373940 !important;
}

/* Instrucciones */
#restore-form>div.mt-2:first-of-type {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    /* padding: 0 14px !important; */
    box-sizing: border-box !important;
}

#restore-form>div.mt-2:first-of-type p {
    width: 100% !important;
    margin: 0 !important;

    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #373940 !important;
    text-align: left !important;
}

/* Campos */
#restore-form .form-group {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}

#restore-form .form-group label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;

    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #373940 !important;
}

/* Inputs */
#restore-form .input-group {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    position: relative !important;
    border-radius: 999px !important;
}

#restore-form .form-control {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;

    border-radius: 999px !important;
    border: 1.5px solid #373940 !important;

    padding-left: 16px !important;
    padding-right: 44px !important;

    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;

    box-sizing: border-box !important;
}

#restore-form .input-group img {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 18px !important;
    height: 18px !important;

    z-index: 5 !important;
    cursor: pointer !important;
}

/* Card de reglas */
#restore-form>div.mt-3.py-3.px-2 {
    width: 100% !important;
    margin: 4px 0 0 0 !important;
    padding: 16px 18px !important;

    border: none !important;
    border-radius: 8px !important;
    background-color: #E6EAEB !important;

    box-sizing: border-box !important;
}

#restore-form>div.mt-3.py-3.px-2>p {
    margin: 0 0 12px 0 !important;

    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #373940 !important;
    text-align: left !important;
}

#restore-form>div.mt-3.py-3.px-2 .d-flex {
    margin-bottom: 8px !important;
}

#restore-form>div.mt-3.py-3.px-2 .d-flex:last-child {
    margin-bottom: 0 !important;
}

#restore-form>div.mt-3.py-3.px-2 img {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    position: initial !important;
}

#restore-form>div.mt-3.py-3.px-2 .d-flex p {
    margin: 0 0 0 8px !important;

    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #373940 !important;
}

/* Botón */
#restore-form>div.text-center.p-10 {
    width: 100% !important;
    margin: 18px 0 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#restore-form button#restore-button {
    width: 100% !important;
    height: 46px !important;

    border-radius: 999px !important;
    border: none !important;

    background-color: #00344D !important;
    color: #FFFFFF !important;

    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;

    opacity: 1 !important;
    box-shadow: none !important;
}

#restore-form button#restore-button:disabled {
    background-color: #3B485833 !important;
    color: #FFFFFF !important;

    border: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* Responsive para pantallas bajas */
@media (max-height: 720px) {
    html body .contenedor .izquierda form#restore-form {
        height: calc(100vh - 48px) !important;
        min-height: unset !important;
        max-height: calc(100vh - 48px) !important;
        padding: 32px 36px !important;
        overflow-y: auto !important;
    }
}

/* =========================================================
   BIOBOX QA - Ajustes restablecer contraseña
   Hallazgos 0043489, 0043491, 0043492
========================================================= */

/* Pop up de enlace caducado */
.token-modal {
    /* max-width: 1030px !important; */
    max-width: 50% !important;
    width: calc(100% - 112px) !important;
    /* padding: 58px 66px 54px 66px !important; */
    padding: 40px 40px !important;
    border-radius: 24px !important;
    box-shadow: none !important;
}

.token-modal h2 {
    margin: 0 0 32px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #0D0D0E !important;
}

.token-modal p {
    margin: 0 0 58px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 100% !important;
    letter-spacing: 0.02em !important;
    color: #3B4858 !important;
}

.token-modal a.btn {
    height: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Pop up de recuperar contraseña */
#modal-default .modal-dialog,
#modal-confirm .modal-dialog {
    max-width: 747px !important;
    width: 747px !important;
}

#modal-default .modal-content,
#modal-confirm .modal-content {
    border-radius: 24px !important;
}

#modal-default .email-label {
    color: #000000 !important;
    white-space: nowrap !important;
    width: 651px !important;
}

#recover-error2 {
    display: none;
    color: #D72828 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    margin-top: 6px !important;
}

@media (min-width: 1920px) and (min-height: 1080px) {

    /* Fondo menos recortado en pantallas grandes */
    .contenedor {
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Card de login más grande únicamente desde 1920x1080 */
    html body .contenedor .izquierda form#login-form {
        width: 360px !important;
        max-width: 400px !important;
        height: 534px !important;
        min-height: 534px !important;
        max-height: 627px !important;


        left: 130px !important;
        padding: 76px 43px !important;
    }

    #login-form>div:first-child {
        height: 156px !important;
        margin: 0 0 31px 0 !important;
    }

    #login-form .logo-login {
        width: 250px !important;
        max-width: 250px !important;
        height: 181px !important;
        max-height: 181px !important;
    }

    #login-form .title,
    #login-form .title b {
        width: 336px !important;
        max-width: 336px !important;
        font-size: 16px !important;
        margin: 0 auto 40px auto !important;
    }

    #login-form>div:nth-of-type(2) {
        gap: 24px !important;
    }

    #login-form label {
        font-size: 14px !important;
    }

    #login-form .form-control,
    #login-form .input-group {
        height: 48px !important;
        min-height: 48px !important;
    }

    #login-form .form-control {
        font-size: 15px !important;
        padding-left: 19px !important;
        padding-right: 52px !important;
    }

    #login-form .input-group img {
        right: 19px !important;
        width: 21px !important;
        height: 21px !important;
    }

    #login-form .primary-link,
    #login-form a.primary-link,
    #login-form .gothan-700-16 {
        font-size: 15px !important;
    }

    #login-form>div.text-center.mt-2:last-of-type {
        margin: 34px 0 0 0 !important;
    }

    #login-form button[type="submit"].btn-primary {
        height: 55px !important;
        font-size: 16px !important;
    }
}

.token-modal>p,
.token-modal>a.btn {
    width: 100% !important;
    max-width: 1056px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.token-modal>p {
    margin-bottom: 45px !important;
}

.token-modal>a.btn {
    margin-top: 0 !important;
    font-size: 18px !important;
}

.token-bg {
    opacity: 1 !important;
}

.token-overlay::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
}

.token-modal {
    width: 747px !important;
    max-width: calc(100vw - 48px) !important;
    min-height: auto !important;
    padding: 38px 42px 34px 42px !important;
    border-radius: 24px !important;
    box-shadow: none !important;
}

.token-modal h2 {
    margin: 0 0 22px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    color: #0D0D0E !important;
    text-align: center !important;
}

.token-modal p {
    width: 100% !important;
    max-width: 610px !important;
    margin: 0 auto 34px auto !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 120% !important;
    letter-spacing: 0.02em !important;
    color: #3B4858 !important;
    text-align: center !important;
}

.token-modal a.btn {
    width: 100% !important;
    max-width: 610px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
   font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
}

.token-modal a.btn span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
}

#login-form label.estilo-input-Outfit,
#login-form .form-group label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    color: #000A0F !important;
}

#login-form input.form-control {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0 !important;
}

#modal-default .biobox-recover-dialog {
    width: min(840px, calc(100vw - 32px)) !important;
    max-width: min(940px, calc(100vw - 32px)) !important;
    margin: 1.5rem auto !important;
}

#modal-default .biobox-recover-content {
    width: 100% !important;
    min-height: 420px !important;
    padding: 38px 50px 38px 51px !important;
    border: none !important;
    border-radius: 24px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#modal-default .biobox-recover-header {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
    border-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#modal-default .biobox-recover-title {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    color: #000A0F !important;
    text-align: center !important;
}

#modal-default #recover-form {
    width: 100% !important;
}

#modal-default .biobox-recover-body {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#modal-default .biobox-recover-fields {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#modal-default .biobox-recover-subtitle {
    display: block !important;
    width: 100% !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    color: #000A0F !important;
    text-align: center !important;
    white-space: nowrap !important;
}

#modal-default .biobox-recover-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    color: #000A0F !important;
    text-align: left !important;
}

#modal-default .biobox-recover-input {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 24px !important;
    border: 1.5px solid #CED4DA !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    color: #000A0F !important;
    box-sizing: border-box !important;
}

#modal-default .biobox-recover-input::placeholder {
    color: #8A9297 !important;
    opacity: 1 !important;
}

#modal-default .biobox-recover-error {
    display: none;
    margin-top: 8px !important;
    color: #D72828 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 120% !important;
}

#modal-default .biobox-recover-actions {
    width: 100% !important;
    margin: 44px 0 0 0 !important;
    padding: 0 !important;
}

#modal-default .biobox-recover-actions-row {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 48px !important;
}

#modal-default .biobox-recover-action-col {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
}

#modal-default .biobox-recover-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    box-shadow: none !important;
}

#modal-default .biobox-recover-cancel {
    background: #FFFFFF !important;
    color: #00344D !important;
    border: 2px solid #00344D !important;
}

#modal-default .biobox-recover-cancel:hover,
#modal-default .biobox-recover-cancel:focus,
#modal-default .biobox-recover-cancel:active {
    background: #FFFFFF !important;
    color: #00344D !important;
    border: 2px solid #00344D !important;
}

#modal-default .biobox-recover-accept {
    border: none !important;
    background: #00344D !important;
    color: #FFFFFF !important;
}

#modal-default .biobox-recover-accept:disabled {
   background: #3B485833 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

#modal-default .biobox-recover-loader-row {
    margin: 0 !important;
    padding: 20px 0 0 0 !important;
}

@media (max-width: 900px) {
    #modal-default .biobox-recover-dialog {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    #modal-default .biobox-recover-content {
        padding: 42px 32px 38px 32px !important;
    }

    #modal-default .biobox-recover-title {
        font-size: 32px !important;
    }

    #modal-default .biobox-recover-subtitle {
        font-size: 19px !important;
        white-space: normal !important;
    }

    #modal-default .biobox-recover-actions-row {
        gap: 24px !important;
    }

    #modal-default .biobox-recover-button {
        height: 60px !important;
        min-height: 60px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    #modal-default .biobox-recover-actions-row {
        flex-direction: column !important;
        gap: 16px !important;
    }
}

#modal-default .biobox-recover-subtitle {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    
}

#modal-default .biobox-recover-content {
    min-height: auto !important;
    padding-bottom: 34px !important;
}

#modal-default .biobox-recover-actions {
    margin-top: 42px !important;
    margin-bottom: 0 !important;
}

#modal-default .biobox-recover-loader-row {
    margin: 0 !important;
    padding: 12px 0 0 0 !important;
}


#modal-confirm .biobox-confirm-dialog {
    width: min(747px, calc(100vw - 32px)) !important;
    max-width: min(747px, calc(100vw - 32px)) !important;
    margin: 1.75rem auto !important;
}

#modal-confirm .biobox-confirm-content {
    width: 100% !important;
    padding: 34px 42px 34px 42px !important;
    border: none !important;
    border-radius: 24px !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
    box-sizing: border-box !important;
}

#modal-confirm .biobox-confirm-header {
    width: 100% !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#modal-confirm .biobox-confirm-title {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: 0 !important;
    color: #00344D !important;
    text-align: center !important;
}

#modal-confirm .biobox-confirm-body {
    width: 100% !important;
   margin: 0 !important;
    padding: 0 !important;
}

#modal-confirm .biobox-confirm-message {
    width: 100% !important;
    max-width: 651px !important;
    margin: 0 auto 24px auto !important;
    padding: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 135% !important;
    letter-spacing: 0 !important;
    color: #3B4858 !important;
    text-align: center !important;
}

#modal-confirm .biobox-confirm-footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    display: flex !important;
    justify-content: center !important;
}

#modal-confirm .biobox-confirm-button {
    width: 100% !important;
    max-width: 651px !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background-color: #00344D !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    box-shadow: none !important;
}