:root {
  --fp-cyan: #0293cc;
  --fp-cyan-bright: #23c4f5;
  --fp-violet: #6d35d1;
  --fp-purple: #8b4df0;
  --fp-ink: #05070e;
  --fp-panel: #0b1020;
  --fp-panel-soft: #11182b;
  --fp-line: rgba(255, 255, 255, 0.1);
  --fp-muted: rgba(255, 255, 255, 0.66);
  --fp-gradient: linear-gradient(135deg, var(--fp-cyan), var(--fp-violet));
}

body,
button,
input,
optgroup,
select,
textarea,
.popover {
  font-family: Inter, Roboto, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
#layout > div > .header,
.listing li,
.listing td,
.menu a .inner {
  font-family: "Space Grotesk", Inter, Roboto, Arial, sans-serif;
  letter-spacing: 0;
}

a,
.support-link {
  color: var(--fp-cyan);
}

a:hover,
.support-link:hover {
  color: var(--fp-cyan-bright);
}

.btn-primary,
.button.mainaction,
button.btn-primary,
input.button.mainaction,
a.button.mainaction {
  background: var(--fp-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 28px -18px rgba(2, 147, 204, 0.85);
}

.btn-primary:focus,
.btn-primary:hover,
.button.mainaction:focus,
.button.mainaction:hover,
button.btn-primary:focus,
button.btn-primary:hover,
input.button.mainaction:focus,
input.button.mainaction:hover,
a.button.mainaction:focus,
a.button.mainaction:hover {
  filter: saturate(1.08) brightness(1.04);
}

.form-control:focus,
.custom-select:focus,
input:focus,
textarea:focus {
  border-color: var(--fp-cyan) !important;
  box-shadow: 0 0 0 0.18rem rgba(2, 147, 204, 0.18) !important;
}

#layout-menu,
#layout-menu .popover-header {
  background: #060914 !important;
}

#layout-menu {
  border-right: 1px solid rgba(35, 196, 245, 0.18);
}

#layout-menu .popover-header img {
  max-width: 42px;
  max-height: 42px;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(2, 147, 204, 0.46));
}

#taskmenu a {
  color: rgba(255, 255, 255, 0.74);
}

#taskmenu a:hover,
#taskmenu a.selected {
  background: rgba(2, 147, 204, 0.14);
  color: #fff;
}

#taskmenu a.selected:before {
  color: var(--fp-cyan-bright);
}

#layout > div > .header {
  background: #f8fbff;
  border-color: #dbe7f3;
  color: #172135;
}

#layout-sidebar,
#layout-list,
#layout-content,
#layout > div > .footer {
  border-color: #dbe7f3;
}

.listing li.selected > a,
.listing tbody tr.selected > td,
.listing tbody tr.unfocused.selected > td {
  background-color: rgba(2, 147, 204, 0.12) !important;
  color: #101827;
}

.folderlist li.mailbox.unread > a,
.messagelist tr.unread > .subject span.subject {
  color: #111827;
}

.quota-widget .value,
.tagedit-list li.tagedit-listelement,
.popupmenu .listing li.selected,
.searchbar form:before {
  background: var(--fp-gradient);
}

body.task-login {
  min-width: 320px;
  background: var(--fp-ink);
}

body.task-login #layout {
  position: relative;
  min-height: 100%;
  background:
    linear-gradient(120deg, rgba(2, 147, 204, 0.16), transparent 30%),
    linear-gradient(300deg, rgba(109, 53, 209, 0.24), transparent 36%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 92px),
    #05070e;
  overflow: hidden;
}

body.task-login #layout:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(35, 196, 245, 0.08), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%);
  opacity: 0.76;
}

body.task-login #layout-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 32px 18px;
  background: transparent;
}

body.task-login #layout-content:after {
  content: "fpMail";
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  bottom: clamp(18px, 4vw, 48px);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(42px, 10vw, 132px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

body.task-login #logo {
  top: auto;
  display: block;
  width: min(420px, calc(100vw - 36px)) !important;
  max-width: calc(100vw - 36px) !important;
  height: auto !important;
  max-height: none;
  margin: 0 auto 26px;
  object-fit: contain;
  filter: drop-shadow(0 24px 42px rgba(2, 147, 204, 0.22));
}

#login-form {
  box-sizing: border-box;
  position: relative;
  top: auto;
  z-index: 1;
  width: min(420px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  padding: 30px;
  background: rgba(8, 12, 28, 0.86);
  border: 1px solid var(--fp-line);
  border-radius: 8px;
  box-shadow:
    0 24px 70px -36px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(35, 196, 245, 0.08) inset;
  backdrop-filter: blur(16px);
}

#login-form table,
#login-form tbody,
#login-form tr,
#login-form td {
  display: block !important;
  width: 100%;
}

#login-form td.title {
  width: 100% !important;
  padding: 0 0 6px;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

#login-form td.title:before,
#login-form td.title:after,
#login-form td.input:before,
#login-form td.input:after,
#login-form td.title label:before,
#login-form td.title label:after {
  display: none !important;
  content: none !important;
}

#login-form td.title label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  clip: auto !important;
  overflow: visible !important;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.3 !important;
  text-indent: 0 !important;
}

#login-form td.input {
  width: 100% !important;
  padding: 0 0 16px;
}

#login-form .input-group {
  display: block !important;
  width: 100% !important;
}

#login-form .input-group .icon {
  display: none !important;
}

#login-form .form-control {
  display: block;
  width: 100% !important;
  min-height: 46px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #fff;
}

#login-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

#rcmloginsubmit {
  width: 100%;
  min-height: 46px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0;
}

#login-footer {
  margin-top: 18px;
  color: var(--fp-muted);
  font-size: 0.83rem;
}

#login-footer a {
  color: #fff;
}

.noscriptwarning {
  color: #fff;
  background: #b42318;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header {
  background: #05070e !important;
}

html.dark-mode #layout > div > .header {
  background: #11182b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content {
  border-color: rgba(255, 255, 255, 0.1);
}

@media screen and (max-width: 600px) {
  body.task-login #layout-content {
    justify-content: flex-start;
    padding-top: 42px;
  }

  body.task-login #logo {
    width: min(260px, calc(100vw - 92px)) !important;
    max-width: min(260px, calc(100vw - 92px)) !important;
    margin-bottom: 18px;
  }

  #login-form {
    width: min(300px, calc(100vw - 72px));
    max-width: min(300px, calc(100vw - 72px));
    padding: 22px;
  }

  body.task-login #layout-content:after {
    display: none;
  }
}

/* Futureproofed Mail final microfixes, 2026-07-02. */
body.task-login #rcmloginsubmit:before,
html.dark-mode body.task-login #rcmloginsubmit:before {
  content: attr(data-label) !important;
}

body.task-mail.action-none #layout-list > .header:after,
body.task-mail.action-show #layout-list > .header:after,
html.dark-mode body.task-mail.action-none #layout-list > .header:after,
html.dark-mode body.task-mail.action-show #layout-list > .header:after {
  display: none !important;
  content: none !important;
}

body.task-mail.action-none #layout-list > .header .toolbar.menu,
body.task-mail.action-show #layout-list > .header .toolbar.menu,
html.dark-mode body.task-mail.action-none #layout-list > .header .toolbar.menu,
html.dark-mode body.task-mail.action-show #layout-list > .header .toolbar.menu {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
}

/* Full fpMail surface theme */
:root {
  --fp-bg: #05070e;
  --fp-bg-2: #08111e;
  --fp-surface: #ffffff;
  --fp-surface-soft: #f6f9fe;
  --fp-surface-ice: #edf7ff;
  --fp-text: #152033;
  --fp-text-soft: #657186;
  --fp-border: #dbe7f3;
  --fp-border-strong: #b8cfdf;
  --fp-shadow-soft: 0 14px 36px -28px rgba(5, 7, 14, 0.5);
  --fp-shadow-glow: 0 18px 44px -30px rgba(2, 147, 204, 0.75);
  --fp-focus: 0 0 0 3px rgba(2, 147, 204, 0.22);
  --fp-danger: #d92d20;
  --fp-warning: #f79009;
  --fp-success: #12b76a;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(2, 147, 204, 0.65) rgba(8, 17, 30, 0.2);
}

html:not(.touch) ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html:not(.touch) ::-webkit-scrollbar-track {
  background: rgba(8, 17, 30, 0.08);
}

html:not(.touch) ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fp-cyan), var(--fp-violet));
  border-radius: 8px;
}

body:not(.task-login) {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.08), transparent 28%),
    linear-gradient(315deg, rgba(109, 53, 209, 0.08), transparent 34%),
    var(--fp-surface-soft);
  color: var(--fp-text);
}

body:not(.task-login) #layout {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 254, 0.96)),
    repeating-linear-gradient(90deg, rgba(2, 147, 204, 0.04) 0 1px, transparent 1px 72px);
}

#layout > div > .header,
#layout > div > .footer {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--fp-border);
  color: var(--fp-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

#layout > div > .header {
  font-weight: 700;
}

#layout > div > .header .header-title {
  color: var(--fp-text);
}

#layout > div > .header a.button,
#layout > div > .footer a.button,
#layout > div > .header button,
#layout > div > .footer button {
  color: var(--fp-text);
}

#layout-sidebar,
#layout-list,
#layout-content {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--fp-border);
}

#layout-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.96)),
    linear-gradient(135deg, rgba(2, 147, 204, 0.07), transparent 38%);
}

#layout-list {
  background: rgba(255, 255, 255, 0.92);
}

#layout-content {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98)),
    repeating-linear-gradient(0deg, rgba(2, 147, 204, 0.018) 0 1px, transparent 1px 64px);
}

#layout-menu {
  background:
    linear-gradient(180deg, #05070e, #08111e 58%, #120d2d) !important;
  box-shadow: 12px 0 38px -34px rgba(2, 147, 204, 0.85);
}

#layout-menu .popover-header {
  border-bottom: 1px solid rgba(35, 196, 245, 0.16);
}

#layout-menu .popover-header img {
  width: 42px;
  height: 42px;
}

#taskmenu,
#taskmenu .action-buttons,
#taskmenu .special-buttons {
  background: transparent;
}

#taskmenu a {
  border-radius: 8px;
  margin: 4px 6px;
  color: rgba(255, 255, 255, 0.76);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#taskmenu a:before {
  color: rgba(35, 196, 245, 0.86);
}

#taskmenu a:hover,
#taskmenu a:focus,
#taskmenu a.selected {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.24), rgba(109, 53, 209, 0.24));
  color: #fff;
  transform: translateY(-1px);
}

#taskmenu a.selected {
  box-shadow: 0 0 0 1px rgba(35, 196, 245, 0.24) inset;
}

.toolbar,
.menu.toolbar {
  background: transparent;
}

.toolbar a.button,
.toolbar button,
a.button,
button.btn,
input.button {
  border-radius: 8px !important;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.toolbar a.button:not(.disabled):hover,
.toolbar button:not(.disabled):hover,
a.button:not(.disabled):hover,
button.btn:not(.disabled):hover {
  background: rgba(2, 147, 204, 0.12) !important;
  color: var(--fp-cyan) !important;
}

.toolbar a.button:focus,
.toolbar button:focus,
a.button:focus,
button.btn:focus {
  box-shadow: var(--fp-focus);
  outline: 0;
}

.floating-action-buttons a.button,
.compose.selected,
a.button.compose,
button.compose {
  background: var(--fp-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--fp-shadow-glow);
}

.searchbar {
  padding: 8px;
}

.searchbar form {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  box-shadow: var(--fp-shadow-soft);
}

.searchbar form:before {
  color: #fff;
  border-radius: 8px 0 0 8px;
}

.searchbar input,
.searchbar .form-control {
  background: transparent !important;
  border: 0 !important;
  color: var(--fp-text);
}

.searchbar a {
  color: var(--fp-text-soft);
}

.listbox .scroller,
.scroller {
  background: transparent;
}

.listing,
.records-table,
.table {
  color: var(--fp-text);
}

.listing li,
.listing tbody td,
.messagelist td,
.records-table td,
.table td,
.table th {
  border-color: rgba(219, 231, 243, 0.82);
}

.listing li > a,
.folderlist li > a,
.treelist li > a {
  border-radius: 8px;
  margin: 2px 6px;
}

.folderlist li a,
.treelist li a {
  color: var(--fp-text);
}

.folderlist li.mailbox > a:before,
.treelist li > a:before,
.listing.iconized li a:before,
.listing.iconized tr td:before {
  color: var(--fp-cyan);
}

.folderlist li.selected > a,
.folderlist li > a:hover,
.treelist li.selected > a,
.treelist li > a:hover,
.listing li.selected > a,
.listing li > a:hover {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.13), rgba(109, 53, 209, 0.1)) !important;
  color: var(--fp-text) !important;
}

.folderlist li.mailbox.unread > a,
.folderlist li.mailbox.unread > a:before {
  color: #061729;
  font-weight: 700;
}

.folderlist li.mailbox .unreadcount {
  background: var(--fp-gradient);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
}

.quota-widget {
  color: var(--fp-text-soft);
}

.quota-widget .bar {
  background: rgba(2, 147, 204, 0.08);
  border-color: rgba(2, 147, 204, 0.18);
}

.quota-widget .value {
  background: var(--fp-gradient);
  opacity: 1;
}

.messagelist {
  background: transparent;
}

.messagelist thead th,
.records-table thead th,
.table thead th {
  background: #f3f8ff;
  color: var(--fp-text-soft);
  border-color: var(--fp-border);
  font-weight: 700;
}

.messagelist tr,
.records-table tr,
.table tr {
  transition: background-color 0.16s ease;
}

.messagelist tr:hover td,
.records-table tr:hover td,
.table tr:hover td {
  background-color: rgba(2, 147, 204, 0.055);
}

.messagelist tr.selected td,
.messagelist tr.focused td,
.listing tbody tr.selected > td,
.listing tbody tr.unfocused.selected > td {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.16), rgba(109, 53, 209, 0.12)) !important;
  color: var(--fp-text) !important;
}

.messagelist tr.unread td,
.messagelist tr.unread td.subject,
.messagelist tr.unread span.subject {
  font-weight: 700;
  color: #0b1a2c;
}

.messagelist td.subject span.msgicon.status:before,
.messagelist span.attachment span:before,
.messagelist span.flagged:before {
  color: var(--fp-cyan);
}

.messagelist span.date,
.messagelist span.size,
.listing-info,
.folderlist li.virtual > a,
.folderlist li.mailbox.empty > a {
  color: var(--fp-text-soft);
}

#message-header,
.message-part,
.message-htmlpart,
.message-partheaders,
.headers-table,
.message-headers {
  color: var(--fp-text);
}

#message-header {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.08), rgba(109, 53, 209, 0.06)),
    #fff;
  border-bottom: 1px solid var(--fp-border);
}

#message-header .subject {
  font-family: "Space Grotesk", Inter, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

#messagebody,
.message-htmlpart,
.message-part {
  background: #fff;
}

.message-htmlpart blockquote,
.message-part blockquote {
  border-left: 3px solid var(--fp-cyan);
  color: var(--fp-text-soft);
}

.attachmentslist {
  background: #f7fbff;
  border-color: var(--fp-border);
  border-radius: 8px;
}

.attachmentslist li {
  color: var(--fp-text);
}

.attachmentslist li:before {
  color: var(--fp-cyan);
}

.formcontent,
.frame-content,
.iframe-wrapper,
.propform,
.formcontent .form-group {
  color: var(--fp-text);
}

