/* null margins and padding to give good cross-browser baseline */
html, body, address, blockquote, div, 
form, fieldset, caption, 
h1, h2, h3, h4, h5, h6, 
hr, ul, li, ol, ul, dl, dt, dd, 
table, tr, td, th, p, img {
	margin:0;
	padding:0;
}

img,  fieldset {
	border:none;
}

* {
	box-sizing:border-box;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section,  NOT
		style/presenation,  so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	/* Fix for pre "viewport <meta>" mobile browsers */
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

/* IBM Plex Sans */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-VariableFont.ttf")
    format("truetype-variations");
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Italic-VariableFont.ttf")
    format("truetype-variations");
  font-style: italic;
}

/* IBM Plex Serif */
@font-face {
  font-family: "IBM Plex Serif Medium";
  src: url("../fonts/IBMPlexSerif-Medium.ttf")
    format("truetype-variations");
  font-style: normal;
  font-weight: medium;
}

@font-face {
  font-family: "IBM Plex Serif Medium";
  src: url("../fonts/IBMPlexSerif-MediumItalic.ttf")
    format("truetype-variations");
  font-style: italic;
  font-weight: medium;
}

/* Font Awesome icons */
:host,:root {
	--fa-family-classic:"Font Awesome 7 Free";
	--fa-font-regular:normal 400 1em/1 var(--fa-family-classic);
	--fa-style-family-classic:var(--fa-family-classic)
}

@font-face {
	font-family:"Font Awesome 7 Free";
	font-style:normal;
	font-weight:400;
	font-display:block;
	src:url(../fonts/fa-regular-400.woff2)
}

.far, .fa-regular {
	--fa-style:400
}

.fa-classic,.far {
	--fa-family:var(--fa-family-classic)
}

html,  body {
	height:100%;
}

body,  button,  input,  table,  textarea,  select {
	font:normal 1em/1.5 'IBM Plex Sans', helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "IBM Plex Serif Medium", serif;
	font-weight: medium;
}

body {
	display:flex;
	flex-direction:column;
	background:hsl(40, 100%, 95%);
	background:white;
}

body > header, 
body > footer {
	flex:0 0 auto;
	padding:0.5em 1em;
}

body > header {
	/* border-bottom:1px solid hsl(40, 100%, 60%); */
}

body > header h2 {
	text-align:center;
}

body > footer {
	text-align:center;
	/* border-top:1px solid hsl(40, 100%, 60%); */
}

body > header > ul {
	list-style-type: none;
	display: flex;
}

body > header > ul li {
	display: inline-block;
	margin: 0 0.5em;
}

body > header > ul a {
	color: black;
	text-decoration: none;
}

body > header > ul a em {
	font-weight:bold;
	font-style:normal;
}

body > header > ul li:first-child {
	margin-left:0;
}
body > header > ul li:last-child {
	margin-right:0;
}

body > header > ul li:nth-child(4) {
	margin-right: auto;
}

main {
	flex:1 0 auto;
	/* max-width:48em; */
	width: 100%;
	justify-content: stretch; 
	margin:0 auto;
	padding:1em;
}

h1 {
	font-size:2em;
}

p {
	padding-bottom:1.5em;
}

.not-found {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
	height:100%;
}

.button,
.fullWidthButton {
	display: inline-block;
	padding:0.3em 0.8em;
	text-decoration: none;
	color:black;
	border:2px solid black;
	box-shadow:0 0.1em 0 black;
	border-radius:0.5em;
	font-size:0.9em;
	transition:0.2s ease-out;
}

.fullWidthButton {
	width:100%;
	text-align:center;
}

.groupButton {
	line-height:1;
	display:flex;
	border:2px solid black;
	border-radius:0.5em;
	overflow:hidden;
}

.groupButton .active {
	background:#000;
	color:#fff;
}

.groupButton > * {
	padding:0.5em 1em;
	background:white;
	display:inline-block;
	text-decoration:none;
	color:black;
}

.tabs > ul {
	list-style:none;
	display:flex;
	margin-bottom:2px;
	z-index:1;
}

.tabs > ul li a {
	border:2px solid black;
	border-right:0px;
	background-color:rgba(0,0,0,0.1);
}

.tabs > section {
	border:2px solid hsl(179, 100%, 0%);
	border-radius:0 0.5em 0.5em 0.5em;
	flex:1;
}

.tabs > ul a {
	color:black;
	text-decoration:none;
	padding:0.25em 1em;
}

