html{
	/*min-width: 1100px;*/
  
}



body
{
	margin: 0;
	padding: 0;
	font-family: Verdana,Georgia, Garamond, Serif;
	background-color: #352E26;
	/*background: url(bg-circle.png);*/
	
	color:#85B681;
	
}

.Dark{
	background-color: #222222;
}
.version{
	float:right;
	padding:10px;
}

#Header{
	width:100%;
	height: 40px;
	background-color: #333;
	border-bottom: 1px solid #770;
}
.MenuIcon{
	height:40px;
	 filter: invert(80%); 	
}

.GrayBackground{
width:100%;
padding:20px;	
	background-color: #ddd;
	box-sizing: border-box;
}
#Dashboard{
	width:100%;
	
	background-color: #222222;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	
}
.FullScreen{
	//height: calc(100vh - 41px);
}
@media screen and (max-width: 600px) {
 #Dashboard {
    flex-direction: column;
  }
}

.Sensor{
	width: 270px;
	height: 230px;
	background-color: #565;
	background-image: linear-gradient(to bottom right, #676, #232);
	border-radius: 6px;
	border: 0px solid #6b6;
	padding: 10px;
	margin: 20px;
	box-sizing:border-box;
	/*Important:*/
    position:relative;
}

/*Important:*/
.link-spanner{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif 
  background-image: url('empty.gif');*/
}   

.SensorRed{
background-color: #655;
background-image: linear-gradient(to bottom right, #766, #322);
border: 0px solid #F66; 
color: #f99;
}
.SensorYellow{
background-color: #665;
background-image: linear-gradient(to bottom right, #776, #332);
border: opx solid #FF6; 
color: #FF4;
}
.SensorGray{
background-color: #555;
background-image: linear-gradient(to bottom right, #888, #333);
border: opx solid #FF6; 
color: #CCC;
}
.BattGray{
	background-color: #CCC;
}


@media screen and (max-width: 600px) {
 .Sensor {
    width: calc(100% - 40px);
	min-height: 230px;
	
  }
}

.SensorVolume {
	color: #eee;
	font-size: 36px;
}

#CPUGraph{
	position:relative; 
	
	/*width:1200px; */
/*	height:300px;*/
}

.markerRed {
  width: 20px;
  height: 20px;
  border: 1px solid #880;
  border-radius: 10px;
  background-color: #F30;
  opacity: 0.9;
}
.markerGreen {
  width: 20px;
  height: 20px;
  border: 1px solid #880;
  border-radius: 10px;
  background-color: #3F0;
  opacity: 0.9;
}

.FoutAansluiting {
  text-decoration: none;
  color: white;
  font-size: 11pt;
  text-shadow: black 0.1em 0.1em 0.2em;
  padding: 0.2em;
  background-color: rgba(128,128,128,0.7);
  border: 1px solid rgba(255,255,255,0.8);
}


.popover-content {
  min-width: 180px;
}



.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:none;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
	color:#777777;
}
.myButton:active {
	position:relative;
	top:1px;
}


#datepickerShutdown{
border: 1px solid #695444;
border-radius: 4px;
background-color: #352E26;
color:#85B681;
height: 25px;
width: 170px;
padding: 5px;
margin: 5px;
}

#shutdown{
	
    height: 46px;  
    width: 46px;	
	
}

.TextButton {
background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
#main {
  margin: 30px;	
  color:#85B681;
  font-size:12px;
	}
	
.DivLeft{
	float: left;
	width: 180px; 
}        
.DivRight{
	margin-left: 190px;
	width: 180px; 
	text-align: Right; 
}       

.DivRight2{
	margin-left: 380px;
	width: 180px; 
	text-align: Left; 
}
.row{
	float: left; 
	min-width: 200px;
}
.row600px{
	float: left; 
	width: 600px;
}
.rowAlignRight{
	float: left; 
	width: 200px;
	text-align: Right;
}


hr {
height: 2px;
margin-top: 12px;
margin-bottom: 12px;
background-color: #9C958D;
border: none;
}

.CornerBox {
border-radius: 8px;
    border: 2px #4A433B solid;
    padding: 7px; 
	margin-left: 0px;
	margin-top: 9px;
	margin-right: 9px;
	margin-bottom: 3px;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.3);
    
	}




/* table */


#TableView {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#TableView td, #TableView th {
  border: 0px solid #32573A;
  padding: 8px;
  color: #555555;
}

#TableView tr:nth-child(even){background-color: #f2f2f2;}
#TableView tr:nth-child(odd){background-color: #CCCCCC;}

#TableView tr:hover {background-color: #ddd;}

#TableView th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #403121;
  color: white;
}


.WaterTank {
  border: 2px solid #444;
  background-color: #555;
  width: 30px;
  height: 100px;
  padding: 2px;
  border-radius: 4px;
  position: relative;
  margin: 15px 0;
  
}

#WaterLevelShortTerm{
	height: 300px;
}
.chart-container{
	position: relative; 
	height:40vh; 
	width:100%;
}


.WaterTank-level {
  background: #3055e4;  
  width: 100%;
  position: absolute;
  bottom: 0px;
  
 box-sizing:border-box;
 
}

/*Battery indicator*/

.BatPercentage{
	float:left;
	
}

.battery {
  border: 2px solid #444;
  background-color: #555;
  max-width: 100%;
  height: 13px;
  padding: 2px;
  border-radius: 4px;
  position: relative;
  
  margin-left: 40px;
  
}





.battery-level {
  background: #30b455;  
  height: 100%;
  
  
 box-sizing:border-box;
 
}
 
 
   .warn {
    background-color: #EFAF13;
  }
    
  .alert {
    background-color: #e81309;
  } 
  /*  div::before {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3C%2Fg%3E%20%3Cpath%20fill%3D%22%23e81309%22%20d%3D%22M17.927%2012l2.68-10.28c0.040-0.126%200.060-0.261%200.060-0.4%200-0.726-0.587-1.32-1.314-1.32-0.413%200-0.78%200.187-1.019%200.487l-13.38%2017.353c-0.18%200.227-0.287%200.513-0.287%200.827%200%200.733%200.6%201.333%201.333%201.333h8.073l-2.68%2010.28c-0.041%200.127-0.060%200.261-0.060%200.4%200.001%200.727%200.587%201.32%201.314%201.32%200.413%200%200.78-0.186%201.020-0.487l13.379-17.353c0.181-0.227%200.287-0.513%200.287-0.827%200-0.733-0.6-1.333-1.333-1.333h-8.073z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); background-repeat: no-repeat;
  background-size: 18px;
  height: 18px;
  width: 18px;
  margin: -25px 0 0 2px;
      content: '';
      display: inline-block;
      position: absolute;
    }
	*/
/*Battery indicator*/

.BattGray{
	background-color: #aaa;
}