.daterangepicker {
    border-radius: var(--theme--border-radius);
    color:var(--theme--text-color);
    font-family: inherit;
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
  height:31px;
  line-height:31px;
}
.daterangepicker table tr:nth-child(even),
.daterangepicker table thead {
    background:#fff;
}
.daterangepicker td.start-date {
    border-radius: 16px 0 0 16px;
}
.daterangepicker td.end-date {
    border-radius: 0 16px 16px 0;
}
.daterangepicker td.start-date.end-date{
    border-radius: 16px;
}
.daterangepicker td.in-range {
  background-color: color-mix(
        in srgb,
        var(--theme--primary-color) 20%,
        transparent
    );
}
.daterangepicker td.active, .daterangepicker td.active:hover{
  background-color: var(--theme--primary-color);
}
.daterangepicker td.available:not(.active):hover, .daterangepicker th.available:not(.active):hover{
      background-color: var(--theme--primary-color);
    color:#fff;
}

.daterangepicker.opensright:before{
    left: 10%;
}
.daterangepicker.opensright:after{
    left: calc(10% + 1px);
}

.datesrangepickerWrapper.additional-modal-styling {
    position: fixed;
    left:0;
    top:0;
    height:100%;
    width:100vw;
    background-color: #000000aa;
    z-index:3;
    padding:5vw;
    display:flex;
    justify-content:center;
    align-items:center;
}
.datesrangepickerWrapper.additional-modal-styling .daterangepicker{
    position: absolute;
    top: 50%!important;
    left: 0!important;
    right: 0!important;
    transform: translateY(-50%)!important;
    margin: 2em;
    padding:1rem;
    width: calc(100% - 4em)!important;

}
.datesrangepickerWrapper.additional-modal-styling .daterangepicker.show-calendar .ranges{
    margin:0;
}
.datesrangepickerWrapper.additional-modal-styling  .daterangepicker:after{
   display:none;
}
.datesrangepickerWrapper.additional-modal-styling  .daterangepicker:before{
    display:none;
}

.datesrangepickerWrapper.additional-modal-styling .daterangepicker{
    width:100%;
    border:0;
}

.datesrangepickerWrapper.additional-modal-styling .daterangepicker .drp-calendar{
  max-width:unset;
}

.datesrangepickerWrapper.additional-modal-styling .daterangepicker .drp-calendar.left .calendar-table {
    border-right: 0px solid #fff !important;
}

#datePickerModalWrapper .datesrangepickerWrapper.additional-modal-styling{
    position: relative;
    background: transparent;
    z-index: 0;
    padding: 0;
}

@media screen and (min-width:560px) and (max-width:1023px){
 .datesrangepickerWrapper.additional-modal-styling .daterangepicker .drp-calendar{
     width:50%;
 }   
}

@media screen and (min-width:786px) and (max-width:1023px){

.datesrangepickerWrapper.additional-modal-styling .daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
    height:50px;
    line-height:50px;
 }   
}

@media screen and (min-width:900px) and (max-width:1023px){
    .datesrangepickerWrapper.additional-modal-styling .daterangepicker{
        width: calc(100% - 25vw)!important;
        left:50%!important;
        transform: translate(-50%,-50%)!important;
    }
}