body{
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  background:  rgb(0, 4, 79);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  width: 80%;
  max-width: 1000px;
  margin: auto auto;
  min-width: 800px; 
}
tr, td {
  border: 0px solid grey;
}
.tab    {
    padding-top: 30px;
    width: 100%;
}
/* Style the buttons inside the tab */
.tab_on {
  background-color: rgb(174, 170, 248);
  border: none;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.6s;
  font-size: 17px;
}
.tab_off {
  background-color: rgb(210, 208, 255);
  border: none;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.6s;
  font-size: 17px;
}
.tg {
  display: block;
  border: 0px solid darkgray;
  width: auto;
  min-width: 250px;
  padding-bottom: 30px;

}
input[type=number]  {
  width: 80px;
}

/* ensures the increment/decrement arrows always display on months selector*/
#months::-webkit-inner-spin-button, 
#months::-webkit-outer-spin-button {
  opacity: 1;
}


/** CSS to modify the knob of the sliders to aan AIoT Logo **/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none; 
  width: 150px;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 10px;
  background: #ccc;
}
/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 30px;
  width: 30px;
/*   background-color: #f50; remove this*/
  background-image: url("https://aiot-consulting.github.io/Static-Assets/logo.png");
  background-size: cover;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
  /*  rotate thumb  */
  transform: rotateZ(var(--thumb-rotate, 0deg));
}
/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 30px;
  width: 30px;
/*   background-color: #f50; */
  background-image: url("https://aiot-consulting.github.io/Static-Assets/logo.png");
  background-size: cover;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
  /*  rotate thumb  */
  transform: rotateZ(var(--thumb-rotate, 0deg));
}
/* Hover, active & focus Thumb: Webkit */
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(107, 90, 255, 0.1)
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(107, 90, 255, .2)
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(107, 90, 255, .2)
}
/* Hover, active & focus Thumb: Firefox */
input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px rgba(255,85,0, .1)
}
input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)
}
input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)    
}