/* 2025-07-06 adicionado formatacao formulario para elevacao */


html{
	/*font-family: helvetica, arial, sans-serif;*/
	font-family: Montserrat, Helvetica, arial, sans-serif;
	line height: 1.0;
	font-size: 16px;
	scroll-behavior: smooth;
	}

/*for Google Fonts*/
@font-face {
  font-family: Montserrat;
	src: url(fonts/Montserrat-Regular.ttf);
	/*src: url(fonts/Montserrat-SemiBold.ttf);*/
	/*src: url(fonts/Montserrat-Light.ttf);*/
	/*src: url(fonts/Montserrat-ExtraLight.ttf);*/
  	/*src: url(fonts/Montserrat-Thin.ttf);*/
	}

@font-face {
  font-family: Montserrat-SemiBold;
	src: url(fonts/Montserrat-SemiBold.ttf);
	}


@font-face {
  font-family: alarmclock;
	src: url(fonts/alarm_clock.ttf);
	}


@font-face {
  font-family: alarmclock;
	src: url(fonts/alarm_clock.ttf);
	}




/*src: url(Audiowide-Regular.ttf);*/
	/*src: url(fonts/Montserrat-Regular.ttf);*/
	/*src: url(fonts/Montserrat-Light.ttf);*/
	/*src: url(fonts/Montserrat-ExtraLight.ttf);*/




@media screen and (min-width: 360px){
	html{
		font-size:8px
	}
}


/*new 2025-04-01*/
@media screen and (min-width: 450px){
	html{
		font-size:9px
	}
}


@media screen and (min-width: 600px){
	html{
		font-size:11px
	}
}


/*New 2025-04-018*/
@media screen and (min-width: 700px){
	html{
		font-size:12px
	}
}



@media screen and (min-width: 900px){
	html{
		font-size:14px
	}
}

@media screen and (min-width: 1500px){
	html{
		font-size:16px
	}
}

@media screen and (min-width: 1900px){
	html{
		font-size:22px
	}
}

/*New 2025-04-01*/
@media screen and (min-width: 2100px){
	html{
		font-size:24px
	}
}

@media screen and (min-width: 2400px){
	html{
		font-size:28px
	}
}

/*New 2025-04-01*/
@media screen and (min-width: 3000px){
	html{
		font-size:32px
	}
}


body {
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	/*background-color: #ace600;*/
	background-color: #e6e6e6;
	font-family: Montserrat, Helvetica, arial, sans-serif;
	color: #484848;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	/*background-size: cover;*/
	box-sizing: border-box; /*DIV size is fixed and not add margin and padding to total width*/
		overflow: auto; /*added 2025-03-29 for preventing modal scrolling in JS*/
	/*overflow: auto;*/
	}


/*format header div*/
#headerrow{
	width: 100%;
	height: 5rem;
	background-color: #213300;
	/*position: fixed;*/
	top: 0;
	padding: 0.2rem;
	float: left;
	text-align:center;
	vertical-align:middle;
	border-style: solid;
	border-color: #BFFA50;
	border-width: 0px 0px 0px 0px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
	z-index: +6;
		/*pointer-events: none;*/ /*stops cursor hover or click*/
	}


/*format div for logo in upper left corner */
#logobox{
	background-color: inherit;
	height:100%;
	width: 28%;
	padding: 8px;
	padding-left: 30px;
	float: left;
	margin-left: 0px;
		display: flex;
		/*justify-content: center;*/
			justify-content: left;
		align-items: center;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box;
	}


/*adjust logo size to fit div*/
#logo{
		height: 2rem;
	/*width:60%;*/
		width: auto;
	background-color: inherit;
	float: left;
	text-align:center;
	/*max-height: 90%;*/
	}

/*adjust logo size to fit div*/
#headerimage{
	height: auto;
	width: auto;
	background-color: inherit;
	max-height: 94%;
	border-radius: 4px;
	}


#menu{
	border-radius: 0px;
	background-color: inherit;
	height: 100%;
	width: 10%;
	float: left;
	text-align:center;
		display: flex;
		justify-content: center;
		align-items: center;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
		overflow: hidden;
	}


#menuwide{
	border: 0px solid white;
	border-radius: 0px;
	background-color: inherit;
	height: 100%;
	width: 48%;
	float: left;
	text-align:left;
	color: #f8f8f8;
	font-size: 2rem;
	font-family: Arial, sans-serif;
	text-align:center;
		display: flex;
		justify-content: center;
		align-items: center;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
		overflow: hidden;
	}



/* added 2022-12-31 */
#menu20{
	border-radius: 0px;
	background-color: inherit;
	height: 100%;
	width: 24%;
	float: left;
	padding: 2px;
	text-align:center;
		display: flex;
		justify-content: center;
		align-items: center;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* 0px top, 2px right, 0px bottom and 0px left */
	box-sizing: border-box; 
		/*overflow: hidden;*/
	}


#herobucketintro{
	width: 100%;
	height: 6rem;
	min-height: 150px;
	margin-left: 0%;
	margin-right: 0%;
	margin-top: 6rem;
		padding-left: 6%;
		padding-right: 6%;
		padding-top: 50px;
		padding-bottom: 50px;
	background-color: #e0e0e0;
		background-image: url("campomilho.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	/*background-color: inherit;*/
	opacity: 1.0;
	float: left;
	text-align:center;
	color: #F9FAFC;
	box-sizing: border-box; 
	display: flex;
		pointer-events: none; /*to try prevent button not hover certain screen sizes, 2026-01-18 */
	}


#bucket1{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	background-color: inherit;
	opacity: 1;
	float: left;
	text-align:center;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	display: flex;
	}

.bucket1{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	background-color: inherit;
	opacity: 1;
	float: left;
	text-align:center;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	display: flex;
	}

#bucket2{
	width: 100%;
	height: auto;
	min-height: 50px;
	margin-top: 3rem;
	margin-bottom: 0px;
	padding: 30px;
	background-color: inherit;
	opacity: 1;
	float: left;
	text-align:left;
	color: #404040;
	font-size: 1rem;
	font-family: Montserrat, Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}

#bucket3{
	width: 100%;
	height: auto;
	min-height: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	background-color: inherit;
	float: left;
	text-align:left;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}


#bucket4{
	width: 100%;
	height: auto;
	min-height: 300px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 20px;
	background-color: inherit;
	opacity: 1;
	float: left;
	text-align:left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 1px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}

.bucket5{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 30px;px;
	background-color: inherit;
	opacity: 1;
	float: left;
	text-align:center;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		/*justify-content: center;*/
		/*align-items: center;*/
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	
	}

#bucketphotos{
	width: 90%;
	height: auto;
	min-height: 50px;
	margin-left: 5%;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	padding: 30px;
	background-color: inherit;
	opacity: 1;
	float: left;
	box-sizing: border-box; 
	}


.bucketdrops{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 3%;
	background-color: inherit;
	float: left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}


.holdgraphs{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 3%;
	background-color: #a8a8a8;
	float: left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	display: flex;
	}

.holdonegraph{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 2rem;
	/*padding-right: 3%;*/
	background-color: #a8a8a8;
	float: left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box;
	overflow-x: scroll; 
	}



/* hide canvas that have images for printing */

#canvas20x{
	display: none;
	margin: auto;
	}

/*
#canvas15b{
	display: none;
	margin: auto;
	}
*/


/* for flow line graph canvas image */
#canvasImage20{
		display: block;
		width: 100%;
		min-width: 100px;
		height: auto;
		min-height: 100px;
		margin: auto;
		border-style: solid;
		border-color: grey;
		border-width: 2px 2px 2px 2px;
 		}

/* for profit loss bar graph canvas image */
#canvasImage5{
		display: block;
		width: 100%;
		min-width: 100px;
		height: auto;
		min-height: 100px;
		margin: auto;
		border-style: solid;
		border-color: grey;
		border-width: 2px 2px 2px 2px;
 		}



/* for depreciation pie chart 1 */


/* generic class for all canvas images to print.  Add id to each one */
.canvasimage{
		width: auto;
		height: auto;
		margin: auto;
		}



/* canvas background color div */
.flowgraph{
	width: 70%;
	height: auto;
	padding: 5px;
	margin: auto;
	background-color: #ffffff;
	}

