:root {
  --gmail-blue: #1a73e8;
  --gmail-blue-dark: #1558b0;
  --gmail-blue-soft: #d3e3fd;
  --gmail-link: #1a73e8;
  --gmail-red: #d93025;
  --gmail-red-soft: #fce8e6;
  --gmail-page: #f6f8fc;
  --gmail-surface: #ffffff;
  --gmail-surface-muted: #f8fafd;
  --gmail-search: #eaf1fb;
  --gmail-border: #dde3ea;
  --gmail-border-strong: #c9d3df;
  --gmail-text: #202124;
  --gmail-muted: #5f6368;
  --gmail-hover: #edf2fa;
  --gmail-row-border: #edf1f7;
  --gmail-chip-bg: #f1f3f4;
  --gmail-chip-hover: #e8eaed;
  --gmail-compose-bg: #c2e7ff;
  --gmail-compose-text: #0b57d0;
  --gmail-danger-text: #b3261e;
  --gmail-logo-start: #ea4335;
  --gmail-logo-end: #c5221f;
  --gmail-logo-shadow: 0 16px 36px rgba(217, 48, 37, 0.28);
  --gmail-panel-shadow: 0 6px 18px rgba(32, 33, 36, 0.05);
  --gmail-fab-shadow: 0 14px 28px rgba(60, 64, 67, 0.18);
  --gmail-alert-bg: #eef4ff;
  --gmail-alert-border: rgba(26, 115, 232, 0.16);
  --gmail-focus-border: rgba(26, 115, 232, 0.45);
  --gmail-focus-ring: rgba(26, 115, 232, 0.14);
  --gmail-search-focus-border: rgba(26, 115, 232, 0.22);
  --gmail-search-focus-shadow: 0 1px 2px rgba(60, 64, 67, 0.16), 0 6px 18px rgba(60, 64, 67, 0.10);
  --gmail-login-glow-top: rgba(26, 115, 232, 0.14);
  --gmail-login-glow-bottom: rgba(217, 48, 37, 0.12);
  --gmail-login-card: rgba(255, 255, 255, 0.96);
  --gmail-login-shadow: 0 24px 60px rgba(60, 64, 67, 0.14);
  --gmail-input-bg: var(--gmail-surface);
  --gmail-shadow: 0 1px 2px rgba(60, 64, 67, 0.16), 0 8px 24px rgba(60, 64, 67, 0.08);
  --gmail-card-radius: 26px;
  --gmail-inner-radius: 22px;
}

html {
  font-size: 14px;
  color-scheme: light;
}

html.dark-mode {
  --gmail-blue: #8ab4f8;
  --gmail-blue-dark: #a8c7fa;
  --gmail-blue-soft: #1f3248;
  --gmail-link: #8ab4f8;
  --gmail-red: #f28b82;
  --gmail-red-soft: #43262b;
  --gmail-page: #0f141a;
  --gmail-surface: #171c22;
  --gmail-surface-muted: #1f2730;
  --gmail-search: #202833;
  --gmail-border: #2b3440;
  --gmail-border-strong: #3b4654;
  --gmail-text: #e8eaed;
  --gmail-muted: #9aa0a6;
  --gmail-hover: #273240;
  --gmail-row-border: #24303b;
  --gmail-chip-bg: #28313d;
  --gmail-chip-hover: #313c4b;
  --gmail-compose-bg: #8ab4f8;
  --gmail-compose-text: #062e6f;
  --gmail-danger-text: #f28b82;
  --gmail-logo-start: #26374f;
  --gmail-logo-end: #1c2635;
  --gmail-logo-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
  --gmail-panel-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  --gmail-fab-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  --gmail-alert-bg: #17202b;
  --gmail-alert-border: #31435c;
  --gmail-focus-border: rgba(138, 180, 248, 0.45);
  --gmail-focus-ring: rgba(138, 180, 248, 0.18);
  --gmail-search-focus-border: rgba(138, 180, 248, 0.30);
  --gmail-search-focus-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 20px rgba(0, 0, 0, 0.26);
  --gmail-login-glow-top: rgba(138, 180, 248, 0.12);
  --gmail-login-glow-bottom: rgba(242, 139, 130, 0.10);
  --gmail-login-card: rgba(23, 28, 34, 0.96);
  --gmail-login-shadow: 0 24px 60px rgba(0, 0, 0, 0.40);
  --gmail-input-bg: #11161c;
  --gmail-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

body,
html.dark-mode body {
  background: var(--gmail-page);
  color: var(--gmail-text);
  font-size: 14px;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

a,
html.dark-mode a {
  color: var(--gmail-link);
}

body:not(.task-login) #layout,
html.dark-mode body:not(.task-login) #layout {
  gap: 14px;
  padding: 14px;
  background: var(--gmail-page);
}

body:not(.task-login) #layout-menu,
body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content,
html.dark-mode body:not(.task-login) #layout-menu,
html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content {
  background: var(--gmail-surface);
  border: 1px solid var(--gmail-border);
  border-radius: var(--gmail-card-radius);
  box-shadow: var(--gmail-shadow);
  overflow: hidden;
  position: relative;
}

body:not(.task-login) #layout-menu,
html.dark-mode body:not(.task-login) #layout-menu {
  width: 128px !important;
  flex: 0 0 128px;
  max-width: 128px;
  overflow: hidden;
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content,
html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content {
  border-right: 1px solid var(--gmail-border);
}

#layout > div > .header,
#layout > div > .footer,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gmail-surface) 92%, var(--gmail-page)) 0%, var(--gmail-surface) 100%);
  color: var(--gmail-text);
  border-color: var(--gmail-border);
  padding: 0 18px;
  position: relative;
  z-index: 1;
}

