/*----------------------Calendar- Datepickers----------------------*/
.datepicker {
    font-weight: 400 !important;
  }
  
  .datepicker-inline {
    width: inherit;
  }
  
  .datepicker table tr th {
    font-weight: 500 !important;
  }
  
  .datepicker table tr td,
  .datepicker table tr th {
    height: 30px;
    border-radius: 0px !important;
    text-align: center;
    width: 40px;
    font-size: 14px;
    line-height: 1.5em;
  }
  
  .datepicker table tr td.day:hover,
  .datepicker table tr td.focused {
    background: #c7c7c7;
  }
  
  .datepicker table tr td.old,
  .datepicker table tr td.new {
    color: #656565;
  }
  
  /* Property Detail Availability Calendar
  * --------------------------------------------------
  */
  #rns-style .cal-edits {
    color: #333;
    max-width: 450px;
    margin: 0 auto;
  }
  
  #rns-style .cal-edits table {
    margin: 0 auto;
    width: 100%;
    background: #fff;
  }
  
  #rns-style .cal-edits table tr th {
    font-weight: 500;
    font-size: 18px;
  }
  
  #rns-style .cal-edits table tr td {
    font-weight: 500;
    font-size: 14px;
    padding: 10px 20px;
    border: #eee 1px solid;
    width: inherit;
  }
  
  td.blocked a {
    color: white;
  }
  
  .cal-edits.datepicker table tr td span {
    border-radius: 0px;
  }
  
  .blocked-arrival,
  .blocked-depart {
    color: white;
  }
  
  .past {
    background-color: #e0e0e0;
    color: #757575;
    pointer-events: none; /* Disable clicking */
  }
  
  /*flatpickr styles*/
  
  .flatpickr-calendar.inline {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  #inline-calendar-container .flatpickr-rContainer {
    width: 100%;
  }
  
  #inline-calendar-container .flatpickr-days {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  #inline-calendar-container .flatpickr-calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%; /* Ensure the calendar fills the available space */
  }
  
  #inline-calendar-container .flatpickr-months {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  
  .flatpickr-month {
    flex: 1; /* Allow each month to take up equal space */
    text-align: center;
    padding: 10px;
    border-radius: var(--radius-sm);
    background-color: #f8f8f8;
  }
  
  .flatpickr-weekdays {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  
  .flatpickr-weekdaycontainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  #inline-calendar-container.flatpickr-days {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  
  #inline-calendar-container .dayContainer {
    width: 100%;
    min-width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% / 4);
  }
  
  @media (max-width: 1900px) {
    #inline-calendar-container .dayContainer {
      width: calc(100% / 3);
    }
  }
  
  @media (max-width: 1300px) {
    #inline-calendar-container .dayContainer {
      width: calc(100% / 2);
    }
  }
  
  @media (max-width: 768px) {
    #inline-calendar-container .dayContainer {
      width: 100%;
    }
  }
  
  .flatpickr-day {
    max-width: 100%;
    min-width: auto;
    width: calc(100% / 7);
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    height: auto;
    border-radius: var(--radius-sm);
  }
  
  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay {
      /* Ensure these days take up the correct space and are styled */
      display: inline-block;
      width: calc(100% / 7);
      text-align: center;
      box-sizing: border-box;
      /* And their visual styling */
      color: #cccccc; /* Light grey, common for inactive/other month days */
      opacity: 0.7; /* Or any other value that makes them visible but distinct */
  }
  
  .flatpickr-next-month,
  .flatpickr-prev-month {
    cursor: pointer;
  }
  
  .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
  .flatpickr-current-month .flatpickr-monthDropdown-months:active {
    text-align: left;
  }
  
  .flatpickr-current-month .flatpickr-monthDropdown-months {
    text-align: center;
    font-weight: 600;
  }
  
  .flatpickr-current-month {
    font-size: 17px;
    padding: 0px;
  }
  
  .cur-month {
    margin-right: 10px;
  }
  
  .numInputWrapper {
    background-color: transparent;
    border: 1px solid #fff;
  }
  
  .numInputWrapper:hover {
    background-color: transparent;
    border: 1px solid #ccc;
  }
  
  .flatpickr-current-month .numInputWrapper {
    width: 7ch;
  }
  
  /* Optional: Add padding and background to each month container */
  
  /* Add margin around the calendar to give some space between months */
  .flatpickr-calendar {
    padding-bottom: 10px;
  }
  
  .flatpickr-current-month span.cur-month:hover {
    background-color: transparent;
  }
  
  /* Add space between the weekday container wrappers without breaking alignment */
  .flatpickr-weekdays .flatpickr-weekdaycontainer {
    padding: 0 15px; /* Space between weekdays */
  }
  
  /* Add space between the day container wrappers without breaking alignment */
  .flatpickr-days .dayContainer {
    padding: 0 15px; /* Space between day containers */
  }
  
  /* First Column */
  span.flatpickr-day:nth-child(n + 8),
  span.flatpickr-day.prevMonthDay:nth-child(n + 8),
  span.flatpickr-day.nextMonthDay:nth-child(n + 8) {
    border-top-color: #e9e9e9;
  }
  
  /* Last Column */
  span.flatpickr-day:nth-child(7n),
  span.flatpickr-day.prevMonthDay:nth-child(7n-6),
  span.flatpickr-day.nextMonthDay:nth-child(7n-6) {
    border: 1px solid #e9e9e9;
  }
  
  span.flatpickr-day:nth-child(7n-6),
  span.flatpickr-day.prevMonthDay:nth-child(7n-6),
  span.flatpickr-day.nextMonthDay:nth-child(7n-6) {
    border-left: 1px solid #e9e9e9;
  }
  
  /* Top Row */
  span.flatpickr-day:nth-child(-n + 7),
  span.flatpickr-day.prevMonthDay:nth-child(-n + 7),
  span.flatpickr-day.nextMonthDay:nth-child(-n + 7) {
    margin-top: 0;
  }
  
  span.flatpickr-day.today:not(.selected),
  span.flatpickr-day.prevMonthDay.today:not(.selected),
  span.flatpickr-day.nextMonthDay.today:not(.selected) {
    border-bottom: inset;
    border-color: #e9e9e9;
    border-right-color: #e9e9e9;
    border-top-color: #e9e9e9;
    border-bottom-color: var(--primary-color, #0056b3);
  }
  
  span.flatpickr-day.today:not(.selected):hover,
  span.flatpickr-day.prevMonthDay.today:not(.selected):hover,
  span.flatpickr-day.nextMonthDay.today:not(.selected):hover {
    border-bottom: inset;
    border-color: #e9e9e9;
    border-right-color: #e9e9e9;
    border-top-color: #e9e9e9;
    border-bottom-color: var(--primary-color, #0056b3);
  }
  
  span.flatpickr-day.startRange,
  span.flatpickr-day.prevMonthDay.startRange,
  span.flatpickr-day.nextMonthDay.startRange,
  span.flatpickr-day.endRange,
  span.flatpickr-day.prevMonthDay.endRange,
  span.flatpickr-day.nextMonthDay.endRange {
    border-color: var(--primary-color, #0056b3);
  }
  
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected.inRange,
  .flatpickr-day.startRange.inRange,
  .flatpickr-day.endRange.inRange,
  .flatpickr-day.selected:focus,
  .flatpickr-day.startRange:focus,
  .flatpickr-day.endRange:focus,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover,
  .flatpickr-day.selected.prevMonthDay,
  .flatpickr-day.startRange.prevMonthDay,
  .flatpickr-day.endRange.prevMonthDay,
  .flatpickr-day.selected.nextMonthDay,
  .flatpickr-day.startRange.nextMonthDay,
  .flatpickr-day.endRange.nextMonthDay {
    background: var(--primary-color, #0056b3);
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: var(--primary-color, #0056b3);
  }
  
  .flatpickr-day.today:hover,
  .flatpickr-day.today:focus {
    background: #e9e9e9;
    color: #333;
  }
  
  .rns-dateRange .rns-input-group-addon {
    position: absolute;
    left: 15px; /* Adjust this value as needed */
    top: 27%;
    color: #333; /* Change the color to match your design */
    font-size: 18px; /* Adjust the icon size */
    pointer-events: none; /* Prevent the icon from being clickable */
  }

  .property-content-wrapper .rns-dateRange .input {
    text-align: center;
    padding-right: 38px;
  }
  
  .rns-dateRange #dateRange {
    border-radius: 6px !important;
  }

  /* Make sure the date range wrapper has relative positioning */
  .date-range-wrapper {
    position: relative;
  }

  /* Flatpickr calendar positioning for fixed search bar */
  .date-range-wrapper .flatpickr-calendar,
  .search-bar-wrap .flatpickr-calendar {
    position: absolute !important;
    z-index: 1052 !important; /* Higher than search-bar-wrap z-index */
    top: 100% !important; /* Position below the date input */
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 5px !important; /* Small gap below the input */
  }
  
  #inline-calendar-container .flatpickr-calendar.arrowBottom:before {
    display: none;
  }
  
  #inline-calendar-container .flatpickr-calendar.arrowBottom:after {
    display: none;
  }
  
  /* Styles for selected arrival/departure days */
  .flatpickr-day.startRange.blocked-arrival,
  .flatpickr-day.startRange.blocked-depart,
  .flatpickr-day.endRange.blocked-arrival,
  .flatpickr-day.endRange.blocked-depart {
    background: var(--primary-color, #0056b3) !important;
    /* Add a prominent border to indicate selection */
    border: 2px solid var(--primary-color, #0056b3) !important;
    color: #fff !important;
  }
  
  /* Ensure hover states also get the border */
  .flatpickr-day.startRange.blocked-arrival:hover,
  .flatpickr-day.startRange.blocked-depart:hover,
  .flatpickr-day.endRange.blocked-arrival:hover,
  .flatpickr-day.endRange.blocked-depart:hover {
    border: 2px solid var(--primary-color, #0056b3) !important;
    /* Adjust opacity on hover if desired */
    /* opacity: 1; */
  }


  .flatpickr-day.inRange {
    border-radius: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}

.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
}

.blocked, .datepicker, .datepicker .blocked:hover {
    background-color: #757575 !important;
    color: #333 !important;
    cursor: default;
    border-radius: 0px !important;
}


.blocked-depart {
    background: -moz-linear-gradient(-44deg, #757575 0%, #757575 50%, #ffffff 53%, #ffffff 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(-44deg, #757575 0%, #757575 50%, #ffffff 53%, #ffffff 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(134deg, #757575 0%, #757575 50%, #ffffff 53%, #ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#00757575',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #333 !important;
    border-radius: 0px !important;
    border: none;
}



.blocked-arrival {
    background: -moz-linear-gradient(-44deg, #ffffff 0%, #ffffff 50%, #757575 53%, #757575 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(-44deg, #ffffff 0%, #ffffff 50%, #757575 53%, #757575 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(134deg, #ffffff 0%, #ffffff 50%, #757575 53%, #757575 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00757575', endColorstr='#757575',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #333 !important;
    border-radius: 0px !important;
    border: none;
}
/*add diagonal white line to blocked-split date to represent arrival and departure*/
.blocked-split {
    background-color: #757575 !important;
    color: #333 !important;
    border-radius: 0px !important;
}
.blocked-split::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(315deg, transparent 45%, white 48%, white 50%, transparent 52%);
    pointer-events: none;
}