:root {
    --nec-navy: #00142E;
    --nec-navy-2: #031D3F;
    --nec-cyan: #19D7E8;
    --nec-green: #8CC63E;
    --nec-white: #FFFFFF;
    --nec-page: #f6f9fc;
    --nec-surface: #ffffff;
    --nec-surface-soft: #f1f8fb;
    --nec-border: #dbe5ee;
    --nec-text: #142033;
    --nec-muted: #5f6b7a;
    --nec-shadow: 0 10px 30px rgba(0, 20, 46, 0.08);
}

body.task-mail {
    background: var(--nec-page);
}

body.task-mail #layout {
    background: var(--nec-page);
}

body.task-mail #layout-menu,
body.task-mail #layout-menu .popover-header {
    background: var(--nec-navy) !important;
}

body.task-mail #layout-menu #logo {
    max-width: 70px;
    max-height: 52px;
    padding: 7px 6px;
    object-fit: contain;
}

body.task-mail #taskmenu a {
    color: rgba(255, 255, 255, 0.82);
    border-left: 3px solid transparent;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

body.task-mail #taskmenu a:hover,
body.task-mail #taskmenu a:focus {
    color: var(--nec-white);
    background: rgba(25, 215, 232, 0.12);
}

body.task-mail #taskmenu a.selected {
    color: var(--nec-white);
    background: rgba(25, 215, 232, 0.18);
    border-left-color: var(--nec-cyan);
}

body.task-mail #taskmenu a.compose:before {
    color: var(--nec-cyan);
}

body.task-mail #taskmenu a.calendar:before {
    content: "\f133";
}

body.task-mail #taskmenu a.calendar:before {
    color: var(--nec-green);
}

body.task-mail #taskmenu a.logout:before,
body.task-mail #taskmenu a.logout .inner {
    color: #ff615c;
}

html.dark-mode body.task-mail #taskmenu a {
    color: rgba(255, 255, 255, 0.86);
}

html.dark-mode body.task-mail #taskmenu a:hover,
html.dark-mode body.task-mail #taskmenu a:focus {
    color: var(--nec-white);
    background: rgba(25, 215, 232, 0.12) !important;
}

html.dark-mode body.task-mail #taskmenu a.selected {
    color: var(--nec-white);
    background: rgba(25, 215, 232, 0.18) !important;
    border-left-color: var(--nec-cyan);
}

html.dark-mode body.task-mail #taskmenu a.theme,
html.dark-mode body.task-mail #taskmenu a.about,
html.dark-mode body.task-mail #taskmenu a.logout {
    border-radius: 0;
}

html:not(.dark-mode) body.task-mail #layout-sidebar,
html:not(.dark-mode) body.task-mail #layout-list,
html:not(.dark-mode) body.task-mail #layout-content {
    background: var(--nec-surface);
    color: var(--nec-text);
}

html:not(.dark-mode) body.task-mail #layout-sidebar {
    flex: 0 0 282px;
    min-width: 260px;
    max-width: 292px;
    border-right: 1px solid var(--nec-border);
    background: #f8fbfd;
}

html:not(.dark-mode) body.task-mail #layout-list {
    flex: 0 0 560px;
    min-width: 500px;
    max-width: 620px;
    border-right: 1px solid var(--nec-border);
    box-shadow: 8px 0 24px rgba(0, 20, 46, 0.04);
}

html:not(.dark-mode) body.task-mail #layout-content {
    flex: 1 1 auto;
    background: #fbfcfe;
}

html:not(.dark-mode) body.task-mail #layout > div > .header {
    background: var(--nec-surface);
    border-bottom: 1px solid var(--nec-border);
    color: var(--nec-text);
    box-shadow: 0 1px 2px rgba(0, 20, 46, 0.04);
}

html:not(.dark-mode) body.task-mail #layout > div > .footer {
    background: var(--nec-surface);
    border-top: 1px solid var(--nec-border);
}

