/* ============================================================
   Otter Wiki – Custom Theme
   Light/dark colours using .dark-mode class (Otter Wiki's mechanism)
   ============================================================ */

/* ---- Light mode ---- */

body {
  background-color: #ffffff !important;
  color: #212121 !important;
}

h1, h2 {
  color: #205493 !important;
}

h3, h4 {
  color: #4773aa !important;
}

h5, h6,
footer, .footer,
.breadcrumb {
  color: #5b616b !important;
}

a {
  color: #3344dd !important;
}

a:visited {
  color: #884488 !important;
}

a:active {
  color: #bb1122 !important;
}

.navbar, .sidebar {
  background-color: #dce4ef !important;
  border-color: #5b616b !important;
}

.navbar a, .sidebar a {
  color: #205493 !important;
}

.navbar a:hover, .sidebar a:hover {
  color: #4773aa !important;
}

.card, .alert, .well, .callout {
  background-color: #dce4ef !important;
  border-color: #5b616b !important;
  color: #212121 !important;
}

table {
  border-color: #5b616b !important;
}

thead {
  background-color: #dce4ef !important;
  color: #205493 !important;
}

tbody tr:nth-child(even) {
  background-color: #dce4ef !important;
}

tbody tr:hover {
  background-color: #4773aa !important;
  color: #ffffff !important;
}

hr, .border, .divider {
  border-color: #5b616b !important;
}

pre, code {
  background-color: #dce4ef !important;
  color: #212121 !important;
  border: 1px solid #5b616b !important;
}

input, textarea, select {
  background-color: #ffffff !important;
  color: #212121 !important;
  border-color: #5b616b !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #4773aa !important;
  outline-color: #4773aa !important;
}

.btn-primary {
  background-color: #205493 !important;
  border-color: #205493 !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: #4773aa !important;
  border-color: #4773aa !important;
}

.page-index a, .toc a {
  color: #4773aa !important;
}

footer, .footer {
  border-top: 1px solid #5b616b !important;
}

.breadcrumb a {
  color: #4773aa !important;
}


/* ---- Dark mode ---- */

.dark-mode body,
.dark-mode {
  background-color: #202124 !important;
  color: #bdc1c6 !important;
}

.dark-mode h1, .dark-mode h2 {
  color: #e8eaed !important;
}

.dark-mode h3, .dark-mode h4 {
  color: #bcc0c3 !important;
}

.dark-mode h5, .dark-mode h6,
.dark-mode footer, .dark-mode .footer,
.dark-mode .breadcrumb {
  color: #dddee1 !important;
}

.dark-mode a {
  color: #8ab6f5 !important;
}

.dark-mode a:visited {
  color: #c48df5 !important;
}

.dark-mode a:active {
  color: #ef7e6f !important;
}

.dark-mode .navbar, .dark-mode .sidebar {
  background-color: #303134 !important;
  border-color: #dddee1 !important;
}

.dark-mode .navbar a, .dark-mode .sidebar a {
  color: #e8eaed !important;
}

.dark-mode .navbar a:hover, .dark-mode .sidebar a:hover {
  color: #bcc0c3 !important;
}

.dark-mode .card, .dark-mode .alert, .dark-mode .well, .dark-mode .callout {
  background-color: #303134 !important;
  border-color: #dddee1 !important;
  color: #bdc1c6 !important;
}

.dark-mode table {
  border-color: #dddee1 !important;
}

.dark-mode thead {
  background-color: #303134 !important;
  color: #e8eaed !important;
}

.dark-mode tbody tr:nth-child(even) {
  background-color: #303134 !important;
}

.dark-mode tbody tr:hover {
  background-color: #bcc0c3 !important;
  color: #202124 !important;
}

.dark-mode hr, .dark-mode .border, .dark-mode .divider {
  border-color: #dddee1 !important;
}

.dark-mode pre, .dark-mode code {
  background-color: #303134 !important;
  color: #bdc1c6 !important;
  border: 1px solid #dddee1 !important;
}

.dark-mode input, .dark-mode textarea, .dark-mode select {
  background-color: #202124 !important;
  color: #bdc1c6 !important;
  border-color: #dddee1 !important;
}

.dark-mode input:focus, .dark-mode textarea:focus, .dark-mode select:focus {
  border-color: #bcc0c3 !important;
  outline-color: #bcc0c3 !important;
}

.dark-mode .btn-primary {
  background-color: #e8eaed !important;
  border-color: #e8eaed !important;
  color: #202124 !important;
}

.dark-mode .btn-primary:hover {
  background-color: #bcc0c3 !important;
  border-color: #bcc0c3 !important;
}

.dark-mode .page-index a, .dark-mode .toc a {
  color: #bcc0c3 !important;
}

.dark-mode footer, .dark-mode .footer {
  border-top: 1px solid #dddee1 !important;
}

.dark-mode .breadcrumb a {
  color: #bcc0c3 !important;
}