/************************************
* Custom styles for datepicker
************************************/
/* container */
.qs-datepicker-container {
    transition:var(--vii-transition); width:var(--vii-100vw); max-width:328px; border-radius:0;
    font-family:var(--vii-font-primary);
}

/* year */
.qs-overlay .qs-overlay-year::-webkit-input-placeholder {color:rgba(255, 255, 255, 0.6);}

/* heading */
.qs-controls {min-height:30px; display:flex; align-items:center;}
.qs-day {font-size:15px;}
.qs-month-year {font-weight:400;}

/* current */
.qs-square {width:calc(100% / 7); height:33px; border-radius:0;}
.qs-current {text-decoration:unset; font-weight:400;}

/* range + active */
.qs-active, .qs-range-end, .qs-range-start {background:var(--vii-color-primary); color:white;}

/* hover */
.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day).qs-current:hover {
    background:#eee; color:gray;
}
.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover {
    background:var(--vii-color-primary); color:white;
}

/* hidden */
.qs-hidden {opacity:0; visibility:hidden; pointer-events:none; display:block;}

/* arrow */
.qs-arrow:hover {background:var(--vii-color-primary);}
.qs-arrow.qs-left:hover:after {border-right-color:white;}
.qs-arrow.qs-right:hover:after {border-left-color:white;}

@media only screen and (max-width:480px) {
    /* container */
    .qs-datepicker-container {max-width:300px;}
}