.custom-datepicker {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  max-width: 320px;
  background: #1A1A1A;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
  z-index: 1000;
}

.custom-datepicker.active {
  display: block;
}

.datepicker-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 9px;
}

.datepicker-header button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.datepicker-header button:not(:disabled):hover svg path {
  fill: #FFFFFF;
}

.current-month {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
}

.datepicker-weekdays {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[7];
      grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.datepicker-weekdays div {
  text-align: center;
  font-size: 13.5px;
  font-weight: 400;
  color: #808080;
}

.datepicker-days {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[7];
      grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.datepicker-days .day {
  aspect-ratio: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 13.5px;
  line-height: 0;
  font-weight: 400;
  color: #FFFFFF;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #FFFFFF52;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
  background-color: transparent;
}

.datepicker-days .day:hover:not(.disabled) {
  background-color: #FFFFFF29;
  border: 1px solid #FFFFFF;
}

.datepicker-days .day.other-month {
  color: #808080;
  border: 1px solid #FFFFFF3D;
}

.datepicker-days .day.other-month:hover:not(.disabled) {
  background-color: #FFFFFF29;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.datepicker-days .day.other-month.selected {
  border: 1px solid #FFFFFF;
}

.datepicker-days .day.selected {
  border: 1px solid #FFFFFF;
}

.datepicker-days .day.disabled {
  color: #4D4D4D;
  cursor: default;
  background-color: #1A1A1A;
  border: none;
}

select.input-field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #1A1A1A;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 12px 16px;
  color: #FFFFFF;
  font-size: 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_819_15386' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_819_15386)'%3E%3Cpath d='M11.5016 14.4002L7.98681 10.8732C7.93831 10.8245 7.90365 10.7734 7.88281 10.7197C7.86198 10.6659 7.85156 10.6083 7.85156 10.5469C7.85156 10.4241 7.89515 10.3148 7.98231 10.2189C8.06931 10.1231 8.18406 10.0752 8.32656 10.0752H15.6716C15.8166 10.0752 15.9328 10.1227 16.0203 10.2177C16.1078 10.3127 16.1516 10.4235 16.1516 10.5502C16.1516 10.5752 16.1057 10.6835 16.0141 10.8752L12.5016 14.4002C12.4266 14.4752 12.3474 14.5294 12.2641 14.5627C12.1807 14.596 12.0932 14.6127 12.0016 14.6127C11.9099 14.6127 11.8224 14.596 11.7391 14.5627C11.6557 14.5294 11.5766 14.4752 11.5016 14.4002Z' fill='%23808080'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 24px;
  padding-right: 48px;
}

select.input-field option {
  background: #1A1A1A;
  color: #FFFFFF;
  padding: 12px;
  font-size: 14px;
}
/*# sourceMappingURL=custom-datepicker.css.map */