.calendar > .month  .fa-circle-play { color:var(--cv-gold-100) }
.calendar > .month  .fa-circle-info { color:var(--cavelo-blue) }
.calendar > .month  .fa-circle-stop { color:var(--cavelo-black) }
.calendar > .month  .fa-circle-check { color:var(--cavelo-green) }
.calendar > .month  .fa-circle-xmark { color:var(--cavelo-orange) }

.calendar {
    background-color:var(--cavelo-platinum-20);
    box-sizing:border-box;
    border-width:0;
    width:calc(100% - 1px);
}

.calendar > .month { 
    position:relative;
    display: grid;
    row-gap:1px;
    column-gap:1px;
    width:100%;
    min-width:100%;
    max-width:100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
}

.calendar > .month > .headings,
.calendar > .month > .week {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    position:relative;
    display: grid;
    row-gap:1px;
    column-gap:1px;
    width:100%;
    min-width:100%;
    max-width:100%;
}

.calendar > .month > .headings > div { text-align:center; padding:10px; }
.calendar > .month > .details { 
    padding:0.5rem; 
    background-color:var(--cavelo-platinum-40);
    border:1px solid var(--cavelo-black-20);
}
.calendar > .month > .details > div > * { margin-right:0.5rem; }

.calendar > .month > .week > .day {
    position:relative;
    display:grid;
    grid-template-columns: auto 1fr;
    column-gap:0;
    width:100%;
    min-width:100%;
    max-width:100%;
    height:100px;
    min-height:100%;
    max-height:100%;
    cursor:pointer;
    /* cursor: context-menu; */
    background-color:var(--cavelo-white);
    border:1px solid transparent;
}
.calendar > .month > .week > .day.square { height:auto; aspect-ratio:1/1; }
.calendar > .month > .week > .day.collapse { height:auto; }
.calendar > .month > .week > .day.collapse > .events { display:flex; }

.calendar > .month > .week > .day > .date { width:2.4em; padding:0.5em; color:var(--cavelo-black) }
.calendar > .month > .week > .day.in-month > .date { font-weight:bold; }

.calendar > .month > .week > .day > .events { display:grid; padding:0.5rem; grid-template-columns: 1.2rem 1.2rem 1.2rem 1.2rem 1.2rem 1.2rem; grid-template-rows:1.2rem 1.5rem 1.5rem; }
.calendar > .month > .week > .day > .events > div:not([data-event]) { grid-column:span 6; margin-top:0.2rem; }


.calendar > .month > .week > .day:not(.in-month) { opacity:0.1 }
.calendar > .month > .week > .day.in-month * { opacity:0.5 }
.calendar > .month > .week > .day.today * { opacity:0.8 }

.calendar > .month > .week > .day.today:hover *,
.calendar > .month > .week > .day.active *,
.calendar > .month > .week > .day.active { opacity:1 }

.calendar > .month > .week > .day:not(.active):hover,
.calendar > .month > .week > .day:not(.active):hover * { opacity:0.8 }

.calendar > .month > .week > .day.active,
.calendar > .month > .week > .day:not(.today):hover { border-color:var(--cavelo-platinum); }
.calendar > .month > .week > .day.today.active,
.calendar > .month > .week > .day.today:hover { border-color:var(--cavelo-green); }

.view-schedule.hovered { background-color:var(--cavelo-platinum); }
[data-schedule].hovered > i { animation: pulseDot 1s infinite; overflow:visible; }