/* Extranet custom start */
.htl-centered {
    display: flex;
    flex: 1;
    justify-content: center;
    margin-top: var(--htl-space-6);
    margin-bottom: var(--htl-space-6);
}

.htl-centered a {
    color: var(--htl-color-semantic-text-neutral-default);
}

.htl-2stepcode-input {
    text-transform: uppercase;
    text-align: center;
}

.u-font-semi-bold {
    font-weight: var(--htl-font-weight-strong);
}
/* Extranet custom end */


body {
    margin: 0;
}

.htl-login {
    min-height: 100vh;
    background-image: url("login-bg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (width >= 576px) {
    .htl-login {
        display: flex;
        align-items: center;
        padding-block: var(--htl-space-12);
    }
}

.htl-login__container {
    display: flex;
    gap: var(--htl-space-16);
    align-items: center;
    max-inline-size: 1240px;
    margin: 0 auto;
}

@media (width < 1023.98px) {
    .htl-login__container {
        flex-direction: column;
    }
}

@media (width < 575.98px) {
    .htl-login__container {
        position: relative;
        gap: 0;
        padding-block-end: 36px;
    }
}

.htl-login__form {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    padding: var(--htl-space-12) max(var(--htl-space-16), 8%);
    background-color: #fbfaf6;
    box-shadow: 20px 40px 60px 0 rgba(0 215 176 / 10%), -20px -20px 54px 0 rgba(151 71 255 / 20%);
    min-block-size: 760px;
}

@media (width >= 576px) {
    .htl-login__form {
        inline-size: 500px;
        border-radius: var(--htl-radius-8);
    }
}

.htl-login__logo {
    margin-block-end: var(--htl-space-6);
    text-align: center;
}

.htl-login__logo img {
    width: 100%;
}

.htl-login__title {
    margin-block-end: var(--htl-space-6);
    color: var(--htl-color-semantic-text-brand-strong);
    font-weight: var(--htl-font-weight-strong);
    font-size: var(--htl-font-size-300);
    font-family: var(--htl-font-family-brand);
}

.htl-login__message {
    margin-block-end: var(--htl-space-6);
    font-weight: var(--htl-font-weight-strong);
    font-size: var(--htl-font-size-100);
}

.htl-login__copyright {
    margin-block-start: auto;
    color: var(--htl-color-semantic-text-neutral-strong);
    font-weight: var(--htl-font-weight-strong);
    font-size: var(--htl-font-size-050);
    text-align: center;
}

@media (width < 575.98px) {
    .htl-login__copyright {
        position: absolute;
        inset-block-end: 0;
        padding: var(--htl-space-2);
        background-color: var(--htl-color-semantic-fill-inverted-default);
        inset-inline: 0;
    }
}

.htl-login__ads {
    display: flex;
    flex: 1;
    justify-content: center;
}

/* white label: no d-edge graphic chart */
.is-whitelabel.htl-login {
    background-image: unset;
}

.is-whitelabel .htl-login__logo {
    margin-left: auto;
    margin-right: auto;
}

    .is-whitelabel .htl-login__logo img {
        width: unset;
    }

.is-whitelabel h1,
.is-whitelabel label,
.is-whitelabel a.htl-button {
    color: #212121;
    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 300;
}

.is-whitelabel button {
    background-color: #00a78d;
}

.is-whitelabel button:hover {
    background-color: #008e78;
}

.is-whitelabel a.htl-button--solid {
    background-color: inherit;
}

.is-whitelabel a.htl-button {
    color: #2778c7;
}

    .is-whitelabel a.htl-button:hover {
        background-color: inherit;
        text-decoration: underline;
    }

.is-whitelabel .htl-login__form {
    box-shadow: none;
    background-color: inherit;
}

.htl-hint i {
    margin-right: var(--htl-space-2);
    align-self: center;
}