.bargraph{
	width: 70%;
	height: auto;
	padding: 5px;
	margin: auto;
	background-color: #ffffff;
	}


.canvascomment{
	width: auto;
	height: auto;
	margin-top: 5px;
	margin-bottom: 0px;
	padding: 10px;
	background-color: inherit;
	/*float: left;*/
	color: black;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}

/*
.spacer{
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	height: 15px;
	background-color: inherit;
	}
*/


.spacer{
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	margin-bottom: 0px;
	margin-top: 40px;
	height: auto;
	min-height: 15px;
	padding: 8px;
	text-align:center;
	color: #f8f8f8;
	font-size: 1.3rem;
	font-weight: bold;
	font-family: Montserrat, Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	background-color: #213300;
	box-sizing: border-box;
	}


.introduction{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 30px;
	padding-left: 90px;
	/*background-color: #f5f5f5;*/
	/*background-color: #ebffb3;*/
	background-color: #d6f5e8;
	float: left;
	text-align:left;
	color: #404040;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}


#cambioheader{
	border-radius: 8px;
	background-color: #f8f8f8;
	height: auto;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	padding: 10px;
	padding-left: 40px;
	padding-right: 40px;
	float: left;
	text-align:left;
	color: #383838;
	font-size: 1.3rem;
	font-family: Montserrat, Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box; 
	}

.photoup{
	width: 25%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 1rem;
	padding-bottom: 6rem;
	background-color: inherit;
	float: left;
	box-sizing: border-box; 
	}

.photodown{
	width: 25%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 1rem;
	padding-top: 6rem;
	background-color: inherit;
	float: left;
	box-sizing: border-box; 
	}



#instructions{
	width: 100%;
	height: auto;
	min-height: 50px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 90px;
	background-color: #f8f8f8;
	opacity: 1;
	float: left;
	text-align:left;
	line-height: 1.5;
	color: #101010;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}


.holdform{
	width: 50%;
	height: auto;
	min-height: 100px;
		margin: auto;
	padding: 30px;
	background-color: inherit;
	float: left;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}


.holdcalculator{
	width: 40%;
	height: auto;
	min-height: 100px;
	margin: auto;
	padding: 30px;
	background-color: inherit;
	float: left;
		display: flex;
		justify-content: center;
		align-items: center;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}


.results{
	width: 50%;
	height: auto;
	min-height: 50px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 10px;
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: inherit;
	opacity: 1;
	float: left;
	text-align:left;
	line-height: 1.5;
	color: #101010;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
		/*display: flex;*/
		/*justify-content: center;*/
		/*align-items: center;*/
	}

.results2{
	width: 60%;
	height: auto;
	min-height: 50px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 10px;
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: inherit;
	opacity: 1;
	float: left;
	text-align:left;
	line-height: 1.5;
	color: #101010;
	font-size: 1.2rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
		/*display: flex;*/
		/*justify-content: center;*/
		/*align-items: center;*/
	}


#holdtable{
	width: 100%;
	height: auto;
	float: left;
	margin: auto;
	}


.holdpie1{
	width: 50%;
	/*height: 22rem;*/
	height: auto;
	min-height: 50px;
	background-color: inherit;
	float: left;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	box-sizing: border-box;
	}


.holdpie2{
	width: 50%;
	//height: 22rem;
	height: auto;
	min-height: 50px;
	background-color: inherit;
	float: left;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	box-sizing: border-box;
	}

.canvasbackground{
	width: auto;
	height: auto;
	max-width: 98%;
	/*aspect-ratio: 4 / 2;*/  
	padding: 10px;
	margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	background-color: #f8f8f8;
	border-radius: 6px;
	}

/*to resize barchart via JS*/
#canvas15b{
	width: 1200px;
	/*height: 800px;*/
	aspect-ratio: 1 / 1; /*keep aspect ratio*/
	display: block;
	}


.holddisplay{
	width: 100%;
	height: auto;
	min-height: 50px;
	background-color: inherit;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	box-sizing: border-box;
	}


.display{
	width: auto;
	height: auto;
	min-height: 50px;
	margin: auto;
	padding: 10px;
	padding-left: 40px;
	padding-right: 40px;
	background-color: #101010;
	opacity: 1;
	float: left;
	text-align:center;
	color: #FFFFFF;
	font-size: 3rem;
	font-family: Arial, sans-serif;
	border-radius: 10px;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
		display: flex;
		justify-content: center;
		align-items: center;
	}



.column1{
	background-color: #33cc33;
	margin-bottom: 0px;
	padding: 0px;
	box-sizing: border-box;
	opacity: 0.8;
	display: block;
	position: relative;
		border-style: solid;
		border-color: #000000;
		border-width: 7px 0px 0px 0px; /* top, right, bottom, left */
	}

.column2{
	background-color: #47d147;
	float: left;
	margin-top: 0px;
	box-sizing: border-box;
	opacity: 0.65;
	position: relative;
	display: block;
		border-style: solid;
		border-color: #000000;
		border-width: 0px 0px 7px 0px; /* top, right, bottom, left */
	}

.columnmargin{
	margin-top: 0px;
	float: left;
	height: 0px;
	background-color: blue;
	opacity: 0.5;
	box-sizing: border-box;
	display: block;
	}

.tractor{
	width: 100%;
	height: 5px;
	background-color: #000000;
	float: left;
	margin-top: 0px;
	box-sizing: border-box;
	opacity: 1;
	}



.dataform{
	width: 100%;
	height: auto;
	min-height: 60%;
	background-color: #f5f5f5;
		padding: 10px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	float: left;
	font-size: 1rem;
	font-family: arial, sans-serif;
	color: #333b12;
	text-align: center;
	vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
	border-style: solid;
	border-radius: 6px;
	border-color: grey;
	border-width: 2px 2px 2px 2px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
	}

/* without flex for simulator */
.dataform2{
	width: 100%;
	height: 62%;
	background-color: #696969;
	padding: 10px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	float: left;
	font-size: 1rem;
	font-family: arial, sans-serif;
	color: #333b12;
	text-align: center;
	vertical-align: middle;
	border-style: solid;
	border-radius: 12px;
	border-color: #696969;
	border-width: 2px 2px 2px 2px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
		overflow: auto;
	}

/* without flex for simulator */
.dataform3{
	width: 100%;
	height: auto;
	/*background-color: #696969;*/
	background-color: #f5f5f5;
	padding: 10px;
	margin-top: 20px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	float: left;
	font-size: 1rem;
	font-family: arial, sans-serif;
	color: #333b12;
	text-align: center;
	vertical-align: middle;
	border-style: solid;
	border-radius: 12px;
	border-color: #696969;
	border-width: 2px 2px 2px 2px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
	}





.formfield{
	width: 6rem;
	font-size: 1rem;
	font-family: arial, sans-serif;
	color: #333b12;
	border-radius: 4px;
	border-color: grey;
	}

.formfield2{
	width: 3rem;
	font-size: 0.9rem;
	font-family: arial, sans-serif;
	color: #333b12;
	border-radius: 4px;
	border-color: grey;
	}

.formfield3{
	width: 5rem;
	font-size: 0.9rem;
	font-family: arial, sans-serif;
	color: #333b12;
	border-radius: 4px;
	border-color: grey;
	}

.formquery{
	width: 6rem;
	background-color: #b3ffe6;
	font-size: 1.2rem;
	font-family: arial, sans-serif;
	color: #333b12;
	border-radius: 4px;
	border-color: grey;
	}


.namefield{
	width: 12rem;
	font-size: 1rem;
	font-family: arial, sans-serif;
	color: #333b12;
	border-radius: 4px;
	border-color: grey;
	}


.dataTable{
	/*float: left;*/
	font-size: 1rem;
	font-family: arial, sans-serif;
	color: #333b12;
	padding: 5px;
	}

.dataTable2{
	/*float: left;*/
	font-size: 1rem;
	font-family: arial, sans-serif;
	/*color: #333b12;*/
	color: #ffffff;
	}


.resultTable{
	margin: auto;
	font-size: 0.8rem;
	font-family: arial, sans-serif;
	color: #333b12;
	box-sizing: border-box;
	}

