:root {
  --ag-blue: #1c75ff;
  --ag-blue-dark: #0f5ed7;
  --ag-blue-soft: #eaf2ff;
  --ag-ink: #101828;
  --ag-muted: #667085;
  --ag-line: #d9e2ef;
  --ag-panel: #ffffff;
  --ag-canvas: #f5f7fb;
  --ag-hover: #eef4ff;
  --ag-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
}

html,
body {
  background: var(--ag-canvas);
  color: var(--ag-ink);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

#layout {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 247, 251, 0.92)),
    var(--ag-canvas);
}

#layout > div > .header {
  min-height: 60px;
  height: 60px;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--ag-line);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ag-ink);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}

#layout > div > .header .header-title {
  margin: 0;
  padding: 0 0.75rem;
  color: var(--ag-ink);
  font-weight: 650;
  text-align: left;
}

#layout > div > .header a.button,
#layout > div > .header .toolbar a,
a.toolbar-button,
button.btn {
  border-radius: 10px;
}

#layout-menu {
  border-right: 1px solid var(--ag-line);
  background: #f6f8fc !important;
  box-shadow: none;
}

#layout-menu .popover-header {
  min-height: 72px;
  height: 72px;
  border-bottom: 1px solid var(--ag-line);
  background: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#layout-menu #logo,
.task-login #logo {
  max-width: 168px;
  max-height: 78px;
  object-fit: contain;
}

#taskmenu {
  padding: 0.6rem 0.5rem;
}

#taskmenu a {
  border-radius: 14px;
  color: #475467;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#taskmenu a:hover,
#taskmenu a:focus {
  background: var(--ag-hover);
  color: var(--ag-blue-dark);
}

#taskmenu a.selected,
#taskmenu a.selected:hover {
  background: var(--ag-blue-soft);
  color: var(--ag-blue-dark);
  box-shadow: inset 3px 0 0 var(--ag-blue);
}

#taskmenu .action-buttons a.compose {
  margin-bottom: 0.65rem;
  background: var(--ag-blue);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(28, 117, 255, 0.22);
}

#taskmenu .action-buttons a.compose:hover,
#taskmenu .action-buttons a.compose.selected {
  background: var(--ag-blue-dark);
  color: #ffffff;
}

#taskmenu .special-buttons {
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.65rem;
  background: transparent;
}

#layout-sidebar {
  flex: 0 0 260px;
  max-width: 260px;
  min-width: 236px;
  border-right: 1px solid var(--ag-line);
  background: #f8fbff;
}

#layout-sidebar.sidebar-right {
  flex: 0 0 300px;
  max-width: 320px;
  border-left: 1px solid var(--ag-line);
  background: #ffffff;
}

#folderlist-content,
#layout-sidebar .scroller {
  padding: 0.8rem 0.7rem;
}

.listing li,
.listing tbody td {
  border-bottom-color: #eef2f7;
}

.folderlist li,
ul.treelist li {
  margin: 0.08rem 0;
  border-bottom: 0;
}

.folderlist li > a,
ul.treelist li > a,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
  min-height: 36px;
  line-height: 36px;
  border-left: 0 !important;
  border-radius: 18px;
  color: #344054;
}

.folderlist li > a:hover,
ul.treelist li > a:hover {
  background: #eef4ff;
  color: var(--ag-blue-dark);
}

.folderlist li.selected > a,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
  background: var(--ag-blue-soft);
  color: var(--ag-blue-dark);
  font-weight: 650;
}

.folderlist li.mailbox .unreadcount {
  margin: 7px 8px;
  border-radius: 999px;
  background: var(--ag-blue);
}

#quotadisplay {
  color: var(--ag-muted);
}

#layout-list {
  flex: 0 0 420px;
  max-width: 440px;
  min-width: 340px;
  border-right: 1px solid var(--ag-line);
  background: #ffffff;
}

.searchbar {
  height: 44px;
  min-height: 44px;
  line-height: 44px;
  margin: 0.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #eef3f9;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.02);
}

.searchbar:focus-within {
  border-color: rgba(28, 117, 255, 0.45);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08);
}

.searchbar form:before,
.searchbar a:before {
  height: 44px;
  line-height: 44px;
  color: #667085;
}