.formcontent,
.frame-content {
  background:
    linear-gradient(180deg, #fff, #f8fbff);
}

.propform fieldset,
fieldset,
.formcontent .form-section,
.table-widget,
.contact-header,
.response-box {
  border-color: var(--fp-border) !important;
  border-radius: 8px;
}

.propform legend,
fieldset legend,
.formcontent legend {
  color: var(--fp-text);
  font-family: "Space Grotesk", Inter, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.propform td.title,
.formcontent .col-form-label,
.props-table td.title {
  color: var(--fp-text-soft);
  font-weight: 700;
}

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"] {
  border-color: var(--fp-border-strong);
  border-radius: 8px;
  color: var(--fp-text);
  background-color: #fff;
}

.input-group-text,
.input-group .icon {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.12), rgba(109, 53, 209, 0.08));
  border-color: var(--fp-border-strong);
  color: var(--fp-cyan);
}

.input-group .icon:before {
  color: var(--fp-cyan);
}

.composebody,
#composebody,
.tox .tox-edit-area,
.tox .tox-edit-area__iframe {
  background: #fff !important;
  color: var(--fp-text) !important;
}

#compose-attachments,
#attachment-list,
.compose-headers,
#compose-content,
#composebodycontainer {
  border-color: var(--fp-border) !important;
}

.tox-tinymce,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-menubar,
.tox .tox-statusbar {
  border-color: var(--fp-border) !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-menubar {
  background: #f7fbff !important;
}

.contactlist td.contact:before,
.contactlist td.contactgroup:before,
#contactpic,
.contactphoto {
  color: var(--fp-cyan);
  border-color: var(--fp-border);
}

#contactpic,
.contactphoto {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.12), rgba(109, 53, 209, 0.08)) !important;
  border-radius: 8px;
}

#contacthead .names span.namefield {
  color: var(--fp-text);
  font-family: "Space Grotesk", Inter, Roboto, Arial, sans-serif;
  letter-spacing: 0;
}

.settings-default-icon .section:before,
.listing.iconized tr.general > td.section:before,
.listing.iconized tr.mailbox > td.section:before,
.listing.iconized tr.mailview > td.section:before,
.listing.iconized tr.compose > td.section:before,
.listing.iconized tr.addressbook > td.section:before,
.listing.iconized tr.folders > td.section:before,
.listing.iconized tr.server > td.section:before,
.listing.iconized tr.encryption > td.section:before {
  color: var(--fp-cyan);
}

.nav-tabs {
  border-color: var(--fp-border);
}

.nav-tabs .nav-link {
  border-radius: 8px 8px 0 0;
  color: var(--fp-text-soft);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
  background: #fff;
  border-color: var(--fp-border);
  color: var(--fp-cyan);
}

.popupmenu,
.popover,
.ui-dialog,
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-titlebar {
  background: #fff;
  border-color: var(--fp-border);
  color: var(--fp-text);
}

.popupmenu,
.popover,
.ui-dialog {
  border-radius: 8px;
  box-shadow: 0 24px 64px -38px rgba(5, 7, 14, 0.62);
}

.ui-dialog .ui-dialog-titlebar {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.12), rgba(109, 53, 209, 0.1)),
    #fff;
  font-family: "Space Grotesk", Inter, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.popupmenu .listing li > a,
.popover .menu li a,
.menu a {
  border-radius: 8px;
}

.popupmenu .listing li > a:not(.disabled):hover,
.popover .menu li a:hover,
.menu a:not(.disabled):hover {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.14), rgba(109, 53, 209, 0.1)) !important;
  color: var(--fp-text) !important;
}

.popupmenu .listing li.selected,
.popupmenu .listing tr.selected,
.menu a.selected {
  background: var(--fp-gradient) !important;
  color: #fff !important;
}

.ui.alert {
  border-radius: 8px;
  border: 1px solid var(--fp-border);
  box-shadow: var(--fp-shadow-soft);
}

.ui.alert.alert-success,
.ui.alert.boxinformation {
  background: rgba(18, 183, 106, 0.08);
  border-color: rgba(18, 183, 106, 0.22);
}

.ui.alert.alert-warning,
.ui.alert.boxwarning {
  background: rgba(247, 144, 9, 0.08);
  border-color: rgba(247, 144, 9, 0.24);
}

.ui.alert.alert-danger,
.ui.alert.boxerror {
  background: rgba(217, 45, 32, 0.08);
  border-color: rgba(217, 45, 32, 0.24);
}

.ui.alert.alert-success > i.icon:before {
  color: var(--fp-success);
}

.ui.alert.alert-warning > i.icon:before {
  color: var(--fp-warning);
}

.ui.alert.alert-danger > i.icon:before {
  color: var(--fp-danger);
}

.tagedit-list li.tagedit-listelement {
  background: var(--fp-gradient);
  border-radius: 8px;
  color: #fff;
}

.table-widget {
  border-radius: 8px;
  box-shadow: var(--fp-shadow-soft);
}

.table-widget > .footer {
  background: #f7fbff;
  border-color: var(--fp-border);
}

.pagenav,
.pagenav-text {
  color: var(--fp-text-soft);
}

.pagenav a.button {
  color: var(--fp-cyan);
}

.selection,
.checkbox-cell,
.flag,
.attachment,
.threads {
  color: var(--fp-cyan);
}

.invalid-feedback,
.error,
.listing li.deleted,
.messagelist tr.deleted td {
  color: var(--fp-danger) !important;
}

html.dark-mode body:not(.task-login),
html.dark-mode body:not(.task-login) #layout {
  background:
    linear-gradient(135deg, rgba(2, 147, 204, 0.16), transparent 34%),
    linear-gradient(315deg, rgba(109, 53, 209, 0.14), transparent 38%),
    #05070e;
  color: #e7eef9;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog,
html.dark-mode .ui-dialog .ui-dialog-content,
html.dark-mode .formcontent,
html.dark-mode .frame-content {
  background: rgba(8, 17, 30, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e7eef9 !important;
}

html.dark-mode #layout-list {
  background: rgba(10, 17, 35, 0.96) !important;
}

html.dark-mode #layout-content {
  background:
    linear-gradient(180deg, rgba(8, 17, 30, 0.96), rgba(5, 7, 14, 0.96)),
    repeating-linear-gradient(0deg, rgba(35, 196, 245, 0.035) 0 1px, transparent 1px 72px) !important;
}

html.dark-mode #layout > div > .header .header-title,
html.dark-mode .listing,
html.dark-mode .listing li > a,
html.dark-mode .folderlist li > a,
html.dark-mode .treelist li > a,
html.dark-mode .messagelist td,
html.dark-mode .records-table td,
html.dark-mode .table td,
html.dark-mode .propform legend,
html.dark-mode fieldset legend,
html.dark-mode .formcontent legend {
  color: #e7eef9 !important;
}

html.dark-mode .listing-info,
html.dark-mode .messagelist span.date,
html.dark-mode .messagelist span.size,
html.dark-mode .propform td.title,
html.dark-mode .formcontent .col-form-label,
html.dark-mode .props-table td.title {
  color: rgba(231, 238, 249, 0.66) !important;
}

html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="search"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

html.dark-mode .messagelist thead th,
html.dark-mode .records-table thead th,
html.dark-mode .table thead th,
html.dark-mode .table-widget > .footer,
html.dark-mode .searchbar form,
html.dark-mode #message-header {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(231, 238, 249, 0.74) !important;
}

@media screen and (max-width: 768px) {
  #layout-menu {
    box-shadow: none;
  }

  #layout > div > .header,
  #layout > div > .footer {
    background:
      linear-gradient(135deg, rgba(2, 147, 204, 0.08), rgba(109, 53, 209, 0.08)),
      #fff;
  }

  .toolbar a.button,
  .toolbar button {
    border-radius: 8px !important;
  }

  .searchbar {
    padding: 6px;
  }

  .listing li > a,
  .folderlist li > a,
  .treelist li > a {
    margin-left: 4px;
    margin-right: 4px;
  }
}

/* fpMail Neo: Gmail-inspired, Future Proofed-native */
:root {
  --neo-bg: #f4f7fb;
  --neo-rail: #ffffff;
  --neo-sidebar: #f8fbff;
  --neo-card: #ffffff;
  --neo-card-soft: #eef6ff;
  --neo-text: #172033;
  --neo-muted: #6b7485;
  --neo-line: #dce7f2;
  --neo-line-soft: rgba(220, 231, 242, 0.7);
  --neo-hover: rgba(2, 147, 204, 0.08);
  --neo-selected: #dff3ff;
  --neo-selected-2: #efe8ff;
  --neo-green: #12b76a;
  --neo-shadow: 0 14px 34px -28px rgba(19, 32, 51, 0.42);
}

body:not(.task-login),
body:not(.task-login) #layout {
  background:
    radial-gradient(900px 420px at 18% -20%, rgba(2, 147, 204, 0.13), transparent 58%),
    radial-gradient(780px 380px at 100% 0%, rgba(109, 53, 209, 0.11), transparent 56%),
    var(--neo-bg);
  color: var(--neo-text);
}

body:not(.task-login) #layout {
  gap: 0;
}

#layout-menu {
  width: 88px;
  background: var(--neo-rail) !important;
  border-right: 1px solid var(--neo-line);
  box-shadow: 10px 0 32px -32px rgba(19, 32, 51, 0.44);
}

#layout-menu .popover-header {
  height: 58px;
  background: var(--neo-rail) !important;
  border-bottom: 1px solid transparent;
}

#layout-menu .popover-header img {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 8px 16px rgba(2, 147, 204, 0.16));
}

#taskmenu {
  padding: 0 6px 8px;
}

#taskmenu a {
  width: auto;
  min-width: 0;
  max-width: none;
  height: 58px;
  margin: 3px 0;
  padding: 8px 5px;
  border-radius: 8px;
  color: var(--neo-text);
  font-size: 0.82rem;
  font-weight: 700;
}

#taskmenu a:before {
  width: 100%;
  height: 24px;
  margin: 0 0 2px !important;
  float: none;
  color: var(--fp-cyan);
  font-size: 1.45rem;
  line-height: 24px;
}

#taskmenu a .inner {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  line-height: 1.1;
}

#taskmenu a:hover,
#taskmenu a:focus {
  background: var(--neo-hover) !important;
  color: var(--neo-text) !important;
  transform: none;
}

#taskmenu a.selected,
#taskmenu a.mail.selected,
#taskmenu a.contacts.selected,
#taskmenu a.settings.selected {
  background: linear-gradient(135deg, var(--neo-selected), var(--neo-selected-2)) !important;
  color: #12203a !important;
  box-shadow: inset 0 0 0 1px rgba(2, 147, 204, 0.12);
}

#taskmenu a.compose,
#taskmenu a.compose.selected {
  height: 58px;
  margin: 8px 0 12px;
  background: var(--fp-gradient) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px -22px rgba(2, 147, 204, 0.9);
}

#taskmenu a.compose:before {
  color: #fff;
}

#taskmenu .special-buttons a {
  color: var(--neo-muted);
}

#taskmenu .special-buttons a.logout {
  color: #c8332b;
}

#layout-sidebar {
  min-width: 250px;
  background: var(--neo-sidebar) !important;
  border-right: 1px solid var(--neo-line);
}

#layout-sidebar > .header {
  background: var(--neo-sidebar) !important;
  border-bottom-color: transparent;
  color: var(--neo-text);
}

#layout-sidebar > .header .username,
#layout-sidebar > .header .header-title {
  text-align: left;
  margin: 0;
  padding-left: 16px;
  font-weight: 700;
}

#layout-sidebar .scroller {
  padding: 6px 8px 12px;
}

.folderlist li > a,
.treelist li > a {
  min-height: 40px;
  margin: 2px 0;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--neo-text);
  line-height: 40px;
}

.folderlist li.mailbox > a:before,
.treelist li > a:before {
  color: var(--fp-cyan);
  line-height: 40px;
}

.folderlist li.selected > a,
.folderlist li > a:hover,
.treelist li.selected > a,
.treelist li > a:hover {
  background: var(--neo-selected) !important;
  color: var(--neo-text) !important;
}

.folderlist li.mailbox.unread > a {
  background: rgba(255, 255, 255, 0.72);
  color: #0f172a;
}

.folderlist li.mailbox .unreadcount {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--fp-gradient);
  color: #fff;
  line-height: 22px;
}

.quota-widget {
  margin: 8px 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--neo-shadow);
}

#layout-list {
  min-width: 380px;
  background: #fff !important;
  border-right: 1px solid var(--neo-line);
}

#layout-list > .header,
#layout-list > .footer {
  background: #fff !important;
  border-color: var(--neo-line-soft);
  box-shadow: none;
}

#layout-list > .header {
  padding: 0 8px;
}

#layout-list .scroller {
  background: #fff;
}

.searchbar {
  padding: 8px 10px;
}

.searchbar form {
  min-height: 44px;
  background: #eef4fb;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

.searchbar form:focus-within {
  background: #fff;
  border-color: rgba(2, 147, 204, 0.26);
  box-shadow: 0 10px 30px -24px rgba(19, 32, 51, 0.52), var(--fp-focus);
}

.searchbar form:before {
  width: 44px;
  background: var(--fp-gradient);
  border-radius: 8px 0 0 8px;
  color: #fff;
  line-height: 44px;
}

.searchbar input,
.searchbar .form-control {
  height: 44px;
  color: var(--neo-text);
  font-size: 1rem;
}

#mailsearchform .button,
.searchbar a {
  color: var(--neo-muted);
}

.messagelist {
  border-collapse: separate;
  border-spacing: 0 4px;
  padding: 0 8px;
  background: #fff;
}

.messagelist thead th {
  background: #fff;
  border-color: transparent;
  color: var(--neo-muted);
}

.messagelist tbody tr {
  background: var(--neo-card);
  box-shadow: inset 0 -1px 0 var(--neo-line-soft);
}

.messagelist tbody tr td {
  height: 48px;
  border: 0;
  background: transparent;
}

.messagelist tbody tr:hover td {
  background: #f7fbff;
}

.messagelist tbody tr.selected td,
.messagelist tbody tr.focused td {
  background: linear-gradient(135deg, rgba(2, 147, 204, 0.12), rgba(109, 53, 209, 0.1)) !important;
}

.messagelist tbody tr td:first-child {
  border-radius: 8px 0 0 8px;
}

.messagelist tbody tr td:last-child {
  border-radius: 0 8px 8px 0;
}

.messagelist td.subject,
.messagelist td.fromto,
.messagelist td.date {
  color: var(--neo-text);
}

.messagelist tr.unread td.subject span.subject,
.messagelist tr.unread td.fromto,
.messagelist tr.unread td.date {
  font-weight: 800;
}

.messagelist td.subject span.subject {
  font-size: 0.98rem;
}

.messagelist span.date,
.messagelist span.size {
  color: var(--neo-muted);
}

#layout-list > .footer,
#layout-content > .footer {
  min-height: 44px;
  height: 44px;
  line-height: 44px;
}

#layout-content {
  background:
    radial-gradient(900px 460px at 92% 8%, rgba(109, 53, 209, 0.08), transparent 58%),
    #fff !important;
}

#layout-content > .header {
  background: #fff !important;
  border-bottom: 1px solid var(--neo-line);
}

#layout-content > .header .toolbar {
  width: 100%;
}

#layout-content > .header a.button,
#layout-content > .header button.btn {
  color: var(--neo-muted);
}

#layout-content > .header a.button:before,
#layout-content > .header button.btn:before {
  color: var(--fp-cyan);
}

#layout-content > .header a.button:not(.disabled):hover,
#layout-content > .header button.btn:not(.disabled):hover {
  background: var(--neo-hover) !important;
  color: var(--neo-text) !important;
}

#message-header {
  background: #fff !important;
  border-bottom: 1px solid var(--neo-line);
}