#layout > div > .header .header-title,
html.dark-mode #layout > div > .header .header-title {
  margin: 0;
  text-align: left;
  font-weight: 600;
}

#layout > div > .header a.button,
#layout > div > .header .toolbar a,
.menu.toolbar a,
html.dark-mode #layout > div > .header a.button,
html.dark-mode #layout > div > .header .toolbar a,
html.dark-mode .menu.toolbar a {
  border-radius: 999px;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#layout > div > .header a.button:not(.disabled):hover,
#layout > div > .header .toolbar a:not(.disabled):hover,
.menu.toolbar a:not(.disabled):hover,
html.dark-mode #layout > div > .header a.button:not(.disabled):hover,
html.dark-mode #layout > div > .header .toolbar a:not(.disabled):hover,
html.dark-mode .menu.toolbar a:not(.disabled):hover {
  background: var(--gmail-hover) !important;
  color: var(--gmail-text);
}

#layout > div > .header,
html.dark-mode #layout > div > .header {
  min-height: 60px;
  border-bottom: 1px solid var(--gmail-row-border);
}

#layout > div > .footer,
html.dark-mode #layout > div > .footer {
  border-top: 1px solid var(--gmail-row-border);
}

#layout > div > .scroller,
#layout > div > .iframe-wrapper,
#layout > div > .list-container,
html.dark-mode #layout > div > .scroller,
html.dark-mode #layout > div > .iframe-wrapper,
html.dark-mode #layout > div > .list-container {
  background: var(--gmail-surface);
}

#layout-sidebar > .scroller,
#layout-list > .scroller,
#layout-content > .iframe-wrapper,
html.dark-mode #layout-sidebar > .scroller,
html.dark-mode #layout-list > .scroller,
html.dark-mode #layout-content > .iframe-wrapper {
  border-radius: 0 0 var(--gmail-inner-radius) var(--gmail-inner-radius);
}

.sidebar-compose,
html.dark-mode .sidebar-compose {
  display: none;
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header,
html.dark-mode #layout-sidebar > .header,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header {
  border-radius: var(--gmail-inner-radius) var(--gmail-inner-radius) 0 0;
}

#layout-sidebar > .footer,
#layout-list > .footer,
#layout-content > .footer,
html.dark-mode #layout-sidebar > .footer,
html.dark-mode #layout-list > .footer,
html.dark-mode #layout-content > .footer {
  border-radius: 0 0 var(--gmail-inner-radius) var(--gmail-inner-radius);
}

#layout-content > .iframe-wrapper,
html.dark-mode #layout-content > .iframe-wrapper {
  overflow: hidden;
}

#messagecontframe,
#messagepartframe,
html.dark-mode #messagecontframe,
html.dark-mode #messagepartframe {
  background: var(--gmail-surface);
  border: 0;
  border-radius: 0 0 var(--gmail-inner-radius) var(--gmail-inner-radius);
}

#layout-menu .popover-header,
html.dark-mode #layout-menu .popover-header {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: auto;
  line-height: normal;
  padding: 18px 14px 12px !important;
  background: transparent !important;
}

#layout-menu .popover-header img,
html.dark-mode #layout-menu .popover-header img {
  width: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html:not(.dark-mode) body.task-login #logo {
  filter: invert(1);
  border: 0;
}

#layout-menu .popover-header a,
html.dark-mode #layout-menu .popover-header a {
  color: #fff;
}

#layout-menu .popover-header a.logo-home,
html.dark-mode #layout-menu .popover-header a.logo-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}

