.controller .btn:focus {
	box-shadow:none;
}

.tag-metric {
	cursor:default;
}

.controller button {
	text-decoration: none;
	min-height: 80px;
}

.controller button:hover {
	background: #e9ecef;
}

[data-bs-toggle] {
	cursor:pointer;
}

.btn-choice {
	font-family: Bookerly;
	text-transform: none;
}

/* multiple-choice/index-cards */
/* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
.form-textarea {
	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
	display: grid;
}
.form-textarea::after {
	/* Note the weird space! Needed to preventy jumpy behavior */
	content: attr(data-replicated-value) " ";

	/* This is how textarea text behaves */
	white-space: pre-wrap;

	/* Hidden from view, clicks, and screen readers */
	visibility: hidden;
}
.form-textarea > textarea {
	/* You could leave this, but after a user resizes, then it ruins the auto sizing */
	resize: none;

	/* Firefox shows scrollbar on growth, you can hide like this. */
	overflow: hidden;
}
.form-textarea > textarea, .form-textarea::after {
	/* Identical styling required!! */
	border: 1px solid black;
	padding: 0.5rem;
	font: inherit;

	/* Place on top of each other */
	grid-area: 1 / 1 / 2 / 2;
}

/* n-back */

.n-back-row {
	cursor: pointer;
	background:white;
}

.n-back-circle {
	position:absolute;
	background: transparent;
	border: solid gray 2px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	z-index: -1; /* https://stackoverflow.com/a/22151428 */
	transition: left 1s;
	display:none;
}

.progress-bar {
	transition: background-color 1s;
}