html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*, *::before, *::after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
}
button {
	cursor: pointer;
	font: inherit;
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	color: inherit;
}
input, select, textarea {
	font: inherit;
	margin:  0;
	padding:  0;
}
textarea {
	margin-bottom: 0;
}
hr {
	margin: 0;
}
html, body { height: 100%; }
/*
Use .columns on a container to create a grid,
then use the .columns-n where 1 <= n <= 12 on each column in the grid.
*/
.columns {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 3rem;
	align-items: start;
}
.columns > .columns-1 { grid-column: span 1; }
.columns > .columns-2 { grid-column: span 2; }
.columns > .columns-3 { grid-column: span 3; }
.columns > .columns-4 { grid-column: span 4; }
.columns > .columns-5 { grid-column: span 5; }
.columns > .columns-6 { grid-column: span 6; }
.columns > .columns-7 { grid-column: span 7; }
.columns > .columns-8 { grid-column: span 8; }
.columns > .columns-9 { grid-column: span 9; }
.columns > .columns-10 { grid-column: span 10; }
.columns > .columns-11 { grid-column: span 11; }
.columns > .columns-12 { grid-column: span 12; }
@media (max-width: 900px) {
	.columns-page-width {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 3rem;
	}

	.columns-collapse-reverse {
		flex-direction: column-reverse;
	}
}
.horizontal-layout {
	display: flex;
}
.horizontal-layout.gap-wide {
	gap: 2em;
}
.horizontal-layout.gap-normal {
	gap: 1em;
}
.horizontal-layout.gap-small {
	gap: 0.5em;
}
.horizontal-grow {
	flex-grow: 1;
}
.horizontal-between {
	justify-content: space-between;
}
.horizontal-layout.align-center {
	align-items: center;
}
.horizontal-layout.align-bottom {
	align-items: end;
}
.vertical-layout {
	display: flex;
	flex-direction: column;
}
.vertical-layout.align-left {
	align-items: start;
}
.vertical-layout > .align-left {
	align-self: start;
}
.vertical-layout > .align-right {
	align-self: end;
}
.vertical-layout > * + * {
	margin-top: 1em;
}
.vertical-layout > input[type=hidden]:first-child + *, .vertical-layout > input[type=hidden]:first-child + input[type=hidden] + * {
	margin-top: 0;
}
.vertical-layout.vertical-layout-narrow > * + * {
	margin-top: 0.5em;
}
.vertical-layout.vertical-layout-wide > * + * {
	margin-top: 2em;
}
.vertical-layout-stretched > * {
	align-self: stretch;
}
.grid {
	display: grid;
	grid-row-gap: 1.7em;
	grid-column-gap: 1.5em;
}
.grid-large-items {
	grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
}
.grid-medium-items {
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.grid-small-items {
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
.grid-align-top {
	align-items: start;
}
.grid > .pill {
	grid-column: 1 / -1;
	justify-self: center;
}
.app-wrapper {
	height: 100%;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	grid-template-columns: fit-content(20vw) auto 1fr;
	grid-template-areas:
		"logo   breadcrumbs   header"
		"nav    notifications notifications"
		"nav    page          page"
		"nav    page-bar      page-bar";
}
.app-wrapper.app-wrapper-logged-out {
	grid-template-areas:
		"logo          breadcrumbs   header"
		"notifications notifications notifications"
		"page          page          page"
		"page-bar      page-bar      page-bar"
}
.app-logo { grid-area: logo; }
.app-header { grid-area: header; }
.app-menu { grid-area: nav; }
.app-notifications { grid-area: notifications; }
.app-page { grid-area: page; }
.app-footer { grid-area: page-bar; }
.app-breadcrumbs { grid-area: breadcrumbs; }
.app-header, .app-logo, .app-breadcrumbs {
	background-color: var(--header-background);
	color: white;
	border-bottom: solid 1px black;
}
/* Redneck specificity override */
.app-notifications .notification.notification {
	border-left: none;
	border-right: none;
	border-top: none;
}
/* Logo */
.app-logo {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 0.5em;
}
.app-wrapper.app-wrapper-logged-out .app-logo img {
	height: 2.5em;
}
.app-logo img {
	height: 2em;
}
/* Breadcrumbs */
.app-breadcrumbs {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 0.5em;
	padding-right: 1em;

	white-space: nowrap;
	overflow-x: auto;
}
.app-breadcrumbs svg {
	width: 1em;
	flex-shrink: 0;
	margin-top: 0.1em;
}
.app-breadcrumbs > a:not(:last-child) {
	max-width: 15vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app-breadcrumbs > a:hover {
	text-decoration: underline;
}
/* Header */
.app-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: end;
	-moz-column-gap: 1.5em;
	     column-gap: 1.5em;
	row-gap: 0.5em;
	padding: 0.75em;
	text-align: center;
}
.app-header svg {
	height: 1.5em;
}
/* Menu */
.app-menu {
	display: flex;
	flex-direction: column;
	overflow-y: auto;

	background-color: var(--header-background);
	color: white;
	border-right: solid 1px black;
}
.app-menu h1 {
	font-size: 1.5em;
	padding: 0.5rem;
	padding-right: 0.75rem;
	padding-bottom: 0.75rem;
}
.app-menu a, .app-menu-header {
	line-height: 1.4em;
}
.app-menu a {
	scroll-margin: 3.25em;
	display: block;
	padding: 0.25rem;
	padding-left: 0.75rem;
	padding-right: 1rem;
}
.app-menu a.active, .app-menu a:hover {
	background-color: var(--secondary-color);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}
.app-menu-header {
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.075em;
	color: #aaa;
	font-size: 0.8em;
	margin-top: 1.5rem;
	padding: 0.25rem 0.75rem;
	max-width: 13rem;
}
.app-menu-header:first-child {
	margin-top: 0.5rem;
}
.app-menu ol ol {
	margin-left: 0.6rem;
	padding-left: 0.5rem;
	border-left: solid 1px #888;
}
.app-menu li {
	margin: 0.25rem 0;
}
/* Page */
.app-page {
	overflow-y: auto;
}
/* Page Bar */
.app-footer {
	background-color: var(--background-color);
	box-shadow: 0 -4px 6px -6px rgba(0, 0, 0, 0.2);
	border-top: solid 1px #aaa;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.app-footer-center { margin-left: auto; }
.app-footer-center + .course-footer-center { margin-left: 0; }
.app-footer-right { margin-left: auto; }
.app-footer-right + .course-footer-right { margin-left: 0; }
.app-footer-right ~ .app-footer-right { margin-left: 0; }
.app-footer-center:last-child { margin-right: auto; }
@media (max-width: 1000px) {
	.app-wrapper {
		height: unset;
		min-height: 100%;
		grid-template-rows: auto auto 1fr auto auto;
		grid-template-columns: auto auto;
		grid-template-areas:
			"breadcrumbs header"
			"notifications notifications"
			"page page "
			"page-bar page-bar"
			"nav nav"
			"logo logo";
	}

	.app-breadcrumbs {
		padding-left: 0.75rem;
	}

	.app-menu h1 {
		padding-top: 0.75rem;
	}

	.app-menu {
		padding-bottom: 1rem;
	}

	.app-menu a {
		width: auto;
	}

	.app-logo {
		justify-content: center;
		border-top: solid 1px black;
		padding: 1em;
	}

	.app-logo img {
		height: 3em;
	}

	.app-page {
		overflow-y: unset;
		padding-bottom: 8rem;
	}
}
.app-logo { grid-area: logo; }
.app-header { grid-area: header; }
.app-menu { grid-area: nav; }
.app-notifications { grid-area: notifications; }
.app-page { grid-area: page; }
.app-footer { grid-area: page-bar; }
.app-breadcrumbs { grid-area: breadcrumbs; }
@media (max-width: 800px) {
	.app-wrapper.app-wrapper-logged-out {
		grid-template-rows: -webkit-min-content -webkit-min-content -webkit-min-content -webkit-min-content 1fr auto;
		grid-template-rows: min-content min-content min-content min-content 1fr auto;
		grid-template-columns: auto;
		grid-template-areas:
			"logo"
			"header"
			"breadcrumbs"
			"notifications"
			"page"
			"page-bar";
	}

	.app-wrapper-logged-out.app-logo { justify-content: center; }
	.app-wrapper-logged-out.app-header { justify-content: center; gap: 0.75em 1.25em; }
}
/* This is mainly intended to be @extended, though it is available as a class if needed. */
.anchor-link, .key-values a:not(.button), .text > p a, .text > :is(ol,             ul) > li > a, .text > :is(ol,             ul) > li > p a, .unit-quiz-question-prompt > p a, .unit-quiz-question-prompt > :is(ol,             ul) > li > a, .unit-quiz-question-prompt > :is(ol,             ul) > li > p a, .select-list-empty a, .tabs-right-slot a, button.link-button, tip-tap-editor .ProseMirror > p a, tip-tap-editor .ProseMirror > :is(ol,             ul) > li > a, tip-tap-editor .ProseMirror > :is(ol,             ul) > li > p a {
	text-decoration: underline;
	font-weight: bold;
	text-underline-offset: 1px;
	color: hsl(190, 50%, 35%);
	cursor: pointer;
}
/*
Use .key-values on a table to bold the left-most column of headers,
making a vertical list of key-value entries.
*/
table.key-values td {
	padding-left: 1em;
	line-height: 1.3em;
}
table.key-values td, table.key-values th {
	padding-bottom: 0.25em;
}
table.key-values th:not([colspan])::after {
	content: ":";
}
table.key-values th:not([colspan]) {
	font-style: italic;
	text-align: right;
	white-space: nowrap;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
	color: #555;
}
table.key-values th[colspan="2"] {
	font-weight: bold;
	font-style: normal;
	text-align: left;
	padding-top: 1.5rem;
	color: #444;
}
div.key-values {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-row-gap: 0.5em;
	grid-column-gap: 0.5em;
}
div.key-values-wrap {
	grid-template-columns: -webkit-min-content 16em -webkit-min-content 1fr;
	grid-template-columns: min-content 16em min-content 1fr;
}
div.key-values > * {
	line-height: 1.15em;
}
div.key-values > *:nth-child(2n + 1) {
	font-weight: bold;
	text-align: right;
}
div.key-values > *:nth-child(2n + 1)::after {
	content: ":";
}
.tile {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
}
.tile-content {
	padding: 0.75em;
	display: block;
	flex-grow: 1;
	background-color: white;
	line-height: 1.3em;
}
.tile-content strong {
	font-weight: bold;
}
.tile-content em {
	font-style: italic;
}
.tile-content h2 {
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 0.2em;
}
a.tile-content:hover {
	background-color: var(--primary-color);
	color: white;
}
a.tile-content + .tile-footer {
	border-top: solid thin transparent;
}
a.tile-content:hover + .tile-footer {
	border-top-color: var(--primary-color-active);
}
a.tile-content:hover h2 {
	color: white;
}
.tile-footer {
	background-color: var(--primary-color);
	display: flex;
}
.tile-footer > * { flex: 1; }
.tile-footer > * + * {
	border-left: solid 1px rgba(0, 0, 0, 0.4);
}
.tile-footer :is(button,        a) {
	text-align: center;
	background-color: transparent;
	border: none;
	width: 100%;
	padding: 0.5em;
	font-weight: bold;
	color: white;
	letter-spacing: 0.05em;
	transition: background-color 0.2s;
}
.tile-footer :is(button,        a):hover {
	background-color: var(--primary-color-hover);
	transition: none;
}
.tile-footer :is(button,        a):active {
	background-color: var(--primary-color-active);
	transition: none;
}
.notification {
	text-align: center;
	padding: 0.5rem;
}
.text > .notification, .unit-quiz-question-prompt > .notification, tip-tap-editor .ProseMirror > .notification {
	border: solid 1px transparent;
}
.notification-text-left {
	text-align: left;
}
/* Defaults spacing for text is a bit too large for a notification */
.notification.text > * + * {
	margin-top: 0.5em;
}
.notification.notification-info {
	background-color: hsl(200, 50%, 80%);
	color: hsl(200, 50%, 30%);
	border: solid 1px hsl(200, 50%, 55%);
	padding: 0.75rem;
}
.notification.notification-error {
	background-color: hsl(0, 50%, 50%);
	color: white;
}
.notification.notification-success {
	background-color: hsl(90, 50%, 40%);
	color: white;
}
.notification.notification-warning {
	border-color: hsl(45, 50%, 52%);
	background-color: hsl(40, 90%, 60%);
	color: hsl(40, 100%, 18%);
}
.notification.notification-success button.link-button, .notification.notification-success a {
	color: hsl(90, 40%, 100%);
}
.notification.notification-warning button.link-button, .notification.notification-warning a {
	color: hsl(40, 100%, 18%);
}
.notification.notification-error button.link-button, .notification.notification-error a {
	color: hsl(0, 100%, 100%);
}
/*
This component creates a form where labels and inputs are stacked vertically.
*/
.vertical-form > button:not(.icon-button), .vertical-form > input, .vertical-form > label {
	display: block;
}
/* Spacing */
.vertical-form > :is(label,        .label-wrapper) + input[type=hidden] + *, .vertical-form > :is(label,        .label-wrapper) + p + *, .vertical-form > :is(label,        .label-wrapper) + * {
	margin-top: 0.4em;
}
.vertical-form > .label-wrapper:has(h2) {
	margin-top: 1.5em;
}
.vertical-form > :is(label,        .label-wrapper) + .table {
	margin-top: 0.75em;
	box-shadow: none;
}
.vertical-form > input[type=hidden]:first-child + *, .vertical-form > input[type=hidden]:first-child + input[type=hidden] + *, .vertical-form > input[type=hidden]:first-child + input[type=hidden] + input[type=hidden] + *
{
	margin-top: 0;
}
.vertical-form > * + * {
	margin-top: 1em;
}
.vertical-form > * + h2 {
	margin-top: 2em;
}
.vertical-form > * + .invalid-feedback {
	margin-top: 0;
}
.vertical-form > *:not(button) + p {
	margin-top: 0.2em;
}
.horizontal-fields > p, .vertical-form > p {
	font-style: italic;
	color: #666;
	line-height: 1.25em;
}
.horizontal-fields > p a, .vertical-form > p a {
	text-decoration: underline;
	font-weight: bold;
	text-underline-offset: 1px;
}
/* Form Items */
/* Heading */
:is(.vertical-form,        .label-wrapper) > h2 {
	font-size: 1.5em;
	padding-bottom: 0.05em;
}
/* Label */
:is(.vertical-form,        .horizontal-fields,        .label-wrapper) > label {
	font-style: italic;
	color: #666;
	font-weight: bold;
	font-size: 1.1em;
	letter-spacing: 0.04em;
}
:is(.vertical-form,        .horizontal-fields,        .label-wrapper) > label.is-focused {
	color: #111;
}
:is(.vertical-form,        .horizontal-fields) > .label-wrapper {
	display: flex;
	justify-content: space-between;
}
/* Input */
/* These placeholders are extended in other modules. I haven't decided where to put them yet though, so for now they're here. */
:is(.vertical-form,                 .horizontal-fields) > :is(input,                 select,                 textarea), .radio-input, .button-click-input, .toggle-input, .table select, .table input:not([type=checkbox]):not([type=file]), .unit-essay > textarea, .search-container select, .search-container input, .chat-window-reply textarea, .assignment-view-due-date > input {
	background-color: white;
	padding: 0.3em;
	width: 100%;
	border: solid 2px #bbb;
}
:is(.vertical-form,                 .horizontal-fields) > :is(input,                 select,                 textarea).is-invalid:focus, :is(.vertical-form,                 .horizontal-fields) > :is(input,                 select,                 textarea):focus, .radio-input.is-invalid:focus, .radio-input:focus, .button-click-input.is-invalid:focus, .button-click-input:focus, .toggle-input.is-invalid:focus, .toggle-input:focus, .table select.is-invalid:focus, .table input:not([type=checkbox]):not([type=file]).is-invalid:focus, .table select:focus, .table input:not([type=checkbox]):not([type=file]):focus, .unit-essay > textarea.is-invalid:focus, .unit-essay > textarea:focus, .search-container select.is-invalid:focus, .search-container input.is-invalid:focus, .search-container select:focus, .search-container input:focus, .chat-window-reply textarea.is-invalid:focus, .chat-window-reply textarea:focus, .assignment-view-due-date > input.is-invalid:focus, .assignment-view-due-date > input:focus {
	border-color: #333;
	outline: none;
}
:is(.vertical-form,                 .horizontal-fields) > :is(input,                 select,                 textarea).is-invalid, .radio-input.is-invalid, .button-click-input.is-invalid, .toggle-input.is-invalid, .table select.is-invalid, .table input:not([type=checkbox]):not([type=file]).is-invalid, .unit-essay > textarea.is-invalid, .search-container select.is-invalid, .search-container input.is-invalid, .chat-window-reply textarea.is-invalid, .assignment-view-due-date > input.is-invalid {
	border-color: hsl(0, 50%, 50%);
}
:is(.vertical-form,                 .horizontal-fields) > input[type=checkbox] {
	width: auto;
}
:is(.vertical-form,                 .horizontal-fields) > textarea {
	line-height: 1.25em;
	min-height: 7.3em;
	resize: vertical;
}
.radio-input {
	padding: 0;
	display: flex;
	flex-direction: column;

	--separator-border: solid 1px #bbb;
}
.radio-input > label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em;
}
.radio-input:not(.radio-input-columns-2) > label + label {
	border-top: var(--separator-border);
}
.radio-input-columns-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.radio-input-columns-2 > label:nth-child(2n) {
	border-left: var(--separator-border);
}
.radio-input-columns-2 > label:nth-child(2) ~ label {
	border-top: var(--separator-border);
}
.radio-input-columns-2 > label:nth-child(2n + 1):last-child {
	grid-column: span 2;
}
.button-click-input {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.toggle-input {

	display: flex;
	align-items: center;
}
.toggle-input:focus-within {
	border-color: #333;
}
.toggle-input input {
	--toggle-background: white;
	--toggle-foreground: black;

	flex-shrink: 0;

	display: block;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;

	height: 1em;
	width: 2em;
	margin-left: 0.2em;
	border: 2px solid var(--toggle-foreground);

	background-color: var(--toggle-foreground);
}
.toggle-input::after {
	content: attr(data-inactive);
	margin-left: 0.5em;
	line-height: 1.1em;
}
.toggle-input:has(input:checked)::after {
	content: attr(data-active);
}
.toggle-input input:not(:checked) {
	--toggle-foreground: #888;
	box-shadow: inset 0 0 0 2px var(--toggle-background), inset calc(1em * -1) 0 0 2px var(--toggle-background);
}
.toggle-input input:checked {
	box-shadow: inset 0 0 0 2px var(--toggle-background), inset 1em 0 0 2px var(--toggle-background);
}
.toggle-input input:focus {
	outline: none;
}
/* Feedback */
:is(.vertical-form,                 .horizontal-fields) > .invalid-feedback {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	background-color: hsl(0, 50%, 50%);
	color: white;
	padding: 0.3em 0.5em;
	padding-top: 0.2em;
	font-size: 0.9em;
	display: inline-block;
	align-self: end;
	line-height: 1.2em;
}
:is(.vertical-form,                 .horizontal-fields) > :is(input,                 select,                 textarea):focus + .invalid-feedback {
	background-color: #333;
}
/* Button */
.vertical-form > button {
	margin-top: 1em;
}
.vertical-form > button.align-right {
	margin-left: auto;
}
/* Horizontal Fields */
.horizontal-fields {
	display: grid;
	grid-template-rows: [label-row] auto 0.4em [input-row] auto [feedback-row] auto 0.25em [hint-row] auto;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-column-gap: 1em;
}
.horizontal-fields > label {
	grid-row: label-row;
}
.horizontal-fields > p {
	grid-row: hint-row;
}
.horizontal-fields > input, .horizontal-fields > select, .horizontal-fields > textarea, .horizontal-fields > .radio-input, .horizontal-fields > .button-click-input, .horizontal-fields > .toggle-input {
	grid-row: input-row;
}
.horizontal-fields > input[type=checkbox] {
	justify-self: start;
	margin-bottom: 0.5em;
}
.horizontal-fields > .invalid-feedback {
	grid-row: feedback-row;
}
/* Submit bar */
.vertical-form-submit-bar {
	/* TODO: The class is already generated. */
}
/*
Basic table component with vertical columns and headers at the top.

There's also a .table-indicator class to be used on the only td in a row containing
info like "No Data" or something. It will style the message centered and pill-like.
*/
.table {
	width: 100%;
	color: #111;

	--row-alt-background: #f6f6f6;
	--row-border-color: #ddd;
}
.table thead:not(.icons-header) {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 4px 0 hsl(181, 25%, 42%);
	background-color: white;
}
.table tbody {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
	background-color: white;
}
/*
The border between the header and the body is created with a box-shadow,
which means it takes up no space. Since it's 4px wide, that makes the spacing
between the header and the first row of the body seem too small by 4px.
Fix it by adding an additional 4px of space between the header and the first body row.
*/
.table thead + tbody tr:first-child td {
	padding-top: calc(0.5em + 4px);
}
.table :is(thead:not(.icons-header) th,                 tbody td) {
	padding: 0.5rem 1rem;
}
.table:not(.has-inputs) :is(th,                 td) {
	padding-bottom: 0.6rem;
}
.table td {
	line-height: 1.3em;
}
.table tbody td ul {
	list-style: disc;
	list-style-position: inside;
}
.table th {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	font-weight: bold;
	text-align: left;
	color: #333;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.05em;
	vertical-align: bottom;
	line-height: 1.3em;
	white-space: nowrap;
}
.table:not(.has-spanning-row) tr:nth-child(2n) {
	background-color: var(--row-alt-background);
}
.table:not(.has-spanning-row) tbody tr {
	border-top: solid thin var(--row-border-color);
}
.table.has-spanning-row tbody tr:is(:nth-child(4n + 3),                 :nth-child(4n + 4)) {
	background-color: var(--row-alt-background);
}
.table.has-spanning-row tbody tr:nth-child(2n):not(:last-child) {
	border-bottom: solid 1px var(--row-border-color);
}
.table.has-spanning-row tbody tr:nth-child(2n + 1):not(.empty-note) td {
	padding-top: 0.8em;
	padding-bottom: 0.05em;
}
.table.has-spanning-row tbody tr:nth-child(2n):not(.empty-note) td {
	padding-top: 0.05em;
	padding-bottom: 0.8em;
}
.table td {
	vertical-align: middle;
}
.table td.table-min-width {
	width: 1%;
	white-space: nowrap;
}
.table td em {
	font-style: italic;
}
.table td strong {
	font-weight: 600;
}
.table :is(tbody,                 tfoot) a {
	text-decoration: underline;
	color: hsl(200, 50%, 40%);
}
.table .empty-note {
	text-align: center;
	font-weight: bold;
	color: #777;
	padding: 0.75em 0;
	font-style: italic;
	font-size: 1.2em;
	letter-spacing: 0.05em;
}
.table .no-wrap {
	white-space: nowrap;
}
.table tfoot td {
	padding: 0;
	padding-top: 0.5em;
}
/* Inputs in tables */
.table .table-button {
	border: solid 1px #bbb;
	background-color: #ddd;
	padding: 0.025em 0.4em;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.05em;
}
.table input[type=number] {
	-moz-appearance: textfield;
}
.table select, .table input:not([type=checkbox]):not([type=file]) {
	padding: 0.1em 0.35em;
}
.table .invalid-feedback {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	background-color: hsl(0, 50%, 50%);
	color: white;
	padding: 0.1em 0.5em;
	padding-bottom: 0.2em;
	font-size: 0.9em;
	display: inline-block;
}
.table :is(input,                 select,                 textarea):focus + .invalid-feedback {
	background-color: #333;
}
.table input[type=file] + .invalid-feedback {
	margin-left: 0.5em;
}
.white-table {
	width: 100%;
}
.white-table th, .white-table td {
	padding: 0.5rem 1rem;
	padding-bottom: 0.6rem;
}
.white-table tr :is(td,                 th):first-child {
	padding-left: 0;
}
.white-table tr :is(td,                 th):last-child {
	padding-right: 0;
}
.white-table .min-width {
	width: 1%;
	white-space: nowrap;
}
.white-table .align-right {
	text-align: right;
}
.white-table .align-center {
	text-align: center;
}
.white-table td {
	line-height: 1.3em;
}
.white-table th {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	font-weight: bold;
	text-align: left;
	color: #333;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.05em;
}
.white-table thead tr {
	border-bottom: solid 4px hsl(181, 25%, 42%);
}
.white-table td {
	vertical-align: middle;
}
.white-table thead tr {
	border-top: none;
}
.white-table tr {
	border-top: solid thin #ddd;
}
.white-table a {
	text-decoration: underline;
	color: hsl(200, 50%, 40%);
}
.white-table tfoot td {
	padding: 0;
	padding-top: 0.5em;
}
.white-table input[type=number] {
	-moz-appearance: textfield;
}
.white-table select, .white-table input:not([type=checkbox]) {
	background-color: white;
	border: solid 1px #aaa;
	padding: 0.1em 0.3em;
	width: 100%;
}
.white-table svg {
	width: 1.25em;
}
/*
A container with .text on it is formatted nicely for reading.

Other components can be nested inside the text, and they will be
given the appropriate vertical spacing between the paragraphs.

The textual styles will not descend into those nested components, as
all text styles are targeted with the immediate descendant selector.

This makes the text component quite reusable. It also means, however,
that some styles might not be defined as they should be. For example,
I've had to come back and define `.text > ul strong` since the original
selector was `.text > p strong` and didn't cover that case. Add additional
selectors as you need them.
*/
/* Spacing */
.text:not(.text-condensed) > * + *, .unit-quiz-question-prompt:not(.text-condensed) > * + *, tip-tap-editor .ProseMirror:not(.text-condensed) > * + * {
	margin-top: 1em;
}
.text:not(.text-condensed) > input[type=hidden]:first-child + input[type=hidden] + *, .unit-quiz-question-prompt:not(.text-condensed) > input[type=hidden]:first-child + input[type=hidden] + *, tip-tap-editor .ProseMirror:not(.text-condensed) > input[type=hidden]:first-child + input[type=hidden] + * {
	margin-top: 0;
}
.text:not(.text-condensed) > :is(.pull-left,                 .pull-right):first-child + *, .unit-quiz-question-prompt:not(.text-condensed) > :is(.pull-left,                 .pull-right):first-child + *, tip-tap-editor .ProseMirror:not(.text-condensed) > :is(.pull-left,                 .pull-right):first-child + * {
	margin-top: 0;
}
.text:not(.text-condensed) > :is(h2,                 h3,                 h4,                 h5,                 h6) + *:not(div), .unit-quiz-question-prompt:not(.text-condensed) > :is(h2,                 h3,                 h4,                 h5,                 h6) + *:not(div), tip-tap-editor .ProseMirror:not(.text-condensed) > :is(h2,                 h3,                 h4,                 h5,                 h6) + *:not(div) {
	margin-top: 0.5em;
}
.text:not(.text-condensed) > * + :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6), .unit-quiz-question-prompt:not(.text-condensed) > * + :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6), tip-tap-editor .ProseMirror:not(.text-condensed) > * + :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6) {
	margin-top: 1.75em;
}
.text:not(.text-condensed) > * + .with-previous, .unit-quiz-question-prompt:not(.text-condensed) > * + .with-previous, tip-tap-editor .ProseMirror:not(.text-condensed) > * + .with-previous {
	margin-top: 0.1rem;
}
.text:not(.text-condensed) > :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6) + :is(table,                 pre), .unit-quiz-question-prompt:not(.text-condensed) > :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6) + :is(table,                 pre), tip-tap-editor .ProseMirror:not(.text-condensed) > :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6) + :is(table,                 pre) {
	margin-top: 1em;
}
.text:not(.text-condensed) > h2 + .course-sidebar, .unit-quiz-question-prompt:not(.text-condensed) > h2 + .course-sidebar, tip-tap-editor .ProseMirror:not(.text-condensed) > h2 + .course-sidebar {
	margin-top: 1.2em;
}
.text:not(.text-condensed) > :is(table,                 form) + :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6), .unit-quiz-question-prompt:not(.text-condensed) > :is(table,                 form) + :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6), tip-tap-editor .ProseMirror:not(.text-condensed) > :is(table,                 form) + :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6) {
	margin-top: 2em;
}
.text:not(.text-condensed) > :is(div,                 table,                 form) + :is(div,                 table,                 form), .unit-quiz-question-prompt:not(.text-condensed) > :is(div,                 table,                 form) + :is(div,                 table,                 form), tip-tap-editor .ProseMirror:not(.text-condensed) > :is(div,                 table,                 form) + :is(div,                 table,                 form) {
	margin-top: 1.5em;
}
.text:not(.text-condensed) > :is(.pull-right,                 .pull-left) + :is(div,                 table,                 form), .unit-quiz-question-prompt:not(.text-condensed) > :is(.pull-right,                 .pull-left) + :is(div,                 table,                 form), tip-tap-editor .ProseMirror:not(.text-condensed) > :is(.pull-right,                 .pull-left) + :is(div,                 table,                 form) {
	margin-top: 1em;
}
/* Headings */
.text > :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6), .unit-quiz-question-prompt > :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6), tip-tap-editor .ProseMirror > :is(h1,                 h2,                 h3,                 h4,                 h5,                 h6) {
	font-family: var(--serif-font);
}
.text > h1, .unit-quiz-question-prompt > h1, tip-tap-editor .ProseMirror > h1, .course-layout-heading {
	font-size: 2em;
	border-bottom: solid 2px var(--secondary-color);
	padding-bottom: 0.2em;
	line-height: 1.15em;
}
.text > h2, .unit-quiz-question-prompt > h2, tip-tap-editor .ProseMirror > h2 {
	font-size: 1.5em;
	line-height: 1.25em;
}
.text > h3, .unit-quiz-question-prompt > h3, tip-tap-editor .ProseMirror > h3 {
	font-size: 1.25em;
	line-height: 1.25em;
}
.text > .text-subhead, .unit-quiz-question-prompt > .text-subhead, tip-tap-editor .ProseMirror > .text-subhead {
	margin-top: 0.1rem !important;
	margin-bottom: -0.75rem;
	color: #444;
	font-style: italic;
}
/* Wrapping elements */
.text > :is(ul,                  ol) :is(ul,                  ol), .text > :is(ul,                  ol), .unit-quiz-question-prompt > :is(ul,                  ol) :is(ul,                  ol), .unit-quiz-question-prompt > :is(ul,                  ol), tip-tap-editor .ProseMirror > :is(ul,                  ol) :is(ul,                  ol), tip-tap-editor .ProseMirror > :is(ul,                  ol) {
	margin-left: 1em;
}
.text:not(.text-condensed) > :is(ul,                  ol):not(.text-condensed-list) > li + li, .unit-quiz-question-prompt:not(.text-condensed) > :is(ul,                  ol):not(.text-condensed-list) > li + li, tip-tap-editor .ProseMirror:not(.text-condensed) > :is(ul,                  ol):not(.text-condensed-list) > li + li {
	margin-top: 0.5em;
}
.text > :is(ul,                  ol) ul, .text > ul, .unit-quiz-question-prompt > :is(ul,                  ol) ul, .unit-quiz-question-prompt > ul, tip-tap-editor .ProseMirror > :is(ul,                  ol) ul, tip-tap-editor .ProseMirror > ul {
	list-style: disc;
}
.text > :is(ul,                  ol) ol, .text > ol, .unit-quiz-question-prompt > :is(ul,                  ol) ol, .unit-quiz-question-prompt > ol, tip-tap-editor .ProseMirror > :is(ul,                  ol) ol, tip-tap-editor .ProseMirror > ol {
	list-style: decimal;
}
.text > blockquote, .unit-quiz-question-prompt > blockquote, tip-tap-editor .ProseMirror > blockquote {
	border-left: solid 6px #ddd;
	padding-left: 0.5em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}
