.react-datepicker {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  overflow: hidden;
}

.react-datepicker-wrapper,
.react-datepicker__input-container {
  display: block;
}

.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.react-datepicker__day:focus-within {
  outline: 0;
  box-shadow: none;
}

.react-datepicker__day-name {
  border-radius: 0.25rem;
}
.react-datepicker__day-name:hover {
  background: hsl(9, 76%, 82%);
}

.react-datepicker__input-container {
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  border: 1px solid;
  border-color: hsl(0, 0%, 80%);
}

.react-datepicker__input-container:focus-within {
  z-index: 1;
  border-color: #3182ce;
  box-shadow: 0 0 0 1px #3182ce;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 200ms;
}

.react-datepicker__input-container > input {
  width: 100%;
  height: 100%;
  outline: 0;
}

.react-datepicker__week-number {
  color: hsl(9, 76%, 72%);
}

.react-datepicker__navigation--previous {
  border-right-color: hsl(9, 76%, 52%);
}
.react-datepicker__navigation--previous:hover {
  border-right-color: hsl(9, 76%, 72%);
}

.react-datepicker__navigation--next {
  border-left-color: hsl(9, 76%, 52%);
}
.react-datepicker__navigation--next:hover {
  border-left-color: hsl(9, 76%, 72%);
}

.react-datepicker__header {
  border-radius: 0;
  background: #f7fafc;
}

.react-datepicker,
.react-datepicker__header,
.react-datepicker__time-container {
  border-color: #e2e8f0;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  font-size: inherit;
  font-weight: 600;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  margin: 0 1px 0 0;
  height: auto;
  padding: 7px 10px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  background: hsl(9, 76%, 82%);
}

li.react-datepicker__time-list-item .react-datepicker__time-list-item--selected:hover {
  background: hsl(9, 76%, 82%);
}

.react-datepicker__time-list-item .react-datepicker__time-list-item--selected:hover {
  background: hsl(9, 76%, 82%) !important;
}

.react-datepicker__day--outside-month {
  opacity: 35%;
}

/* .react-datepicker__navigation-icon--previous::before {
  transform: rotate(-45deg);
}

.react-datepicker__navigation-icon--next::before {
  transform: rotate(135deg);
} */
.react-datepicker__header--time {
  height: 54.04px;
  /* display: none; */
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  height: 237px !important; /* Have to use !important because of react-datepicker overriding styles */
}

.react-datepicker__day:hover {
  background: hsl(9, 76%, 82%);
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background: hsl(9, 76%, 52%);
  font-weight: normal;
}
.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background: hsl(9, 76%, 82%);
}

.react-datepicker__day--keyboard-selected {
  background: hsl(9, 76%, 82%);
  font-weight: normal;
}
.react-datepicker__day--keyboard-selected:hover {
  background: hsl(9, 76%, 82%);
}

.react-datepicker__children-container {
  position: unset;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  width: 210.24px;
}