.tabs > ul li:first-child a {
	border-radius:0.5em 0 0 0;
}

.tabs > ul li:last-child a {
	border-radius:0 0.5em 0 0;
	border-right:2px solid black;
}

.tabs > ul li.active a {
	background-color:#fff;
	border-bottom-color:transparent;
	font-style:normal;
	font-weight:normal;
}

.tabset {
	color: white;
}

.tabs > section {
	flex:1;
}

.tabset > input {
	display:block; /* "enable" hidden elements in IE/edge */
	position:absolute; /* then hide them off-screen */
	left:-100%;
}

.tabset > ul {
	position:relative;
	z-index:999;
	list-style:none;
	display:flex;
	align-items:flex-end;
	margin-bottom:-2px;
}

.tabset > ul label,
.tabset > div {
	border:2px solid hsl(179, 100%, 0%);
}

.tabset > ul label {
	font-weight:600;
	display:inline-block;
	padding:0.25em 1em;
	background:hsl(40, 100%, 90%);
	background:var(--topic-bg);
	border-right-width:0;
}

.tabset > ul li:first-child label {
	border-radius:0.5em 0 0 0;
}

.tabset > ul li:last-child label {
	border-right-width:2px;
	border-radius:0 0.5em 0 0;
}

.tabset > div {
	position:relative;
	background:hsl(40, 100%, 98%);
	border-radius:0 0.5em 0.5em 0.5em;
	overflow: hidden;
}

.tabset > input:nth-child(1):checked ~ ul li:nth-child(1) label,
.tabset > input:nth-child(2):checked ~ ul li:nth-child(2) label,
.tabset > input:nth-child(3):checked ~ ul li:nth-child(3) label,
.tabset > input:nth-child(4):checked ~ ul li:nth-child(4) label,
.tabset > input:nth-child(5):checked ~ ul li:nth-child(5) label,
.tabset > input:nth-child(6):checked ~ ul li:nth-child(6) label,
.tabset > input:nth-child(7):checked ~ ul li:nth-child(7) label,
.tabset > input:nth-child(8):checked ~ ul li:nth-child(8) label,
.tabset > input:nth-child(9):checked ~ ul li:nth-child(9) label {
	background:hsl(40, 100%, 98%);
	background:var(--topic-bg);
	border-bottom-color:transparent;
}

.tabset > div > section,
.tabset > div > section h3 {
	position:absolute;
	top:-999em;
	left:-999em;
}
.tabset > div > section {
	padding:1em;
	width: 100%;
	background:var(--topic-bg);
}

.tabset > input:nth-child(1):checked ~ div > section:nth-child(1),
.tabset > input:nth-child(2):checked ~ div > section:nth-child(2),
.tabset > input:nth-child(3):checked ~ div > section:nth-child(3),
.tabset > input:nth-child(4):checked ~ div > section:nth-child(4),
.tabset > input:nth-child(5):checked ~ div > section:nth-child(5),
.tabset > input:nth-child(6):checked ~ div > section:nth-child(6),
.tabset > input:nth-child(7):checked ~ div > section:nth-child(7),
.tabset > input:nth-child(8):checked ~ div > section:nth-child(8),
.tabset > input:nth-child(9):checked ~ div > section:nth-child(9) {
	position:Static;
}

