:root {
    --hf-navy-950: #071b2e;
    --hf-navy-900: #0b2237;
    --hf-navy-800: #102c45;
    --hf-blue-600: #1880d4;
    --hf-blue-500: #2789de;
    --hf-blue-400: #37a8ef;
    --hf-green-500: #28b987;
    --hf-amber-500: #f0a63a;
    --hf-surface: #ffffff;
    --hf-surface-soft: #f6f9fc;
    --hf-border: #dce6ef;
    --hf-text: #10243a;
    --hf-muted: #6f8092;
    --hf-shadow: 0 18px 42px rgba(8, 30, 51, .13);
    --hf-soft-shadow: 0 10px 26px rgba(8, 30, 51, .08);
}

body:not(.task-login) {
    color: var(--hf-text);
    background: #eef5fb;
}

body:not(.task-login) #layout {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, 0) 180px),
        #eef5fb;
}

body:not(.task-login) #layout-menu {
    background:
        radial-gradient(circle at 50% 0%, rgba(55, 168, 239, .22), transparent 34%),
        linear-gradient(180deg, #071b2e, #09243a 56%, #061625);
    border-right: 0;
    box-shadow: 10px 0 32px rgba(7, 27, 46, .16);
}

body:not(.task-login) #layout-menu .popover-header {
    position: relative;
    background: transparent !important;
    border: 0;
}

body:not(.task-login) #layout-menu .popover-header img {
    max-width: 46px;
    max-height: 46px;
    padding: 0;
    opacity: 0;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .18));
}

body:not(.task-login) #layout-menu .popover-header::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 0;
    background: url("../images/hosting-fox-symbol.png") center / contain no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .2));
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body:not(.task-login) #taskmenu a {
    color: rgba(235, 246, 255, .7);
    border-left: 3px solid transparent;
    transition: background-color .16s ease, color .16s ease;
}

body:not(.task-login) #taskmenu a::before {
    color: currentColor;
    font-size: 1.45rem;
}

body:not(.task-login) #taskmenu span.inner {
    font-size: .78rem;
    font-weight: 700;
}

body:not(.task-login) #taskmenu a.selected,
body:not(.task-login) #taskmenu a:focus,
body:not(.task-login) #taskmenu a:hover {
    border-left-color: var(--hf-blue-400);
    background:
        linear-gradient(90deg, rgba(55, 168, 239, .26), rgba(55, 168, 239, .08));
    color: #ffffff;
}

body:not(.task-login) #taskmenu .action-buttons a,
body:not(.task-login) .floating-action-buttons a.button {
    background: linear-gradient(135deg, var(--hf-blue-600), var(--hf-blue-400));
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(24, 128, 212, .28);
}

body:not(.task-login) #taskmenu a.logout {
    color: #ff7777 !important;
}

body:not(.task-login) #taskmenu .special-buttons a:not(:focus) {
    background: transparent;
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
    background: var(--hf-surface);
}

body.task-mail:not(.action-compose) #layout-sidebar,
body.task-mail:not(.action-compose) #layout-list,
body.task-settings #layout-sidebar,
body.task-settings #layout-list {
    background: #f7fbff;
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list {
    border-color: var(--hf-border);
}

body:not(.task-login) #layout-sidebar {
    background: #f8fbfe;
}

body.task-mail #layout-sidebar > .header,
body.task-addressbook #layout-sidebar > .header,
body.task-settings #layout-sidebar > .header {
    background:
        linear-gradient(135deg, rgba(39, 137, 222, .12), rgba(40, 185, 135, .08)),
        #ffffff;
}

body.task-mail #layout-sidebar > .header .username {
    padding: 0 .7rem;
    color: var(--hf-navy-900);
    font-size: .96rem;
    font-weight: 700;
}

body:not(.task-login) #layout > div > .header {
    min-height: 60px;
    height: 60px;
    line-height: 60px;
    border-color: var(--hf-border);
    background: rgba(255, 255, 255, .96);
    color: var(--hf-text);
    box-shadow: 0 1px 0 rgba(16, 36, 58, .02);
}

body.task-mail:not(.action-compose) #layout > div > .header,
body.task-settings #layout > div > .header,
body.task-addressbook #layout > div > .header {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 250, 253, .98));
}

body:not(.task-login) #layout > div > .header .header-title {
    color: var(--hf-text);
    font-weight: 700;
}

body:not(.task-login) #layout > div > .footer {
    border-color: var(--hf-border);
    background: #f8fbfe;
}