#message-header .subject {
  color: var(--neo-text);
}

.iframe-wrapper,
.iframe-wrapper iframe,
#messagebody,
.message-htmlpart,
.message-part {
  background: #fff !important;
}

iframe[src*="watermark"] {
  background: transparent;
}

.popupmenu,
.popover,
.ui-dialog {
  border: 1px solid var(--neo-line);
  border-radius: 8px;
  box-shadow: 0 24px 64px -36px rgba(19, 32, 51, 0.58);
}

.popupmenu .listing li > a,
.popover .menu li a {
  min-height: 36px;
  line-height: 36px;
}

.formcontent,
.frame-content,
.task-mail.action-compose #layout-content,
.task-settings #layout-content,
.task-addressbook #layout-content {
  background: #fff !important;
  color: var(--neo-text);
}

.task-mail.action-compose #layout-content > .header {
  box-shadow: 0 1px 0 var(--neo-line);
}

.task-mail.action-compose .formcontent {
  padding: 18px 24px;
}

.task-mail.action-compose .formcontent table,
.task-mail.action-compose .formcontent .form-group {
  border-spacing: 0 10px;
}

.task-mail.action-compose .form-control,
.task-mail.action-compose .custom-select,
.task-mail.action-compose select,
.task-mail.action-compose textarea,
.task-mail.action-compose input {
  min-height: 38px;
  background: #f6f9fd;
  border: 1px solid var(--neo-line);
  border-radius: 8px;
}

.task-mail.action-compose .form-control:focus,
.task-mail.action-compose textarea:focus,
.task-mail.action-compose input:focus {
  background: #fff;
}

.task-mail.action-compose #composebodycontainer,
.tox-tinymce {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 18px 38px -34px rgba(19, 32, 51, 0.7);
}

.task-mail.action-compose .tox .tox-toolbar,
.task-mail.action-compose .tox .tox-toolbar__primary,
.task-mail.action-compose .tox .tox-menubar {
  background: #f7fbff !important;
}

.task-mail.action-compose #layout-sidebar,
.task-mail.action-compose #compose-attachments {
  background: #f8fbff !important;
}

.task-mail.action-compose #compose-attachments {
  border-left: 1px solid var(--neo-line);
}

.task-mail.action-compose .floating-action-buttons a.button,
.task-mail.action-compose a.button.send,
.task-mail.action-compose button.send {
  min-width: 80px;
  border-radius: 8px !important;
  background: var(--fp-gradient) !important;
  color: #fff !important;
}

.attachmentslist,
.table-widget,
.contact-header,
#contactpic,
.contactphoto {
  border-radius: 8px;
}

.records-table tbody tr:hover td,
.contactlist tbody tr:hover td,
.table tbody tr:hover td {
  background: #f7fbff;
}

.records-table tbody tr.selected td,
.contactlist tbody tr.selected td,
.table tbody tr.selected td {
  background: var(--neo-selected) !important;
}

.nav-tabs .nav-link {
  border-radius: 8px 8px 0 0;
}

.nav-tabs .nav-link.active {
  color: var(--fp-cyan);
}

.floating-action-buttons a.button {
  border-radius: 8px !important;
  background: var(--fp-gradient) !important;
  box-shadow: 0 18px 34px -26px rgba(2, 147, 204, 0.95);
}

html.dark-mode body:not(.task-login),
html.dark-mode body:not(.task-login) #layout {
  background:
    radial-gradient(900px 420px at 20% -20%, rgba(2, 147, 204, 0.18), transparent 58%),
    radial-gradient(780px 380px at 100% 0%, rgba(109, 53, 209, 0.16), transparent 56%),
    #05070e;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background: #07101d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode #taskmenu a {
  color: rgba(231, 238, 249, 0.78);
}

html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a:hover {
  background: rgba(2, 147, 204, 0.18) !important;
  color: #fff !important;
}

html.dark-mode .messagelist,
html.dark-mode .messagelist thead th,
html.dark-mode .messagelist tbody tr,
html.dark-mode .messagelist tbody tr td,
html.dark-mode .searchbar form,
html.dark-mode .formcontent,
html.dark-mode .frame-content,
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog {
  background: #07101d !important;
  color: #e7eef9 !important;
}

html.dark-mode .messagelist tbody tr:hover td,
html.dark-mode .records-table tbody tr:hover td,
html.dark-mode .contactlist tbody tr:hover td,
html.dark-mode .table tbody tr:hover td {
  background: rgba(2, 147, 204, 0.12) !important;
}

html.dark-mode .messagelist tbody tr.selected td,
html.dark-mode .messagelist tbody tr.focused td,
html.dark-mode .records-table tbody tr.selected td,
html.dark-mode .contactlist tbody tr.selected td,
html.dark-mode .table tbody tr.selected td {
  background: rgba(109, 53, 209, 0.24) !important;
}

html.dark-mode .searchbar form {
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark-mode .searchbar input,
html.dark-mode .searchbar .form-control,
html.dark-mode .task-mail.action-compose .form-control,
html.dark-mode .task-mail.action-compose .custom-select,
html.dark-mode .task-mail.action-compose select,
html.dark-mode .task-mail.action-compose textarea,
html.dark-mode .task-mail.action-compose input {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14);
}

@media screen and (max-width: 768px) {
  #layout-menu {
    width: auto;
  }

  #taskmenu a {
    margin: 2px 4px;
  }

  #layout-list {
    min-width: 0;
    background: #fff !important;
  }

  .messagelist {
    padding: 0;
    border-spacing: 0;
  }

  .messagelist tbody tr td {
    height: auto;
  }

  .floating-action-buttons a.button {
    width: 56px;
    height: 56px;
    border-radius: 8px !important;
  }
}

/* fpMail Flow: final Gmail-clean workspace balance */
body:not(.task-login),
html.dark-mode body:not(.task-login),
body:not(.task-login) #layout,
html.dark-mode body:not(.task-login) #layout {
  background:
    radial-gradient(840px 360px at 14% -18%, rgba(2, 147, 204, 0.12), transparent 58%),
    radial-gradient(760px 340px at 100% -10%, rgba(109, 53, 209, 0.1), transparent 58%),
    #f4f7fb !important;
  color: var(--neo-text) !important;
}

#layout-menu,
html.dark-mode #layout-menu {
  background: #fff !important;
  border-right: 1px solid var(--neo-line) !important;
  box-shadow: 12px 0 34px -34px rgba(19, 32, 51, 0.46) !important;
}

#layout-menu .popover-header,
html.dark-mode #layout-menu .popover-header {
  background: #fff !important;
  border-bottom-color: transparent !important;
}

#taskmenu a,
html.dark-mode #taskmenu a {
  color: var(--neo-text) !important;
}

#taskmenu a:before,
html.dark-mode #taskmenu a:before {
  color: var(--fp-cyan) !important;
}

#taskmenu a.compose,
#taskmenu a.compose.selected,
html.dark-mode #taskmenu a.compose,
html.dark-mode #taskmenu a.compose.selected,
.floating-action-buttons a.button,
html.dark-mode .floating-action-buttons a.button {
  background: var(--fp-gradient) !important;
  color: #fff !important;
}

#taskmenu a.compose:before,
html.dark-mode #taskmenu a.compose:before {
  color: #fff !important;
}

#taskmenu a:hover,
#taskmenu a:focus,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus {
  background: var(--neo-hover) !important;
  color: var(--neo-text) !important;
}

#taskmenu a.selected,
#taskmenu a.mail.selected,
#taskmenu a.contacts.selected,
#taskmenu a.settings.selected,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.mail.selected,
html.dark-mode #taskmenu a.contacts.selected,
html.dark-mode #taskmenu a.settings.selected {
  background: linear-gradient(135deg, var(--neo-selected), var(--neo-selected-2)) !important;
  color: #12203a !important;
}

#taskmenu .special-buttons a,
html.dark-mode #taskmenu .special-buttons a {
  color: var(--neo-muted) !important;
}

#taskmenu .special-buttons a.logout,
html.dark-mode #taskmenu .special-buttons a.logout {
  color: #c8332b !important;
}

#layout-sidebar,
html.dark-mode #layout-sidebar {
  background: #f8fbff !important;
  border-right: 1px solid var(--neo-line) !important;
  color: var(--neo-text) !important;
}

#layout-sidebar > .header,
html.dark-mode #layout-sidebar > .header,
#layout-sidebar > .footer,
html.dark-mode #layout-sidebar > .footer {
  background: #f8fbff !important;
  border-color: transparent !important;
  color: var(--neo-text) !important;
}

#layout-sidebar .scroller,
html.dark-mode #layout-sidebar .scroller {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 251, 255, 0.9)),
    #f8fbff !important;
}

.folderlist li > a,
.treelist li > a,
html.dark-mode .folderlist li > a,
html.dark-mode .treelist li > a {
  color: var(--neo-text) !important;
}

.folderlist li.mailbox > a:before,
.treelist li > a:before,
html.dark-mode .folderlist li.mailbox > a:before,
html.dark-mode .treelist li > a:before {
  color: var(--fp-cyan) !important;
}

.folderlist li.selected > a,
.folderlist li > a:hover,
.treelist li.selected > a,
.treelist li > a:hover,
html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li > a:hover,
html.dark-mode .treelist li.selected > a,
html.dark-mode .treelist li > a:hover {
  background: linear-gradient(135deg, var(--neo-selected), rgba(239, 232, 255, 0.72)) !important;
  color: var(--neo-text) !important;
}

.quota-widget,
html.dark-mode .quota-widget {
  background: #fff !important;
  color: var(--neo-text) !important;
  border: 1px solid var(--neo-line-soft) !important;
}

#layout-list,
html.dark-mode #layout-list {
  background: #fff !important;
  border-right: 1px solid var(--neo-line) !important;
  color: var(--neo-text) !important;
}

#layout-list > .header,
#layout-list > .footer,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-list > .footer {
  background: #fff !important;
  border-color: var(--neo-line-soft) !important;
  color: var(--neo-text) !important;
}

#layout-list .scroller,
html.dark-mode #layout-list .scroller {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.98)),
    #fff !important;
}

.searchbar form,
html.dark-mode .searchbar form {
  background: #eef4fb !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.searchbar form:focus-within,
html.dark-mode .searchbar form:focus-within {
  background: #fff !important;
  border-color: rgba(2, 147, 204, 0.26) !important;
  box-shadow: 0 10px 30px -24px rgba(19, 32, 51, 0.52), var(--fp-focus) !important;
}

.searchbar input,
.searchbar .form-control,
html.dark-mode .searchbar input,
html.dark-mode .searchbar .form-control {
  color: var(--neo-text) !important;
}

.messagelist,
html.dark-mode .messagelist {
  width: calc(100% - 16px) !important;
  margin: 8px !important;
  padding: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  background: transparent !important;
  color: var(--neo-text) !important;
}

.messagelist thead th,
html.dark-mode .messagelist thead th {
  height: 32px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--neo-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.messagelist tbody tr,
html.dark-mode .messagelist tbody tr {
  background: transparent !important;
  box-shadow: none !important;
}

.messagelist tbody tr td,
html.dark-mode .messagelist tbody tr td {
  height: 48px !important;
  background: #fff !important;
  border-top: 1px solid var(--neo-line-soft) !important;
  border-bottom: 1px solid var(--neo-line-soft) !important;
  color: var(--neo-text) !important;
  box-shadow: none !important;
}

.messagelist tbody tr td:first-child,
html.dark-mode .messagelist tbody tr td:first-child {
  border-left: 1px solid var(--neo-line-soft) !important;
  border-radius: 8px 0 0 8px !important;
}

.messagelist tbody tr td:last-child,
html.dark-mode .messagelist tbody tr td:last-child {
  border-right: 1px solid var(--neo-line-soft) !important;
  border-radius: 0 8px 8px 0 !important;
}

.messagelist tbody tr:hover td,
html.dark-mode .messagelist tbody tr:hover td {
  background: #f7fbff !important;
  border-color: rgba(2, 147, 204, 0.24) !important;
}

.messagelist tbody tr.selected td,
.messagelist tbody tr.focused td,
html.dark-mode .messagelist tbody tr.selected td,
html.dark-mode .messagelist tbody tr.focused td {
  background: linear-gradient(135deg, #e8f7ff, #f3efff) !important;
  border-color: rgba(2, 147, 204, 0.28) !important;
}

.messagelist tbody tr.unread td,
html.dark-mode .messagelist tbody tr.unread td {
  font-weight: 800 !important;
}

#layout-content,
html.dark-mode #layout-content,
#layout-content .scroller,
html.dark-mode #layout-content .scroller,
#layout-content > .content,
html.dark-mode #layout-content > .content,
.iframe-wrapper,
html.dark-mode .iframe-wrapper,
.iframe-wrapper iframe,
html.dark-mode .iframe-wrapper iframe {
  background:
    linear-gradient(180deg, #fff, #f8fbff),
    #f8fbff !important;
  color: var(--neo-text) !important;
}

#layout-content > .header,
#layout-content > .footer,
html.dark-mode #layout-content > .header,
html.dark-mode #layout-content > .footer,
#message-header,
html.dark-mode #message-header {
  background: #fff !important;
  border-color: var(--neo-line-soft) !important;
  color: var(--neo-text) !important;
}

#layout-content > .header a.button,
#layout-content > .header button.btn,
html.dark-mode #layout-content > .header a.button,
html.dark-mode #layout-content > .header button.btn {
  color: var(--neo-muted) !important;
}

#layout-content > .header a.button:not(.disabled):hover,
#layout-content > .header button.btn:not(.disabled):hover,
html.dark-mode #layout-content > .header a.button:not(.disabled):hover,
html.dark-mode #layout-content > .header button.btn:not(.disabled):hover {
  background: var(--neo-hover) !important;
  color: var(--neo-text) !important;
}

.formcontent,
.frame-content,
.task-mail.action-compose #layout-content,
.task-settings #layout-content,
.task-addressbook #layout-content,
html.dark-mode .formcontent,
html.dark-mode .frame-content,
html.dark-mode .task-mail.action-compose #layout-content,
html.dark-mode .task-settings #layout-content,
html.dark-mode .task-addressbook #layout-content {
  background: #fff !important;
  color: var(--neo-text) !important;
}

.task-mail.action-compose #layout-sidebar,
.task-mail.action-compose #compose-attachments,
html.dark-mode .task-mail.action-compose #layout-sidebar,
html.dark-mode .task-mail.action-compose #compose-attachments {
  background: #f8fbff !important;
  color: var(--neo-text) !important;
}

.task-mail.action-compose .form-control,
.task-mail.action-compose .custom-select,
.task-mail.action-compose select,
.task-mail.action-compose textarea,
.task-mail.action-compose input,
html.dark-mode .task-mail.action-compose .form-control,
html.dark-mode .task-mail.action-compose .custom-select,
html.dark-mode .task-mail.action-compose select,
html.dark-mode .task-mail.action-compose textarea,
html.dark-mode .task-mail.action-compose input {
  background: #f6f9fd !important;
  border-color: var(--neo-line) !important;
  color: var(--neo-text) !important;
}

.task-mail.action-compose .form-control:focus,
.task-mail.action-compose textarea:focus,
.task-mail.action-compose input:focus,
html.dark-mode .task-mail.action-compose .form-control:focus,
html.dark-mode .task-mail.action-compose textarea:focus,
html.dark-mode .task-mail.action-compose input:focus {
  background: #fff !important;
  border-color: rgba(2, 147, 204, 0.34) !important;
}

.popupmenu,
.popover,
.ui-dialog,
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog {
  background: #fff !important;
  border-color: var(--neo-line) !important;
  color: var(--neo-text) !important;
}

