/*! name: vanilla-calendar-pro | url: https://github.com/uvarov-frontend/vanilla-calendar-pro */

.vanilla-calendar {

  position: relative;

  box-sizing: border-box;

  display: flex;

  width: 300px;

  min-width: 272px;

  max-width: 100%;

  flex-direction: column;

  border-radius: 0.75rem;

  padding: 1rem;

  opacity: 1;

  transition-property: opacity;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 0.15s;

}

@supports ((width: -webkit-max-content) or (width: max-content)) and

  ((height: -webkit-max-content) or (height: max-content)) {

  .vanilla-calendar {

    height: -webkit-max-content;

    height: max-content;

    width: -webkit-max-content;

    width: max-content;

  }

}

.vanilla-calendar_multiple {

  width: 550px;

}

@supports (

  (width: -webkit-fit-content) or (width: -moz-fit-content) or

    (width: fit-content)

) {

  .vanilla-calendar_multiple {

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;

  }

}

.vanilla-calendar button:focus-visible {

  border-radius: 0.5rem;

  outline-style: solid;

  outline-width: 1px;

}

.vanilla-calendar.vanilla-calendar_multiple .vanilla-calendar-days {

  flex-grow: 0;

}

.vanilla-calendar_hidden {

  pointer-events: none;

  opacity: 0;

}

.vanilla-calendar_hidden * {

  pointer-events: none !important;

}

.vanilla-calendar_to-input {

  position: absolute;

}

.vanilla-calendar_to-input_bottom {

  margin-top: 0.25rem;

}

.vanilla-calendar_to-input_top {

  margin-top: -0.25rem;

}

.vanilla-calendar-controls {

  pointer-events: none;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  z-index: 20;

  box-sizing: content-box;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-left: 1rem;

  padding-right: 1rem;

  padding-top: 1.25rem;

}

.vanilla-calendar-arrow {

  pointer-events: auto;

  position: relative;

  display: block;

  height: 1.5rem;

  width: 1.5rem;

  cursor: pointer;

  border-width: 0px;

  background-color: transparent;

}

.vanilla-calendar-arrow:before {

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  --tw-content: '';

  content: var(--tw-content);

}

.vanilla-calendar-arrow.vanilla-calendar-arrow_prev:before {

  transform: rotate(90deg);

}

.vanilla-calendar-arrow.vanilla-calendar-arrow_next:before {

  transform: rotate(-90deg);

}

.vanilla-calendar-grid {

  display: flex;

  flex-grow: 1;

  flex-wrap: wrap;

  justify-content: center;

  gap: 1.75rem;

}

.vanilla-calendar-grid.vanilla-calendar-grid_disabled .vanilla-calendar-column {

  pointer-events: none;

  opacity: 0.3;

}

.vanilla-calendar-grid.vanilla-calendar-grid_disabled

  .vanilla-calendar-column.vanilla-calendar-column_month,

.vanilla-calendar-grid.vanilla-calendar-grid_disabled

  .vanilla-calendar-column.vanilla-calendar-column_year {

  pointer-events: auto;

  opacity: 1;

}

.vanilla-calendar-column {

  display: flex;

  min-width: -webkit-min-content;

  min-width: min-content;

  flex-direction: column;

}

.vanilla-calendar-header {

  position: relative;

  margin-bottom: 0.75rem;

  display: flex;

  align-items: center;

}

.vanilla-calendar-header__content {

  display: grid;

  flex-grow: 1;

  grid-auto-columns: -webkit-max-content;

  grid-auto-columns: max-content;

  grid-auto-flow: column;

  align-items: center;

  justify-content: center;

  white-space: pre-wrap;

  padding-left: 1rem;

  padding-right: 1rem;

}

.vanilla-calendar-month,

.vanilla-calendar-year {

  cursor: pointer;

  border-radius: 0.25rem;

  border-width: 0px;

  background-color: transparent;

  padding: 0.25rem;

  font-size: 1rem;

  line-height: 1.5rem;

  font-weight: 700;

}

.vanilla-calendar-month.vanilla-calendar-month_disabled,

.vanilla-calendar-year.vanilla-calendar-year_disabled {

  pointer-events: none;

}

.vanilla-calendar-months {

  display: grid;

  flex-grow: 1;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  align-items: center;

  row-gap: 1rem;

  column-gap: 0.5rem;

}

.vanilla-calendar-years {

  display: grid;

  flex-grow: 1;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  align-items: center;

  row-gap: 1rem;

  column-gap: 0.5rem;

}

.vanilla-calendar-months_selecting .vanilla-calendar-months__month,

.vanilla-calendar-years_selecting .vanilla-calendar-years__year {

  cursor: pointer;

}

.vanilla-calendar-months_selecting

  .vanilla-calendar-months__month

  .vanilla-calendar-months__month_disabled,

.vanilla-calendar-years_selecting

  .vanilla-calendar-years__year

  .vanilla-calendar-years__year_disabled {

  cursor: default;

}

.vanilla-calendar-months__month,