.searchbar input {
  color: var(--ag-ink);
  font-size: 0.95rem;
}

#messagelist-content {
  padding: 0 0.45rem 0.6rem;
}

.messagelist {
  border-collapse: separate;
  border-spacing: 0 4px;
}

.messagelist tbody tr td {
  background: #ffffff;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #eef2f7;
}

.messagelist tbody tr:hover td {
  background: #f8fbff;
  border-bottom-color: #d8e6ff;
}

.messagelist tr.selected td {
  background: var(--ag-blue-soft);
  color: var(--ag-ink);
}

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

.messagelist td.subject span.fromto,
.messagelist td.subject span.date,
.messagelist td.subject span.size {
  color: var(--ag-muted);
}

.messagelist td.subject span.subject a {
  color: var(--ag-ink);
}

#layout-content {
  background: var(--ag-canvas);
}

#layout-content .iframe-wrapper {
  margin: 0.75rem;
  border: 1px solid var(--ag-line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--ag-shadow);
  overflow: hidden;
}

#messagecontframe,
iframe {
  background: #ffffff;
}

.menu.toolbar a,
a.button,
button.btn,
.btn,
input.button {
  border-radius: 10px;
}

.btn-primary,
button.mainaction,
input.button.mainaction,
#rcmloginsubmit {
  border-color: var(--ag-blue);
  background: var(--ag-blue);
  color: #ffffff;
}

.btn-primary:hover,
button.mainaction:hover,
input.button.mainaction:hover,
#rcmloginsubmit:hover {
  border-color: var(--ag-blue-dark);
  background: var(--ag-blue-dark);
}

.popupmenu,
.popover,
.modal-content {
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  box-shadow: var(--ag-shadow);
}

.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected {
  background: var(--ag-blue);
}

.form-control,
.custom-select,
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  border-color: #cfd8e6;
  border-radius: 10px;
}

.form-control:focus,
.custom-select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: rgba(28, 117, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(28, 117, 255, 0.12);
}

.task-login #layout {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 12%, rgba(28, 117, 255, 0.11), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #eef5ff 48%, #f8fbff 100%);
}

.task-login #layout-content {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.task-login #logo {
  top: auto;
  display: block;
  margin: 0 auto 1.6rem;
}

#login-form {
  top: auto;
  width: min(92vw, 390px);
  max-width: 390px;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid rgba(217, 226, 239, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.14);
}

#login-form .form-control {
  min-height: 44px;
}

#login-footer > div {
  background: transparent;
}

.task-compose #layout-content {
  background: #ffffff;
}

#compose-content {
  padding: 0.9rem 1.2rem 1.2rem;
  background: #ffffff;
}

.compose-headers {
  max-width: 1120px;
}

.compose-headers .form-group {
  margin-bottom: 0.45rem;
}

.compose-headers label {
  color: var(--ag-muted);
  font-weight: 600;
}

.html-editor .editor-toolbar,
div.tox .tox-toolbar-overlord,
div.tox .tox-toolbar__primary {
  border-color: #e5eaf2;
  background: #f8fbff;
}

div.tox.tox-tinymce,
.mce-container,
.mce-panel {
  border-radius: 14px;
}

.attachmentslist li,
.file-upload {
  border-radius: 14px;
}

@media screen and (min-width: 1025px) {
  #taskmenu a {
    width: auto;
    min-height: 48px;
    padding: 0.3rem 0.4rem;
  }

  #taskmenu a:before {
    float: none;
  }
}

@media screen and (max-width: 1024px) {
  #layout-sidebar,
  #layout-list {
    max-width: none;
  }

  #layout-content .iframe-wrapper {
    margin: 0;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

html.dark-mode {
  --ag-ink: #e5edf7;
  --ag-muted: #aab8ca;
  --ag-line: #263447;
  --ag-panel: #111827;
  --ag-canvas: #0b1220;
  --ag-hover: #14213a;
  --ag-blue-soft: #132f5f;
  --ag-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-content {
  background: var(--ag-canvas);
  color: var(--ag-ink);
}

html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar {
  background: #0f172a;
}

html.dark-mode #layout-list,
html.dark-mode #layout > div > .header,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-content .iframe-wrapper,
html.dark-mode #login-form {
  background: #111827;
  border-color: var(--ag-line);
}

