@layer components {
  .date-input {
    .single-daterange {
      @apply rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 font-light text-sm;
    }
  }

  .daterangepicker {
    .hourselect, .minuteselect, .ampmselect {
      @apply rounded-md shadow-sm focus:ring-primary-500 font-light;
      @apply border-gray-300 focus:border-primary-500 bg-white !important;
      text-align-last: center;
    }

    .calendar-table .active {
      @apply bg-primary-500 !important;
    }
  }
}