.text > pre, .unit-quiz-question-prompt > pre, tip-tap-editor .ProseMirror > pre {
	max-width: 100%;
	overflow-x: auto;
	background-color: white;
	padding: 0.75em 1em;
	line-height: 1.5em;
	font-family: monospace;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
/* Inline Text */
.text > p, .text > :is(ul,                  ol) > li, .unit-quiz-question-prompt > p, .unit-quiz-question-prompt > :is(ul,                  ol) > li, tip-tap-editor .ProseMirror > p, tip-tap-editor .ProseMirror > :is(ul,                  ol) > li {
	line-height: 1.35;
}
.text > aside, .unit-quiz-question-prompt > aside, tip-tap-editor .ProseMirror > aside {
	color: #666;
	font-style: italic;
	line-height: 1.3;
}
.text > :is(ul,                  ol,                  blockquote,                  p,                  aside) strong, .unit-quiz-question-prompt > :is(ul,                  ol,                  blockquote,                  p,                  aside) strong, tip-tap-editor .ProseMirror > :is(ul,                  ol,                  blockquote,                  p,                  aside) strong {
	font-weight: bold;
}
.text > :is(ul,                  ol,                  blockquote,                  p,                  aside) em, .unit-quiz-question-prompt > :is(ul,                  ol,                  blockquote,                  p,                  aside) em, tip-tap-editor .ProseMirror > :is(ul,                  ol,                  blockquote,                  p,                  aside) em {
	font-style: italic;
}
.text > .pill, .unit-quiz-question-prompt > .pill, tip-tap-editor .ProseMirror > .pill {
	display: block;
	max-width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.text > hr, .unit-quiz-question-prompt > hr, tip-tap-editor .ProseMirror > hr {
	border: none;
	border-top: solid 2px var(--secondary-color);
}
.text > .bare-field, .unit-quiz-question-prompt > .bare-field, tip-tap-editor .ProseMirror > .bare-field {
	width: 100%;
	padding: 0.5em;
	border: solid 2px #bbb;
}
.text > figure.video, .unit-quiz-question-prompt > figure.video, tip-tap-editor .ProseMirror > figure.video {
	padding-bottom: 56%;
	position: relative;
}
.text > figure.video iframe, .unit-quiz-question-prompt > figure.video iframe, tip-tap-editor .ProseMirror > figure.video iframe {
	position: absolute;
	top: 0;
	left:  0;
	width: 100%;
	height: 100%;
}
.text > .pull-right, .unit-quiz-question-prompt > .pull-right, tip-tap-editor .ProseMirror > .pull-right {
	float: right;
}
.text > img, .unit-quiz-question-prompt > img, tip-tap-editor .ProseMirror > img {
	width: 100%;
}
.text > img.pull-left, .unit-quiz-question-prompt > img.pull-left, tip-tap-editor .ProseMirror > img.pull-left {
	float: left;
	max-width: 30%;
	margin-right: 1.5rem;
}
.text > img.pull-right, .unit-quiz-question-prompt > img.pull-right, tip-tap-editor .ProseMirror > img.pull-right {
	max-width: 30%;
	margin-left: 1.5rem;
}
.course-chapter > h1:first-child {
	text-align: center;
	margin-top: 2rem;
	margin-left: 2rem;
	margin-right: 2rem;
}
.course-chapter::after {
	content: "~ End ~";
	font-size: 1.5em;
	font-family: Algreya;
	font-style: italic;
	text-align: center;
	margin: 2rem;
	display: block;
	color: #aaa;
}
/* Units */
.units::after {
	content: "";
	clear: both;
	display: table;
}
.units > * {
	display: block;
}
.units > * + * {
	margin-top:  4em;
}
.unit-audio, .unit-pdf, .unit-essay, .unit-quiz, .unit-upload-request {
	max-width: calc(800px + 4rem);
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}
/* Essay */
.unit-essay-header, .unit-quiz-header {
	font-size: 1.5em;
	border-bottom: solid 1px var(--secondary-color);
	display:  inline-block;
	padding-bottom:  0.1em;
}
.unit-essay > * + * {
	margin-top:  1em;
}
.unit-essay > textarea {

	width:  100%;
	min-height: 12em;
	resize: vertical;
}
/* Pending Approval */
.unit-upload-request .file-upload-label {
	border: dashed 4px #bbb;
	color: #333;
	padding: 0.7em;
	padding-bottom: 0.8em;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	line-height: 1.25em;
}
.file-upload-label > * + * {
	margin-top: 0.5em;
}
.unit-upload-request .file-upload-label strong {
	font-weight: bold;
}
.file-upload-label-replace {
	text-decoration: underline;
}
.unit-upload-request input[type=file] {
	display: none;
}
/* PDF */
.unit-pdf {
	width: 100%;
	height: 80vh;
}
/* Audio */
.unit-audio audio {
	width: 100%;
}
/* Image */
.unit-image {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 949px) {
	.unit-image {
		padding-left: calc(max(2rem, (100% - 800px) / 2));
		padding-right: calc(max(2rem, (100% - 800px) / 2));
	}
}
@media (min-width: 950px) {
	.unit-image.pull-left {
		max-width: 40%;
		padding-left: calc(max(2rem, (100% - 800px) / 2));
		float: left;
		margin-right: 1em;
	}

	.unit-image.pull-right {
		float: right;
		max-width: 40%;
		padding-right: calc(max(2rem, (100% - 800px) / 2));
		margin-left: 1em;
	}
}
/* Text */
.unit-text {
	text-align: justify;
	font-size: 1.1em;
}
@media (max-width: 650px) {
	.unit-text {
		text-align: left;
	}
}
.unit-text.text > :is(h1,                  h2,                  h3,                  h4,                  h5,                  h6) {
	text-align: left;
}
.unit-text.text > :is(p,                  ul,                  ol,                  h1,                  h2,                  h3,                  h4,                  h5,                  h6) {
	padding-left: calc(max(2rem, (100% - 800px) / 2));
	padding-right: calc(max(2rem, (100% - 800px) / 2));
}
.unit-text.text > :is(p,                  ul,                  ol) strong {
	color: var(--primary-color);
}
.unit-text.text > h2 {
	margin-top: 3em;
	background-image: url("/images/triangles-1451dd8e2810f6b33ace24a2adfc86c6.svg?vsn=d");
	background-color: hsl(200, 55.5%, 83%);
	background-position-y: -1.3em;
	padding-top: 1em;
	padding-bottom: 0.25em;
}
@media (min-height: 1000px) and (min-width: 1000px) {
	.unit-text.text > h2 {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
}
.unit-text.text > h3::before {
	content: "";

	display: inline-block;
	height: 0;
	width: 0;

	vertical-align: baseline;

	border: solid 0.4em transparent;
	border-left-color: var(--primary-color);
}
/* Quiz */
.unit-quiz-question-prompt > p:first-child::before {
	content: "Question:  ";
	font-weight: bold;
}
.unit-quiz-question + .unit-quiz-question {
	border-top: solid 1px grey;
}
.unit-quiz-question {
	padding-bottom: 1em;
}
.unit-quiz-question > * + * {
	margin-top:  0.75em;
}
.unit-quiz-question-answers {
	display: grid;
	grid-template-columns:  -webkit-min-content 1fr;
	grid-template-columns:  min-content 1fr;
	grid-column-gap: 0.75em;
	grid-row-gap:  0.75em;
	align-items: start;
}
.unit-quiz-question-answers > svg {
	margin-top: 0.15em;
}
.unit-quiz-question-answers > input {
	margin-top:  0.25em;
	grid-column: 1;
}
.unit-quiz-question-answers > label > strong {
	font-weight: bold;
}
.unit-quiz-question-answers > label {
	line-height: 1.3em;
	grid-column: 2;
}
/*
Buttons
*/
.button, .smart-cart-nav > .smart-cart-nav-checkout {
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	padding: 0.3em 0.75em;
	font-size: 0.9em;
	letter-spacing: 0.06em;
	line-height: 1.3em;
	font-weight: bold;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
	background-color: #fff;
}
a.button {
	display: inline-block;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.button:hover:not([disabled]), .smart-cart-nav > .smart-cart-nav-checkout:hover:not([disabled]) {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
	transition: none;
}
.button:active:not([disabled]), .smart-cart-nav > .smart-cart-nav-checkout:active:not([disabled]) {
	box-shadow: none;
	transform: none;
}
.button-blue {
	background-color: hsl(200, 40%, 50%);
	color: white;
}
.button-green, .smart-cart-nav > .smart-cart-nav-checkout {
	background-color: hsl(150, 40%, 50%);
	background-image: linear-gradient(45deg, hsl(158.9, 67.8%, 40%), hsl(158.9, 67.8%, 48%));
	color: white;
}
.button-green:hover, .smart-cart-nav > .smart-cart-nav-checkout:hover {
	background-image: linear-gradient(45deg, hsl(158.9, 70.8%, 40%), hsl(158.9, 70.8%, 48%));
}
.button-orange {
	background-color: hsl(20, 55%, 55%);
	color: white;
}
.button-red {
	background-color: hsl(0, 60%, 40%);
	background-image: linear-gradient(45deg, hsl(0, 67.8%, 40%), hsl(0, 67.8%, 48%));
	color: white;
}
.button[disabled] {
	background-color: #bbb;
	background-image: none;
	color: black;
	box-shadow: none;
	cursor: unset;
}
.button-link {
	background-color: transparent;
	border: none;
	text-decoration: underline;
}
.button.button-inset, .smart-cart-nav > .smart-cart-nav-checkout.button-inset {
	box-shadow: none;
}
.button.button-inset:hover, .smart-cart-nav > .smart-cart-nav-checkout.button-inset:hover {
	transform: none;
	box-shadow: none;
}
/*
A list of items that can be selected.
*/
.select-list {
	background-color: white;
	padding: 1em;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
}
.select-list-search {
	display: flex;
	margin-bottom: 0.75em;
}
.select-list-empty {
	text-align: center;
	font-weight: bold;
	font-style: italic;
	font-size: 1.6em;
	color: #666;
	margin-top: 1em;
	margin-bottom: 1em;
}
.select-list-empty a {
	display: block;
	font-size: 0.5em;
	font-style: normal;
	margin-top: 1em;
}
.select-list-search button {
	background-color: transparent;
	border: none;
	font-size: inherit;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	text-decoration: underline;
	margin: 0;
	padding: 0;
}
.select-list-search > input {
	border: none;
	border-bottom: solid 3px var(--primary-color);
	width: 100%;
}
.select-list-search > * + *, .select-list-search > * + button { /* Raise specificity to override default button margins */
	margin-left: 1em;
}
.select-list-search > input[type=hidden]:first-child + * {
	margin-left: 0;
}
.select-list-search > input:focus {
	outline: none;
}
.select-list-scroll {
	overflow-y: auto;
	flex-grow: 1;
	flex-shrink: 1;
}
.select-list-text {
	margin-top: 1rem;
	padding: 0.4rem 0.15rem;
	text-align: center;
	font-style: italic;
	color: #666;
}
.select-list-option {
	display: flex;
	align-items: baseline;
	line-height: 1.2em;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	--box-size: 0.75rem;
	--padding: 0.4rem;
}
.select-list input[type=checkbox]:checked ~ * {
	background-color: var(--primary-color);
	color: white;
}
.select-list-option small {
	align-self: stretch;
	text-align: right;
	white-space: nowrap;
	padding: 0.15rem 0.5rem;
	font-style: italic;
	color: #888;
}
.select-list input[type=checkbox]:checked + label small {
	color: white;
}
.select-list-option input[type=checkbox] {
	padding: 0;
	margin: 0;
	width: var(--box-size);
	height: var(--box-size);
	z-index: 10;
	margin-left: var(--padding);
}
.select-list-option label {
	flex-grow: 1;
	cursor: pointer;
	padding: 0.15rem;
	padding-left: calc(var(--padding) * 2 + var(--box-size));
	margin-left: calc(-1 * (var(--padding) + var(--box-size)));
}
.pill {
	font-weight: bold;
	color: #666;
	background-color: #bbb;
	font-style: italic;
	letter-spacing: 0.05em;
	font-size: 1.3em;
	padding: 0.5em 0.75em;
	border-radius: 3px;
	text-align: center;
}
.pill-success {
	background-color: hsl(150, 30%, 30%);
	color: white;
}
.pill-warning {
	background-color: hsl(30, 80%, 40%);
	color:  white;
}
.pill-danger {
	background-color: hsl(0, 50%, 50%);
	color: white;
}
.tabs {
	display: flex;
	align-items: center;
	gap: 1em;
}
.tabs > a:hover, .tabs > a.active {
	background-color: var(--primary-color);
	color: white;
}
.tabs > a {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	white-space: nowrap;
	background-color: #bbb;
	padding: 0.3em 0.5em;
}
.tabs-right-slot {
	margin-left: auto;
}
.tabs-center-slot {
	margin-left: auto;
	margin-right: auto;
}
button.link-button {
	background-color: transparent;
	border: none;
	font: inherit;
	font-size: inherit;
}
/* Drop-down menu. Not a drop-down select list */
.drop-down, [data-drop-down] {
	position: relative;
}
.drop-down-container, [data-drop-down-container] {
	display: none;
}
.drop-down-container.drop-down-visible, [data-drop-down-container].drop-down-visible {
	display: block;
	position: absolute;
	display: flex;
	flex-direction: column;
	background-color: white;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
	color: black;
	z-index: 1000;
}
.drop-down-container button, [data-drop-down-container] button {
	padding: 0.4em 0.5em;
	padding-right: 0.6em;
}
.drop-down-container button:hover, [data-drop-down-container] button:hover {
	background-color: var(--secondary-color);
	color: var(--secondary-color-text);
}
.left-labeled-form {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	align-items: baseline;
}
.left-labeled-form label {
	text-align: right;
	margin-top: 0.4em;
}
.left-labeled-form label::after {
	content: ":";
}
.left-labeled-form button {
	grid-column: 1/-1;
	justify-self: start;
}
.left-labeled-form .invalid-feedback {
	grid-column: 2;
	margin-top: -1.1em;

	-webkit-user-select: none;

	   -moz-user-select: none;

	    -ms-user-select: none;

	        user-select: none;
	background-color: hsl(0, 50%, 50%);
	color: white;
	padding: 0.3em 0.5em;
	padding-top: 0.2em;
	font-size: 0.9em;
	display: inline-block;
	align-self: end;
}
.horizontal-form {
	display: grid;
	-moz-column-gap: 1em;
	     column-gap: 1em;
	grid-template-rows: auto auto auto;
	grid-auto-flow: row;

	/* You can remove this if you need to. The page I designed this form on looks slightly better this way, but it's fine with auto here too. */
	grid-auto-columns: 1fr;
}
.horizontal-form > label {
	grid-row: 1;

	font-style: italic;
	color: #666;
	font-weight: bold;
	font-size: 1.1em;
	letter-spacing: 0.04em;
	margin-bottom: 0.2em;
}
.horizontal-form > p {
	grid-row: 3;
}
.inline-form {
	display: flex;
	align-items: center;
}
.inline-form > label {
	font-weight: bold;
	margin-right: 0.5em;
}
.inline-form > label::after {
	content: ":";
}
.inline-form > * + label {
	margin-left: 1em;
}
.inline-form > button {
	margin-left: 2em;
}
.unit-video {
	padding-top: 48%;
	aspect-ratio: 1920/1080;
	position: relative;
	background-color: black;
}
.unit-video::before {
	content: "";
	position: absolute;
	top: calc(50% - 1em);
	left: calc(50% - 1em);
	width: 1em;
	height: 1em;

	border: solid 3px var(--secondary-color);
	-webkit-animation: rotation 2s infinite linear;
	        animation: rotation 2s infinite linear;

	font-weight: bold;
	font-size: 1.5em;
	font-style: italic;
	color: #888;
}
@-webkit-keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
[data-youtube-video], [data-vimeo-video] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
[data-vimeo-video] iframe {
	width: 100%;
	height: 100%;
}
.pagination-controls {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.pagination-controls :is(a,                    button):first-child {
	justify-self: start;
}
.pagination-controls span {
	grid-column: 2;
	justify-self: center;
	font-style: italic;
	color: #777;
}
.pagination-controls :is(a,                    button):last-child {
	justify-self: end;
}
/* Chapter Builder root node */
.course-builder {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"notification notification"
		"folders      course";
	grid-row-gap: 1em;
	grid-column-gap: 2em;
	align-items: start;
	margin-top: 2em;
	max-height: 75vh;
}
.course-builder > .folder-tree {
	grid-area: folders;
}
.course-builder > .notification {
	grid-area: notification;
}
.course-builder > .chapter-children {
	grid-area: course;
	margin-left: 0;
	padding-bottom: 20vh;
}
/* Containers for folders and chapters */
.course-builder [data-droppable] {
	padding: 3px 0;
	background-color: hsla(0, 0%, 0%, 0.1);
}
[data-droppable].drag-hover {
	background-color: var(--secondary-color);
}
/* The course tree view */
.chapter-children {
	margin-left: 1.5em;

	display: flex;
	flex-direction: column;
	gap: 0.3em;

	min-height: 0;
	height: 100%;
	overflow-y: auto;
}
.chapter-entry {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}
/* Folder Tree */
.folder-tree {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-height: 0;
	height: 100%;
}
/* Search Input Field */
.folder-tree-search {
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom: solid 2px #aaa;
}
.folder-tree .collection {
	overflow-y: scroll;
	padding-bottom: 20vh;
}
.collection {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.collection-entry {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "icon text actions";
	grid-column-gap: 0.5em;
	align-items: center;
	cursor: pointer;

	padding: 0.5em;

	background-color: white;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.collection-entry-hoverable:hover, .collection-entry-selected {
	background-color: hsl(200, 60%, 90%);
	outline: solid 2px hsl(200, 80%, 50%);
	outline-offset: -1px;
}
.collection-icon {
	grid-area: icon;
	height: 1em;
}
.collection-text {
	grid-area: text;
	line-height: 1.25em;
	text-overflow: ellipsis;
	overflow: hidden;
}
.collection-actions {
	grid-area: actions;
	display: flex;
	gap: 0.5em;
}
.collection-actions svg {
	height: 1.2em;
}
.collection-description {
	border: dashed 2px #aaa;
	padding: 0.5em;
	font-weight: bold;
	font-style: italic;
	font-size: 1.1em;
	color: #555;
}
.bread-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	align-items: center;
}
.bread-crumbs > * {
	text-decoration: underline;
	cursor: pointer;
}
.chapter-builder {
	display: grid;
	grid-template-columns: 3fr 2em minmax(400px, 1fr);
	grid-template-rows: auto 1em 1fr;
	grid-template-areas:
		"header  header header"
		".       .      ."
		"mainbar .      sidebar";

	max-width: 1500px;
	padding: 1em;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 1200px) {
	.chapter-builder {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}
}
.chapter-builder-mainbar { grid-area: mainbar; }
.chapter-builder-sidebar { grid-area: sidebar; }
.chapter-builder-header { grid-area: header; }
.chapter-builder-header {
	display: flex;
	justify-content: end;
}
.chapter-builder-units {
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.chapter-builder-unit {
	background-color: white;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.chapter-builder-unit-header {
	background-color: var(--secondary-color);
	color: white;

	display: flex;
	justify-content: space-between;
	padding: 0.5em;
}
.chapter-builder-unit-header-actions {
	display: flex;
	gap: 0.75em;
}
.chapter-builder-unit-header-actions button {
	background-color: transparent;
	border: none;
	text-decoration: underline;
	color: inherit;
}
.chapter-builder-first-actions [data-drop-down-container] button, .chapter-builder-unit-header-actions [data-drop-down-container] button {
	text-decoration: none;
	text-align: left;
}
.chapter-builder-first-actions {
	display: flex;
	flex-direction: row-reverse;
}
.chapter-builder-first-actions button {
	background-color: transparent;
	text-decoration: underline;
	border: none;
}
.chapter-builder-unit-body {
	padding: 1.25em;
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.chapter-builder-unit-body-text {
	padding: 0;
}
.chapter-builder-unit-body-text .ProseMirror {
	border: none;
}
.chapter-builder-unit-body-text .menu {
	border-left: none;
	border-right: none;
	border-top: none;
}
.chapter-builder-unit-body > label {
	text-align: right;
	padding-top: 0.45em;
}
.chapter-builder-quiz-unit-body > label {
	padding-top: 0.3em;
}
.chapter-builder-unit-body > label::after {
	content: ":";
}
.chapter-builder-unit-body > img {
	max-width: 100%;
}
.chapter-builder-unit-body > audio {
	align-self: start;
}
.chapter-builder-unit-body > iframe {
	width: 100%;
	min-height: 30vh;
	align-self: end;
}
.chapter-builder-unit-body select, .chapter-builder-unit-body input, .chapter-builder-unit-body textarea {
	padding: 0.25em;
	background-color: white;
	border: solid 1px #aaa;
}
.chapter-builder-unit-body-text {
	display: block;
}
.chapter-builder-unit-body-text textarea {
	width: 100%;
	min-height: 15em;
	resize: vertical;
}
.chapter-builder-quiz-question {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.chapter-builder-quiz-question textarea {
	width: 100%;
	line-height: 1.2em;
}
.chapter-builder {
	padding-bottom: 5em !important;
}
.submit-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.25em;
	padding-top: 0.3em;

	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0.5em;

	background-color: hsl(20, 80%, 60%);
	box-shadow:
		0 -1px 3px 0 rgba(0, 0, 0, 0.1),
		0 -1px 2px 0 rgba(0, 0, 0, 0.06);

	z-index: 100;
}
.submit-bar .submit-bar-error {
	grid-column: 2;

	display: flex;
	align-items: center;

	font-weight: bold;
}
.submit-bar button {
	grid-column: 3;
	justify-self: end;

	background-color: transparent;
	border: solid 1px currentColor;
	padding: 0.25em 0.5em;
}
.submit-bar input[type=file] {
	border: none;
}
.modal-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.75);
	margin: 0;
}
.modal {
	background-color: var(--background-color);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 95vh;
	min-width: min(35vw, 25em);

	display: flex;
	flex-direction: column;
}
.modal.modal-fixed {
	width: 70vw;
	height: 70vh;
}
.modal-header {
	padding: 0.75em;
	font-weight: bold;
	border-bottom: solid 1px #aaa;
}
.modal-body {
	flex-grow: 1;
	padding: 1em;
	overflow-y: auto;
}
.modal-footer {
	padding: 0.75em;
	border-top: solid 1px #aaa;

	display: flex;
	justify-content: space-between;
}
.modal-footer > *:only-child {
	margin-left: auto;
}
tip-tap-editor .ProseMirror {
	padding: 1em;
	border: solid 1px #bbb;
	border-top: none;
}
tip-tap-editor .ProseMirror:focus-visible {
	outline: none;
}
tip-tap-editor > .menu {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	background-color: #eee;
	border: solid 1px #bbb;
	padding-left: 0.6em;
}
tip-tap-editor > .menu button {
	width: 1.75em;
	height: 1.75em;
	padding: 0.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
}
tip-tap-editor > .menu .separator {
	border-right: solid 1px #bbb;
	margin-left: 0.25em;
	margin-right: 0.25em;
}
tip-tap-editor > .menu button:hover {
	background-color: #bbb;
}
.search-container {
	display: flex;
	align-items: center;
	margin: 1em 0;
}
.search-container > * + * {
	margin-left: 1em;
}
.search-container a {
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	white-space: nowrap;
}
.search-container :is(span,                    label) {
	white-space: nowrap;
}
.search-container button {
	align-self: stretch;
}
.search-container select, .search-container input {
	flex-grow: 1;
}
/* Open Chat Button */
.chat-toggle {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	cursor: pointer;

	display: flex;
	align-items: center;
	gap: 0.5em;
}
.chat-toggle-text {
	text-decoration: underline;
}
.chat-toggle-unread-message-count {
	background-color: hsl(0, 50%, 50%);
	color: white;
	padding: 0.2em 0.3em;
	border-radius: 6px;
}
/* Floating Chat Window */
.chat-window-wrapper {
	content: "";

	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: rgba(0, 0, 0, 0.75);
}
.chat-window {
	--horizontal-padding: 1em;

	width: 80vw;
	max-width: 800px;
	height: 80vh;

	background-color: var(--background-color);

	display: flex;
	flex-direction: column;
	gap: 0.75em;
}
.chat-window-header {
	background-color: var(--primary-color);
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5em;
}
/* The "x" button */
.chat-window-header svg {
	height: 1.25em;
	cursor: pointer;
}
.chat-window-body {
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: 1em;
	height: 100%;
}
/* Chat Reply Container */
.chat-window .chat-window-reply {
	padding: 0 var(--horizontal-padding);
}
.chat-window-reply {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.chat-window-reply textarea {
	resize: vertical;
}
.chat-window-reply textarea:focus {
	outline: none;
}
.chat-window-reply button {
	align-self: end;
}
/* Message Thread */
.chat-window .chat-window-messages {
	padding: 0 var(--horizontal-padding);
	scrollbar-gutter: both-edges;
	padding-bottom: 1em;
}
.chat-window-messages {
	overflow-y: auto;

	display: flex;
	flex-direction: column;
	gap: 1em;
}
.chat-window-empty-notice {
	font-weight: bold;
	text-align: center;
	font-style: italic;
	color: #555;
	font-size: 1.2em;
	margin-top: 0.5em;
}
.chat-window-notice {
	font-style: italic;
	font-size: 0.9em;
	color: #666;
	text-align: center;
	line-height: 1.25em;
}
/* Message Bubbles */
.chat-window-message {
	padding: 0.5em;
	display: grid;
	grid-template-columns: 1fr 1em auto;
	grid-template-rows: auto 1fr;
	grid-row-gap: 0.5em;
	grid-template-areas:
		"author  .       date"
		"content content content";

	background-color: #d8d8d8;
	position: relative;
	width: 90%;
}
.chat-window-message-author { grid-area: author; }
.chat-window-message-date { grid-area: date; }
.chat-window-message-content { grid-area: content; }
.chat-window-message-sent {
	background-color: hsl(224, 80%, 64%);
	color: white;
	align-self: end;
	margin-left: 2em;
}
.chat-window-message:not(.chat-window-message-sent) {
	align-self: start;
}
.chat-window-message-author {
	font-weight: bold;
	font-size: 0.75em;
	letter-spacing: 0.04em;
	line-height: 1.3em;
}
.chat-window-message-date {
	line-height: 1.3em;
	font-size: 0.75em;
}
.chat-window-message-content {
	line-height: 1.2em;
}
.tiled-list {
	display: flex;
	flex-direction: column;
}
.tiled-list > * {
	--border-color: #bbb;
	border: solid 1px var(--border-color);
	border-left-width: 2px;
	border-right-width: 2px;
	border-bottom: none;
}
.tiled-list > *:first-child {
	border-top-width: 2px;
}
.tiled-list > *:last-child {
	border-bottom: solid 2px var(--border-color);
}
.tiled-list.tiled-list-add > :has(input:checked) {
	--border-color: hsl(200, 40%, 62%);
}
.tiled-list.tiled-list-add > :has(input:checked) + * {
	border-top-color: hsl(200, 40%, 62%);
}
.tiled-list.tiled-list-add > *:has(input:checked) {
	background-color: hsl(200, 50%, 85%);
}
.tiled-list.tiled-list-add > *:has(input:checked) > span {
	color: hsl(200, 20%, 50%);
}
.tiled-list.tiled-list-remove > *:not(:has(input:checked)) {
	background-color: hsl(0, 50%, 89%);
}
.tiled-list.tiled-list-remove > *:not(:has(input:checked)) > span {
	color: hsl(0, 38%, 62%);
}
.tiled-list.tiled-list-remove > :not(:has(input:checked)) {
	--border-color: hsl(0, 40%, 70%);
}
.tiled-list.tiled-list-remove > :not(:has(input:checked)) + * {
	border-top-color: hsl(0, 40%, 70%);
}
.tiled-list > * {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;

	display: flex;
	align-items: center;
	gap: 0.5em;

	background-color: white;
	line-height: 1.1em;
	padding: 0 0.5em;
}
.tiled-list > * label {
	cursor: pointer;
	padding: 0.4em 0;
	flex-grow: 1;
}
.tiled-list > * > span {
	font-style: italic;
	color: #888;
	white-space: nowrap;
}
.tiled-list:is(:empty,                    :-moz-only-whitespace) {
	padding: 0.75em;
	background-color: #dfdfdf;
	border: dashed 2px #bbb;
}
.tiled-list:is(:empty,                    :-moz-only-whitespace)::before {
	content: "Nothing Here";
	text-align: center;
	font-weight: bold;
	color: #777;
	font-style: italic;
	font-size: 1.2em;
	letter-spacing: 0.05em;
}
.structure-empty {
	padding: 0.75em;
	background-color: #dfdfdf;
	border: dashed 2px #bbb;
	text-align: center;
	font-weight: bold;
	color: #777;
	font-style: italic;
	font-size: 1.2em;
	letter-spacing: 0.05em;
}
.structure-entry {
	background-color: white;
	padding: 1em;
	border: solid 2px #bbb;
}
.structure-table {
	background-color: white;
	width: 100%;
}
.structure-table tr.is-invalid td {
	background-color: hsl(0, 50%, 89%);
	border-color: hsl(0, 30%, 60%);
}
.structure-table th {
	background-color: #f2f2f2;
	white-space: nowrap;
}
.structure-table :is(th,                    td) {
	border: solid 1px #bbb;
	text-align: left;
	padding: 0.5em 0.75em;
}
.structure-table td {
	vertical-align: middle;
}
.structure-table td.no-wrap {
	white-space: nowrap;
}
.structure-table td.min-width {
	white-space: nowrap;
	width: 0;
}
.structure-table :is(th,                    td):is(:first-child,                    :last-child) {
	width: 1px;
	white-space: nowrap;
}
.multiselect {
	--padding: 0.5em;
	display: flex;
	flex-direction: column;

	background-color: white;
	border: solid 2px #aaa;
}
.multiselect-header {
	padding: 0.5em 0.75em;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(var(--padding) * 2);
}
.multiselect-search {
	display: flex;
	align-items: center;
	gap: var(--padding);
	width: 100%;
}
.multiselect-search input {
	flex-grow: 1;
}
.multiselect-pagination {
	display: flex;
	gap: var(--padding);
}
.multiselect-rows {
	padding-bottom: calc(var(--padding) / 2);
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.multiselect-rows-header {
	padding-left: calc(var(--padding) + 0.15em);
	padding-top: var(--padding);
	padding-bottom: 0.1em;
	font-weight: bold;
}
.multiselect-row {
	padding: 0 0.75em;
	display: flex;
	gap: 0.5em;
	align-items: baseline;
	justify-content: start;
	line-height: 1.1;
}
.multiselect-row:has(:checked) {
	background-color: hsl(200, 50%, 80%);
}
.multiselect-row:has(:disabled) {
	background-color: #e8e8e8;
	color: #888;
}
.multiselect-row:hover:not(:has(:disabled)) {
	background-color: hsl(200, 50%, 70%);
}
.multiselect-row input {
	width: auto;
}
.multiselect-row label {
	width: 100%;
	transform: translateY(-0.03em);
	padding: 0.075em 0;
}
.assigner {
	height: 100%;
	display: grid;
	gap: 1em;
	grid-template-rows: auto 1fr;
	padding: 1em;
}
.assigner-progress button, .assigner-staff-factions > button, .assigner-staff-buttons button, .assigner-staff-results-search button, .assigner-button {
	background-color: white;
	border: solid 1px #bbb;
	padding: 0.25em 0.5em;
	white-space: nowrap;
}
.assigner-progress button:hover, .assigner-staff-factions > button:hover, .assigner-staff-buttons button:hover, .assigner-staff-results-search button:hover, .assigner-button:hover {
	background-color: #f2f2f2;
}
.assigner-progress button:active, .assigner-staff-factions > button:active, .assigner-staff-buttons button:active, .assigner-staff-results-search button:active, .assigner-button:active {
	background-color: #e5e5e5;
}
.assigner-progress button:not(:disabled), .assigner-staff-factions > button:not(:disabled), .assigner-staff-buttons button:not(:disabled), .assigner-staff-results-search button:not(:disabled), .assigner-button:not(:disabled) {
	cursor: pointer;
}
.assigner-progress button:disabled, .assigner-staff-factions > button:disabled, .assigner-staff-buttons button:disabled, .assigner-staff-results-search button:disabled, .assigner-button:disabled {
	background-color: #e2e2e2;
	color: #777;
}
.assigner-progress button.assigner-danger, .assigner-staff-factions > button.assigner-danger, .assigner-staff-buttons button.assigner-danger, .assigner-staff-results-search button.assigner-danger, .assigner-button.assigner-danger {
	background-color: hsl(0, 70%, 60%);
	border-color: hsl(0, 50%, 50%);
	color: white;
}
.assigner-progress button.assigner-danger:hover, .assigner-staff-factions > button.assigner-danger:hover, .assigner-staff-buttons button.assigner-danger:hover, .assigner-staff-results-search button.assigner-danger:hover, .assigner-button.assigner-danger:hover {
	background-color: hsl(0, 60%, 50%);
}
.assigner-progress button.assigner-danger:active, .assigner-staff-factions > button.assigner-danger:active, .assigner-staff-buttons button.assigner-danger:active, .assigner-staff-results-search button.assigner-danger:active, .assigner-button.assigner-danger:active {
	background-color: hsl(0, 60%, 40%);
}
/*
Progress
*/
.assigner-progress {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;

	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: stretch;
	align-items: end;
}
.assigner-progress > div {
	cursor: pointer;

	flex-basis: 0;
	flex-grow: 1;
	white-space: nowrap;

	padding-bottom: 0.3em;
	font-weight: bold;
	border-bottom: solid 4px #bbb;

	display: flex;
	align-items: end;

	position: relative;
}
.assigner-progress > div:hover {
	border-color: hsl(200, 50%, 40%);
}
.assigner-progress > div.assigner-progress-active {
	border-color: hsl(200, 50%, 50%);
}
.assigner-progress-badge {
	font-size: 0.9em;
	margin-left: 0.5em;
	color: hsl(100, 40%, 40%);
}
/*
Staff Page
*/
.assigner-staff {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;

	overflow: auto;

	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto auto 0 1fr;

	gap: 0.5em;

	grid-template-areas:
		"search   search"
		"status   results"
		"buttons  results"
		".        results"
		"factions results"
}
.assigner-staff-factions { grid-area: factions; }
.assigner-staff-search { grid-area: search; }
.assigner-staff-buttons { grid-area: buttons; align-self: start; }
.assigner-staff-results { grid-area: results; }
.assigner-staff-status { grid-area: status; }
.assigner-staff-factions {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}
.assigner-staff-factions > div {
	display: flex;
	gap: 0.25em;
}
.assigner-staff-factions > button {
	margin-top: 0.5em;
}
.radio-buttons {
	display: flex;
	border: solid 1px #bbb;
	gap: 0 !important; /* I know. I'm a terrible person. */
	margin-top: 0.5em;
}
.radio-buttons.radio-buttons-disabled > * {
	background-color: #e2e2e2;
	color: #777;
}
.radio-buttons > * + * {
	border-left: solid 1px #bbb;
}
.radio-buttons > * {
	white-space: nowrap;
	background-color: white;
	width: 100%;
	padding: 0.25em 0.5em;

	display: flex;
	gap: 0.5em;
}
.assigner-staff-status {
	white-space: nowrap;
	text-align: center;
}
.assigner-staff-status strong {
	font-weight: bold;
}
.assigner-staff-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.assigner-staff-results {
	overflow: auto;

	display: flex;
	flex-direction: column;

	border: solid 2px #bbb;
	background-color: white;
}
.assigner-staff-results-search {
	margin: 0.5em;
	margin-bottom: 0;
	display: flex;
	gap: 0.5em;
}
.assigner-staff-results-search input {
	flex-grow: 1;
}
.assigner-staff-empty {
	text-align: center;
	margin: 0.5rem;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.assigner-staff-empty strong {
	font-weight: bold;
}
.assigner-staff-pills {
	overflow: auto;

	padding: 0.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
}
.assigner-staff-pills > * {
	flex-grow: 1;

	display: flex;
	justify-content: center;
	gap: 0.5em;

	border: solid 1px #999;

	padding: 0.1em 0.2em;
}
.assigner-staff-pills::after {
	content: "";
	flex: auto;
}
.assigner-staff-pills > *:has(input):hover {
	background-color: hsl(200, 50%, 90%);
}
.assigner-staff-pills > *:has(:checked) {
	background-color: hsl(200, 50%, 85%);
}
.assigner-staff-results-footer {
	margin-top: auto;

	background-color: #eee;
	padding: 0.25em;
	text-align: center;
	color: #666;
	font-style: italic;
	border-top: solid 1px #bbb;
}
.assigner-staff-results-footer strong {
	font-weight: bold;
}
/*
Course Page
*/
/*
Review Page
*/
.assigner-review .notification {
	display: inline-block;
}
.assigner-review .notification {
	text-align: left;
}
.assigner-pills-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.assigner-pill-error {
	--bg-color: hsl(0, 50%, 50%);
	--color: white;
	--border-color: hsl(0, 60%, 30%);
	--button-hover-color: hsl(0, 50%, 35%);
}
.assigner-pill-info {
	--bg-color: hsl(200, 40%, 50%);
	--color: white;
	--border-color: hsl(200, 80%, 30%);
	--button-hover-color: hsl(200, 50%, 35%);
}
.assigner-pill-success {
	--bg-color: hsl(150, 40%, 48%);
	--color: white;
	--border-color: hsl(150, 80%, 25%);
	--button-hover-color: hsl(150, 50%, 35%);
}
.assigner-pill-warn {
	--bg-color: hsl(40, 90%, 75%);
	--color: black;
	--border-color: hsl(40, 50%, 50%);
	--button-hover-color: hsl(40, 65%, 65%);
}
.assigner-pill {
	font-size: 0.9em;

	display: flex;
	border: solid 1px var(--border-color);
	background-color: var(--bg-color);
	color: var(--color);
	line-height: 1.3;
}
.assigner-pill > *:first-child {
	padding: 0.25em 0.5em;
}
.assigner-pill > *:last-child {
	display: flex;
	align-items: center;
	cursor: pointer;
	border-left: solid 1px var(--border-color);
	padding: 0.25em 0.5em;
}
.assigner-pill > *:last-child:hover {
	background-color: var(--button-hover-color);
}
.assigner-pill strong {
	font-weight: bold;
}
/*
Wrapper
Set of columns, horizontally.
Exact layout (number of columns, width of each column) is computed by the Elm app.
*/
.smart-cart {
	height: 100%;
	display: grid;
	position: relative;
	grid-auto-flow: column;
}
.smart-cart-col-1 {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
}
.smart-cart-col-2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
}
.smart-cart-col-3 {
	grid-template-columns: fit-content(25%) 1fr 1fr;
	grid-template-rows: auto 1fr;
}
.smart-cart-col-4 {
	grid-template-columns: fit-content(25%) 1fr 1fr 1fr;
	grid-template-rows: auto 1fr;
}
.smart-cart > *:not(.smart-cart-nav) {
	overflow-y: auto;
}
.smart-cart > *:nth-child(2n + 1):not(:nth-child(1)) {
	border-left: solid 1px #999;
}
.smart-cart > *:nth-child(2n):not(:nth-child(2)) {
	border-left: solid 1px #999;
}
.smart-cart-nav, .smart-cart-header {
	background-color: white;
	display: flex;
	gap: 0.5em;
	overflow-x: auto;
	align-items: end;
	padding: 0.25em 0.75em;
	padding-bottom: 0;
	border-bottom: solid 1px #999;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.smart-cart-header {
	padding: 0.45em 0.4em;
	gap: 0.5em;
	align-items: center;
}
.smart-cart-header-title {
	margin-bottom: 0.1rem;
	font-weight: bold;
}
.smart-cart-header-info {
	font-weight: bold;
	font-size: 0.9em;
}
.smart-cart-header-pill {
	border: solid 1px hsl(0, 50%, 30%);
	background-color: hsl(0, 50%, 50%);
	color: white;
	display: flex;
	align-items: stretch;
	font-size: 0.9em;
	margin-left: auto;
}
.smart-cart-header-pill-empty {
	visibility: hidden;
}
.smart-cart-header-pill > * {
	display: flex;
	align-items: center;
	justify-content: center;
}
.smart-cart-header-pill > *:first-child {
	border-right: solid 1px hsl(0, 50%, 30%);
	padding: 0.15rem 0.25rem;
	font-size: 0.8em;
}
.smart-cart-header-pill > *:first-child:hover {
	background-color: hsl(0, 50%, 40%);
}
.smart-cart-header-pill > *:last-child {
	padding: 0.15rem 0.25rem;
}
.smart-cart-nav > * {
	cursor: pointer;
	padding: 0.25em 0.5em;
	border: solid 1px transparent;
	border-top: solid 2px transparent;
	text-align: center;
}
.smart-cart-nav > .smart-cart-nav-checkout {
	line-height: 1.1;
	margin-left: auto;
	margin-right: -0.6em;
	margin-bottom: 0.4em;
	font-size: 0.85em;
}
.smart-cart-nav > .smart-cart-nav-checkout.smart-cart-nav-checkout-floating {
	position: fixed;
	bottom: 0;
	right: 0;
	margin-right: 0.4em;
}
.smart-cart-nav > .smart-cart-nav-active {
	background-color: var(--background-color);
	border-top-color: hsl(200, 50%, 50%);
	border-left-color: #999;
	border-right-color: #999;
	position: relative;
}
/*
Column
*/
.smart-cart-column-header {
	background-color: white;
	border-bottom: solid 1px #999;
	padding: 0.3em 0.75em 0.5em 0.5em;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}
.smart-cart-column-header h2 {
	font-weight: bold;
}
.smart-cart-column-header h2 span {
	color: green;
	white-space: nowrap;
	font-size: 0.85em;
}
.smart-cart-column-header h2 span::before { content: "("; }
.smart-cart-column-header h2 span::after { content: ")"; }
.smart-cart-column-header-buttons {
	display: flex;
}
.smart-cart-column-header-buttons button:not(.smart-cart-pill) {
	background-color: transparent;
	border: none;
	padding: 0.15rem 0.3rem;
	padding-bottom: 0.2rem;
	text-decoration: underline;
	white-space: nowrap;
}
.smart-cart-column-header-buttons button.smart-cart-pill {
	border: none;
	text-decoration: none;
	background-color: hsl(0, 50%, 50%);
	color: white;
	font-size: 0.85em;

	display: flex;
	margin-right: 0.3rem;
}
.smart-cart-column-header-buttons button.smart-cart-pill > span {
	padding: 0.15rem 0.3rem;
	padding-bottom: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.smart-cart-column-header-buttons button.smart-cart-pill > span:first-child {
	border-right: solid 1px hsl(0, 50%, 20%);
	font-size: 0.8em;
}
.smart-cart-column-header-buttons button.smart-cart-pill > span:first-child:hover {
	background-color: hsl(0, 50%, 40%);
}
/*
Course
*/
.smart-cart-store-page {
	padding: 1em;
	container-type: size;
}
.smart-cart-store-page-empty p {
	padding: 1rem;
	text-align: center;
	font-style: italic;
	color: #666;
	/*font-weight: bold;*/
}
.smart-cart-store-page-empty a {
	text-decoration: underline;
	cursor: pointer;
}
.smart-cart-store-page > h2 {
	font-family: var(--serif-font);
	font-size: 1.75em;
	font-size: max(min(4cqw, 1.75em), 1.2em);
	margin-bottom: 0.75rem;
	line-height: 1.2;
}
.smart-cart-col-1 .smart-cart-store-page > h2 {
	text-align: center;
}
.smart-cart-store-page > .text {
	margin-top: 2rem;
}
.smart-cart-store-page-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}
@container (min-width: 750px) {
	.smart-cart-store-page-items {
		float: right;
		margin-left: 1.5em;

		display: flex;
		flex-direction: column;
		gap: 1em;
	}
}
.smart-cart-add-to-cart {
	background-color: white;
	padding: 0.75em;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
	border: solid 1px #c6c6c6;

	display: grid;
	grid-column-gap: 0.5em;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 0.5em auto minmax(0.5em, 1fr) auto 0.5em auto 0.5em auto auto;
	grid-template-areas:
		"title title"
		". ."
		"description description"
		". ."
		"price-text price"
		". ."
		"qty-text qty"
		". ."
		"add add"
		"in-cart in-cart";
}
.smart-cart-add-to-cart-title {
	grid-area: title;
	font-weight: bold;
	font-size: 1.1em;
}
.smart-cart-add-to-cart-description {
	grid-area: description;
	line-height: 1.2;
}
.smart-cart-add-to-cart-price-text {
	grid-area: price-text;
	font-weight: bold;
	text-align: right;
}
.smart-cart-add-to-cart-price-value {
	grid-area: price;
}
.smart-cart-add-to-cart-qty {
	grid-area: qty-text;
	align-self: center;

	font-weight: bold;
	text-align: right;
}
.smart-cart-add-to-cart-qty-input {
	grid-area: qty;
	text-align: center;
	width: 100%;
}
.smart-cart-add-to-cart-button {
	grid-area: add;
	justify-self: stretch;
}
.smart-cart-add-to-cart-info {
	grid-area: in-cart;
	margin-top: 0.5em;
	text-align: center;
	font-weight: bold;
	color: #666;
	font-style: italic;
}
.smart-cart-add-to-cart-info span {
	cursor: pointer;
	text-decoration: underline;
}
.smart-cart-add-to-cart-info span + span {
	margin-left: 0.75em;
}
.smart-cart-store-page .tile ul {
	list-style: disc;
	list-style-position: inside;
}
/*
Categories
*/
.smart-cart-categories {
	-webkit-user-select:  none;
	   -moz-user-select:  none;
	    -ms-user-select:  none;
	        user-select:  none;
	padding: 0.5em;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}
.smart-cart-categories h3 {
	font-size: 1.3em;
	margin-top: 1rem;
}
.smart-cart-category-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 1rem;
}
.smart-cart-category-groups strong {
	font-weight: bold;
}
.smart-cart-category-groups > * {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.smart-cart-category-groups > * > * {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.smart-cart-category-groups-entry {
	display: flex;
	gap: 0.2rem;
}
.smart-cart-state-grid {
	display: grid;
	grid-row-gap: 0.2em;
	grid-template-columns: repeat(auto-fill, 1.25em 9em);
}
.smart-cart-state-grid > * {
	display: contents;
}
.smart-cart-state-grid input {
	justify-self: start;
	align-self: center;
}
/*
Course List
*/
/* Toggle */
.smart-cart-list-toggle-descriptions {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.smart-cart-list .smart-cart-list-toggle-descriptions {
	background-color: white;
	margin: 0.25rem 0.5rem;
	padding: 0.25rem 0.5rem;
	border: solid 1px #bbb;
}
/* Empty Case */
.smart-cart-list-empty {
	padding: 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.smart-cart-list-empty p:first-child {
	font-size: 1.75em;
	font-style: italic;
	color: #666;
	font-weight: bold;
}
/* Summaries Collapsed Case */
.smart-cart-list {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.smart-cart-list .smart-cart-list-row {
	line-height: 1.15;
	padding: 0.1rem 0;
	padding-left: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	scroll-margin: 1em 0;
	cursor: pointer;
}
@media (min-height: 900px) {
	.smart-cart-list .smart-cart-list-row {
		line-height: 1.2;
		padding-top: 0.15rem;
		padding-bottom: 0.15rem;
	}
}
.smart-cart-list-row:nth-child(2n) {
	background-color: #d6d6d6;
}
.smart-cart-list-row:hover {
	background-color: hsl(200, 50%, 80%);
}
.smart-cart-list-row.smart-cart-list-row-focused {
	background-color: hsl(200, 50%, 55%);
	color: white;
}
.smart-cart-list-count {
	font-size: 0.9em;
	background-color: hsl(100, 90%, 30%);
	color: white;
	align-self: stretch;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.25em;
	padding-left: 0.5em;
	border-radius: 1000px 0 0 1000px;
}
.smart-cart-list-row-focused .smart-cart-list-count {
	background-color: hsl(100, 100%, 22%);
}
/* Summaries Expanded Case */
.smart-cart-list-row-description {
	cursor: pointer;
	display: grid;
	grid-template-columns: 0.5rem 1fr 1rem auto 0.5rem;
	grid-template-rows: 0.25rem auto 0.25rem 1fr 0.5rem;
	grid-template-areas:
		". .     . . ."
		". title . count count"
		". . . . ."
		". description description description ."
		". . . . .";
}
.smart-cart-list-row-description .smart-cart-list-title { grid-area: title; }
.smart-cart-list-row-description .smart-cart-list-count { grid-area: count; align-self: start; }
.smart-cart-list-row-description .smart-cart-list-description { grid-area: description; }
.smart-cart-list-row-description:nth-child(2n) {
	background-color: #d6d6d6;
}
.smart-cart-list-row-description:hover {
	background-color: hsl(200, 50%, 80%);
}
.smart-cart-list-row-description.smart-cart-list-row-focused {
	background-color: hsl(200, 50%, 55%);
	color: white;
}
.smart-cart-list-row-description .smart-cart-list-count {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
.smart-cart-list-row-description .smart-cart-list-description.text p {
	line-height: 1.2;
}
.smart-cart-list-row-description .smart-cart-list-title {
	font-weight: bold;
}
/*
Basket (aka Cart)
*/
.smart-cart-basket-floating {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: var(--background-color);
	box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.4);
	border-right: solid 1px #999;
}
.smart-cart-basket-empty {
	text-align: center;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.smart-cart-basket-empty > p:first-child {
	font-size: 1.75em;
	font-style: italic;
	color: #666;
	font-weight: bold;
}
.smart-cart-basket-empty button {
	background-color: transparent;
	border: none;
	text-decoration: underline;
	padding: 0;
	margin: 0;
	color: black;
}
/* This is the grid containing each line item in the cart */
.smart-cart-basket-grid {
	margin: 1em;
	margin-bottom: 0;
	padding-bottom: 0.5em;
	border-bottom: solid 3px #aaa;

	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	-moz-column-gap: 0.5em;
	     column-gap: 0.5em;
	row-gap: 0.5em;
	line-height: 1.2;
}
.smart-cart-basket-grid-total {
	grid-column: 1/5;
	justify-self: end;
	text-align: right;
	font-weight: bold;
	border-top: solid 1px #aaa;
	width: 33%;
	min-width: -webkit-max-content;
	min-width: -moz-max-content;
	min-width: max-content;
	/*padding-left: 4rem;*/
	padding-top: 0.4rem;
}
.smart-cart-basket-grid-total::before {
	content: "Total:";
	padding-right: 0.5rem;
	font-weight: normal;
	font-style: italic;
}
.smart-cart-basket-categories-qty {
	font-weight: bold;
	font-style: italic;
	color: #666;
}
/* Line Items */
.smart-cart-basket-course-title {
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.15em 0.25em;

	justify-self: start;
	max-width: 100%;

	scroll-margin: 2em;
	scroll-margin-top: 2em;
}
.smart-cart-basket-course-recent-add {
	-webkit-animation: fade-out 2.5s forwards;
	        animation: fade-out 2.5s forwards;
}
@-webkit-keyframes fade-out {
	0% { background-color: transparent; }
	20% { background-color: hsl(200, 50%, 65%); }
	100% { background-color: transparent; }
}
@keyframes fade-out {
	0% { background-color: transparent; }
	20% { background-color: hsl(200, 50%, 65%); }
	100% { background-color: transparent; }
}
.smart-cart-basket-course-price {
	justify-self: end;
	font-weight: bold;
}
.smart-cart-basket-grid input {
	width: 2em;
	text-align: center;
	padding: 0;
	margin: 0;
	font-size: 0.9em;
}
.smart-cart-basket-grid svg {
	width: 0.75em;
	color: #444;
}
/* Categories covered by courses in cart */
.smart-cart-basket-categories {
	padding: 1em;
}
.smart-cart-basket-categories .tile ul {
	list-style: disc;
	list-style-position: inside;
}
.smart-cart-category-list {
	padding: 0.5em;
}
.smart-cart-category-list h4 {
	font-weight: bold;
}
.smart-cart-category-list * + h4 {
	margin-top: 1em;
}
.smart-cart-category-list ul {
	margin-top: 0.25em;
	list-style: disc;
	list-style-position: inside;

	display: flex;
	flex-direction: column;
	gap: 0.2em;
}
.assignment-view {
	max-width: 1200px;
	max-height: 100%;
	padding: 2em;
	padding-top: 1.25em;
	margin-left: auto;
	margin-right: auto;

	display: grid;
	grid-template-columns: 0.5fr 2em 0.5fr 2em 0.25fr 2em 0.75fr;
	grid-template-rows: auto 0.25em auto 1em 1fr 2em auto 0.5em auto 0.5em auto;
	grid-template-areas:
		"course-header course-header course-header .          account-header account-header account-header"
		".             .             .             .          .              .              .             "
		"course-info   course-info   course-info   .          account-info   account-info   account-info  "
		".             .             .             .          .              .              .             "
		"course-list   course-list   course-list   .          account-list   account-list   account-list  "
		".             .             .             .          .              .              .             "
		"due-header    due-header    due-header    due-header due-header     .              assign-header "
		".             .             .             .          .              .              .             "
		"due-info      due-info      due-info      due-info   due-info       .              assign-info   "
		".             .             .             .          .              .              .             "
		"due-date      due-date      due-date      due-date   due-date       .              assign-button "
}
.assignment-view-navigation      { grid-area: navigation; }
.assignment-view-course-header   { grid-area: course-header; }
.assignment-view-list-courses    { grid-area: course-list; }
.assignment-view-course-info     { grid-area: course-info; }
.assignment-view-account-header  { grid-area: account-header; }
.assignment-view-list-accounts   { grid-area: account-list; }
.assignment-view-account-info    { grid-area: account-info; }
.assignment-view-due-header      { grid-area: due-header; }
.assignment-view-due-info        { grid-area: due-info; }
.assignment-view-due-date        { grid-area: due-date; }
.assignment-view-complete-header { grid-area: assign-header; }
.assignment-view-complete-info   { grid-area: assign-info; }
.assignment-view-complete-button { grid-area: assign-button; }
.assignment-view > h1 {
	font-size: 1.5em;
	border-bottom: solid 2px var(--secondary-color);
	padding-bottom: 0.2em;
}
.assignment-view-course-info, .assignment-view-account-info, .assignment-view-due-info, .assignment-view-assign-info {
	line-height: 1.2em;
}
.assignment-view-list-accounts, .assignment-view-list-courses {
	overflow-y: auto;
}
.transcript-page {
	height: 100%;
	width: 100%;

	padding: 1rem;

	overflow: auto;

	display: grid;
	grid-template-columns: 1fr 1.25fr;
	grid-template-rows: auto auto 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-areas:
		"header    header"
		"download  certificate"
		"details   certificate"
}
.transcript-page-header { grid-area: header; }
.transcript-page-download { grid-area: download; justify-self: center; align-self: start; }
.transcript-page-details { grid-area: details; align-self: start; }
.transcript-page-certificate { grid-area: certificate; }
@media (max-width: 1100px) {
	.transcript-page {
		align-content: start;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto minmax(25rem, 1fr);
		grid-template-areas:
			"header"
			"download"
			"details"
			"certificate";
	}
}
.text-right {
	text-align: right !important;
}
.text-center {
	text-align: center !important;
}
.text-bold {
	font-weight: bold;
	color: #383838;
}
.text-success, .text-green, .smart-cart-header-info, .smart-cart-nav-info { /* .text-green is deprecated. It should be removed if possible in favor of .text-success */
	color: hsl(100, 60%, 35%);
	font-weight: bold;
}
.text-error {
	color: hsl(0, 60%, 35%);
}
.text-warning {
	color: hsl(39, 90%, 45%);
	font-weight: bold;
}
.text-danger {
	color: hsl(0, 50%, 45%);
	font-weight: bold;
}
.text-no-break {
	white-space: nowrap;
}
.iframe-loading {
	position: relative;
}
.iframe-loading::after {
	content: "Loading PDF...";
	font-style: italic;
	font-size: 1.5em;
	font-weight: bold;
	color: #aaa;
	z-index: -1;
	text-align: center;
	width: 100%;
	position: absolute;
	top: 1em;
	left: 0;
}
.add-to-cart {
	margin-bottom: 0.35em;

	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.add-to-cart-inputs {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.add-to-cart-inputs span {
	font-weight: bold;
}
.add-to-cart-inputs input {
	-webkit-appearance: textfield;
	   -moz-appearance: textfield;
	        appearance: textfield;
	min-width: 0;
	padding-left: 0.25em;
	width: 100%;
}
.add-to-cart-inputs button {
	white-space: nowrap;
}
.course-layout {
	display: grid;
	grid-template-columns: 66% 1fr;
	grid-template-rows: auto 1rem auto 1.75rem 1fr;
	-moz-column-gap: 2rem;
	     column-gap: 2rem;

	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;

	padding: 1.5rem 2rem;

	grid-template-areas:
		"heading heading"
		".       ."
		"content products"
		"content ."
		"content sidebar";
}
.course-layout-heading { grid-area: heading; }
.course-layout-content { grid-area: content; }
.course-layout-products { grid-area: products; }
.course-layout-sidebar { grid-area: sidebar; }
.course-layout-heading {
	text-align: center;
	padding-bottom: 0.75rem;
}
.course-layout-products {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
.course-layout-products-product > * + * {
	margin-top: 1rem;
}
.course-layout-products-product > * + h3 {
	margin-top: 4rem;
}
.course-layout-products-product > * + .course-sidebar-in-cart {
	margin-top: 0.5rem;
}
.course-sidebar-in-cart {
	font-style: italic;
	color: #666;
}
.course-sidebar-in-cart a {
	font-weight: bold;
	text-decoration: underline;
}
.course-layout-products-product > h3 {
	font-family: var(--serif-font);
	font-size: 1.2rem;
	line-height: 1.3em;
}
.course-layout-products {
	border-bottom: solid 2px var(--secondary-color);
	padding-bottom: 2rem;
}
@media (max-width: 1050px) {
	.course-layout-heading {
		padding-bottom: 1.5rem;
	}

	.course-layout {
		display: grid;
		grid-row-gap: 1.5rem;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		grid-template-areas:
			"heading"
			"products"
			"content"
			"sidebar";
	}

	.course-layout-products {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
		justify-items: center;
		gap: 2.5rem;
		padding-bottom: 1.5rem;
	}

	.course-layout-products-product {
		max-width: 500px;
	}

	.course-layout-sidebar {
		border-top: solid 2px var(--secondary-color);
		padding-top: 1.5rem;
	}
}
/* TODO: Extract all the other colors */
:root {
	--primary-color: hsl(181, 79%, 22%);
	--primary-color-text: white;
	--secondary-color: hsl(29, 100%, 42%);
	--secondary-color-text: white;
	--background-color: #eaeaea;
	--header-background: #222228;

	--serif-font: "Georgia", serif;
}
body {
	font-family: "Open Sans", sans-serif;
	background-color: var(--background-color);
}
body > [data-phx-main] {
	height: 100%;
}
.price-entries {
	display: grid;
	grid-template-columns: -webkit-min-content auto;
	grid-template-columns: min-content auto;
	-moz-column-gap: 0.5em;
	     column-gap: 0.5em;
	row-gap: 0.25em;
}
.price-entries > span:nth-child(2n + 1)::after {
	content: ":";
}
.price-entries > span:nth-child(2n + 1) {
	font-weight: bold;
	text-align: right;
}
.page {
	max-width: 1200px;
	margin: 1.25rem auto;
	padding: 0 2rem;
}
.page-wide {
	max-width: 1700px;
}
.page-extra-wide {
	max-width: 2000px;
}
/* Cart Table */
.cart {
	width: 100%;
}
.cart th, .cart td {
	padding: 0 1em;
}
.cart th:first-child, .cart td:first-child {
	padding-left: 0;
}
.cart th:last-child, .cart td:last-child {
	padding-right: 0;
	text-align: right;
}
.cart td {
	line-height: 1.4em;
}
.cart tbody tr:not(:last-child) td {
	padding-bottom: 1em;
}
.cart thead tr {
	border-bottom: solid 4px #aaa;
}
.cart tbody tr:first-child td {
	padding-top: 0.5em;
}
.cart tfoot td {
	padding-top: 0.75em;
}
.cart th {
	font-weight: bold;
	text-align: left;
	padding-bottom: 0.5em;
}
.cart strong {
	font-weight: bold;
}
.cart input {
	width: 2.5em;
	padding: 0.1em;
	margin-right: 0.5em;
	text-align: center;
}
.cart a {
	text-decoration: underline;
	display: inline-block;
}
.cart .quantity-cell input {
	padding: 0;
}
.cart .quantity-cell {
	white-space: nowrap;
	display: flex;
}
.cart-totals-table tr:not(:last-child) :is(th,                           td) {
	padding-bottom: 0.5em;
}
.cart-totals-table th {
	text-align: right;
}
.cart-totals-table th::after {
	content: ":";
}
.cart-totals-table td:nth-child(2) {
	text-align: right;
	padding-left: 0.75em;
	padding-right: 0.75em;
	font-weight: bold;
}
/*
Corner box
Appears in the lower right corner of courses - contains links that the student
can use to communicate with the trainer and (potentially) other students
*/
.corner-box {
	position: fixed;
	bottom: 1em;
	right: 1em;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 1em;
}
/* Facebook logo link */
.community-link {
	display: flex;
	align-items: center;
	justify-content: center;
}
.community-link svg {
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}
/* Chat Inbox */
.chat-inbox {
	display: grid;
	grid-template-areas:
		"threads . . ."
		"threads . reference ."
		"threads . . ."
		"threads . reply ."
		"threads . . ."
		"threads . messages ."
		"threads . . .";
	grid-template-columns: 26em 2em 1fr 2em;
	grid-template-rows: 1em auto 1.5em auto 1.5em 1fr 1em;
	height: 100%;
}
.chat-inbox-threads { grid-area: threads; }
.chat-inbox .chat-window-reference { grid-area: reference; }
.chat-inbox .chat-window-reply { grid-area: reply; }
.chat-inbox .chat-inbox-messages { grid-area: messages; }
.chat-inbox .chat-inbox-instructions { grid-column: 3; grid-row: 4/7; }
.chat-inbox-instructions {
	align-self: center;
	justify-self: center;
	padding-bottom: 10%;
	text-align: center;
	font-weight: bold;
	font-style: italic;
	font-size: 1.5em;
	color: #888;
}
.chat-inbox .chat-window-reply {
	grid-area: reply;
}
.chat-inbox-threads {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	border-right: solid 1px #aaa;
}
.chat-inbox-thread {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	cursor: pointer;
	padding: 0.5em 0.75em;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	grid-row-gap: 0.25em;
	grid-column-gap: 0.5em;
	grid-template-areas: "name count" "course count";
	border-top: solid 1px transparent;
}
.chat-inbox-thread:not(.chat-inbox-thread-active) + .chat-inbox-thread:not(.chat-inbox-thread-active) {
	border-top-color: #aaa;
}
.chat-inbox-thread:not(.chat-inbox-thread-active):last-child {
	border-bottom: solid 1px #aaa;
}
.chat-inbox-thread-active {
	background-color: hsl(224, 80%, 64%);
	color: white;
}
.chat-inbox-thread-active .chat-inbox-thread-course {
	color: white;
}
.chat-inbox-thread-course               { grid-area: course; }
.chat-inbox-thread-owner                { grid-area: name; }
.chat-inbox-thread-unread-message-count { grid-area: count; }
.chat-inbox-thread-owner {
	line-height: 1.2em;
	font-weight: bold;
}
.chat-inbox-thread-course {
	color: #666;
	font-size: 0.9em;
	font-style: italic;
	line-height: 1.2em;
}
.chat-inbox-thread-unread-message-count {
	align-self: center;
	background-color: hsl(0, 80%, 60%);
	padding: 0.4em;
	border-radius: 4px;
	color: white;
	font-size: 0.8em;
}
.chat-inbox-messages {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	gap: 1em;
}
.chat-inbox-message {
	display: grid;
	grid-template-areas:
		"author date"
		"message message";
	grid-template-columns: 1fr -webkit-min-content;
	grid-template-columns: 1fr min-content;
	grid-template-rows: auto 1fr;
	gap: 0.5em;

	padding: 0.5em 0.75em;
	line-height: 1.4em;
}
.chat-inbox-message.chat-inbox-message-sent {
	margin-left: 4em;
	background-color: hsl(224, 80%, 64%);
	color: white;
}
.chat-inbox-message:not(.chat-inbox-message-sent) {
	margin-right: 4em;
	background-color: #d8d8d8;
}
.chat-inbox-message-author { grid-template-area: author; }
.chat-inbox-message-date { grid-template-area: date; }
.chat-inbox-message-content { grid-template-area: content; }
.chat-inbox-message-date {
	white-space: nowrap;
}
.chat-inbox-message-author {
	font-weight: bold;
}
.chat-inbox-toggle {
	padding: 0.5em;
	text-align: center;
	margin-top: auto;
}
.icon {
	cursor: pointer;
}
.icon-inline {
	width: 1em;
	fill: currentColor;
	vertical-align: middle;
	padding-bottom: 0.31em;
}
.icon-button svg {
	width: 1em;
	fill: currentColor;
}
.icon-button {
	display: flex;
	align-items: center;
	gap: 0.4em;
	background: none;
	border: none;
	font-weight: bold;
}
.icon-button-danger {
	color: hsl(0, 60%, 40%);
	font-weight: bold;
}
/* Man, I haven't needed one of these in years. */
/*.clear-fix::after {
	content: "";
	display: table;
	clear: both;
}
*/