.custom-date-picker-div:focus {
    border: 1px solid var(--violet-color) !important;
}

.custom-date-picker-div {
    background-color: white;
    border: 1px solid var(--gray-color) !important;
    height: 44px;
    padding: 0 16px;
    border-radius: 100px;
    color: var(--dark-color);
    width: 100%;
    outline: none;
    transition: all 0.1s ease;
    cursor: pointer;
    max-width: 280px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.custom-date-picker-div span {
    user-select: none;
    pointer-events: none;
}

.custom-date-picker-div i {
    user-select: none;
    pointer-events: none;
}
.qs-controls {
    padding: 14px 4px;
    background-color: whitesmoke !important;
}
.qs-datepicker-container,
.qs-datepicker {
    border-radius: 10px !important;
}
.qs-active {
    text-decoration: none !important;
    color: var(--violet-color);
    font-weight: 800 !important;
    background-color: var(--light-violet-color) !important;
}

.qs-current {
    text-decoration: none !important;
}
.qs-datepicker-container {
    width: 17.625em !important;
}

.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover {
    background-color: var(--light-violet-color) !important;
}
.qs-squares {
    row-gap: 6px;
}
.qs-day {
    color: var(--dark-color) !important;
    font-weight: 400px;
}
.qs-overlay {
    background: rgb(255 255 255 / 100%) !important;
    color: var(--dark-color) !important;
}
.qs-overlay .qs-submit {
    border-radius: 25px !important;
    border: 1px solid var(--dark-color) !important;
    min-width: 126px !important;
    height: 22px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: white !important;
    background-color: var(--dark-color) !important;
    transition: all 0.2s ease !important;
    min-height: 36px;
}
.qs-overlay-year {
    border-bottom: 1px solid var(--gray-color) !important;
    height: 44px !important;
    padding: 0 0 0 0px !important;
    height: 34px !important;
    color: var(--dark-color) !important;
    width: 100% !important;
    outline: none !important;
    transition: all 0.1s ease !important;
    min-width: 200px !important;
    width: 200px !important;
    font-size: 1rem !important;
}

.qs-overlay .qs-overlay-month {
    color: var(--dark-color) !important;
}

.qs-overlay .qs-overlay-month-container {
    padding: 10px 0;
}

.qs-overlay-year:focus {
    border-bottom: 1px solid var(--violet-color) !important;
}
.qs-overlay .qs-close {
    font-weight: 900 !important;
    font-size: 1.1rem !important;
}
.qs-overlay .qs-overlay-month {
    color: var(--dark-color) !important;
}

.qs-month-year:not(.qs-disabled-year-overlay) {
    border-bottom: none !important;
}

.qs-month-year:not(.qs-disabled-year-overlay):hover {
    border-bottom: none !important;
    color: var(--gray-color);
}
.qs-overlay .qs-overlay-month {
    transition: all 0.2s ease-in-out !important;
    opacity: 1 !important;
}
.qs-overlay .qs-overlay-month:hover {
    color: var(--gray-color) !important;
}

.qs-datepicker-contaier {
    box-shadow: 0px 0em 6em 0.2em rgba(0, 0, 0, 0.15);
}
.qs-square {
    border-radius: 15px !important;
}
.qs-datepicker-container:has(.qs-square.qs-disabled:last-child) .qs-right {
    background-color: red;
}

.qs-arrow {
    transition: all 0.35s ease-in-out;
}
.qs-arrow.disabled {
    opacity: 0;
    pointer-events: none;
}