.task{border-left:4px solid var(--subject-color)}
.subject-label{display:inline-flex;align-items:center;gap:5px}
.subject-label i,.color-legend i{display:inline-block;width:8px;height:8px;border-radius:50%}
.subject-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:2px}
.subject-line{display:inline-block;width:3px;height:12px;border-radius:2px;background:var(--subject-color);margin-right:8px;vertical-align:-2px}
.color-legend{display:flex;flex-wrap:wrap;gap:10px 17px;margin:-5px 0 16px;color:var(--muted);font-size:10px}
.color-legend span{display:inline-flex;gap:5px;align-items:center}
.calendar-event{border-left-color:var(--event-color);background:#f3f6fa}