.tabset > ul label {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.topics {
	display: flex;
}

.topics > ul {
	position:relative;
	z-index:999;
	flex:0 0 8em;
	list-style:none;
	margin-right:-2px;
}

.topics > ul li a,
.topics > div {
	/* border:2px solid hsl(179, 100%, 0%); */
}

.topics > ul li a {
	display:inline-block;
	width: 100%;
	border-bottom-width:0;
	padding:0.3em 1em;
	/* background:hsl(40, 100%, 90%); */
	font-weight:normal;
	font-size:0.9em;
	text-decoration:none;
	color: black;
	border-radius:0.5em;
	line-height:1.3;
	border:2px solid transparent;
}

.topics > ul li a:hover {
	background-color:rgba(0,0,0, 0.1);
}

.topics > ul li a img {
	max-width:100%;
	margin-bottom:0.2em;
}

.topics > ul li em a {
	font-style:normal;
	font-weight:bold;
	text-align:center;
	background:white;
	border:2px solid black;
	margin:0.25em 0;
}

.topics > div {
	position:relative;
	border-radius:0 0.5em 0.5em 0.5em;
	flex:1 1 auto;
	background:white;
	overflow:hidden;
	padding:0 1em;
}

.topics > h2,
.topics > div > h2 {
	position:absolute;
	top:-999em;
	left:-999em;
}

.lesson {
	display: grid;
	gap:1em;
	grid-template-columns: repeat(auto-fill, minmax(24em, 1fr));
}

.lesson section {
	display:flex;
	flex-direction:column;
	padding:1em 0.5em;
	background:hsl(40, 100%, 98%);
	background:white;
	color:black;
	border-radius:0.5em;
	line-height:1.3em;
	box-shadow:0 0.1em black;
	position:relative;
}

.lesson section header {
	display:flex;
	align-items:flex-start;
	margin-bottom:auto;
}

.lesson section header img {
	max-width:5em;
	margin:0 0.5em 0.5em 0;
}

.lesson section header h4 {
	margin-bottom:0.5em;
	line-height:1.2em;
}

.lesson section header p {
	font-size:0.9em;
	line-height:1.3em;
}

.lesson section > div {
	gap:0.5em;
	display:flex;
	float:none;
	flex-wrap:wrap;
	margin:0 -0.5em;
	padding:0.5em 0.5em 0;
}

.lesson section > div a {
	display:inline-block;
	padding:0.3em 0.8em;
	text-decoration: none;
	color:black;
	border:2px solid black;
	box-shadow:0 0.1em 0 black;
	border-radius:0.5em;
	font-size:0.9em;
	transition:0.2s ease-out;
}

.lesson section > div a:hover {
	position:relative;
	top:0.1em;
	box-shadow:none;
}

.lessonActions {
	display:flex;
}

.lessonActions a,
.lessonActions button {
	display:block;
	text-align:center;
}
.lessonActions a:first-child,
.lessonActions button:first-child {
	flex:1;
}

.lessonProgress {
	display:flex;
	margin-top:0.5em;
	margin-bottom:0.5em;
	list-style:none;
	height:0.8em;
	border:2px solid black;
	border-radius:0.5em;
	background:hsl(40, 100%, 90%);
}

.lessonProgress > li {
	position:relative;
	--step-bg:hsl(40, 80%, 70%);;
	flex:var(--step-children);
	border-right:2px solid black;
	background-color:var(--step-bg);
	background:repeating-linear-gradient( -45deg, var(--step-color), var(--step-color) 2px, var(--step-bg) 2px, var(--step-bg) 0.25em );
}

.lessonProgress > li:last-child {
	border-right:none;
}

.lessonProgress > li:nth-child(1) { --step-color:red; --step-bg:red; }
.lessonProgress > li:nth-child(2) { --step-color:orange; --step-bg:orange; }
.lessonProgress > li:nth-child(3) { --step-color:gold; --step-bg:gold; }
.lessonProgress > li:nth-child(4) { --step-color:green; --step-bg:green; }
.lessonProgress > li:nth-child(5) { --step-color:blue; --step-bg:blue; }


.lessonProgress > li > ul {
	border-radius:0.5em;
	padding:0.2em 0.5em;
	position:absolute;
	z-index:999;
	text-wrap:nowrap;
	bottom:1.2em;
	left:50%;
	transform:translateX(-50%);
	display:none;
	background-color:white;
	background-color:var(--step-color);
	color:white;
	list-style:none;
	font-size:0.8em;
	box-shadow:0 0.1em 0 black;
}

.lessonProgress > li > ul::before, 
.lessonProgress > li > ul::after {
	content:" ";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-5px;
	border-width:5px;
	border-style:solid;
	border-color:var(--step-color) transparent transparent transparent;
}

.lessonProgress > li > ul::before {
	border-color:black transparent transparent transparent;
	top:calc(100% + 0.1em);
}

.lessonProgress > li:hover > ul {
	display:block;
}

.lessonProgressStudents {
	padding-top:0.1em;
	display:flex;
}

.lessonProgressStudents > div {
	text-align:center;
	flex:var(--step-children);
}

.studentSelector {
	max-width:14em;
	margin:0 auto 2em;
}

.studentSelector ul {
	list-style:none;
	padding-left:1em;
	margin:0.5em 0 1em;
}

.studentSelector button {
	margin-top:1em;
}

.observation {
	display:flex;
}

.observation > section {
	flex:1;
	padding:0 1rem;
}

.observation > section h2 {
	margin-bottom:0.2rem;
}

.observation > section h3 {
	margin-bottom:0.4rem;
}

.observedChild {
	display:flex;
	align-items:center;
	margin-bottom:1.5rem;
}

.observedChild img {
	max-width:5rem;
	border-radius:0.5em;
	margin-right:1em;
}

.stepLog > article {
	border:2px solid black;
	border-radius:0.5em;
	background-color:white;
	padding:0.8em;
	margin-bottom:1em;
}

.observation h3
.stepLog > article h3 {
	margin-bottom:0.1em;
}

.stepLog > article h4 + span {
	font-style:italic;
	font-size:0.9em;
	opacity:0.66;
	display: block;
}

.stepLog > article p {
	padding:0;
	margin-top:0.5em;
}

.newStep {
	display:flex;
	flex-direction:column;
	margin-bottom:2rem;
}

.newStep input[type="radio"] {
	display:none;
}

.newStep > fieldset {
	margin-bottom:0.5em;
}

.newStep > label,
.newStep legend {
	display:block;
	margin-bottom:0.3em;
	font-size:0.90rem;
}

.newStep > fieldset label {
	display:inline-block;
	min-width:2.3rem;
	box-shadow:0 0.1em black;
	margin-right:0.4em;
	font-weight:bold;
	text-align:center;
}

.newStep > br {
	display: none;
}

.newStep > fieldset input[type=radio]:checked + label[for=step_1],
.newStep label[for=step_1]:hover,
.newStep label[for=step_1]:focus,
.newStep label[for=step_1]:active {
	background-color:rgba(235, 99, 8, 1);
}

.newStep > fieldset input[type=radio]:checked + label[for=step_2],
.newStep label[for=step_2]:hover,
.newStep label[for=step_2]:focus,
.newStep label[for=step_2]:active {
	background-color:rgba(235, 99, 8, 1);
}

.newStep > fieldset input[type=radio]:checked + label[for=step_3],
.newStep label[for=step_3]:hover,
.newStep label[for=step_3]:focus,
.newStep label[for=step_3]:active {
	background-color:rgba(67, 218, 65, 1);
}

.newStep > fieldset input[type=radio]:checked + label[for=step_4],
.newStep label[for=step_4]:hover,
.newStep label[for=step_4]:focus,
.newStep label[for=step_4]:active {
	background-color:rgba(45, 177, 255, 1);
}

.newStep > fieldset input[type=radio]:checked + label[for=step_5],
.newStep label[for=step_5]:hover,
.newStep label[for=step_5]:focus,
.newStep label[for=step_5]:active {
	background-color:rgba(119, 119, 119, 1);
}

.newStep > fieldset label,
.newStep > textarea {
	border:2px solid black;
	border-radius:0.5em;
	padding:0.2em 0.5em;
	background-color:white;
	margin-bottom:0.5em;
	transition:background 0.2s ease-out;
}

.newStep > fieldset input[type=radio]:checked + label {
}

.newStep button {
	border:2px solid black;
	border-radius:0.5em;
	box-shadow:0 0.1em black;
	padding:0.2em 0.5em;
	background-color:#48B848;
	font-weight:bold;
}

.newStep > fieldset input[type=radio]:checked + label,
.newStep > fieldset label:hover,
.newStep > fieldset label:focus,
.newStep > fieldset label:active,
.newStep button:hover,
.newStep button:focus,
.newStep button:active {
	box-shadow:none;
	transform: translateY(0.2em);
}

.stepDescription > div {
	display:flex;
	align-items:center;
	margin-bottom:1rem;
}

.stepDescription > div > div p {
	padding-bottom:0;
}

.stepDescription ul {
	list-style:none;
	padding-left:1rem;
	margin-bottom:1rem;
}

.stepDescription ul b {
	list-style:none;
}

.stepDescription > div > img {
	max-width:5rem;
	margin-right:1rem;
}

.grades {
	background-color:white;
	color:black;
	border-radius:0.5em;
	max-height:calc(100vh - 9em);
	overflow:scroll;
}

.grades table {
	border-collapse:separate;
	border-spacing:0;
}

.grades caption {
	display: none;
}

.grades thead {
	position:sticky;
	top:0;
	z-index:999;
	background-color:white;
}


.grades thead tr th:first-child {
	font-size:0;
	position:sticky;
	left:0;
	top:0;
	z-index:999;
	background:white;
	border-color:white;
	border-color:black;
}

.grades thead tr:last-child th:first-child {
	border-right:1px solid black;
	border-bottom-color:black;
}

.grades thead tr {
	background:#fff;
}

.grades th {
	white-space: nowrap;
}

.grades th,
.grades td {
	padding:0.5em 1.2em;
	text-align:center;
	border-bottom:1px solid black;
}

.grades tbody th {
	position:sticky;
	left:0;
	z-index:0;
	min-width:10em;
	background-color:white;
	align-items:center;
	text-align:left;
	border-right:1px solid black;
}

.grades tbody td {
	font-size:1.4em;
	padding:0.3em;
}

.grades th,
.grades tbody tr th,
.grades thead tr th:first-child {
}

.planHeader {
	padding-bottom:1em;
	border-bottom:2px dashed black;
	margin-bottom:1em;
	display:flex;
	gap:1.5em;
	align-items:center;
	justify-content:flex-start;
}

.planHeader > *:last-child {
	margin-left:auto;
}

.planHeader a {
	color:black;
}

.planHeader a i {
	font-size:1.5em;
	line-height:1;
}

.planDays {
	display:flex;
	gap:1.5em;
}

.planDays > section {
	flex:1 20em;
}

.planDays > section article {
	border:2px solid black;
	border:2px solid var(--topic-color);
	border-radius:0.5em;
	box-shadow:0 0.1em black;
	box-shadow:0 0.1em var(--topic-color);
	margin-top:1em;
	padding:2.5em 0.5em 0.5em;
	background-color:#fff;
	position:relative;
}

.planDays h3 {
	text-align:center;
	margin-bottom:0.5em;
}

.planDays > section > ul {
	list-style:none;
	display:flex;
	margin:0 auto;
	background:white;
}

.planDays > section > ul > li {
	border:2px solid black;
	border-right:none;
	padding:0.3em;
	position:relative;
	font-size:0.85em;
	flex:1;
	text-align:center;
}

.planDays > section > ul > li:first-child {
	border-radius:0.5em 0 0 0.5em;
}

.planDays > section > ul > li:hover {
	background:black;
	color:white;
}

.planDays > section > ul > li:first-child:hover {
	border-radius:0.5em 0 0 0;
}

.planDays > section > ul > li:last-child {
	border-right:2px solid black;
	border-radius:0 0.5em 0.5em 0;
}

.planDays > section > ul > li:last-child:hover {
	border-radius:0 0.5em 0 0;
}

.planDays > section > ul > li {
	cursor:pointer;
}

.planDays > section > ul > li > ul {
	border:2px solid black;
	border-radius:0 0 0.5em 0.5em;
	list-style:none;
	display:none;
	position:absolute;
	top:100%;
	min-width:calc(100% + 4px);
	left:-2px;
	z-index:1;
	background:white;
	text-align:left;
}

.planDays > section > ul > li > ul > li {
}

.planDays > section > ul > li > ul > li:hover {
	background:black;
	color:white;
	cursor:pointer;
}

.planDays > section > ul > li > ul > li > a {
	padding:0.25em 0.5em;
	width:100%;
	display:block;
	text-decoration:none;
	color:black;
}

.planDays > section > ul > li > ul > li:hover > a {
	color:white;
	background:black;
}


.planDays > section > ul > li:hover > ul {
	list-style:none;
	display:block;
}

.planDays > section article > span {
	position:absolute;
	top:0;
	left:0;
	right:0;
	padding:0.25em 0.6em 0.3em 0.4em;
	font-size:0.9em;
	background-color:var(--topic-color);
	color:white;
}

.planDays > section article > a {
	position:absolute;
	top:0;
	right:0;
	color:white;
	font-size:0.9em;
	padding:0.25em 0.6em 0.3em;
	border-radius:0 0 0.5em 0;
}

.planDays > section article > h4 {
	font-size:1em;
	line-height:1.25;
	margin-bottom:0.5em;
}

.planLesButton,
.planLesButton div {
	display:flex;
	justify-content:center;
	position:relative;
}

.planLesButton h4 {
	font-family: "IBM Plex Sans";
	text-decoration:underline;
	font-weight:normal;
	cursor:pointer;
	padding:0.2em;
}

.planLesButton ul {
	position:absolute;
	top:1.8em;
	z-index:1;
	display:none;
	list-style:none;
	border:2px solid black;
	border-radius:0.5em;
	background-color:white;
}

.planLesButton ul a {
	display:block;
	padding:0.2em 0.6em;
	text-wrap:nowrap;
	color:black;
	text-decoration:none;
}

.planLesButton ul a:hover {
	background-color:rgba(0,0,0,0.1);
}

.planLesButton > div:hover ul {
	display:block;
}

.lessonChildren > ul {
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:0.3em;
}

.lessonChildren > span,
.lessonChildren > ul li {
	display:inline-block;
	border:1px solid black;
	font-size:0.8em;
	border-radius:1em;
	padding:0 0.5em;
}

.lessonChildren > ul li a {
	text-decoration:none;
	color:black;
}

.tags {
	display:flex;
	flex-wrap:wrap;
	gap:0.5em;
	list-style:none;
}
.tags li {
	--topic-bg: hsl(40, 100%, 40%);
	padding:0 0.5em;
	border-radius:0.5em;
	border:2px solid var(--topic-bg);
	color:var(--topic-bg);
}

.plannedLesson header img {
	display:inline-block;
	max-width:4.5em;
	padding:0.5em 0;
}

.plannedLesson header h2 {
	margin-bottom:0.5em;
	display:inline-block;
}

.plannedLesson > header {
	display:flex;
	gap:1em;
	align-items:flex-start;
	margin-bottom:4em;
}

.plannedLesson > header > ul {
	margin-left:auto;
}

.plannedLesson > section {
	margin-top:3em;
	display:flex;
	gap:1em;
}

.plannedLesson > section:last-child  {
	align-items:center;
}

.plannedLesson > section:last-child p {
	margin-bottom:0;
}

.plannedLesson > section > h3 {
	flex:auto 4em;
	display:block;
	padding:0 0.2em;
	font-weight:900;
	font-size:4em;
	color:rgba(0,0,0,0.8);
	line-height:1;
}

.plannedLesson section > div > p {
	font-size:1.2em;
	font-family: "IBM Plex Serif Medium";
	padding-bottom:0;
	margin-bottom:0.5em;
}

.plannedLesson > section  h4 {
	margin-bottom:0.25em;
}


.plannedLesson > section > div {
	flex:1;
}

.plannedLesson .lessonChildren {
	margin-top:0.6em;
	margin-bottom:0.5em;
}

.lessonMaterials ul {
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:0.5em;
}

.lessonMaterials a {
	background:#fff;
	border:2px solid black;
	border-radius:0.5em;
	box-shadow:0 0.1em 0 black;
}

.lessonMaterials a {
	color:black;
	padding:0.25em 0.5em;
	display:block;
	text-decoration:none;
}

.lessonMaterials a:active,
.lessonMaterials a:focus,
.lessonMaterials a:hover {
	box-shadow:none;
	transform: translateY(0.2em);
}

.lessonDescription {
	display:flex;
	gap:2em;
	font-size:0.9em;
}

.lessonDescription > div {
	flex:1;
}

.results {
	display:flex;
	gap:1em;
}

.results > div {
	flex:1;
}

.results > ul {
	list-style:none;
	margin-top:2em;
}

.results > ul li {
	margin-bottom:0.5em;
}

.results > ul li a {
	display:flex;
	align-items:center;
	padding:0.5em;
	border-radius:0.5em;
	text-decoration:none;
	font-style:normal;
	color:black;
}


.results > ul li a:hover {
	background-color:rgba(0,0,0, 0.1);
}

.results > ul li em a {
	border:2px solid black;
	font-weight:bold;
}

.results > ul li a::before {
	display:inline-block;
	content:" ";
	height:2em;
	width:2em;
	border-radius:0.5em;
	margin-right:0.5em;
	background-image:var(--student-image);
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

.results .tabset ul > li > label {
	color:black;
}

.results .tabs > section {
	padding:1em;
}

.results .tabs > section ul {
	list-style:none;
}

.results section ul {
	columns:auto 20em;
	gap:2em;
	margin-bottom:2em;
	margin-left:1em;
}

.results section li {
	break-inside:avoid;
}

.results section li a {
	display:inline-flex;
	align-items:center;
	border-radius:0.5em;
	text-decoration:none;
	color:black;
	padding:0.2em 0.4em;
	font-size:1.2em;
	line-height:1.2em;
}

.results section li a:hover {
	background-color:rgba(0,0,0,0.1);
}

.results section h2 {
	margin-bottom:0.25em;
}

.results section li span {
	order:-1;
	display:inline-block;
	margin-right:1em;
	padding:0.25em 0.5em 0.35em;
	border-radius:0.5em;
	background-color:rgba(0,0,0,0.1);
	background-color:var(--step-color);
	text-decoration:none;
	font-weight:bold;
	color:black;
}

.results section li a::before {
	order:-2;
	display:block;
	min-width:2em;
	min-height:2em;
	margin-right:0.5em;
	content:'';
	background-image:var(--goal-image);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}