body {
  min-height: 100vh;
}

.sidebar {
  min-width: 220px;
  max-width: 260px;
}

.nav-link.active {
  background-color: rgba(13, 110, 253, 0.08);
  border-radius: 0.375rem;
}

#frame-wrapper {
  display: none;
  height: calc(100vh - 140px);
}

#content-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.amount-pos {
  color: #198754;
}

.amount-neg {
  color: #dc3545;
}
.amount-pos {
  color: #198754;
}

.amount-neg {
  color: #dc3545;
}

.tab-pane {
  min-height: 240px;
}
#pinDisplay .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #999;
  background-color: white;
  color: #fff;
}

#pinDisplay .dot.filled {
  background-color: blue;
  color: blue;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

#pinDisplay .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #999;
  background: #fff;
  color: #fff;
}

#pinDisplay .dot.filled {
  background: blue;
  color: blue;
}

#keypad .btn {
  transition: transform 90ms ease, filter 90ms ease;
  min-width: 3rem;
}

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: none;
  z-index: 2147483647;
  background: #fff;
  color: #000;
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.scroll-to-top:hover {
  background: rgba(255, 255, 255, 0.8);
}

.scroll-to-top i {
    color: black;
}


[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .offcanvas-body,
[data-bs-theme="dark"] .offcanvas-header,
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .border-end {
  background-color: #0f1724 !important;
  color: #e6eef8 !important;
  border-color: rgba(255,255,255,0.04) !important;
}


[data-bs-theme="dark"] .sidebar {
  background-color: #0b1220 !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .sidebar .nav-link {
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .sidebar .nav-link.active {
  background-color: rgba(13,110,253,0.12) !important;
}


[data-bs-theme="dark"] .navbar {
  background-color: #071019 !important;
  color: #e6eef8 !important;
}


[data-bs-theme="dark"] .offcanvas .btn-close {
  filter: invert(1) brightness(1.2);
}


[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .table {
  background-color: #0f1724 !important;
  color: #e6eef8 !important;
}


[data-bs-theme="dark"] .btn-outline-secondary {
  color: #e6eef8;
  border-color: rgba(255,255,255);
}

@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 80% !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  #keypad .btn {
    transition: none !important;
  }
}