body {
	color:			#0d0c0d;
	background-color:	#eaeaea;
	position:		relative;
	padding:		0px;
	margin:			0px;
	top:			0px;
	left:			0px;
	z-index:		1;
}

a:link, a:visited {
	color:			purple;
}
a:active {
	color:			purple;
}
a:hover {
	color:			green;
}

h2 {
	position:		absolute;
	top:			0px;
	width:			98%;
	padding-right:		5px;
	background-image:	url("/images-v6/title_bar2.png");
	background-repeat:	no-repeat;
	background-position:	center;	
	height:			108px;
	line-height:		108px;
	white-space:		nowrap;
	text-align:		right;
	font-weight:		bolder;
	color:			#706d6e;
	font-size:		30px;
	font-family:		"Abadi MT Condensed Extra Bold","Trebuchet MS",Verdana,Arial,sans-serif;
	font-variant:		small-caps;
	letter-spacing:		2px;
	margin:			0px;
	text-shadow:		2px 2px rgba(128,128,128,0.3);
}

#active_batch {
	position:		absolute;
	top:			84px;
	right:			5px;
	width:			180px;
	text-align:		right;
	border:			solid 2px #c0d0c0;
	font-size:		11px;
	font-weight:		bold;
	color:			#e0f0e0;
	padding:		2px;
	padding-right:		5px;
	margin:			0px;
	background:		#5e5c5d;			/* for browsers that don't support opaque */
	background:		rgba(94,92,93,0.6);		/* for browsers that do */
	z-index:		10;
}	

nav {
	width:			100%;
	padding-top:		100px;
}

#menuhead {
	z-index:		1500;
	top:			0px;
	left:			0px;
	width:			84%;
	margin-left:		8%;
/* for Internet Explorer */
	display:		-ms-flexbox;
	-ms-flex-direction:	row;
        -ms-flex-pack:		justify;
/* for everyone else */
	display:		flex;
	justify-content:	space-between;
}

.menuitem {
	vertical-align:		top;
	display:		inline-block;
	text-align:		center;
	width:			50px;
	font-size:		12px;
	font-weight:		bold;
	margin:			10px;
	letter-spacing:		0.5px;
}

.menuimage {
	width:			45px;
	padding:		2px;
}	

.menucaption {
	display:		block;
	font-family:		enso,Verdana,Arial;
}


/* rescale the toolbar for different size screens */
@media screen and (min-width: 1251px) {
	.menuimage {
		width:			45px;
		padding:		2px;
	}	
	.menuitem {
		width:			50px;
		font-size:		12px;
		font-weight:		bold;
		margin:			10px;
	}
}

@media screen and (max-width: 1250px) {
	.menuimage {
		width:			37px;
		padding:		2px;
	}	
	.menuitem {
		width:			50px;
		font-size:		11px;
		font-weight:		bold;
		margin:			10px;
	}
	h2 {
		background-size:	90%;
	}
}

@media screen and (max-width: 1000px) {
	.menuimage {
		width:		35px;
		padding:	2px;
	}	
	.menuitem {
		width:		40px;
		font-size:	10px;
		font-weight:	bold;
		margin:		10px;
	}
}

@media screen and (max-width: 940px) {
	.menuimage {
		width:		25px;
		padding:	1px;
	}	
	.menuitem {
		width:		30px;
		font-size:	8px;
		font-weight:	bold;
		margin:		8px;
	}
}