#layout-menu .popover-header a.logo-home .header-logo,
html.dark-mode #layout-menu .popover-header a.logo-home .header-logo {
  display: block;
  width: 172px;
  height: 36px;
  background: center / contain no-repeat url("../images/logo2.svg");
}

html.dark-mode #layout-menu .popover-header a.logo-home .header-logo {
  background-image: url("../images/logo2-dark.svg");
}

#taskmenu,
html.dark-mode #taskmenu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: calc(100% - 116px);
  padding: 8px 8px 14px;
  background: transparent !important;
}

#taskmenu .action-buttons,
#taskmenu .special-buttons,
html.dark-mode #taskmenu .action-buttons,
html.dark-mode #taskmenu .special-buttons {
  position: static;
  background: transparent;
}

#taskmenu .special-buttons,
html.dark-mode #taskmenu .special-buttons {
  margin-top: auto;
}

#taskmenu a,
html.dark-mode #taskmenu a {
  width: 100% !important;
  height: auto;
  min-height: 44px;
  padding: 8px 8px 10px !important;
  color: var(--gmail-muted) !important;
  border-radius: 16px;
  background: transparent !important;
  font-weight: 500;
}

#taskmenu a:before,
html.dark-mode #taskmenu a:before {
  display: block !important;
  float: none !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 7px !important;
  line-height: 44px !important;
  border-radius: 14px;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#taskmenu span.inner,
html.dark-mode #taskmenu span.inner {
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 0;
}

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

#taskmenu a:hover:before,
html.dark-mode #taskmenu a:hover:before {
  background: var(--gmail-hover);
  color: var(--gmail-text);
  transform: translateY(-1px);
}

#taskmenu a.selected,
html.dark-mode #taskmenu a.selected {
  color: var(--gmail-red) !important;
  background: transparent !important;
}

#taskmenu a.selected:before,
html.dark-mode #taskmenu a.selected:before {
  background: var(--gmail-red-soft);
  color: var(--gmail-red);
}

#taskmenu a.compose,
html.dark-mode #taskmenu a.compose {
  color: var(--gmail-compose-text) !important;
  background: transparent !important;
  box-shadow: none;
  font-weight: 600;
}

#taskmenu a.compose:before,
html.dark-mode #taskmenu a.compose:before {
  background: var(--gmail-compose-bg);
  color: var(--gmail-compose-text);
}

#taskmenu a.compose:hover,
html.dark-mode #taskmenu a.compose:hover {
  background: transparent !important;
}

#taskmenu a.compose:hover:before,
html.dark-mode #taskmenu a.compose:hover:before {
  background: color-mix(in srgb, var(--gmail-compose-bg) 88%, var(--gmail-surface));
}

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

#taskmenu a.logout:before,
html.dark-mode #taskmenu a.logout:before {
  color: var(--gmail-danger-text);
}

.searchbar,
html.dark-mode .searchbar {
  margin: 12px;
  background: var(--gmail-search);
  border: 1px solid transparent;
  border-radius: 24px;
  box-shadow: none;
}

.searchbar:focus-within,
html.dark-mode .searchbar:focus-within {
  background: var(--gmail-surface);
  border-color: var(--gmail-search-focus-border);
  box-shadow: var(--gmail-search-focus-shadow);
}

.searchbar a,
.searchbar form:before,
.searchbar input,
.searchbar select,
html.dark-mode .searchbar a,
html.dark-mode .searchbar form:before,
html.dark-mode .searchbar input,
html.dark-mode .searchbar select {
  color: var(--gmail-text) !important;
  background: transparent;
}

.listing tbody td,
.listing li,
html.dark-mode .listing tbody td,
html.dark-mode .listing li {
  color: var(--gmail-text);
  border-bottom-color: var(--gmail-row-border);
}

.listing tbody td a,
.listing li a,
html.dark-mode .listing tbody td a,
html.dark-mode .listing li a {
  color: inherit;
}

.listing li.selected,
.listing tr.selected td,
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
  background: var(--gmail-blue-soft);
  color: var(--gmail-text);
}

.listing li:hover > a,
.listing tr:hover td,
html.dark-mode .listing li:hover > a,
html.dark-mode .listing tr:hover td {
  background: var(--gmail-surface-muted);
}

.folderlist li,
#directorylist li,
html.dark-mode .folderlist li,
html.dark-mode #directorylist li {
  border-bottom: 0;
}

.folderlist li a,
#directorylist li a,
.listing.iconized li > a,
html.dark-mode .folderlist li a,
html.dark-mode #directorylist li a,
html.dark-mode .listing.iconized li > a {
  border-radius: 0 18px 18px 0;
  margin-right: 12px;
}