html:not(.dark-mode) body.task-mail #layout-sidebar > .header .username {
    color: var(--nec-navy);
    font-weight: 700;
}

html:not(.dark-mode) body.task-mail #folderlist-content {
    background: #f8fbfd;
}

html:not(.dark-mode) body.task-mail #layout > div > .header a.button,
html:not(.dark-mode) body.task-mail .menu.toolbar a {
    color: var(--nec-muted);
    border-radius: 999px;
}

html:not(.dark-mode) body.task-mail #layout > div > .header a.button:hover,
html:not(.dark-mode) body.task-mail #layout > div > .header a.button:focus,
html:not(.dark-mode) body.task-mail .menu.toolbar a:not(.disabled):hover,
html:not(.dark-mode) body.task-mail .menu.toolbar a:not(.disabled):focus {
    color: var(--nec-navy);
    background: rgba(25, 215, 232, 0.12);
}

html:not(.dark-mode) body.task-mail .menu.toolbar a.selected,
html:not(.dark-mode) body.task-mail .menu.toolbar a.active {
    color: var(--nec-navy);
}

html:not(.dark-mode) body.task-mail #mailboxlist {
    padding: 38px 12px 10px 0;
    position: relative;
}

html:not(.dark-mode) body.task-mail #mailboxlist:before {
    content: "Mailboxes";
    position: absolute;
    top: 14px;
    left: 18px;
    color: var(--nec-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox {
    border-bottom: 0;
    margin: 2px 0;
    position: relative;
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox > a {
    min-height: 40px;
    line-height: 40px;
    padding-right: 14px;
    color: var(--nec-text);
    border-radius: 0 999px 999px 0;
    transition: background-color 120ms ease, color 120ms ease;
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox > a:hover,
html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox > a:focus {
    color: var(--nec-navy);
    background: rgba(0, 20, 46, 0.06);
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.selected,
html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.selected > a {
    color: var(--nec-navy);
    background: rgba(25, 215, 232, 0.2);
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.selected > a:before {
    color: var(--nec-cyan);
}

html:not(.dark-mode) body.task-mail .folderlist li.mailbox .unreadcount {
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--nec-green);
    color: var(--nec-navy);
    font-weight: 700;
    line-height: 22px;
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.junk {
    margin-top: 8px;
    padding-top: 26px;
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.archive {
    margin-top: 8px;
    padding-top: 26px;
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.junk:before,
html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.archive:before {
    position: absolute;
    top: 8px;
    left: 18px;
    color: var(--nec-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.junk:before {
    content: "Review";
}

html:not(.dark-mode) body.task-mail #mailboxlist li.mailbox.archive:before {
    content: "Storage";
}

html:not(.dark-mode) body.task-mail #layout-list .searchbar {
    height: 46px;
    min-height: 46px;
    margin: 12px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--nec-surface-soft);
    box-shadow: inset 0 0 0 1px rgba(25, 215, 232, 0.1);
}

html:not(.dark-mode) body.task-mail #layout-list .searchbar:focus-within {
    background: var(--nec-surface);
    border-color: rgba(25, 215, 232, 0.7);
    box-shadow: 0 1px 5px rgba(0, 20, 46, 0.12);
}

html:not(.dark-mode) body.task-mail #mailsearchform {
    height: 44px;
    color: var(--nec-text);
    background: transparent;
}

html:not(.dark-mode) body.task-mail #mailsearchform::placeholder {
    color: #758395;
}

html:not(.dark-mode) body.task-mail #messagelist-content {
    background: var(--nec-surface);
}

html:not(.dark-mode) body.task-mail .messagelist {
    color: var(--nec-text);
    border-collapse: separate;
}

html:not(.dark-mode) body.task-mail .messagelist tr.message td {
    height: 60px;
    border-bottom: 1px solid #e8eef5;
    background: var(--nec-surface);
}

html:not(.dark-mode) body.task-mail .messagelist tr.message:hover td {
    background: #f2fbfd;
}

html:not(.dark-mode) body.task-mail .messagelist tr.message.focused td,
html:not(.dark-mode) body.task-mail .messagelist tr.message.selected td {
    background: #e9f8fb;
}

html:not(.dark-mode) body.task-mail .messagelist tr.message:hover td.subject {
    box-shadow: inset 3px 0 0 var(--nec-cyan);
}

html:not(.dark-mode) body.task-mail .messagelist tr.message.focused td.subject,
html:not(.dark-mode) body.task-mail .messagelist tr.message.selected td.subject {
    box-shadow: inset 3px 0 0 var(--nec-green);
}

html:not(.dark-mode) body.task-mail .messagelist tr.unread td.subject a,
html:not(.dark-mode) body.task-mail .messagelist tr.unread td.subject span.subject a {
    color: #071f39;
    font-weight: 700;
}

html:not(.dark-mode) body.task-mail .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html:not(.dark-mode) body.task-mail .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html:not(.dark-mode) body.task-mail .messagelist tr:not(.flagged):not(.deleted) td.subject span.size {
    color: var(--nec-muted);
}

html:not(.dark-mode) body.task-mail #messagecontframe {
    background: #fbfcfe;
}

html:not(.dark-mode) body.task-mail #layout-content .iframe-wrapper {
    background: #fbfcfe;
}

