/* Optimis Secure login (license type: optimissec).
   Full-page fill uses the login-column gradient; no background photo / squiggles. */

:root {
    --optimis-green: #8bcf23;
    --optimis-white: #fff;
    --optimis-supporting-text: rgba(255, 255, 255, 0.42);
    --optimis-field-border: rgba(168, 168, 168, 0.78);
    --optimis-button-border: #0a2945;
    /* Same blues that previously filled only the center login column. */
    --optimis-gradient: linear-gradient(
        to bottom,
        rgb(8, 33, 59) 0%,
        rgb(5, 53, 86) 50%,
        rgb(5, 104, 145) 100%
    );
}

.optimis-login-page,
.optimis-login-page * {
    box-sizing: border-box;
}

body.optimis-login-page {
    color: var(--optimis-white);
    /* Full-page gradient; do not show the squiggle photo. */
    background-image: none !important;
    background-color: rgb(8, 33, 59);
    background: var(--optimis-gradient) !important;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Fancybox popups (server info, restore log) render on white, so they must not
   inherit the column's white text. */
.optimis-login-page #fancybox-content,
.optimis-login-page #serverInfo,
.optimis-login-page #restoreStatus {
    color: #031e2f;
}

/* Center the form; let the page gradient show through (no separate column). */
.optimis-login-page .overlay {
    overflow: hidden;
    background: transparent;
}

.optimis-login-page #login-container {
    width: 49.2%;
    height: 100vh;
    padding: 12vh 0 0;
    text-align: left;
}

.optimis-login-page #header {
    text-align: left;
    background: transparent;
}

.optimis-login-page #balloon {
    display: inline-block;
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.optimis-login-page #logo {
    display: block;
    width: 100%;
    max-height: none;
    height: auto;
    margin: 0 0 11.7vh;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.optimis-copy h1 {
    margin: 0;
    color: var(--optimis-white);
    font-size: min(3.6vh, 37px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.optimis-continuation {
    margin: 5.4vh 0 0;
    font-size: min(2.25vh, 23px);
    line-height: 1.25;
    font-weight: 400;
}

.optimis-continuation strong {
    font-weight: 800;
}

.optimis-supporting {
    margin: 2.1vh 0 0;
    color: var(--optimis-supporting-text);
    font-size: min(1.55vh, 16px);
    line-height: 1.38;
}

.optimis-login-page #login-form-container {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 6.2vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.optimis-login-page #responseMessage,
.optimis-login-page #errorMessage {
    position: absolute;
    bottom: 100%;
    width: 100%;
    margin-bottom: 0.8vh;
    padding: 0.8vh 1vh;
    font-size: min(1.15vh, 12px);
}

.optimis-login-page .input-field {
    position: relative;
    width: 100%;
    height: 3.9vh;
    margin: 0;
    padding: 0 2vh;
    border: max(1px, 0.15vh) solid var(--optimis-field-border);
    border-radius: 0.7vh;
    background: transparent;
}

.optimis-login-page .input-field + .input-field {
    margin-top: 3.4vh;
}

.optimis-login-page .input-field:focus-within {
    border-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10);
}

.optimis-login-page .input-field input {
    width: 100%;
    height: 100%;
    padding: 0;
    color: var(--optimis-white);
    font-size: min(1.65vh, 17px);
    font-weight: 700;
    text-align: center;
}

.optimis-login-page .input-field input::placeholder {
    color: var(--optimis-white);
    opacity: 1;
}

.optimis-login-page input:-webkit-autofill,
.optimis-login-page input:-webkit-autofill:hover,
.optimis-login-page input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #12569d inset;
    -webkit-text-fill-color: var(--optimis-white);
}

/* Optimis fields have no leading/trailing icons. */
.optimis-login-page .input-field svg {
    display: none !important;
}

.optimis-login-page #login-btn {
    width: 10.3vh;
    height: 10.3vh;
    min-width: 10.3vh;
    margin-top: 6.4vh;
    padding: 0;
    border: max(1px, 0.15vh) solid var(--optimis-button-border);
    border-radius: 50%;
    outline: none;
    background: var(--optimis-white);
    color: var(--optimis-green);
    font-size: min(1.65vh, 17px);
    line-height: calc(10.3vh - 2px);
    font-weight: 800;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.optimis-login-page #login-btn:hover,
.optimis-login-page #login-btn:focus,
.optimis-login-page #login-btn:active {
    border-color: var(--optimis-button-border);
    background: var(--optimis-white);
    color: var(--optimis-green);
    transform: translateY(-2px);
}

.optimis-login-page #login-btn:focus-visible {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35);
}

.optimis-login-page #login-btn.is-submitting {
    transform: scale(0.94);
}

.optimis-login-page #login-btn.is-submitting #loginSpinner {
    margin: 0 !important;
    font-size: 24px;
}

.optimis-login-page .bottom-div {
    color: rgba(255, 255, 255, 0.75);
    font-size: min(0.9vh, 9px);
}

.optimis-login-page .bottom-div table {
    width: 90%;
}

.optimis-login-page .bottom-div table td {
    color: rgba(255, 255, 255, 0.55);
    padding: 0.4vh 0.8vh;
    white-space: nowrap;
    vertical-align: middle;
}

.optimis-login-page .bottom-div table tr:first-child td {
    width: 33.33%;
}

.optimis-login-page .bottom-div table td a {
    color: rgba(255, 255, 255, 0.85);
    font-size: min(1.35vh, 13px);
    line-height: 1.2;
}

@media (max-width: 640px) {
    .optimis-login-page .overlay {
        width: 100%;
        left: 0;
        transform: none;
    }

    .optimis-login-page #login-container {
        width: 49.2%;
    }
}