/* Nymbul chrome for Elastic. Message contents and core interaction stay intact. */
:root {
    --nymbul-ink: #15343d;
    --nymbul-muted: #5f7278;
    --nymbul-accent: #167663;
    --nymbul-accent-hover: #105d4e;
    --nymbul-paper: #f6f5f0;
    --nymbul-line: #d9e1df;
}

.task-login #layout-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    min-height: 100dvh;
    padding: 48px 28px 48px calc(46% + 28px);
    overflow: auto;
    background: var(--nymbul-paper);
    color: var(--nymbul-ink);
}

.task-login #logo {
    position: static;
    display: block;
    width: 164px;
    max-height: none;
    height: 43px;
    flex-shrink: 0;
}

.task-login #login-form {
    position: static;
    top: auto;
    width: 100%;
    max-width: 416px;
    margin: 0;
    padding: 36px;
    border: 1px solid #e2e6e0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 44px #15343d08;
    text-align: left;
}

.nymbul-eyebrow {
    display: block;
    margin-bottom: 16px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .2em;
}

.nymbul-welcome h2 {
    margin: 0 0 9px;
    color: var(--nymbul-ink);
    font-size: 29px;
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.nymbul-welcome p {
    margin: 0 0 30px;
    color: var(--nymbul-muted);
    font-size: 14px;
    line-height: 1.6;
}

.task-login #login-form .form-control {
    min-height: 48px;
    border-color: var(--nymbul-line);
    border-radius: 9px;
    background: #fcfcfa;
    color: var(--nymbul-ink);
    font-size: 15px;
}

.task-login #login-form .input-group-text {
    border-color: var(--nymbul-line);
    border-radius: 9px 0 0 9px;
    background: #f2f5f2;
    color: #667e7c;
}

.task-login #login-form .input-group > .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.task-login #login-form .form-control:focus {
    border-color: var(--nymbul-accent);
    box-shadow: 0 0 0 3px #16766324;
}

.task-login #rcmloginsubmit {
    min-height: 48px;
    margin-top: 12px;
    border: 1px solid var(--nymbul-accent);
    border-radius: 9px;
    background: var(--nymbul-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .01em;
}

.task-login #rcmloginsubmit:hover {
    border-color: var(--nymbul-accent-hover);
    background: var(--nymbul-accent-hover);
}

.task-login #rcmloginsubmit:focus-visible {
    outline: 3px solid #16766366;
    outline-offset: 3px;
    box-shadow: none;
}

.nymbul-login-hint {
    margin: 20px 0 0;
    color: var(--nymbul-muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.task-login #login-footer {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid #edf0eb;
    color: var(--nymbul-muted);
    font-size: 11px;
    text-align: center;
}

.nymbul-story {
    position: absolute;
    inset: 0 54% 0 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 100%;
    padding: clamp(40px, 6vw, 100px);
    background: #15343d;
    color: #f5f4ed;
    text-align: left;
}

.nymbul-story-content {
    position: relative;
    z-index: 1;
    max-width: 440px;
}

.nymbul-story .nymbul-eyebrow {
    margin-bottom: 36px;
    color: #acd6bd;
}

.nymbul-story h2 {
    margin: 0 0 26px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(42px, 4.7vw, 76px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.nymbul-story p {
    max-width: 310px;
    margin: 0;
    color: #c1d1d2;
    font-size: 15px;
    line-height: 1.85;
}

.nymbul-story-rule {
    width: 32px;
    height: 1px;
    margin: 36px 0 20px;
    background: #77ac99;
}

.nymbul-story-domain {
    color: #b0c8c7;
    font-size: 12px;
    letter-spacing: .04em;
}

.nymbul-orbit {
    position: absolute;
    right: -150px;
    bottom: -210px;
    width: 580px;
    height: 580px;
    transform: rotate(-30deg);
    border: 1px solid #92b8a628;
    border-radius: 50%;
    pointer-events: none;
}

.nymbul-orbit::before,
.nymbul-orbit::after {
    position: absolute;
    inset: 50px;
    border: 1px solid #92b8a628;
    border-radius: 50%;
    content: '';
}

.nymbul-orbit::after {
    inset: 100px;
}

.nymbul-orbit span {
    position: absolute;
    top: 36px;
    left: 134px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #9dcead;
}

/* Keep Elastic's responsive panes, keyboard controls and mailbox sizing. */
body:not(.task-login) #layout-menu,
body:not(.task-login) #taskmenu,
body:not(.task-login) #layout-menu .popover-header {
    background-color: #15343d !important;
}

body:not(.task-login) #taskmenu a {
    color: #dbe6e4;
}

body:not(.task-login) #taskmenu a.selected,
body:not(.task-login) #taskmenu a:hover {
    background-color: #244a50;
    color: #c3e8ce;
}

body:not(.task-login) #taskmenu a.compose {
    background-color: #167663;
    color: #fff;
}

body:not(.task-login) #taskmenu a.compose:hover {
    background-color: #105d4e;
}

html:not(.dark-mode) body:not(.task-login) #layout-sidebar {
    background-color: #f5f7f4;
}

html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td {
    background-color: #e6f1e9;
    color: #173f36;
}

html:not(.dark-mode) .folderlist li.selected > a {
    background-color: #dfeee4;
    color: #173f36;
}

body:not(.task-login) .btn-primary {
    border-color: #167663;
    background-color: #167663;
}

body:not(.task-login) .btn-primary:hover {
    border-color: #105d4e;
    background-color: #105d4e;
}

body:not(.task-login) .btn-primary:focus-visible {
    outline: 3px solid #79b5a3;
    outline-offset: 2px;
}

html.dark-mode .task-login #layout-content {
    background: #10272e;
}

html.dark-mode .task-login #logo {
    filter: brightness(0) invert(1);
}

html.dark-mode .task-login #login-form {
    border-color: #355058;
    background: #19353e;
    color: #e4eeeb;
}

html.dark-mode .nymbul-welcome h2 {
    color: #f1f5ef;
}

html.dark-mode .nymbul-welcome p,
html.dark-mode .nymbul-login-hint,
html.dark-mode .task-login #login-footer {
    color: #bacdca;
}

html.dark-mode .task-login #login-form .form-control {
    border-color: #47616a;
    background: #112b34;
    color: #f0f5ee;
}

html.dark-mode .task-login #login-form .input-group-text {
    border-color: #47616a;
    background: #28464d;
    color: #b8d1cc;
}

html.dark-mode .task-login #login-footer {
    border-color: #355058;
}

@media (max-width: 900px) {
    .task-login #layout-content {
        padding: 40px 24px;
    }

    .nymbul-story {
        display: none;
    }
}

@media (max-width: 420px) {
    .task-login #layout-content {
        gap: 24px;
        padding: 28px 18px;
    }

    .task-login #login-form {
        padding: 28px 22px;
    }

    .nymbul-welcome h2 {
        font-size: 27px;
    }
}

@media (max-height: 650px) {
    .task-login #layout-content {
        justify-content: flex-start;
    }
}

@media print {
    .nymbul-story {
        display: none;
    }
}