div.schedule {
	display: grid;
	grid-template-columns: 80px repeat(5, 1fr);
	grid-template-rows: 45px repeat(32, 29px);
	gap: 5px;
	width: 100%;
	position: relative;
	overflow-x: auto;
}

div.schedule .header {
	background: #eee;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

div.schedule .time {
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

div.schedule .times {
	position: relative;
}
div.schedule .times span {
	position: absolute;
	top: -.9em;
}

div.schedule .event {
	display: flex;
}
div.schedule .event a {
	width: 100%;
    height: 100%;
    text-align: center;
    color: white !important;
	font-size: 17.5px;
    padding: 8px 5px 5px;
    line-height: .9em;
}
div.schedule .event a:hover {
	font-weight: bold;
}
div.schedule .event a span {
	display: block;
    font-size: .8em;
	margin-top: .55em;
}
div.schedule .green { background-color: #0ab446; }
div.schedule .yellow { background-color: #e6c800; }
div.schedule .red { background-color: #f0143c; }
div.schedule .blue { background-color: #005a78; }
div.schedule .brown { background-color: #a0460a; }
div.schedule .purple { background-color: #645096; }

/* switch out the wide blocks for narrow blocks */
div.schedule .wide { display: none; }
@media only screen and (min-width: 990px) {
	div.schedule .wide { display: flex; }
	div.schedule .narrow { display: none; }
}