@import url("https://fonts.googleapis.com/css2?family=Merriweather&display=swap");
/* GLOBAL STYLING */

.telegram-notifications--modal .btn,
.telegram-notifications--card .btn,
#main #main-buttons .btn.custom {
  color: #414b3b !important;
  background: #fff !important;
}

#header .nav-trigger span,
#header .nav-trigger span:before,
#header .nav-trigger span:after {
  background-color: #414b3b !important;
}

#header .nav-trigger {
  background: #fff !important;
}

#sb-timeline
  #steps
  #steps-content
  #sb_booking_content
  .detail-step
  .right-side
  #sb_book_btn {
  background: #414b3b !important;
  color: #fff !important;
}

#sb-timeline
  #steps
  #steps-content
  #sb_booking_content
  .datetime-step
  #sb_dateview_container
  .top-date-select
  .calendar
  .inner.selected,
#sb-timeline
  #steps
  #steps-content
  #sb_booking_content
  .datetime-step
  #sb_dateview_container
  .top-date-select
  .calendar
  .weeks-date
  .date.selected {
  background: #414b3b !important;
}

#sb-timeline
  #steps
  #steps-content
  #sb_booking_content
  .datetime-step
  #sb_dateview_container
  .top-date-select
  .calendar
  .weeks-date
  .date.selected
  .day-on,
#sb-timeline
  #steps
  #steps-content
  #sb_booking_content
  .datetime-step
  #sb_dateview_container
  .top-date-select
  .calendar
  .weeks-date
  .date.selected
  .day-off {
  color: #fff !important;
}

#sb-main-container .custom-checkbox input:checked + .custom-label:before,
#client-profile-edit .custom-checkbox input:checked + .custom-label:before {
  background: #414b3b !important;
}

.sb-cell.free.hovered,
.sb-cell.free:hover {
  background: #414b3b !important;
  color: #414b3b;
  font-weight: 600 !important;
}

.sb-cell {
  color: red;
}

#sb-timeline
  #steps
  #steps-content
  #sb_booking_content
  .item.panel
  .btn-bar
  .btn {
  border-radius: 50px !important;
}

#content-view #about-us .txt img {
  height: 24rem;
  width: 24rem;
  border-radius: 9999px;
}

div .txt p:nth-child(3) {
  margin-top: 25px;
  text-align: center;
}

#main #main-buttons .column .wrapper .inner .company-name {
  font-family: "Merriweather", serif;
  margin-left: 0px;
}

.btn.book,
.btn.promo {
  padding: 10px 50px !important;
}

/* ‘sm': '400px */
@media (min-width: 300px) {
  #content-view #about-us .txt img {
    height: 20rem;
    width: 24rem;
    border-radius: 9999px;
  }

  #header .nav-trigger {
    left: 10%;
  }

  .telegram-notifications--modal .btn,
  .telegram-notifications--card .btn,
  #main #main-buttons .btn.custom {
    margin-top: 14rem;
    margin-left: 0.5rem;
  }

  #main #main-buttons {
    background-size: 115% auto !important;
    background-position: 100% !important;
  }

  #header .nav-trigger {
    top: 20px !important;
  }

  #main #main-buttons .column .wrapper .inner .company-name {
    font-size: 16px;
    margin-top: 118px;
    margin-left: 38px;
    /* margin-bottom: 100px !important; */
  }
}

/* md': '768px */
@media (min-width: 768px) {
  #header .nav-trigger {
    left: 5%;
    top: 15px !important;
  }

  #main #main-buttons {
    background-color: #414b3b;
    background-size: cover !important;
    background-position: 60% !important;
  }

  #main #main-buttons .column .wrapper .inner .company-name {
    font-size: 64px;
    margin-bottom: 220px !important;
    margin-top: 0;
    margin-left: 125px !important;
  }

  .btn.book,
  .btn.promo {
    padding: 25px 60px !important;
    font-size: 25px !important;
    text-transform: uppercase !important;
  }

  .telegram-notifications--modal .btn,
  .telegram-notifications--card .btn,
  #main #main-buttons .btn.custom {
    margin-left: 7rem !important;
  }
}

/* lg': '1024px */
@media (min-width: 1024px) {
}

/* xl': '1280px */
@media (min-width: 1280px) {
}

/* ‘2xl': '1536px' */
@media (min-width: 1536px) {
}

/*
Custom CSS
Please make sure your CSS rules are
more particular / have higher priority
then other page styles
*/
#events h3 {
  /* add your css rule here */
}

#events p.duration,
#events div.duration {
  /* add your css rule here */
}

#events p.description,
#events div.description {
  /* add your css rule here */
}

#events .selectedEvent {
  /* add your css rule here */
}

#events input.reserve_time_btn {
  /* add your css rule here */
}

#events input.select_another_btn {
  /* add your css rule here */
}

#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  /* add your css rule here */
}

#eventForm #save_button {
  /* add your css rule here */
}

div.ui-widget-content {
  /* add your css rule here */
}

div.ui-widget-header {
  /* add your css rule here */
}

#timeline-container table.timeline {
  /* add your css rule here */
}

.timeline td.not_worked_time {
  /* add your css rule here */
}

.timeline td.free_time {
  /* add your css rule here */
}

.timeline td.selected_time {
  /* add your css rule here */
}

.timeline td.reserved_time {
  /* add your css rule here */
}

div#loading {
  /* add your css rule here */
}

#start_date-block-container .zend_form dt,
start_date-block-container .zend_form dt b,
start_date-block-container .zend_form dd label {
  /* add your css rule here */
}