:root {
  --page-actions-h: 72px; /* btn-block line-height + vertical margins */
}
.main {padding-bottom: calc(16px + var(--bottom-nav-h));}
.main:has(.page-actions) {
  padding-bottom: calc(
    16px + var(--page-actions-h) + max(56px, env(safe-area-inset-bottom, 0px))
  );
}
.detail-action--recharge, .detail-action--plans {border: 1px solid rgba(2, 22, 77, 1)}
.btn-primary:hover, .btn-primary:focus-visible {background: none;}
.biller-card {margin: 0 auto 30px auto;}
.form-group select {height: 62px}
.btn-block {padding: 9.5px 0}
/* Pin page CTAs to the bottom of the scrollport (Cedrus only) */
.page-actions {
  position: fixed;
  bottom: 0;
  z-index: 5;
  width: 100%;
  padding-bottom: max(56px, env(safe-area-inset-bottom, 0px));
  background: rgba(241,245,248,.5);
}

#app .btn-secondary,
#app .btn-secondary.btn-block {
  background: #fff;
  color: rgba(2, 22, 77, 1);
  border: 1.5px solid rgba(2, 22, 77, 1);
}

#app .btn-secondary:hover,
#app .btn-secondary:focus-visible,
#app .btn-secondary.btn-block:hover,
#app .btn-secondary.btn-block:focus-visible {
  background: rgba(2, 22, 77, 0.12);
  color: rgba(2, 22, 77, 1);
  border: 1.5px solid rgba(2, 22, 77, 1);
}

#app .appointment-calendar-day--selected,
#app .appointment-flatpickr .flatpickr-day.selected,
#app .appointment-flatpickr .flatpickr-day.selected:hover,
#app .appointment-slot--selected,
#app .appointment-check--on {
  background: rgba(2, 22, 77, 1);
  border-color: rgba(2, 22, 77, 1);
  color: #fff;
}

#app .appointment-flatpickr .flatpickr-day.today {
  border-color: rgba(2, 22, 77, 1);
}

#app .appointment-flatpickr .flatpickr-prev-month:hover svg,
#app .appointment-flatpickr .flatpickr-next-month:hover svg {
  fill: rgba(2, 22, 77, 1);
}

#app .appointment-apptype-card--selected {
  border-color: rgba(2, 22, 77, 1);
  background: rgba(2, 22, 77, 0.04);
}

#app .appointment-apptype-card--selected .appointment-apptype-icon {
  background: rgba(2, 22, 77, 0.12);
  color: rgba(2, 22, 77, 1);
}

#app .appointment-fee-card {
  background: rgba(2, 22, 77, 0.04);
  border-color: rgba(2, 22, 77, 0.25);
}

#app .appointment-fee-row .appointment-fee-label,
#app .appointment-fee-amount {
  color: rgba(2, 22, 77, 1);
}

#app .appointment-fee-divider {
  background: rgba(2, 22, 77, 0.25);
}

#app .appointment-pill--active {
  background: rgba(2, 22, 77, 1);
  border-color: rgba(2, 22, 77, 1);
  color: #fff;
}

#app .appointment-provider-row--selected {
  border-color: rgba(2, 22, 77, 1);
  background: rgba(2, 22, 77, 0.04);
}

#app .appointment-provider-row--selected .appointment-avatar {
  background: rgba(2, 22, 77, 0.12);
  color: rgba(2, 22, 77, 1);
}

#app .appointment-provider-row--selected .appointment-provider-next {
  color: rgba(2, 22, 77, 1);
}

#app .appointment-status--booked {
  background: rgba(2, 22, 77, 0.04);
  color: rgba(2, 22, 77, 1);
}

#app .appointment-meeting-link {
  color: rgba(2, 22, 77, 1);
}

#app .appointment-reschedule-btn {
  border-color: rgba(2, 22, 77, 1);
  color: rgba(2, 22, 77, 1);
}

#app .appointment-success-icon {
  background: rgba(2, 22, 77, 1);
}