/* For presentation only, no need to copy the code below */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #050005;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #40E0D0;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


.feedback-input { display: block; width: 100%; background-color: #707; color: white; margin-bottom: 15px; height: 25px; }
#divFeedback { background: rgba(7,0,7,.7); margin: 0 auto; width:350px; color: silver; padding:20px;   } 
.feedbacktextarea { width: 350px; height: 150px; } 

.thermometer{
     display: block;
    position: relative;
    height: 300px;
}
.bulb{
  display:inline-block;
  border:2px solid #222;
  width:20px;
  height:20px;
  border-radius:50%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  border-top: 2px solid #fff;
  box-shadow: 0px 0px 0px 2px #fff inset;
  background:red;
}
.stem{
  display: inline-block;
    border: 2px solid #222;
    width: 12px;
    height: 90px;
    border-radius: 0px 0px 20px 20px;
    border-top: 2px solid transparent;
    position: absolute;
    bottom: 18px;
    left: 4px;
    box-shadow: 0px 0px 0px 2px #fff inset;
    transform: rotate(180deg);
    z-index: 10;
      padding-bottom: 3px;
}
.stem-perct{
    height: 80%;
    width: 8px;
    background: red;
    display: block;
    margin: 0px auto;
    border-radius: 10px;
}
.bulb:after{
    content: '';
    height: 10px;
    width: 8px;
    background: inherit;
    position: absolute;
    left: 6px;
    bottom: 13px;
    z-index: 12;
}
canvas { width: 200px;  }
.Footer { border:2px solid black; position: fixed; bottom: 0; left: 0; width:100%; background: #303; text-align: center; color: silver;}
div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}
body { padding-bottom: 80px; padding-top:100px; font-family: Arial, sans-seriff;  }
h3 { color: gold;}
.link-button a { color:#b3b469; }
.link-button { background: none; border: none; color: #b3af71; text-decoration: none; cursor: pointer; font-size: 1.0em; font-family: sans-serif, arial; }
.link-button:active { color:red; }
.link-button:focus { outline: none; }
.link-buttonbig { background: none; border: none; color: #b3af71; text-decoration: none; cursor: pointer; font-size: 2.0em; font-family: sans-serif, arial; }
.link-buttonbig:active { color:red; }
.link-buttonbig:focus { outline: none; }
.popup  { margin: 0 auto; position: fixed; top: 27vh;  left: 37%;   display: none; background: #303;  border:2px solid #444;   box-shadow: 5px 5px 55px #303;   border-radius:10px;  padding: 0px 10px 20px 10px; color: cyan; background-color: #a4508b; background-image: linear-gradient(180deg, #505 5%, #202 74%); min-width: 25%; max-width:50%; max-height: 800px; padding: 20px; } 
.close { position: absolute; right: 0; top: -10px; color: #b3b469; font-weight:bold; font-size:2em; background: none; border: none; }
.close::after { clear:both; }
.close:hover, .close2:focus { color: #b3b469; cursor: pointer; }
.box { margin: 0 auto; max-width:80%; }
#header { position: fixed; top: 0; left: 0; text-align: center; width:100%;background: #150015; color: #40E0D0;  }
#footer { position:fixed; bottom:0; right:0;background: rgba(15,0,15,.99); }
.weatherfield { border-style: groove; border:5px solid #a17f1a; background: rgba(25,00,25,.9); }
.palegreen { color: #40E0D0; }

.slidecontainer {
  width: 200px; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}