@charset "utf-8";

.ui-datepicker {
  font-size: 1.6em;
  width: 85% !important;
  max-width: 370px !important;
  padding: .5em .5em 0;
}
.ui-datepicker table {
  font-size: 1em;
  margin-bottom: .5em;
}
.ui-datepicker-prev {
  content: "";
}
.ui-datepicker-prev-hover,
.ui-datepicker-next-hover {
  top: 0;
}
.ui-datepicker-next,
.ui-datepicker-prev {
  height: 70%;
  top: 15%;
  transition: background-color .3s ease, right .3s ease;
}
.ui-datepicker-next .ui-icon,
.ui-datepicker-prev .ui-icon {
  background: transparent;
  text-indent: 7px;
}
.ui-datepicker-next .ui-icon::before,
.ui-datepicker-prev .ui-icon::before {
  content: "\f054";
  color: var(--text-color);
  font-family: "Font Awesome 6 Free";
  font-size: .85em;
  font-weight: 900;
  display: block;
  position: relative;
}
.ui-datepicker-prev .ui-icon::before {
  content: "\f053";
}
.ui-datepicker-next.ui-datepicker-next-hover,
.ui-datepicker-prev.ui-datepicker-prev-hover {
  transition: right .3s ease;
}
.ui-datepicker-next.ui-state-hover,
.ui-datepicker-prev.ui-state-hover {
  background: #f5f5f5;
  border: none;
  transition: background-color .3s ease;
}

select.ui-datepicker-month,
select.ui-datepicker-year {
  background-color: rgb(255 255 255 / 50%);
  width: 38%;
  position: relative;
  z-index: 2;

  margin-inline: .4em;
}
.ui-datepicker-title::before,
.ui-datepicker-title::after {
  content: "\f078";
  color: var(--text-color);
  font-family: "Font Awesome 6 Free";
  font-size: .85em;
  font-weight: 900;
  position: absolute;
  top: calc(50% - 1em);
  left: calc(38% + .3em);
  z-index: 0;
}
.ui-datepicker-title::after {
  right: calc(16% + .3em);
  left: auto;
}
.saturday .ui-state-default {
  background-color: var(--royal_blue);
  color: #fff;
}
.sunday .ui-state-default,
.holiday .ui-state-default {
  background-color: var(--red);
  color: #fff;
}
.ui-state-default.ui-state-hover,
.saturday .ui-state-default.ui-state-hover,
.sunday .ui-state-default.ui-state-hover,
.holiday .ui-state-default.ui-state-hover {
  opacity: .77;
}



/*  */