.custom-date > .tremor-DateRangePicker-root > .tremor-DateRangePicker-button {
  box-shadow: none;
  width: 100%;
  background-color: transparent;
}

/* Media query for screens larger than 768px */
@media (max-width: 639) {
  .custom-date > .tremor-DateRangePicker-root > .tremor-DateRangePicker-button {
    max-width: 400px;
  }
}

.recharts-cartesian-grid-horizontal line {
  @apply stroke-emphasis;
}

.tremor-DateRangePicker-button button {
  @apply border-default hover:border-emphasis !h-9 !max-h-9;
}

.tremor-DateRangePicker-calendarButton,
.tremor-DateRangePicker-dropdownButton {
  @apply border-subtle bg-default focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0;
}

.tremor-DateRangePicker-dropdownModal {
  @apply divide-none;
}

.tremor-DropdownItem-root {
  @apply bg-default hover:bg-subtle text-default hover:text-emphasis !h-9 !max-h-9;
}

.tremor-DateRangePicker-calendarButtonText,
.tremor-DateRangePicker-dropdownButtonText {
  @apply text-default;
}

.tremor-DateRangePicker-calendarHeaderText {
  @apply !text-default;
}

.tremor-DateRangePicker-calendarHeader svg {
  @apply text-default;
}

.tremor-DateRangePicker-calendarHeader button {
  @apply hover:bg-emphasis shadow-none focus:ring-0;
}

.tremor-DateRangePicker-calendarHeader button:hover svg {
  @apply text-emphasis;
}

.tremor-DateRangePicker-calendarButtonIcon {
  @apply text-default;
}

.tremor-DateRangePicker-calendarModal,
.tremor-DateRangePicker-dropdownModal {
  @apply bg-default border-subtle shadow-dropdown;
}

.tremor-DateRangePicker-calendarBodyDate button {
  @apply text-default  hover:bg-emphasis;
}

.tremor-DateRangePicker-calendarBodyDate button:disabled,
.tremor-DateRangePicker-calendarBodyDate button[disabled] {
  @apply opacity-25;
}

.tremor-DateRangePicker-calendarHeader button {
  @apply border-default text-default;
}

.tremor-DateRangePicker-calendarBodyDate .bg-gray-100 {
  @apply bg-subtle;
}

.tremor-DateRangePicker-calendarBodyDate .bg-gray-500 {
  @apply !bg-brand-default text-inverted;
}

.tremor-Card-root {
  @apply bg-default p-5;
}

.tremor-TableCell-root {
  @apply pl-0;
}

.recharts-responsive-container {
  @apply -mx-4;
}
.tremor-Card-root > p {
  @apply mb-2 text-base font-semibold;
}

.tremor-Legend-legendItem {
  @apply ml-2;
}

.tremor-TableBody-root {
  @apply divide-subtle;
}