.infoTable{
	font-size: 0.8rem;
	font-family: arial, sans-serif;
	color: inherit;
	border: 1px solid #404040;
	border-collapse: collapse;
	box-sizing: border-box;
	}

#tdinfo{
	border: 1px solid #404040;
	background-color: #e6e6e6;
	padding: 6px;
	text-align: center;
	}

/* *************************** Animation simulator styling ************************* */

/*animation*/
#field{
	width: 86%;
	height: 86%;
	background-color: inherit;
	padding: 0px;
	border-style: solid;
	border-radius: 0px;
	border-color: white;
	border-width: 2px 2px 2px 2px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: row;
	}

.holdfield{
	width: 100%;
	height: 100%;
	padding: 0px;
	/*background-color: inherit;*/
	background-image: url("/images/field1.jpg");
		background-size: cover;
	margin: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box;
	}

/*adjust button image size*/
.fieldbutton{
	height: 2.2rem;
	width: 2.2rem;
	padding: 0;
	margin: auto;
	margin-top: 3px;
	margin-bottom: 6px;
	border-style: solid;
	border-radius: 2px;
	border-color: white;
	border-width: 2px 2px 2px 2px; /* 0px top, 4px right, 0px bottom and 0px left */
	}

.buttonimage{
	height: 100%;
	width: 100%;
	margin: 0;
	box-shadow: 2px 2px  3px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	}







/* ***************************** Tractor simulator formating ****************************/

.simulator{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #404040;
	/*background-color: #ff9900;*/
	float: left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		overflow: auto;
	box-sizing: border-box; 
	}

.top{
	width: 100%;
	height: 2%;
	padding: 2px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}

.holdcenter{
	width: 40%;
	height:98%;
	float: left;
	background-color: inherit;
	box-sizing: border-box; 
	}
		

.left{
	width: 30%;
	height: 98%;
	padding: 20px;
	padding-top: 0px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}

.center{
	width: 100%;
	height: 65%;
	padding: 0px;
	margin: 0px;
	background-color: #404040;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}

.right{
	width: 30%;
	height: 98%;
	padding: 0px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}
		
.bottom{
	width: 100%;
	height: 33%;
	padding: 0px;
	margin: 0px;
	margin-top: 3%;
	background-color: #303030;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-radius: 12px;
	box-sizing: border-box; 
	}

.instrumentL{
	width: 50%;
	height: 100%;
	padding: 10px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	border-radius: 12px;
	box-sizing: border-box; 
	}


.instrumentR{
	width: 50%;
	height: 100%;
	padding: 10px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	border-radius: 12px;
	box-sizing: border-box; 
	}

.digital1{
	width: 10rem;
	height: auto;
	padding: 5px;
	padding-bottom: 10px;
	margin: auto;
	margin-bottom: 10px;
	background-color: inherit;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	border-radius: 0px;
	box-sizing: border-box; 
	}




.controls1{
	width: 100%;
	height: 60%;
	padding: 30px;
	padding-top: 0px;
	margin: 0px;
	background-color: #404040;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}

.panel{
	width: auto;
	height: 95%;
	padding: 10px;
	margin: auto;
	background-color: black;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: #696969;
	border-width: 2px 2px 2px 2px; /* top, right, bottom, left */
	border-radius: 12px;
	box-sizing: border-box; 
	overflow: auto;
	}

.paneltitle{
	width: 100%;
	height: auto;
	padding: 4px;
	padding-top: 2px;
	margin: 0%;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 0.7rem;
	font-family: Arial, sans-serif;
	text-align:center;
	border-radius: inherit;
	box-sizing: border-box; 
	}


.panel2{
	width: 90%;
	height: 90%;
	padding: 10px;
	margin: 5%;
	margin-top: 5px;
	background-color: #696969;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: #696969;
	border-width: 2px 2px 2px 2px; /* top, right, bottom, left */
	border-radius: 12px;
	box-sizing: border-box; 
	overflow: auto;
	}

.controls2{
	width: 100%;
	height: 40%;
	padding: 10px;
	padding-top:2px;
	margin: 0px;
	background-color: #404040;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}

.throtle{
	width: 30%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		


	box-sizing: border-box; 
	}


.throtle2{
	width: 20%;
	height: 100%;
	padding: 6px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box; 
	}


.displays{
	width: 100%;
	height: auto;
	padding: 0px;
	margin-top: 4px;
	margin-bottom: 4px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		/*justify-content: center;*/
		/*align-items: center;*/
	box-sizing: border-box; 
	}


.displaycenter{
	width: 100%;
	height: auto;
	padding: 0px;
	margin: 3px;
	margin-top: 10px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box; 
	}


.digital2{
	/*width: auto;*/
	width: 32%;
	height: auto;
	padding: 2px;
	padding-left:8px;
	padding-right: 8px;
	margin-left: 2%;
	background-color: #b3ffb3;
	float: left;
	color: #383838;
	font-size: 0.8rem;
	font-family: alarmclock, Arial, sans-serif;
		display: flex;
		justify-content: left;
		align-items: center;		
	border-style: solid;
	border-color: black;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	border-radius: 4px;
	box-sizing: border-box; 
	}

#hectarimetro{
	/*width: auto;*/
	width: 58%;
	height: auto;
	padding: 5px;
	padding-left:10px;
	padding-right: 10px;
	margin: auto;
	margin-left: 2%;
	background-color: #b3ffb3;
	float: left;
	color: #383838;
	font-size: 2.2rem;
	font-family: alarmclock, Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;		
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	border-radius: 4px;
	box-sizing: border-box; 
	}

.digitalspace{
	width: 30%;
	height: auto;
	padding: 2px;
	padding-left:5px;
	padding-right: 5px;
	margin-left: 2%;
	background-color: inherit;
	float: left;
	color: #ffffff;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: left;
		align-items: center;		
	box-sizing: border-box; 
	}


.digital{
	width: auto;
	min-width: 4rem;
	height: auto;
	padding: 2px;
	padding-left:5px;
	padding-right: 5px;
	margin-left: 2%;
	background-color: #b3ffb3;
	float: left;
	color: #484848;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: left;
		align-items: center;		
	border-style: solid;
	border-color: black;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	border-radius: 4px;
	box-sizing: border-box; 
	}

.digital3{
	width: auto;
	min-width: 65%;
	height: auto;
	padding: 3px;
	padding-left:10px;
	padding-right: 10px;
	margin: auto;
	background-color: #b3ffb3;
	float: left;
	color: #484848;
	font-size: 1.4rem;
	font-family: alarmclock, Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;		
	border-style: solid;
	border-color: white;
	border-width: 2px 2px 2px 2px; /* top, right, bottom, left */
	border-radius: 4px;
	box-sizing: border-box; 
	}


.digital4{
	/*width: auto;*/
	width: 50%;
	height: auto;
	padding: 3px;
	padding-left:10px;
	padding-right: 8px;
	margin-left: 2%;
	background-color: #b3ffb3;
	float: left;
	color: #383838;
	font-size: 1.1rem;
	font-family: alarmclock, Arial, sans-serif;
		display: flex;
		justify-content: left;
		align-items: center;		
	border-style: solid;
	border-color: black;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	border-radius: 4px;
	box-sizing: border-box; 
	}

.digitaltitle{
	width: 36%;
	height: auto;
	padding: 2px;
	padding-left:5px;
	padding-right: 12px;
	margin-left:0%;
	background-color: inherit;
	float: left;
	color: #ffffff;
	font-size: 0.7rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: right;
		align-items: center;	
	box-sizing: border-box; 
	}



/* ************************ Throtle slider styling ******************** */

/*

.slider{
	-webkit-appearance: none;
	width: 1.2rem;
	height: 80%;
	margin-left: 1rem;
	border-radius: 0.6rem;
	border-style: solid;
	border-color: c0c0c0;
	border-width: 2px 2px 2px 2px; 
	background: #585858;
	outline: 2px;
	opacity: 1;
		writing-mode: vertical-lr;
	}



.slider.hover{
	opacity: 0.8;
	}


.slider::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: 3.4rem;
	height: 1.6rem;
	border-radius: 0.8rem;
	background: #ff8c1a;
	cursor: pointer;
		box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	}
*/

input[type=range]{
	-webkit-appearance: none;
	}


/* -------------------------------------- generic range ------------------------------ */

/* vertical slider throtle */

input[type="range"] {
	writing-mode: vertical-lr;
	}


input[type=range]{
		-webkit-appearance: none;
			appearance: none;
		width: 1.2rem;
		height: 96%;
		margin: 2%;
		border-radius: 0.6rem;
		border-style: solid;
		border-color: f5f5f5; /* silver */
		border-width: 2px 2px 2px 2px; 
		background: #f0f0f0;	/* light grey */
		opacity: 1;
		writing-mode: vertical-lr;
		}

/* ---------------------------------- webkit ------------------------------------------ */

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; 
	appearance: none;  
	width: 3.0rem;
	height: 1.5rem;
	border-radius: 0.75rem;
	background: #ff9900; 	/* orange */
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	z-index: 5;
	}



/* -------------- Mozilla Firefox --------------------------------- */

input[type="range"]::-moz-range-track {
	appearance: none;
	background: #f0f0f0; /* light grey */
	height: 100%;
	width: 1.2rem;
	border-radius: 0.6rem;
	border-style: solid;
	border-color: #f5f5f5;
	border-width: 1px 1px 1px 1px;
	}



input[type="range"]::-moz-range-thumb {
	width: 3rem;
	height: 1.5rem;
	border-radius: 0.75rem;
	background: #ff6600;
	border-style: solid;
	border-color: #ff9900; /* orange */
	border-width: 1px 1px 1px 1px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	cursor: pointer;
	}



/* ------------------ IE ------------------------------------ */

input[type="range"]::-ms-thumb {
	-webkit-appearance: none; 
	width: 3.0rem;
	height: 1.5rem;
	border-radius: 0.75rem;
	background: #ffff66; 
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	z-index: 5;
	}

/* ------------------------------------------------------------------------------- */



.holdicon{
	background-color: inherit;
	height:12%;
	width: 100%;
	padding: 5px;
	float: left;
	/*margin-right: 1.3rem;*/
	/*margin-left: 1rem;*/
		display: flex;
		justify-content: center;
		align-items: center;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box;
	}

/*adjust logo size to fit div*/
#symbolimage{
	height: 1.8rem;
	width: 1.8rem;
	background-color: inherit;
	text-align:center;
	margin: auto;
	}

