#datepicker {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 10px;
  display: none;
  height: 200px;
  width: 200px;
  z-index: 99999999999999;
  justify-content: center;
  align-items: center;
  flex: 1;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#datepicker #calendar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--duct-tape-grey);
  height: 100%;
  width: 100%;
  gap: 5px;
  border-radius: 10px;
  padding: 5px;
}

#datepicker #calendar-legend {
  display: flex;
  background-color: var(--surrender-white);
  justify-content: center;
  align-items: center;
  color: var(--stepwork-pencil-lead);
  font-size: var(--xs);
  font-weight: 600;
  border-radius: 5px;
  height: 100%;
  width: 100%;
  flex: 1;
}

#datepicker #previous-month {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#datepicker #legend-text {
  flex: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#datepicker #next-month {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#datepicker #previous-month,
#datepicker #next-month {
  height: 80%;
}

#datepicker #previous-month svg,
#datepicker #next-month svg {
  height: 70%;
}

#datepicker #calendar-body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  flex: 7;
}

#datepicker #days-of-the-week {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: var(--xxs);
  gap: 5px;
  flex: 1;
}

#datepicker #days-of-the-week div {
  color: var(--surrender-white);
  border-radius: 5px;
  background-color: var(--stepwork-pencil-lead);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#datepicker .days {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: var(--xxs);
  flex: 1;
  gap: 5px;
}

#datepicker .cell {
  border-radius: 5px;
  background-color: var(--surrender-white-5o);
  color: var(--two-or-more-years-5o);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex: 1;
  cursor: pointer;
}

#datepicker .digit {
  /* background-color: #e8fdee; */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#datepicker .active {
  background-color: var(--surrender-white);
  color: var(--two-or-more-years);
}

#datepicker .selected {
  background-color: var(--sixty-day-green);
  color: var(--surrender-white);
}