body:not(.task-login) .searchbar {
    border-color: var(--hf-border);
    background: var(--hf-surface);
}

body:not(.task-login) .searchbar form {
    margin: .55rem .65rem;
}

body:not(.task-login) .searchbar input {
    height: 38px;
    border: 1px solid var(--hf-border);
    border-radius: 10px;
    background: var(--hf-surface-soft);
    color: var(--hf-text);
    padding-left: 2.3rem;
}

body.task-mail .searchbar {
    background: #ffffff;
}

body.task-mail .searchbar input {
    height: 42px;
    border-radius: 12px;
    background: #f4f8fc;
}

body:not(.task-login) .searchbar form::before {
    left: 1rem;
    color: var(--hf-muted);
}

body:not(.task-login) .searchbar input:focus {
    border-color: rgba(39, 137, 222, .72);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(39, 137, 222, .14);
}

body:not(.task-login) .listing li,
body:not(.task-login) .listing tbody td {
    border-color: #e8eef4;
}

body:not(.task-login) .listing li a,
body:not(.task-login) .listing tbody td,
body:not(.task-login) .listing tbody td a {
    color: var(--hf-text);
}

body:not(.task-login) .listing li:hover,
body:not(.task-login) .listing tbody tr:hover td {
    background: #f1f8ff;
}

body:not(.task-login) .listing li.selected,
body:not(.task-login) .listing li.selected > a,
body:not(.task-login) .listing li.selected > div > a,
body:not(.task-login) .listing tr.selected td {
    color: var(--hf-text);
    background: #e5f4ff;
}

body:not(.task-login) .listing li > a {
    transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

body:not(.task-login) .listing:not(.folderlist) li.selected,
body:not(.task-login) .listing tr.selected td:first-child {
    box-shadow: inset 3px 0 0 var(--hf-blue-500);
}

body:not(.task-login) .folderlist li.mailbox .unreadcount {
    min-width: 1.6rem;
    border-radius: 999px;
    background: var(--hf-blue-500);
    color: #ffffff;
    font-weight: 700;
}

body.task-mail #mailboxlist {
    padding: .35rem .4rem .85rem;
}

body.task-mail #mailboxlist li {
    border-bottom: 0;
}

body.task-mail #mailboxlist li > a {
    min-height: 40px;
    margin: 2px 0;
    border-radius: 12px;
    color: #253746;
    line-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

body.task-mail #mailboxlist li > a::before {
    color: #314452;
}

body.task-mail #mailboxlist li.selected > a,
body.task-mail #mailboxlist li > a:focus,
body.task-mail #mailboxlist li > a:hover {
    background: #e6f5ff;
    color: var(--hf-navy-900);
}

body.task-mail #mailboxlist li.selected,
body.task-mail #mailboxlist li.focused {
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.task-mail #mailboxlist li.selected > a,
body.task-mail #mailboxlist li.focused > a {
    position: relative;
    box-shadow: none !important;
    outline: 0 !important;
}

body.task-mail #mailboxlist li.selected > a::after,
body.task-mail #mailboxlist li.focused > a::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: var(--hf-blue-500);
}

body:not(.task-login) .folderlist li.mailbox.unread > a,
body:not(.task-login) .messagelist tr.unread td.subject a,
body:not(.task-login) .messagelist tr.unread td {
    font-weight: 700;
}

body:not(.task-login) .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
body:not(.task-login) .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
body:not(.task-login) .messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
body:not(.task-login) .listing span.secondary,
body:not(.task-login) .listing-info {
    color: var(--hf-muted);
}

body:not(.task-login) .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread::before {
    color: var(--hf-amber-500);
}

body:not(.task-login) .messagelist tr.flagged:not(.deleted) td,
body:not(.task-login) .messagelist tr.flagged:not(.deleted) span.attachment span {
    color: #cf3d40;
}

body.task-mail #layout-list {
    background: #f7fbff;
}

body.task-mail #messagelist-header {
    background: #ffffff;
}

body.task-mail #messagelist-content {
    background: #f7fbff;
}

body.task-mail .messagelist tbody tr {
    background: #ffffff;
}

body.task-mail .messagelist tbody td {
    border-bottom: 1px solid #e8eef4;
}

body.task-mail .messagelist td.subject {
    padding: .42rem .65rem .42rem .35rem;
}

body.task-mail .messagelist td.subject span.fromto {
    color: #647484;
    font-size: .88rem;
}

body.task-mail .messagelist td.subject span.subject {
    color: var(--hf-text);
    font-size: .98rem;
}