/* for very small screens, change to horizontal menu options */
@media screen and (max-width: 520px) {
 	#menuhead {
		width:		200px;
		margin-left:	0px;
		display:	block;
		
	}
	.menuitem {
		width: 		100%;
		margin: 	3px;
		text-align: 	center;
		vertical-align: middle;
		font-size:	13px;
	}
	.menuimage {
		width: 20px;
	}
	.nav {
		padding-top:	15%;
	}
	#active_batch {
		display:	none;
	}
	.menustyle {
		left: 30px;
		top: unset;
	}
}
/* very small screens - hide the menu text and the active batch 
@media screen and (max-width: 320px) {
	.menuimage {
		width:		90%;
		padding:	1px;
		border:		1px solid olive;
	}	
	.menuimage:hover {
		width:		100%;	
	}
	nav {
		padding-top:	15%;
	}
	.menuitem {
		margin:		4px;
		white-space:	nowrap;
		overflow:	hidden;
		color: 		transparent;
	}
	#active_batch {
		position:	absolute;
		visibility:	hidden;
		display:	none;
	}
}
*/


h3 {
	text-align:		center;
	color:			#3c6b01;
	font-size:		17px;
	padding-top:		1em;
	letter-spacing:		0.2px;
	font-family:		enso,"Abadi MT Condensed Extra Bold","Trebuchet MS","Arial Black",Gadget,Verdana,Arial,sans-serif;
	font-weight:		normal;
}

input, select {
	font-family:		Geneva,Verdana,"Century Gothic",sans-serif;
	font-size:		10px;
}

input[type=submit], input[type=button], input[type=reset] {
	padding:		5px 10px;
	border-radius:		5px;
	-webkit-border-radius:	5px;
	background-color:	#cddacb;
	cursor:			pointer;
	margin-top:		5px;
	margin-bottom:		5px;
}

input[type=text], input[type=password], input[type=search] {
	border:		1px solid #bbb;
	border-radius:	3px;
	padding:	4px 3px;
	margin:		1px 2px;
	text-align:	center;
}
input[type=number] {
	border:		1px solid #bbb;
	border-radius:	3px;
	padding:	4px 3px;
	margin:		1px 2px;
	text-align:	center;
}

table.results {
	font-size:		11px;
	margin:			25px auto;
	padding:		10px;
	border:			1px solid #eee;
	box-shadow:		0px 0px 20px rgba(0,0,0,0.10);
}

table.results tr:hover {
	background:		#cdc;
}

th {
	font-weight:		bold;
	color:			#5a7d2d;
	font-size:		11px;
}	

td {
	font-size:		11px;
}

table.results thead th {
        position:               -webkit-sticky;
        position:               sticky;
        top:                    0px;
        padding:		6px 10px;
        background:             #366910e3;
        color:                  white;
        box-shadow:             0 2px 2px -1px rgba(0,0,0,0.4);
	z-index:		5;
}
table.results td {
	padding:		6px 10px;
}

b, .labels {
	font-weight:		bold;
	color:			#5a7d2d;
}

i {
	font-weight:		bold;
}

.success {
	color:			#528e04;
	font-weight:		bold;
}

.error {
	color:			#8e0407;
	font-weight:		bold;
}


.centered {
	position:		relative;
	text-align:		left;
	width:			50%;
	left:			25%;
}

.menustyle {
	z-index:		500;
	font-size:		13px;
	font-family:		enso,"Comic Sans MS",sans-serif;
}

.menutitle {
	color:			#70606d;
}

	

#menu0, #menu1, #menu2, #menu3, #menu4, #menu5, #menu6, #menu7, #menu8, #menu9, #menu10, #menu11, #menu12, #menu13, #menu14, #menu15 {
	position:		absolute;
	visibility:		hidden;
	min-width:		215px;
	width:			max-content;
	left:			0px;
	padding:		5px 8px;
	line-height:		2.5;
	z-index:		900;
	background-color:	#c4dca0;			/* for browsers that don't support opaque */
	background-color:	rgba(196,220,160,0.95);		/* for browsers that do */
	border:			4px solid #5ea701;
	border-radius:		12px;
	-webkit-border-radius:	12px;
	letter-spacing:		0px;
	box-shadow:		0px 8px 16px 0px rgba(0,0,0,0.5);
	text-align:		left;
}


