/**
 * Event Filter Date Range — panel styles on the main .daterangepicker div.
 * Filters Dropdown design settings target .daterangepicker.decm-event-filter-daterangepicker.
 * Loaded after dec-date-picker-style on the PHP frontend.
 */

/* Preset list only — match other filter dropdowns (248px). */
.daterangepicker.decm-event-filter-daterangepicker:not(.show-calendar) {
  width: 248px !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: 0 !important;
  padding: 16px 20px 24px;
  background-color: #fff;
  border: 2px solid #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 14%);
  font-family: inherit;
  z-index: 9999 !important;
}

.daterangepicker.decm-event-filter-daterangepicker::before,
.daterangepicker.decm-event-filter-daterangepicker::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

.daterangepicker.decm-event-filter-daterangepicker .ranges {
  float: none !important;
  text-align: left;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.daterangepicker.decm-event-filter-daterangepicker .ranges ul {
  list-style: none;
  margin: 0;
  padding: 0 !important;
  width: 100% !important;
  background: transparent;
}

.daterangepicker.decm-event-filter-daterangepicker .ranges ul li {
  list-style: none;
  cursor: pointer;
  border-style: solid;
  border-color: black;
  margin: 4px 0;
  border-radius: 4px;
  padding: 8px 12px !important;
  font-size: inherit;
  background-color: transparent;
  color: inherit;
}

.daterangepicker.decm-event-filter-daterangepicker .ranges ul li:hover,
.daterangepicker.decm-event-filter-daterangepicker .ranges ul li.active {
  background-color: transparent;
  color: inherit;
}

/* Custom Range / calendar mode — restore library layout widths and floats. */
.daterangepicker.decm-event-filter-daterangepicker.show-calendar {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: 0 !important;
  padding: 0;
  font-family: inherit;
  z-index: 9999 !important;
}

.daterangepicker.decm-event-filter-daterangepicker.show-calendar .ranges {
  margin-top: 8px !important;
  width: auto !important;
  background: transparent !important;
}

@media (min-width: 564px) {
  .daterangepicker.decm-event-filter-daterangepicker:not(.show-calendar) {
    width: 248px !important;
  }

  .daterangepicker.decm-event-filter-daterangepicker:not(.show-calendar) .ranges ul {
    width: 100% !important;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar {
    width: auto !important;
    direction: ltr;
    text-align: left;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .ranges,
  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .drp-calendar {
    float: left !important;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .ranges ul {
    width: 140px !important;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .drp-calendar {
    max-width: 270px;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 8px;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 730px) {
  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .ranges {
    width: auto !important;
    float: left !important;
  }

  .daterangepicker.decm-event-filter-daterangepicker.show-calendar .drp-calendar.left {
    clear: none !important;
  }
}
