/* font size */
.react-datepicker.npp-datepicker {
    font-size: 1em;
    border: 1px solid var(--c_input_border);
    overflow:hidden;
    border-radius: 5px;
    color: var(--c_black);
    /* day-width (3em), margin (4px), left+right month margin (1em), time (6em), border (3px) */
    min-width: calc((3em * 7 + 4px * 14 + 6em) + 0.6em + 0.65em * var(--font-size-multiplier));
}
/* doesnt have time  */
.react-datepicker.npp-datepicker:not(:has(.react-datepicker__header--time)) {
    /* width: calc(3em * 7 + 4px * 14 + 1em + 3px); */
}

.npp-datepicker .react-datepicker__current-month, 
.npp-datepicker .react-datepicker-time__header, 
.npp-datepicker .react-datepicker-year-header {
    font-size: 1.15em;
    cursor: default;
}


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

/* regular day */
.npp-datepicker .react-datepicker__day-name,
.npp-datepicker .react-datepicker__day {
  width: 3em;
  height: 3em;
  /* center the text in the div */
  line-height: 3em;
  color: var(--c_black);
  margin: 4px;
}

.npp-datepicker .react-datepicker__day,
.npp-datepicker .react-datepicker__day:not([aria-disabled="true"]):hover, 
.npp-datepicker .react-datepicker__month-text:not([aria-disabled="true"]):hover, 
.npp-datepicker .react-datepicker__quarter-text:not([aria-disabled="true"]):hover, 
.npp-datepicker .react-datepicker__year-text:not([aria-disabled="true"]):hover {
    border-radius: 0.45em;
}

/* .react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover, .react-datepicker__month-text--keyboard-selected:not([aria-disabled="true"]):hover, .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled="true"]):hover, .react-datepicker__year-text--keyboard-selected:not([aria-disabled="true"]):hover {
  color: inherit;
} */

.npp-datepicker .react-datepicker__day-name {
    color: var(--c_dark-gray);
    font-weight: 400;
    cursor: default;
}

/* regular day hover */
.npp-datepicker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover,
.npp-datepicker .react-datepicker__day:not([aria-disabled="true"]):hover, 
.npp-datepicker .react-datepicker__month-text:not([aria-disabled="true"]):hover, 
.npp-datepicker .react-datepicker__quarter-text:not([aria-disabled="true"]):hover, 
.npp-datepicker .react-datepicker__year-text:not([aria-disabled="true"]):hover {
  background-color: var(--c_lighter_blue);
}

/* today */
.npp-datepicker .react-datepicker__day.react-datepicker__day--today {
  position: relative;
  font-weight: 500;
  background: var(--c_white);
}
.npp-datepicker .react-datepicker__day.react-datepicker__day--today:hover {
  color: var(--c_black);
}

.npp-datepicker .react-datepicker__day.react-datepicker__day--selected.react-datepicker__day--today:hover {
  color: var(--c_white);
}

.npp-datepicker .react-datepicker__day.react-datepicker__day--today::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 0;
  height: 0;
  border-bottom: 7px solid var(--c_light_blue);
  border-left: 7px solid transparent;
}
.npp-datepicker .react-datepicker__day.react-datepicker__day--selected.react-datepicker__day--today::before {
    border-bottom-color: var(--c_white);
}

/* not selected */

/* .npp-datepicker
  .react-datepicker__day--keyboard-selected:not(.react-datepicker__day--selected):not([aria-disabled="true"]):hover {
  color: var(--c_black);
  background-color: var(--c_slightly_lighter_blue);
} */

.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
  background-color: inherit;
}

/* selected date and time */
.npp-datepicker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
.npp-datepicker .react-datepicker__time-list-item--selected,
.npp-datepicker .react-datepicker__month-container .react-datepicker__day--selected {
  background-color: var(--c_light_blue);
  color: var(--c_white);
  font-weight: 600;
}

.npp-datepicker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover,
.npp-datepicker .react-datepicker__month-container .react-datepicker__day--selected:hover {
    background-color: var(--c_slightly_lighter_blue);
    color: var(--c_white);
}

