/*
  April Korto Quioh /brands - SimplyBook custom CSS
  Paste this into SimplyBook.me Custom CSS.

  Booking setup in SimplyBook:
  - Service name: 90 Minute Strategy Session
  - Duration: 90 minutes
  - Availability: Tuesday-Thursday, 1:00 PM-3:00 PM PT

  CSS styles the booking page and displays that offer. Availability itself
  must be set in SimplyBook's schedule/service settings.
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;700;800;900&display=swap');

body,
#events,
#eventForm {
  color: #111111 !important;
  background:
    repeating-linear-gradient(90deg, rgba(245, 74, 165, .035) 0 1px, transparent 1px 16px),
    #FDF8F2 !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
}

#events::before,
#eventForm::before {
  content: '90-minute strategy sessions / Tuesday-Thursday / 1-3 PM PT';
  display: block !important;
  max-width: 700px;
  margin: 0 auto 18px !important;
  padding: 12px 16px !important;
  color: #111111 !important;
  background: #ECF375 !important;
  border: 2px solid #F6A8C9 !important;
  box-shadow: 5px 6px 0 rgba(245, 74, 165, .14) !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#events h3 {
  margin: 0 0 8px !important;
  color: #E85AAD !important;
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  font-size: clamp(42px, 8vw, 72px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: .9 !important;
  text-transform: uppercase !important;
}

#events p.duration,
#events div.duration {
  display: inline-block !important;
  margin: 8px 0 12px !important;
  padding: 7px 10px !important;
  color: #111111 !important;
  background: #ECF375 !important;
  border: 1.5px solid #F6A8C9 !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

#events p.description,
#events div.description {
  max-width: 640px !important;
  color: #111111 !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

#events .selectedEvent {
  background: #FFFDF9 !important;
  border: 2px solid #F6A8C9 !important;
  box-shadow: 8px 11px 0 rgba(245, 74, 165, .10), 0 18px 35px rgba(17, 17, 17, .08) !important;
}

#events input.reserve_time_btn,
#eventForm #save_button {
  min-height: 48px !important;
  padding: 12px 22px !important;
  color: #FFFDF9 !important;
  background: #E85AAD !important;
  border: 2px solid #E85AAD !important;
  border-radius: 999px !important;
  box-shadow: 5px 6px 0 rgba(17, 17, 17, .12) !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

#events input.reserve_time_btn:hover,
#events input.reserve_time_btn:focus,
#eventForm #save_button:hover,
#eventForm #save_button:focus {
  color: #111111 !important;
  background: #ECF375 !important;
  transform: translateY(-2px) rotate(-1deg) !important;
}

#events input.reserve_time_btn:active,
#eventForm #save_button:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 3px 0 rgba(17, 17, 17, .12) !important;
}

#events input.select_another_btn {
  min-height: 44px !important;
  padding: 10px 18px !important;
  color: #E85AAD !important;
  background: #FFFDF9 !important;
  border: 2px solid #F6A8C9 !important;
  border-radius: 999px !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  color: #E85AAD !important;
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  font-size: clamp(34px, 6vw, 52px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: .95 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

div.ui-widget-content {
  color: #111111 !important;
  background: #FFFDF9 !important;
  border: 1.5px solid #F6A8C9 !important;
  box-shadow: 5px 6px 0 rgba(245, 74, 165, .12) !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
}

div.ui-widget-header {
  color: #E85AAD !important;
  background: #FCE3EF !important;
  border: 0 !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#timeline-container table.timeline {
  width: 100% !important;
  overflow: hidden !important;
  background: #FFFDF9 !important;
  border: 2px solid #F6A8C9 !important;
  border-collapse: separate !important;
  border-spacing: 4px !important;
  box-shadow: 5px 6px 0 rgba(245, 74, 165, .12) !important;
}

.timeline td.not_worked_time {
  color: rgba(17, 17, 17, .35) !important;
  background:
    repeating-linear-gradient(45deg, rgba(246, 168, 201, .30) 0 4px, transparent 4px 8px),
    #FDF8F2 !important;
  border: 1px solid rgba(246, 168, 201, .35) !important;
}

.timeline td.free_time {
  color: #111111 !important;
  background: #ECF375 !important;
  border: 2px solid #F6A8C9 !important;
  cursor: pointer !important;
  font-weight: 900 !important;
}

.timeline td.free_time:hover,
.timeline td.free_time:focus {
  color: #FFFDF9 !important;
  background: #E85AAD !important;
}

.timeline td.selected_time {
  color: #FFFDF9 !important;
  background: #E85AAD !important;
  border: 2px solid #E85AAD !important;
  box-shadow: inset 0 0 0 2px #FFFDF9 !important;
  font-weight: 900 !important;
}

.timeline td.reserved_time {
  color: #5C5C5C !important;
  background: #FCE3EF !important;
  border: 1px solid #F6A8C9 !important;
  text-decoration: line-through !important;
}

div#loading {
  color: #E85AAD !important;
  background: #FFFDF9 !important;
  border: 2px solid #F6A8C9 !important;
  box-shadow: 5px 6px 0 rgba(245, 74, 165, .12) !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label,
start_date-block-container .zend_form dt,
start_date-block-container .zend_form dt b,
start_date-block-container .zend_form dd label {
  color: #111111 !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

@media (max-width: 680px) {
  #events::before,
  #eventForm::before {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  #events h3 {
    font-size: 44px !important;
  }

  #timeline-container table.timeline {
    border-spacing: 3px !important;
  }
}