.grid {
	/* Use CSS grid to create a two-column layout */
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.grid {
		/* grid-template-columns: 1fr 1fr; */
		/* grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); */
	}
}

ul#categories {
	/* Remove bullets for categories at top-level */
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.category > .li-row {
	display: flex; /* Position the expand/collapse toggle and the category title next to each other horizontally */
	align-items: center; /* Vertically center the expand/collapse toggle */
}
.category > .li-row label {
	width: 100%; /* Take up the available space */
}
.category > .li-row > label {
	display: flex; /* Position the expand/collapse toggle and the category title next to each other horizontally */
	align-items: center; /* Vertically center the expand/collapse toggle */
}
.category .title {
	width: 100%; /* Make the title take up the remaining available space */
}

.collapse-tree .expand-toggle {
	font-size: 0.9em;
	margin-right: 0.25rem;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	padding: 1px 6px;
}
.collapse-tree .category > .li-row .expand-toggle {
	border-radius: 0.5rem; /* Make top-level expand toggles' corners more rounded */
}

/* Make expand/collapser toggle bigger for categories at top-level */
.category > .li-row .expand-toggle {
	font-size: 1.5em;
	margin-right: 0.5rem;
}
.category > .li-row .expand-toggle .expander,
.category > .li-row .expand-toggle .collapser {
	width: 20px; /* Make the expand/collapse "button" take up constant width */
}

.collapse-tree .expand-toggle:active {
	background-color: #eee; /* Provides visual indication that the button is focused when using tab key to focus elements */
	color: #000;
	/* These aren't consistent across browsers */
	/*outline-color: -webkit-focus-ring-color;*/
	/*outline-style: solid;*/
	/*outline-width: 2px;*/
}

.collapse-tree input[type="checkbox"].expand-collapse-checkbox[id]:active ~ .li-row .expand-toggle,
.collapse-tree input[type="checkbox"].expand-collapse-checkbox[id]:focus ~ .li-row .expand-toggle {
	background-color: #eee; /* Provides visual indication that the button is focused when using tab key to focus elements */
	color: #000;
}

.collapse-tree .expander {
	text-align: center;
	width: 10px;
}
.collapse-tree .collapser {
	text-align: center;
	width: 10px;
}

.category .title {
	background: #1771b7;
	/* border: 1px solid #000; */
	border-radius: 0.5rem;
	color: #fff;
	font-family: 'Calibri', Arial, 'Century Gothic', 'sans-serif'; /* Use Teaching and Learning Unit-requested fonts */
	font-size: 1.5em;
	padding: 1rem;
}

.category > ul {
	margin-top: 1rem; /* Add space above list items */
	margin-left: 2rem; /* Move list over a bit to better align with category title box */
}
.category > ul li {
	margin-bottom: 4px; /* Add space "between" list items (below each list item) */
}