.popupmenu .listing li > a,
.popover .menu li a,
html.dark-mode .popupmenu .listing li > a,
html.dark-mode .popover .menu li a {
  color: var(--neo-text) !important;
}

@media screen and (max-width: 768px) {
  #layout-menu,
  html.dark-mode #layout-menu {
    box-shadow: 0 -10px 34px -34px rgba(19, 32, 51, 0.46) !important;
  }

  .messagelist,
  html.dark-mode .messagelist {
    width: calc(100% - 12px) !important;
    margin: 6px !important;
    border-spacing: 0 5px !important;
  }

  .messagelist tbody tr td,
  html.dark-mode .messagelist tbody tr td {
    height: auto !important;
    min-height: 46px !important;
  }
}

body:not(.task-login) #layout > div > .header,
html.dark-mode body:not(.task-login) #layout > div > .header,
body:not(.task-login) #layout > div > .footer,
html.dark-mode body:not(.task-login) #layout > div > .footer {
  background: #fff !important;
  border-color: var(--neo-line-soft) !important;
  color: var(--neo-text) !important;
  box-shadow: none !important;
}

body:not(.task-login) #layout-sidebar > .header,
html.dark-mode body:not(.task-login) #layout-sidebar > .header,
body:not(.task-login) #layout-sidebar > .footer,
html.dark-mode body:not(.task-login) #layout-sidebar > .footer {
  background: #f8fbff !important;
}

body:not(.task-login) #layout > div > .header a,
body:not(.task-login) #layout > div > .header button,
body:not(.task-login) #layout > div > .header .button,
body:not(.task-login) #layout > div > .footer a,
body:not(.task-login) #layout > div > .footer button,
body:not(.task-login) #layout > div > .footer .button,
html.dark-mode body:not(.task-login) #layout > div > .header a,
html.dark-mode body:not(.task-login) #layout > div > .header button,
html.dark-mode body:not(.task-login) #layout > div > .header .button,
html.dark-mode body:not(.task-login) #layout > div > .footer a,
html.dark-mode body:not(.task-login) #layout > div > .footer button,
html.dark-mode body:not(.task-login) #layout > div > .footer .button {
  color: var(--neo-text) !important;
}

body:not(.task-login) #layout > div > .header a:before,
body:not(.task-login) #layout > div > .header button:before,
body:not(.task-login) #layout > div > .header .button:before,
body:not(.task-login) #layout > div > .footer a:before,
body:not(.task-login) #layout > div > .footer button:before,
body:not(.task-login) #layout > div > .footer .button:before,
html.dark-mode body:not(.task-login) #layout > div > .header a:before,
html.dark-mode body:not(.task-login) #layout > div > .header button:before,
html.dark-mode body:not(.task-login) #layout > div > .header .button:before,
html.dark-mode body:not(.task-login) #layout > div > .footer a:before,
html.dark-mode body:not(.task-login) #layout > div > .footer button:before,
html.dark-mode body:not(.task-login) #layout > div > .footer .button:before {
  color: var(--fp-cyan) !important;
}

body:not(.task-login) #layout > div > .header a.disabled,
body:not(.task-login) #layout > div > .header button.disabled,
body:not(.task-login) #layout > div > .header .button.disabled,
html.dark-mode body:not(.task-login) #layout > div > .header a.disabled,
html.dark-mode body:not(.task-login) #layout > div > .header button.disabled,
html.dark-mode body:not(.task-login) #layout > div > .header .button.disabled {
  color: rgba(23, 32, 51, 0.42) !important;
  opacity: 1 !important;
}

body:not(.task-login) #layout > div > .header a.disabled:before,
body:not(.task-login) #layout > div > .header button.disabled:before,
body:not(.task-login) #layout > div > .header .button.disabled:before,
html.dark-mode body:not(.task-login) #layout > div > .header a.disabled:before,
html.dark-mode body:not(.task-login) #layout > div > .header button.disabled:before,
html.dark-mode body:not(.task-login) #layout > div > .header .button.disabled:before {
  color: rgba(2, 147, 204, 0.42) !important;
}

body:not(.task-login) #layout > div > .header a:hover,
body:not(.task-login) #layout > div > .header button:hover,
body:not(.task-login) #layout > div > .footer a:hover,
body:not(.task-login) #layout > div > .footer button:hover,
html.dark-mode body:not(.task-login) #layout > div > .header a:hover,
html.dark-mode body:not(.task-login) #layout > div > .header button:hover,
html.dark-mode body:not(.task-login) #layout > div > .footer a:hover,
html.dark-mode body:not(.task-login) #layout > div > .footer button:hover {
  background: var(--neo-hover) !important;
  color: var(--neo-text) !important;
}

body:not(.task-login) #layout > div > .footer,
html.dark-mode body:not(.task-login) #layout > div > .footer {
  min-height: 34px;
}

body:not(.task-login) #layout > div > .footer span,
body:not(.task-login) #layout > div > .footer div,
html.dark-mode body:not(.task-login) #layout > div > .footer span,
html.dark-mode body:not(.task-login) #layout > div > .footer div {
  color: var(--neo-text) !important;
}

#taskmenu .special-buttons a,
html.dark-mode #taskmenu .special-buttons a {
  background: #f6f9fd !important;
  border: 1px solid var(--neo-line-soft) !important;
  color: var(--neo-muted) !important;
}

#taskmenu .special-buttons a:hover,
html.dark-mode #taskmenu .special-buttons a:hover {
  background: var(--neo-hover) !important;
  color: var(--neo-text) !important;
}

#taskmenu .special-buttons a.logout,
html.dark-mode #taskmenu .special-buttons a.logout {
  color: #c8332b !important;
}

.folderlist li,
.treelist li,
html.dark-mode .folderlist li,
html.dark-mode .treelist li {
  border-color: transparent !important;
}

.folderlist li > a,
.treelist li > a,
html.dark-mode .folderlist li > a,
html.dark-mode .treelist li > a {
  border: 0 !important;
  box-shadow: inset 0 -1px 0 var(--neo-line-soft);
}

.folderlist li:last-child > a,
.treelist li:last-child > a,
html.dark-mode .folderlist li:last-child > a,
html.dark-mode .treelist li:last-child > a {
  box-shadow: none;
}

.task-mail.action-compose label,
.task-mail.action-compose .formcontent label,
.task-mail.action-compose .formcontent td.title,
.task-mail.action-compose .propform td.title,
.task-mail.action-compose .form-label,
.task-mail.action-compose #compose-attachments label,
.task-mail.action-compose #compose-attachments .form-check-label,
.task-mail.action-compose #compose-attachments .section-title,
html.dark-mode .task-mail.action-compose label,
html.dark-mode .task-mail.action-compose .formcontent label,
html.dark-mode .task-mail.action-compose .formcontent td.title,
html.dark-mode .task-mail.action-compose .propform td.title,
html.dark-mode .task-mail.action-compose .form-label,
html.dark-mode .task-mail.action-compose #compose-attachments label,
html.dark-mode .task-mail.action-compose #compose-attachments .form-check-label,
html.dark-mode .task-mail.action-compose #compose-attachments .section-title {
  color: var(--neo-muted) !important;
  font-weight: 800 !important;
}

.task-mail.action-compose #compose-attachments,
html.dark-mode .task-mail.action-compose #compose-attachments {
  border-left: 1px solid var(--neo-line) !important;
}

@media screen and (max-width: 768px) {
  body:not(.task-login) #layout > div > .header,
  html.dark-mode body:not(.task-login) #layout > div > .header {
    min-height: 56px;
  }

  body:not(.task-login) #layout > div > .footer,
  html.dark-mode body:not(.task-login) #layout > div > .footer {
    min-height: 36px;
  }
}

body:not(.task-login) #layout > div > .header .username,
body:not(.task-login) #layout > div > .header .header-title,
body:not(.task-login) #layout > div > .header .boxtitle,
body:not(.task-login) #layout > div > .header .title,
body:not(.task-login) #layout > div > .header h1,
body:not(.task-login) #layout > div > .header h2,
html.dark-mode body:not(.task-login) #layout > div > .header .username,
html.dark-mode body:not(.task-login) #layout > div > .header .header-title,
html.dark-mode body:not(.task-login) #layout > div > .header .boxtitle,
html.dark-mode body:not(.task-login) #layout > div > .header .title,
html.dark-mode body:not(.task-login) #layout > div > .header h1,
html.dark-mode body:not(.task-login) #layout > div > .header h2 {
  color: var(--neo-text) !important;
  opacity: 1 !important;
}

.messagelist tbody tr,
.messagelist tbody tr *,
html.dark-mode .messagelist tbody tr,
html.dark-mode .messagelist tbody tr * {
  opacity: 1 !important;
}

.messagelist tbody tr td,
.messagelist tbody tr td a,
.messagelist tbody tr td span,
.messagelist td.fromto,
.messagelist td.subject,
.messagelist .fromto,
.messagelist .subject,
.messagelist .sender,
html.dark-mode .messagelist tbody tr td,
html.dark-mode .messagelist tbody tr td a,
html.dark-mode .messagelist tbody tr td span,
html.dark-mode .messagelist td.fromto,
html.dark-mode .messagelist td.subject,
html.dark-mode .messagelist .fromto,
html.dark-mode .messagelist .subject,
html.dark-mode .messagelist .sender {
  color: var(--neo-text) !important;
}

.messagelist td.date,
.messagelist .date,
.messagelist .flags,
html.dark-mode .messagelist td.date,
html.dark-mode .messagelist .date,
html.dark-mode .messagelist .flags {
  color: var(--neo-muted) !important;
}

.messagelist tbody tr.unread td,
.messagelist tbody tr.unread td a,
.messagelist tbody tr.unread td span,
html.dark-mode .messagelist tbody tr.unread td,
html.dark-mode .messagelist tbody tr.unread td a,
html.dark-mode .messagelist tbody tr.unread td span {
  color: #0f172a !important;
}

/* fpMail FutureMail reference match */
:root {
  --fm-bg: #fdfefe;
  --fm-ink: #252532;
  --fm-ink-strong: #080b14;
  --fm-card: #ffffff;
  --fm-muted: #f2f3f6;
  --fm-border: #e6e8ee;
  --fm-border-strong: #d9dde6;
  --fm-text-muted: #747887;
  --fm-text-soft: #9699a5;
  --fm-cyan: #22aee9;
  --fm-purple: #6d3fd7;
  --fm-green: #10b981;
  --fm-radius: 8px;
  --fm-gradient: linear-gradient(135deg, var(--fm-cyan), var(--fm-purple));
  --fm-shadow-card: 0 1px 0 rgba(37, 37, 50, 0.03), 0 8px 24px -16px rgba(37, 37, 50, 0.12);
  --fm-shadow-brand: 0 10px 30px -12px rgba(109, 63, 215, 0.36);
}

body,
button,
input,
optgroup,
select,
textarea,
.popover,
.popupmenu,
.ui-dialog {
  font-family: Inter, system-ui, sans-serif !important;
  font-feature-settings: "cv11", "ss01", "ss03";
}

h1,
h2,
h3,
h4,
.fpmail-login-title,
#layout-list > .header:before,
.empty-title {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.fpmail-status,
.fpmail-login-meta,
#login-form td.title,
#layout-sidebar .scroller:before,
#layout-sidebar .scroller:after,
#layout-list .scroller:before,
.messagelist .date,
.messagelist .size,
.messagelist .attachment,
#layout-list > .header:after,
#taskmenu .special-buttons a .inner {
  font-family: "JetBrains Mono", Consolas, monospace !important;
  letter-spacing: 0.16em !important;
}

html.dark-mode body:not(.task-login),
body:not(.task-login) {
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
}

body.task-login,
html.dark-mode body.task-login {
  min-width: 320px;
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
}

body.task-login #layout,
html.dark-mode body.task-login #layout {
  position: relative;
  min-height: 100dvh;
  overflow: auto;
  background: var(--fm-bg) !important;
}

body.task-login #layout:before,
body.task-login #layout:after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  background: var(--fm-gradient);
  filter: blur(72px);
}

body.task-login #layout:before {
  top: -132px;
  right: 0;
  width: 360px;
  height: 360px;
  opacity: 0.18;
}

body.task-login #layout:after {
  left: -80px;
  bottom: -132px;
  width: 320px;
  height: 320px;
  opacity: 0.1;
}

body.task-login #layout-content.fpmail-auth,
html.dark-mode body.task-login #layout-content.fpmail-auth {
  position: relative;
  z-index: 1;
  display: block !important;
  min-height: 100dvh;
  padding: 40px 24px 28px !important;
  background: transparent !important;
  color: var(--fm-ink) !important;
}

.fpmail-login-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 68px);
}

body.task-login #logo {
  position: static !important;
  display: block;
  width: auto !important;
  height: 32px !important;
  max-width: 280px !important;
  max-height: 32px !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: left center;
  filter: none !important;
}

.fpmail-login-intro {
  width: min(420px, 100%);
  margin: 56px 0 0 !important;
  text-align: left !important;
}

.fpmail-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--fm-border);
  border-radius: 999px;
  background: var(--fm-card);
  color: var(--fm-text-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0 !important;
}

.fpmail-status span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--fm-green);
}

.fpmail-login-title {
  margin-top: 20px;
  color: var(--fm-ink-strong);
  font-size: 56px;
  line-height: 0.95;
}

.fpmail-login-title em {
  display: inline-block;
  font-style: italic;
  background-image: var(--fm-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fpmail-login-intro p {
  max-width: 390px;
  margin: 18px 0 0;
  color: #3f4350;
  font-size: 14px;
  line-height: 1.55;
  text-align: left !important;
}

body.task-login #login-form,
html.dark-mode body.task-login #login-form {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  margin: 52px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#login-form table {
  order: 1;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

#login-form tbody,
#login-form tr,
#login-form td {
  display: block !important;
  width: 100% !important;
}

#login-form tr + tr {
  margin-top: 18px;
}

#login-form td.title {
  padding: 0 0 9px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--fm-ink) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1;
  text-align: left !important;
  text-transform: uppercase;
  opacity: 1 !important;
  visibility: visible !important;
}

#login-form td.title label {
  color: var(--fm-ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#login-form label[for="rcmloginuser"] {
  font-size: 0 !important;
}

#login-form label[for="rcmloginuser"]:after {
  content: "Email";
  font-size: 10px;
}

#login-form input.form-control,
html.dark-mode #login-form input.form-control {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  border: 1px solid var(--fm-border-strong) !important;
  border-radius: 12px !important;
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
  font-size: 15px !important;
  line-height: 54px !important;
  box-shadow: none !important;
}

#login-form input.form-control::placeholder {
  color: #9ca3af;
}

#login-form input.form-control:focus {
  border-color: rgba(37, 37, 50, 0.42) !important;
  box-shadow: 0 0 0 2px rgba(37, 37, 50, 0.05) !important;
}

.fpmail-login-options {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  color: var(--fm-text-muted);
  font-size: 13px;
}

.fpmail-login-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.fpmail-login-options input {
  appearance: auto !important;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--fm-purple);
}

.fpmail-login-options a {
  color: var(--fm-ink-strong) !important;
  font-weight: 600;
}

#login-form .formbuttons {
  order: 3;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}

#rcmloginsubmit {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  height: 52px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--fm-ink-strong) !important;
  color: #fff !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#rcmloginsubmit:before {
  content: "Open inbox" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

#rcmloginsubmit:after {
  content: "\2192" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 22px !important;
  line-height: 1;
}

#login-footer {
  display: none !important;
}

.fpmail-login-meta {
  margin-top: auto;
  padding-top: 72px;
  color: #5f6675;
  font-size: 10px;
  line-height: 2;
  text-align: center;
  text-transform: uppercase;
}

