.flatpickr-calendar {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.flatpickr-months {
    border-bottom: 1px solid #ddd;
}

.flatpickr-prev-month, .flatpickr-next-month {
    color: #007bff;
}


.flatpickr-day.today {
    border: 2px solid #007bff;
    border-radius: 50%;
}

.flatpickr-day.past-day {
    color: #c1c1c1;
    /* text-decoration: line-through; */
}
span.flatpickr-day.today.past-day {
    text-decoration: none;
    color: #007bff;
}
span.flatpickr-next-month,span.flatpickr-prev-month {
    margin-top: 83px;
}
input#date-picker {
    border: 1px solid transparent;
    background: transparent;
    padding-left: 43px;
    width: 100%;
    color: #495057;

}
span.flatpickr-day.today.past-day {
    text-decoration: none;
    color: #007bff;
    background: transparent;
}

/* CSS */
.flatpickr-custom-title {
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.switch {
    position: relative;
    display: inline-flex;
    width: 300px;
    height: 80px;
    align-items: center;
    justify-content: space-between;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e5e8f3;
    transition: .4s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #000;
    border-radius: 8px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 70px;
    width: 138px;
    border-radius: 6px;
    background-color: #ffffff;
    transition: .4s;
    left: 5px;
    bottom: 5px;
}

input:checked + .slider {
    background-color: #fee04b;
}

input:checked + .slider:before {
    transform: translateX(150px);
}

.switch-label {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    transition: opacity 0.4s, color 0.4s;
    position: relative;
}

.switch-label.left {
    position: absolute;
    left: 10px;
    width: 100px;
}

.switch-label.right {
    position: absolute;
    right: 10px;
    width: 100px;
}

.switch-label.active {
    opacity: 1;
    color: #000000;
}

.switch-label.inactive {
    opacity: 0.6;
    color: #000000;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    color: #000000 !important;
    fill: #000000 !important;
    font-weight: bold;
}
span.slider.switch-date {
    margin-top: 30px;
    margin-left: 32px;
    background: #d8bb6f !important;
}
.flatpickr-custom-title {
    border-radius: 15px 15px 0px 0px;
    background: #303030 !important;

}
.flatpickr-calendar.open {
    border-radius: 15px;
}

span.flatpickr-weekday {
    color: #fff !important;
}
.flatpickr-weekdays {
    background: #303030 !important;
}
select.flatpickr-monthDropdown-months,input.numInput.cur-year {
    color: #000000  !important;
    color: #000000  !important;
}
.flatpickr-calendar {
    border-radius: 15px;
}
.flatpickr-current-month {
    color: #007aff;
}
span.flatpickr-day.prevMonthDay.flatpickr-disabled.past-day {
    color: #dddddd;
}
span.flatpickr-day.flatpickr-disabled.past-day {
    color: #dddddd;
}

.flatpickr-footer {
    display: none;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
}
.flatpickr-footer-buttons {
    display: flex;
    justify-content: center;
    width: 100%;
}

.flatpickr-button {
    background-color: #007bff00;
    color: #fdfbff;
    border: none;
    padding: 5px 47px;
    cursor: pointer;
    margin: 0 10px;
    font-weight: bold;
    font-size: 20px;
}

.flatpickr-button:hover {
    background-color: #0056b3;
}

.flatpickr-button:active {
    background-color: #004085;
}

@media (max-width: 768px) {
    .flatpickr-footer {
        display: flex;
        background: #303030;
        border-radius: 0px 0px 6px 7px;
    }
}
@media (min-width: 320px) and (max-width: 348px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 0px;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 349px) and (max-width: 354px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 0px;
        margin-right: -20px;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 355px) and (max-width: 359px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: -22px;
        margin-right: -20px;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 360px) and (max-width: 363px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: -21px;
        margin-right: -20px;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 364px) and (max-width: 367px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 0px;
        margin-right: -20px;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 368px) and (max-width: 371px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 3px;
        margin-right: -20px;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 372px) and (max-width: 375px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 5px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}

@media (min-width: 376px) and (max-width: 379px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 8px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 380px) and (max-width: 383px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 8px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 384px) and (max-width: 388px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 10px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 389px) and (max-width: 391px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 13px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 392px) and (max-width: 400px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left:16px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 401px) and (max-width: 403px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 22px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 404px) and (max-width: 410px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 24px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 411px) and (max-width: 415px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 29px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
} @media (min-width: 416px) and (max-width: 420px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 29px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 421px) and (max-width: 425px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 30px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 426px) and (max-width: 435px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 39px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 436px) and (max-width: 440px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 44px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 441px) and (max-width: 445px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 45px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 446px) and (max-width: 455px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 49px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 456px) and (max-width: 465px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 58px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 466px) and (max-width: 480px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 63px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 481px) and (max-width: 500px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 72px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 501px) and (max-width: 505px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 74px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 505px) and (max-width: 515px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 74px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 516px) and (max-width: 520px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 74px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 520px) and (max-width: 521px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 74px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
@media (min-width: 522px) and (max-width: 550px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 87px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}

@media (min-width: 551px) and (max-width: 766px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 95px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}

@media (min-width: 767px) and (max-width: 767px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 98px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}

@media (min-width: 768px) and (max-width: 768px){
    .flatpickr-calendar.rangeMode.animate.open.arrowTop.arrowLeft {
        top: 161px !important;
        margin-left: 158px;
        opacity: 2 !important;
        box-shadow: rgb(4 4 4 / 68%) 135px 73px 135px 135px;
    }
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #303030 !important;
    border-color: #303030 !important;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 transparent !important;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
    color: rgb(0 0 0 / 64%) !important;
}
span.flatpickr-day.nextMonthDay.selected.endRange {
    color: #fff !important;
}
span.flatpickr-day.nextMonthDay.selected.startRange {
    color: #ffff !important;
}