.vanilla-calendar-years__year {

  display: flex;

  height: 2.5rem;

  align-items: center;

  justify-content: center;

  word-break: break-all;

  border-radius: 0.5rem;

  border-width: 0px;

  padding: 0.25rem;

  text-align: center;

  font-size: 0.75rem;

  line-height: 1rem;

  font-weight: 600;

}

.vanilla-calendar-months__month.vanilla-calendar-months__month_disabled,

.vanilla-calendar-years__year.vanilla-calendar-years__year_disabled {

  pointer-events: none;

}

.vanilla-calendar-week-numbers {

  display: flex;

  flex-direction: column;

}

.vanilla-calendar-week-numbers__title {

  margin-bottom: 0.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  line-height: 1rem;

  font-weight: 700;

}

.vanilla-calendar-week-numbers__content {

  display: grid;

  grid-auto-flow: row;

  align-items: center;

  justify-items: center;

  row-gap: 0.25rem;

}

.vanilla-calendar-week-number {

  margin: 0;

  display: flex;

  min-height: 1.875rem;

  width: 100%;

  min-width: 1.875rem;

  cursor: pointer;

  align-items: center;

  justify-content: center;

  border-style: none;

  background-color: transparent;

  padding: 0;

  font-size: 0.75rem;

  line-height: 1rem;

  font-weight: 600;

}

.vanilla-calendar-wrapper {

  display: flex;

  flex-grow: 1;

}

.vanilla-calendar-content {

  display: flex;

  flex-grow: 1;

  flex-direction: column;

}

.vanilla-calendar-week {

  margin-bottom: 0.5rem;

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  justify-items: center;

}

.vanilla-calendar-week__day {

  display: flex;

  width: 100%;

  min-width: 1.875rem;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  line-height: 1rem;

  font-weight: 700;

}

.vanilla-calendar-days {

  display: grid;

  flex-grow: 1;

  grid-template-columns: repeat(7, 1fr);

  align-items: center;

  justify-items: center;

  row-gap: 0.25rem;

}

.vanilla-calendar-days_selecting .vanilla-calendar-day__btn {

  cursor: pointer;

  transition-property: all;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 75ms;

}

.vanilla-calendar-days_selecting .vanilla-calendar-day__btn_disabled {

  cursor: default;

}

.vanilla-calendar-day {

  position: relative;

  display: flex;

  width: 100%;

  align-items: center;

  justify-content: center;

}

.vanilla-calendar-day_hover-intermediate .vanilla-calendar-day__btn {

  border-radius: 0;

}

.vanilla-calendar-day_hover-first .vanilla-calendar-day__btn {

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

  border-top-left-radius: 0.5rem;

  border-bottom-left-radius: 0.5rem;

}

.vanilla-calendar-day_hover-last .vanilla-calendar-day__btn {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

  border-top-right-radius: 0.5rem;

  border-bottom-right-radius: 0.5rem;

}

.vanilla-calendar-day_hover-first.vanilla-calendar-day_hover-last

  .vanilla-calendar-day__btn {

  border-radius: 0.5rem;

}

.vanilla-calendar-day:focus-visible .vanilla-calendar-day__popup,

.vanilla-calendar-day:hover .vanilla-calendar-day__popup {

  pointer-events: auto;

  opacity: 1;

}

.vanilla-calendar-day_selected-first .vanilla-calendar-day__btn_selected {

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

  border-top-left-radius: 0.5rem;

  border-bottom-left-radius: 0.5rem;

}

.vanilla-calendar-day_selected-last .vanilla-calendar-day__btn_selected {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

  border-top-right-radius: 0.5rem;

  border-bottom-right-radius: 0.5rem;

}

.vanilla-calendar-day_selected-first.vanilla-calendar-day_selected-last

  .vanilla-calendar-day__btn_selected {

  border-radius: 0.5rem;

}

.vanilla-calendar-day_selected-intermediate

  .vanilla-calendar-day__btn_selected {

  border-radius: 0;

}

.vanilla-calendar-day__btn {

  display: flex;

  height: 100%;

  min-height: 1.875rem;

  width: 100%;

  min-width: 1.875rem;

  cursor: default;

  align-items: center;

  justify-content: center;

  border-radius: 0.5rem;

  border-width: 0px;

  padding: 0;

  font-size: 0.75rem;

  line-height: 1rem;

  font-weight: 400;

}

.vanilla-calendar-day__btn_today {

  font-weight: 700;

}

.vanilla-calendar-day__btn_disabled {

  pointer-events: none;

}

.vanilla-calendar-day__popup {

  transform: translate(-50%);

  pointer-events: none;

  position: absolute;

  left: 50%;

  top: 100%;

  z-index: 20;

  width: 8rem;

  padding: 1rem 0.75rem 0.5rem;

  font-size: 0.75rem;

  line-height: 1rem;

  font-weight: 400;

  opacity: 0;

}

.vanilla-calendar-day__popup:before {

  content: var(--tw-content);

  position: absolute;

}

.vanilla-calendar-day__popup:after {

  content: var(--tw-content);

  position: absolute;

}

