.datepicker {
  width: -moz-min-content;
  width: min-content;
}
.datepicker span {
  font-size: 1.6rem;
}

.datepicker:not(.active) {
  display: none;
}

.datepicker-dropdown {
  position: absolute;
  z-index: 20;
  padding-top: 0.4rem;
}

.datepicker-dropdown.datepicker-orient-top {
  padding-top: 0;
  padding-bottom: 0.4rem;
}

.datepicker-picker {
  display: flex;
  flex-direction: column;
  border-radius: 0.4rem;
  background-color: #fff;
}

.datepicker-dropdown .datepicker-picker {
  box-shadow: 0 0.2rem 0.3rem rgba(29, 29, 29, 0.1), 0 0 0 0.1rem rgba(29, 29, 29, 0.1);
}

.datepicker-main {
  flex: auto;
  padding: 0.2rem;
}

.datepicker-footer {
  box-shadow: inset 0 0.1rem 0.1rem rgba(29, 29, 29, 0.1);
  background-color: #f4f4f4;
}

.datepicker-title {
  box-shadow: inset 0 -1px 1px rgba(29, 29, 29, 0.1);
  background-color: #f4f4f4;
  padding: 0.375rem 0.75rem;
  text-align: center;
}

.datepicker-controls {
  display: flex;
}

.datepicker-controls .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  position: relative;
  margin: 0;
  box-shadow: none;
  background-color: #f4f4f4;
  cursor: pointer;
  height: 5rem;
  text-align: center;
  white-space: nowrap;
}

.datepicker-controls .button:focus,
.datepicker-controls .button:active {
  outline: none;
}

.datepicker-controls .button:hover {
  background-color: #d4d4d4;
}

.datepicker-controls .button:focus {
  border-color: #0074e5;
}

.datepicker-controls .button:focus:not(:active) {
  box-shadow: 0 0 0 0.125rem rgba(44, 102, 251, 0.25);
}

.datepicker-controls .button:active {
  border-color: #0074e5;
}

.datepicker-controls .button[disabled] {
  cursor: not-allowed;
}

.datepicker-header .datepicker-controls .button {
  font-size: 2rem;
}

.datepicker-header .datepicker-controls .button:hover {
  background-color: #f0f0f0;
}

.datepicker-header .datepicker-controls .button:active {
  background-color: #f0f0f0;
}

.datepicker-footer .datepicker-controls .button {
  flex: auto;
  margin: calc(0.375rem - 1px) 0.375rem;
  border-radius: 0.2rem;
}

.datepicker-controls .view-switch {
  flex: auto;
}

.datepicker-controls .prev-button,
.datepicker-controls .next-button {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
  flex: 0 0 14.2857142857%;
}

.datepicker-controls .prev-button.disabled,
.datepicker-controls .next-button.disabled {
  visibility: hidden;
}

.datepicker-view,
.datepicker-grid {
  display: flex;
}

.datepicker-view {
  align-items: stretch;
  padding: 0.8rem;
}

.datepicker-grid {
  flex-wrap: wrap;
  flex: auto;
  min-width: 25rem;
  gap: 0.4rem 0;
}

.datepicker .days {
  display: flex;
  flex-direction: column;
  flex: auto;
}

.datepicker .days-of-week {
  display: flex;
}

.datepicker .week-numbers {
  display: flex;
  flex-direction: column;
  flex: 0 0 9.6774193548%;
}

.datepicker .weeks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: auto;
}

.datepicker span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  border-radius: 0.4rem;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  aspect-ratio: 1/1;
  width: 3.6rem;
}

.datepicker .week {
  flex: auto;
}

.datepicker-cell,
.datepicker .days .dow {
  aspect-ratio: 1/1;
  width: 3.6rem;
}

.datepicker-cell:not(.day) {
  flex-basis: 25%;
  height: 3.6rem;
}

.datepicker-cell:not(.disabled):hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

.datepicker-cell.focused:not(.selected) {
  background-color: #e4e4e4;
}

.datepicker-cell.selected {
  background-color: #0074e5;
  color: #fff;
}

.datepicker-cell.selected:hover {
  background-color: #0074e5;
  color: #fff;
}

.datepicker-cell.disabled {
  color: #8e8e8e;
}

.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled) {
  color: #8e8e8e;
}

.datepicker-cell.prev.selected,
.datepicker-cell.next.selected {
  color: #e4e4e4;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
  border-radius: 0;
  background-color: #f4f4f4;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
  background-color: #f4f4f4;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
  background-color: #f4f4f4;
}

.datepicker-cell.today:not(.selected) {
  background-color: #0074e5;
}

.datepicker-cell.today:not(.selected):not(.disabled) {
  color: #fff;
}

.datepicker-cell.today.focused:not(.selected) {
  background-color: #0074e5;
}

.datepicker-cell.range-end:not(.selected),
.datepicker-cell.range-start:not(.selected) {
  background-color: #0074e5;
  color: #fff;
}

.datepicker-cell.range-end.focused:not(.selected) {
  background-color: #d8d8d8;
}

.datepicker-cell.range-start.focused:not(.selected) {
  background-color: #d8d8d8;
}

.datepicker-cell.range-start:not(.range-end) {
  border-radius: 10rem 0 0 10rem;
}

.datepicker-cell.range-end:not(.range-start) {
  border-radius: 0 10rem 10rem 0;
}

.datepicker-cell.range {
  border-radius: 0;
  background-color: #dae5ff;
}

.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
  background-color: #d8d8d8;
}

.datepicker-cell.range.disabled {
  background-color: #c8c8c8;
}

.datepicker-cell.range.focused {
  background-color: #d8d8d8;
}

.datepicker-input.in-edit {
  border-color: #0074e5;
}

.datepicker-input.in-edit:focus,
.datepicker-input.in-edit:active {
  box-shadow: 0 0 0.25rem 0.25rem rgba(44, 102, 251, 0.2);
}

.datepicker-range {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.datepicker-input {
  background-image: url(../images/ic_calendar.svg);
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: center right 1rem;
}

.datepicker-range-custom {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}