/* disabled date */
.npp-datepicker .react-datepicker__day--disabled, 
.npp-datepicker .react-datepicker__month-text--disabled, 
.npp-datepicker .react-datepicker__quarter-text--disabled, 
.npp-datepicker .react-datepicker__year-text--disabled {
  color: var(--c_lightest-gray);
  cursor: not-allowed;
}


/* header */
.npp-datepicker .react-datepicker__current-month, 
.npp-datepicker .react-datepicker-time__header, 
.npp-datepicker .react-datepicker-year-header,
.npp-datepicker .react-datepicker__header {
  background-color: var(--c_white);
  color: var(--c_black);
  font-weight: 600;
  text-transform: capitalize;
  border-bottom: 1px solid var(--c_input_border);
}
.npp-datepicker .react-datepicker__header {
    border-color: var(--c_input_border);
    padding: 0;
    height: 3em;
    line-height: 3em;
}
.npp-datepicker .react-datepicker__navigation {
    height: 3em;
}

/* arrows */

.npp-datepicker .react-datepicker__navigation-icon {
    top: 1px;
}

.npp-datepicker .react-datepicker__navigation-icon::before, 
.npp-datepicker .react-datepicker__year-read-view--down-arrow, 
.npp-datepicker .react-datepicker__month-read-view--down-arrow, 
.npp-datepicker .react-datepicker__month-year-read-view--down-arrow {
  border-color: var(--c_dark-gray);
}
.npp-datepicker .react-datepicker__navigation:hover ::before {
  border-color: var(--c_black);
}


/* time in time list */
.npp-datepicker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
    height: 2.5em;
    line-height: 2.5em;
    padding: 0;
}

.npp-datepicker .react-datepicker__time-container .react-datepicker__time {
    background: unset;
}

.npp-datepicker .react-datepicker__month-container {
  border-right: 1px solid var(--c_input_border);
}
.npp-datepicker .react-datepicker__time-container {
  border-left: none;
}

/* .npp-datepicker .react-datepicker__time-container,
.npp-datepicker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    width: 6em; 
} */
.npp-datepicker .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: calc(4em + 2em * var(--font-size-multiplier)); 
}

/* scrollbar */
.npp-datepicker .react-datepicker__time-list::-webkit-scrollbar {
  width: 20px;
}

.npp-datepicker .react-datepicker__time-list::-webkit-scrollbar-track {
  background: var(--c_cool_white);
}

.npp-datepicker .react-datepicker__time-list::-webkit-scrollbar-thumb {
  background-color: var(--c_light-gray);
}

.npp-datepicker .react-datepicker__time-list::-webkit-scrollbar-button:single-button {
  background-color: var(--c_light-gray);
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}

.npp-datepicker .react-datepicker__time-list::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-radius: 10px 10px 0 0;
  height: 20px;
  background-color: var(--c_light-gray);
  background-image: url("/assets/img/scrollup.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 5px;
}

.npp-datepicker .react-datepicker__time-list::-webkit-scrollbar-button:single-button:vertical:increment {
  border-radius: 0 0 10px 10px;
  height: 20px;
  background-color: var(--c_light-gray);
  background-image: url("/assets/img/scrolldown.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 5px;
}
.npp-datepicker .react-datepicker__time-list {
  scrollbar-color: var(--c_light-gray) var(--c_cool_white);
  scrollbar-width: auto;
}

.npp-datepicker .react-datepicker__month-container {
  float: none;
  display: inline-block;
  vertical-align: top;
}

/* floating fixes for small browser zooms */
.react-datepicker.npp-datepicker:has(.react-datepicker__time-container)
  .react-datepicker__month-container {
  margin-right: 6em;
}
.npp-datepicker .react-datepicker__time-container {
  float: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 6em;
  min-width: 6em;
  box-sizing: border-box;
  z-index: 1;
  background: var(--c_white);
  border-left: none;
}

.npp-datepicker
  .react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box {
  width: 6em;
}