.folderlist li.selected > a,
#directorylist li.selected > a,
.listing.iconized li.selected > a,
html.dark-mode .folderlist li.selected > a,
html.dark-mode #directorylist li.selected > a,
html.dark-mode .listing.iconized li.selected > a {
  color: var(--gmail-red) !important;
  background: var(--gmail-red-soft) !important;
  font-weight: 600;
}

#settings-menu li.selected,
#sections-table li.selected,
html.dark-mode #settings-menu li.selected,
html.dark-mode #sections-table li.selected {
  background: transparent !important;
}

#settings-menu li.selected > a,
#sections-table li.selected > a,
html.dark-mode #settings-menu li.selected > a,
html.dark-mode #sections-table li.selected > a {
  display: block;
  margin-right: 0;
  border-radius: 0 18px 18px 0;
  background: var(--gmail-red-soft) !important;
  color: var(--gmail-red) !important;
  font-weight: 600;
}

.listing span.secondary,
.messagelist td.subject span.date,
.messagelist td.subject span.fromto,
html.dark-mode .listing span.secondary,
html.dark-mode .messagelist td.subject span.date,
html.dark-mode .messagelist td.subject span.fromto {
  color: var(--gmail-muted);
}

.messagelist tr.unread td.subject span.subject,
.messagelist tr.unread td.subject span.fromto,
html.dark-mode .messagelist tr.unread td.subject span.subject,
html.dark-mode .messagelist tr.unread td.subject span.fromto {
  font-weight: 700;
}

.messagelist td.subject span.msgicon.status.unread:before,
html.dark-mode .messagelist td.subject span.msgicon.status.unread:before {
  color: var(--gmail-blue);
}

#message-header,
html.dark-mode #message-header {
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gmail-border);
}

#message-header > .subject,
html.dark-mode #message-header > .subject {
  color: var(--gmail-text);
  font-size: 1.7rem;
  font-weight: 500;
}

#message-header .header-summary,
#message-header .header-headers,
html.dark-mode #message-header .header-summary,
html.dark-mode #message-header .header-headers {
  color: var(--gmail-muted);
}

#message-header .header-links a,
html.dark-mode #message-header .header-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--gmail-chip-bg);
  color: var(--gmail-text);
}

#message-header .header-links a:hover,
html.dark-mode #message-header .header-links a:hover {
  background: var(--gmail-chip-hover);
}

body.task-mail.action-show #layout-content > .content,
html.dark-mode body.task-mail.action-show #layout-content > .content {
  padding: 24px clamp(24px, 4vw, 56px) 40px;
}

body.task-mail.action-show #message-header,
body.task-mail.action-show #message-content,
html.dark-mode body.task-mail.action-show #message-header,
html.dark-mode body.task-mail.action-show #message-content {
  width: min(100%, 1120px);
  margin-left: auto;
  margin-right: auto;
}

.message-partheaders,
.message-part,
.message-htmlpart,
html.dark-mode .message-partheaders,
html.dark-mode .message-part,
html.dark-mode .message-htmlpart {
  background: var(--gmail-surface);
  border: 1px solid var(--gmail-border);
  border-radius: 20px;
  box-shadow: var(--gmail-panel-shadow);
}

.message-partheaders,
html.dark-mode .message-partheaders {
  margin: 0 0 12px;
  padding: 12px 16px;
}

.message-part,
.message-htmlpart,
html.dark-mode .message-part,
html.dark-mode .message-htmlpart {
  margin-top: 12px !important;
  padding: 18px 20px 16px;
}

.form-control,
.custom-select,
.input-group-text,
html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode .input-group-text {
  border-radius: 12px;
  border-color: var(--gmail-border-strong);
  background: var(--gmail-input-bg);
  color: var(--gmail-text);
  box-shadow: none;
}

.form-control,
.custom-select,
html.dark-mode .form-control,
html.dark-mode .custom-select {
  min-height: 46px;
}

textarea.form-control,
html.dark-mode textarea.form-control {
  min-height: 140px;
}

.input-group-text,
html.dark-mode .input-group-text {
  background: var(--gmail-surface-muted);
  color: var(--gmail-muted);
}

.form-control:focus,
.custom-select:focus,
html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus {
  border-color: var(--gmail-focus-border);
  box-shadow: 0 0 0 4px var(--gmail-focus-ring);
}

.btn,
a.btn,
button.btn,
html.dark-mode .btn,
html.dark-mode a.btn,
html.dark-mode button.btn {
  min-height: 42px;
  border-radius: 999px;
  box-shadow: none;
  font-weight: 600;
}