html:not(.dark-mode) body.task-mail .listing-info {
    color: var(--nec-muted);
}

@media screen and (max-width: 1200px) {
    html:not(.dark-mode) body.task-mail #layout-sidebar,
    html:not(.dark-mode) body.task-mail #layout-list {
        flex: 3 1 auto;
        max-width: none;
    }
}

@media screen and (max-width: 768px) {
    html:not(.dark-mode) body.task-mail #layout-sidebar,
    html:not(.dark-mode) body.task-mail #layout-list,
    html:not(.dark-mode) body.task-mail #layout-content {
        min-width: 0;
        border-radius: 0;
    }

    html:not(.dark-mode) body.task-mail #layout-list .searchbar {
        margin: 8px 10px;
    }

    html:not(.dark-mode) body.task-mail .messagelist tr:not(.flagged):not(.deleted) td.subject span.size {
        display: none;
    }

    html:not(.dark-mode) body.task-mail .messagelist td.subject {
        padding-right: 3.25rem;
    }

    html:not(.dark-mode) body.task-mail .messagelist td.subject span.date {
        flex: 0 0 auto;
    }
}

html.dark-mode body.task-mail {
    --nec-dark-page: #07111D;
    --nec-dark-rail: #00142E;
    --nec-dark-panel: #0D1A2A;
    --nec-dark-panel-soft: #102236;
    --nec-dark-panel-raised: #13283C;
    --nec-dark-border: #253A50;
    --nec-dark-text: #EAF3FA;
    --nec-dark-muted: #A6B6C6;
    --nec-dark-dim: #7F93A5;
    background: var(--nec-dark-page);
    color: var(--nec-dark-text);
}

html.dark-mode body.task-mail #layout {
    background: var(--nec-dark-page);
}

html.dark-mode body.task-mail #layout-menu,
html.dark-mode body.task-mail #layout-menu .popover-header {
    background: var(--nec-dark-rail) !important;
}

html.dark-mode body.task-mail #layout-sidebar,
html.dark-mode body.task-mail #layout-list,
html.dark-mode body.task-mail #layout-content {
    color: var(--nec-dark-text);
}

html.dark-mode body.task-mail #layout-sidebar {
    flex: 0 0 282px;
    min-width: 260px;
    max-width: 292px;
    background: #091625;
    border-right: 1px solid var(--nec-dark-border);
}

html.dark-mode body.task-mail #layout-list {
    flex: 0 0 560px;
    min-width: 500px;
    max-width: 620px;
    background: var(--nec-dark-panel);
    border-right: 1px solid var(--nec-dark-border);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.18);
}