.holdrange{
	background-color: inherit;
	height:76%;
	width: 100%;
	padding: 5px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	}
	


/* ****************************** analog clock ************************ */

#holdRPM{
	position: relative;
	width: 11rem;
	height: 11rem;
	margin: auto;
	align-items: center;
	background-color: #ffffff;
	opacity: 1;
	float: left;
	text-align:left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
		border-radius: 6rem;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}


#holdclock{
	position: relative;
	width: 11rem;
	height: 11rem;
	margin: auto;
	align-items: center;
	background-color: #ffffff;
	opacity: 1;
	float: left;
	text-align:left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
		border-radius: 6rem;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}



#holdsecond{
	position: absolute;
	width: 110px;
	height: 110px;
	min-height: 20px;
	margin: auto;
	margin-bottom: 20px;
		justify-content: center;
		text-align: center;
		align-items: center;
	background-color: transparent;
	opacity: 1;
	float: left;
	text-align:left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	
	box-sizing: border-box; 
	}

#kmdialimage{
	position: relative;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 3;
	}


#dialimage{
	position: relative;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 3;
	}

#hoursimage{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 5;
	}

#minutesimage{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 8;
	}

#kmsecondsimage{
	display: inline-block;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	transition: transform 2s ease-in-out;
	}


#secondsimage{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	transition-property: rotate;
	transition-duration: 0.8s;
	}



/* *************************************** Sprayer simulator styling ************************** */

.leftP{
	width: 30%;
	height: 99%;
	padding: 20px;
	padding-top: 0px;
	margin: 0px;
	margin-top: 1%;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
		/*display: flex;*/
		/*flex-direction: column;*/
	}

.leftbottom{
	width: 100%;
	height: 37%;
	background-color: #696969;
	padding: 10px;
	padding-top: 0px;
	margin-top: 1%;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	float: left;
	font-size: 1rem;
	font-family: arial, sans-serif;
	color: #333b12;
	vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
	border-style: solid;
	border-radius: 12px;
	border-color: #696969;
	border-width: 2px 2px 2px 2px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
		/*display: -webkit-flex; */	/& safari 6.1+ iOS 7.1+ */
		/*display: -webkit-box;	*/      /* old ios 6-, Safari 3.1-6 */
		/*flex: 1 1 auto;  */           /*expand to fit content*/
	
	}


.holdtank{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	float: left;
	}


#tank{
	position: relative;
	width: 60%;
	height: 90%;
	float: left;
	margin: auto;
	margin-top: 6px;
	margin-left: 20%;
	background-color: #f5f5f5;
	text-align: center;
	vertical-align: middle;
	border-style: solid;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	border-color: #696969;
	border-width: 0px 0px 0px 0px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
	}

#nivel{
	position: absolute;
	bottom: 0%;
	width: 100%;
	height: 50%;
	float: left;
	margin: 0px;
	padding: 10px;
	background-color: #0066ff;
	color: white;
	text-align: center;
	vertical-align: middle;
	border-style: solid;
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	border-color: #696969;
	border-width: 0px 0px 0px 0px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
	}


.rightP{
	width: 30%;
	height: 99%;
	padding: 0px;
	margin: 0px;
	margin-top: 1%;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}

.holdcenterP{
	width: 40%;
	height:99%;
	margin-top: 1%;
	float: left;
	background-color: inherit;
	box-sizing: border-box; 
	}


.centerP{
	width: 100%;
	height: 50%;
	padding: 0px;
	margin: 0px;
	/* background-color: #404040; */
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}


#holddata{
	width: 100%;
	height: 8%;
	padding: 5px;
	float: left;
	background-color: #00994d;
	margin: 0px;
	color: white;
	font-size: 1.0rem;
	font-family: Arial, sans-serif;
	 	display: flex;
	  	justify-content: right;
	  	align-items: center;
	box-sizing: border-box;
	}



.holdnozle{
	width: 92%;
	height: 92%;
	padding: 0px;
	float: left;
	background-color: #00994d;
	margin: 0px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	box-sizing: border-box;
	}


#holdbargraph{
		position: relative;
	width: 8%;
	height: 92%;
	padding: 0px;
	float: left;
	background-color: #f5f5f5;
	margin: 0px;
	box-sizing: border-box;
	}

#midlemarker{
		position: absolute;
		bottom: 0%;
		left: 0;
	width: 100%;
	height: 50%;
	padding: 0px;
	float: left;
	background-color: transparent;
	margin: 0px;
	padding-top: 0px;
	color: black;
	align-items: top;
	border-style: solid;
	border-color: black;
	border-width: 8px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box;
	}

#ratebar{
		position: absolute;
		bottom: 0%;
		left: 0;
	width: 100%;
	height: 10%;
	padding: 0px;
	/*background-color: rgba(128, 128, 255, 0.6);*/
		background-color: rgba(102, 102, 255, 0.6);
	margin: 0px;
	border-style: solid;
	border-color: black;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box;
			
	/*opacity: 0.4;*/
	z-index: 5;
	}


#topline{
	position: relative;
	width: 100%;
	height: 8px;
	padding: 0px;
	float: left;
	background-color: black;
	margin: 0px;
	opacity: 1;
	box-sizing: border-box;
	z-index: 10;
	}


.bottomP{
	width: 100%;
	height: 46%;
	padding: 0px;
	margin: 0px;
	margin-top: 3%;
	background-color: #303030;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-radius: 12px;
	box-sizing: border-box; 
	}



.instrumentPL{
	width: 60%;
	height: 100%;
	padding: 10px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	border-radius: 12px;
	box-sizing: border-box; 
	}


.instrumentPR{
	width: 40%;
	height: 100%;
	padding: 10px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-radius: 12px;
	box-sizing: border-box; 
	}

.throtleP{
	width: 60%;
	height: 100%;
	padding: 6px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box; 
	}