a.menulink:link, a.menulink:visited {
	color:			#343730;
	font-weight:		bold;
	text-decoration:	none;
	padding:		3px;
	padding-left:		4px;
	padding-right:		4px;
	margin:			0px;
	letter-spacing:		0.1px;
}

a.menulink:hover {
	color:			#9cd945;
	background-color:	#343730;
	font-weight:		bold;
	text-decoration:	none;
	padding:		0px;
	border:			3px solid #343730;
	border-radius:		4px;
	-webkit-border-radius:	4px;
	border-left-width:	4px;
	border-right-width:	4px;
	letter-spacing:		0.1px;
}

a.menulink:active {
	color:			#343730;
	background-color:	#9cd945;
	text-decoration:	italic;
	font-weight:		bold;
	padding:		3px;
	padding-left:		4px;
	padding-right:		4px;
	margin:			0px;
	letter-spacing:		0.1px;
}

a.info:link, a.info:visited, a.info:active, a.info:hover {
	text-decoration:	none;
	color:			#108E10;
	border-width:		1px;
	border-color:		#108E10;
	border-bottom-style:	dashed;
}
	
#flipanchor1, #flipanchor2, #flipanchor3, #flipanchor4,#flipanchor5 {
	visibility:		hidden;
	position:		relative;
	min-height:		2rem;
	width:			100%;
}

#flip0, #flip1, #flip2, #flip3, #flip4, #flip5, #flip6, #flip7, #flip8, #flip9, #flip10, #flip11, #flip12, #flip13, #flip14, #flip15, #flip16, #flip17, #flip18, #flip19, #flip20 {
	visibility:		hidden;
	position:		absolute;
	top:			0;
	left:			0;
	display:		inline-flex;
	align-items:		center;
	flex-wrap:		wrap;
	line-height:		2rem;
}

#axle_front {
	visibility:		visible;
	position:		relative;
	overflow:		hidden;
	width:			160px;
	height:			120px;
}

#faultpopup {
	visibility:		hidden;
	position:		fixed;
	z-index:		50;
	top:			15%;
	left:			30%;
	margin:			0px;
	background-color:	#cce2ff;
	padding:		2px;
	border:			outset 3px #67b1b9;
}


table.tiny {
	font-size:		8px;
	font-family:		sans-serif;
}

td.tiny {
	font-size:		60%;
	font-family:		sans-serif;
}

.noprint {
	visibility:		visible;
}

td.total_box {
	border-top:		solid 1px #639662;
	background-color:	rgba(106,147,53,0.25);
}

.graph {
	border:			dotted 1px #9ac360;
	border-radius:		5px;
	-webkit-border-radius:	5px;
	padding:		2px;
	margin:			6px;
	margin-top:		15px;
}

ul {
	margin-top:		2px;
	padding-left:		14px;
}
	
th.vehicle_front {
	background-image:	url("/images/vehicle_axle_front.png");
	background-repeat:	no-repeat;
	background-position:	right center;
}


td.vehicle_middle {
	background-image:	url("/images/vehicle_axle_bar.png");
	background-repeat:	repeat-x;
	background-position:	left center;
}

#bodybox {
	
}

#float_left {
	width:			50%;
	float:			left;
}

#float_right {
	width:			50%;
	float:			right;
}

#lookup_branding_frame {
	position:		fixed;
	visibility:		hidden;
	top:			40%;
	left:			45%;
	width:			10vw;
	height:			10vh;
	padding:		9px;	
 	z-index:		35;
}

#vehicle_layout_frame {
	position:		fixed;
	visibility:		hidden;
	top:			110px;
	height:			80vh;		/* will resize */
	left:			5%;
	width:			90vw;
	padding:		9px;
 	z-index:		35;
}

#supplier_frame {
	position:		fixed;
	visibility:		hidden;
	top:			110px;
	height:			80vh;		/* will resize */
	left:			20%;
	width:			60vw;
	padding:		9px;
 	z-index:		35;
}

