.week-calendar{
    overflow:auto;
}

.week-root{
    display:flex;
    flex-direction:column;
    min-width:1200px;
    width:100%;
}


.week-header{
    display:grid;
    grid-template-columns:90px repeat(7,1fr);
    background:#202124;
    border-bottom:1px solid #3c4043;
    flex-shrink:0;
}

.week-header-corner{
    border-right:1px solid #3c4043;
}

.week-header-day{
    text-align:center;
    padding:10px 0;
    border-right:1px solid #303134;
}

.weekday-name{
    font-size:12px;
    color:#9aa0a6;
}

.day-number{
    margin-top:4px;
    font-size:30px;
    font-weight:300;
}

.day-number.today{
    background:#8ab4f8;
    color:#202124;
    width:40px;
    height:40px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.week-content{
    display:grid;
    grid-template-columns:90px repeat(7,1fr);
}

.time-column{
    display:flex;
    flex-direction:column;
    border-right:1px solid #303134;
    background:#202124;
}

.time-slot{
    position:relative;
    height:120px;
}

.time-slot::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    border-bottom:1px solid #303134;

}

.time-label{
    position:absolute;
    right:12px;
    top:0;
    transform:translateY(-50%);
    background:#202124;
    padding:0 4px;
    color:#9aa0a6;
    font-size:12px;
}

.week-column{
    position:relative;
    border-right:1px solid #303134;
}

.week-hour{
    position:relative;
    height:120px;
}

.week-hour::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    border-bottom:1px solid #303134;
}

.week-event-layer{
    position:absolute;
    inset:0;
}

.week-event{
    position:absolute;
    background:#1a73e8;
    border-left:4px solid #8ab4f8;
    border-radius:6px;
    color:white;
    padding:6px;
    overflow:hidden;
    cursor:pointer;
    box-sizing:border-box;
}

.week-event.event-status-red{
    background: #a60e00;
    border-left-color:#f28b82;
}

.week-event.event-status-green{
    background: #008e26;
    border-left-color:#81c995;
}

.week-event.event-status-blue{
    background:#1a73e8;
    border-left-color:#8ab4f8;
}

.week-event:hover{
    filter:brightness(1.08);
}

.week-event-title{
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.week-event-time{
    margin-top:2px;
    font-size:11px;
    opacity:.85;
}

.current-time-line{
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:#ea4335;
    z-index:50;
}

/* ==========================================================
   DAY VIEW
========================================================== */

.day-root .week-header{
    grid-template-columns:
        90px 1fr;
}

.day-root .week-content{
    grid-template-columns:
        90px 1fr;
}



.weekends-root .week-header {
    grid-template-columns:
        90px repeat(3, minmax(0, 1fr));
}

.weekends-root .week-content {
    grid-template-columns:
        90px repeat(3, minmax(0, 1fr));
}