html {
	font-family: sans-serif;
	font-size: 14pt;
}

h1 > button {
	float: right;
}

.id {
	font-family: monospace;
	font-weight: bold;
	color: #0a1;
	text-wrap: nowrap;
}

.btw {
	font-size: 75%;
	font-style: italic;
}

#halves {
	display: flex;
}

.half {
	border: 1px solid gray;
	background: #ffe;
	flex: 1;
	padding: 6pt;
	margin: 0.5em;
}

.half > header {
	display: flex;
	align-items: center;
	border-bottom: 1px solid gray;
}

.half > header > h3 {
	font-size: inherit;
	font-variant: small-caps;
	flex-grow: 1;
}

.connection-status {
	display: inline-block;
	background: #444;
	border: 2px solid;
	font-size: 24pt;
	width: 1.5em;
	height: 1.5em;
	padding: 0;
	margin: 0;
	text-align: center;
	flex-grow: 0;
	margin-right: 12pt;
	border-color: #333 #ccc #ccc #333;
}

.connected1 {
	color: #0f2;
}

.connected0 {
	color: #fa0;
}

.half-body {
	margin: 0;
	padding: 0.5em;
}

.button-set > button {
	display: block;
	margin: 1em;
	margin-collapse: collapse;
	font-size: 12pt;
	padding: 3pt 1em;
}


.crab-seco-events {
	font-family: monospace;
}