:root {
    --flt-charcoal: #101820;
    --flt-black: #070d12;
    --flt-panel: #111c25;
    --flt-gold: #d7b56d;
    --flt-teal: #00a7b5;
    --flt-white: #f6f7f8;
    --flt-muted: #9ca8b0;
}

body.task-login {
    margin: 0;
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(0,167,181,.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(215,181,109,.13),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050a0e 0%,
            #101820 48%,
            #111b24 100%
        );
    color: var(--flt-white);
}

body.task-login::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
}

body.task-login #layout,
body.task-login #layout-content {
    background: transparent;
}

.flt-login-page {
    min-height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 36px 24px;
    position: relative;
    z-index: 2;
}

.flt-login-shell {
    width: min(1000px, 100%);
    display: grid;
    grid-template-columns:
        minmax(280px, 1.08fr)
        minmax(330px, .92fr);
    gap: 76px;
    align-items: center;
}

.flt-brand-panel {
    padding: 20px 4px;
}

body.task-login #logo {
    display: block;
    width: auto;
    max-width: 108px;
    max-height: 108px;
    margin: 0 0 30px 0;
    filter:
        drop-shadow(
            0 15px 35px
            rgba(0,0,0,.4)
        );
}

.flt-wordmark {
    font-size:
        clamp(32px, 5vw, 56px);
    line-height: .92;
    letter-spacing: .09em;
    font-weight: 700;
    color: white;
}

.flt-mail-label {
    margin-top: 16px;
    color: var(--flt-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .55em;
}

.flt-brand-line {
    width: 80px;
    height: 2px;
    margin: 30px 0;
    background:
        linear-gradient(
            90deg,
            var(--flt-teal),
            var(--flt-gold)
        );
}

.flt-private {
    color: var(--flt-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .30em;
}

.flt-copy {
    max-width: 440px;
    margin: 14px 0 0;
    color: #a9b2b8;
    font-size: 15px;
    line-height: 1.7;
}

.flt-login-card {
    padding: 40px 40px 31px;
    border:
        1px solid
        rgba(215,181,109,.20);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.025)
        );
    box-shadow:
        0 35px 90px
        rgba(0,0,0,.44);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.flt-access-label {
    color: var(--flt-teal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .30em;
}

.flt-login-title {
    margin-top: 10px;
    color: white;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 650;
}

.flt-login-subtitle {
    margin-top: 8px;
    margin-bottom: 27px;
    color: var(--flt-muted);
    font-size: 13px;
}

body.task-login #login-form {
    width: 100%;
    margin: 0;
}

body.task-login #login-form label {
    color: #c4ccd1;
    font-size: 12px;
    font-weight: 600;
}

body.task-login #login-form .form-control {
    min-height: 50px;
    border:
        1px solid
        rgba(255,255,255,.15);
    border-radius: 9px;
    background:
        rgba(5,11,16,.66);
    color: white;
    box-shadow: none;
}

body.task-login #login-form .form-control:focus {
    border-color: var(--flt-teal);
    box-shadow:
        0 0 0 3px
        rgba(0,167,181,.13);
}

body.task-login #login-form .input-group-text {
    border-color:
        rgba(255,255,255,.15);
    background:
        rgba(5,11,16,.66);
    color: #8c989f;
}

body.task-login #login-form .btn-primary,
body.task-login #login-form button[type="submit"] {
    min-height: 51px;
    border: 0;
    border-radius: 9px;
    background:
        linear-gradient(
            90deg,
            #008d99,
            var(--flt-teal)
        );
    color: white;
    font-weight: 700;
    letter-spacing: .07em;
    box-shadow:
        0 12px 30px
        rgba(0,167,181,.20);
}

body.task-login #login-form .btn-primary:hover,
body.task-login #login-form button[type="submit"]:hover {
    filter: brightness(1.09);
}

.flt-secure-status {
    margin-top: 20px;
    color: #8b979f;
    font-size: 10px;
    letter-spacing: .11em;
}

