@charset "utf-8";

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  transition-duration: 0.3s;
  cursor: pointer;
}
.btn_airdata {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.btn_airdata:hover {
  background-color: #4CAF50;
  color: white;
}
.btn_soildata {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.btn_soildata:hover {
  background-color: #008CBA;
  color: white;
}
.btn_canceldata {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.btn_canceldata:hover {
  background-color: #f44336;
  color: white;
}
.waterrectangle{
	width:10px;
	margin-left: 5%;
	background-color: red;
	border-radius: 0.2em;
	
}

.chartContainerNPK{
	border: 2px solid #4CEE40;
	background-color: #D3D3D3;
}

.btn_airtemp{
	border: none;
	background-color: white;
}
.btn_airtemp:hover{
	background-color: gainsboro;
	border-radius: 3px;

}

.btn_controlfertilizer:hover{
	background-color:burlywood;
}

.widget_airhum {
	width: 97%; 
	height: 20em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

.widget_airtemp {
	position: relative;
	width: 97%; 
	height: 15em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

.widget_airtemp img{
	position:absolute;
	width: 30%;
	top: 15%;
}

.tbl_airtemp_title{
	position: absolute;
	color: darkgray;
	top:20%;
	left: 35%;
}

.tbl_airtempdate{
	position: absolute;
	color: darkgray;
	top: 30%;
	left: 35%;
}

.tbl_displayairtemp{
	position: absolute;
	top: 40%;
	left: 35%;
}

.dsp_airtempcloudstatus{
	position: absolute;
	text-transform:uppercase;
	color: cadetblue;
	top: 53%;
	font-weight: bold;
}

.dsp_airprecipitation{
	position: absolute;
	color: blue; 
	text-decoration: underline;
	top: 63%;
}

.tbl_airtemp{
	position: absolute;
	top: 20%;
	border-collapse: collapse;
	margin: auto;
}
.tbl_displaydescriptionairtemp{
	position: absolute;
	top:73%;
}

.tbl_airtemp img{
/*	position: absolute;*/
	width: 50%;
	object-fit: cover;
}

.airtemp_title{
	position: absolute;
	width: 98.5%;
	background-color:darkred;
	color: white;
	left:0.2em;
	top:0.2em;
	padding: 0.5em;
	opacity: 0.5;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}
.airtemp_figure{
	position: absolute;
	font-family: Catamaran;
	font-weight: 100;
	top: 15%;
}

.widget_airlight {
	position: relative;
	width: 98.5%; 
	height: 15em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

.airlight_title{
	position: absolute;
	width: 99.3%;
	background-color:darkred;
	color: white;
	left:0.2em;
	top:0.2em;
	padding: 0.5em;
	opacity: 0.5;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}

.widget_airlight img{
	position: absolute;
	top:45%;
	width: 15%;
}

.airlight_border{
	position: relative;
	height: 1.5em;
	width: 99.3%;
	border:2px solid white;
	border-left:none;
	border-right:none;
	top:35%;
	left: 0.2em;
	right:0.2em;
}

.airlight_ani_title{
	position: absolute;
	top:23%
}

.airlight_animation{
	position: absolute;
	height: 1.3em;
}

.airlight_value{
	position: absolute;
	top:60%;
	left:15%;
	max-width: none;
    text-overflow: initial;
    white-space: normal;
	word-wrap: break-word;
}

.airlight_description{
	position: absolute;
	top:80%;
	left: 20%;
}


.widget_airhum{
	position: relative;
	width: 98.5%; 
	height: 15em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}
.airhum_title{
	position: absolute;
	width: 98.5%;
	background-color:darkred;
	color: white;
	left:0.2em;
	top:0.2em;
	padding: 0.5em;
	opacity: 0.5;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}

.widget_airhum img{
	position:absolute;
	width: 30%;
	top: 35%;
}

.airhum_border{
	position: relative;
	height: 1.5em;
	width: 98.5%;
	border:2px solid white;
	border-left:none;
	border-right:none;
	top:30%;
	left: 0.2em;
	right:0.2em;
}
.airhum_animation{
	position: absolute;
	height: 1.3em;
}
.airhum_ani_title{
	position: absolute;
	top:20%;
}

.airhum_cloud{
	position: absolute;
	top: 30%;
	width: 35%;
	height: 30%;
}
.airhum_value{
	position: absolute;
	top:50%;
	left:35%;
	max-width: none;
    text-overflow: initial;
    white-space: normal;
	word-wrap: break-word;
}

.soilhum_border{
	position: relative;
	height: 1.5em;
	width: 98%;
	border:2px solid white;
	border-left:none;
	border-right:none;
	top:35%;
	left: 0.2em;
	right:0.2em;
}
.soilhum_animation{
	position: absolute;
	height: 1.3em;
}
.soilhumb_animation{
	position: absolute;
	height: 1.3em;
}

.soilhum_ani_title{
	position: absolute;
	top:25%;
	font-size: 1em;
}
.soilhum_value{
	position: absolute;
	top:50%;
	left:2%;
	max-width: none;
    text-overflow: initial;
    white-space: normal;
	word-wrap: break-word;
}
.soilhumper_value{
	position: absolute;
	font-size: 1.2em;
	top:64%;
}
.soilhum_description{
	position: absolute;
	top: 55%;
	font-size: 1.2em;
}

.soiltemp_ani_title{
	position: absolute;
	top:25%;
	font-size: 1em;
}
.soiltemp_border{
	position: relative;
	height: 1.5em;
	width: 98%;
	border:2px solid white;
	border-left:none;
	border-right:none;
	top:35%;
	left: 0.2em;
	right:0.2em;
}
.soiltemp_animation{
	position: absolute;
	height: 1.3em;
}
.soiltempb_animation{
	position: absolute;
	height: 1.3em;
}

.soiltemp_ani_title{
	position: absolute;
	top:25%;
	font-size: 1em;
}
.soiltemp_value{
	position: absolute;
	top:50%;
	left:2%;
	max-width: none;
    text-overflow: initial;
    white-space: normal;
	word-wrap: break-word;
}
.soiltempper_value{
	position: absolute;
	font-size: 1.2em;
	top:64%;
}
.soiltemp_description{
	position: absolute;
	top: 55%;
	font-size: 1.2em;
}

.dsp_soilEC_border{
	position: relative;
	width: 100%; 
	height: 12em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

.soilEC_border{
	position: relative;
	height: 1.5em;
	width: 98%;
	border:2px solid white;
	border-left:none;
	border-right:none;
	top:35%;
	left: 0.2em;
	right:0.2em;
}
.soilEC_animation{
	position: absolute;
	height: 1.3em;
}
.soilECb_animation{
	position: absolute;
	height: 1.3em;
}

.soilEC_ani_title{
	position: absolute;
	top:25%;
	font-size: 1em;
}
.soilEC_value{
	position: absolute;
	top:50%;
	left:2%;
	max-width: none;
    text-overflow: initial;
    white-space: normal;
	word-wrap: break-word;
}
.soilECper_value{
	position: absolute;
	font-size: 1.2em;
	top:64%;
}

.dsp_soilEC_border{
	position: relative;
	width: 100%; 
	height: 12em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

.soilEC_description{
	position: absolute;
	top: 55%;
	font-size: 1.2em;
/*	left: 0%;*/
}

.dsp_soilEC{
	position: absolute;
	width: 98%;
	background-color:#002244;
	color: white;
	left:0.2em;
	top:0.2em;
	padding: 0.5em;
	opacity: 0.5;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}

.soilPH_border{
	position: relative;
	height: 1.5em;
	max-width: 98%;
	border:2px solid white;
	border-left:none;
	border-right:none;
	top:35%;
	left: 0.2em;
	right:0.2em;
}
.soilPH_animation{
	position: absolute;
	height: 1.3em;
}
.soilPHb_animation{
	position: absolute;
	height: 1.3em;
}

.soilPH_ani_title{
	position: absolute;
	top:25%;
	font-size: 1em;
}
.soilPH_value{
	position: absolute;
	top:50%;
	left:2%;
	max-width: none;
    text-overflow: initial;
    white-space: normal;
	word-wrap: break-word;

}
.soilPHper_value{
	position: absolute;
	font-size: 1.2em;
	top:64%;
}
/*
.soilPH_description{
	position: absolute;
	top: 0px;
*/
/*	font-size: 1.2em;*/
/*
	max-width: none;
    text-overflow: initial;
    white-space: normal;
    overflow: auto;
	word-wrap: break-word;
*/
/*}*/

.dsp_soilPH_border{
	position: relative;
	width: 100%; 
	height: 12em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}
.dsp_soilPH{
	position: absolute;
	width: 98%;
	background-color:#002244;
	color: white;
	left:0.2em;
	top:0.2em;
	padding: 0.5em;
	opacity: 0.5;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}

.dsp_soilhum_border{
	position: relative;
	width: 100%; 
	height: 12em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}
.dsp_soilhum{
	position: absolute;
	width: 98%;
	background-color:#002244;
	color: white;
	left:0.2em;
	top:0.2em;
	padding: 0.5em;
	opacity: 0.5;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}

.dsp_soiltemp_border{
	position: relative;
	width: 100%; 
	height: 12em; 
	background-color: #f1f4f8; 
	margin: auto;
	border-radius: 3px;
	transition: opacity .25s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

.dsp_soiltemp{
	position: absolute;
	width: 98%;
	background-color:#002244;
	color: white;
	left:0.2em;
	top:0.2em;
	padding: 0.5em;
	opacity: 0.5;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}

.controlwidgetblock{
	margin-left: 0.2em;
}

.graph_st{
	position: relative;
	width: 100%;
	border: 1px solid #44CED0; 
	border-right: none;
	border-left: none;
	border-radius: 3px;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif; 
	color: darkgreen; 
	font-weight: bold;
}
.graph_st input:hover{
	color: brown;
}

.btn_fertilizercalibration {
	position: absolute; 
	top:0.1%; 
	height: 3em;  
	border:none;
}