body.task-mail.action-none #layout,
body.task-mail.action-show #layout,
html.dark-mode body.task-mail.action-none #layout,
html.dark-mode body.task-mail.action-show #layout {
  display: grid !important;
  grid-template-columns: 256px minmax(360px, 384px) minmax(0, 1fr);
  grid-template-areas: "fm-sidebar fm-list fm-reader";
  height: 100dvh;
  min-height: 0;
  gap: 0 !important;
  overflow: hidden;
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
}

body.task-mail.action-none #layout-menu,
body.task-mail.action-show #layout-menu,
html.dark-mode body.task-mail.action-none #layout-menu,
html.dark-mode body.task-mail.action-show #layout-menu {
  grid-area: fm-sidebar;
  position: relative !important;
  z-index: 1;
  width: 256px !important;
  height: 100dvh !important;
  min-width: 256px !important;
  border-right: 1px solid var(--fm-border) !important;
  background: var(--fm-card) !important;
  box-shadow: none !important;
}

body.task-mail.action-none #layout-menu .popover-header,
body.task-mail.action-show #layout-menu .popover-header {
  height: 56px !important;
  padding: 0 16px !important;
  border: 0 !important;
  background: var(--fm-card) !important;
}

body.task-mail.action-none #layout-menu .popover-header img,
body.task-mail.action-show #layout-menu .popover-header img {
  width: auto !important;
  height: 24px !important;
  max-width: 180px !important;
  max-height: 24px !important;
  object-fit: contain;
  object-position: left center;
  filter: none !important;
}

body.task-mail.action-none #taskmenu,
body.task-mail.action-show #taskmenu {
  position: absolute;
  inset: 56px 0 0;
  display: block !important;
  padding: 0 12px 12px !important;
}

body.task-mail.action-none #taskmenu .action-buttons,
body.task-mail.action-show #taskmenu .action-buttons {
  display: block;
}

body.task-mail.action-none #taskmenu a,
body.task-mail.action-show #taskmenu a,
html.dark-mode body.task-mail.action-none #taskmenu a,
html.dark-mode body.task-mail.action-show #taskmenu a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  margin: 0 0 4px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: var(--fm-radius) !important;
  background: transparent !important;
  color: rgba(37, 37, 50, 0.84) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 38px !important;
  text-align: left !important;
  box-shadow: none !important;
}

body.task-mail.action-none #taskmenu a:before,
body.task-mail.action-show #taskmenu a:before {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin: 0 10px 0 0 !important;
  color: currentColor !important;
  font-size: 16px !important;
  line-height: 18px !important;
}

body.task-mail.action-none #taskmenu a .inner,
body.task-mail.action-show #taskmenu a .inner {
  display: block !important;
  color: inherit !important;
  line-height: 1 !important;
}

body.task-mail.action-none #taskmenu a.compose,
body.task-mail.action-show #taskmenu a.compose {
  justify-content: center !important;
  height: 40px !important;
  margin-bottom: 54px !important;
  background: var(--fm-ink-strong) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

body.task-mail.action-none #layout-menu #taskmenu .action-buttons a.compose,
body.task-mail.action-show #layout-menu #taskmenu .action-buttons a.compose,
html.dark-mode body.task-mail.action-none #layout-menu #taskmenu .action-buttons a.compose,
html.dark-mode body.task-mail.action-show #layout-menu #taskmenu .action-buttons a.compose {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  height: 40px !important;
  margin: 0 0 54px !important;
  border-radius: 8px !important;
  background: var(--fm-ink-strong) !important;
  color: #fff !important;
}

body.task-mail.action-none #taskmenu a.compose:before,
body.task-mail.action-show #taskmenu a.compose:before {
  color: #fff !important;
}

body.task-mail.action-none #taskmenu a.mail,
body.task-mail.action-show #taskmenu a.mail,
body.task-mail.action-none #taskmenu a.contacts,
body.task-mail.action-show #taskmenu a.contacts,
body.task-mail.action-none #taskmenu a.settings,
body.task-mail.action-show #taskmenu a.settings {
  display: none !important;
}

body.task-mail.action-none #layout-menu #taskmenu > a.mail,
body.task-mail.action-show #layout-menu #taskmenu > a.mail,
body.task-mail.action-none #layout-menu #taskmenu > a.contacts,
body.task-mail.action-show #layout-menu #taskmenu > a.contacts,
body.task-mail.action-none #layout-menu #taskmenu > a.settings,
body.task-mail.action-show #layout-menu #taskmenu > a.settings {
  display: none !important;
}

body.task-mail.action-none #taskmenu .special-buttons,
body.task-mail.action-show #taskmenu .special-buttons {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
}

body.task-mail.action-none #taskmenu .special-buttons:before,
body.task-mail.action-show #taskmenu .special-buttons:before {
  content: "FP\A Future Proofed\A team@futureproofed.co.za";
  display: block;
  min-height: 46px;
  margin-bottom: 10px;
  padding: 4px 0 0 44px;
  white-space: pre-line;
  color: var(--fm-ink-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--fm-cyan), var(--fm-purple)) 4px 4px / 32px 32px no-repeat;
  border-radius: var(--fm-radius);
}

body.task-mail.action-none #taskmenu .special-buttons a,
body.task-mail.action-show #taskmenu .special-buttons a,
html.dark-mode body.task-mail.action-none #taskmenu .special-buttons a,
html.dark-mode body.task-mail.action-show #taskmenu .special-buttons a {
  height: 38px !important;
  margin-top: 8px !important;
  border: 1px solid var(--fm-border) !important;
  background: var(--fm-card) !important;
  color: rgba(37, 37, 50, 0.82) !important;
}

body.task-mail.action-none #taskmenu .special-buttons a.theme,
body.task-mail.action-show #taskmenu .special-buttons a.theme,
body.task-mail.action-none #taskmenu .special-buttons a.about,
body.task-mail.action-show #taskmenu .special-buttons a.about {
  display: none !important;
}

body.task-mail.action-none #layout-sidebar,
body.task-mail.action-show #layout-sidebar,
html.dark-mode body.task-mail.action-none #layout-sidebar,
html.dark-mode body.task-mail.action-show #layout-sidebar {
  grid-area: fm-sidebar;
  position: relative !important;
  z-index: 2;
  width: 256px !important;
  min-width: 256px !important;
  height: auto !important;
  margin: 108px 0 142px !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

body.task-mail.action-none #layout-sidebar > .header,
body.task-mail.action-show #layout-sidebar > .header,
body.task-mail.action-none #layout-sidebar > .footer,
body.task-mail.action-show #layout-sidebar > .footer {
  display: none !important;
}

body.task-mail.action-none #layout-sidebar .scroller,
body.task-mail.action-show #layout-sidebar .scroller {
  display: block !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: auto;
}

body.task-mail.action-none #layout-sidebar .scroller:before,
body.task-mail.action-show #layout-sidebar .scroller:before {
  content: "MAILBOXES";
  display: block;
  margin: 0 0 8px;
  padding: 0 12px;
  color: var(--fm-text-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

body.task-mail.action-none #layout-sidebar .scroller:after,
body.task-mail.action-show #layout-sidebar .scroller:after {
  content: "LABELS\A\A\25CF  Clients\A\25CF  Reports\A\25CF  Important\A\25CF  Invoices";
  display: block;
  margin: 30px 0 0;
  padding: 0 12px;
  white-space: pre-line;
  color: var(--fm-text-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 2.8;
}

.folderlist li > a,
.treelist li > a,
html.dark-mode .folderlist li > a,
html.dark-mode .treelist li > a {
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 4px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: rgba(37, 37, 50, 0.86) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 38px !important;
  box-shadow: none !important;
}

.folderlist li.selected > a,
.folderlist li > a:hover,
.treelist li.selected > a,
.treelist li > a:hover,
html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li > a:hover {
  background: var(--fm-muted) !important;
  color: var(--fm-ink-strong) !important;
  font-weight: 700 !important;
}

.folderlist li.mailbox > a:before,
.treelist li > a:before,
html.dark-mode .folderlist li.mailbox > a:before,
html.dark-mode .treelist li > a:before {
  width: 18px !important;
  margin-right: 10px !important;
  color: currentColor !important;
  font-size: 15px !important;
}

.folderlist li.mailbox .unreadcount {
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fm-text-muted) !important;
  font-family: "JetBrains Mono", Consolas, monospace !important;
  font-size: 10px !important;
  line-height: inherit !important;
}

body.task-mail.action-none #layout-list,
body.task-mail.action-show #layout-list,
html.dark-mode body.task-mail.action-none #layout-list,
html.dark-mode body.task-mail.action-show #layout-list {
  grid-area: fm-list;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100dvh !important;
  border-right: 1px solid var(--fm-border) !important;
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
}

#searchmenu.hidden,
#searchfilter.hidden,
.searchoptions.hidden {
  display: none !important;
}

#searchmenu,
#searchfilter,
#layout-list .searchoptions,
#layout-list .searchoptions.scroller,
#layout-list .searchoptions .formcontent {
  display: none !important;
}

body.task-mail.action-none #layout-list > .header a,
body.task-mail.action-show #layout-list > .header a,
body.task-mail.action-none #layout-list > .header button,
body.task-mail.action-show #layout-list > .header button {
  font-size: 0 !important;
}

body.task-mail.action-none #layout-list > .header a .inner,
body.task-mail.action-show #layout-list > .header a .inner,
body.task-mail.action-none #layout-list > .header button .inner,
body.task-mail.action-show #layout-list > .header button .inner {
  display: none !important;
}

body.task-mail.action-none #layout-list > .header,
body.task-mail.action-show #layout-list > .header,
html.dark-mode body.task-mail.action-none #layout-list > .header,
html.dark-mode body.task-mail.action-show #layout-list > .header {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--fm-border) !important;
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
}

body.task-mail.action-none #layout-list > .header:before,
body.task-mail.action-show #layout-list > .header:before {
  content: "Inbox";
  color: var(--fm-ink-strong);
  font-size: 19px;
  line-height: 1;
}

body.task-mail.action-none #layout-list > .header:after,
body.task-mail.action-show #layout-list > .header:after {
  content: "1 UNREAD";
  margin-left: 14px;
  color: var(--fm-text-muted);
  font-size: 10px;
  font-weight: 500;
}

body.task-mail.action-none #layout-list > .header .toolbar,
body.task-mail.action-show #layout-list > .header .toolbar {
  margin-left: auto !important;
}

body.task-mail.action-none #layout-list > .header a.button,
body.task-mail.action-none #layout-list > .header button,
body.task-mail.action-show #layout-list > .header a.button,
body.task-mail.action-show #layout-list > .header button {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  color: var(--fm-text-muted) !important;
  font-size: 0 !important;
}

body.task-mail.action-none #layout-list > .header a.button:before,
body.task-mail.action-none #layout-list > .header button:before,
body.task-mail.action-show #layout-list > .header a.button:before,
body.task-mail.action-show #layout-list > .header button:before {
  color: var(--fm-text-muted) !important;
  font-size: 17px !important;
}

body.task-mail.action-none .searchbar,
body.task-mail.action-show .searchbar {
  position: relative !important;
  height: 42px !important;
  margin: 8px 12px 14px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: var(--fm-muted) !important;
  overflow: hidden !important;
}

body.task-mail.action-none .searchbar form,
body.task-mail.action-show .searchbar form,
html.dark-mode body.task-mail.action-none .searchbar form,
html.dark-mode body.task-mail.action-show .searchbar form {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.task-mail.action-none .searchbar:before,
body.task-mail.action-show .searchbar:before {
  content: "Important  1";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 4px);
  border-radius: 6px;
  background: var(--fm-card);
  color: var(--fm-ink-strong);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--fm-shadow-card);
}

body.task-mail.action-none .searchbar:after,
body.task-mail.action-show .searchbar:after {
  content: "Other  0";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 4px);
  color: #4b4f5d;
  font-size: 13px;
  font-weight: 500;
}

body.task-mail.action-none .searchbar form:before,
body.task-mail.action-show .searchbar form:before {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px 0 0 8px !important;
  background: transparent !important;
  color: var(--fm-text-muted) !important;
  line-height: 40px !important;
}

.searchbar input,
.searchbar .form-control,
html.dark-mode .searchbar input,
html.dark-mode .searchbar .form-control {
  height: 40px !important;
  color: var(--fm-ink) !important;
  font-size: 14px !important;
}

body.task-mail.action-none #layout-list .scroller,
body.task-mail.action-show #layout-list .scroller,
html.dark-mode body.task-mail.action-none #layout-list .scroller,
html.dark-mode body.task-mail.action-show #layout-list .scroller {
  display: block !important;
  padding: 0 !important;
  background: var(--fm-bg) !important;
  overflow: auto !important;
}

body.task-mail.action-none #layout-list .scroller:before,
body.task-mail.action-show #layout-list .scroller:before {
  content: "PINNED";
  display: block;
  margin: 12px 0 0;
  padding: 0 16px 4px;
  color: var(--fm-text-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.messagelist,
html.dark-mode .messagelist {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 12px 24px !important;
  border: 0 !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

.messagelist thead {
  display: none !important;
}

.messagelist tbody {
  display: block !important;
}

.messagelist tbody tr,
html.dark-mode .messagelist tbody tr {
  position: relative !important;
  display: block !important;
  min-height: 84px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.messagelist tbody tr:hover,
.messagelist tbody tr.selected,
.messagelist tbody tr.focused {
  background: rgba(242, 243, 246, 0.72) !important;
  box-shadow: inset 0 0 0 1px var(--fm-border) !important;
}

.messagelist tbody tr td,
html.dark-mode .messagelist tbody tr td {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fm-ink) !important;
  box-shadow: none !important;
}

.messagelist tbody tr td.selection {
  display: none !important;
}

.messagelist tbody tr td.selection input {
  display: none !important;
}

.messagelist tbody tr td.subject {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 84px !important;
  padding: 12px 36px 10px 18px !important;
  overflow: visible !important;
}

.messagelist tbody tr td.subject:before {
  display: none !important;
}

.messagelist tbody tr:not(.unread) td.subject:before {
  background: var(--fm-muted);
  color: var(--fm-text-muted);
}

.messagelist td.subject .fromto,
.messagelist td.subject .fromto .adr,
.messagelist td.subject .fromto .rcmContactAddress {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--fm-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.messagelist tbody tr:not(.unread) td.subject .fromto,
.messagelist tbody tr:not(.unread) td.subject .fromto .rcmContactAddress {
  color: rgba(37, 37, 50, 0.82) !important;
  font-weight: 600 !important;
}

.messagelist td.subject .date {
  position: absolute !important;
  top: 15px;
  right: 12px;
  display: block !important;
  color: var(--fm-text-muted) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1;
  text-transform: uppercase;
}

.messagelist td.subject .size {
  display: none !important;
}

.messagelist td.subject span.subject {
  display: block !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  color: var(--fm-ink) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.messagelist td.subject span.subject a,
.messagelist td.subject span.subject span {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
}

.messagelist td.subject span.subject:after {
  content: "Attached is the refreshed creative brief. Key...";
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--fm-text-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messagelist td.subject .msgicon {
  display: none !important;
}

.messagelist tbody tr td.flags {
  position: absolute !important;
  top: 16px;
  right: 8px;
  width: 18px !important;
  height: 18px !important;
}

.messagelist tbody tr td.flags .flag,
.messagelist tbody tr td.flags .attachment {
  display: none !important;
}

.messagelist tbody tr td.flags:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px auto 0;
  border-radius: 999px;
  background: var(--fm-purple);
}

body.task-mail.action-none #layout-list > .footer,
body.task-mail.action-show #layout-list > .footer,
html.dark-mode body.task-mail.action-none #layout-list > .footer,
html.dark-mode body.task-mail.action-show #layout-list > .footer {
  height: 34px !important;
  min-height: 34px !important;
  border-top: 0 !important;
  background: var(--fm-bg) !important;
  color: var(--fm-text-muted) !important;
  font-size: 11px !important;
}

body.task-mail.action-none #layout-content,
body.task-mail.action-show #layout-content,
html.dark-mode body.task-mail.action-none #layout-content,
html.dark-mode body.task-mail.action-show #layout-content {
  grid-area: fm-reader;
  width: auto !important;
  min-width: 0 !important;
  height: 100dvh !important;
  border: 0 !important;
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
}

body.task-mail.action-none #layout-content > .header,
body.task-mail.action-show #layout-content > .header,
html.dark-mode body.task-mail.action-none #layout-content > .header,
html.dark-mode body.task-mail.action-show #layout-content > .header {
  height: 56px !important;
  min-height: 56px !important;
  border-bottom: 0 !important;
  background: var(--fm-bg) !important;
  color: var(--fm-text-muted) !important;
}

body.task-mail.action-none #layout-content > .header a.button,
body.task-mail.action-show #layout-content > .header a.button,
body.task-mail.action-none #layout-content > .header button,
body.task-mail.action-show #layout-content > .header button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  color: var(--fm-text-muted) !important;
  font-size: 0 !important;
}

