.label {
     display: flex;
     align-items: center;
     margin-top: 5px;
}

.menuToggle {
     z-index: 1;
     position: absolute;
     top: 25px;
     left: 25px;
     color: #555;
     font-size: 2em;
}
 .menuToggle:hover {
     cursor: pointer;
     color: #666;
}
 .menuToggle:before {
     content: '\2630';
}
 .menu {
     position: absolute;
     left: -500px;
     top: 25px;
     background-color: #555;
     border-radius: 15px;
     padding: 20px;
     padding-left: 60px;
}
 .open {
     animation-name: fade-in;
     animation-duration: 0.5s;
     left: 15px;
}
 .close {
     animation-name: fade-out;
     animation-duration: 0.5s;
}
 .close-button {
     color: black !important;
     animation-name: fade-in-toggle;
     animation-duration: 0.5s;
}
 .close-button:before {
     content: "✖" !important;
}
 @keyframes fade-in-toggle {
     from {
        left: -500px;
    }
     to {
        left: 25px;
    }
}
 @keyframes fade-in {
     from {
        left: -500px;
    }
     to {
        left: 15px;
    }
}
 @keyframes fade-out {
     from {
        left: 15px;
    }
     to {
        left: -500px;
    }
}

input[type=range] {
  width: 100%;
  margin: 4px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #008c18;
  border-radius: 4px;
  width: 100%;
  height: 8px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -4px;
  width: 16px;
  height: 16px;
  background: #008c18;
  border-radius: 8px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]::-moz-range-track {
  background: #008c18;
  border-radius: 4px;
  width: 100%;
  height: 8px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #008c18;
  border-radius: 8px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 4px 0;
  color: transparent;
  width: 100%;
  height: 8px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #006812;
  border-radius: 8px;
}
input[type=range]::-ms-fill-upper {
  background: #008c18;
  border-radius: 8px;
}
input[type=range]::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #008c18;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 0;
  /*Needed to keep the Edge thumb centred*/
}

/* The switch - the box around the slider */
 .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
     margin-left: auto;
}
/* Hide default HTML checkbox */
 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
}
/* The slider */
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #4a4a4a;
     -webkit-transition: .4s;
     transition: .4s;
}
 .slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
}
 input:checked + .slider {
     background-color: #008c18;
}
 input:focus + .slider {
     box-shadow: 0 0 1px #008c18;
}
 input:checked + .slider:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
}
/* Rounded sliders */
 .slider.round {
     border-radius: 34px;
}
 .slider.round:before {
     border-radius: 50%;
}