body.task-mail .messagelist tr.unread td.subject span.subject {
    color: #0b2237;
}

body.task-mail .messagelist tr.selected td,
body.task-mail .messagelist tr:hover td {
    background: #eaf6ff;
}

body.task-mail .messagelist tr.selected td:first-child,
body.task-mail .messagelist tr.unread td:first-child {
    box-shadow: inset 3px 0 0 var(--hf-blue-500);
}

body.task-mail .messagelist span.attachment span {
    color: #7b8b98;
}

body:not(.task-login) .menu.toolbar a,
body:not(.task-login) #layout > div > .header a.button {
    color: var(--hf-navy-800);
}

body:not(.task-login) .menu.toolbar a.disabled,
body:not(.task-login) #layout > div > .header a.button.disabled {
    color: #91a0ad;
    opacity: .72;
}

body:not(.task-login) .toolbar.menu a::before,
body:not(.task-login) .header a.button::before {
    color: currentColor;
}

body:not(.task-login) .menu.toolbar a:not(.disabled):focus,
body:not(.task-login) .menu.toolbar a:not(.disabled):hover,
body:not(.task-login) #layout > div > .header a.button:not(.disabled):focus,
body:not(.task-login) #layout > div > .header a.button:not(.disabled):hover {
    background: #eaf5ff;
    color: var(--hf-blue-600);
}

body:not(.task-login) .menu.toolbar a.selected,
body:not(.task-login) .menu.toolbar a.pressed {
    color: var(--hf-blue-600);
}

body:not(.task-login) .btn-primary,
body:not(.task-login) .formbuttons .btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--hf-blue-600), var(--hf-blue-400));
    box-shadow: 0 12px 24px rgba(24, 128, 212, .18);
    color: #ffffff;
}

body:not(.task-login) .btn {
    border-radius: 10px;
    font-weight: 700;
}

body:not(.task-login) .btn-primary:hover:not(:disabled),
body:not(.task-login) .btn-primary:focus:not(:disabled) {
    background: linear-gradient(135deg, #0f74c7, #209ee8);
    color: #ffffff;
}

body:not(.task-login) .btn-secondary {
    border-color: var(--hf-border);
    background: #edf5fb;
    color: var(--hf-navy-800);
}

body:not(.task-login) .form-control,
body:not(.task-login) .custom-select,
body:not(.task-login) .custom-file-label,
body:not(.task-login) .recipient-input {
    border-color: var(--hf-border);
    border-radius: 10px;
    background-color: #ffffff;
    color: var(--hf-text);
}

body:not(.task-login) .form-control:focus,
body:not(.task-login) .custom-select:focus,
body:not(.task-login) .recipient-input.focus {
    border-color: var(--hf-blue-500);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(39, 137, 222, .14);
}

body:not(.task-login) .input-group-text {
    border-color: var(--hf-border);
    background: #f4f8fb;
    color: var(--hf-muted);
}

body:not(.task-login) .attachmentslist,
body:not(.task-login) .file-upload,
body:not(.task-login) .table-widget {
    border-color: var(--hf-border);
    background: #f8fbfe;
    border-radius: 12px;
}

body.action-compose #layout-content,
body.action-compose #layout-sidebar.sidebar-right {
    background:
        linear-gradient(180deg, #f7fbff, #ffffff);
}

body.action-compose #layout-content > .header {
    border-bottom-color: #dde8f2;
    background: rgba(255, 255, 255, .98);
}

body.action-compose #compose-content {
    padding: 22px 24px 84px;
    background:
        radial-gradient(circle at 84% 10%, rgba(55, 168, 239, .08), transparent 30%),
        #f7fbff;
}

body.action-compose #compose-headers,
body.action-compose #composebodycontainer {
    width: min(920px, 100%);
    margin-right: auto;
    margin-left: auto;
    border: 1px solid var(--hf-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--hf-soft-shadow);
}

body.action-compose #compose-headers {
    padding: 18px 20px 4px;
}

body.action-compose #compose-headers .form-group {
    margin-bottom: 12px;
}

body.action-compose #compose-headers label {
    color: #4d5f70;
    font-size: .92rem;
    font-weight: 700;
}

body.action-compose #compose-headers .form-control,
body.action-compose #compose-headers .recipient-input,
body.action-compose #compose-headers .custom-select,
body.action-compose #compose-headers .input-group-text {
    min-height: 42px;
    border-radius: 10px;
}

