/* OpenData: remove the application logo; keep mobile menu controls usable. */
#layout-menu #logo {
  display: none !important;
}

@media screen and (min-width: 481px) {
  #layout-menu > .popover-header {
    display: none !important;
  }
}

/* Pure black surfaces, neutral text, and visible focus/selection states. */
html.dark-mode {
  background-color: #000;
  scrollbar-color: #555 #000;
}

html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-menu,
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 #layout-menu .popover-header,
html.dark-mode #layout-menu .special-buttons,
html.dark-mode #layout-menu .special-buttons a:not(:focus),
html.dark-mode .searchbar,
html.dark-mode .popover,
html.dark-mode .popover-header,
html.dark-mode .ui-dialog,
html.dark-mode .ui-dialog-titlebar,
html.dark-mode .ui-dialog-content,
html.dark-mode .ui-dialog-buttonpane,
html.dark-mode .form-control,
html.dark-mode .custom-file-label,
html.dark-mode .input-group-text,
html.dark-mode .recipient-input,
html.dark-mode .listing li.selected ul {
  background-color: #000 !important;
  color: #e5e5e5;
  border-color: #292929 !important;
}

html.dark-mode #messagecontframe {
  background-color: #000;
}

html.dark-mode .listing li,
html.dark-mode .listing li ul,
html.dark-mode .listing tbody td {
  border-color: #242424 !important;
}

html.dark-mode #taskmenu a,
html.dark-mode #taskmenu .action-buttons a,
html.dark-mode .menu.toolbar a,
html.dark-mode .listing li a,
html.dark-mode .listing tbody tr:not(.flagged):not(.deleted) td,
html.dark-mode .listing tbody tr:not(.flagged):not(.deleted) td a {
  color: #e5e5e5 !important;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a:hover,
html.dark-mode .menu a:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .header a.button.icon:not(.disabled):focus,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover {
  background-color: #1a1a1a !important;
  color: #fff !important;
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
html.dark-mode .messagelist span.attachment span {
  color: #aaa !important;
}

html.dark-mode .folderlist li.mailbox .unreadcount,
html.dark-mode .recipient-input .recipient,
html.dark-mode .attachmentslist,
html.dark-mode .btn-primary,
html.dark-mode .btn-secondary {
  background-color: #222 !important;
  border-color: #555 !important;
  color: #fff !important;
}

html.dark-mode .form-control:focus,
html.dark-mode .recipient-input.focus {
  background-color: #000 !important;
  border-color: #aaa !important;
  box-shadow: 0 0 0 1px #aaa;
  color: #fff !important;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-track {
  background-color: #000;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb {
  background-color: #555;
}

/* User-selected base size; rem-based interface text scales with it. */
html {
  font-size: 13px !important;
}