html.dark-mode body.task-mail #layout-content {
    flex: 1 1 auto;
    background: var(--nec-dark-page);
}

html.dark-mode body.task-mail #layout > div > .header {
    background: #0F1C2B;
    border-bottom: 1px solid var(--nec-dark-border);
    color: var(--nec-dark-text);
    box-shadow: 0 1px 0 rgba(25, 215, 232, 0.06);
}

html.dark-mode body.task-mail #layout > div > .footer {
    background: #0F1C2B;
    border-top: 1px solid var(--nec-dark-border);
    color: var(--nec-dark-muted);
}

html.dark-mode body.task-mail #layout-sidebar > .header .username {
    color: var(--nec-dark-text);
    font-weight: 700;
}

html.dark-mode body.task-mail #folderlist-content {
    background: #091625;
}

html.dark-mode body.task-mail #layout > div > .header a.button,
html.dark-mode body.task-mail .menu.toolbar a {
    color: var(--nec-dark-muted);
    border-radius: 999px;
}

html.dark-mode body.task-mail #layout > div > .header a.button:hover,
html.dark-mode body.task-mail #layout > div > .header a.button:focus,
html.dark-mode body.task-mail .menu.toolbar a:not(.disabled):hover,
html.dark-mode body.task-mail .menu.toolbar a:not(.disabled):focus {
    color: var(--nec-white);
    background: rgba(25, 215, 232, 0.12);
}

html.dark-mode body.task-mail .menu.toolbar a.selected,
html.dark-mode body.task-mail .menu.toolbar a.active {
    color: var(--nec-cyan);
}

html.dark-mode body.task-mail #mailboxlist {
    padding: 38px 12px 10px 0;
    position: relative;
}

html.dark-mode body.task-mail #mailboxlist:before {
    content: "Mailboxes";
    position: absolute;
    top: 14px;
    left: 18px;
    color: var(--nec-dark-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

html.dark-mode body.task-mail #mailboxlist li.mailbox {
    border-bottom: 0;
    margin: 2px 0;
    position: relative;
}

html.dark-mode body.task-mail #mailboxlist li.mailbox > a {
    min-height: 40px;
    line-height: 40px;
    padding-right: 14px;
    color: var(--nec-dark-text);
    border-radius: 0 999px 999px 0;
    transition: background-color 120ms ease, color 120ms ease;
}

html.dark-mode body.task-mail #mailboxlist li.mailbox > a:hover,
html.dark-mode body.task-mail #mailboxlist li.mailbox > a:focus {
    color: var(--nec-white);
    background: rgba(25, 215, 232, 0.1);
}

html.dark-mode body.task-mail #mailboxlist li.mailbox.selected,
html.dark-mode body.task-mail #mailboxlist li.mailbox.selected > a {
    color: var(--nec-white);
    background: rgba(25, 215, 232, 0.2);
}

html.dark-mode body.task-mail #mailboxlist li.mailbox.selected > a:before {
    color: var(--nec-cyan);
}

html.dark-mode body.task-mail .folderlist li.mailbox .unreadcount {
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--nec-green);
    color: var(--nec-navy);
    font-weight: 700;
    line-height: 22px;
}

html.dark-mode body.task-mail #mailboxlist li.mailbox.junk {
    margin-top: 8px;
    padding-top: 26px;
}

html.dark-mode body.task-mail #mailboxlist li.mailbox.archive {
    margin-top: 8px;
    padding-top: 26px;
}

html.dark-mode body.task-mail #mailboxlist li.mailbox.junk:before,
html.dark-mode body.task-mail #mailboxlist li.mailbox.archive:before {
    position: absolute;
    top: 8px;
    left: 18px;
    color: var(--nec-dark-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

html.dark-mode body.task-mail #mailboxlist li.mailbox.junk:before {
    content: "Review";
}

html.dark-mode body.task-mail #mailboxlist li.mailbox.archive:before {
    content: "Storage";
}

