body {
    margin: 0;
}

.htl-login {
    min-height: 100vh;
    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-48);
    }
}

.htl-login__container {
    display: flex;
    gap: var(--htl-space-64);
    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-48) max(var(--htl-space-64), 8%);
    background-color: #fbfaf6;
    box-shadow: 20px 40px 60px 0 rgba(0 215 176 / 10%), -20px -20px 54px 0 rgba(151 71 255 / 20%);
}

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

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

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

.htl-login__title {
    margin-block-end: var(--htl-space-24);
    color: var(--htl-color-text-brand-strong);
}

.htl-login__message {
    margin-block-end: var(--htl-space-24);
    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-text-neutral-strong);
    text-align: center;
}

@media (width < 575.98px) {
    .htl-login__copyright {
        position: absolute;
        inset-block-end: 0;
        padding: var(--htl-space-8);
        background-color: var(--htl-color-background-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-8);
    align-self: center;
}