.kt-ui-datepicker .ui-ctl-after {
  justify-content: center;
}

[id^=calendar_popup],
.kt-ui-datepicker-popup-md {
  --kt-ui-modal-padding-block: 12px;
  --kt-ui-modal-padding-inline: 12px;
  --kt-ui-modal-border-radius: 16px;
}

.kt-ui-datepicker-popup-sm {
  --kt-ui-modal-padding-block: 8px;
  --kt-ui-modal-padding-inline: 8px;
  --kt-ui-modal-border-radius: 12px;
}

.kt-ui-datepicker-popup-sm .bx-calendar {
  width: 360px;
}

.kt-ui-datepicker-popup-md .bx-calendar {
  width: 450px;
}

.bx-calendar .bx-calendar-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  box-sizing: border-box;
  padding: 6px 8px;
}

.bx-calendar .bx-calendar-header-content {
  margin: 0 auto;
}

.bx-calendar .bx-calendar-top-month,
.bx-calendar .bx-calendar-top-year {
  margin: 0 4px;
  padding: 0;
  background: none;
  font-size: 14px;
  line-height: 1.1428571429;
  font-weight: 500;
  color: var(--kt-ui-text-color-secondary) !important;
  transition: color 160ms linear;
}

.bx-calendar .bx-calendar-top-month:hover,
.bx-calendar .bx-calendar-top-year:hover {
  color: var(--kt-ui-brand-color) !important;
  background-color: transparent;
}

.bx-calendar .bx-calendar-top-month:active,
.bx-calendar .bx-calendar-top-year:active {
  color: var(--kt-ui-brand-color-hover) !important;
  background-color: transparent;
}

.bx-calendar .bx-calendar-left-arrow,
.bx-calendar .bx-calendar-right-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 8px;
  -webkit-mask-size: 12px;
          mask-size: 12px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  background-color: var(--kt-ui-brand-color);
}

.bx-calendar .bx-calendar-left-arrow:hover,
.bx-calendar .bx-calendar-right-arrow:hover {
  background-color: var(--kt-ui-brand-color-hover);
}

.bx-calendar .bx-calendar-left-arrow:active,
.bx-calendar .bx-calendar-right-arrow:active {
  background-color: var(--kt-ui-brand-color-active);
}

.bx-calendar .bx-calendar-left-arrow {
  -webkit-mask-image: var(--kt-ui-icon-chevron-left);
          mask-image: var(--kt-ui-icon-chevron-left);
}

.bx-calendar .bx-calendar-right-arrow {
  -webkit-mask-image: var(--kt-ui-icon-chevron-right);
          mask-image: var(--kt-ui-icon-chevron-right);
}

.bx-calendar .bx-calendar-name-day-wrap {
  height: auto;
  line-height: initial;
  text-align: center;
  margin: 0 0 8px 0;
  padding: 0;
  background-color: transparent;
}

.bx-calendar .bx-calendar-range {
  margin: 0;
  padding: 0;
  border-bottom: none;
  text-align: center;
}

.bx-calendar .bx-calendar-name-day,
.bx-calendar .bx-calendar-cell {
  height: auto;
  margin: 0;
  font-weight: 500;
  border-radius: 8px;
}

.bx-calendar .bx-calendar-name-day {
  font-size: 12px;
  line-height: 1.3333333333;
  font-weight: 500;
}

.kt-ui-datepicker-popup-sm .bx-calendar-name-day,
.kt-ui-datepicker-popup-sm .bx-calendar-cell {
  width: 33px;
}

.kt-ui-datepicker-popup-md .bx-calendar-name-day,
.kt-ui-datepicker-popup-md .bx-calendar-cell {
  width: 37px;
}

.bx-calendar .bx-calendar-name-day,
.bx-calendar .bx-calendar-cell,
.bx-calendar .bx-calendar-cell:link,
.bx-calendar .bx-calendar-cell:active,
.bx-calendar .bx-calendar-cell:visited {
  color: var(--kt-ui-text-color-secondary);
}

.bx-calendar .bx-calendar-date-hidden,
.bx-calendar .bx-calendar-date-hidden:link,
.bx-calendar .bx-calendar-date-hidden:active,
.bx-calendar .bx-calendar-date-hidden:visited {
  color: var(--kt-ui-text-color-disabled);
}

