body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: transparent;
    width: 100%;
    height: 100%;
    align-items: start;
    background: radial-gradient(50% 50% at 74% 72%,
        rgba(16, 26, 51, 1) 0%,
        rgba(16, 26, 51, 0) 60%),
    radial-gradient(50% 50% at 21% 93%,
        rgba(122, 92, 255, 0.35) 0%,
        rgba(122, 92, 255, 0) 55%), linear-gradient(151deg, rgba(11, 18, 32, 1) 0%, rgba(27, 42, 75, 1) 100%),
    linear-gradient(0deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 100%);
}

.login .text-wrapper-2 {
    height: 16px;
    top: 9px;
    left: 14px;
    font-family: var(--inter-bold-font-family);
    font-weight: var(--inter-bold-font-weight);
    color: #07121c;
    font-size: var(--inter-bold-font-size);
    letter-spacing: var(--inter-bold-letter-spacing);
    line-height: var(--inter-bold-line-height);
    font-style: var(--inter-bold-font-style);
}

.elemento_top_sep {
    z-index: 1000;
}

.login .acceder-al-sistema {
    position: relative;
    top: 8px;
    left: 13px;
    height: 15px;
    font-family: var(--inter-semi-bold-upper-font-family);
    font-weight: var(--inter-semi-bold-upper-font-weight);
    color: #5dd6ff;
    font-size: var(--inter-semi-bold-upper-font-size);
    letter-spacing: var(--inter-semi-bold-upper-letter-spacing);
    line-height: var(--inter-semi-bold-upper-line-height);
    font-style: var(--inter-semi-bold-upper-font-style);
}

.login .div-wrapper-form {
    position: relative;
    top: 22px;
    left: 0px;
    width: 100%;
    height: 34px;
}

.text-wrapper-cuenta-bloqueada {
    height: 34px;
    top: -1px;
    left: 0px;
    font-family: var(--semantic-heading-1-font-family);
    font-weight: var(--semantic-heading-1-font-weight);
    color: #ff0000;
    font-size: var(--semantic-heading-1-font-size);
    letter-spacing: var(--semantic-heading-1-letter-spacing);
    line-height: var(--semantic-heading-1-line-height);
    font-style: var(--semantic-heading-1-font-style);
}

.login .text-wrapper-3 {
    position: relative;
    top: 0px;
    left: 0px;
    height: 34px;
    font-family: var(--semantic-heading-1-font-family);
    font-weight: var(--semantic-heading-1-font-weight);
    color: #e6ecff;
    font-size: var(--semantic-heading-1-font-size);
    letter-spacing: var(--semantic-heading-1-letter-spacing);
    line-height: var(--semantic-heading-1-line-height);
    font-style: var(--semantic-heading-1-font-style);
}

.login .container-2 {
    position: relative;
    top: 26px;
    left: 0px;
    width: 100%;
    height: 19px;
}

.login .p {
    position: relative;
    top: 0px;
    left: 0px;
    height: 19px;
    font-family: var(--inter-regular-font-family);
    font-weight: var(--inter-regular-font-weight);
    color: #5dd6ff;
    font-size: var(--inter-regular-font-size);
    letter-spacing: var(--inter-regular-letter-spacing);
    line-height: var(--inter-regular-line-height);
    white-space: nowrap;
    font-style: var(--inter-regular-font-style);
}

.login .label {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 65px;
}

.login .container-3 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
}

.login .text-wrapper-4 {
    position: relative;
    top: 25px;
    left: 0px;
    height: 16px;
    font-family: var(--semantic-label-font-family);
    font-weight: var(--semantic-label-font-weight);
    color: #5dd6ff;
    font-size: var(--semantic-label-font-size);
    letter-spacing: var(--semantic-label-letter-spacing);
    line-height: var(--semantic-label-line-height);
    font-style: var(--semantic-label-font-style);
}

.login .background-border-2 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    border: 1px solid;
    border-color: #ffffff2a;
    background: linear-gradient(180deg,
            rgba(15, 24, 48, 0.67) 0%,
            rgba(13, 21, 42, 0.53) 100%);
}

