html {
	height : 100%;
	padding: 0%;
	margin : 0%;
}

body {
	height : 100%;
	padding: 0%;
	margin : 0.5%;
	font-family: system-ui, sans-serif;
}

canvas {
	background-color: #eee;
}

h1 {
	font-size: 12pt;
}

div.horizontal {
	width : 99%;
	height: 10%;
	border: 1px solid #ccc;
	margin: 0.5%;
}

div.vertical {
	float : left;
	width : 15%;
	height: 85%;
	border: 1px solid #ccc;
	margin: 0.5%;
}

div.controls {
	float : left;
	width : 65%;
	border: 0;
	margin: 0.5%;
}

div.results {
	min-width : 20%;
	float     : left;
	border    : 0;
	margin    : 0.5%;
}

div.overlay-background {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	text-align:center;
	align-items: center;
	justify-content: center;
}

div.overlay {
	background-color: #ffffff;
	width:            400px;
}

div.prepar {
	float: left;
	width: 150px;
}

div.visual {
	float:  left;
	width:  150px;
	height: 60px;
}

table.results {
	border-style  : groove;
	border-spacing: 0px;
	border        : 1px solid black;
}

table.results th, td {
	text-align: right;
	border    : 1px solid black;
}

table.results tr:nth-child(2) {
  background-color: Gainsboro;
}

table.noborder td {
	border       : 0px;
	text-align   : left;
	padding-right: 4px;
}

select.comboselect {
	box-sizing: border-box;
	width     : 65px;
	height    : 1.8em;
	position  : absolute;
	z-index   : 2;
	clip: rect(auto auto auto 48px);
}

input.comboinput {
	box-sizing: border-box;
	width     : 65px;
	height    : 1.8em;
	position  : absolute;
	z-index   : 1; 
}

input.combosizer {
	box-sizing: border-box;
	width     : 65px;
	height    : 1.8em;
	z-index   : 0; 
	border    : 0px;
}