.ui-loader {
    display: none;
  }

  .ml-calendar .ml-btn.cal-day.cal-day-block-booking.cal-day-block-booking-first {
    opacity: 1!important;
  }
  
  .ml-calendar .ml-btn.cal-day.cal-day-block-booking.cal-day-block-booking-first:hover {
    color: var(--mag-color-opacity-1) !important; /* rgb(13, 135, 99) */
  }
  
  @media (max-width: 768px) {
    .umm-16zjdih {
      bottom: 11% !important;
    }
  }
  .ml-calendar tbody tr td {
    height: 44px;
    width: 45px;
    border: 1px solid #fff;
  }
  
  .ml-calendar .cal-day {
    font-size: 16px !important;
    font-weight: 600 !important;
    height: 100%;
    width: 100%;
    margin-right: auto !important;
    margin-left: auto !important;
    display: block;
    padding: 2px 0;
    width: 100%;
    border: 1px solid var(--mag-color-opacity-1) !important; /* rgb(13, 135, 99) */
    color: var(--mag-color-opacity-1) !important; /* rgb(13, 135, 99) */
    border-radius: 6px !important;
  }
  .ml-calendar .cal-day:hover {
    background-color: var(--mag-color-1)!important; /* RGB(28, 169, 118) */
    color: RGB(255, 255, 255) !important;
    border-color: var(--mag-color-1)!important; /* RGB(28, 169, 118) */
  }
  
  .ml-calendar tbody tr td button.cal-day-block-booking-last {
    background-image: none !important;
    border: 1px solid var(--mag-color-opacity-1) !important; /* rgb(13, 135, 99) */
    color: var(--mag-color-opacity-1) !important; /* rgb(13, 135, 99) */
    border-radius: 6px !important;
  }
  
  .ml-calendar tbody tr td button.cal-day-selected-first, .ml-calendar tbody tr td button.cal-day-selected-first:not(.cal-day-block-booking):hover {
    background-image: none !important;
    background-color: var(--mag-color-1)!important; /* RGB(28, 169, 118) */
    color: RGB(255, 255, 255) !important;
    border-color: var(--mag-color-1)!important; /* RGB(28, 169, 118) */
  }
  
  .ml-calendar tbody tr td button.cal-day-selected-last, .ml-calendar tbody tr td button.cal-day-selected-last:not(.cal-day-block-booking):hover {
    background-image: none !important;
    background-color: var(--mag-color-1)!important; /* RGB(28, 169, 118) */
    color: rgb(255, 255, 255) !important;
    border-color: var(--mag-color-1)!important; /* RGB(28, 169, 118) */
  }
  
  .ml-calendar tbody tr td button.cal-day-selected:not(.cal-day-block-booking), .ml-calendar tbody tr td button.cal-day-selected:not(.cal-day-block-booking):hover {
    border-color: var(--mag-color-opacity-1) !important; /* RGB(146, 239, 182) */
    color: RGB(255, 255, 255) !important;
    background-color: var(--mag-color-opacity-1) !important; /* RGB(146, 239, 182) */
  }
  
  .ml-calendar button.cal-day[disabled], .ml-calendar button.cal-day[disabled]:hover, .legend-item[disabled], .legend-item[disabled]:hover {
    background: none !important;
    border: 1px solid #fff !important;
  }
  
  .ml-calendar tbody tr td button.cal-day-block-booking:not(.cal-day-block-booking-first):not(.cal-day-block-booking-last), .legend-item.cal-day-block-booking, .legend-item.cal-day-block-booking:hover {
    text-decoration: line-through !important;
    cursor: default;
    border: none !important;
    background: url(/img/calendar_pattern.png) !important;
    background-image: url(/img/calendar_pattern.png) !important;
    -webkit-background-size: 6px 6px !important;
    -moz-background-size: 6px !important;
    -o-background-size: 6px !important;
    background-size: 6px !important;
    color: RGB(212, 50, 40) !important;
  }
  
  .ml-btn.outOfSeason {
    border-color: RGB(255, 255, 255) !important;
    color: RGB(198, 198, 198) !important;
  }
  
  .ml-form-control {
    box-shadow: none !important;
  }
  
  .ml-calendar thead tr.day-week {
    background-color: transparent !important;
    color: var(--header-week-txt) !important;
    font-size: 0.8em !important;
    font-weight: bold !important;
    text-align: center !important;
  }
  
  .ml-form-control {
    border: none !important;
  }
  
  .nextMonth, .prevMonth {
    background-color: #e6e6e6 !important;
  }
  
  .ml-calendar th, .ml-calendar td {
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
  }
  
  .ml-calendar thead tr.month-title td.month-name {
    border-bottom: 20px solid white;
    text-transform: lowercase !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .ml-calendar thead tr.month-title td.month-name::first-letter {
    text-transform: uppercase;
  }
  
  .ml-calendar thead tr.month-title {
    background-color: #fff !important;
    color: rgb(34, 34, 34) !important;
  }
  
  .ml-calendar thead tr.day-week td.day-name {
    text-transform: lowercase !important;
    font-weight: 600 !important;
    color: rgb(113, 113, 113) !important;
  }
  .ml-calendar thead tr.day-week td.day-name::first-letter {
    text-transform: uppercase;
  }
  
  .nextMonth, .prevMonth {
    background-color: transparent !important;
    border: 1px solid rgb(34, 34, 34) !important;
    border-radius: 6px !important;
    padding: 0 !important;
  }
  .nextMonth i, .prevMonth i {
    font-size: 16px !important;
    padding: 8px 13px !important;
  }
  .nextMonth:hover, .prevMonth:hover {
    background-color: rgb(247, 247, 247) !important;
  }
  
  .top-row .ml-calendar-year, .top-row .ml-calendar-month {
    display: none;
  }

.datepicker__month-button {
    display: inline-block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
    color: #acb2c1 !important;
    text-decoration: none;
    padding: 10px 10px !important;
    border: none !important;
    background-color: #e6e6e6 !important;
    border-radius: 0px !important;
  }
  
  .datepicker__week-name {
    font-size: 12px;
    font-weight: 400;
    font-family: Nunito Sans, Helvetica, Roboto, Arial;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
  }
  
  .datepicker__month-caption {
    border-bottom: none !important;
    height: 2.5em;
    vertical-align: middle;
  }
  
  .datepicker__month-day {
    padding: 16px 11px !important;
    font-size: 15px;
  }
  
  .datepicker__month-day--disabled:after {
    content: none !important;
  }
  
  /* .datepicker {
    background-color: #fff;
    box-shadow: 8px 8px 40px 5px rgba(0, 0, 0, 0.08);
    color: rgb(34, 34, 34) !important;
    font-family: "Nunito Sans", "Helvetica Neue", "Arial", sans-serif;
    font-size: 14px;
    line-height: 14px;
    left: 21% !important;
    border-radius: 20px !important;
    font-weight: 400;
  } */
  
  .datepicker__month-name {
    font-size: 14px;
  }
  
  @media (max-width: 768px) {
    .datepicker__month-day {
      padding: 16px 8px !important;
      font-size: 15px;
    }
  }
  .datepicker__month-button--next, .datepicker__month-button--prev {
    background-color: transparent !important;
    border-radius: 50px !important;
    height: 40px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: rgb(34, 34, 34) !important;
    font-size: 18px;
  }
  .datepicker__month-button--next i, .datepicker__month-button--prev i {
    font-size: 16px !important;
    color: #000 !important;
  }
  .datepicker__month-button--next:hover, .datepicker__month-button--prev:hover {
    background-color: rgb(247, 247, 247) !important;
    border-radius: 50px !important;
    height: 40px !important;
    width: 40px !important;
  }
  
  .datepicker__month-day--hovering, .datepicker__month-day--selected {
    background-color: rgb(247, 247, 247) !important;
    color: #fff;
    border-radius: 0px !important;
    color: rgb(34, 34, 34) !important;
  }
  
  .datepicker__month-day--first-day-selected {
    background-color: rgb(34, 34, 34) !important;
    color: #fff !important;
    background-image: none !important;
    border-radius: 50% 0 0 50% !important;
  }
  
  .datepicker__month-day--last-day-selected {
    background-color: rgb(34, 34, 34) !important;
    color: #fff !important;
    background-image: none !important;
    border-radius: 50% !important;
    border-radius: 0 50% 50% 0 !important;
  }
  
  .datepicker__month-day--today {
    background-color: rgb(34, 34, 34) !important;
  }
  
  #f_from, #f_to {
    cursor: pointer;
  }