: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;
  }
}

/* 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;
}