html.dark-mode .searchbar {
  background: #172033;
}

html.dark-mode .searchbar:focus-within,
html.dark-mode .messagelist tbody tr td {
  background: #111827;
}

html.dark-mode .messagelist tbody tr:hover td,
html.dark-mode .folderlist li > a:hover,
html.dark-mode ul.treelist li > a:hover {
  background: #172033;
}

html.dark-mode .messagelist td.subject span.subject a,
html.dark-mode .messagelist tr.unread td.subject span.subject {
  color: #f8fbff;
}

@media screen and (min-width: 481px) {
  #layout-menu {
    width: 96px;
    background: #f6f8fc;
  }
}

@media screen and (min-width: 1025px) {
  #layout-menu {
    width: 112px;
  }
}

#layout-menu .popover-header {
  padding: 0 0.45rem;
}

#layout-menu #logo {
  width: 92px !important;
  max-width: 92px !important;
  max-height: 50px !important;
  height: auto !important;
  display: block;
  object-fit: contain;
  opacity: 1;
}

#taskmenu {
  display: flex;
  min-height: calc(100vh - 72px);
  flex-direction: column;
  gap: 0.22rem;
}

#taskmenu a {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 0 !important;
  letter-spacing: 0;
}

#taskmenu a:before {
  margin: 0 auto 0.12rem;
  color: inherit;
}

#taskmenu span.inner {
  color: inherit;
  line-height: 1.15;
}

#taskmenu .action-buttons a.compose {
  min-height: 58px;
  margin: 0.25rem 0 0.85rem;
  border-radius: 18px;
  background: #c2e7ff;
  color: #001d35;
  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.18);
}

#taskmenu .action-buttons a.compose:hover,
#taskmenu .action-buttons a.compose.selected {
  background: #b3dcff;
  color: #001d35;
  box-shadow: 0 4px 14px rgba(60, 64, 67, 0.2);
}

#taskmenu a.compose .inner {
  font-size: 0;
}

#taskmenu a.compose .inner:after {
  content: "Escrever";
  font-size: 0.78rem;
  font-weight: 650;
}

#taskmenu a.selected,
#taskmenu a.selected:hover {
  background: #d3e3fd;
  color: #041e49;
  box-shadow: none;
}

#taskmenu .special-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

#layout-sidebar {
  flex-basis: 282px;
  max-width: 282px;
  background: #f6f8fc;
}

#layout-sidebar > .header {
  background: #f6f8fc;
}

#layout-sidebar > .header .header-title {
  color: #1f2937;
  font-size: 0.95rem;
  font-weight: 700;
}

#folderlist-content,
#layout-sidebar .scroller {
  padding: 0.65rem 0.75rem 1rem;
}

.folderlist li > a,
ul.treelist li > a,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
  min-height: 34px;
  line-height: 34px;
  padding-right: 0.8rem;
  border-radius: 0 18px 18px 0;
}

.folderlist li.inbox > a,
.folderlist li.sent > a,
.folderlist li.drafts > a,
.folderlist li.trash > a,
.folderlist li.junk > a {
  font-weight: 600;
}

.folderlist li.selected > a,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
  background: #d3e3fd;
  color: #041e49;
}

.folderlist li.mailbox .unreadcount {
  min-width: 1.75rem;
  margin: 6px 8px;
  background: #0b57d0;
  font-size: 0.78rem;
}

#layout-list {
  flex-basis: 520px;
  max-width: 540px;
  min-width: 420px;
  background: #ffffff;
}

#messagelist-header {
  background: #ffffff;
}

#messagelist-header .toolbar.menu a {
  min-width: 38px;
  height: 38px;
  color: #5f6368;
}

#messagelist-header .toolbar.menu a:hover,
#messagelist-header a.button:hover {
  background: #f1f3f4;
  color: #202124;
}

.searchbar {
  height: 52px;
  min-height: 52px;
  line-height: 52px;
  margin: 0.85rem 1rem 0.6rem;
  background: #edf2fa;
  border-radius: 26px;
}

.searchbar form:before,
.searchbar a:before {
  height: 52px;
  line-height: 52px;
}

