.bx-calendar-name-day-wrap {
    background-color: var(--kt-ui-datapicker-calendar-name-day-background-color);
}
.bx-calendar-cell.bx-calendar-active {
    background-color: var(--kt-ui-datepicker-calendar-call-backgroundcolor);
    color: var(--kt-ui-datepicker-calendar-cell-color);
}
.bx-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bx-calendar-header-content {
    width: auto;
    height: 40px;
    display: flex;
    align-items: center;
}
.bx-calendar {
    width: 288px;
}
.bx-calendar-name-day-wrap {
    height: 40px;
}
.bx-calendar-name-day {
    width: 40px;
    height: 40px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}
.bx-calendar-range {
    border-bottom: none;
}
.bx-calendar-cell {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin: 0;
    padding: 0;
    line-height: 38px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.32px;
}
.bx-calendar-top-month, .bx-calendar-top-year {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.16px;
}
.calendar-form__label {
    color: var(--kt-ui-text-secondary, #6F6F6F);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.32px;
}
.calendar-form__input {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    height: 36px;
    border-radius: 8px;
    padding-right: 12px;
    margin-top: 8px;
    border: 2px solid #fff;
    transition: border-color 0.3s ease;

    input {
        border: none;
        width: 100%;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0.32px;
        padding: 8px;
        border-radius: 8px;
    }
}
.calendar-form__input:focus-within {
    border-color: var(--kt-ui-focus);
}
.form__icon {
    display: block;
    min-width: 20px;
    height: 20px;
    background-image: var(--kt-ui-form-icon);
    background-position: center;
    margin: 4px;
}

.form__helper {
    color: var(--kt-ui-form-helper-color);
    font-family: "IBM Plex Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.32px;
    margin-top: 4px;
}
.calendar-form-error .form__helper {
    color: var(--kt-ui-calendar-form-error-color);
}
.calendar-form-error .calendar-form__input {
    border-color: var(--kt-ui-calendar-form-error-border-color);
}
.form__icon-error {
    background-image: var(--kt-ui-form-icon-error);
}
.form__icon-warning {
    background-image: var(--kt-ui-form-icon-warning);
}
.bx-calendar-left-arrow {
    width: 40px;
    height: 40px;
    background-position: center;
    background-image: var(--kt-ui-left-arrow-icon)
}
.bx-calendar-right-arrow {
    width: 40px;
    height: 40px;
    background-position: center;
    background-image: var(--kt-ui-rigth-arrow-icon);
}
.bx-calendar-left-arrow:hover {
    background-image: var(--kt-ui-left-arrow-icon-hover);
    border-radius: 12px;
}
.bx-calendar-right-arrow:hover {
    background-image: var(--kt-ui-right-arrow-icon-hover);
    border-radius: 12px;
}
.bx-calendar-weekend, .bx-calendar-weekend:link {
    color: var(--kt-ui-calendar-weekend-color);
}
.bx-calendar-date-hidden, .bx-calendar-date-hidden:link {
    color: var(--kt-ui-calendar-date-hidden-color);
}

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