/* Size-only fixes. The original authentication artwork, colors and animation stay untouched. */

.auth-panel .auth-card {
    width: min(500px, 100%) !important;
    min-height: 520px;
    padding: 30px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.register-mode .auth-panel .auth-card.wide {
    width: min(550px, 100%) !important;
    min-height: 590px;
    padding: 28px 32px;
}

.auth-form,
.auth-form label,
.auth-row,
.auth-row label,
.auth-input {
    box-sizing: border-box;
    min-width: 0;
}

.auth-form {
    width: min(430px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.register-mode .auth-form {
    width: min(500px, 100%);
}

.auth-row {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-input {
    width: 100%;
    height: 53px !important;
    min-height: 53px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 7px !important;
    outline: 0 !important;
    background: #f1faf9 !important;
    box-shadow: none !important;
    overflow: hidden;
}

.auth-input:focus-within {
    border: 0 !important;
    outline: 0 !important;
    background: #e7f8f5 !important;
    box-shadow: none !important;
}

.auth-input:hover {
    border: 0 !important;
    background: #edf9f7 !important;
    box-shadow: none !important;
}

.auth-input>i {
    flex: 0 0 20px;
    width: 20px !important;
    margin: 0 !important;
    color: #34afa7 !important;
}

.auth-input input:not([type="checkbox"]):not([type="radio"]) {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 51px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #174a63 !important;
    box-shadow: none !important;
}

.auth-input input::placeholder {
    color: #7896a0 !important;
    opacity: 1;
}

.auth-input .password-toggle {
    flex: 0 0 35px;
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #587887 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.auth-input .password-toggle:hover,
.auth-input .password-toggle:focus,
.auth-input .password-toggle:focus-visible {
    color: #087f8c !important;
    background: #dff3f0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.auth-form .auth-submit {
    width: min(320px, 100%) !important;
    height: 55px !important;
    min-height: 55px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

html[data-theme="dark"] .auth-input {
    background: #1b2732 !important;
}

html[data-theme="dark"] .auth-input:focus-within {
    background: #2d4552 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .auth-input:hover {
    background: #2a414d !important;
}

html[data-theme="dark"] .auth-input input:not([type="checkbox"]):not([type="radio"]) {
    color: #effaf8 !important;
}

html[data-theme="dark"] .auth-input input::placeholder {
    color: #9bb0ba !important;
}


/* Complete dark palette for login and registration pages. */

html[data-theme="dark"] .auth-shell {
    background-color: #0b1821 !important;
    background-image: linear-gradient(rgba(112, 218, 207, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 218, 207, .035) 1px, transparent 1px) !important;
}

html[data-theme="dark"] .auth-wrap {
    background: #111f29 !important;
    border-color: #314753 !important;
    box-shadow: 0 30px 75px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .auth-card {
    background: #111f29 !important;
}

html[data-theme="dark"] .auth-story {
    color: #edf8f6 !important;
    background-color: #102b34 !important;
    background-image: radial-gradient(circle at 16% 20%, rgba(255, 193, 82, .25) 0 3px, transparent 4px), radial-gradient(circle at 82% 29%, rgba(255, 111, 97, .25) 0 3px, transparent 4px), linear-gradient(rgba(113, 226, 216, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(113, 226, 216, .045) 1px, transparent 1px) !important;
    border-color: #31505a !important;
}

html[data-theme="dark"] .auth-brand,
html[data-theme="dark"] .auth-story h1,
html[data-theme="dark"] .auth-heading h2,
html[data-theme="dark"] .auth-form>label,
html[data-theme="dark"] .auth-row>label {
    color: #f1faf9 !important;
}

html[data-theme="dark"] .auth-story-copy>p,
html[data-theme="dark"] .auth-heading p,
html[data-theme="dark"] .auth-switch,
html[data-theme="dark"] .password-meter span {
    color: #a9bec5 !important;
}

html[data-theme="dark"] .auth-kicker,
html[data-theme="dark"] .auth-benefits span {
    color: #d9f3ef !important;
    background: rgba(9, 27, 34, .72) !important;
    border-color: #365963 !important;
}

html[data-theme="dark"] .auth-icon {
    color: #76ded6 !important;
    background: #18363e !important;
}

html[data-theme="dark"] .auth-input>i {
    color: #71d8d0 !important;
}

html[data-theme="dark"] .auth-input .password-toggle {
    color: #b4c8ce !important;
}

html[data-theme="dark"] .auth-input .password-toggle:hover,
html[data-theme="dark"] .auth-input .password-toggle:focus-visible {
    color: #7ce5dd !important;
    background: #34505b !important;
}

html[data-theme="dark"] .auth-switch {
    border-top-color: #314751 !important;
}

html[data-theme="dark"] .auth-options>a,
html[data-theme="dark"] .auth-switch a {
    color: #79ddd5 !important;
}

html[data-theme="dark"] .check-label {
    color: #b9cbd0 !important;
}

html[data-theme="dark"] .check-label>span {
    background: #172b35 !important;
    border-color: #54717a !important;
}

html[data-theme="dark"] .check-label input:checked+span {
    background: #20a39e !important;
    border-color: #56d2ca !important;
    box-shadow: inset 0 0 0 4px #172b35 !important;
}

html[data-theme="dark"] .auth-alert {
    color: #ffb4aa !important;
    background: #3a2527 !important;
    border-color: #724044 !important;
}

html[data-theme="dark"] .auth-alert.success {
    color: #91e6c2 !important;
    background: #17352d !important;
    border-color: #306b58 !important;
}

@media (max-width: 560px) {
    .auth-panel .auth-card,
    .register-mode .auth-panel .auth-card.wide {
        min-height: auto;
        padding: 22px 18px;
    }
    .auth-row {
        grid-template-columns: 1fr;
    }
    .auth-input {
        height: 50px !important;
        min-height: 50px !important;
    }
    .auth-input input:not([type="checkbox"]):not([type="radio"]) {
        height: 48px !important;
    }
}