.schedule {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.fixed-table-layout {
	table-layout: fixed;
}

.schedule th {
	background-color: var(--peach-400);
	color: white;
	font-weight: bold;
	text-align: initial;
}

.schedule th:hover {
	cursor: pointer;
}

.schedule td,
.schedule th {
	padding-block: calc(var(--size) / 3);
	padding-inline: calc(var(--size) / 2);
}

.schedule tr {
	border: 1px solid #ccc;
}

/* .schedule tr:nth-child(odd) {
	background-color: #f6f6f6;
} */

.schedule tr.odd-row {
	background-color: #f6f6f6;
}

.schedule-header {
	margin-block-start: calc(var(--size) * 2);
}

.schedule-header .filter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--size) / 3);
	margin-block-start: calc(var(--size));
}

#schedule-filter {
	min-width: 24rem;
	border: 2px solid;
}

@media only screen and (max-width: 47.9em) {
	/* Force table to not be like tables anymore */
	table,
	thead,
	tbody,
	th,
	td,
	tr {
		display: grid;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.schedule-classes tr {
		padding-block: var(--size);
	}

	.schedule-classes td sup {
		line-height: 2;
	}
	
	.schedule-classes td::before {
		font-weight: bold;
	}

	.schedule-classes td:nth-of-type(1)::before {
		content: 'Course: ';
	}
	.schedule-classes td:nth-of-type(2)::before {
		content: 'Teacher: ';
	}
	.schedule-classes td:nth-of-type(3)::before {
		content: 'Day: ';
	}
	.schedule-classes td:nth-of-type(4)::before {
		content: 'Time (ET): ';
	}
	.schedule-classes td:nth-of-type(5)::before {
		content: 'Grade: ';
	}
	.schedule-classes td:nth-of-type(6)::before {
		content: 'Semester: ';
	}
}

table.sortable th {
	position: relative;
	padding-left: 1.25em; /* space for icon */
	cursor: pointer;
	user-select: none;
}

table.sortable th::before {
	content: '↕';
	position: absolute;
	left: 0.4em;
	opacity: 0.6;
	font-size: 0.75em;
	line-height: 1;
	top: 50%;
	transform: translateY(-50%);
}

table.sortable th.sorted-asc::before {
	content: '▲';
	opacity: 0.8;
}

table.sortable th.sorted-desc::before {
	content: '▼';
	opacity: 0.8;
}

table.sortable th:hover::before {
	opacity: 0.7;
}