.login .component {
    position: relative;
    top: 15px;
    left: 17px;
    width: 18px;
    height: 18px;
}

.login .input {
    position: relative;
    top: -5px;
    left: 50px;
    width: 357px;
    height: 18px;
}

.login .container-4 {
    height: 18px;
}

.login .text-wrapper-5 {
    height: 18px;
    top: -1px;
    left: 0px;
    font-family: var(--semantic-input-font-family);
    font-weight: var(--semantic-input-font-weight);
    color: #757575;
    font-size: var(--semantic-input-font-size);
    letter-spacing: var(--semantic-input-letter-spacing);
    line-height: var(--semantic-input-line-height);
    white-space: nowrap;
    font-style: var(--semantic-input-font-style);
}

.login .gradient-blur {
    position: absolute;
    top: -60px;
    right: -75px;
    width: 320px;
    height: 320px;
    border-radius: 160px;
    filter: blur(20px);
    background: radial-gradient(50% 50% at 50% 50%,
            rgba(122, 92, 255, 1) 0%,
            rgba(122, 92, 255, 0) 60%);
    opacity: 0.6;
    z-index: -10;
}

.login .gradient-blur-2 {
    position: absolute;
    top: 290px;
    left: -50px;
    width: 260px;
    height: 260px;
    border-radius: 130px;
    filter: blur(20px);
    background: radial-gradient(50% 50% at 50% 50%,
            rgba(93, 214, 255, 1) 0%,
            rgba(93, 214, 255, 0) 60%);
    opacity: 0.6;
    z-index: -10;
}

.login .label-2 {
    position: relative;
    top: 125px;
    left: 0px;
    width: 100%;
    height: 90px;
}

.login .container-5 {
    height: 18px;
    border: none;
    background: none;
    font-family: var(--semantic-input-font-family);
    font-weight: var(--semantic-input-font-weight);
    color: #757575;
    font-size: var(--semantic-input-font-size);
    letter-spacing: var(--semantic-input-letter-spacing);
    line-height: var(--semantic-input-line-height);
    white-space: nowrap;
    font-style: var(--semantic-input-font-style);
    padding: 0;
    padding-left: 0px;
}

.login .container-6 {
    position: relative;
    top: 50px;
    left: 0px;
    width: 100%;
    height: 45px;
}

.login .link-wrapper {
    position: relative;
    top: 70px;
    left: 0px;
    width: 100%;
    height: 19px;
}

.login .button {
    position: relative;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    width: 125px;
    height: 43px;
    border-radius: 14px;
    box-shadow: 0px 0px 24px #1dd1a152;
    background: linear-gradient(160deg,
            rgba(29, 209, 161, 1) 0%,
            rgba(0, 184, 148, 1) 100%);
}

.login .text-wrapper-6 {
    position: relative;
    top: 0px;
    left: 2px;
    font-family: var(--semantic-button-font-family);
    font-weight: var(--semantic-button-font-weight);
    color: #05130f;
    font-size: var(--semantic-button-font-size);
    text-align: center;
    letter-spacing: var(--semantic-button-letter-spacing);
    line-height: var(--semantic-button-line-height);
    white-space: nowrap;
    font-style: var(--semantic-button-font-style);
}

.login .link {
    position: relative;
    top: 0px;
    left: 0px;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: 125px;
    height: 45px;
    border-radius: 14px;
    border: 1px solid;
    border-color: #ffffff2e;

    font-family: var(--semantic-button-font-family);
    font-weight: var(--semantic-button-font-weight);
    color: #05130f;
    font-size: var(--semantic-button-font-size);
    text-align: center;
    letter-spacing: var(--semantic-button-letter-spacing);
    line-height: var(--semantic-button-line-height);
    white-space: nowrap;
    font-style: var(--semantic-button-font-style);
}

.login .text-wrapper-7 {
    position: relative;
    top: 14px;
    font-family: var(--semantic-link-underline-font-family);
    font-weight: var(--semantic-link-underline-font-weight);
    color: #e6ecff;
    font-size: var(--semantic-link-underline-font-size);
    letter-spacing: var(--semantic-link-underline-letter-spacing);
    line-height: var(--semantic-link-underline-line-height);
    text-decoration: underline;
    white-space: nowrap;
    font-style: var(--semantic-link-underline-font-style);
}

