/* TGE Software theme for the Easy!Appointments booking page. */
#book-appointment-wizard {
  --tge-blue: #1f4fd8;
  --tge-green: #36cf9e;
  --tge-gradient: linear-gradient(90deg, var(--tge-blue), var(--tge-green));
  --bs-primary: var(--tge-blue);
  --bs-primary-rgb: 31, 79, 216;
}

/* Banner image replaces the logo, company name and service | provider text. */
#book-appointment-wizard #header {
  background: #04121f url('TGESoftwareConnectionsBanner-730x64.png') left center / cover no-repeat !important;
  min-height: 64px;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Keep the step tiles to the right so they never cover the TGE logo. */
#book-appointment-wizard #header #steps {
  margin-left: auto !important;
  margin-right: 0 !important;
}

#book-appointment-wizard .book-step:not(.active-step) {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

#book-appointment-wizard .book-step:not(.active-step) strong {
  color: rgba(255, 255, 255, 0.85) !important;
}

#book-appointment-wizard .button-next,
#book-appointment-wizard #book-appointment-submit,
#book-appointment-wizard #available-hours .selected-hour,
#book-appointment-wizard .backend-link {
  background: var(--tge-gradient) !important;
  border-color: transparent !important;
  background-origin: border-box !important;
  color: #fff !important;
}

#book-appointment-wizard .button-next:hover,
#book-appointment-wizard #book-appointment-submit:hover,
#book-appointment-wizard .backend-link:hover {
  filter: brightness(1.1);
}

#book-appointment-wizard .flatpickr-day.selected,
#book-appointment-wizard .flatpickr-day.selected:hover {
  background: var(--tge-blue) !important;
  border-color: var(--tge-blue) !important;
}

#book-appointment-wizard .flatpickr-months .flatpickr-month,
#book-appointment-wizard .flatpickr-weekdays,
#book-appointment-wizard span.flatpickr-weekday,
#book-appointment-wizard .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--tge-blue) !important;
}