.throtleP40{
	width: 30%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box; 
	}


.holder{
	width:100%;
	height: 100%;
	float: left;
	}


.panel2P{
	width: 90%;
	height: 90%;
	padding: 0px;
	margin-left: 5%;
	margin-top: 5px;
	background-color: #696969;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: #696969;
	border-width: 2px 2px 2px 2px; /* top, right, bottom, left */
	border-radius: 12px;
	box-sizing: border-box; 
	/*overflow: auto;*/
	}


.throtle2P{
	width: 40%;
	height: 100%;
	padding: 6px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box; 
	}

#holdSpeedometer{
	position: relative;
	width: 11rem;
	height: 11rem;
	margin: auto;
	align-items: center;
	background-color: #ffffff;
	opacity: 1;
	float: left;
	text-align:left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
		border-radius: 6rem;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}


#holdPressure{
	position: relative;
	width: 11rem;
	height: 11rem;
	margin: auto;
	align-items: center;
	background-color: #ffffff;
	opacity: 1;
	float: left;
	text-align:left;
	color: black;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
		border-radius: 6rem;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}

.holdDial{
	width: 70%;
	height: 100%;
	padding: 5px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
	border-radius: 12px;
	box-sizing: border-box; 
	}


.controls3{
	width: 100%;
	height: 50%;
	padding: 30px;
	padding-top: 0px;
	margin: 0px;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}


.controls4{
	width: 100%;
	height: 46%;
	padding: 30px;
	padding-top:2px;
	padding-bottom: 0px;
	margin: 0px;
	margin-top: 4%;
	background-color: inherit;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-radius: 12px;
	box-sizing: border-box; 
	}


.holdPressure{
	width: 100%;
	height: 100%;
	padding: 0px;
	padding-top: 10px;
	margin: 0px;
	background-color: #303030;
	float: left;
	color: #FFFFFF;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-radius: 12px;
	box-sizing: border-box; 
	}


#hectarimetroP{
	width: 58%;
	height: auto;
	padding: 5px;
	padding-left:10px;
	padding-right: 10px;
	margin: auto;
	margin-left: 2%;
	background-color: #b3ffb3;
	float: left;
	color: #383838;
	font-size: 2.2rem;
	font-family: alarmclock, Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;		
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	border-radius: 4px;
	box-sizing: border-box; 
	}


#taxaaplicacao{
	width: 58%;
	height: auto;
	padding: 5px;
	padding-left:10px;
	padding-right: 10px;
	margin: auto;
	margin-left: 2%;
	background-color: #b3ffb3;
	float: left;
	color: #383838;
	font-size: 2.2rem;
	font-family: alarmclock, Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;		
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	border-radius: 4px;
	box-sizing: border-box; 
	}


.nevoax{
	border-bottom: 300px solid #3366ff;
	border-left: 220px solid transparent;
	border-right: 220px solid transparent;
	height: 0;
	width: 10px;
	opacity: 0.1;
	float: left;
	margin-right: -40px;
	}


.nevoa{
	border-bottom: 6rem solid #cce0ff;
	border-left: 4rem solid transparent;
	border-right: 4rem solid transparent;
	height: 0;
	width: 0.1rem;
	opacity: 0.0;
	float: left;
	margin-right: -3rem;
	}






/* ************************ Speed slider styling ******************** */





/* ************************ Pressure slider styling ******************** */





/* ******************************************************************************************* */

/* Add a blue text color to links */

a {
  	color: dodgerblue;
	cursor: pointer;
   	}


#trlight{
	background-color: #f8f8f8;
	padding: 5px;
	}


#trdark{
	background-color: #e8e8e8;
	padding: 5px;
	}


#trtitle{
	/*background-color: #b3ffb3;*/
	background-color: #ffa64d;
	padding: 6px;
	}

#trtitle2{
	/*background-color: #b3ffb3;*/
	/*background-color: #ffa64d;*/
	background-color: #262626;
	padding: 5px;
	color: #ffffff;
	}

#trresultado{
	/*background-color: #b3ffb3;*/
	background-color: #66ff33;
	padding: 5px;
	}


#trA{
	/*background-color: #99c2ff;*/
	background-color: #80b3ff;
 	padding: 5px;
	}

#trB{
	/*background-color: #c2d6d6;*/
	background-color: #a3c2c2;
	padding: 5px;
	}


#trE{
	/*background-color: #ffecb3;*/
	background-color: #ffd599;
	padding: 5px;
	}


#trD{
	/*background-color: #ffecb3;*/
	background-color: #d5ff80;
	padding: 5px;
	}


#trC{
	/*background-color: #ffecb3;*/
	background-color: #ccccff;
	padding: 5px;
	}


#trquery{
	background-color: #b3ffe6;
	padding: 5px;
	}


td{
	padding: 3px;
	padding-left: 8px;
	border: none;
	margin: 0px;
	}

#tdquery{
	background-color: #b3ffe6;
	}

#tdbuttons{
	padding: 3px;
	border: none;
	margin: auto;
	text-align: center;
	}


#tdsmalltitle{
		/*background-color: #1a53ff;*/
			background-color: #707070;
		padding: 2px;
		margin-top: 8px;
		font-size: 0.6rem;
		font-family: arial, sans-serif;
		/*color: #404040;*/
		color: #ffffff;
		text-align: center;
		}

#tdblacktitle{
		background-color: #262626;
		padding: 2px;
		margin-top: 8px;
		font-size: 0.6rem;
		font-family: arial, sans-serif;
		/*color: #404040;*/
		color: #ffffff;
		text-align: center;
		}


#tdspacer{
		background-color: inherit;
		padding: 2px;
		font-size: 0.6rem;
		font-family: arial, sans-serif;
		color: #404040;
		text-align: center;
		}

#tdspacer2{
		background-color: inherit;
		height: 0.5rem;
		}


#tdpadded{
	padding-left: 1.5rem;
	}


#tdvelocity{
		background-color: #101010;
		padding: 8px;
		font-size: 3rem;
		font-family: arial, sans-serif;
		color: #ffffff;
		text-align: center;
		}

/*
#tdsmalltitle{
		background-color: #ffa64d;
		padding: 2px;
		margin-top: 10px;
		font-size: 0.6rem;
		font-family: arial, sans-serif;
		color: #404040;
		text-align: center;
		}
*/

/* centers td content */
#tdcenter{
	text-align: center;
	vertical-align: middle;
	}



#tdblue{
	background-color: #b3ffe6;
	}


#fixohectare{
		background-color: #e8e8e8;
		}

#fixohora{
		background-color: #e8e8e8;
		}

#litros{
		background-color: #e8e8e8;
		}


/*adjust droplet size*/
.dropsize{
	height: 5px;
	width: 5px;
	margin: auto;
	background-color: inherit;
	box-sizing: border-box;
	}

.dropsize1{
	height: 2px;
	width: 2px;
	margin: auto;
	background-color: inherit;
	box-sizing: border-box;
	}

.dropsize2{
	height: 3px;
	width: 3px;
	margin: auto;
	background-color: inherit;
	box-sizing: border-box;
	}

.dropsize3{
	height: 4px;
	width: 4px;
	margin: auto;
	background-color: inherit;
	box-sizing: border-box;
	}

.holddrop{
	height: auto;
	width: auto;
	margin: 0px;
	padding: 2px;
	float: left;
	box-sizing: border-box;
	}

.holddrop1{
	/*height: auto;*/
	width: 4.545%;
	aspect-ratio: 1/1;
	margin: 0px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	}

.holddrop2{
	/*height: auto;*/
	width: 10%;
	aspect-ratio: 1/1;
	margin: 0px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	}

.holddrop3{
	/*height: auto;*/
	width: 14.285%;
	aspect-ratio: 1/1;
	margin: 0px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	}

.holdline{
	height: auto;
	width: auto;
	margin: 0px;
	padding: 0px;

	box-sizing: border-box;
	}

.greenleaf{
	width: 90%;
	margin-left: 5%;
	aspect-ratio: 1/1;
	padding: 0px;
	background-color: #2fb62f; /*green leaf backdrop*/
	box-sizing: border-box;
	}

