:root {
  --domenmail-shell: #f7f8ef;
  --domenmail-surface: #fff;
  --domenmail-header: #eef1df;
  --domenmail-text: #202124;
  --domenmail-muted: #5f6368;
  --domenmail-border: #dadce0;
  --domenmail-hover: #f1f3f4;
  --domenmail-selected: #eef1e2;
  --domenmail-compose: #fff;
  --domenmail-compose-text: #4d581f;
  --domenmail-primary: #6b7a2a;
  --domenmail-primary-hover: #566321;
  --domenmail-read: #f8f9fa;
  --domenmail-radius: 1rem;
  --domenmail-pill-radius: 1.5rem;
}

body,
#layout {
  background: var(--domenmail-shell);
  color: var(--domenmail-text);
}

a {
  color: var(--domenmail-primary);
}

a:hover {
  color: var(--domenmail-primary-hover);
}

#layout-menu,
#layout-sidebar,
#taskmenu .special-buttons {
  background: var(--domenmail-shell);
}

#layout-sidebar {
  border-right: 0;
}

#layout-list,
#layout-content {
  background: var(--domenmail-surface);
}

#layout > div > .header {
  background: var(--domenmail-header);
}

#layout > div > .footer {
  background: var(--domenmail-surface);
}

#layout > div > .header,
#layout > div > .footer {
  border-color: var(--domenmail-border);
  color: var(--domenmail-text);
}

#layout-menu .popover-header {
  background: var(--domenmail-shell) !important;
}

#layout-menu .popover-header img {
  width: 2.5rem;
  height: 2.5rem;
  padding: .15rem;
  border-radius: .5rem;
}

#taskmenu a {
  border-radius: var(--domenmail-pill-radius);
  color: var(--domenmail-muted);
}

#taskmenu a:hover {
  background: var(--domenmail-hover);
  color: var(--domenmail-text);
}

#taskmenu a.selected {
  background: var(--domenmail-selected);
  color: var(--domenmail-text);
}

#taskmenu .action-buttons a.compose,
#taskmenu .action-buttons a.compose:hover {
  background: var(--domenmail-compose);
  color: var(--domenmail-compose-text);
  box-shadow: 0 1px 2px rgba(60, 64, 67, .3);
}

.searchbar {
  margin: .5rem .75rem;
  background: var(--domenmail-hover);
  border: 0;
  border-radius: var(--domenmail-pill-radius);
}

.searchbar input,
.searchbar form::before,
.searchbar a {
  color: var(--domenmail-text);
}

.folderlist li > a {
  margin-right: .75rem;
  border-radius: 0 var(--domenmail-pill-radius) var(--domenmail-pill-radius) 0;
}

.folderlist li > a:hover {
  background: var(--domenmail-hover);
}

.folderlist li.selected > a {
  background: var(--domenmail-selected);
  color: var(--domenmail-text);
}

.folderlist li.mailbox .unreadcount {
  background: transparent;
  color: var(--domenmail-text);
}

.message-part blockquote,
.message-part blockquote blockquote,
.message-part blockquote blockquote blockquote {
  border-color: var(--domenmail-primary);
  color: var(--domenmail-primary);
}

html:not(.touch) .listing li > a:focus,
html:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
  border-left-color: var(--domenmail-primary);
}

.messagelist tbody tr {
  background: var(--domenmail-read);
  box-shadow: inset 0 -1px 0 var(--domenmail-border);
}

.messagelist tbody tr.unread {
  background: var(--domenmail-surface);
}

.messagelist tbody tr:hover {
  background: var(--domenmail-surface);
  box-shadow: inset 0 -1px 0 var(--domenmail-border), 0 1px 4px rgba(60, 64, 67, .3);
}

.messagelist tbody tr.selected,
.messagelist tbody tr.selected:hover {
  background: var(--domenmail-selected);
}

.messagelist td,
.messagelist td a,
.listing li > a {
  color: var(--domenmail-text);
}

.listing-info,
.messagelist .date,
.messagelist .size {
  color: var(--domenmail-muted);
}

.btn-primary,
.button.mainaction {
  background: var(--domenmail-primary);
  border-color: var(--domenmail-primary);
  border-radius: var(--domenmail-pill-radius);
  color: #fff;
}

.btn:not(.btn-link) {
  border-radius: var(--domenmail-pill-radius);
}

.btn-primary:hover,
.button.mainaction:hover {
  background: var(--domenmail-primary-hover);
  border-color: var(--domenmail-primary-hover);
  color: #fff;
}

@media screen and (min-width: 481px) {
  #taskmenu,
  #taskmenu .special-buttons {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
}

@media screen and (min-width: 1025px) {
  #taskmenu a {
    width: calc(78px - .5rem);
    margin-left: .5rem;
  }
}

@media screen and (min-width: 1201px) {
  #layout-sidebar {
    flex: 0 0 17rem;
    max-width: 17rem;
    border-radius: var(--domenmail-radius);
  }

  body.task-mail #layout-sidebar {
    margin: .5rem;
  }

  #layout > div > .header {
    border-radius: var(--domenmail-radius) var(--domenmail-radius) 0 0;
  }

  #layout-list {
    flex: 4;
    max-width: none;
  }

  #layout-content {
    flex: 5;
  }

  body.task-mail #layout-list,
  body.task-mail #layout-content {
    margin: .5rem .5rem .5rem 0;
    border: 0;
    border-radius: var(--domenmail-radius);
    overflow: hidden;
  }
}