:root {
  --sg-red: #e11d2e;
  --sg-red-dark: #8f111a;
  --sg-ink: #101719;
  --sg-cream: #f8f2e9;
  --sg-gold: #d0a34f;
}

body {
  background:
    linear-gradient(135deg, rgba(225, 29, 46, 0.035), rgba(208, 163, 79, 0.035)),
    var(--sg-cream) !important;
}

#book-appointment-wizard {
  border: 1px solid rgba(16, 23, 25, 0.1);
}

#header,
#book-appointment-wizard #header {
  background:
    linear-gradient(120deg, rgba(16, 23, 25, 0.96), rgba(16, 23, 25, 0.86)),
    var(--sg-red) !important;
  border-top: 6px solid var(--sg-red) !important;
  border-bottom: 2px solid var(--sg-gold) !important;
}

#company-logo {
  max-height: 76px !important;
  max-width: min(230px, 70vw);
  object-fit: contain;
}

#book-appointment-wizard #company-name > span {
  color: #fff;
  font-weight: 700;
}

#book-appointment-wizard #company-name .display-selected-service,
#book-appointment-wizard #company-name .display-selected-provider,
#book-appointment-wizard #company-name .display-booking-selection {
  color: rgba(248, 242, 233, 0.76) !important;
  border-right-color: rgba(248, 242, 233, 0.45) !important;
}

#book-appointment-wizard .book-step:not(.active-step) {
  background: rgba(225, 29, 46, 0.42) !important;
}

#book-appointment-wizard .book-step.active-step strong {
  color: var(--sg-red) !important;
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar span.flatpickr-weekday {
  background: var(--sg-red) !important;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected.inRange,
.flatpickr-calendar .flatpickr-day.selected.nextMonthDay,
.flatpickr-calendar .flatpickr-day.selected.prevMonthDay,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.startRange.inRange,
.flatpickr-calendar .flatpickr-day.startRange.nextMonthDay,
.flatpickr-calendar .flatpickr-day.startRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.startRange:focus,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.endRange.inRange,
.flatpickr-calendar .flatpickr-day.endRange.nextMonthDay,
.flatpickr-calendar .flatpickr-day.endRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.endRange:focus,
.flatpickr-calendar .flatpickr-day.endRange:hover {
  background: var(--sg-red) !important;
  border-color: var(--sg-red) !important;
}

#book-appointment-wizard #available-hours .available-hour {
  border-color: rgba(225, 29, 46, 0.45);
  color: var(--sg-ink);
}

#book-appointment-wizard #available-hours .selected-hour {
  background-color: var(--sg-red) !important;
  border-color: var(--sg-red) !important;
  color: #fff !important;
}

.sg-booking-footer {
  background: #fff;
  color: rgba(16, 23, 25, 0.68);
}

.sg-booking-footer .footer-powered-by {
  color: rgba(16, 23, 25, 0.72);
  font-weight: 700;
}

.btn-primary {
  background-color: var(--sg-red) !important;
  border-color: var(--sg-red) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

@media (max-width: 767.98px) {
  #company-logo {
    max-height: 66px !important;
  }

  #book-appointment-wizard #company-name {
    line-height: 1.25 !important;
  }
}