.btn-primary,
html.dark-mode .btn-primary {
  border-color: var(--gmail-blue);
  background: var(--gmail-blue);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus {
  border-color: var(--gmail-blue-dark);
  background: var(--gmail-blue-dark);
}

.btn-secondary,
html.dark-mode .btn-secondary {
  border-color: var(--gmail-border-strong);
  background: var(--gmail-surface);
  color: var(--gmail-text);
}

.btn-secondary:hover,
.btn-secondary:focus,
html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-secondary:focus {
  background: var(--gmail-surface-muted);
}

.floating-action-buttons a.button,
html.dark-mode .floating-action-buttons a.button {
  background: var(--gmail-compose-bg);
  color: var(--gmail-compose-text);
  box-shadow: var(--gmail-fab-shadow);
}

.popover,
.ui-widget,
.ui-dialog,
.ui-menu,
html.dark-mode .popover,
html.dark-mode .ui-widget,
html.dark-mode .ui-dialog,
html.dark-mode .ui-menu {
  border-color: var(--gmail-border);
  border-radius: 18px;
  box-shadow: var(--gmail-shadow);
}

.popover,
.popover-body,
.ui-dialog-content,
.ui-widget-content,
html.dark-mode .popover,
html.dark-mode .popover-body,
html.dark-mode .ui-dialog-content,
html.dark-mode .ui-widget-content {
  background: var(--gmail-surface);
  color: var(--gmail-text);
}

.popover .menu li a:hover,
.ui-menu .ui-state-active,
html.dark-mode .popover .menu li a:hover,
html.dark-mode .ui-menu .ui-state-active {
  background: var(--gmail-surface-muted) !important;
  color: var(--gmail-text) !important;
}

.ui.alert,
html.dark-mode .ui.alert {
  border: 1px solid var(--gmail-alert-border);
  border-radius: 16px;
  background: var(--gmail-alert-bg);
  color: var(--gmail-text);
}

#messagestack div,
html.dark-mode #messagestack div {
  border-radius: 18px;
  box-shadow: var(--gmail-shadow);
}

.quota-widget,
html.dark-mode .quota-widget {
  color: var(--gmail-muted);
}

body.task-login,
html.dark-mode body.task-login {
  background:
    radial-gradient(circle at top left, var(--gmail-login-glow-top), transparent 32%),
    radial-gradient(circle at bottom right, var(--gmail-login-glow-bottom), transparent 28%),
    var(--gmail-page);
}

body.task-login #layout,
html.dark-mode body.task-login #layout {
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: transparent;
}

body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
  flex: none;
  width: min(480px, 100%);
  max-width: 480px;
  display: block;
  margin: 0 auto;
  padding: 44px 40px;
  border-radius: 32px;
  background: var(--gmail-login-card);
  border: 1px solid var(--gmail-border);
  box-shadow: var(--gmail-login-shadow);
  text-align: left;
}

body.task-login #logo,
html.dark-mode body.task-login #logo {
  top: auto;
  display: block;
  width: min(240px, 100%);
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin: 0 auto 26px;
}

html.dark-mode #logo {
  opacity: 1;
}

html.dark-mode #layout-menu {
  background: transparent !important;
  border-right-color: var(--gmail-border);
}

html.dark-mode #taskmenu a:hover,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .header a.button.icon:not(.disabled):focus,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus,
html.dark-mode .menu a:not(.disabled):hover {
  background-color: var(--gmail-hover) !important;
  color: var(--gmail-text) !important;
}

html.dark-mode .menu.toolbar a.selected {
  color: var(--gmail-blue) !important;
  background: var(--gmail-blue-soft) !important;
}

html.dark-mode .menu.pagenav.pagenav-list,
html.dark-mode .menu.pagenav.pagenav-list + .navlist,
html.dark-mode .menu.pagenav.pagenav-list.expanded + .navlist,
html.dark-mode .table-widget,
html.dark-mode .table-widget > .footer,
html.dark-mode .table,
html.dark-mode .table td,
html.dark-mode .table th,
html.dark-mode .table thead th,
html.dark-mode .message-htmlpart,
html.dark-mode #messagepartframe {
  background: var(--gmail-surface);
  border-color: var(--gmail-border);
  color: var(--gmail-text);
}

html.dark-mode .popover .menu li.separator,
html.dark-mode .ui-menu .ui-menu-item,
html.dark-mode .table td,
html.dark-mode .table th,
html.dark-mode .table thead th {
  border-color: var(--gmail-row-border);
}

