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;
}

.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;
}

.branch-reference-card {
  position: sticky;
  top: 1rem;
}

.branch-reference-scroll {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.progress-table-scroll {
  max-height: 520px;
  overflow-y: auto;
}

.branch-ref-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.outlet-name-cell {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outlet-code-btn {
  font-size: 0.85rem;
  text-decoration: none;
}

.outlet-code-btn:hover {
  text-decoration: underline;
}

.brand-accordion-btn {
  font-size: 0.9rem;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.brand-count-badge {
  font-size: 0.7rem;
  font-weight: 500;
}

.brand-benne-dosa { --brand-color: #e67e22; --brand-bg: #fdebd0; }
.brand-caffe-allora { --brand-color: #8e44ad; --brand-bg: #ebdef0; }
.brand-cha { --brand-color: #16a085; --brand-bg: #d1f2eb; }
.brand-cream-centre { --brand-color: #d35400; --brand-bg: #fdebd0; }
.brand-dobaraa { --brand-color: #c0392b; --brand-bg: #fadbd8; }
.brand-eight { --brand-color: #2c3e50; --brand-bg: #d6dbdf; }
.brand-fyole { --brand-color: #27ae60; --brand-bg: #d5f5e3; }
.brand-ishaara { --brand-color: #2980b9; --brand-bg: #d6eaf8; }
.brand-legume { --brand-color: #7d6608; --brand-bg: #f9e79f; }
.brand-default { --brand-color: #6c757d; --brand-bg: #f8f9fa; }

.brand-benne-dosa .brand-dot,
.brand-caffe-allora .brand-dot,
.brand-cha .brand-dot,
.brand-cream-centre .brand-dot,
.brand-dobaraa .brand-dot,
.brand-eight .brand-dot,
.brand-fyole .brand-dot,
.brand-ishaara .brand-dot,
.brand-legume .brand-dot,
.brand-default .brand-dot {
  background-color: var(--brand-color);
}

.brand-benne-dosa .brand-accordion-btn,
.brand-caffe-allora .brand-accordion-btn,
.brand-cha .brand-accordion-btn,
.brand-cream-centre .brand-accordion-btn,
.brand-dobaraa .brand-accordion-btn,
.brand-eight .brand-accordion-btn,
.brand-fyole .brand-accordion-btn,
.brand-ishaara .brand-accordion-btn,
.brand-legume .brand-accordion-btn,
.brand-default .brand-accordion-btn {
  background-color: var(--brand-bg);
}

.brand-benne-dosa .brand-count-badge,
.brand-caffe-allora .brand-count-badge,
.brand-cha .brand-count-badge,
.brand-cream-centre .brand-count-badge,
.brand-dobaraa .brand-count-badge,
.brand-eight .brand-count-badge,
.brand-fyole .brand-count-badge,
.brand-ishaara .brand-count-badge,
.brand-legume .brand-count-badge,
.brand-default .brand-count-badge {
  background-color: var(--brand-color) !important;
  color: #fff !important;
}

.brand-benne-dosa .branch-ref-table tbody tr:hover,
.brand-caffe-allora .branch-ref-table tbody tr:hover,
.brand-cha .branch-ref-table tbody tr:hover,
.brand-cream-centre .branch-ref-table tbody tr:hover,
.brand-dobaraa .branch-ref-table tbody tr:hover,
.brand-eight .branch-ref-table tbody tr:hover,
.brand-fyole .branch-ref-table tbody tr:hover,
.brand-ishaara .branch-ref-table tbody tr:hover,
.brand-legume .branch-ref-table tbody tr:hover,
.brand-default .branch-ref-table tbody tr:hover {
  background-color: var(--brand-bg);
}

.brand-panel-chevron {
  display: inline-block;
  width: 1rem;
  font-size: 0.75rem;
}

.branch-panel-chevron {
  display: inline-block;
  width: 1rem;
  font-size: 0.75rem;
}