#email_frame {
	position:		fixed;
	visibility:		hidden;
	top:			110px;
	height:			80vh;
	width:			50vw;
	padding:		9px;
 	z-index:		35;
	margin:			auto;
}

#gps_frame {
	box-shadow:		none;
	padding:		9px;
	border:			none;
 	z-index:		35;
}

#left_frame {
	box-shadow:		none;
	padding:		9px;
	border:			none;
 	z-index:		35;
}

#right_frame {
	box-shadow:		none;
	padding:		9px;
	border:			none;
 	z-index:		40;
}

/* general iframe to modify all entries in the new format */
#modify_frame {
	position:		fixed;
	visibility:		hidden;
	top:			110px;
	height:			80vh;		/* will resize */
	left:			100%;		/* will start off screen */
	width:			80vw;		/* will resize */
	padding:		9px;
 	z-index:		35;
}

iframe {
	border:			1px #f3f3f3 solid;
	border-radius:		10px;
	-webkit-border-radius:	10px;
	box-shadow:		0px 0px 30px 4px rgba(60,97,33,0.53);
}

/* close X button -- to close off these frames */
#close_button {
	position:		absolute;
	top:			-3px;
	right:			-3px;
}

svg.close_button {
    cursor: pointer;
}
svg.close_button circle {
    stroke: #577f1ead;
    fill: #ffffff87;
}
svg.close_button path {
    stroke: #235601;
}
svg.close_button:hover circle {
    fill: #7ab553;
}
svg.close_button:hover path {
    stroke: white;
}
/* -- END of CLOSE button */

#greyout {
	opacity: 0.6;			/*normal browsers*/
	filter: alpha(opacity = 60);	/*MSIE*/
}

.rotate {
	font-size: 90%%;
	position: relative;
	-moz-transform: rotate(-90.0deg);  	/* FF3.5+ */
	-o-transform: rotate(-90.0deg);  	/* Opera 10.5 */
	-webkit-transform: rotate(-90.0deg);	/* Saf3.1+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  	/* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";	/* IE8 */
}

/* check-digits for brand numbers */
.brand_chk {
	width:	2em;
	font-weight: bolder;
}

/* clear input text boxes -- because ios seems to change them */
.clear_text {
	border: 1px green solid;
	border-radius: 1px;
	text-align: center;
	margin: 0 2px;
	font-weight: bolder;
}

/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted darkgreen; /* If you want dots under the hoverable text */
  cursor: help;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: max-content;
  max-width: 26vw;
  background-color: #c3c6dae8;
  color: #2b4175;
  text-align: center;
  padding: 1em;
  border-radius: 6px;
  box-shadow: -2px -2px 5px;
  border: 1px solid #666;
  text-overflow: ellipsis;
  font-size: clamp(0.5rem, -0.875rem + 8.333vw, 0.8rem);
  font-weight: 200;
  /* Position the tooltip text */
  position: absolute;
  z-index: 50;
  bottom: 125%;
  transform: translateX(-50%);
  left: 50%;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.7s;

}

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

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

/* change the report menu to 5 columns -- because you can't scroll with the toolbar jumping around */
.report_menu {
  --numCols: 5;
  --colWidth: 200px;
  column-count: var(--numCols);
  column-width: var(--colWidth);
}
.report_head {
  column-span: all;
}
.report_head .contents {
 column-count: var(--numCols);
 column-width: var(--colWidth);
 border: 1px dotted #0000004a;
 border-radius: 5px;
}
@media screen and (max-width: 1200px) {
	.report_head {
	 transition: height 1s;
	 transition-timing-function: ease-in-out;
	}
	.report_head .contents {
	 overflow: hidden;
	 height: 0px;
	}
	.report_head.active > b {
	 background-color: #006400ab;
	 color: #02df02;
	 border-radius: 2px;
	}
	.report_head.active > .contents {
	 height: max-content;
	}
}
.report_head > b {
 font-weight: bolder;
 padding: 5px 1em; 
 color: #015401;
 text-align: center;
}