html.dark-mode .popover .menu li.separator,
html.dark-mode .listing-info,
html.dark-mode .quota-info .root,
html.dark-mode ::placeholder {
  color: var(--gmail-muted) !important;
}

body.task-login #login-form,
html.dark-mode body.task-login #login-form {
  top: auto;
  width: 100%;
  max-width: none;
}

body.task-login #login-form table,
body.task-login #login-form tbody,
html.dark-mode body.task-login #login-form table,
html.dark-mode body.task-login #login-form tbody {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.task-login #login-form tr,
html.dark-mode body.task-login #login-form tr {
  display: block;
  width: 100%;
  margin: 0 0 18px !important;
}

body.task-login #login-form td,
html.dark-mode body.task-login #login-form td {
  display: block;
  width: 100% !important;
  padding: 0;
  border: 0;
}

body.task-login #login-form td.title,
html.dark-mode body.task-login #login-form td.title {
  display: none !important;
}

body.task-login #login-form td.input,
html.dark-mode body.task-login #login-form td.input {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  padding: 0;
}

body.task-login #login-form td.input.input-group,
html.dark-mode body.task-login #login-form td.input.input-group {
  flex-wrap: nowrap;
}

body.task-login #login-form td.input .input-group-prepend,
html.dark-mode body.task-login #login-form td.input .input-group-prepend {
  display: flex;
  flex: 0 0 56px;
  margin: 0;
}

body.task-login #login-form td.input .input-group-text,
html.dark-mode body.task-login #login-form td.input .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 52px;
  padding: 0;
  margin: 0;
  color: var(--gmail-muted);
  line-height: 1;
  background: var(--gmail-surface-muted);
  border: 1px solid var(--gmail-border-strong);
  border-right: 0;
  border-radius: 14px 0 0 14px;
}

body.task-login #login-form tr:focus-within td.input .input-group-text,
html.dark-mode body.task-login #login-form tr:focus-within td.input .input-group-text {
  border-color: var(--gmail-focus-border);
  color: var(--gmail-blue);
}

body.task-login #login-form td.input .form-control,
html.dark-mode body.task-login #login-form td.input .form-control {
  display: block;
  flex: 1 1 auto;
  width: 1% !important;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 16px;
  border-left: 0;
  border-radius: 0 14px 14px 0;
}

body.task-login #login-form .formbuttons,
html.dark-mode body.task-login #login-form .formbuttons {
  display: flex;
  justify-content: stretch;
  margin: 24px 0 0;
}

body.task-login #login-form .formbuttons .button,
body.task-login #login-form .formbuttons button,
html.dark-mode body.task-login #login-form .formbuttons .button,
html.dark-mode body.task-login #login-form .formbuttons button {
  width: 100%;
  min-height: 54px;
  margin: 0;
}

body.task-login #login-footer,
html.dark-mode body.task-login #login-footer {
  margin-top: 26px;
  color: var(--gmail-muted);
  line-height: 1.5;
  text-align: center;
  font-weight: 600;
}

@media screen and (max-width: 1024px) {
  body:not(.task-login) #layout,
  html.dark-mode body:not(.task-login) #layout {
    gap: 10px;
    padding: 10px;
  }

  body:not(.task-login) #layout-menu,
  html.dark-mode body:not(.task-login) #layout-menu {
    width: 96px !important;
    flex-basis: 96px;
    max-width: 96px;
  }

  #taskmenu span.inner,
  html.dark-mode #taskmenu span.inner {
    display: none;
  }

  #taskmenu a:before,
  html.dark-mode #taskmenu a:before {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  body:not(.task-login) #layout,
  html.dark-mode body:not(.task-login) #layout {
    gap: 8px;
    padding: 8px;
  }

  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content,
  html.dark-mode body:not(.task-login) #layout-sidebar,
  html.dark-mode body:not(.task-login) #layout-list,
  html.dark-mode body:not(.task-login) #layout-content {
    border-radius: 20px;
  }

  body.task-login #layout,
  html.dark-mode body.task-login #layout {
    padding: 16px;
  }

  body.task-login #layout-content,
  html.dark-mode body.task-login #layout-content {
    padding: 34px 24px;
    border-radius: 24px;
  }

  body.task-login #logo,
  html.dark-mode body.task-login #logo {
    width: min(220px, 100%);
  }
}