html.dark-mode body.task-mail #layout-list .searchbar {
    height: 46px;
    min-height: 46px;
    margin: 12px 14px;
    border: 1px solid rgba(25, 215, 232, 0.12);
    border-radius: 999px;
    background: var(--nec-dark-panel-soft);
    box-shadow: inset 0 0 0 1px rgba(25, 215, 232, 0.05);
}

html.dark-mode body.task-mail #layout-list .searchbar:focus-within {
    background: var(--nec-dark-panel-raised);
    border-color: rgba(25, 215, 232, 0.7);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

html.dark-mode body.task-mail #mailsearchform {
    height: 44px;
    color: var(--nec-dark-text);
    background: transparent;
}

html.dark-mode body.task-mail #mailsearchform::placeholder {
    color: var(--nec-dark-muted);
}

html.dark-mode body.task-mail #messagelist-content {
    background: var(--nec-dark-panel);
}

html.dark-mode body.task-mail .messagelist {
    color: var(--nec-dark-text);
    border-collapse: separate;
}

html.dark-mode body.task-mail .messagelist tr.message td {
    height: 60px;
    border-bottom: 1px solid var(--nec-dark-border);
    background: var(--nec-dark-panel);
}

html.dark-mode body.task-mail .messagelist tr.message:hover td {
    background: #123047;
}

html.dark-mode body.task-mail .messagelist tr.message.focused td,
html.dark-mode body.task-mail .messagelist tr.message.selected td {
    background: #123342;
}

html.dark-mode body.task-mail .messagelist tr.message:hover td.subject {
    box-shadow: inset 3px 0 0 var(--nec-cyan);
}

html.dark-mode body.task-mail .messagelist tr.message.focused td.subject,
html.dark-mode body.task-mail .messagelist tr.message.selected td.subject {
    box-shadow: inset 3px 0 0 var(--nec-green);
}

html.dark-mode body.task-mail .messagelist tr.unread td.subject a,
html.dark-mode body.task-mail .messagelist tr.unread td.subject span.subject a {
    color: var(--nec-white);
    font-weight: 700;
}

html.dark-mode body.task-mail .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode body.task-mail .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html.dark-mode body.task-mail .messagelist tr:not(.flagged):not(.deleted) td.subject span.size {
    color: var(--nec-dark-muted);
}

html.dark-mode body.task-mail #layout-content .iframe-wrapper,
html.dark-mode body.task-mail #messagecontframe {
    background: var(--nec-dark-page);
}

html.dark-mode body.task-mail .listing-info,
html.dark-mode body.task-mail .menu.pagenav .pagenav-text {
    color: var(--nec-dark-muted);
}

html.dark-mode body.task-mail .menu.pagenav a {
    color: var(--nec-dark-muted);
}

html.dark-mode body.task-mail .menu.pagenav a:not(.disabled):hover,
html.dark-mode body.task-mail .menu.pagenav a:not(.disabled):focus {
    color: var(--nec-white);
}

@media screen and (max-width: 1200px) {
    html.dark-mode body.task-mail #layout-sidebar,
    html.dark-mode body.task-mail #layout-list {
        flex: 3 1 auto;
        max-width: none;
    }
}

@media screen and (max-width: 768px) {
    html.dark-mode body.task-mail #layout-sidebar,
    html.dark-mode body.task-mail #layout-list,
    html.dark-mode body.task-mail #layout-content {
        min-width: 0;
        border-radius: 0;
    }

    html.dark-mode body.task-mail #layout-list .searchbar {
        margin: 8px 10px;
    }

    html.dark-mode body.task-mail .messagelist tr:not(.flagged):not(.deleted) td.subject span.size {
        display: none;
    }

    html.dark-mode body.task-mail .messagelist td.subject {
        padding-right: 3.25rem;
    }

    html.dark-mode body.task-mail .messagelist td.subject span.date {
        flex: 0 0 auto;
    }
}