.bx-calendar .bx-calendar-cell:hover,
.bx-calendar .bx-calendar-date-hidden:hover {
  color: var(--kt-ui-palette-white);
  background-color: var(--kt-ui-brand-color);
}

.kt-ui-datepicker-popup-sm .bx-calendar-name-day,
.kt-ui-datepicker-popup-sm .bx-calendar-cell {
  padding: 8px;
}

.kt-ui-datepicker-popup-md .bx-calendar-name-day,
.kt-ui-datepicker-popup-md .bx-calendar-cell {
  padding: 12px;
}

.bx-calendar .bx-calendar-cell.bx-calendar-active {
  position: relative;
  color: var(--kt-ui-brand-color);
  background-color: var(--kt-ui-palette-white);
}

.bx-calendar .bx-calendar-active::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: var(--kt-ui-brand-color);
}

.kt-ui-datepicker-popup-sm .bx-calendar-active::after {
  bottom: 4px;
}

[id^=calendar_popup_year],
[id^=calendar_popup_month] {
  --kt-ui-modal-padding-block: 12px;
  --kt-ui-modal-padding-inline: 12px;
}

[id^=calendar_popup_year] .bx-calendar-year-popup,
[id^=calendar_popup_month] .bx-calendar-month-popup {
  margin-top: 0;
  padding-bottom: 0;
}

[id^=calendar_popup_year] .bx-calendar-year-popup {
  width: 80px;
}

.bx-calendar-year-popup .bx-calendar-year-title,
.bx-calendar-month-popup .bx-calendar-month-title {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  padding-bottom: 8px;
  color: var(--kt-ui-text-color-secondary);
}

.bx-calendar-year-popup .bx-calendar-year-content,
.bx-calendar-month-popup .bx-calendar-month-content {
  padding: 8px 0 0 0;
  border-top: 1px solid var(--kt-ui-palette-grey-500);
  font-size: 14px;
  line-height: 1.1428571429;
  font-weight: 500;
  color: var(--kt-ui-text-color-secondary);
}

.bx-calendar-year-popup .bx-calendar-year-number,
.bx-calendar-year-popup .bx-calendar-year-number:link,
.bx-calendar-year-popup .bx-calendar-year-number:active,
.bx-calendar-year-popup .bx-calendar-year-number:visited,
.bx-calendar-month-popup .bx-calendar-month,
.bx-calendar-month-popup .bx-calendar-month:link,
.bx-calendar-month-popup .bx-calendar-month:active,
.bx-calendar-month-popup .bx-calendar-month:visited {
  color: var(--kt-ui-text-color-secondary);
}

.bx-calendar-year-popup .bx-calendar-year-number,
.bx-calendar-month-popup .bx-calendar-month {
  margin: 0;
  padding: 4px;
  border-radius: 8px;
  text-align: center;
}

.bx-calendar-year-popup .bx-calendar-year-number:hover,
.bx-calendar-month-popup .bx-calendar-month:hover {
  color: var(--kt-ui-brand-color);
  background-color: transparent;
}

.bx-calendar-year-popup .bx-calendar-year-number + .bx-calendar-year-number,
.bx-calendar-month-popup .bx-calendar-month + .bx-calendar-month {
  margin-top: 8px;
}

.bx-calendar-year-popup .bx-calendar-year-active,
.bx-calendar-year-popup .bx-calendar-year-active:link,
.bx-calendar-year-popup .bx-calendar-year-active:active,
.bx-calendar-year-popup .bx-calendar-year-active:visited,
.bx-calendar-month-popup .bx-calendar-month-active,
.bx-calendar-month-popup .bx-calendar-month-active:link,
.bx-calendar-month-popup .bx-calendar-month-active:active,
.bx-calendar-month-popup .bx-calendar-month-active:visited {
  color: var(--kt-ui-palette-white);
  background-color: var(--kt-ui-brand-color);
}

