input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.filter {

    /* calendar */
    #calendar {
        padding: calc(var(--spacing)*5);
    }
    .vc {
        padding: 0;
    
        .vc-month:hover,
        .vc-year:hover {
            color: var(--color-black);
        }
    
        .vc-week {
            padding: calc(var(--spacing)*2);
            position: relative;
            background-color: var(--color-purple-50);
    
            b {
                color: var(--color-black);
                font-size: var(--text-sm);
                font-weight: 500;
            }
        }
    
        .vc-controls {
            padding-top: calc(var(--spacing)*1);
        }
    
        .vc-column:first-of-type .vc-week::before {
            content: "";
            position: absolute;
            left: 100%;
            width: 28px;
            height: 100%;
            background-color: var(--color-purple-50);
        }
    
        .vc-dates {
    
            .vc-date {
    
                .vc-date__btn {
                    font-size: var(--text-sm);
                    font-weight: 600;
                    color: var(--color-black);
                    padding: calc(var(--spacing)*2);
    
    
                    &[aria-disabled="true"] {
                        opacity: 0.2;
                        cursor: not-allowed;
                    }
    
                    &[aria-selected="true"] {
                        background-color: var(--color-black);
                        color: var(--color-white);
                    }
                }
    
                &[data-vc-date-weekend][data-vc-date-hover] .vc-date__btn,
                &[data-vc-date-hover] .vc-date__btn,
                &:hover .vc-date__btn {
                    background-color: var(--color-stone-100);
    
                    &[aria-selected="true"] {
                        background-color: var(--color-black);
                        color: var(--color-white);
                    }
                }
                &[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn:hover,
                &[data-vc-date-selected="middle"] .vc-date__btn {
                    color: var(--color-black) !important;
                    background-color: var(--color-stone-100) !important;
                }
            }
        }
    }
}



@media screen and (max-width: 768px) {
    .filter {
        .vc {

            .vc-column:first-of-type .vc-week::before {
                content: unset;
            }
            .vc-week,
            .vc-controls {
                display: none;
            }

        }
    }
}