/* CSS Document */
body {
	margin-left: 1.75em !important;
	margin-right: 1.75em !important;
	background-color: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 10%);
	line-height: 1.2;
	font-family: "PT Sans", Calibri, Tahoma, sans-serif;
	font-size: 1.25em;
	user-select: none;
}

h1, h2 { 
	text-align: center; 
	margin: 0;
	line-height: 1.25;
	border-bottom: 4px solid hsl(208, 8%, 32%);
}
h1 {
	background-color: hsl(208, 8%, 32%);
	color: hsl(78, 79%, 41%);
	font-size: 2.0em;
	margin-bottom: 1.0em;
	padding: 1.0em 0em;
}
h2 {
	background-color: hsl(78, 79%, 41%);
	color: hsl(208, 8%, 32%);
	font-size: 1.75em;
}
h3 {
	font-size: 1.5em;
}

p {
  	font-size: 1.40em;
}

table, td {
    border-collapse: collapse;
}

table {
    width: 100%;
}

table:not(.container-check) {
    table-layout: fixed;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #888;
}

::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.green-text {
	color: hsl(78, 79%, 41%);
	font-weight: bold;
	font-style: italic;
}

/* abc list */
.list {
	margin-left: 2.0em;
	margin-bottom: 1.0em;
}
	.list > p {
		position: relative;
		margin: 0em 0em 0em 0.5em;
	}
		.list > p > span {
			position: absolute;
			left: -1.25em;
			font-weight: bold;
			font-size: 0.85em;
			line-height: 1.25;
		}


/* table headers */
table > tbody > tr:nth-child(1) > td { 
	text-align: center;
	font-size: 1.1em;
	font-weight: bold; 
	padding: 0.5em 0em;
}
/* table's fourth column from the right */
table > tbody > tr:not(:nth-child(1)) > td:nth-last-child(4) { 
	font-size: 1.1em; 
	padding-left: 0.5em;
}

/* button colors */
table:not(.tuning) > tbody > tr > td:nth-last-child(3) svg { background-color: #B2B2B2; }
table:not(.tuning) > tbody > tr > td:nth-last-child(2) svg { background-color: #FFCB00; }
table:not(.tuning) > tbody > tr > td:nth-last-child(1) svg { background-color: hsl(78, 79%, 41%); }

/* prevent height changes while loading */
td:has(audio):not(td:has(div)):after {
	display: block;
	content: " ";
	height: 5em;
}

/* play/stop transitions */
[data-is-playing="true"] svg {
	outline: 3px solid black;
	outline-offset: -3px;
}
[data-is-playing="true"] .play  { display: none;  }
[data-is-playing="true"] .stop  { display: block; }
[data-is-playing="false"] .play { display: block; }
[data-is-playing="false"] .stop { display: none;  }


/* table zebra striping */
table > tbody > tr:nth-child(2n) {
    background-color: #efefef;
}

/* tables/section containers */
.container-adjustment td:has([data-is-playing="true"]),
.container-user-training td:has([data-is-playing="true"]),
.container-check tr:has([data-is-playing="true"]) { 
	background-color: hsl(78, 79%, 41%, 25%) !important; 
	outline: 1px solid hsl(78, 79%, 41%);
	outline-offset: -1px;
}
.container-check tr:has([data-is-playing="true"]) {
	font-weight: bold;
}

.container-check td:nth-child(1) { width: 40%; }
.container-check td:nth-child(n + 1) { width: 20%; }

.container-adjustment td:has([data-is-playing="true"]),
.container-user-training td:has([data-is-playing="true"]) {
	background-color: hsl(78, 79%, 41%, 25%) !important; 
}

.container-user-training p {
	padding: 0em 0.5em;
}

.tuning {
	margin: 1.75em 0em;
}