#timetable{--hour-side-width: 60px;display:block;margin:2em auto}#timetable .header{background-color:#f9fafb;font-weight:bold;box-shadow:none;width:calc(100% - var(--hour-side-width) - 10px);margin-left:var(--hour-side-width);padding-left:0;display:flex;flex-direction:row;gap:0}#timetable .header span{flex:1;text-align:center}#timetable .content{position:relative}#timetable .hours{position:absolute;width:40px;left:0;top:-.5em}#timetable .hours .hour{position:absolute}#timetable .hours .hour .hour-bar{content:"";position:absolute;height:1px;background:lightgray;top:50%;left:100%;margin-left:10px}#timetable .courses{position:absolute;text-align:center;top:0;left:var(--hour-side-width)}#timetable .courses .slot{background-color:cadetblue;position:absolute;display:flex;flex-direction:column;justify-content:center}#timetable .courses .slot .course-type{position:absolute;top:0;right:0;padding:10px}