body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 12px;
	background-color: midnightblue;
	color: white;
}

html,
body {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 1.25rem;
	text-align: center;
	margin: 0.25rem 0;
}

h2 {
	color: cornflowerblue;
	margin: 0.25rem 0;
	font-size: 1.12rem;
}

button,
select {
	min-width: 6rem;
}

.panel {
	background-color: grey;
	color: midnightblue;
	padding: 0.25rem 0.5rem;
	flex-grow: 1;
}

.caption {
	display: inline-block;
	width: 4.5rem;
}

.verBand {
	display: flex;
	gap: 0.25rem;
	flex-direction: column;
	height: calc(100vh - 0.5rem);
	margin: 0;
	padding: 0.25rem;
}

.horBand {
	display: flex;
	gap: 0.25rem;
	flex-flow: row wrap;
	flex-shrink: 0;
}

.main {
	flex: 1;
	overflow: auto;
	align-content: flex-start;
}

.main .panel {
	height: calc(100% - 0.5rem);
	display: flex;
	flex-flow: column;
	gap: 0.25rem;
}

.sts .panel {
	flex-grow: 0;
}

.wide {
	flex: 1 !important;
}

#logContainer {
	flex: 1;
	overflow-y: scroll;
	overflow-wrap: break-word;
	background-color: white;

	pre {
		margin: 0 0.25rem;

		span {
			font-style: italic;
			color: silver;
		}
	}

	pre.ret {
		color: mediumblue;
	}

	pre.err {
		color: red;
		font-weight: bold;
	}

	pre.evt {
		color: green
	}

	pre.sts {
		color: grey;
	}

	pre.cmd {
		color: brown;
	}
}