#holddrops{
	width: auto;
	height: auto;
	margin-top: 0px;
	margin-bottom: 10px;
	background-color: inherit;
	float: right;
	box-sizing: border-box; 
	}

#dropstitle{
	width: auto;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 6px;
	background-color: inherit;
	/*float: left;*/
	text-align:center;
	color: #404040;
	font-size: 0.9rem;
	font-family: Arial, sans-serif;
	box-sizing: border-box; 
	}


.holdpaper{
	width: auto;
	height: auto;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 5px;
	padding-right:10px;
	padding-left: 15px;
	//background-color: #e8e8e8;
	background-color: #00b33c;
	float: right;
	text-align:center;
	color: white;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}


.tamanho{
	width: auto;
	height: auto;
	margin-top: 5px;
	margin-bottom: 0px;
	padding: 6px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: inherit;
	/*float: left;*/
	text-align:center;
	/*color: #404040;*/
		color: #f8f8f8;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}

canvas1{
	margin-left: 5%;
	padding: 0px;
	background-color: #2fb62f; /*green leaf backdrop*/
	box-sizing: border-box;
	}


#showdrops{
	height: auto;
	width: auto;
	margin: 0px;
	padding: 0px;
	float: left;
	box-sizing: border-box;
	}


#holddropboxes{
		width: 90%;
		height: auto;
		min-height: 50px;
		float: left;
		background-color: yellow;
		margin: auto;
		box-sizing: border-box;
		}

.holdonedropbox{
		width: 33.33%;
		height: auto;
		min-height: 50px;
		float: left;
		background-color: white;
		margin: auto;
		padding: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		}

#spacer{
	height: 90px;
	width: 100%;
	float: left;
	background-color: inherit;
	}
	




.holdfooter{
	width: 100%;
	height: auto;
		/*position: fixed;*/
		bottom: 0;
		left: 0; 
	margin-top: 4rem;
	background-color: #213300;
	float: left;
	box-sizing: border-box;
	}



#footer1{
	width: 100%;
	height: 50%;
	background-color: inherit;
	padding: 5px;
	margin-top: 0px;
	float: left;
	font-size: .7em;
	font-family: Montserrat, Helvetica, sans-serif;
	color: white;
	text-align:center;
	vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box;
	}


#footer2{
	width: 100%;
	height: auto;
	background-color: inherit;
	padding: 8px;
	margin-top: 0px;
	float: left;
	font-size: .6em;
	font-family: Montserrat, Helvetica, sans-serif;
	color: white;
	text-align:center;
	vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box;
	}


#message{
	width: 96%;
	height: auto;
	background-color: inherit;
	padding: 5px;
	margin-top: 20px;
	margin-left: 2%;
	margin-right: 2%;
	float: left;
	font-size: .8rem;
	font-family: Montserrat, Helvetica, sans-serif;
	color: #303030;
	text-align: left;
	vertical-align:middle;
	box-sizing: border-box;
	}



/* ********************************* Form styling *************************** */

.labelabove{
	display: block;
	margin-bottom: 5px;
	font-size: 0.6em;
	}




/* **************************** BUTTONS ************************************** */

.send{
	height: auto;
	width: auto;
	 min-width: 6em;
	padding: 10px;
	border-radius: 10px;
	background-color: #33B249;
	font-size: 1.5rem;
	font-family: Arial, sans-serif;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 2px solid white;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0,0,0, 0.6);
		cursor: pointer;
	}

#send:hover{
	background-color:#288E3A;
	color: white;
	}




.clear{
	height: auto;
	width: auto;
	min-width: 6rem;
	padding: 10px;
	border-radius: 8px;
	background-color: white;
	font-size: 1.5rem;
	font-family: Arial, sans-serif;
	color: #707070;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 2px solid #909090;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
		cursor: pointer;
	}

.clear:hover{
	color: #949494;
	}


.sendsmall{
	height: auto;
	width: auto;
	
	padding: 8px;
	border-radius: 6px;
	background-color: #33B249;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 2px solid white;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0,0,0, 0.6);
		cursor: pointer;
	}

#sendsmall:hover{
	background-color:#288E3A;
	color: white;
	}



.start{
	height: 4rem;
	width: 4rem;
	
	padding: 4px;
	border-radius: 2rem;
	background-color: #33B249;
	font-size: 0.9rem;
	font-family: Arial, sans-serif;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 3px solid white;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0,0,0, 0.6);
		cursor: pointer;
	}

.start:hover{
	background-color:#288E3A;
	color: white;
	}




.clearsmall{
	height: auto;
	width: auto;
	
	padding: 8px;
	border-radius: 6px;
	background-color: white;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
	color: #707070;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 2px solid #909090;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
		cursor: pointer;
	}

.clearsmall:hover{
	color: #949494;
	}


.zerar{
	height: 1.6rem;
	width: auto;
	padding-left: 16px;
	padding-right: 16px;
	border-radius: 0.8rem;
	background-color: #ffb366;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 2px solid white;
	margin:auto;
	margin-top: 15px;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	}

.zerar:hover{
	background-color: #ff9933;
	color: black;
	}


.resetsmall{
	height: auto;
	width: auto;
	
	padding: 8px;
	border-radius: 6px;
	background-color: ffa64d;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
	color: #707070;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 2px solid #909090;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
		cursor: pointer;
	}

.resetsmall:hover{
	color: #949494;
	}

.print{
	height: auto;
	width: auto;
	padding: 8px;
	padding-left: 16px;
	padding-right: 16px;
	border-radius: 8px;
	background-color: #0099ff;
	font-size: 0.8rem;
	font-family: Arial, sans-serif;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 2px solid white;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
		cursor: pointer;
	}

.print:hover{
	background-color: #008ae6;
	}

.print:active{
	background-color: #006bb3;
	}


/* printer icon button */
.printbutton{
	display: block;
	height: auto;
	width: 80px;
	border-radius: 6px;
	border: 2px solid white;
	margin: auto;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.printbutton:hover{
	border-color: black;
	}





.rpmlarge{
	display: block;
	height: 16%;
	width: 60%;
	float: left;
	/*min-width: 3rem;*/
	padding: 4px;
	border-radius: 8px;
	background-color: #ffad33;
	font-size: 2rem;
	font-family: Arial, sans-serif;
	color: black;
		/*display: flex;*/
		/*justify-content: center;*/
		/*align-items: center;*/
	border: 0px solid #909090;
	margin-top: 20%;
	margin-bottom: 4.5%;
	margin-left: 20%;
	margin-right: auto; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.rpmlarge:hover{
	color: black;
	}


.rpmsmall{
	display: block;
	height: 16%;
	width: 40%;
	float: left;
	/*min-width: 3rem;*/
	padding: 4px;
	border-radius: 8px;
	background-color: #ffad33;
	font-size: 1.6rem;
	font-family: Arial, sans-serif;
	color: black;
		/*display: flex;*/
		/*justify-content: center;*/
		/*align-items: center;*/
	border: 0px solid #909090;
	margin-top: 20%;
	margin-bottom: 4.5%;
	margin-left: 30%;
	margin-right: auto; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.rpmsmall:hover{
	color: black;
	}



.direction{
	display: block;
	height: auto;
	width: 3.5rem;
	float: left;
	/*min-width: 3rem;*/
	padding: 2px;
	border-radius: 0.8rem;
	background-color: #101010;
	font-size: 2.4rem;
	font-family: Arial, sans-serif;
	color: white;
	border: 0px solid #ff751a;
	margin-top: 20%;
	margin-bottom: 4.5%;
	margin-left: 20%;
	margin-right: auto; 
		display: flex;
		justify-content: center;
		align-items: center;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.direction:hover{
	color: #bfbfbf;
	}


.gear{
	display: block;
	height: 1.8rem;
	width: 1.8rem;
	padding: 4px;
	border-radius: 1rem;
	background-color: #101010;
	font-size: 1.2rem;
	font-family: Arial, sans-serif;
	color: white;
	border: 0px solid #ff751a;
	margin-top: .2rem;
	margin-bottom: 0.2rem;
	margin-left: auto;
	margin-right: auto; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.gear:hover{
	color: #bfbfbf;
	}

.gearspacer{
	display: block;
	height: 1.8rem;
	width: 1.8rem;
	background-color: inherit;
	margin-top: .2rem;
	margin-bottom: 0.2rem;
	margin-left: auto;
	margin-right: auto; 
	box-sizing: border-box;
	}




.red{
	height: 4rem;
	width: 4rem;
	padding: 5px;
	border-radius: 2rem;
	background-color: #ff471a;
	font-size: 1.1rem;
	font-family: Arial, sans-serif;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 3px solid white;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0,0,0, 0.6);
		cursor: pointer;
	}

.red:hover{
	background-color:#ff5c33;
	color: white;
	}



.green{
	height: 4rem;
	width: 4rem;
	padding: 5px;
	border-radius: 2rem;
	background-color: #33b249;
	font-size: 1.1rem;
	font-family: Arial, sans-serif;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 3px solid white;
	margin-top: 0%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box; 
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0,0,0, 0.6);
		cursor: pointer;
	}

.green:hover{
	background-color:#288a39;
	color: white;
	}

#red{
	height: 0.3rem;
	width: 2rem;
	border-radius: 0px;
	background-color: #e62e00;
	border: 0px solid #ff751a;
	margin: auto; 
	margin-bottom: 6px;
	margin-top: 3px;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

#red:hover{
	opacity: 0.7;
	}


#green{
	height: 0.3rem;
	width: 2rem;
	border-radius: 0px;
	background-color: #00b300;
	border: 0px solid #ff751a;
	margin: auto; 
	margin-bottom: 6px;
	margin-top: 3px;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

#green:hover{
	opacity: 0.7;
	}


#yellow{
	height: 0.3rem;
	width: 2rem;
	border-radius: 0px;
	background-color: #ffff66;
	border: 0px solid #ff751a;
	margin: auto; 
	margin-bottom: 6px;
	margin-top: 3px;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

#yellow:hover{
	opacity: 0.7;
	}


