/* CloudCard Signature authentication shell. */

:root {
    --auth-gold: #d6b86d;
    --auth-navy: #07182b;
    --auth-line: #dce2e8;
}

.login-page {
    background: #f4f5f7 !important;
}

.login-shell {
    max-width: 68rem !important;
    border-radius: .9rem !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .11) !important;
}

.login-aside {
    position: relative;
    background: var(--auth-navy) !important;
}

.login-aside::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 4.75rem 100%;
    content: "";
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 84%);
    mask-image: linear-gradient(to bottom, #000, transparent 84%);
    pointer-events: none;
}

.login-aside > .absolute {
    display: none !important;
}

.login-aside h1 {
    max-width: 11ch !important;
    letter-spacing: -.055em;
    line-height: 1.02 !important;
}

.login-aside .text-blue-300,
.login-aside .text-white\/65:first-of-type {
    color: var(--auth-gold) !important;
}

.login-aside .rounded-xl,
.login-aside .rounded-2xl {
    border-radius: .65rem !important;
}

.login-shell section:last-child {
    background: #fff;
}

.login-shell section:last-child h2 {
    letter-spacing: -.045em;
}

.login-input {
    border-radius: .6rem !important;
}

.login-button {
    border-radius: .6rem !important;
    background: var(--auth-navy) !important;
    box-shadow: none !important;
}

.login-button:hover {
    background: #102b48 !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 1023px) {
    .login-shell {
        max-width: 33rem !important;
    }

    .login-shell section:last-child {
        min-height: auto !important;
        padding-block: 2.5rem !important;
    }
}