:root {
  --date-picker-np-hover-color: rgb(218, 218, 218);
}

.date-picker-body-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.date-picker-week-days-container > div {
  line-height: 14px;
  padding: 4px 0 8px;
}

.date-picker-dates-container > div {
  /* padding: 8px 0; */
  line-height: 30px;
  height: 30px;
  cursor: pointer;
}

.date-picker-dates-container .prev-month-days,
.date-picker-dates-container .next-month-days {
  opacity: 0.4;
  cursor: default;
}

.date-picker-dates-container
  > div:not(
    .prev-month-days,
    .next-month-days,
    .date-picker-date-disabled,
    .date-picker-selected-date
  ):hover {
  background: var(--date-picker-np-hover-color);
}

/* For today date */
.date-picker-dates-container .date-picker-selected-date {
  background: rgb(0, 133, 177);
  color: white;
}

.date-picker-dates-container > .date-picker-date-disabled {
  background: white;
  opacity: 0.4;
  cursor: default;
}