#blue{
	height: 0.3rem;
	width: 2rem;
	border-radius: 0px;
	background-color: #0066ff;
	border: 0px solid #ff751a;
	margin: auto; 
	margin-bottom: 6px;
	margin-top: 3px;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

#blue:hover{
	opacity: 0.7;
	}

/* buttons for field coverage color */



#Gcover{
	height: 3rem;
	width: 2rem;
	border-radius: 0px;
	background-color: #33cc33;
	opacity: 0.7;
	border: 0px solid #ff751a;
	margin: auto; 
	margin-bottom: 6px;
	margin-top: 3px;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

#Gcover:hover{
	opacity: 0.9;
	}


#Ecover{
	height: 3rem;
	width: 2rem;
	border-radius: 0px;
	background-color: #e67300;
	opacity: 0.7;
	border: 0px solid #ff751a;
	margin: auto; 
	margin-bottom: 6px;
	margin-top: 3px;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

#Ecover:hover{
	opacity: 0.9;
	}


#Bcover{
	height: 3rem;
	width: 2rem;
	border-radius: 0px;
	background-color: #4d88ff;
	opacity: 0.7;
	border: 0px solid #4d88ff;
	margin: auto; 
	margin-bottom: 6px;
	margin-top: 3px;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

#Bcover:hover{
	opacity: 0.9;
	}


#Ycover{
	height: 3rem;
	width: 2rem;
	border-radius: 0px;
	background-color: #ffff80;
	opacity: 0.7;
	border: 0px solid #ff751a;
	margin: auto; 
	margin-bottom: 6px;
	margin-top: 3px;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

#Ycover:hover{
	opacity: 0.9;
	}


/* ****************************************** colapsible sections formating ********************************************* */


.content{
	margin-left: 2%;
	margin-right: 2%;
	margin-bottom: 10px;
	width: 96%;
	height: auto;
	/*padding: 0 18px;*/
	display: none;
	overflow: hidden;
	/*background-color: #e6e6e6;*/
	background-color: #b8b8b8;
	border-radius: 6px;
	box-sizing: border-box;
	}



#infoicon{
	height: 40px;
	width: 40px;
		/*height: 2.4rem;*/
		/*width: 2.4rem;*/
	margin-top: -5px;
	margin-bottom: -15px;
		/*margin-top: 0.3rem;*/
		/*margin-bottom: -0.9rem;*/
 
	margin-right: 50px;
	/*margin-right: 3.5rem;*/
	float: left;
	}


#infoicon2{
	/*height: 60px;*/
	/*width: 60px;*/
		height: 2.4rem;
		width: 2.4rem;
	/*margin-top: -10px;*/
	/*margin-bottom: -20px;*/
		margin-top: -.3rem;
		margin-bottom: -0.3rem;
 
	margin-right: 50px;
	/*margin-right: 3.5rem;*/
	float: left;
	}



.collapsible{
	/*background-color: #31bf81;*/
		background-color: #2fb67c;
	color: #f5f5f5;
	cursor: pointer;
	padding: 15px;
	padding-left: 20px;
	text-align: left;
	margin-left: 2%;
	margin-right: 2%;
	width: 96%;
	outline: none;
	font-size: 1.2rem;
	border-style: solid;
	border-radius: 6px;
	border-color: #c8c8c8;
	border-width: 0px 0px 2px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}

.active, .collapsible:hover {
	background-color: #258e60;
	color: white;
	}

/* for styling plus sign */
.collapsible:after{
	content: '\002b';
	color: #f5f5f5;
	background-color: #258e60;
	font-weight: bold;
	float: right;
	margin-left: 5px;
	border-style: solid;
	border-color: #1f7a53;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	}



/* for showing minus sign */
.active:after {
	content: "\2212";
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	}


/* *********************** Para pulverizacao ********************** */
.collapsibleP{
	background-color: #3366ff;
	color: #f5f5f5;
	cursor: pointer;
	padding: 15px;
		padding-left: 20px;
	text-align: left;
	margin-left: 2%;
	margin-right: 2%;
	width: 96%;
	outline: none;
	font-size: 1.2rem;
		border-style: solid;
		border-radius: 6px;
		border-color: #c8c8c8;
		border-width: 0px 0px 2px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}

.activeP, .collapsibleP:hover {
	/*background-color: #258e60;*/
	background-color: #668cff;
	color: white;
	}

/* for styling plus sign */
.collapsibleP:after{
	content: '\002b';
	color: #f5f5f5;
		/*background-color: #258e60;*/
		/*background-color: #a8e600;*/
	font-weight: bold;
	float: right;
	margin-left: 5px;
		border-style: solid;
		border-color: #1f7a53;
		border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	}



/* for showing minus sign */
.active:after {
	content: "\2212";
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	}



/* *********************** Para financeiro M ********************** */
.collapsibleM{
	/*background-color: #2aa26e;*/
		background-color: #ace600;
	/*color: #f5f5f5;*/
		color: #404040;
	cursor: pointer;
	padding: 15px;
		padding-left: 20px;
	text-align: left;
	margin-left: 2%;
	margin-right: 2%;
	width: 96%;
	outline: none;
	font-size: 1.2rem;
		border-style: solid;
		border-radius: 6px;
		border-color: #c8c8c8;
		border-width: 0px 0px 2px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}

.activeM, .collapsibleM:hover {
	/*background-color: #258e60;*/
		background-color: #99cc00;
	color: #f8f8f8;
	}

/* for styling plus sign */
.collapsibleM:after{
	content: '\002b';
	color: #f5f5f5;
	/*background-color: #258e60;*/
		background-color: #ace600;
	font-weight: bold;
	float: right;
	margin-left: 5px;
		border-style: solid;
		border-color: #1f7a53;
		border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	}



/* for showing minus sign */
.active:after {
	content: "\2212";
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	}




/* *********************** Para fertilizantes F ********************** */
.collapsibleF{
	background-color: #ff944d;
	color: #f5f5f5;
	cursor: pointer;
	padding: 15px;
		padding-left: 20px;
	text-align: left;
	margin-left: 2%;
	margin-right: 2%;
	width: 96%;
	outline: none;
	font-size: 1.2rem;
		border-style: solid;
		border-radius: 6px;
		border-color: #c8c8c8;
		border-width: 0px 0px 2px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	}

.activeF, .collapsibleF:hover {
	background-color: #ff751a;
	color: white;
	}

/* for styling plus sign */
.collapsibleF:after{
	content: '\002b';
	color: #f5f5f5;
		/*background-color: #258e60;*/
		/*background-color: #a8e600;*/
	font-weight: bold;
	float: right;
	margin-left: 5px;
		border-style: solid;
		border-color: #1f7a53;
		border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	}



/* for showing minus sign */
.active:after {
	content: "\2212";
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	}



/* ************************* format images ***************** */

/*adjust name size to fit div*/
#map1{
	width: 92%;
	height: auto;
	float: left;
	text-align:center;
	border: 2px solid #28559a;
	border-radius: 6px;
	margin: auto;
	/* SHADOW */
	box-shadow: 2px 2px  3px rgba(0, 0, 0, 0.6);
	}


