.daterangepicker .ranges li {
    transition: background-color 0.3s ease;
}

.daterangepicker .ranges li:hover {
    background-color: var(--secondary-background);
}

@media (prefers-color-scheme: dark) {
  .daterangepicker {
    background-color: #333;
    color: #fff !important;
    border-color: #aaa4;
  }

  .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background-color: transparent;
  }

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

  .daterangepicker:after {
    border-bottom: 6px solid #aaa4;
  }

  .daterangepicker .drp-buttons {
    border-top-color: #aaa4;
  }

  .daterangepicker .calendar-table {
    background-color: #444;
    border-color: #aaa4;
    color: #fff;
  }

  .daterangepicker .calendar-table th {
    background-color: #555;
    color: #fff;
  }

  .daterangepicker .calendar-table td.active {
    background-color: #007bff;
    color: #fff;
  }

  .daterangepicker .calendar-table td.in-range {
    background-color: #0056b3;
    color: #fff;
  }
}