html.dark-mode {
  color-scheme: dark;
}

html.dark-mode body {
  color: #e5edf8 !important;
  background: #101827 !important;
}

html.dark-mode .topbar,
html.dark-mode .bar,
html.dark-mode .toolbar {
  color: #e5edf8 !important;
  background: #0b1220 !important;
  border-color: #26354b !important;
}

html.dark-mode .topbar p,
html.dark-mode .bar p {
  color: #aebbd0 !important;
}

html.dark-mode .topbar a,
html.dark-mode .bar a,
html.dark-mode .toolbar a {
  color: #dce9fb !important;
}

html.dark-mode .topbar-icon,
html.dark-mode .theme-toggle,
html.dark-mode .toolbar .theme-toggle {
  color: #e5edf8 !important;
  border-color: #52657f !important;
  background: transparent !important;
}

html.dark-mode .toolbar button:not(.theme-toggle) {
  color: #fff !important;
  background: #1456a0 !important;
}

html.dark-mode .brand-mark {
  background: linear-gradient(135deg, #1456a0, #087d76) !important;
}

html.dark-mode .panel h1,
html.dark-mode .brand h1 {
  color: #dce9fb !important;
}

html.dark-mode .panel,
html.dark-mode .card,
html.dark-mode .stat,
html.dark-mode .empty,
html.dark-mode .paper,
html.dark-mode .record-card,
html.dark-mode .mobile-option {
  color: #e5edf8 !important;
  background: #182337 !important;
  border-color: #34445b !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2) !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode .card h2,
html.dark-mode .panel h2,
html.dark-mode .stat strong,
html.dark-mode .record-card h3,
html.dark-mode label,
html.dark-mode .toolbar label {
  color: #dce9fb !important;
}

html.dark-mode p,
html.dark-mode .muted,
html.dark-mode .card p,
html.dark-mode .default-login,
html.dark-mode .meta,
html.dark-mode .intro,
html.dark-mode .empty {
  color: #aebbd0 !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  color: #e5edf8 !important;
  background: #111b2b !important;
  border-color: #34445b !important;
}

html.dark-mode .location-btn {
  color: #b9d5ff;
  background: #263c5d;
  border-color: #52657f;
}

html.dark-mode table th {
  color: #dce9fb !important;
  background: #202e44 !important;
}

html.dark-mode table td,
html.dark-mode .tech-form,
html.dark-mode .meta {
  border-color: #34445b !important;
}

html.dark-mode .status,
html.dark-mode .button.secondary,
html.dark-mode .detail-link {
  color: #b9d5ff !important;
  background: #263c5d !important;
}

html.dark-mode .notice {
  color: #9be5b4 !important;
  background: #173b2a !important;
}

html.dark-mode .error {
  color: #ffb0b0 !important;
  background: #452323 !important;
}

.theme-toggle-global {
  position: fixed;
  z-index: 1000;
  right: 16px;
  bottom: 16px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  background: #12335b;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 5px 16px rgba(15, 45, 100, .25);
  cursor: pointer;
}

html.dark-mode .theme-toggle-global {
  color: #102038;
  background: #dce9fb;
  border-color: #dce9fb;
}

.logout-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffb3b3;
  border-radius: 8px;
  color: #ff5c5c !important;
  background: #fff0f0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

html.dark-mode .logout-icon {
  border-color: #7f3d48;
  color: #ff8b8b !important;
  background: #452323;
}

@media (max-width: 480px) {
  .theme-toggle-global {
    right: 10px;
    bottom: 10px;
    min-height: 40px;
    padding: 8px 11px;
  }
}