/**
 * rome - Customizable date (and time) picker. Opt-in UI, no jQuery!
 * @version v2.1.22
 * @link https://github.com/bevacqua/rome
 * @license MIT
 */
 .rd-container {
    display: none;
    /*border: 1px solid #333;*/
    background-color: #fff;
    padding: 10px;
    text-align: center;
    /** box-shadow: 0 15px 30px 0 rgba(0,0,0,.2); */
  
  }
  .rd-container-attachment {
    position: absolute;
  }
  .rd-month {
    display: inline-block;
    margin-right: 25px;
  }
  .rd-month:last-child {
    margin-right: 0;
  }
  .rd-back,
  .rd-next {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    margin: 0;
  }
  .rd-back[disabled],
  .rd-next[disabled] {
    cursor: default;
  }
  .rd-back {
    float: left;
    margin-left: 10px;
  }
  .rd-next {
    float: right;
    margin-right: 10px;
  }
  .rd-back:before {
    display: block;
    content: '\2190';
  }
  .rd-next:before {
    display: block;
    content: '\2192';
  }
  .rd-day-body {
    cursor: pointer;
    text-align: center;
    /* new */
    line-height: 0;
    width: 50px!important;
    height: 50px!important;/* Use */
    .rd-day-body.booked-mid {
        background-color: #f67280; /* Your highlight color */
    }
  }
  /*.rd-day-selected {
     border: 1.5px solid grey;
    border-radius: 50%; 
  }*/
  .booked-mid{
    cursor: pointer;
    background-color: #f67280 !important;
    color: #fff;
    /* new */
  }
  .booked-start,
  .booked-end {
    position: relative; /* Needed for absolute positioning of pseudo-elements */
    cursor: pointer;
    color: #fff;
    z-index: 1; /* Ensure that the z-index is higher than the pseudo-elements */
  }
  
  .booked-start:before,
  .booked-end:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 82.5%; /* Half width */
    z-index: -1; /* Lower z-index to place this behind the content */
    background-color: #f67280;
    background-clip: content-box; /* Ensures background is clipped to content */
  }
  
  .booked-start:before {
    right: 0;
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
  }
  
  .booked-end:after {
    left: 0;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
  }
  
  /* Additional styles to ensure text is visible */
  .rd-day-body {
    position: relative; /* Establish a stacking context */
    z-index: 2; /* Place text above the pseudo-elements */
  }
  
  .other-mid {
    cursor: pointer;
    background-color: black; /* A blue color */
    color: #fff;
  }

  .other-start,
  .other-end {
    position: relative; /* Needed for absolute positioning of pseudo-elements */
    cursor: pointer;
    color: #fff;
    z-index: 1; /* Ensure that the z-index is higher than the pseudo-elements */
  }
  
  .other-start:before,
  .other-end:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 82.5%; /* Adjusted to your specific needs */
    z-index: -1;
    background-color: black; /* A blue color */
    background-clip: content-box;
  }
  
  .other-start:before {
    right: 0;
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
  }
  
  .other-end:after {
    left: 0;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
  }
  
  /* Default styles for confirmed bookings */
.rd-day-body.confirmed {
    opacity: 1; /* Full opacity for confirmed bookings */
}

/* Adjusted styles for tentative bookings */
.rd-day-body.tentative {
    color:white;
    opacity: 0.33; /* Lower opacity for tentative bookings */
}


  .rd-day-prev-month,
  .rd-day-next-month {
    color: #ccc;
    opacity:0;
  }
  .rd-day-disabled {
    cursor: default;
    color: #fcc;
  }
  .rd-time {
    position: relative;
    display: inline-block;
    margin-top: 5px;
    min-width: 80px;
  }
  .rd-time-list {
    display: none;
    position: absolute;
    overflow-y: scroll;
    max-height: 160px;
    left: 0;
    right: 0;
    background-color: #fff;
    color: #333;
  }
  .rd-time-selected {
    padding: 5px;
  }
  .rd-time-option {
    padding: 5px;
  }
  .rd-day-concealed {
    visibility: hidden;
  }
  
  .rd-days {
    margin-top: 20px;
  }