.searchbar input {
  font-size: 1rem;
}

.searchbar input::placeholder {
  color: #5f6368;
}

#messagelist-content {
  padding: 0 0.75rem 0.65rem;
}

.messagelist {
  border-spacing: 0 6px;
}

.messagelist td {
  font-size: 0.95rem !important;
}

.messagelist tbody tr td {
  min-height: 64px;
  background: #ffffff;
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #eef2f7;
}

.messagelist tbody tr td:first-child {
  border-left: 1px solid #eef2f7 !important;
  border-radius: 14px 0 0 14px;
}

.messagelist tbody tr td:last-child {
  border-right: 1px solid #eef2f7;
  border-radius: 0 14px 14px 0;
}

.messagelist tbody tr:hover td {
  background: #f8fbff;
  border-color: #d8e6ff;
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.05);
}

.messagelist tr.selected td {
  background: #d3e3fd;
  border-color: #c5d7f6;
}

.messagelist td.selection {
  padding-left: 0.7rem;
}

.messagelist td.subject {
  padding: 0.48rem 0.6rem;
}

.messagelist td.subject span {
  line-height: 1.45rem;
}

.messagelist td.subject span.fromto {
  color: #3c4043;
  font-size: 0.95rem;
  font-weight: 650;
}

.messagelist tr.unread td.subject span.fromto,
.messagelist tr.unread td.subject span.subject {
  color: #202124;
  font-weight: 750;
}

.messagelist td.subject span.subject {
  color: #3c4043;
  font-size: 0.94rem;
}

.messagelist td.subject span.date {
  color: #5f6368;
  font-size: 0.82rem;
  font-weight: 600;
}

.messagelist td.flags {
  width: 2.25em;
}

.messagelist span.flagged:before,
.messagelist tr:hover span.unflagged:before {
  color: #fbbc04;
}

.messagelist td.subject span.msgicon.status.unread:before {
  color: #0b57d0;
}

.menu.pagenav {
  height: 42px;
  min-height: 42px;
  padding: 0 0.8rem;
  border-top: 1px solid #eef2f7;
  color: #5f6368;
}

.menu.pagenav a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.menu.pagenav a:hover {
  background: #f1f3f4;
}

#layout-content .iframe-wrapper {
  margin: 0.9rem 1rem 1rem;
  border-radius: 18px;
}

#layout-content > .header {
  background: #ffffff;
}

#layout-content > .header .toolbar.menu a {
  min-width: 38px;
  height: 38px;
  color: #5f6368;
}

#layout-content > .header .toolbar.menu a:hover {
  background: #f1f3f4;
  color: #202124;
}

#messagestack {
  right: 1.4rem;
  bottom: 1.4rem;
}

#messagestack div {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.22);
}

.task-compose #layout-content > .header {
  min-height: 64px;
  height: 64px;
  border-bottom-color: #edf2f7;
}

#compose-content {
  padding: 1rem 1.4rem 1.4rem;
  background: #ffffff;
}

.compose-headers {
  max-width: 1180px;
  margin: 0 auto;
}

.compose-headers .form-group {
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid #eef2f7;
}

.compose-headers label {
  color: #5f6368;
  font-size: 0.9rem;
  font-weight: 600;
}

.compose-headers .form-control,
.compose-headers input,
.compose-headers textarea,
.compose-headers select {
  border-color: transparent;
  box-shadow: none;
}

.compose-headers .form-control:focus,
.compose-headers input:focus,
.compose-headers textarea:focus {
  border-color: transparent;
  box-shadow: none;
}

div.tox.tox-tinymce {
  border: 1px solid #e5eaf2;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.06);
}

div.tox .tox-toolbar-overlord,
div.tox .tox-toolbar__primary,
.html-editor .editor-toolbar {
  background: #ffffff;
}

button.send,
a.send,
.menu.toolbar a.send {
  background: #0b57d0 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0 1rem !important;
}

.floating-action-buttons a.button.compose {
  width: 4.25rem;
  height: 4.25rem;
  background: #c2e7ff;
  color: #001d35;
  box-shadow: 0 6px 18px rgba(60, 64, 67, 0.25);
}