body.action-compose #composebodycontainer {
    margin-top: 16px;
    overflow: hidden;
}

body.action-compose #composebodycontainer > label.voice + textarea,
body.action-compose #composebody {
    min-height: 390px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    resize: vertical;
}

body.action-compose #composebodycontainer .html-editor,
body.action-compose #composebodycontainer .tox.tox-tinymce {
    border: 0;
}

body.action-compose #compose-content > .formbuttons {
    width: min(920px, 100%);
    margin: 18px auto 0;
}

body.action-compose .formbuttons .btn-primary.send {
    min-height: 44px;
    padding-right: 20px;
    padding-left: 20px;
}

body.action-compose #layout-sidebar.sidebar-right {
    border-left: 1px solid var(--hf-border);
}

body.action-compose #layout-sidebar.sidebar-right > .header {
    justify-content: flex-start;
    padding-left: 18px;
}

body.action-compose #layout-sidebar.sidebar-right > .header .header-title {
    text-align: left;
}

body.action-compose #compose-attachments {
    margin: 18px 18px 16px;
    border: 1px dashed #c8d8e5;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 251, 255, .9));
    box-shadow: var(--hf-soft-shadow);
}

body.action-compose #compose-attachments .upload-form {
    padding: 18px;
    text-align: center;
}

body.action-compose #compose-attachments .upload-form .hint {
    color: var(--hf-muted);
}

body.action-compose #compose-options {
    margin: 0 18px 18px;
    border: 1px solid var(--hf-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--hf-soft-shadow);
    padding: 14px 16px 6px;
}

body.action-compose #compose-options .form-group {
    margin-right: 0;
    margin-left: 0;
}

body.task-settings #layout-sidebar .listing li > a,
body.task-settings #layout-list .listing li > a {
    min-height: 40px;
    margin: 2px .45rem;
    border-radius: 12px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

body.task-settings #layout-sidebar .listing li.selected > a,
body.task-settings #layout-list .listing li.selected > a {
    background: #e6f5ff;
    box-shadow: inset 3px 0 0 var(--hf-blue-500);
}

body.task-settings .formcontent {
    padding: 22px 28px;
}

body.task-settings .propform {
    width: min(980px, 100%);
}

body.task-settings .propform fieldset,
body.task-settings .propform .form-group {
    border-color: var(--hf-border);
}

body.task-settings .formbuttons {
    padding: 14px 28px;
    border-top: 1px solid var(--hf-border);
    background: #eef6fd;
}

body:not(.task-login) .quota-widget {
    color: var(--hf-muted);
}

body:not(.task-login) .quota-widget .bar {
    border-color: var(--hf-border);
    background: #e4edf5;
}

body:not(.task-login) .quota-widget .value {
    background: linear-gradient(90deg, var(--hf-blue-500), var(--hf-green-500));
}

body:not(.task-login) .popupmenu,
body:not(.task-login) .popover,
body:not(.task-login) .ui-dialog {
    border-color: rgba(16, 36, 58, .12);
    border-radius: 14px;
    box-shadow: var(--hf-shadow);
}

body:not(.task-login) .popupmenu .listing li a,
body:not(.task-login) .popover .listing li a {
    color: var(--hf-text);
}

body:not(.task-login) .popupmenu .listing li a:not(.disabled):hover,
body:not(.task-login) .popover .listing li a:not(.disabled):hover {
    background: #eaf5ff;
    color: var(--hf-blue-600);
}

body:not(.task-login) #message-header {
    border: 1px solid var(--hf-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(8, 30, 51, .06);
    padding: .85rem 1rem;
}

body:not(.task-login) #message-header .subject {
    color: var(--hf-text);
}

body:not(.task-login) .message-partheaders {
    border-color: var(--hf-border);
    background: #f8fbfe;
}

body:not(.task-login) .message-part {
    border-color: var(--hf-border);
}

body:not(.task-login) #compose-content,
body:not(.task-login) .frame-content,
body:not(.task-login) .formcontent {
    background: #ffffff;
}

body:not(.task-login) #compose-headers {
    border-bottom: 1px solid var(--hf-border);
}

body:not(.task-login) .contact-header .contact-photo img,
body:not(.task-login) #contactpic,
body:not(.task-login) img.contactphoto {
    border-radius: 12px;
    background-color: #eaf2f8 !important;
}

html.dark-mode body:not(.task-login) {
    color: #dfeaf2;
    background: #07141f;
}

html.dark-mode body:not(.task-login) #layout {
    background:
        radial-gradient(circle at 82% 22%, rgba(39, 137, 222, .14), transparent 34%),
        #07141f;
}

