html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

body[data-bs-theme="dark"] {
  background-color: #121212;
  color: #e9ecef;
}

body[data-bs-theme="dark"] .bg-white,
body[data-bs-theme="dark"] .bg-body {
  background-color: #1e1e1e !important;
}

body[data-bs-theme="dark"] .navbar,
body[data-bs-theme="dark"] .footer,
body[data-bs-theme="dark"] .card,
body[data-bs-theme="dark"] .modal-content,
body[data-bs-theme="dark"] .dropdown-menu,
body[data-bs-theme="dark"] .table,
body[data-bs-theme="dark"] .alert,
body[data-bs-theme="dark"] .form-control,
body[data-bs-theme="dark"] .form-select {
  background-color: #1e1e1e;
  color: #e9ecef;
  border-color: #343a40;
}

body[data-bs-theme="dark"] .navbar a,
body[data-bs-theme="dark"] .footer a,
body[data-bs-theme="dark"] .nav-link,
body[data-bs-theme="dark"] .dropdown-item {
  color: #e9ecef !important;
}

body[data-bs-theme="dark"] .text-dark {
  color: #e9ecef !important;
}

body[data-bs-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

body[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.04);
}

body[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.08);
}

body[data-bs-theme="dark"] .form-control::placeholder {
  color: #adb5bd;
}

body[data-bs-theme="dark"] .btn-outline-secondary {
  color: #e9ecef;
  border-color: #6c757d;
}

body[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: #6c757d;
  color: #fff;
}

body[data-bs-theme="dark"] .navbar-toggler {
  border-color: #6c757d;
}

body[data-bs-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) grayscale(100%);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}