body {
	background-color: rgb(45, 45, 51);
	color: rgb(207, 206, 221);
	font-family: sans-serif;
	margin: 0px;
}

header {
	background-color: rgb(60, 60, 70);
}

footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding: 12px;
	background-color: rgb(60, 60, 70);
	text-align: end;
	border-top: 1px solid rgb(45, 45, 51);
}

button,
.radiobutton {
	background-color: rgb(45, 45, 51);
	color: rgb(207, 206, 221);
	border: 2px outset rgb(45, 45, 51);
	padding: 5px 10px;
}

button:hover,
.radiobutton:hover {
	background: transparent;
}

button:active,
.radiobutton:active,
.radiobutton:has(>input[type="radio"]:checked) {
	border-style: inset;
}

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

.radiobutton label {
	cursor: pointer;
	z-index: 90;
	line-height: 1.8em;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.title {
	font-size: xx-large;
	color: rgb(178, 215, 248);
	text-align: center;
	font-family: cursive;
}

.mid {
	padding: 20px;
}

.toolbar {
	margin: 0;
	padding: 0;
	width: 100%;
}

.toolbar td {
	padding: 0px;
	width: 16%;
}

.toolbar a {
	text-decoration: none;
}

.toolbarItm {
	font-size: x-large;
	color: rgb(207, 206, 221);
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 8px 0px;
}

.toolbarItm:hover,
.toolbarItm:focus {
	background-color: rgb(94, 94, 104);
}

.card {
	border: 2px black;
	background-color: rgb(60, 60, 70);
	border-radius: 16px;
	padding: 12px;
	margin-bottom: 12px;
	box-shadow: 0px 0px 6px lightgray;
}

.card h2 {
	margin: 0px 0px 20px 0px;
}

.card h5 {
	margin: 10px 6px;
	display: flex;
	align-items: center;
}

.options {
	margin-bottom: 10px;
}

.playerTable {
	white-space: nowrap;
}

.playerTable td {
	padding: 0px 12px;
}

.playerTable td:last-child {
	width: 100%;
}

.playerTable td:last-child button {
	float: right;
}

.playerTable tr:not(:last-child) {
	border-bottom: 1px solid black;
}

.objectiveTd {
	display: inline-flex;
	align-items: center;
}

.objectiveIcon {
	width: 48px;
	height: 48px;
}

.categoryIcon {
	width: 48px;
	height: 48px;
}

.playerName {
	font-size: large;
	font-weight: bold;
}

.playerStatus.DNF {
	color: rgb(255, 63, 63);
}
.playerStatus.Finished {
	color: rgb(49, 209, 49);
}

.collapsibleHeader {
	background-color: rgb(45, 45, 51);
	color: rgb(207, 206, 221);
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	outline: none;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	position: relative;
}

.collapsibleHeader:hover {
	background-color: rgb(94, 94, 104);
}

.collapsibleContent {
	padding: 0px 18px;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.15s ease-out;
}

.margin6 {
	margin: 6px;
}

.collapsibleHeader:after {
	content: '\02795'; /* Unicode character for "plus" sign (+) */
	font-size: 13px;
	position: absolute;
	right: 24px;
}

.collapsibleActive:after {
	content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.footerSpacer {
	height: 56px;
}

.actionButtonsContainer {
	margin: 6px;
}

.logTable {
	border-collapse: collapse;
	width: 100%;
	font-size: small;
}

.logTable tr:first-child {
	font-weight: bolder;
	color: gray;
}

.logTable tr:not(:last-child) {
	border-bottom: 1px solid black;
}

#logCard {
	display: none;
}

#logCard.hasLog {
	display: revert;
}

#output {
	overflow: auto;
	font-family: monospace;
}

#output>p {
	overflow-wrap: break-word;
}

#output span {
	color: lightblue;
}

#output span.error {
	color: red;
}