.bx-calendar-year-popup .bx-calendar-year-input,
.bx-calendar-month-popup .bx-calendar-month-input {
  display: block;
  height: var(--ui-field-size-xs);
  margin-inline: auto;
  padding-block: var(--kt-ui-control-padding-block);
  padding-inline: var(--kt-ui-control-padding-inline);
  border-width: var(--kt-ui-control-border-width);
  border-color: var(--kt-ui-control-border-color);
  border-radius: var(--kt-ui-control-border-radius);
  box-shadow: none;
  outline: none;
  color: var(--kt-ui-control-color);
  background-color: var(--kt-ui-control-background);
}

.bx-calendar-year-popup .bx-calendar-year-input:hover,
.bx-calendar-month-popup .bx-calendar-month-input:hover {
  color: var(--kt-ui-control-color-hover);
  border-color: var(--kt-ui-control-border-hover);
  background-color: var(--kt-ui-control-background-hover);
}

.bx-calendar-year-popup .bx-calendar-year-input:active,
.bx-calendar-month-popup .bx-calendar-month-input:active {
  color: var(--kt-ui-control-color-active);
  border-color: var(--kt-ui-control-border-active);
  background-color: var(--kt-ui-control-background-active);
}

.bx-calendar-year-popup .bx-calendar-year-input:focus,
.bx-calendar-month-popup .bx-calendar-month-input:focus {
  outline: none;
}

.bx-calendar-year-popup .bx-calendar-year-input:focus-visible,
.bx-calendar-month-popup .bx-calendar-month-input:focus-visible {
  border-color: var(--kt-ui-color-focus);
}

.bx-calendar .bx-calendar-set-time-wrap {
  margin: 8px 0;
  border: none;
}

.bx-calendar .bx-calendar-set-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 198px;
  height: var(--ui-btn-height);
  margin: 0 auto;
  padding: var(--kt-ui-btn-padding-block) var(--kt-ui-btn-padding-inline);
  font-size: var(--ui-btn-font-size);
  font-weight: var(--kt-ui-btn-font-weight);
  border: 1px solid var(--kt-ui-btn-light-border-border-color);
  border-radius: var(--ui-btn-height);
  color: var(--kt-ui-btn-light-border-color);
  background-color: var(--kt-ui-btn-light-border-background);
  transition-property: color, border-color, background-color;
  transition-duration: 160ms;
  transition-timing-function: linear;
}

.bx-calendar .bx-calendar-set-time:hover {
  color: var(--kt-ui-btn-light-border-color-hover);
  border-color: var(--kt-ui-btn-light-border-border-color-hover);
  background: var(--kt-ui-btn-light-border-background-hover);
}

.bx-calendar .bx-calendar-set-time:active {
  color: var(--kt-ui-btn-light-border-color-active);
  border-color: var(--kt-ui-btn-light-border-border-color-active);
  background: var(--kt-ui-btn-light-border-background-active);
}

.bx-calendar .bx-calendar-set-time i {
  width: 16px;
  height: 16px;
  margin: 0;
  -webkit-mask: var(--kt-ui-icon-clock) no-repeat 50% 50%;
          mask: var(--kt-ui-icon-clock) no-repeat 50% 50%;
  -webkit-mask-size: 12px;
          mask-size: 12px;
  background: currentColor none;
}

.bx-calendar .bx-calendar-set-time-opened .bx-calendar-form-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bx-calendar .bx-calendar-form-text {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.125;
  color: var(--kt-ui-palette-grey-600);
}

.bx-calendar .bx-calendar-form {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}

.bx-calendar .bx-calendar-form-close {
  width: auto;
  height: auto;
  position: static;
  color: var(--kt-ui-icon-color-secondary);
}

.bx-calendar .bx-calendar-form-close:hover {
  color: var(--kt-ui-brand-color);
}

.bx-calendar .bx-calendar-form-close:hover i {
  background-color: currentColor;
}

.bx-calendar .bx-calendar-form-close:active {
  color: var(--kt-ui-brand-color-hover);
}

.bx-calendar .bx-calendar-form-close i {
  width: 16px;
  height: 16px;
  margin: 0;
  -webkit-mask: var(--kt-ui-icon-close) no-repeat 50% 50%;
          mask: var(--kt-ui-icon-close) no-repeat 50% 50%;
  -webkit-mask-size: 12px;
          mask-size: 12px;
  background: currentColor none;
  transition: background-color 160ms linear;
  will-change: background-color;
}

