.react-datepicker-wrapper {
  width: 100%;
}

.react-datepicker-wrapper input {
  width: 100%;
  height: var(--input-height);
  font-size: var(--input-font-size);
  padding-inline-start: var(--input-padding);
  padding-inline-end: var(--input-padding);
  border-radius: var(--chakra-radii-2xl);
  min-width: 0px;
  outline: transparent solid 2px;
  outline-offset: 2px;
  position: relative;
  appearance: none;
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  --input-font-size: var(--chakra-fontSizes-lg);
  --input-padding: var(--chakra-space-4);
  --input-border-radius: var(--chakra-radii-md);
  --input-height: var(--chakra-sizes-12);
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-color: inherit;
  background: inherit;
}

div.react-datepicker {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  border: 1px solid var(--chakra-colors-brand-500);
  border-radius: 1rem;
}

div.react-datepicker-popper
  div.react-datepicker__month-container
  div.react-datepicker__header {
  background-color: var(--chakra-colors-brand-500);
  border-bottom: 0;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  color: var(--chakra-colors-white);
  padding: 0.8rem;
}

div.react-datepicker-popper
  div.react-datepicker__month-container
  div.react-datepicker__month
  div.react-datepicker__day,
div.react-datepicker-popper
  div.react-datepicker__month-container
  div.react-datepicker__header
  div.react-datepicker__day-name {
  width: 2.4rem;
  line-height: 2rem;
  margin: 0.166rem;
  border-radius: 0.25rem;
}

div.react-datepicker-popper
  div.react-datepicker__month-container
  div.react-datepicker__month
  div.react-datepicker__week
  div.react-datepicker__day--selected {
  background-color: var(--chakra-colors-brand-500);
  color: black;
}

div.react-datepicker-popper
  div.react-datepicker
  div.react-datepicker__triangle::before,
div.react-datepicker-popper
  div.react-datepicker
  div.react-datepicker__triangle::after {
  border-top: none;
  border-bottom-color: var(--chakra-colors-brand-500);
}