@media (max-width:640px) {
    .date-inputs .dates-wrapper {
        width: 100%;
        flex-wrap: wrap
    }

        .date-inputs .dates-wrapper > label {
            width: 100%;
            max-width: 200px
        }

        .date-inputs .dates-wrapper > span {
            width: 100%
        }
}

.date-inputs label {
    cursor: pointer
}

    .date-inputs label input[type=date] {
        display: none
    }

    .date-inputs label .date-box {
        border: 2px solid #dae2ec;
        background-color: #fff;
        width:150px;
    }

        .date-inputs label .date-box .date-icon {
            vertical-align: middle;
            width: 32px;
            height: 32px;
            display: inline-block;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("data:image/svg+xml,<svg width='16' height='19' viewBox='0 0 16 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.42857 0.857143C5.42857 0.382143 5.04643 0 4.57143 0C4.09643 0 3.71429 0.382143 3.71429 0.857143V2.28571H2.28571C1.025 2.28571 0 3.31071 0 4.57143V5.14286V6.85714V16C0 17.2607 1.025 18.2857 2.28571 18.2857H13.7143C14.975 18.2857 16 17.2607 16 16V6.85714V5.14286V4.57143C16 3.31071 14.975 2.28571 13.7143 2.28571H12.2857V0.857143C12.2857 0.382143 11.9036 0 11.4286 0C10.9536 0 10.5714 0.382143 10.5714 0.857143V2.28571H5.42857V0.857143ZM1.71429 6.85714H4.57143V8.85714H1.71429V6.85714ZM1.71429 10.5714H4.57143V12.8571H1.71429V10.5714ZM6.28571 10.5714H9.71429V12.8571H6.28571V10.5714ZM11.4286 10.5714H14.2857V12.8571H11.4286V10.5714ZM14.2857 8.85714H11.4286V6.85714H14.2857V8.85714ZM14.2857 14.5714V16C14.2857 16.3143 14.0286 16.5714 13.7143 16.5714H11.4286V14.5714H14.2857ZM9.71429 14.5714V16.5714H6.28571V14.5714H9.71429ZM4.57143 14.5714V16.5714H2.28571C1.97143 16.5714 1.71429 16.3143 1.71429 16V14.5714H4.57143ZM9.71429 8.85714H6.28571V6.85714H9.71429V8.85714Z' fill='%23FFFFFF'/></svg>");
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-color: #28476c;
            background-size: initial
        }

        .date-inputs label .date-box .date-text {
            vertical-align: middle;
            box-sizing: border-box;
            padding: 8px 14px
        }

.date-wrapper {
    position: relative
}

.date-container {
    width: fit-content;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .2);
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    color: #fff;
    position: absolute;
    z-index: 2
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #28476c;
    padding: 12px 4px;
    box-sizing: border-box;
    font-size: 18px
}

    .calendar-header .btn-month {
        width: 16px;
        height: 18px;
        padding: 0 20px;
        box-sizing: border-box;
        background-color: #28476c;
        color: #dae2ec;
        border: none;
        outline: 0
    }

        .calendar-header .btn-month#prev-month {
            display: inline-block;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url('data:image/svg+xml,<svg viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14453 1.45966L1.86874 6.49578L8.14453 11.9193" stroke="%23DAE2EC" stroke-width="2"/></svg>')
        }

        .calendar-header .btn-month#next-month {
            display: inline-block;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url('data:image/svg+xml,<svg viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L10 8.5L2 15.5" stroke="%23DAE2EC" stroke-width="2"/></svg>')
        }

        .calendar-header .btn-month:hover {
            color: #f5a200
        }

            .calendar-header .btn-month:hover#prev-month {
                display: inline-block;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml,<svg viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14453 1.45966L1.86874 6.49578L8.14453 11.9193" stroke="%23F5A200" stroke-width="2"/></svg>')
            }

            .calendar-header .btn-month:hover#next-month {
                display: inline-block;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml,<svg viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L10 8.5L2 15.5" stroke="%23F5A200" stroke-width="2"/></svg>')
            }

    .calendar-header a:focus {
        outline: 0
    }

    .calendar-header .selected-option {
        padding: 8px 12px;
        border-radius: 4px;
        transition: all .2s ease
    }

        .calendar-header .selected-option:hover {
            background-color: #203c5f;
            transition: all .2s ease
        }

        .calendar-header .selected-option::after {
            content: "";
            width: 12px;
            height: 12px;
            margin-left: 8px;
            display: inline-block;
            display: inline-block;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L8.19048 8L14.5 2" stroke="%23ffffff" stroke-width="2"/></svg>');
            opacity: .5;
            transition: all ease .2s
        }

    .calendar-header .select-set {
        background-color: #28476c;
        border: 0;
        cursor: pointer;
        position: relative
    }

        .calendar-header .select-set .option-list {
            position: absolute;
            top: 100%;
            margin-top: 2px;
            left: 50%;
            transform: translateX(-50%);
            display: none;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,.2);
            width: fit-content;
            min-width: 90px;
            max-height: 180px;
            overflow-y: scroll;
            margin-bottom: 0;
            border-radius: 6px
        }

            .calendar-header .select-set .option-list::-webkit-scrollbar {
                width: 5px
            }

            .calendar-header .select-set .option-list::-webkit-scrollbar-track {
                border-radius: 4px
            }

            .calendar-header .select-set .option-list::-webkit-scrollbar-thumb {
                background-color: #eaeaea;
                border-radius: 4px
            }

        .calendar-header .select-set.select-month {
            margin-right: 8px;
            border-radius: 2px
        }

        .calendar-header .select-set.active .option-list {
            display: block
        }

            .calendar-header .select-set.active .option-list li {
                font-size: 14px;
                color: #222;
                padding: 8px 16px
            }

                .calendar-header .select-set.active .option-list li:hover {
                    background-color: #dae2ec
                }

        .calendar-header .select-set.active .selected-option {
            background-color: #203c5f;
            outline: 1px solid #54739a;
            transition: all .2s ease
        }

            .calendar-header .select-set.active .selected-option::after {
                display: inline-block;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L8.19048 8L14.5 2" stroke="%23F5A200" stroke-width="2"/></svg>');
                opacity: 1;
                transform-origin: center;
                transform: rotate(180deg);
                transition: all ease .2s
            }

    .calendar-header .current-month {
        display: flex;
        align-items: center
    }

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-top: 10px;
    color: #28476c;
    padding: 0 16px;
    color: #6997cc
}

.calendar-dates {
    display: grid;
    grid-template: repeat(5, 1fr)/repeat(7, 1fr);
    box-sizing: border-box;
    padding: 12px 16px
}

.calendar-date {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 2px;
    color: #222;
    text-align: center;
    line-height: 40px
}

@media (max-width:640px) {
    .calendar-date {
        width: 26px;
        height: 26px;
        line-height: 26px
    }
}

.calendar-date.empty {
    cursor: auto
}

    .calendar-date.empty:hover {
        background-color: unset
    }

.calendar-date.selected, .calendar-date:hover {
    background-color: #28476c;
    color: #fff;
    border-radius: 50%
}

.calendar-date:hover {
    background-color: #adc6e3
}