body {
  font-size: 20px;
  font-family: sans-serif;
}

/*
 * Toggle switches, from https://www.w3schools.com/howto/howto_css_switch.asp
 */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 1em;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 0.8em;
  width: 0.8em;
  left: 0.1em;
  bottom: 0.1em;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: red;
}

input:focus + .slider {
  box-shadow: 0 0 4px green;
}

input:checked + .slider:before {
  -webkit-transform: translateX(1em);
  -ms-transform: translateX(1em);
  transform: translateX(1em);
}

/* Rounded sliders */
.slider.round {
  border-radius: 0.5em;
}

.slider.round:before {
  border-radius: 0.4em;
}

/* Thermometers */
div.thermometer {
	background: rgb(240,240,240);
	overflow: hidden;
	height: 300px;
	width: 60px;
	box-shadow: 0 0 0.7em inset;
	border-radius: 10em;
	padding-top: .7%;
	padding-bottom: .7%;
  	position: relative;
}

div.thermometer > .tick {
  position: absolute;
  left: 10px;
  width: 15px;
  border-width: 1px;
  border-color: black;
  border-style: solid none none none;
}

div.thermometer > .tick_minor {
  position: absolute;
  left: 17px;
  width: 8px;
  border-width: 1px;
  border-color: black;
  border-style: solid none none none;
}

div.thermometer > .tick > .label {
  position: relative;
  top: -.7em;
  left: 25px;
}

div.thermometer > .meter {
	background: -webkit-linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));
	background: -moz-linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));
	background: -o-linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));
	background: -ms-linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));
	background: linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));
	border-radius: 3px;
	height: 200%;
	position: absolute;
	left:25px;
	width:10px;
}
div.thermometer > .meter_inner {
	background: -webkit-linear-gradient(left, rgba(253, 38, 73, 0.75), rgba(216, 29, 29, .75)) !important;
	background: -moz-linear-gradient(left, rgba(253, 38, 73, 0.75), rgba(216, 29, 29, .75)) !important;
	background: -o-linear-gradient(left, rgba(253, 38, 73, 0.75), rgba(216, 29, 29, .75)) !important;
	background: -ms-linear-gradient(left, rgba(253, 38, 73, 0.75), rgba(216, 29, 29, .75)) !important;
	background: linear-gradient(left, rgba(253, 38, 73, 0.75), rgba(216, 29, 29, .75)) !important;
	border-radius: 3px;
	height: 200%;
	position: absolute;
	left:28px;
	width:4px;
}

div.therm_slider {
  position: absolute;
  left: 4px;
  height: 0px;
}

div.therm_slider > input {
  display: none;
}

div.therm_slider > div {
/*
  border-left: 15px solid rgba(95, 100, 221, 0.75);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  height: 1px;
  top: -10px;
*/
  border-left: 20px solid rgba(95, 100, 221, 0.75);
  border-right: 20px solid rgba(95, 100, 221, 0.75);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  height: 1px;
  width: 12px;
  top: -15px;
  position: relative;
}