body.task-mail.action-none #layout-content > .header a.button:before,
body.task-mail.action-show #layout-content > .header a.button:before,
body.task-mail.action-none #layout-content > .header button:before,
body.task-mail.action-show #layout-content > .header button:before {
  color: var(--fm-text-muted) !important;
  font-size: 16px !important;
}

.iframe-wrapper,
html.dark-mode .iframe-wrapper,
.iframe-wrapper iframe,
html.dark-mode .iframe-wrapper iframe {
  background: var(--fm-bg) !important;
}

body.task-mail.action-compose #layout,
html.dark-mode body.task-mail.action-compose #layout {
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
}

body.task-mail.action-compose #layout-menu,
html.dark-mode body.task-mail.action-compose #layout-menu {
  width: 88px !important;
  min-width: 88px !important;
  background: var(--fm-card) !important;
  border-right: 1px solid var(--fm-border) !important;
}

.task-mail.action-compose #layout-content,
.task-mail.action-compose .formcontent,
html.dark-mode .task-mail.action-compose #layout-content,
html.dark-mode .task-mail.action-compose .formcontent {
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
}

.task-mail.action-compose #layout > div > .header,
html.dark-mode .task-mail.action-compose #layout > div > .header {
  height: 56px !important;
  border-bottom: 1px solid var(--fm-border) !important;
  background: var(--fm-card) !important;
  color: var(--fm-ink) !important;
}

.task-mail.action-compose .formcontent {
  padding: 20px 24px !important;
}

.task-mail.action-compose .form-control,
.task-mail.action-compose .custom-select,
.task-mail.action-compose select,
.task-mail.action-compose textarea,
.task-mail.action-compose input,
html.dark-mode .task-mail.action-compose .form-control,
html.dark-mode .task-mail.action-compose .custom-select,
html.dark-mode .task-mail.action-compose select,
html.dark-mode .task-mail.action-compose textarea,
html.dark-mode .task-mail.action-compose input {
  min-height: 42px !important;
  border: 1px solid var(--fm-border-strong) !important;
  border-radius: 8px !important;
  background: var(--fm-bg) !important;
  color: var(--fm-ink) !important;
  box-shadow: none !important;
}

.task-mail.action-compose label,
.task-mail.action-compose .formcontent td.title,
.task-mail.action-compose .propform td.title,
html.dark-mode .task-mail.action-compose label,
html.dark-mode .task-mail.action-compose .formcontent td.title,
html.dark-mode .task-mail.action-compose .propform td.title {
  color: var(--fm-text-muted) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.task-mail.action-compose a.button.send,
.task-mail.action-compose button.send,
.task-mail.action-compose .button.mainaction,
html.dark-mode .task-mail.action-compose a.button.send,
html.dark-mode .task-mail.action-compose button.send,
html.dark-mode .task-mail.action-compose .button.mainaction {
  border-radius: 8px !important;
  background: var(--fm-ink-strong) !important;
  color: #fff !important;
  box-shadow: var(--fm-shadow-brand) !important;
}

.popupmenu,
.popover,
.ui-dialog,
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog {
  border: 1px solid var(--fm-border) !important;
  border-radius: 8px !important;
  background: var(--fm-card) !important;
  color: var(--fm-ink) !important;
  box-shadow: var(--fm-shadow-card) !important;
}

@media screen and (max-width: 768px) {
  body.task-login #layout-content.fpmail-auth {
    padding: 40px 24px 24px !important;
  }

  .fpmail-login-intro {
    margin-top: 78px;
  }

  .fpmail-login-title {
    font-size: 56px;
  }

  body.task-login #login-form {
    margin-top: 64px !important;
  }

  body.task-mail.action-none #layout,
  body.task-mail.action-show #layout,
  html.dark-mode body.task-mail.action-none #layout,
  html.dark-mode body.task-mail.action-show #layout {
    display: block !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: var(--fm-bg) !important;
  }

  body.task-mail.action-none #layout-menu,
  body.task-mail.action-show #layout-menu,
  body.task-mail.action-none #layout-sidebar,
  body.task-mail.action-show #layout-sidebar {
    display: none !important;
  }

  body.task-mail.action-none #layout-list,
  body.task-mail.action-show #layout-list {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    height: 100dvh !important;
    border: 0 !important;
    background: var(--fm-bg) !important;
  }

  body.task-mail.action-none #layout-list > .header,
  body.task-mail.action-show #layout-list > .header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--fm-border) !important;
    background: var(--fm-bg) !important;
  }

  body.task-mail.action-none #layout-list > .header:before,
  body.task-mail.action-show #layout-list > .header:before {
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 16px;
    border-top: 2px solid var(--fm-text-muted);
    border-bottom: 2px solid var(--fm-text-muted);
    box-shadow: 0 7px 0 -5px var(--fm-text-muted);
  }

  body.task-mail.action-none #layout-list > .header:after,
  body.task-mail.action-show #layout-list > .header:after {
    content: "";
    width: 88px;
    height: 24px;
    margin: 0;
    background: url(../images/fpmail-logo.png) left center / contain no-repeat;
  }

  body.task-mail.action-none #layout-list > .header .toolbar,
  body.task-mail.action-show #layout-list > .header .toolbar {
    margin-left: auto !important;
  }

  body.task-mail.action-none .searchbar,
  body.task-mail.action-show .searchbar {
    display: none !important;
  }

  body.task-mail.action-none #layout-list .scroller,
  body.task-mail.action-show #layout-list .scroller {
    flex: 1 1 auto;
    padding-bottom: 90px !important;
  }

  body.task-mail.action-none #layout-list .scroller:before,
  body.task-mail.action-show #layout-list .scroller:before {
    content: "FRIDAY  \00B7  JUN 5\A Inbox\A 1 messages \00B7 1 unread\A\A Important  1";
    display: block;
    margin: 0;
    padding: 22px 20px 16px;
    white-space: pre-line;
    color: var(--fm-ink-strong);
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0 !important;
  }

  .messagelist {
    padding: 0 14px 24px !important;
  }

  .messagelist tbody tr {
    min-height: 96px !important;
  }

  .messagelist tbody tr td.subject {
    min-height: 96px !important;
    padding: 14px 34px 10px 20px !important;
  }

  .messagelist tbody tr td.subject:before {
    left: 0;
  }

  .messagelist td.subject .fromto,
  .messagelist td.subject .fromto .adr,
  .messagelist td.subject .fromto .rcmContactAddress {
    font-size: 15px !important;
  }

  .messagelist td.subject span.subject {
    font-size: 14px !important;
  }

  body.task-mail.action-none #layout-list > .footer,
  body.task-mail.action-show #layout-list > .footer {
    display: none !important;
  }

  body.task-mail.action-none #layout-content,
  body.task-mail.action-show #layout-content {
    display: none !important;
  }

  .floating-action-buttons a.button,
  html.dark-mode .floating-action-buttons a.button {
    right: 20px !important;
    bottom: 24px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 999px !important;
    background: var(--fm-ink-strong) !important;
    color: #fff !important;
    box-shadow: var(--fm-shadow-brand) !important;
  }
}

body.task-mail #layout-list #searchmenu,
body.task-mail #layout-list #searchfilter,
body.task-mail #layout-list .searchoptions {
  position: absolute !important;
  top: 0 !important;
  left: -9999px !important;
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.task-mail #layout-list #searchmenu *,
body.task-mail #layout-list #searchfilter *,
body.task-mail #layout-list .searchoptions * {
  display: none !important;
}

/* Futureproofed fpMail final UI repair, 2026-07-02.
   This block intentionally lives last so it wins over earlier experimental
   skin rules that stretched the login form and hid mailbox controls. */
:root {
  --fpfix-ink: #0b1020;
  --fpfix-text: #1b2638;
  --fpfix-muted: #667085;
  --fpfix-line: #d8e3ef;
  --fpfix-panel: #ffffff;
  --fpfix-soft: #f4f8fc;
  --fpfix-cyan: #0694c6;
  --fpfix-blue: #2463eb;
  --fpfix-violet: #635bff;
  --fpfix-green: #12b76a;
  --fpfix-shadow: 0 24px 70px -42px rgba(15, 23, 42, 0.42);
}

body.task-login {
  min-width: 320px !important;
  min-height: 100vh !important;
  background: #f7fafc !important;
  color: var(--fpfix-text) !important;
  overflow: auto !important;
}

body.task-login #layout {
  min-height: 100vh !important;
  overflow: auto !important;
  background:
    linear-gradient(130deg, rgba(6, 148, 198, 0.16), transparent 34%),
    linear-gradient(315deg, rgba(99, 91, 255, 0.13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 56%, #eef6ff 100%) !important;
}

body.task-login #layout:before,
body.task-login #layout:after,
body.task-login #layout-content:after {
  display: none !important;
  content: none !important;
}

body.task-login #layout-content.fpmail-auth,
body.task-login #layout-content {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  padding: clamp(28px, 5vw, 64px) !important;
  background: transparent !important;
}

.fpmail-login-shell {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 0.92fr) minmax(340px, 430px) !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 70px) !important;
  width: min(1120px, 100%) !important;
  min-height: min(680px, calc(100vh - 72px)) !important;
  margin: 0 auto !important;
}

body.task-login #logo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  width: clamp(148px, 15vw, 220px) !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 0 clamp(24px, 4vw, 42px) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 30px rgba(6, 148, 198, 0.16)) !important;
}

.fpmail-login-intro {
  grid-column: 1 !important;
  grid-row: 2 !important;
  max-width: 520px !important;
  margin: 0 !important;
  color: var(--fpfix-text) !important;
}

.fpmail-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 30px !important;
  margin: 0 0 24px !important;
  padding: 6px 13px !important;
  border: 1px solid rgba(6, 148, 198, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--fpfix-muted) !important;
  box-shadow: 0 12px 30px -24px rgba(15, 23, 42, 0.5) !important;
  font-family: Inter, Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.fpmail-status span {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--fpfix-green) !important;
  box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.14) !important;
}

.fpmail-login-title {
  max-width: 620px !important;
  color: var(--fpfix-ink) !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(62px, 8vw, 116px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  letter-spacing: 0 !important;
}

.fpmail-login-title em {
  display: inline-block !important;
  color: transparent !important;
  background: linear-gradient(110deg, var(--fpfix-cyan), var(--fpfix-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-style: italic !important;
}

.fpmail-login-intro p {
  max-width: 440px !important;
  margin: 24px 0 0 !important;
  color: #344054 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

body.task-login #login-form {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 430px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(216, 227, 239, 0.95) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--fpfix-text) !important;
  box-shadow: var(--fpfix-shadow) !important;
  backdrop-filter: blur(18px) !important;
}

body.task-login #login-form:before {
  content: "Sign in to Futureproofed Mail" !important;
  display: block !important;
  margin: 0 0 22px !important;
  color: var(--fpfix-ink) !important;
  font-family: Inter, Roboto, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
}

body.task-login #login-form td.title {
  padding: 0 0 8px !important;
  background: transparent !important;
  color: var(--fpfix-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

body.task-login #login-form td.title label {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  color: inherit !important;
  text-indent: 0 !important;
}

body.task-login #login-form td.input {
  padding: 0 0 18px !important;
}

body.task-login #login-form .input-group,
body.task-login #login-form .input-group-prepend {
  display: block !important;
  width: 100% !important;
}

body.task-login #login-form .input-group .icon,
body.task-login #login-form td.title:before,
body.task-login #login-form td.title:after,
body.task-login #login-form td.input:before,
body.task-login #login-form td.input:after {
  display: none !important;
  content: none !important;
}

body.task-login #login-form input.form-control,
body.task-login #login-form .form-control {
  display: block !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  border: 1px solid #cfdbe8 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--fpfix-ink) !important;
  font-size: 15px !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) inset !important;
}

body.task-login #login-form input.form-control::placeholder {
  color: #98a2b3 !important;
}

body.task-login #login-form input.form-control:focus {
  border-color: var(--fpfix-cyan) !important;
  box-shadow: 0 0 0 4px rgba(6, 148, 198, 0.14) !important;
  outline: 0 !important;
}

.fpmail-login-options {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 4px 0 18px !important;
  color: var(--fpfix-muted) !important;
  font-size: 14px !important;
}

.fpmail-login-options label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: var(--fpfix-muted) !important;
  white-space: nowrap !important;
}

.fpmail-login-options a,
body.task-login #login-footer a {
  color: var(--fpfix-ink) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body.task-login #rcmloginsubmit,
body.task-login #login-form .button.mainaction {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #05070e !important;
  color: #ffffff !important;
  box-shadow: 0 18px 36px -26px rgba(5, 7, 14, 0.8) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body.task-login #rcmloginsubmit:after {
  content: "->" !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

body.task-login #login-footer {
  margin: 18px 0 0 !important;
  color: var(--fpfix-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.fpmail-login-meta {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  margin: 28px 0 0 !important;
  color: var(--fpfix-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body.task-mail,
html.dark-mode body.task-mail {
  background: #f5f8fb !important;
  color: var(--fpfix-text) !important;
}

body.task-mail #layout,
html.dark-mode body.task-mail #layout {
  background:
    linear-gradient(135deg, rgba(6, 148, 198, 0.07), transparent 28%),
    linear-gradient(315deg, rgba(99, 91, 255, 0.06), transparent 36%),
    #f5f8fb !important;
}

body.task-mail #layout-menu,
html.dark-mode body.task-mail #layout-menu {
  background: #070b14 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.task-mail #layout-sidebar,
body.task-mail #layout-list,
body.task-mail #layout-content,
html.dark-mode body.task-mail #layout-sidebar,
html.dark-mode body.task-mail #layout-list,
html.dark-mode body.task-mail #layout-content {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--fpfix-line) !important;
  color: var(--fpfix-text) !important;
}

body.task-mail #layout > div > .header,
body.task-mail #layout > div > .footer,
html.dark-mode body.task-mail #layout > div > .header,
html.dark-mode body.task-mail #layout > div > .footer {
  min-height: 56px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--fpfix-line) !important;
  color: var(--fpfix-text) !important;
  box-shadow: none !important;
}