.bx-calendar .bx-calendar-form-arrow-l {
  margin-left: 0;
}

.bx-calendar .bx-calendar-form-arrow-r .bx-calendar-form-arrow-top,
.bx-calendar .bx-calendar-form-arrow-r .bx-calendar-form-arrow-bottom {
  padding-left: 0;
  padding-right: 0;
}

.bx-calendar .bx-calendar-form-arrow-top,
.bx-calendar .bx-calendar-form-arrow-bottom {
  width: 16px;
  height: 16px;
  color: var(--kt-ui-icon-color-secondary);
}

.bx-calendar .bx-calendar-form-arrow-top:hover,
.bx-calendar .bx-calendar-form-arrow-bottom:hover {
  color: var(--kt-ui-brand-color);
}

.bx-calendar .bx-calendar-form-arrow-top:hover i,
.bx-calendar .bx-calendar-form-arrow-bottom:hover i {
  background-color: currentColor;
}

.bx-calendar .bx-calendar-form-arrow-top:active,
.bx-calendar .bx-calendar-form-arrow-bottom:active {
  color: var(--kt-ui-brand-color-hover);
}

.bx-calendar .bx-calendar-form-arrow-top i,
.bx-calendar .bx-calendar-form-arrow-bottom i {
  width: 100%;
  height: 100%;
  -webkit-mask-size: 16px;
          mask-size: 16px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  background: currentColor none;
  transition: background-color 160ms linear;
  will-change: background-color;
}

.bx-calendar .bx-calendar-form-arrow-top i {
  -webkit-mask-image: var(--kt-ui-icon-arrow-drop-up);
          mask-image: var(--kt-ui-icon-arrow-drop-up);
}

.bx-calendar .bx-calendar-form-arrow-bottom i {
  -webkit-mask-image: var(--kt-ui-icon-arrow-drop-down);
          mask-image: var(--kt-ui-icon-arrow-drop-down);
}

.bx-calendar .bx-calendar-form-arrow-l .bx-calendar-form-arrow-top,
.bx-calendar .bx-calendar-form-arrow-l .bx-calendar-form-arrow-bottom {
  padding-left: 0;
}

.bx-calendar .bx-calendar-form-arrow-top {
  padding-top: 0;
  margin-bottom: 8px;
}

.bx-calendar .bx-calendar-form-input {
  width: 44px;
  height: 44px;
  margin-top: 0;
  border: 1px solid var(--kt-ui-palette-grey-600);
  border-radius: 12px;
  box-shadow: none;
  color: var(--kt-ui-text-color-secondary);
  background-color: var(--kt-ui-palette-white);
}

.bx-calendar .bx-calendar-button-block {
  padding: 0;
}

.bx-calendar .bx-calendar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ui-btn-height);
  padding: var(--kt-ui-btn-padding-block) var(--kt-ui-btn-padding-inline);
  font-size: var(--ui-btn-font-size);
  font-weight: var(--kt-ui-btn-font-weight);
  border: 1px solid var(--kt-ui-btn-light-border-border-color);
  border-radius: var(--ui-btn-height);
  color: var(--kt-ui-btn-light-border-color);
  background-color: var(--kt-ui-btn-light-border-background);
  transition-property: color, border-color, background-color;
  transition-duration: 160ms;
  transition-timing-function: linear;
}

.bx-calendar .bx-calendar-button:hover {
  color: var(--kt-ui-btn-light-border-color-hover);
  border-color: var(--kt-ui-btn-light-border-border-color-hover);
  background: var(--kt-ui-btn-light-border-background-hover);
}

.bx-calendar .bx-calendar-button:active {
  color: var(--kt-ui-btn-light-border-color-active);
  border-color: var(--kt-ui-btn-light-border-border-color-active);
  background: var(--kt-ui-btn-light-border-background-active);
}

.bx-calendar .bx-calendar-button-text {
  height: auto;
  padding: 0;
  vertical-align: initial;
  font-size: inherit;
  color: inherit;
  background: none;
}

.bx-calendar .bx-calendar-button-left,
.bx-calendar .bx-calendar-button-right {
  display: none;
}