.vanilla-calendar-day__popup:hover {

  pointer-events: auto;

  opacity: 1;

}

.vanilla-calendar-day__popup:before {

  content: '';

  left: 0;

  bottom: 0;

  z-index: -10;

  display: block;

  height: calc(100% - 8px);

  width: 100%;

  border-radius: 0.5rem;

}

.vanilla-calendar-day__popup:after {

  content: '';

  transform: translate(-50%);

  left: 50%;

  top: 1px;

  z-index: -10;

  display: block;

  height: 0px;

  width: 0px;

  border-left-width: 8px;

  border-right-width: 8px;

  border-top-width: 0px;

  border-bottom-width: 8px;

  border-style: solid;

  border-left-color: transparent;

  border-right-color: transparent;

  border-top-color: transparent;

}

.vanilla-calendar-time {

  margin-top: 0.75rem;

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 0.75rem;

  border-top-width: 1px;

  border-bottom-width: 0px;

  border-left-width: 0px;

  border-right-width: 0px;

  border-style: solid;

  padding-top: 0.75rem;

}

.vanilla-calendar-time__content {

  display: grid;

  grid-auto-flow: column;

  align-items: center;

}

.vanilla-calendar-time__hours {

  position: relative;

  margin-right: 0.35rem;

  width: 1.75rem;

}

.vanilla-calendar-time__hours:after {

  position: absolute;

  right: -5px;

  top: 50%;

  margin-top: calc(-50% + 1px);

  display: block;

  --tw-content: ':';

  content: var(--tw-content);

}

.vanilla-calendar-time__minutes {

  width: 1.75rem;

}

.vanilla-calendar-time__hours input,

.vanilla-calendar-time__minutes input {

  position: relative;

  margin: 0;

  box-sizing: border-box;

  display: block;

  width: 100%;

  border-radius: 0.25rem;

  border-width: 0px;

  padding: 0.125rem;

  text-align: center;

  font-size: 1.125rem;

  font-weight: 600;

  line-height: 1.125rem;

}

.vanilla-calendar-time__hours input:focus-visible,

.vanilla-calendar-time__minutes input:focus-visible {

  outline-style: solid;

  outline-width: 1px;

}

.vanilla-calendar-time__hours input:disabled,

.vanilla-calendar-time__minutes input:disabled {

  cursor: default;

}

.vanilla-calendar-time__hours input:hover:disabled,

.vanilla-calendar-time__minutes input:hover:disabled {

  background-color: transparent;

}

.vanilla-calendar-time__keeping {

  margin-left: 1px;

  margin-top: 0.25rem;

  width: 22px;

  cursor: pointer;

  border-radius: 0.25rem;

  border-width: 0px;

  background-color: transparent;

  padding: 0;

  font-size: 0.69rem;

}

.vanilla-calendar-time__keeping:focus-visible {

  outline-style: solid;

  outline-width: 1px;

}

.vanilla-calendar-time__keeping:disabled {

  cursor: default;

}

.vanilla-calendar-time__keeping:hover:disabled {

  background-color: transparent;

}

.vanilla-calendar-time__ranges {

  display: grid;

  grid-auto-flow: row;

}

.vanilla-calendar-time__range {

  position: relative;

  z-index: 10;

  font-size: 0;

}

.vanilla-calendar-time__range:before {

  content: var(--tw-content);

  left: 0;

}

.vanilla-calendar-time__range:after {

  content: var(--tw-content);

  right: 0;

}

.vanilla-calendar-time__range:before,

.vanilla-calendar-time__range:after {

  content: '';

  transform: translateY(-50%);

  pointer-events: none;

  position: absolute;

  top: 50%;

  z-index: 10;

  height: 0.5rem;

  width: 1px;

}

.vanilla-calendar-time__range input {

  position: relative;

  margin: 0;

  height: 1.25rem;

  width: 100%;

  cursor: pointer;

  -webkit-appearance: none;

  appearance: none;

  outline-width: 0px;

}

.vanilla-calendar-time__range input::-webkit-slider-thumb {

  position: relative;

  z-index: 20;

  margin-top: -0.5rem;

  box-sizing: border-box;

  height: 1rem;

  width: 0.75rem;

  cursor: pointer;

  -webkit-appearance: none;

  appearance: none;

  border-radius: 0.25rem;

  border-width: 1px;

  border-style: solid;

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.vanilla-calendar-time__range input::-moz-range-thumb {

  position: relative;

  z-index: 20;

  box-sizing: border-box;

  height: 1rem;

  width: 0.75rem;

  cursor: pointer;

  border-radius: 0.25rem;

  border-width: 1px;

  border-style: solid;

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.vanilla-calendar-time__range input::-webkit-slider-runnable-track {

  margin-top: 1px;

  box-sizing: border-box;

  height: 1px;

  width: 100%;

  cursor: pointer;

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.vanilla-calendar-time__range input::-moz-range-track {

  margin-top: 1px;

  box-sizing: border-box;

  height: 1px;

  width: 100%;

  cursor: pointer;

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),

    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}