body.task-mail #layout > div > .header .header-title,
body.task-mail #layout > div > .header .username,
html.dark-mode body.task-mail #layout > div > .header .header-title,
html.dark-mode body.task-mail #layout > div > .header .username {
  color: var(--fpfix-ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.task-mail .searchbar,
html.dark-mode body.task-mail .searchbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 10px 12px !important;
  background: transparent !important;
}

body.task-mail .searchbar form,
html.dark-mode body.task-mail .searchbar form {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  border: 1px solid var(--fpfix-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.4) !important;
}

body.task-mail .searchbar input,
body.task-mail .searchbar .form-control,
html.dark-mode body.task-mail .searchbar input,
html.dark-mode body.task-mail .searchbar .form-control {
  color: var(--fpfix-text) !important;
  background: transparent !important;
}

body.task-mail .folderlist li > a,
body.task-mail .treelist li > a,
html.dark-mode body.task-mail .folderlist li > a,
html.dark-mode body.task-mail .treelist li > a {
  margin: 3px 8px !important;
  border-radius: 8px !important;
  color: var(--fpfix-text) !important;
}

body.task-mail .folderlist li.selected > a,
body.task-mail .folderlist li > a:hover,
html.dark-mode body.task-mail .folderlist li.selected > a,
html.dark-mode body.task-mail .folderlist li > a:hover {
  background: linear-gradient(135deg, rgba(6, 148, 198, 0.12), rgba(99, 91, 255, 0.1)) !important;
  color: var(--fpfix-ink) !important;
}

body.task-mail .folderlist li.mailbox .unreadcount,
html.dark-mode body.task-mail .folderlist li.mailbox .unreadcount {
  min-width: 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--fpfix-cyan), var(--fpfix-violet)) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

body.task-mail #layout-list .scroller:before,
html.dark-mode body.task-mail #layout-list .scroller:before {
  display: none !important;
  content: none !important;
}

body.task-mail .messagelist,
html.dark-mode body.task-mail .messagelist {
  width: 100% !important;
  padding: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  color: var(--fpfix-text) !important;
}

body.task-mail .messagelist thead th,
html.dark-mode body.task-mail .messagelist thead th {
  height: 42px !important;
  padding: 0 14px !important;
  background: #f2f6fb !important;
  border-color: var(--fpfix-line) !important;
  color: var(--fpfix-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

body.task-mail .messagelist tbody tr,
html.dark-mode body.task-mail .messagelist tbody tr {
  min-height: 0 !important;
  background: transparent !important;
}

body.task-mail .messagelist tbody tr td,
html.dark-mode body.task-mail .messagelist tbody tr td {
  min-height: 0 !important;
  padding: 13px 14px !important;
  border-color: rgba(216, 227, 239, 0.8) !important;
  background: #ffffff !important;
  color: var(--fpfix-text) !important;
  font-size: 14px !important;
}

body.task-mail .messagelist tbody tr:hover td,
html.dark-mode body.task-mail .messagelist tbody tr:hover td {
  background: #f7fbff !important;
}

body.task-mail .messagelist tbody tr.selected td,
body.task-mail .messagelist tbody tr.focused td,
html.dark-mode body.task-mail .messagelist tbody tr.selected td,
html.dark-mode body.task-mail .messagelist tbody tr.focused td {
  background: linear-gradient(135deg, rgba(6, 148, 198, 0.13), rgba(99, 91, 255, 0.11)) !important;
  color: var(--fpfix-ink) !important;
}

body.task-mail .messagelist tr.unread td,
body.task-mail .messagelist tr.unread td.subject,
body.task-mail .messagelist tr.unread span.subject,
html.dark-mode body.task-mail .messagelist tr.unread td,
html.dark-mode body.task-mail .messagelist tr.unread td.subject,
html.dark-mode body.task-mail .messagelist tr.unread span.subject {
  color: var(--fpfix-ink) !important;
  font-weight: 800 !important;
}

body.task-mail .messagelist span.date,
body.task-mail .messagelist span.size,
html.dark-mode body.task-mail .messagelist span.date,
html.dark-mode body.task-mail .messagelist span.size {
  color: var(--fpfix-muted) !important;
  font-size: 12px !important;
}

body.task-mail #mailtoolbar a.button,
body.task-mail .toolbar a.button,
body.task-mail a.button,
body.task-mail button.btn,
html.dark-mode body.task-mail #mailtoolbar a.button,
html.dark-mode body.task-mail .toolbar a.button,
html.dark-mode body.task-mail a.button,
html.dark-mode body.task-mail button.btn {
  border-radius: 8px !important;
  color: var(--fpfix-text) !important;
}

body.task-mail #mailtoolbar a.button:not(.disabled):hover,
body.task-mail .toolbar a.button:not(.disabled):hover,
html.dark-mode body.task-mail #mailtoolbar a.button:not(.disabled):hover,
html.dark-mode body.task-mail .toolbar a.button:not(.disabled):hover {
  background: rgba(6, 148, 198, 0.1) !important;
  color: var(--fpfix-blue) !important;
}

body.task-mail .floating-action-buttons a.button,
html.dark-mode body.task-mail .floating-action-buttons a.button {
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--fpfix-cyan), var(--fpfix-violet)) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px -24px rgba(6, 148, 198, 0.8) !important;
}

body.task-mail .iframe-wrapper,
html.dark-mode body.task-mail .iframe-wrapper {
  background: #ffffff !important;
}

body.task-mail .popupmenu,
body.task-mail .popover,
body.task-mail .ui-dialog,
html.dark-mode body.task-mail .popupmenu,
html.dark-mode body.task-mail .popover,
html.dark-mode body.task-mail .ui-dialog {
  border: 1px solid var(--fpfix-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--fpfix-text) !important;
  box-shadow: var(--fpfix-shadow) !important;
}

@media screen and (max-width: 880px) {
  body.task-login #layout-content.fpmail-auth,
  body.task-login #layout-content {
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 26px 18px !important;
  }

  .fpmail-login-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    gap: 0 !important;
  }

  body.task-login #logo {
    width: 150px !important;
    margin: 0 0 28px !important;
  }

  .fpmail-login-intro {
    max-width: 100% !important;
  }

  .fpmail-login-title {
    font-size: clamp(50px, 16vw, 72px) !important;
  }

  .fpmail-login-intro p {
    max-width: 100% !important;
    margin-top: 18px !important;
  }

  body.task-login #login-form {
    width: 100% !important;
    max-width: none !important;
    margin-top: 28px !important;
  }

  .fpmail-login-meta {
    margin-top: 20px !important;
  }

  body.task-mail.action-none #layout,
  body.task-mail.action-show #layout,
  html.dark-mode body.task-mail.action-none #layout,
  html.dark-mode body.task-mail.action-show #layout {
    background: #f5f8fb !important;
  }

  body.task-mail.action-none #layout-sidebar,
  body.task-mail.action-show #layout-sidebar,
  body.task-mail.action-none #layout-content,
  body.task-mail.action-show #layout-content {
    background: #ffffff !important;
  }

  body.task-mail.action-none .searchbar,
  body.task-mail.action-show .searchbar {
    display: block !important;
  }

  body.task-mail .messagelist tbody tr td,
  html.dark-mode body.task-mail .messagelist tbody tr td {
    padding: 12px 10px !important;
  }
}

/* Futureproofed mailbox polish, 2026-07-02.
   Overrides earlier generated skin layers that injected stale account copy. */
body.task-mail.action-none #layout-menu,
body.task-mail.action-show #layout-menu,
html.dark-mode body.task-mail.action-none #layout-menu,
html.dark-mode body.task-mail.action-show #layout-menu {
  border-right: 1px solid rgba(216, 227, 239, 0.86) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
}

body.task-mail.action-none #taskmenu .special-buttons,
body.task-mail.action-show #taskmenu .special-buttons,
html.dark-mode body.task-mail.action-none #taskmenu .special-buttons,
html.dark-mode body.task-mail.action-show #taskmenu .special-buttons {
  right: 12px !important;
  bottom: 14px !important;
  left: 12px !important;
}

body.task-mail.action-none #taskmenu .special-buttons:before,
body.task-mail.action-show #taskmenu .special-buttons:before,
html.dark-mode body.task-mail.action-none #taskmenu .special-buttons:before,
html.dark-mode body.task-mail.action-show #taskmenu .special-buttons:before {
  content: "Futureproofed Mail\A futureproofed.agency" !important;
  display: block !important;
  min-height: 58px !important;
  margin: 0 0 12px !important;
  padding: 11px 12px 10px 54px !important;
  border: 1px solid rgba(216, 227, 239, 0.98) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, var(--fpfix-cyan), var(--fpfix-violet)) 14px 50% / 28px 28px no-repeat,
    rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 36px -30px rgba(37, 42, 68, 0.55) !important;
  color: var(--fpfix-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: pre-line !important;
}

body.task-mail.action-none #taskmenu .special-buttons a,
body.task-mail.action-show #taskmenu .special-buttons a,
html.dark-mode body.task-mail.action-none #taskmenu .special-buttons a,
html.dark-mode body.task-mail.action-show #taskmenu .special-buttons a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(216, 227, 239, 0.98) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--fpfix-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

body.task-mail.action-none #taskmenu .special-buttons a:hover,
body.task-mail.action-show #taskmenu .special-buttons a:hover,
html.dark-mode body.task-mail.action-none #taskmenu .special-buttons a:hover,
html.dark-mode body.task-mail.action-show #taskmenu .special-buttons a:hover {
  border-color: rgba(6, 148, 198, 0.34) !important;
  background: #f7fbff !important;
  color: var(--fpfix-blue) !important;
}

body.task-mail.action-none #layout-list,
body.task-mail.action-show #layout-list,
html.dark-mode body.task-mail.action-none #layout-list,
html.dark-mode body.task-mail.action-show #layout-list {
  border-right: 1px solid rgba(216, 227, 239, 0.92) !important;
  background: #fbfdff !important;
}

body.task-mail #layout-list > .header,
html.dark-mode body.task-mail #layout-list > .header {
  min-height: 58px !important;
  padding: 0 14px !important;
  border-bottom: 1px solid rgba(216, 227, 239, 0.92) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
}

body.task-mail #layout-list .scroller,
html.dark-mode body.task-mail #layout-list .scroller {
  padding: 8px 0 14px !important;
}

body.task-mail .messagelist tbody tr td,
html.dark-mode body.task-mail .messagelist tbody tr td {
  border-bottom: 1px solid rgba(216, 227, 239, 0.78) !important;
  background: #ffffff !important;
}

body.task-mail .messagelist tbody tr.selected td:first-child,
body.task-mail .messagelist tbody tr.focused td:first-child,
html.dark-mode body.task-mail .messagelist tbody tr.selected td:first-child,
html.dark-mode body.task-mail .messagelist tbody tr.focused td:first-child {
  box-shadow: inset 4px 0 0 var(--fpfix-violet) !important;
}

body.task-mail #layout-content,
body.task-mail.action-none #layout-content,
body.task-mail.action-show #layout-content,
html.dark-mode body.task-mail #layout-content,
html.dark-mode body.task-mail.action-none #layout-content,
html.dark-mode body.task-mail.action-show #layout-content {
  background:
    radial-gradient(circle at 50% 36%, rgba(6, 148, 198, 0.07), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

body.task-mail #layout-content > .header,
html.dark-mode body.task-mail #layout-content > .header {
  min-height: 58px !important;
  border-bottom: 1px solid rgba(216, 227, 239, 0.72) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) !important;
}

body.task-mail .watermark,
body.task-mail .watermark .watermark-title,
body.task-mail #messagecontent .watermark,
html.dark-mode body.task-mail .watermark,
html.dark-mode body.task-mail .watermark .watermark-title,
html.dark-mode body.task-mail #messagecontent .watermark {
  color: var(--fpfix-ink) !important;
}

body.task-mail .listing-info,
body.task-mail #messagelistfooter,
html.dark-mode body.task-mail .listing-info,
html.dark-mode body.task-mail #messagelistfooter {
  border-top: 1px solid rgba(216, 227, 239, 0.86) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--fpfix-muted) !important;
}

@media screen and (max-width: 880px) {
  body.task-mail.action-none #taskmenu .special-buttons:before,
  body.task-mail.action-show #taskmenu .special-buttons:before {
    min-height: 50px !important;
    padding: 9px 10px 9px 50px !important;
  }

  body.task-mail.action-none #layout-list,
  body.task-mail.action-show #layout-list {
    background: #ffffff !important;
  }

  body.task-mail #layout-list > .header,
  body.task-mail #layout-content > .header {
    min-height: 54px !important;
  }
}

/* Futureproofed Mail product finish, 2026-07-02.
   This final layer wins over older Roundcube skin experiments. */
:root {
  --fpx-ink: #101524;
  --fpx-text: #263244;
  --fpx-muted: #738196;
  --fpx-soft: #f5f8fc;
  --fpx-soft-2: #edf3f8;
  --fpx-card: #ffffff;
  --fpx-line: #d8e4ef;
  --fpx-cyan: #0694c6;
  --fpx-blue: #2563eb;
  --fpx-violet: #635bff;
  --fpx-mint: #16b89e;
  --fpx-amber: #f4a928;
  --fpx-shadow: 0 28px 70px -48px rgba(16, 21, 36, 0.62);
  --fpx-shadow-soft: 0 14px 36px -28px rgba(16, 21, 36, 0.46);
}

body.task-login,
html.dark-mode body.task-login {
  min-height: 100vh !important;
  background:
    linear-gradient(120deg, rgba(6, 148, 198, 0.1), transparent 34%),
    linear-gradient(300deg, rgba(99, 91, 255, 0.08), transparent 42%),
    #f8fbff !important;
  color: var(--fpx-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.task-login #layout,
html.dark-mode body.task-login #layout {
  min-height: 100vh !important;
  background:
    linear-gradient(rgba(16, 21, 36, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 21, 36, 0.035) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}

body.task-login #layout-content.fpmail-auth,
html.dark-mode body.task-login #layout-content.fpmail-auth {
  min-height: 100vh !important;
  padding: clamp(28px, 5vw, 68px) !important;
}

body.task-login .fpmail-login-shell,
html.dark-mode body.task-login .fpmail-login-shell {
  width: min(1120px, 100%) !important;
  min-height: min(720px, calc(100vh - 96px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important;
  grid-template-rows: auto 1fr auto !important;
  column-gap: clamp(44px, 8vw, 96px) !important;
  align-items: center !important;
  margin: 0 auto !important;
}

body.task-login #logo,
html.dark-mode body.task-login #logo {
  grid-column: 1 / -1 !important;
  width: 214px !important;
  max-width: 42vw !important;
  margin: 0 0 clamp(42px, 6vw, 78px) !important;
  filter: drop-shadow(0 14px 22px rgba(6, 148, 198, 0.12)) !important;
}

body.task-login .fpmail-login-intro,
html.dark-mode body.task-login .fpmail-login-intro {
  max-width: 560px !important;
  padding: 0 !important;
}

body.task-login .fpmail-status,
html.dark-mode body.task-login .fpmail-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 32px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(22, 184, 158, 0.26) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: #276257 !important;
  box-shadow: var(--fpx-shadow-soft) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.task-login .fpmail-status span,
html.dark-mode body.task-login .fpmail-status span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--fpx-mint) !important;
  box-shadow: 0 0 0 5px rgba(22, 184, 158, 0.12) !important;
}

body.task-login .fpmail-login-title,
html.dark-mode body.task-login .fpmail-login-title {
  margin: 38px 0 0 !important;
  max-width: 640px !important;
  color: var(--fpx-ink) !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(68px, 8.6vw, 126px) !important;
  font-weight: 400 !important;
  line-height: 0.84 !important;
  letter-spacing: 0 !important;
}

