* {
  font-family: 'Ubuntu', sans-serif;
  background-color: transparent;
  box-sizing: border-box;
}

.w3-container{	/* Override the setting in the main css. */
	padding:0;
}

.low {
  color: green;
}

.medium {
  color: orange;
}

.high {
  color: red;
}

button {
    color: red;
    text-align: center;
    font-weight: bold;
		margin: 2.5px;
}

button:hover {
  background: #383;
}


#message {
  color:red;
	font-weight: bold;
}

#app {
  margin:auto;
}

#ThermometerImg {
	max-height:200px;
  padding:5px 20px 20px 20px;
}

#appTitle {
  font-size: 2em;
}

#temperature {
  width: 60px;
  height: 50px;
  font-size: 30px;
}

.iconImg {
  width: 20px;
}



#Power_save_mode {
  width: 75px;
}

input[type=text] {
  text-align: center;
  font-weight: bold;
}

.slider {
  float:left;
  /*height: 250px;*/
  /*height: 250px;*/
  /* min-width: 300px; */
	width: 95%;
	/* display: inline-block; */
  margin-left: 10px;
}

#vertical-slider {
    height: 80%;
    /* margin-left: 30px; */
}

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif; /* font-size, line-height and font-family all combined on 1 line (font). */
  /* padding:0;
  margin:0; */
  background-color:#f4f4f4; /* light grey */
}


#wrap{
  width:80%; /* % makes it responsive. For non responsive - use "px". */
  display: flex; /*added*/
  flex-direction: column; /*added*/
  margin:auto;
}
#main-col1{
	width:55%;
	padding:10px;
	float:left;
}

#sidebar1{
	width:40%;
  margin-top:10px;
	float:right;
}

#main-col{
	float:left;
	text-align: right;
/* 	border:1px solid red; */
	position:relative;
/* 	width:20%; */
}

#sidebar{    /* Float main-col to the left and sidebar to the right. %'s should sum to 95% '*/
	float:right;
	text-align: left;
/* 	border:1px solid blue; */
	position:relative;
	margin-top: 120px;
/* 	width:40%; */
}

.centredivs{
	margin: 0 auto;
/* 	border:2px dotted green; */
	width:45%;
	height:400px;
	vertical-align: middle;
}

.dark{
  padding:15px;
  background:#3f5370;  /* Blueish grey */
  color:#ffffff;   /* white   */
  margin-top:10px;
  /* margin-bottom:10px; */
}


@media(max-width: 768px){     /* tablet screen sizes   */
	#main-col,#sidebar{
		margin: 0px;
		margin-top:10px;
		text-align: center;
		transform: scale(0.8);
	}
  #main-col{
		margin-left: 15px;
	}
	#sidebar{
		margin-top: 120px;
	}
	
	#main-col1,#sidebar1{
		float:none;
		text-align:center;
    width:100%;
	}
	
	.centredivs{
		width:100%;
	}
	
}

	/* button{
		min-width: 0.9em;
 } */
/* end of media query */