/* Include all your custom booking widget CSS here */
        /* ... [Insert your original <style> block here] ... */
        
        /* Essential Header Transition Styles */
        .header-bg-white { background-color: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
        .text-green-custom { color: #00a63e; }
        .text-white-custom { color: white; }

.reserveport-form-wrap{
    border-radius: 20px;
    padding:5px;
}


#booking-widget h2 {  font-size: 2.5rem; }

.hbf{
    display: none;
}


#booking-widget .notify-container .fa,
#booking-widget .notify-container h4.notify-title,
#booking-widget .notify-text span.timerspan,
#modalbookingForm .modal-header {
  color: #ffffff !important;
}
 
#booking-widget a:hover, #booking-widget .show-cp:hover,
#booking-widget .vue-show-details:hover,
#booking-widget .vue-show-tc:hover,
#vue-havepromo.vue-horizontal,
#booking-widget h1.room-title:hover {
  color: #00a63e;
}
 
/** Fonts  */
#booking-widget .vue-date-box label,
#booking-widget .content-body,
#booking-widget .vue-content-body,
#booking-widget p, #booking-widget span {
  font-family: ui-serif,Georgia"Times New Roman",Times,serif !important;
}
 
#booking-widget .reserveport-form-wrap h3,
#booking-widget h1.room-title,
#booking-widget h2, .modal-title,
#booking-widget .vue-side_top_card h3 {
  font-family: 'Inter Fallback' !important;
  font-weight: 500;
}
 
 
/** Buttons  */
.mx-calendar-content .cell.active,
#vue-toggle_residency .vue-btn,
#booking-widget .btn-orange-solid,
#booking-widget .btn-solid,
#booking-widget .sub-total .btn.btn-solid,
#booking-widget .vue-btn-proceed,
#booking-widget #summery-submit.btn-proceed {
  border: 2px solid #00a63e !important;
  border-radius: 100px;
  background: #00a63e !important;
  color: #ffffff;
  transition: all 0.3 ease;
  text-align: center;
}


#vue-toggle_residency .vue-btn.active,
#booking-widget .btn-orange-solid:hover,
#vue-toggle_residency .vue-btn.active:hover,
#booking-widget .btn-solid:hover,
#booking-widget .sub-total .btn.btn-solid:hover,
#booking-widget .vue-btn-proceed:hover,
button#submitFormBtn:hover,
#vue-btn-managebooking:hover,
#booking-widget #summery-submit.btn-proceed:hover {
  background-color: #008236 !important;
  border-radius: 100px;
  border-color: #008236 !important;
  color: white !important;
  transition: all 0.3s ease;
}
 
#booking-widget .hotel .notify-container,
#booking-widget .reserveport-iframe-wrap .notify-container,
#booking-widget #alert-msg.ui-pnotify.ui-pnotify-inline {
  background: #00a63e !important;
}
 
#booking-widget .close {
  padding: 4px 6px;
  background: #150e07;
  opacity: 1;
}
 
/** Modals */
 
.modal-backdrop.show { display: none !important; }
#myModal { background: #0009; }
.fade {  opacity: 1; }
 
 
#occupancy-control {
  display: flex;
  justify-content: space-between;
}
 
/** Image color */
#bedimg, booking-widget .pull-right img {
filter: brightness(0) saturate(100%) invert(33%) sepia(74%) saturate(2387%) hue-rotate(127deg) brightness(98%) contrast(101%);
}
 
/** Mandatory permanent styles */
 
/** Desktop View  */
svg,
#booking-widget h1.room-title,
#booking-widget h2 {
  margin-bottom: 0 !important;
  color: auto;
  text-align: left;
}

#booking-widget .vue-date-box[data-v-07c68727] {
  box-shadow: 0 0 12px 5px rgba(0, 0, 0, .1);
  transition: all 0.3s ease-in-out;
}
 
.vue-offers-card .card-img-top:hover {
  transform: scale(3.5) translate(-5rem,-3rem);
  transition: transform .5s ease;
}
 
#booking-widget .vue-btnbb { padding: 0; }
 
#booking-widget #vue-dropdown-home.dropdown-menu { width: fit-content; }
 
 
/** Single room page */
 
#booking-widget .room-view .row {
  margin-bottom: 2rem;
}
 
#booking-widget .icon { right: 2rem; }
 
#booking-widget label { font-weight: normal; }
 
#booking-widget .room-title-details .pull-right .btn-solid {
  margin-left: auto;
  left: 0;
  bottom: 0;
}
 
#image-lightbox { justify-content: center; }
 
#image-lightbox .row { margin-left: 0 !important; }
 
#booking-widget .vue-card-unit-footer,
#booking-widget .vue-right-side, #booking-widget .vue-mrg0 {
  padding-left: 15px !important;
}
 
 
/** Mobile View */
col-md-3.col-sm-4.vue-btn-wrap.avail-wrap.vue-md_p5 {
  max-width: 100%;
  flex: unset;
}
 
.mobile_booking_wrapper { left: 0; }
 
#modalbookingForm { padding-top: 4rem; }
 
#booking-widget .responsive { max-width: unset; }
 
.owl-carousel .owl-item img, #booking-widget .room-full-slider img {
  max-height: 400px;
  object-fit: cover;
  margin: auto;
}
 
#booking-widget .room-title-details.row, #image-lightbox,
#booking-widget .room-title-details .pull-right, figure {
  display: flex;
}
 
#booking-widget #vue-smallScreen input, #booking-widget #vue-smallScreen .vue-small_large_select {
  text-transform: uppercase;
  font-size: 1em;
}
 
#booking-widget #single-garden-selection.form-control {
  height: stretch;
}
 
#image-lightbox .modal-dialog, #image-lightbox .vue-lightbox img {
  width: max-content;
  max-width: 800px;
}
 
@media only screen and (max-width: 768px) {
  #booking-widget .board-select .col-md-3 { max-width: 24%;}
}
 
@media only screen and (max-width: 600px) {
 
  #image-lightbox .modal-dialog {
    position: relative;
    transform: translate(0%, 0%) !important;
    left: 0;
    max-width: none;
  }
 
  .vue-mobile .col-md-6.col-xs-6 { width: 50%; }
 
  #image-lightbox .row { margin-right: 0; }
 
  #booking-widget .room-title-details.row { justify-content: space-between; }
 
  #booking-widget .room-title-details.row  .col-md-7,
  #booking-widget .room-title-details.row  .col-md-5 {
    width: fit-content;
  }
 
  #image-lightbox .vue-lightbox img { width: 100%; }
 
  .room-full-slider { width: 576px; }
}