html, body { min-height: 100%; }
body { font-size: 14px; line-height: 1.5; background: #f8fafc; }
.mainbody { min-height: calc(100vh - 140px); }
.page-header { border-bottom: 1px solid #d6e4f0; padding-bottom: 0.75rem; }
.adjustImage { border: 1px solid #000; text-align: center; width: auto; margin: 0 auto; }
.adjustImage img { max-width: 200px; max-height: 200px; border: 1px solid #000; }
.textContainer { width: 100%; padding-top: 10px; }
.footer { margin: 0; }
.copyright { text-align: center; }
.required { color: #ff0039; }
.actions-column { width: 280px; }
.error-page { font-family: Arial, sans-serif; }
.error-page-main { max-width: 720px; margin: 80px auto; padding: 0 20px; }
.diagnostic-log {
  min-height: 12rem;
  max-height: 26rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-bg: #fff;
  --bs-dropdown-color: #212529;
  --bs-dropdown-link-color: #212529;
  --bs-dropdown-link-hover-color: #212529;
  --bs-dropdown-link-hover-bg: #e9ecef;
  --bs-dropdown-link-active-color: #212529;
  --bs-dropdown-link-active-bg: #e9ecef;
  --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
  --bs-dropdown-divider-bg: rgba(0, 0, 0, 0.12);
  background: #fff !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background: #e9ecef !important;
  color: #212529 !important;
}

.navbar .nav-link,
.navbar .dropdown-item {
  transition: background-color .2s ease, color .2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: #fff;
  color: #111 !important;
  border-radius: .375rem;
}

.navbar .navbar-nav .nav-link.dropdown-toggle:hover,
.navbar .navbar-nav .nav-link.dropdown-toggle:focus {
  background: transparent;
  color: #fff !important;
}

.navbar .nav-link.dropdown-toggle.show {
  background: transparent;
  color: rgba(255, 255, 255, 0.55) !important;
}

.navbar .dynamic-navbar-nav > .nav-item > .nav-link {
  color: rgba(255, 255, 255, 0.55) !important;
}

.navbar .dynamic-navbar-nav > .nav-item > .nav-link:hover,
.navbar .dynamic-navbar-nav > .nav-item > .nav-link:focus,
.navbar .dynamic-navbar-nav > .nav-item > .nav-link.active,
.navbar .dynamic-navbar-nav > .nav-item > .nav-link.show {
  background: transparent;
  color: #fff !important;
}

.navbar .dropdown-menu {
  --bs-dropdown-bg: #fff;
  --bs-dropdown-color: #212529;
  --bs-dropdown-link-color: #212529;
  --bs-dropdown-link-hover-color: #212529;
  --bs-dropdown-link-hover-bg: #e9ecef;
  --bs-dropdown-link-active-color: #212529;
  --bs-dropdown-link-active-bg: #dde1e6;
  --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
  --bs-dropdown-divider-bg: rgba(0, 0, 0, 0.12);
}

.navbar .dropdown-item {
  border-radius: 0;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
  background: #e9ecef;
  color: #212529 !important;
}

.smart-device-update-cell time {
  display: inline-block;
  padding: .1rem .3rem;
  border-radius: .25rem;
  transition: background-color .2s ease, color .2s ease;
}

.smart-device-status-offline {
  background-color: rgba(220, 53, 69, .2);
}

.smart-rssi {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.smart-rssi-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}

.smart-rssi-bar {
  display: block;
  width: 4px;
  background-color: #ced4da;
  border-radius: 2px 2px 0 0;
}

.smart-rssi-bar:nth-child(1) { height: 4px; }
.smart-rssi-bar:nth-child(2) { height: 7px; }
.smart-rssi-bar:nth-child(3) { height: 10px; }
.smart-rssi-bar:nth-child(4) { height: 14px; }
.smart-rssi-bar:nth-child(5) { height: 18px; }

.smart-rssi-level-1 .smart-rssi-bar:nth-child(-n+1) { background-color: #dc3545; }
.smart-rssi-level-2 .smart-rssi-bar:nth-child(-n+2) { background-color: #fd7e14; }
.smart-rssi-level-3 .smart-rssi-bar:nth-child(-n+3) { background-color: #0d6efd; }
.smart-rssi-level-4 .smart-rssi-bar:nth-child(-n+4),
.smart-rssi-level-5 .smart-rssi-bar:nth-child(-n+5) { background-color: #198754; }

.smart-device-flash-online {
  animation: smart-device-online-pulse 1.2s ease-out;
}

.smart-device-flash-offline {
  animation: smart-device-offline-pulse 1.2s ease-out;
}

@keyframes smart-device-online-pulse {
  0%, 100% {
    background-color: transparent;
    color: inherit;
  }
  35% {
    background-color: #198754;
    color: #fff;
  }
}

@keyframes smart-device-offline-pulse {
  0%, 100% {
    background-color: rgba(220, 53, 69, .2);
    color: inherit;
  }
  35% {
    background-color: #dc3545;
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-device-flash-online {
    animation-duration: .35s;
  }

  .smart-device-flash-offline {
    animation-duration: .35s;
  }
}