.login .link-2 {
    width: 181px;
    height: 19px;
}

.login .text-wrapper-8 {
    height: 19px;
    top: 0px;
    left: 0px;
    font-family: var(--semantic-link-font-family);
    font-weight: var(--semantic-link-font-weight);
    color: #5dd6ff;
    font-size: var(--semantic-link-font-size);
    letter-spacing: var(--semantic-link-letter-spacing);
    line-height: var(--semantic-link-line-height);
    white-space: nowrap;
    font-style: var(--semantic-link-font-style);
}

.login .mensaje_cuenta_bloqueada {
    margin-top: 5px;
    text-align: justify;
    color: white;
    line-height: 1em;
    font-size: medium;
}

.box-wrapper-responda-preguntas {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
}

.box-wrapper-que-accion-realizar {
    position: relative;
    top: 70px;
    left: 0px;
    width: 100%;
    height: 150px;
}

.box-wrapper-confirme-identidad {
    position: relative;
    top: 160px;
    left: -5px;
    width: 100%;
    height: 150px;
}

.box-wrapper-cuenta-bloqueada {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150px;
}

.box-wrapper-cuenta-confirmada {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150px;
}

.box-wrapper-reset-password {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#main2 {
    width: 100%;
    top: 10px;
    left: 0px;
    z-index: 1000;
}

.gradient-button {
    background-image: linear-gradient(to right, #00d28d, #00c6a5);
}

.gradient-button:hover {
    background-image: linear-gradient(to right, #00b377, #00ac90);
}

.login .text-wrapper-10 {
    height: 19px;
    top: 57px;
    left: 881px;
    font-family: var(--semantic-link-font-family);
    font-weight: var(--semantic-link-font-weight);
    color: #e6ecff;
    font-size: var(--semantic-link-font-size);
    letter-spacing: var(--semantic-link-letter-spacing);
    line-height: var(--semantic-link-line-height);
    white-space: nowrap;
    font-style: var(--semantic-link-font-style);
}

.login .text-wrapper-11 {
    height: 19px;
    top: 57px;
    left: 1163px;
    font-family: var(--semantic-link-font-family);
    font-weight: var(--semantic-link-font-weight);
    color: #e6ecff;
    font-size: var(--semantic-link-font-size);
    letter-spacing: var(--semantic-link-letter-spacing);
    line-height: var(--semantic-link-line-height);
    white-space: nowrap;
    font-style: var(--semantic-link-font-style);
}

.text-wrapper-5 {
    border: none;
    background: none;
    outline: none;
    width: 100%;
    color: #757575;
}

.text-wrapper-5:focus {
    color: #e6ecff;
    outline: 0px solid #5dd6ff;
    outline-offset: -2px;
}

.text-wrapper-5::placeholder {
    color: #757575;
}

.container-5:focus {
    color: #e6ecff;
    outline: 0px solid #5dd6ff;
    outline-offset: -2px;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0px 2px 28px #1dd1a152;
}

.button:focus {
    outline: 2px solid #1dd1a1;
    outline-offset: 2px;
}

.link:hover,
.link-2:hover,
.background-shadow-2:hover,
.background-shadow-3:hover,
.text-wrapper-10:hover,
.text-wrapper-11:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.link:focus,
.link-2:focus,
.background-shadow-2:focus,
.background-shadow-3:focus,
.text-wrapper-10:focus,
.text-wrapper-11:focus {
    outline: 0px solid #5dd6ff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .button:hover {
        transform: none;
    }

    .link:hover,
    .link-2:hover,
    .background-shadow-2:hover,
    .background-shadow-3:hover,
    .text-wrapper-10:hover,
    .text-wrapper-11:hover {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .background-border-2 {
        border-color: #ffffff;
    }

    .text-wrapper-5,
    .container-5 {
        color: #ffffff;
    }

    .text-wrapper-5::placeholder {
        color: #cccccc;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(17, 24, 39, 0.048) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}