.floating-action-buttons a.button.compose:before {
  width: 4.25rem;
  height: 4.25rem;
  line-height: 4.25rem;
}

#login-form {
  border-radius: 28px;
}

#login-form:before {
  content: "Acesse seu e-mail ArkGenesys";
  display: block;
  margin: 0 0 1.2rem;
  color: #1f2937;
  font-size: 1.08rem;
  font-weight: 700;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar {
  background: #111827 !important;
}

html.dark-mode #layout-menu .popover-header {
  background: #111827 !important;
  border-bottom-color: #263447;
  min-height: 82px;
  height: 82px;
  padding: 0 0.15rem;
}

html.dark-mode #layout-menu #logo {
  width: 108px !important;
  max-width: 108px !important;
  height: auto !important;
  max-height: 62px !important;
  opacity: 1 !important;
  padding: 0 !important;
  filter: drop-shadow(0 0 8px rgba(146, 190, 255, .14));
}

html.dark-mode #layout-list,
html.dark-mode #messagelist-header,
html.dark-mode #layout-content > .header {
  background: #0f172a;
}

html.dark-mode .messagelist tbody tr td {
  border-color: #263447;
}

html.dark-mode .messagelist tr.selected td,
html.dark-mode .folderlist li.selected > a,
html.dark-mode ul.treelist li.selected > a,
html.dark-mode ul.treelist li.selected > div > a {
  background: #1d3b68;
  color: #dbeafe;
}

#messagelist-header,
#layout-content > .header {
  height: 56px;
  min-height: 56px;
  overflow: visible;
  align-items: center;
}

#messagelist-header .toolbar.menu,
#layout-content > .header .toolbar.menu,
#mailtoolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  overflow: visible;
}

#messagelist-header .toolbar.menu a,
#layout-content > .header .toolbar.menu a,
#messagelist-header a.toolbar-button,
#layout-content > .header a.toolbar-button {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 38px !important;
  color: #5f6368 !important;
  background: transparent !important;
  overflow: visible !important;
}

#messagelist-header .toolbar.menu a:before,
#layout-content > .header .toolbar.menu a:before,
#messagelist-header a.toolbar-button:before,
#layout-content > .header a.toolbar-button:before {
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
  color: inherit !important;
  font-size: 1rem !important;
  text-align: center;
}

#messagelist-header .toolbar.menu a .inner,
#layout-content > .header .toolbar.menu a .inner,
#messagelist-header a.toolbar-button .inner,
#layout-content > .header a.toolbar-button .inner {
  display: none !important;
}

#messagelist-header .toolbar.menu a:not(.disabled):hover,
#layout-content > .header .toolbar.menu a:not(.disabled):hover,
#messagelist-header a.toolbar-button:not(.disabled):hover,
#layout-content > .header a.toolbar-button:not(.disabled):hover {
  background: #f1f3f4 !important;
  color: #202124 !important;
}

#messagelist-header .toolbar.menu a:not(.disabled):focus,
#layout-content > .header .toolbar.menu a:not(.disabled):focus,
#messagelist-header a.toolbar-button:not(.disabled):focus,
#layout-content > .header a.toolbar-button:not(.disabled):focus {
  background: #e8f0fe !important;
  color: #1967d2 !important;
  box-shadow: none !important;
}

#messagelist-header .toolbar.menu a.disabled,
#layout-content > .header .toolbar.menu a.disabled,
#messagelist-header a.toolbar-button.disabled,
#layout-content > .header a.toolbar-button.disabled {
  color: #b0b7c3 !important;
  opacity: 1 !important;
}

#messagelist-header .toolbar.menu .dropbutton,
#layout-content > .header .toolbar.menu .dropbutton {
  height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: 19px;
  overflow: visible;
}

#messagelist-header .toolbar.menu .dropbutton:hover,
#layout-content > .header .toolbar.menu .dropbutton:hover {
  background: #f1f3f4 !important;
}

#messagelist-header .toolbar.menu .dropbutton a.dropdown,
#layout-content > .header .toolbar.menu .dropbutton a.dropdown {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
}

#messagelist-header .toolbar.menu .dropbutton a.dropdown:before,
#layout-content > .header .toolbar.menu .dropbutton a.dropdown:before {
  width: 20px !important;
}