@media screen and (min-width: 1025px) {
  body:not(.task-login) #layout,
  html.dark-mode body:not(.task-login) #layout {
    display: grid;
    grid-template-columns: minmax(240px, 24%) minmax(320px, 30%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 14px;
  }

  body:not(.task-login) #layout-menu,
  html.dark-mode body:not(.task-login) #layout-menu {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    width: auto !important;
    max-width: none;
    min-width: 0;
    padding: 12px 20px;
    overflow: visible;
    border-radius: 28px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--gmail-surface) 93%, var(--gmail-page)) 0%, color-mix(in srgb, var(--gmail-surface) 100%, transparent) 100%);
    border-color: color-mix(in srgb, var(--gmail-border) 82%, white);
    box-shadow: 0 12px 30px rgba(32, 33, 36, 0.06);
  }

  body:not(.task-login) #layout-sidebar,
  html.dark-mode body:not(.task-login) #layout-sidebar {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    max-width: none;
  }

  body:not(.task-login) #layout-list,
  html.dark-mode body:not(.task-login) #layout-list {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    max-width: none;
  }

  body:not(.task-login) #layout-content,
  html.dark-mode body:not(.task-login) #layout-content {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
  }

  body.task-mail.action-show #layout,
  html.dark-mode body.task-mail.action-show #layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }

  body.task-mail.action-get #layout,
  html.dark-mode body.task-mail.action-get #layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    max-width: 100%;
  }

  body.task-mail.action-show #layout-content,
  html.dark-mode body.task-mail.action-show #layout-content {
    grid-column: 1;
    grid-row: 2;
  }

  body.task-mail.action-get #layout-content,
  html.dark-mode body.task-mail.action-get #layout-content {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  body.task-mail #layout > #layout-content:only-child,
  html.dark-mode body.task-mail #layout > #layout-content:only-child {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    max-width: none;
  }

  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content,
  html.dark-mode body:not(.task-login) #layout-sidebar,
  html.dark-mode body:not(.task-login) #layout-list,
  html.dark-mode body:not(.task-login) #layout-content {
    height: 100%;
  }

  body:not(.task-login) #layout-menu .popover-header,
  html.dark-mode body:not(.task-login) #layout-menu .popover-header {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 0 !important;
    margin-right: 4px;
  }

  body:not(.task-login) #layout-menu .popover-header a.logo-home,
  html.dark-mode body:not(.task-login) #layout-menu .popover-header a.logo-home {
    display: inline-flex !important;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:not(.task-login) #layout-menu .popover-header a.logo-home:hover,
  html.dark-mode body:not(.task-login) #layout-menu .popover-header a.logo-home:hover {
    background: transparent;
  }

  body:not(.task-login) #layout-menu .popover-header .header-logo,
  html.dark-mode body:not(.task-login) #layout-menu .popover-header .header-logo {
    width: 172px;
    height: 36px;
    max-width: 172px;
    max-height: 36px;
    padding: 0;
    border-radius: 0;
    background: center / contain no-repeat url("../images/logo2.svg");
    filter: none;
  }

  html.dark-mode body:not(.task-login) #layout-menu .popover-header .header-logo {
    background-image: url("../images/logo2-dark.svg");
  }

  body:not(.task-login) #layout-menu .popover-header a:not(.logo-home),
  html.dark-mode body:not(.task-login) #layout-menu .popover-header a:not(.logo-home) {
    display: none !important;
  }

  body:not(.task-login) #taskmenu,
  html.dark-mode body:not(.task-login) #taskmenu {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  body:not(.task-login) #taskmenu .action-buttons,
  body:not(.task-login) #taskmenu .special-buttons,
  html.dark-mode body:not(.task-login) #taskmenu .action-buttons,
  html.dark-mode body:not(.task-login) #taskmenu .special-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  body:not(.task-login) #taskmenu .special-buttons,
  html.dark-mode body:not(.task-login) #taskmenu .special-buttons {
    margin-left: auto;
  }

  body:not(.task-login) #taskmenu .action-buttons,
  html.dark-mode body:not(.task-login) #taskmenu .action-buttons {
    display: none;
  }

  body:not(.task-login) #taskmenu a,
  html.dark-mode body:not(.task-login) #taskmenu a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    gap: 9px;
    width: fit-content !important;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 14px !important;
    border: 1px solid transparent;
    border-radius: 16px;
    white-space: nowrap;
    color: var(--gmail-muted) !important;
    background: transparent !important;
    box-shadow: none;
  }

  body:not(.task-login) #taskmenu a:before,
  html.dark-mode body:not(.task-login) #taskmenu a:before {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    line-height: 18px !important;
    border-radius: 0;
    font-size: 0.98rem !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body:not(.task-login) #taskmenu span.inner,
  html.dark-mode body:not(.task-login) #taskmenu span.inner {
    display: inline;
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    letter-spacing: 0.01em;
  }

  body:not(.task-login) #taskmenu a:hover,
  html.dark-mode body:not(.task-login) #taskmenu a:hover {
    border-color: color-mix(in srgb, var(--gmail-border) 84%, transparent);
    background: color-mix(in srgb, var(--gmail-hover) 82%, transparent) !important;
    box-shadow: 0 4px 14px rgba(32, 33, 36, 0.06);
  }

  body:not(.task-login) #taskmenu a:hover:before,
  body:not(.task-login) #taskmenu a.selected:before,
  body:not(.task-login) #taskmenu a.compose:before,
  html.dark-mode body:not(.task-login) #taskmenu a:hover:before,
  html.dark-mode body:not(.task-login) #taskmenu a.selected:before,
  html.dark-mode body:not(.task-login) #taskmenu a.compose:before {
    background: transparent !important;
    transform: none !important;
  }

  body:not(.task-login) #taskmenu a.selected,
  html.dark-mode body:not(.task-login) #taskmenu a.selected {
    color: var(--gmail-red) !important;
    border-color: color-mix(in srgb, var(--gmail-red-soft) 86%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--gmail-red-soft) 88%, white) 0%, color-mix(in srgb, var(--gmail-red-soft) 68%, transparent) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  body:not(.task-login) #taskmenu a.compose:not(.selected),
  html.dark-mode body:not(.task-login) #taskmenu a.compose:not(.selected) {
    padding-left: 10px !important;
    padding-right: 18px !important;
    color: var(--gmail-muted) !important;
    border-color: transparent;
    background: transparent !important;
    box-shadow: none;
  }

  body.task-mail.action-compose #layout,
  html.dark-mode body.task-mail.action-compose #layout {
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
  }

  body.task-mail.action-compose #layout-sidebar,
  html.dark-mode body.task-mail.action-compose #layout-sidebar {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }

  body.task-mail.action-compose #layout-content,
  html.dark-mode body.task-mail.action-compose #layout-content {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  body.task-mail.action-compose #layout-content .header,
  html.dark-mode body.task-mail.action-compose #layout-content .header {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.task-mail.action-compose #messagetoolbar,
  html.dark-mode body.task-mail.action-compose #messagetoolbar {
    gap: 8px;
  }

  body.task-mail.action-compose #layout-sidebar .scroller,
  html.dark-mode body.task-mail.action-compose #layout-sidebar .scroller {
    padding-bottom: 12px;
  }

  body.task-mail:not(.action-compose) .sidebar-compose,
  html.dark-mode body.task-mail:not(.action-compose) .sidebar-compose {
    display: block;
    padding: 16px 16px 12px;
    background: var(--gmail-surface);
    border-bottom: 1px solid var(--gmail-row-border);
  }

  body.task-mail:not(.action-compose) .sidebar-compose .sidebar-compose-button,
  html.dark-mode body.task-mail:not(.action-compose) .sidebar-compose .sidebar-compose-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    max-width: 100%;
    min-height: 42px;
    padding: 0 14px 0 12px !important;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--gmail-compose-text) !important;
    background: var(--gmail-compose-bg) !important;
    box-shadow: 0 1px 2px rgba(32, 33, 36, 0.12), 0 4px 10px rgba(32, 33, 36, 0.08);
    font-weight: 600;
    text-decoration: none;
  }

  body.task-mail:not(.action-compose) .sidebar-compose .sidebar-compose-button:hover,
  html.dark-mode body.task-mail:not(.action-compose) .sidebar-compose .sidebar-compose-button:hover {
    background: color-mix(in srgb, var(--gmail-compose-bg) 90%, var(--gmail-surface)) !important;
    box-shadow: 0 6px 16px rgba(32, 33, 36, 0.12);
  }

  body.task-mail:not(.action-compose) .sidebar-compose .sidebar-compose-button:before,
  html.dark-mode body.task-mail:not(.action-compose) .sidebar-compose .sidebar-compose-button:before {
    content: "\f303";
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    line-height: 16px !important;
    font-family: 'Icons' !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    color: var(--gmail-compose-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    speak: none;
  }

  body.task-mail:not(.action-compose) .sidebar-compose .sidebar-compose-button .inner,
  html.dark-mode body.task-mail:not(.action-compose) .sidebar-compose .sidebar-compose-button .inner {
    display: inline;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
  }

  body.task-mail:not(.action-compose) #folderlist-content,
  html.dark-mode body.task-mail:not(.action-compose) #folderlist-content {
    border-radius: 0 0 var(--gmail-inner-radius) var(--gmail-inner-radius);
  }
}