html.dark-mode body:not(.task-login) #layout,
html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content,
html.dark-mode body:not(.task-login) #compose-content,
html.dark-mode body:not(.task-login) .frame-content,
html.dark-mode body:not(.task-login) .formcontent {
    background: #0d1d2d;
}

html.dark-mode body.task-mail:not(.action-compose) #layout-sidebar,
html.dark-mode body.task-mail:not(.action-compose) #layout-list,
html.dark-mode body.task-settings #layout-sidebar,
html.dark-mode body.task-settings #layout-list {
    background: #0b1c2b;
}

html.dark-mode body:not(.task-login) #layout > div > .header,
html.dark-mode body:not(.task-login) #layout > div > .footer,
html.dark-mode body:not(.task-login) .searchbar,
html.dark-mode body:not(.task-login) #message-header {
    border-color: rgba(176, 204, 224, .16);
    background: #102538;
    color: #eef6fb;
}

html.dark-mode body.task-mail #layout-sidebar > .header,
html.dark-mode body.task-addressbook #layout-sidebar > .header,
html.dark-mode body.task-settings #layout-sidebar > .header,
html.dark-mode body.task-mail:not(.action-compose) #layout > div > .header,
html.dark-mode body.task-settings #layout > div > .header,
html.dark-mode body.task-addressbook #layout > div > .header {
    background:
        linear-gradient(180deg, rgba(16, 37, 56, .98), rgba(11, 28, 43, .98));
}

html.dark-mode body.task-mail #layout-sidebar > .header .username {
    color: #ffffff;
}

html.dark-mode body:not(.task-login) #layout > div > .header .header-title,
html.dark-mode body:not(.task-login) .listing li a,
html.dark-mode body:not(.task-login) .listing tbody td,
html.dark-mode body:not(.task-login) .listing tbody td a,
html.dark-mode body:not(.task-login) #message-header .subject {
    color: #eef6fb;
}

html.dark-mode body:not(.task-login) .listing li,
html.dark-mode body:not(.task-login) .listing tbody td,
html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list {
    border-color: rgba(176, 204, 224, .12);
}

html.dark-mode body.task-mail #mailboxlist li > a {
    color: #c9d9e6;
}

html.dark-mode body.task-mail #mailboxlist li > a::before {
    color: #9fb7ca;
}

html.dark-mode body:not(.task-login) .listing li:hover,
html.dark-mode body:not(.task-login) .listing tbody tr:hover td,
html.dark-mode body:not(.task-login) .listing li.selected,
html.dark-mode body:not(.task-login) .listing li.selected > a,
html.dark-mode body:not(.task-login) .listing li.selected > div > a,
html.dark-mode body:not(.task-login) .listing tr.selected td {
    background: #173654;
    color: #ffffff;
}

html.dark-mode body.task-mail #mailboxlist li.selected > a,
html.dark-mode body.task-mail #mailboxlist li > a:focus,
html.dark-mode body.task-mail #mailboxlist li > a:hover {
    background: rgba(39, 137, 222, .24);
    color: #ffffff;
}

html.dark-mode body.task-mail #mailboxlist li.selected > a::before,
html.dark-mode body.task-mail #mailboxlist li > a:focus::before,
html.dark-mode body.task-mail #mailboxlist li > a:hover::before {
    color: #ffffff;
}

html.dark-mode body:not(.task-login) .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode body:not(.task-login) .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html.dark-mode body:not(.task-login) .messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
html.dark-mode body:not(.task-login) .listing span.secondary,
html.dark-mode body:not(.task-login) .listing-info {
    color: #9fb0c0;
}

html.dark-mode body.task-mail #messagelist-header,
html.dark-mode body.task-mail .searchbar {
    background: #102538;
    border-color: rgba(176, 204, 224, .16);
}

html.dark-mode body.task-mail #messagelist-content {
    background: #0b1c2b;
}

html.dark-mode body.task-mail .messagelist tbody tr {
    background: #0f2233;
}

html.dark-mode body.task-mail .messagelist tbody td {
    border-bottom-color: rgba(176, 204, 224, .12);
    background: #0f2233;
    color: #dfeaf2;
}

html.dark-mode body.task-mail .messagelist td.subject span.fromto {
    color: #9fb0c0;
}

html.dark-mode body.task-mail .messagelist td.subject span.subject {
    color: #dfeaf2;
}