html.dark-mode #messagelist-header .toolbar.menu a,
html.dark-mode #layout-content > .header .toolbar.menu a,
html.dark-mode #messagelist-header a.toolbar-button,
html.dark-mode #layout-content > .header a.toolbar-button {
  color: #cbd5e1 !important;
}

html.dark-mode #messagelist-header .toolbar.menu a.disabled,
html.dark-mode #layout-content > .header .toolbar.menu a.disabled,
html.dark-mode #messagelist-header a.toolbar-button.disabled,
html.dark-mode #layout-content > .header a.toolbar-button.disabled {
  color: #667085 !important;
}

html.dark-mode #messagelist-header .toolbar.menu a:not(.disabled):hover,
html.dark-mode #layout-content > .header .toolbar.menu a:not(.disabled):hover,
html.dark-mode #messagelist-header a.toolbar-button:not(.disabled):hover,
html.dark-mode #layout-content > .header a.toolbar-button:not(.disabled):hover,
html.dark-mode #messagelist-header .toolbar.menu .dropbutton:hover,
html.dark-mode #layout-content > .header .toolbar.menu .dropbutton:hover {
  background: rgba(148, 163, 184, .14) !important;
  color: #f8fafc !important;
}

html.dark-mode #messagelist-header .toolbar.menu a:not(.disabled):focus,
html.dark-mode #layout-content > .header .toolbar.menu a:not(.disabled):focus,
html.dark-mode #messagelist-header a.toolbar-button:not(.disabled):focus,
html.dark-mode #layout-content > .header a.toolbar-button:not(.disabled):focus {
  background: rgba(96, 165, 250, .18) !important;
  color: #bfdbfe !important;
}

/* Gmail-like top action bars */
#messagelist-header,
#layout-content > .header {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 10px !important;
  justify-content: flex-start !important;
  gap: 6px;
}

#messagelist-header .header-title,
#layout-content > .header .header-title {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#messagelist-header .toolbar.menu,
#layout-content > .header .toolbar.menu,
#mailtoolbar {
  flex: 0 0 auto !important;
  height: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
}

#layout-content > .header #mailtoolbar {
  margin-left: 0 !important;
}

#messagelist-header .toolbar.menu .spacer,
#layout-content > .header .toolbar.menu .spacer,
#mailtoolbar .spacer {
  width: 8px !important;
  min-width: 8px !important;
}

#messagelist-header .toolbar.menu a,
#layout-content > .header .toolbar.menu a,
#messagelist-header a.toolbar-button,
#layout-content > .header a.toolbar-button,
#mailtoolbar a {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5f6368 !important;
  background: transparent !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

#messagelist-header .toolbar.menu a:before,
#layout-content > .header .toolbar.menu a:before,
#messagelist-header a.toolbar-button:before,
#layout-content > .header a.toolbar-button:before,
#mailtoolbar a:before {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  float: none !important;
  color: currentColor !important;
  font-size: 14px !important;
  font-weight: 900;
  text-align: center !important;
  vertical-align: middle !important;
}

#messagelist-header .toolbar.menu a.dropdown,
#layout-content > .header .toolbar.menu a.dropdown,
#mailtoolbar a.dropdown {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
}

#messagelist-header .toolbar.menu a.dropdown:before,
#layout-content > .header .toolbar.menu a.dropdown:before,
#mailtoolbar a.dropdown:before {
  width: 18px !important;
  min-width: 18px !important;
  font-size: 11px !important;
}

#messagelist-header .toolbar.menu a .inner,
#layout-content > .header .toolbar.menu a .inner,
#messagelist-header a.toolbar-button .inner,
#layout-content > .header a.toolbar-button .inner,
#mailtoolbar a .inner {
  display: none !important;
}

#messagelist-header .toolbar.menu .dropbutton,
#layout-content > .header .toolbar.menu .dropbutton,
#mailtoolbar .dropbutton {
  height: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 16px !important;
  background: transparent !important;
  overflow: visible !important;
}

