body {
	--correct-col: #070;
	--correct-typo-col: #470;
	--error-passed-col: #710;
	--error-col: #700;
	
	--error-box-fg: #900;
	--error-box-hr: #933;
	--error-box-bg: #FFE4E4;
	
	--collapsible-check-checked: gray;
	
	font-family: Calibri, sans-serif;
	
	h1 {
		text-align: center;
	}
	
	.library-title {
		margin-bottom: 0;
	}
	
	.library-subtitle {
		font-style: italic;
		font-size: 0.9em;
		margin-top: 0.1em;
	}
	
	.library-header, .library-footer {
		margin: 0.5em 0;
	}
	
	.library-header-control, .library-footer-control {
		margin: 0.3em 0.5em;
		border: 1px solid black;
	}
	
	.library-loading-errpr {
		padding: 0.5em;
		margin: 0.5em 1em;
		border: 2px solid var(--error-box-fg);
		background-color: var(--error-box-bg);
		
		hr {
			border: 1px solid var(--error-box-hr);
			margin: 0.2em 0;
		}
	}
	
	.library-options {
		display: flex;
	}
	
	#begin-button {
		#next-question {
			font-size: 1.2em;
		}
	}
	
	#question-text {
		margin: 0;
		font-size: 2em;
	}
	
	#question-notes-field {
		margin: 0;
		color: #444;
		font-style: italic;
	}
	
	#multiple-choice-field {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4em;
		
		button.multiple-choice-answer {
			font-size: 1.2em;
			
			padding: 0.5em;
			text-align: center;
			
			background-color: #eee;
			border-radius: 0;
			border: 1px solid black;
			
			span {
				text-decoration-thickness: 3px;
			}
		}
		
		button.multiple-choice-answer:hover, button.active {
			background-color: #ccc;
			cursor: pointer;
		}
	}
	
	.attempt-indicator {
		margin: 0.3em 0;
	}
	
	#correct-indicator {
		font-size: 1.2em;
		font-weight: bold;
	}
	
	/* For the div containing a collapsible button & checkbox */
	.collapsible_header {
		padding: 0.5em;
		min-height: 1.5em;
		display: flex;
		
		text {
			white-space: nowrap;
		}
		
		button.collapsible-button {
			margin: 0 0.3em;
			padding: 0.1em 0.5em;
			font-style: italic;
			text-align: center;
			min-width: 2.5em;
			
			background-color: #eee;
			border-radius: 0%;
			border: 1px solid black;
		}
		
		button.active, button.collapsible-button:hover {
			background-color: #ccc;
			cursor: pointer;
		}
		
		button.collapsible-new-group {
			background-color: #5D7;
		}
		
		button.collapsible-new-group:hover {
			background-color: #3B5;
		}
		
		button.collapsible-delete-group {
			background-color: #D57;
		}
		
		button.collapsible-delete-group:hover {
			background-color: #B35;
		}
	}
	
	button.edit-group-delete {
		border-radius: 0;
		border: 1px solid black;
		margin: 0.5em;
	}
	
	button.edit-group-delete {
		background-color: #D57;
	}
	
	button.edit-group-delete:hover {
		background-color: #B35;
	}

	/* For the buttons, on hover */
	.active, .library-header-control:hover, .library-footer-control:hover {
		background-color: #ccc;
		cursor: pointer;
	}

	/* For the checkboxes in collapsibles */
	input.collapsible_check {
		margin: 0 0.4em;
		
		background-color: white;
		border-radius: 0%;
		vertical-align: top;
		border: 1px solid black;
	}

	.collapsible_check:checked {
		background-color: var(--collapsible-check-checked);
	}

	/* For the content that is hidden by default. */
	.collapsible_content {
		padding: 0 1.1em;
		display: none;
		overflow: hidden;
	}
	
	.editing-pane-header-subtitle {
		margin: 0.4em 0em;
		font-size: 0.8em;
		color: #666;
	}
	
	#progress-div-body {
		margin-left: 2em;
		
		p {
			margin: 0.3em 0;
		}
	}
	
	button.interface-button {
		border-radius: 4px;
		border: 1px solid black;
	}
	
	button.interface-button:hover {
		background-color: #ccc;
		cursor: pointer;
	}

	/* td, th { */
		/* padding-left: 12px; */
		/* padding-right: 12px; */
		/* padding-top: 4px; */
		/* padding-bottom: 4px; */
		/* border: 1px solid #666; */
	/* } */
}