/* CALENDAR VIEW */

.calendar-view {position:relative;}

.calendar-view .cv-top-bg {display:none;}

.calendar-view.dark {background: var(--clr-plate);}
.calendar-view.dark:before {content:''; display:block; position:absolute; width:100%; height:80px; background: var(--clr-prim);}
.calendar-view.dark .cv-ctrl .ic:before {background:var(--clr-plate);}
.calendar-view.dark .month-label {color:var(--clr-plate);}
.calendar-view.dark .week-days {color:var(--clr-plate);}
.calendar-view.dark .week .day {background:none;}

.calendar-view .cv-ctrl {position:absolute; width:calc(100% - 20px); margin:10px; z-index: 1;}
.calendar-view .cv-ctrl .cv-prev {position:absolute; display:block; left:0;}
.calendar-view .cv-ctrl .cv-next {position:absolute; display:block; right:0;}
.calendar-view .cv-ctrl a:active .ic {opacity:0.5;}

.calendar-view .cv-items { display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; }
.calendar-view .cv-items::-webkit-scrollbar {display:none;}
.calendar-view.smooth .cv-items {scroll-behavior: smooth;}

.calendar-view .cv-items .cv-item { flex: 0 0 100%; margin-right:10px; width: 100%; position: relative; scroll-snap-align: start; scroll-snap-stop: always;}
.calendar-view .cv-items::-webkit-scrollbar {display:none;}

.calendar-view .week-label,
.calendar-view .month-label { font-size: 1rem; text-align:center; text-transform:uppercase; font-weight:bold; padding:10px;}

.calendar-view .week-days {display:flex; margin:0 0 10px; padding:10px 5px; justify-content:space-between;}
.calendar-view .week-days > div {flex:0 0 13%; text-align:center;}

.calendar-view .week {display:flex; margin:0 5px 5px; justify-content:space-between;}
.calendar-view .week .day {cursor:pointer; flex:0 0 13%; color:var(--clr-prim); background:var(--clr-plate); position:relative; text-align:center; border-radius:50%; }
.calendar-view .week .day:before { content: ""; display: block; float:left; padding-top: 100%; }
.calendar-view .week .day:after { content: ""; border-radius:50%; position:absolute; top:0; left:0; display: block; width: calc(100% - 2px); height:calc(100% - 2px); border:1px solid transparent; }
.calendar-view .week .day.today:after {border-color:var(--clr-ptim);}
.calendar-view .week .day:hover {background:#f7f7f7;}
.calendar-view .week .day.active { background: var(--clr-link); color: var(--clr-on-link);}
.calendar-view .week .day.off {opacity:0.3; cursor:default; background: var(--clr-plate); color: var(--clr-prim);}
.calendar-view .week .day.off:hover {background: var(--clr-plate);}

.calendar-view .week .day > * {display:block; position: absolute; left:0; width:100%; text-align:center;}
.calendar-view .week .day b {font-weight:normal;  font-size:1rem; line-height:1rem; height:1rem; top:calc(50% - 0.5rem);}

.calendar-view .week-item .day i { left:calc(50% - 3px); top:10%; width:6px; height:6px; border-radius:50%;}
.calendar-view .week-item .day.on i { background:var(--clr-link); }
.calendar-view .week-item .day.on.active i { background:var(--clr-on-link); }
.calendar-view .week-item .day i.full { background:#fa0; }
.calendar-view .week-item .day b {font-size:1rem; top:calc(40% - 0.5rem);}
.calendar-view .week-item .day em {font-style:normal; font-size:0.8rem; top:calc(40% + 0.5rem);}

/* Datetime picker */

.dt-picker {position:relative; --dim-dt-height:4rem; }
.dt-picker:after,
.dt-picker:before {content:''; position:absolute; width:100%; height:calc(var(--dim-dt-height) / 2); z-index:1;}
.dt-picker:before {bottom:0; background:linear-gradient(to bottom, transparent, var(--clr-plate));}
.dt-picker:after {top:0; background:linear-gradient(to top, transparent, var(--clr-plate));}

.dt-picker-view {display:flex; justify-content:center; align-items:center; position:relative;}
.dt-picker-view:before,
.dt-picker-view:after {content:''; position:absolute; width:100%; height:1px; bottom:var(--dim-dt-height); background:var(--clr-link);}
.dt-picker-view:before {top:var(--dim-dt-height);}
.dt-picker-view .items { overflow-y:scroll; height:calc(var(--dim-dt-height) * 3); scroll-snap-type: y mandatory;}
.dt-picker-view > * {display:none; text-align:center; flex:0 1 0;}
.dt-picker-view > .show {display:block;}
.dt-picker-view .day,
.dt-picker-view .month {flex-basis:var(--dim-dt-height);}
.dt-picker-view .month.labels {flex-basis:calc(var(--dim-dt-height) * 1.5);}
.dt-picker-view .year {flex-basis:calc(var(--dim-dt-height) * 1.2);}
.dt-picker-view .hour,
.dt-picker-view .minute {flex-basis:var(--dim-dt-height);}
.dt-picker-view .items::-webkit-scrollbar {display:none;}
.dt-picker-view .items > div {color:#999; line-height:var(--dim-dt-height); height:var(--dim-dt-height); font-size:calc(var(--dim-dt-height) / 3); scroll-snap-align: start; }
.dt-picker-view .items > div.active {color:var(--clr-link); font-weight:bold;}

.dt-picker-view .dots {flex-basis:calc(var(--dim-dt-height) / 3); color:var(--clr-link); line-height:var(--dim-dt-height); height:var(--dim-dt-height); font-size:calc(var(--dim-dt-height) / 2); font-weight: bold; animation: 2s dots-pulse infinite;}
@keyframes dots-pulse{0% {opacity:1;} 50% {opacity:0.5;} 100% {opacity:1;}}