.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 0px;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left, .daterangepicker.show-ranges.ltr .drp-calendar.right {
  padding-block: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 2);
}

.daterangepicker .ranges li {
  border-radius: 4px;
  background-color: var(--color-cool-grey-100);
  margin-bottom: calc(var(--spacing) * 1.5);
}

.daterangepicker .ranges li.active {
  background-color: var(--color-brand-primary-500);
}

.daterangepicker .ranges li:hover {
  background-color: var(--color-cool-grey-200);
}

.daterangepicker .ranges { padding-top: 0; }

.daterangepicker .ranges ul {
  padding: calc(var(--spacing) * 3);
}

.daterangepicker td.in-range {
  background-color: var(--color-cool-grey-100);
}

.daterangepicker td.active, 
.daterangepicker td.active:hover {
  background-color: var(--color-brand-primary-500);
}



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

.daterangepicker .month { color: var(--color-brand-primary-500);}
.daterangepicker .table-condensed tr th:not(.month) { 
  color: var(--color-gray-400); 
  font-weight: 400;
  padding-block: calc(var(--spacing) * 1);
}

.daterangepicker {
  position: absolute;
  left: 0;
  right: auto;
  width: auto;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
}

@media (min-width: 640px) {
  .daterangepicker {
    width: 650px;
  }
}