html.dark-mode body.task-mail .messagelist tr.unread td,
html.dark-mode body.task-mail .messagelist tr.unread td.subject span.subject {
    color: #ffffff;
}

html.dark-mode body.task-mail .messagelist tr.selected td,
html.dark-mode body.task-mail .messagelist tr:hover td {
    background: #173654;
    color: #ffffff;
}

html.dark-mode body.task-mail .messagelist span.attachment span {
    color: #9fb0c0;
}

html.dark-mode body:not(.task-login) .menu.toolbar a,
html.dark-mode body:not(.task-login) #layout > div > .header a.button {
    color: #c7d8e6;
}

html.dark-mode body:not(.task-login) .menu.toolbar a.disabled,
html.dark-mode body:not(.task-login) #layout > div > .header a.button.disabled {
    color: #667d90;
    opacity: 1;
}

html.dark-mode body:not(.task-login) .menu.toolbar a:not(.disabled):focus,
html.dark-mode body:not(.task-login) .menu.toolbar a:not(.disabled):hover,
html.dark-mode body:not(.task-login) #layout > div > .header a.button:not(.disabled):focus,
html.dark-mode body:not(.task-login) #layout > div > .header a.button:not(.disabled):hover,
html.dark-mode body:not(.task-login) .menu.toolbar a.selected,
html.dark-mode body:not(.task-login) .menu.toolbar a.pressed {
    background: rgba(39, 137, 222, .18);
    color: #ffffff;
}

html.dark-mode body:not(.task-login) .form-control,
html.dark-mode body:not(.task-login) .custom-select,
html.dark-mode body:not(.task-login) .custom-file-label,
html.dark-mode body:not(.task-login) .recipient-input,
html.dark-mode body:not(.task-login) .searchbar input {
    border-color: rgba(176, 204, 224, .22);
    background-color: #0a1825;
    color: #eef6fb;
}

html.dark-mode body:not(.task-login) .searchbar input::placeholder {
    color: #94a8ba;
}

html.dark-mode body:not(.task-login) .form-control:focus,
html.dark-mode body:not(.task-login) .custom-select:focus,
html.dark-mode body:not(.task-login) .recipient-input.focus,
html.dark-mode body:not(.task-login) .searchbar input:focus {
    border-color: rgba(55, 168, 239, .72);
    background-color: #0d2031;
    box-shadow: 0 0 0 3px rgba(55, 168, 239, .16);
}

html.dark-mode body:not(.task-login) .attachmentslist,
html.dark-mode body:not(.task-login) .file-upload,
html.dark-mode body:not(.task-login) .table-widget,
html.dark-mode body:not(.task-login) .input-group-text,
html.dark-mode body:not(.task-login) .message-partheaders {
    border-color: rgba(176, 204, 224, .16);
    background: #102538;
    color: #dfeaf2;
}

html.dark-mode body:not(.task-login) .popupmenu,
html.dark-mode body:not(.task-login) .popover,
html.dark-mode body:not(.task-login) .ui-dialog {
    border-color: rgba(176, 204, 224, .16);
    background: #102538;
    color: #dfeaf2;
}

html.dark-mode body:not(.task-login) .popupmenu .listing li a,
html.dark-mode body:not(.task-login) .popover .listing li a {
    color: #dfeaf2;
}

html.dark-mode body:not(.task-login) .popupmenu .listing li a:not(.disabled):hover,
html.dark-mode body:not(.task-login) .popover .listing li a:not(.disabled):hover {
    background: #173654;
    color: #ffffff;
}

html.dark-mode body.action-compose #layout-content,
html.dark-mode body.action-compose #layout-sidebar.sidebar-right,
html.dark-mode body.action-compose #compose-content {
    background: #0d1d2d;
}

html.dark-mode body.action-compose #compose-headers,
html.dark-mode body.action-compose #composebodycontainer,
html.dark-mode body.action-compose #compose-options,
html.dark-mode body.action-compose #compose-attachments {
    border-color: rgba(176, 204, 224, .16);
    background: #102538;
}

@media screen and (max-width: 768px) {
    body:not(.task-login) #layout-menu {
        background: var(--hf-navy-950);
    }

    body:not(.task-login) #layout > div > .header,
    body:not(.task-login) #layout > div > .footer {
        background: #ffffff;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.task-login) #taskmenu a,
    body:not(.task-login) .form-control,
    body:not(.task-login) .custom-select,
    body:not(.task-login) .recipient-input,
    body:not(.task-login) .menu.toolbar a {
        transition: none;
    }
}