body {
	font-family:		Arial, Helvetica, sans-serif;
	margin:				0px;
	text-align:			left;
	text-decoration :	none;
	overflow:			auto;
}

nav {
	position:			fixed;
	top:				0;
	height:				80px;
	width:				100%;

	z-index:			5;
	border-color:		white;
	border-style:		solid;
	border-width:		1px;
	border-collapse :	separate;
	background-color:	#9c9e9f
}

nav ul {
	list-style-type:	none;
	color:				#9c9e9f;
	font-size:			15px;
	line-height:		1.5;
}

.nav a {
	display:			block;
	color:				white;
	padding:			14px 16px;
	text-decoration:	none;
	background-color:	#9c9e9f
}

.nav li {
	position:			relative;
}

.nav > li { 
	float:				left; 
}

/* submenu positioning*/
.nav ul {
	position:			absolute;
	white-space:		nowrap;
	display:			none;
}

@media (hover: none)
{
	.nav > li.hover > ul, .nav > li li.hover > ul {
		display:			inline-block;
		padding:			0px;
	}
	
	.nav > li.hover > ul {
		min-width:			100%;
	}

	.nav > li li.hover > ul {
		left:				100%;
		top:				 0px;
	}

	.nav li.hover > a { 
		background-color:	#4b4b4d 
	}
}

@media (hover)
{
	.nav > li:hover > ul, .nav > li li:hover > ul {
		display:			inline-block;
		padding:			0px;
	}
	
	.nav > li:hover > ul {
		min-width:			100%;
	}
	
	.nav > li li:hover > ul {
		left:				100%;
		top:				 0px;
	}

	.nav li:hover > a { 
		background-color:	#4b4b4d 
	}
}

#Content {
	margin-top:			100px;
	margin-left:		 50px;
	margin-right:		 50px;
}

#Content > div {
	display:			flex;
	flex-wrap:			wrap;
}

#Content > div > div {
	flex:				1 1 0;
}

table {
	min-width:			300px;
	width:				100%;
	padding-bottom:		 20px;
}

fieldset {
	border-radius:		5px;
}

th {
	padding:			10px;
	color:				white;
	background-color:	#4b4b4d
}

td {
	font-size:			14px;
	height:				21px;
	white-space:		nowrap;
	background-color:	#cfd1d2;
}

input[type="number"] {
	text-align:			right;
	width:				50px;
}

td.output_field {
	text-align:			right;
	min-width:			 50px;
	max-width:			200px;
	padding-left:		 10px;
	padding-right:		 10px;
}

td.output_field_long {
	min-width:			200px;
	padding-left:		10px;
}

td.output_field > img, .centerBox {
	position:			absolute;
	left:				0px;
	top:				0px;
	right:				0px;
	bottom:				0px;
	margin:				auto;
}

td.output_field > select, .input_span > input {
	width:				100%;
}

.input_span {
	display:			flex;
}

.Unit {
	padding-top:		  2px;
	width:		 		 25px;
}

.CheckList {
	border:				2px solid #ccc;
	width:				100px;
	height:				100px;
	overflow-y:			scroll;
}

#EVO_overlay_container {
	position:			fixed;
	display:			block;
	z-index:			999;
	width:				100%;
	height:				100%;
	background-color:	#FFFFFF;
	opacity:			0.9;
	top:				0;
	left:				0;
}

#EVO_overlay_dynamic {
	text-align:			center;
	height:				40px;
	padding:			15px 5px 5px 5px;
	background-color:	#4b4b4d;

	color:				#FFFFFF;
	font-family:		Arial;
	font-weight:		bold;
	font-size:			20px;
	margin-top:			30px;
}

#password_prompt {
	display:			none;
	background: 		white;
	color:				black;
	border:				1px solid black;
	width:				200px;
	height:				100px;
	padding:			16px;
	z-Index:			999;
}

#submitBox {
	float:				right;
	cursor:				pointer;
	height:				60px;
	margin:				10px;
	margin-right:		55px;
}

 /* Tooltip container */
.toolbox {
	position:			relative;
	display:			inline-block;
}

/* Tooltip text */
.tooltip {
	visibility:			hidden;
	position:			absolute;
	top:				-5px;
	left:				125%;  
	width:				150px;
	background-color:	#555;
	color:				#fff;
	text-align:			center;
	padding:			5px 0;
	border-radius:		6px;
	z-index:			1;
	opacity:			0;
	transition:			opacity 1s;
}

/* Tooltip arrow */
.tooltip::after {
	content:			"";
	position:			absolute;
	top:				 25%;
	right:				100%;
	margin-top:			-5px;
	border-width:		5px;
	border-style:		solid;
	border-color:		transparent #555 transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.toolbox:hover .tooltip {
	visibility:			visible;
	opacity:			1;
}

#RemoteDisplay {
	width:				100%;
	height:				550px;
	position:			relative;
}

#RemoteDisplay:focus { outline: none; }

#RemoteDisplay > img {
	z-index:			1;
}

#Overlay > canvas {
	width:				320px;
	height:				160px;
	left:				50px;
	top:				105px;
	position:			absolute;
	z-index:			2;
}

#CtrlPanel {
	display:			flex;
	flex-direction:		column;
	justify-content:	center;
}

#CtrlPanel > img {
	cursor:				pointer;
}

.boardInfoLine
{
	display: flex; 
	justify-content: space-between;
}