/* **************************** calculator styling ******************* */


#calculator{
	/*background: #585858;*/
		/*background: #253300;*/
			background: #384d00;
  	padding: 25px;
  	width: 400px;
	height: auto;
	float: left;
  	border-radius: 10px;
	box-sizing: border-box; 
	}

#calculator2{
	background: #ebebe0;
  	padding: 0px;
  	width: 94%;
	height: auto;
	min-height: 300px;
	margin-left: 3%;
	margin-right: 3%;
	float: left;
  	border-radius: 10px;
	box-sizing: border-box; 
	}

#equation{
	background-color: #303030;
  	padding: 6px;
  	width: 100%;
	height: 80px;
	color: #f8f8f8;
	font-size: 22px;
	font-family: alarmclock, Arial, sans-serif;
	font-weight: bold;
		display: flex;
		justify-content: end;
		align-items: flex-end;	
  	border-radius: 0px;
	float: left;
	box-sizing: border-box; 
	overflow: auto;
	border-radius: 6px 6px 0px 0px;
	}

#displayCalc{
	background-color: #b3ffb3;
  	padding: 5px;
  	width: 100%;
	height: 80px;
	margin-bottom: 4px;
	color: #202020;
	font-size: 50px;
	font-weight: bold;
	font-family: alarmclock, Arial, sans-serif;
		display: flex;
		justify-content: end;
		align-items: center;	
  	border-radius: 0px 0px 6px 6px;
	float: left;
	box-sizing: border-box; 
	}

.calcbutton{
	background-color: inherit;
  	padding: 5px;
  	width: 25%;
	aspect-ratio: 1 / 1;
  	border-radius: 6px;
	float: left;
	box-sizing: border-box; 
	}

.calcbutton2{
	background-color: inherit;
  	padding: 5px;
  	width: 50%;
  	border-radius: 6px;
	float: left;
	box-sizing: border-box; 
	}



#equal{
	background-color: inherit;
  	padding: 5px;
  	width: 50%;
	height: auto;
  	border-radius: 6px;
	float: left;
	box-sizing: border-box; 
	}



.calcNumber{
	width: 100%;
	height: 80px;
	float: left;
	padding: 2px;
	border-radius: 6px;
	/*background-color: #303030;*/
	background-color: #202020;
	font-size: 2rem;
	font-family: Arial, sans-serif;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 0px solid #909090;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.calcNumber:hover{
	background-color: #080808;
	}

.calcNumber:active{
	background-color: #080808;
	border: 2px solid #c0c0c0;
	}


.calcNumber3{
	width: 100%;
	height: 80px;
	float: left;
	padding: 2px;
	border-radius: 6px;
	/*background-color: #303030;*/
	background-color: #202020;
	font-size: 2.5rem;
	font-family: Arial, sans-serif;
	color: white;
	font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 0px solid #909090;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.calcNumber3:hover{
	background-color: #080808;
	}

.calcNumber3:active{
	background-color: #080808;
	border: 2px solid #c0c0c0;
	}


/* orange button */
.calcNumber2{
	width: 100%;
	height: 80px;
	float: left;
	padding: 2px;
	border-radius: 6px;
	background-color: #ffa31a;
	font-size: 2.0rem;
	font-family: Arial, sans-serif;
	color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 0px solid #909090;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.calcNumber2:hover{
	background-color: #ff9900;
	}

.calcNumber2:active{
	background-color: #ff9900;
	border: 4px solid #d8d8d8;
	}




.calcOperator{
	width: 100%;
	height: 80px;
	float: left;
	padding: 2px;
	border-radius: 6px;
	/*background-color: #4dff4d;*/
		/*background-color: #ffb84d;*/
			background-color: #bebebe;
	font-size: 2rem;
	font-family: Arial, sans-serif;
	color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 0px solid #909090;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.calcOperator:hover{
	background-color: #a9a9a9;
	}

.calcOperator:active{
	background-color: #a9a9a9;
	border: 4px solid #d8d8d8;
	}



.calcOperator2{
	width: 100%;
	height: 80px;
	float: left;
	padding: 2px;
	border-radius: 6px;
	background-color: #47d147;
	font-size: 2rem;
	font-family: Arial, sans-serif;
	color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 0px solid #909090;
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.calcOperator2:hover{
	background-color: #2eb82e;
	}

.calcOperator2:active{
	background-color: #2eb82e;
	border: 4px solid #d8d8d8;
	}




.holdData{
	background-color: inherit;
  	padding: 8px;
	height: 75px;
  	width: 100%;
  	border-radius: 0px;
	box-sizing: border-box; 
	}

.data{
	width: 10rem;
	height: 80%;
	margin: 5px;
	padding: 5px;
	font-size: 1.2rem;
	font-family: arial, sans-serif;
	color: #303030;
	float: left;
	border-style: solid;
	border-color: #a9a9a9;
	border-width: 0px 0px 2px 0px; /* top, right, bottom, left */
	border-radius: 0px;
	border-color: grey;
	overflow: auto;
	cursor: not-allowed;
	}

.holdnotes{
	background-color: inherit;
  	padding: 8px;
	min-height: 95px;
  	width: 100%;
  	border-radius: 0px;
	box-sizing: border-box; 
	}

#notestextarea{
	/*display: inline-block;*/
	padding: 0.6em;
	width: 100%;
	/*height: 3rem;*/
	cursor: text;
	background-color: white;
	margin-left: 0px;
	margin-bottom: 2px;
	font-size: 1.2rem;
	font-family: arial, sans-serif;
	color: #404040;
	border-style: solid;
	border-radius: 8px;
	border-color: #808080; 
	border-width:2px;
	overflow: auto;
	}


.dataname{
	width: 14rem;
	height: 80%;
	margin: 5px;
	margin-left: 20px;
	padding: 5px;
	font-family: Arial, sans-serif;
	color: black;
	font-size: 1.2rem;
	font-family: arial, sans-serif;
	color: #303030;
	float: left;
	border-style: solid;
	border-color: #a9a9a9;
	border-width: 0px 0px 2px 0px; /* top, right, bottom, left */
	border-radius: 0px;
	border-color: grey;
	overflow: auto;
	}


.buttonSaveRead{
	width: auto;
	min-width: 60px;
	height: 80%;
	margin: 5px;
	float: left;
	padding: 2px;
	border-radius: 6px;
	background-color: #b3ffb3;
	font-size: 1rem;
	font-family: Arial, sans-serif;
	color: #202020;
	font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 0px solid #909090;
	/* SHADOW */
	box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	box-sizing: border-box;
	}

.buttonSaveRead:hover{
	background-color: #80ff80;
	}



/* style copy save button images */
.buttonimage2{
	height: 1.2em;
	width: auto;
	margin: auto;
	}

.buttonimage3{
	height: 1.8em;
	width: auto;
	box-shadow: none;
	}


.digital3b{
	width: auto;
	min-width: 40%;
	height: auto;
	padding: 1px;
	padding-left:10px;
	padding-right: 10px;
	margin: auto;
		/*background-color: #ffcccc;*/
	background-color: #b3ffb3;
	float: left;
	color: #202020;
	font-size: 3.3rem;
	font-family: alarmclock, Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;		
	border-style: solid;
	border-color: #ff6633;
	border-width: 4px 4px 4px 4px; /* top, right, bottom, left */
	border-radius: 8px;
	box-sizing: border-box; 
	}