body.task-login .fpmail-login-title em,
html.dark-mode body.task-login .fpmail-login-title em {
  display: inline-block !important;
  color: transparent !important;
  background: linear-gradient(100deg, var(--fpx-cyan) 0%, var(--fpx-blue) 48%, var(--fpx-violet) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-style: italic !important;
}

body.task-login .fpmail-login-intro p,
html.dark-mode body.task-login .fpmail-login-intro p {
  max-width: 430px !important;
  margin: 28px 0 0 !important;
  color: var(--fpx-text) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

body.task-login #login-form,
html.dark-mode body.task-login #login-form {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 !important;
  padding: 34px !important;
  border: 1px solid rgba(216, 228, 239, 0.96) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--fpx-shadow) !important;
  backdrop-filter: blur(18px) !important;
}

body.task-login #login-form:before,
html.dark-mode body.task-login #login-form:before {
  content: "Sign in to Futureproofed Mail" !important;
  display: block !important;
  margin: 0 0 24px !important;
  color: var(--fpx-ink) !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td,
html.dark-mode body.task-login #login-form table,
html.dark-mode body.task-login #login-form tbody,
html.dark-mode body.task-login #login-form tr,
html.dark-mode body.task-login #login-form td {
  display: block !important;
  width: 100% !important;
}

body.task-login #login-form td.title,
html.dark-mode body.task-login #login-form td.title {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--fpx-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.task-login #login-form td.input,
html.dark-mode body.task-login #login-form td.input {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

body.task-login #login-form input.form-control,
html.dark-mode body.task-login #login-form input.form-control {
  width: 100% !important;
  height: 56px !important;
  padding: 0 18px !important;
  border: 1px solid #cfddea !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--fpx-ink) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.task-login #login-form input.form-control:focus,
html.dark-mode body.task-login #login-form input.form-control:focus {
  border-color: rgba(6, 148, 198, 0.86) !important;
  box-shadow: 0 0 0 4px rgba(6, 148, 198, 0.13) !important;
  outline: 0 !important;
}

body.task-login .fpmail-login-options,
html.dark-mode body.task-login .fpmail-login-options {
  margin: 8px 0 20px !important;
  color: var(--fpx-muted) !important;
  font-size: 13px !important;
}

body.task-login .fpmail-login-options a,
html.dark-mode body.task-login .fpmail-login-options a {
  color: var(--fpx-ink) !important;
  font-weight: 850 !important;
}

body.task-login #login-form .formbuttons,
html.dark-mode body.task-login #login-form .formbuttons {
  margin: 0 !important;
}

body.task-login #rcmloginsubmit,
html.dark-mode body.task-login #rcmloginsubmit {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 56px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #070b16 0%, #101524 52%, #123b55 100%) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 20px 42px -28px rgba(16, 21, 36, 0.92) !important;
}

body.task-login #rcmloginsubmit:before,
html.dark-mode body.task-login #rcmloginsubmit:before {
  content: "Open inbox" !important;
  display: block !important;
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-transform: none !important;
}

body.task-login #rcmloginsubmit:after,
html.dark-mode body.task-login #rcmloginsubmit:after {
  content: "\2192" !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body.task-login #rcmloginsubmit:hover,
html.dark-mode body.task-login #rcmloginsubmit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 24px 48px -28px rgba(16, 21, 36, 1) !important;
}

body.task-login .fpmail-login-meta,
html.dark-mode body.task-login .fpmail-login-meta {
  grid-column: 1 / -1 !important;
  margin: clamp(30px, 5vw, 62px) 0 0 !important;
  color: var(--fpx-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

body.task-mail,
html.dark-mode body.task-mail {
  background: var(--fpx-soft) !important;
  color: var(--fpx-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.task-mail #layout,
html.dark-mode body.task-mail #layout {
  background: var(--fpx-soft) !important;
}

body.task-mail #layout-menu,
html.dark-mode body.task-mail #layout-menu {
  width: 268px !important;
  border-right: 1px solid rgba(216, 228, 239, 0.9) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow: 10px 0 38px -36px rgba(16, 21, 36, 0.55) !important;
}

body.task-mail #layout-menu #logo,
html.dark-mode body.task-mail #layout-menu #logo {
  width: 150px !important;
  max-width: calc(100% - 48px) !important;
  margin: 18px auto 16px !important;
  display: block !important;
}

body.task-mail #taskmenu a.compose,
body.task-mail #taskmenu a.compose:hover,
html.dark-mode body.task-mail #taskmenu a.compose,
html.dark-mode body.task-mail #taskmenu a.compose:hover {
  height: 44px !important;
  margin: 0 12px 18px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #070b16, #101524) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 36px -28px rgba(16, 21, 36, 0.9) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.task-mail.action-none #layout-sidebar .scroller:before,
body.task-mail.action-show #layout-sidebar .scroller:before,
html.dark-mode body.task-mail.action-none #layout-sidebar .scroller:before,
html.dark-mode body.task-mail.action-show #layout-sidebar .scroller:before {
  content: "Folders" !important;
  margin: 0 0 10px !important;
  padding: 0 12px !important;
  color: var(--fpx-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.task-mail.action-none #layout-sidebar .scroller:after,
body.task-mail.action-show #layout-sidebar .scroller:after,
html.dark-mode body.task-mail.action-none #layout-sidebar .scroller:after,
html.dark-mode body.task-mail.action-show #layout-sidebar .scroller:after {
  display: none !important;
  content: none !important;
}

body.task-mail .folderlist li > a,
body.task-mail .treelist li > a,
html.dark-mode body.task-mail .folderlist li > a,
html.dark-mode body.task-mail .treelist li > a {
  min-height: 42px !important;
  margin: 0 8px 5px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  color: var(--fpx-text) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

body.task-mail .folderlist li.selected > a,
body.task-mail .treelist li.selected > a,
html.dark-mode body.task-mail .folderlist li.selected > a,
html.dark-mode body.task-mail .treelist li.selected > a {
  background: linear-gradient(90deg, rgba(6, 148, 198, 0.14), rgba(99, 91, 255, 0.08)) !important;
  color: var(--fpx-ink) !important;
  box-shadow: inset 4px 0 0 var(--fpx-cyan) !important;
}

body.task-mail #taskmenu .special-buttons:before,
html.dark-mode body.task-mail #taskmenu .special-buttons:before {
  content: "Futureproofed Mail\A futureproofed.agency" !important;
  min-height: 58px !important;
  border-radius: 9px !important;
}

body.task-mail.action-none #layout-list,
body.task-mail.action-show #layout-list,
html.dark-mode body.task-mail.action-none #layout-list,
html.dark-mode body.task-mail.action-show #layout-list {
  width: 412px !important;
  min-width: 412px !important;
  border-right: 1px solid rgba(216, 228, 239, 0.88) !important;
  background: #fbfdff !important;
}

body.task-mail #layout-list > .header,
html.dark-mode body.task-mail #layout-list > .header {
  min-height: 62px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid rgba(216, 228, 239, 0.9) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 36px -36px rgba(16, 21, 36, 0.42) !important;
}

body.task-mail #layout-list > .header .header-title,
html.dark-mode body.task-mail #layout-list > .header .header-title {
  color: var(--fpx-ink) !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
}

body.task-mail.action-none .searchbar,
body.task-mail.action-show .searchbar,
html.dark-mode body.task-mail.action-none .searchbar,
html.dark-mode body.task-mail.action-show .searchbar {
  position: relative !important;
  display: block !important;
  height: auto !important;
  margin: 12px 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

body.task-mail.action-none .searchbar:before,
body.task-mail.action-none .searchbar:after,
body.task-mail.action-show .searchbar:before,
body.task-mail.action-show .searchbar:after,
html.dark-mode body.task-mail.action-none .searchbar:before,
html.dark-mode body.task-mail.action-none .searchbar:after,
html.dark-mode body.task-mail.action-show .searchbar:before,
html.dark-mode body.task-mail.action-show .searchbar:after {
  display: none !important;
  content: none !important;
}

body.task-mail.action-none .searchbar form,
body.task-mail.action-show .searchbar form,
html.dark-mode body.task-mail.action-none .searchbar form,
html.dark-mode body.task-mail.action-show .searchbar form {
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(207, 221, 234, 0.98) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px -30px rgba(16, 21, 36, 0.52) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.task-mail.action-none .searchbar form:before,
body.task-mail.action-show .searchbar form:before,
html.dark-mode body.task-mail.action-none .searchbar form:before,
html.dark-mode body.task-mail.action-show .searchbar form:before {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 11px 0 2px !important;
  border: 2px solid var(--fpx-muted) !important;
  border-radius: 999px !important;
  box-shadow: 6px 6px 0 -4px var(--fpx-muted) !important;
  background: transparent !important;
}

body.task-mail .searchbar input,
body.task-mail .searchbar .form-control,
html.dark-mode body.task-mail .searchbar input,
html.dark-mode body.task-mail .searchbar .form-control {
  height: 42px !important;
  min-width: 0 !important;
  color: var(--fpx-ink) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

body.task-mail #messagelist-content,
html.dark-mode body.task-mail #messagelist-content {
  padding: 0 10px 14px !important;
  background: transparent !important;
}

body.task-mail .messagelist,
html.dark-mode body.task-mail .messagelist {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  background: transparent !important;
}

body.task-mail .messagelist tbody tr td,
html.dark-mode body.task-mail .messagelist tbody tr td {
  padding: 14px 13px !important;
  border-top: 1px solid rgba(216, 228, 239, 0.9) !important;
  border-bottom: 1px solid rgba(216, 228, 239, 0.9) !important;
  background: #ffffff !important;
  color: var(--fpx-text) !important;
  font-size: 14px !important;
  box-shadow: 0 12px 26px -30px rgba(16, 21, 36, 0.7) !important;
}

body.task-mail .messagelist tbody tr td:first-child,
html.dark-mode body.task-mail .messagelist tbody tr td:first-child {
  border-left: 1px solid rgba(216, 228, 239, 0.9) !important;
  border-radius: 10px 0 0 10px !important;
}

body.task-mail .messagelist tbody tr td:last-child,
html.dark-mode body.task-mail .messagelist tbody tr td:last-child {
  border-right: 1px solid rgba(216, 228, 239, 0.9) !important;
  border-radius: 0 10px 10px 0 !important;
}

body.task-mail .messagelist tbody tr:hover td,
html.dark-mode body.task-mail .messagelist tbody tr:hover td {
  border-color: rgba(6, 148, 198, 0.34) !important;
  background: #f8fcff !important;
}

body.task-mail .messagelist tbody tr.selected td,
body.task-mail .messagelist tbody tr.focused td,
html.dark-mode body.task-mail .messagelist tbody tr.selected td,
html.dark-mode body.task-mail .messagelist tbody tr.focused td {
  border-color: rgba(6, 148, 198, 0.36) !important;
  background:
    linear-gradient(90deg, rgba(6, 148, 198, 0.12), rgba(99, 91, 255, 0.1)),
    #ffffff !important;
}

body.task-mail .messagelist tr.unread td,
body.task-mail .messagelist tr.unread td.subject,
body.task-mail .messagelist tr.unread span.subject,
html.dark-mode body.task-mail .messagelist tr.unread td,
html.dark-mode body.task-mail .messagelist tr.unread td.subject,
html.dark-mode body.task-mail .messagelist tr.unread span.subject {
  color: var(--fpx-ink) !important;
  font-weight: 850 !important;
}

body.task-mail #layout-content,
body.task-mail.action-none #layout-content,
body.task-mail.action-show #layout-content,
html.dark-mode body.task-mail #layout-content,
html.dark-mode body.task-mail.action-none #layout-content,
html.dark-mode body.task-mail.action-show #layout-content {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(245, 248, 252, 0.96)),
    var(--fpx-soft) !important;
}

body.task-mail #layout-content > .header,
html.dark-mode body.task-mail #layout-content > .header {
  min-height: 62px !important;
  padding: 0 18px !important;
  border-bottom: 1px solid rgba(216, 228, 239, 0.88) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 36px -36px rgba(16, 21, 36, 0.42) !important;
}

body.task-mail #layout-content .toolbar a.button,
body.task-mail #mailtoolbar a.button,
html.dark-mode body.task-mail #layout-content .toolbar a.button,
html.dark-mode body.task-mail #mailtoolbar a.button {
  min-width: 64px !important;
  height: 48px !important;
  border-radius: 10px !important;
  color: var(--fpx-muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body.task-mail #layout-content .toolbar a.button:not(.disabled):hover,
body.task-mail #mailtoolbar a.button:not(.disabled):hover,
html.dark-mode body.task-mail #layout-content .toolbar a.button:not(.disabled):hover,
html.dark-mode body.task-mail #mailtoolbar a.button:not(.disabled):hover {
  background: rgba(6, 148, 198, 0.09) !important;
  color: var(--fpx-blue) !important;
}

body.task-mail .iframe-wrapper,
html.dark-mode body.task-mail .iframe-wrapper {
  margin: 18px !important;
  border: 1px solid rgba(216, 228, 239, 0.9) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: var(--fpx-shadow-soft) !important;
  overflow: hidden !important;
}

body.task-mail #messagecontframe,
html.dark-mode body.task-mail #messagecontframe {
  background: #ffffff !important;
}

body.task-mail .floating-action-buttons a.button,
html.dark-mode body.task-mail .floating-action-buttons a.button {
  width: 66px !important;
  height: 66px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--fpx-cyan), var(--fpx-blue), var(--fpx-violet)) !important;
  box-shadow: 0 22px 42px -24px rgba(37, 99, 235, 0.78) !important;
}

@media screen and (max-width: 880px) {
  body.task-login #layout-content.fpmail-auth,
  html.dark-mode body.task-login #layout-content.fpmail-auth {
    padding: 22px 18px !important;
  }

  body.task-login .fpmail-login-shell,
  html.dark-mode body.task-login .fpmail-login-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: auto !important;
  }

  body.task-login #logo,
  html.dark-mode body.task-login #logo {
    width: 168px !important;
    margin: 0 0 34px !important;
  }

  body.task-login .fpmail-login-title,
  html.dark-mode body.task-login .fpmail-login-title {
    font-size: clamp(56px, 16vw, 78px) !important;
    line-height: 0.88 !important;
  }

  body.task-login .fpmail-login-intro p,
  html.dark-mode body.task-login .fpmail-login-intro p {
    font-size: 16px !important;
  }

  body.task-login #login-form,
  html.dark-mode body.task-login #login-form {
    max-width: none !important;
    margin-top: 28px !important;
    padding: 24px !important;
  }

  body.task-login .fpmail-login-meta,
  html.dark-mode body.task-login .fpmail-login-meta {
    margin-top: 24px !important;
  }

  body.task-mail.action-none #layout-list,
  body.task-mail.action-show #layout-list,
  html.dark-mode body.task-mail.action-none #layout-list,
  html.dark-mode body.task-mail.action-show #layout-list {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.task-mail #layout-list > .header,
  body.task-mail #layout-content > .header,
  html.dark-mode body.task-mail #layout-list > .header,
  html.dark-mode body.task-mail #layout-content > .header {
    min-height: 58px !important;
  }

  body.task-mail.action-none .searchbar,
  body.task-mail.action-show .searchbar {
    margin: 10px 12px !important;
  }

  body.task-mail .messagelist,
  html.dark-mode body.task-mail .messagelist {
    border-spacing: 0 7px !important;
  }

  body.task-mail .messagelist tbody tr td,
  html.dark-mode body.task-mail .messagelist tbody tr td {
    padding: 12px 12px !important;
    font-size: 14px !important;
  }

  body.task-mail .iframe-wrapper,
  html.dark-mode body.task-mail .iframe-wrapper {
    margin: 10px !important;
    border-radius: 10px !important;
  }
}