.daterangepicker {
  position: absolute  ;
  color: inherit  ;
  background-color: #fff  ;
  border-radius: 30px  ;
  width: 278px  ;
  max-width: none  ;
  padding: 15px 20px  ;
  margin-top: 15px  ;
  top: 100px  ;
  left: 20px  ;
  z-index: 9999  ;
  display: none  ;
  font-family: arial  ;
  font-size: 15px  ;
  line-height: 1em  ;
  border: 1px solid #8080800f  ;
  box-shadow: 0px 2px 10px #0000001a  ;
}
@media screen and (max-width:576px) {
  .daterangepicker{
    max-height: 350px  ;
    overflow-y: auto  ;
    width: 85%  ;
    left: 0  ;
    right: 0  ;
    margin: 15px auto 15px auto  ;
    padding: unset  ;
  }
  .daterangepicker .drp-calendar.left,
  .daterangepicker .drp-calendar.right{
    padding: 8px 8px 8px 8px  ;
  }
  .daterangepicker .drp-calendar{
    max-width: 100%  ;
  }
  .daterangepicker td.in-range,
  .daterangepicker td.start-date,
  .daterangepicker td.end-date{
    border-radius: 5px  ;
  }
  .daterangepicker .drp-buttons{
    padding: 10px 5px  ;
  }
  .drp-buttons{
    text-align: center  ;
  }
}


.daterangepicker.opensleft:before {
  right: 9px  ;
}

.daterangepicker.opensleft:after {
  right: 10px  ;
}


.daterangepicker.opensright:before {
  left: 9px  ;
}

.daterangepicker.opensright:after {
  left: 10px  ;
}

.daterangepicker.drop-up {
  margin-top: -7px  ;
}

.daterangepicker.drop-up:before {
  top: initial  ;
  bottom: -7px  ;
  border-bottom: initial  ;
  border-top: 7px solid #ccc  ;
}

.daterangepicker.drop-up:after {
  top: initial  ;
  bottom: -6px  ;
  border-bottom: initial  ;
  border-top: 6px solid #fff  ;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none  ;
}

.daterangepicker.single .drp-selected {
  display: none  ;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block  ;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block  ;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none  ;
}

.daterangepicker .drp-calendar {
  display: none  ;
  max-width: 270px  ;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px  ;
}

.daterangepicker .drp-calendar.right {
  padding: 8px  ;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none  ;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff !important ;
  border: solid black   !important;
  border-width: 0 2px 2px 0   !important;
  border-radius: 0   !important;
  display: inline-block   !important;
  padding: 3px   !important;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg)  !important  ;
  -webkit-transform: rotate(-45deg)   !important;
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg)   !important;
  -webkit-transform: rotate(135deg)   !important;
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap   !important;
  text-align: center   !important;
  vertical-align: middle   !important;
  min-width: 32px   !important;
  width: 32px   !important;
  height: 32px   !important;
  /* line-height: 24px   !important; */
  font-size: clamp(0.9rem,0.9vw,0.9rem)   !important;
  border-radius: 50px   !important;
  border: 1px solid transparent   !important;
  white-space: nowrap   !important;
  cursor: pointer   !important;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff   !important;
  border-radius: 4px   !important;
  background-color: #fff   !important;
}

.daterangepicker .calendar-table table {
  width: 100%   !important;
  margin: 0   !important;
  border-spacing: 5px   !important;
  border-collapse: separate   !important;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  border-color: #222 !important ;
  color: inherit  !important;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%  ;
  color: #ccc  ;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff  !important;
  border-color: transparent  !important;
  color: #999  !important;
}

.daterangepicker td.in-range {
  background-color: #2221 !important  ;
  border-color: transparent  !important;
  color: #000  !important;
  border-radius: 50px  !important;
}

.daterangepicker td.start-date {
  border-radius: 50px  ;
}

.daterangepicker td.end-date {
  border-radius: 50px  ;
}

.daterangepicker td.start-date.end-date {
  border-radius: 50px  ;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #222 !important ;
  border-color: transparent  !important;
  color: #fff  !important;
}

.daterangepicker th.month {
  width: auto  !important;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999  !important;
  cursor: not-allowed  !important;
  text-decoration: line-through  !important;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px  !important;
  padding: 1px  !important;
  height: auto  !important;
  margin: 0  !important;
  cursor: default  !important;
}

.daterangepicker select.monthselect {
  margin-right: 2%  ;
  width: 56%  ;
}

.daterangepicker select.yearselect {
  width: 40%  ;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px  ;
  margin: 0 auto  ;
  background: #eee  ;
  border: 1px solid #eee  ;
  padding: 2px  ;
  outline: 0  ;
  font-size: 12px  ;
}

.daterangepicker .calendar-time {
  text-align: center  ;
  margin: 4px auto 0 auto  ;
  line-height: 30px  ;
  position: relative  ;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc  ;
  cursor: not-allowed  ;
}

.daterangepicker .drp-buttons {
  clear: both  ;
  text-align: right  ;
  padding: 8px  ;
  border-top: 1px solid #ddd  ;
  display: none  ;
  line-height: 12px  ;
  vertical-align: middle  ;
}

.daterangepicker .drp-selected {
  display: inline-block  ;
  font-size: clamp(0.9rem,0.9vw,0.9rem)  ;
  padding-right: 8px  ;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px  ;
  font-size: clamp(0.9rem,0.9vw,0.9rem)  ;
  font-weight: bold  ;
  padding: 4px 8px  ;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd  ;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd  ;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd  ;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd  ;
}

.daterangepicker .ranges {
  float: none  ;
  text-align: left  ;
  margin: 0  ;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px  ;
}

.daterangepicker .ranges ul {
  list-style: none  ;
  margin: 0 auto  ;
  padding: 0  ;
  width: 100%  ;
}

.daterangepicker .ranges li {
  font-size: clamp(0.9rem,0.9vw,0.9rem)  ;
  padding: 8px 12px  ;
  cursor: pointer  ;
  margin: 0px 0 5px 0  ;
}

.daterangepicker .ranges li:hover {
  background-color: #222;
  border-radius: 5px 0 0 5px  ;
}

.daterangepicker .ranges li.active {
  background-color: #222  !important;
  color: #fff  !important;
  border-radius: 5px 0 0 5px !important ;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto  ;
  }

  .daterangepicker .ranges ul {
    width: 140px  ;
  }

  .daterangepicker.single .ranges ul {
    width: 100%   ;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none  ;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left  ;
  }

  .daterangepicker {
    direction: ltr  ;
    text-align: left  ;
  }

  .daterangepicker .drp-calendar.left {
    clear: left  ;
    margin-right: 0  ;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none  ;
    border-top-right-radius: 0  ;
    border-bottom-right-radius: 0  ;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0  ;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none  ;
    border-top-left-radius: 0  ;
    border-bottom-left-radius: 0  ;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px  ;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left  ;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto  ;
  }

  .daterangepicker .ranges {
    float: left  ;
  }

  .daterangepicker.rtl .ranges {
    float: right  ;
  }

  .daterangepicker .drp-calendar.left {
    clear: none  ; 
  }
}

.calendar-table td, .calendar-table th {
	font-weight: revert !important;
}
.calendar-table th {
	color: unset !important;
}