#messagelist-header .toolbar.menu a:not(.disabled):hover,
#layout-content > .header .toolbar.menu a:not(.disabled):hover,
#messagelist-header a.toolbar-button:not(.disabled):hover,
#layout-content > .header a.toolbar-button:not(.disabled):hover,
#mailtoolbar a:not(.disabled):hover,
#messagelist-header .toolbar.menu .dropbutton:not(.disabled):hover,
#layout-content > .header .toolbar.menu .dropbutton:not(.disabled):hover,
#mailtoolbar .dropbutton:not(.disabled):hover {
  background: #f1f3f4 !important;
  color: #3c4043 !important;
}

#messagelist-header .toolbar.menu a:not(.disabled):active,
#layout-content > .header .toolbar.menu a:not(.disabled):active,
#mailtoolbar a:not(.disabled):active {
  background: #e8eaed !important;
}

#messagelist-header .toolbar.menu a.disabled,
#layout-content > .header .toolbar.menu a.disabled,
#messagelist-header a.toolbar-button.disabled,
#layout-content > .header a.toolbar-button.disabled,
#mailtoolbar a.disabled {
  color: #bdc1c6 !important;
  opacity: 1 !important;
}

#messagelist-header .toolbar.menu a.selected,
#layout-content > .header .toolbar.menu a.selected,
#mailtoolbar a.selected {
  color: #1a73e8 !important;
  background: #e8f0fe !important;
}

#messagelist-header a.refresh {
  margin-left: 0 !important;
}

#layout-content > .header a.back-list-button {
  display: none !important;
}

html.dark-mode #messagelist-header,
html.dark-mode #layout-content > .header {
  background: #0f172a !important;
  border-bottom-color: #263447 !important;
}

html.dark-mode #messagelist-header .toolbar.menu a,
html.dark-mode #layout-content > .header .toolbar.menu a,
html.dark-mode #messagelist-header a.toolbar-button,
html.dark-mode #layout-content > .header a.toolbar-button,
html.dark-mode #mailtoolbar a {
  color: #9aa4b2 !important;
  background: transparent !important;
}

html.dark-mode #messagelist-header .toolbar.menu a:not(.disabled):hover,
html.dark-mode #layout-content > .header .toolbar.menu a:not(.disabled):hover,
html.dark-mode #messagelist-header a.toolbar-button:not(.disabled):hover,
html.dark-mode #layout-content > .header a.toolbar-button:not(.disabled):hover,
html.dark-mode #mailtoolbar a:not(.disabled):hover,
html.dark-mode #messagelist-header .toolbar.menu .dropbutton:not(.disabled):hover,
html.dark-mode #layout-content > .header .toolbar.menu .dropbutton:not(.disabled):hover,
html.dark-mode #mailtoolbar .dropbutton:not(.disabled):hover {
  background: rgba(154, 164, 178, .16) !important;
  color: #e5e7eb !important;
}

html.dark-mode #messagelist-header .toolbar.menu a.disabled,
html.dark-mode #layout-content > .header .toolbar.menu a.disabled,
html.dark-mode #messagelist-header a.toolbar-button.disabled,
html.dark-mode #layout-content > .header a.toolbar-button.disabled,
html.dark-mode #mailtoolbar a.disabled {
  color: #526070 !important;
  opacity: 1 !important;
}

html.dark-mode #messagelist-header .toolbar.menu a.selected,
html.dark-mode #layout-content > .header .toolbar.menu a.selected,
html.dark-mode #mailtoolbar a.selected {
  color: #8ab4f8 !important;
  background: rgba(138, 180, 248, .16) !important;
}

#messagelist-header .toolbar.menu a.select:before,
#layout-content > .header .toolbar.menu a.select:before,
#mailtoolbar a.select:before {
  content: "\f0c8" !important;
  font-weight: 400 !important;
}

#messagelist-header .toolbar.menu a.refresh:before,
#layout-content > .header .toolbar.menu a.refresh:before,
#mailtoolbar a.refresh:before {
  content: "\f021" !important;
}

#messagelist-header .toolbar.menu a.options:before,
#layout-content > .header .toolbar.menu a.options:before,
#mailtoolbar a.options:before {
  content: "\f1de" !important;
}

#messagelist-header .toolbar.menu a.more:before,
#layout-content > .header .toolbar.menu a.more:before,
#mailtoolbar a.more:before {
  content: "\f142" !important;
}