.flt-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--flt-teal);
    box-shadow:
        0 0 12px
        rgba(0,167,181,.85);
}

.flt-divider {
    margin: 0 6px;
}

.flt-footer {
    margin-top: 24px;
    padding-top: 19px;
    border-top:
        1px solid
        rgba(255,255,255,.075);
    color: #78858d;
    font-size: 10px;
    letter-spacing: .05em;
}

.flt-footer a {
    color: var(--flt-gold);
    text-decoration: none;
}

/*
 * Restrained FLT accent inside the mailbox.
 */
body:not(.task-login) .btn-primary {
    background-color: var(--flt-teal);
    border-color: var(--flt-teal);
}

@media (max-width: 760px) {

    .flt-login-page {
        padding: 24px 17px 36px;
        align-items: flex-start;
    }

    .flt-login-shell {
        grid-template-columns: 1fr;
        max-width: 480px;
        gap: 24px;
    }

    .flt-brand-panel {
        padding: 8px 4px 0;
        text-align: center;
    }

    body.task-login #logo {
        max-width: 76px;
        max-height: 76px;
        margin: 0 auto 18px;
    }

    .flt-wordmark {
        font-size: 29px;
        line-height: .97;
    }

    .flt-mail-label {
        font-size: 10px;
    }

    .flt-brand-line {
        margin: 20px auto;
    }

    .flt-copy {
        margin: 12px auto 0;
        font-size: 13px;
    }

    .flt-login-card {
        padding: 28px 22px 24px;
        border-radius: 15px;
    }

    .flt-login-title {
        font-size: 23px;
    }
}

/* FLT LOGIN POSITION FIX V1 START */

/*
 * Neutralize Elastic's stock login offsets.
 * Elastic applies viewport-relative top offsets to #logo
 * and #login-form. FLT owns the positioning instead.
 */

body.task-login .flt-brand-panel #logo {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    float: none !important;
    transform: none !important;

    display: block !important;

    width: 106px !important;
    height: auto !important;

    max-width: 106px !important;
    max-height: none !important;

    margin: 0 auto 20px !important;
}

body.task-login #login-form {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}

/*
 * FLT branding alignment
 */

body.task-login .flt-brand-panel {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

body.task-login .flt-wordmark {
    margin: 0;

    text-align: center;
}

body.task-login .flt-mail-label {
    margin-top: 11px;
}

body.task-login .flt-brand-line {
    margin: 20px auto;
}

body.task-login .flt-private {
    text-align: center;
}

body.task-login .flt-copy {
    margin: 12px auto 0;

    text-align: center;
}

/*
 * Remove excessive dead space between the card heading
 * and the Roundcube credential controls.
 */

body.task-login .flt-login-card {
    min-height: 0 !important;
}

body.task-login .flt-login-card #login-form {
    min-height: 0 !important;
    height: auto !important;
}

body.task-login .flt-login-card .formbuttons {
    margin-top: 18px !important;
}

body.task-login .flt-login-shell {
    align-items: center;
}

/*
 * Fold / phone layout
 */

@media (max-width: 760px) {

    .flt-login-page {
        min-height: 100vh;

        padding:
            28px
            18px
            40px !important;
    }

    .flt-login-shell {
        gap: 24px !important;
    }

    body.task-login .flt-brand-panel #logo {
        width: 92px !important;
        max-width: 92px !important;

        margin-bottom: 17px !important;
    }

    body.task-login .flt-wordmark {
        font-size: 29px !important;
        line-height: .96 !important;
    }

    body.task-login .flt-brand-line {
        margin:
            17px
            auto
            18px !important;
    }

    body.task-login .flt-copy {
        margin-top: 10px;
    }

    body.task-login .flt-login-card {
        padding:
            28px
            22px
            24px !important;
    }

    body.task-login .flt-login-subtitle {
        margin-bottom: 22px !important;
    }
}

/* FLT LOGIN POSITION FIX V1 END */