/*******    Defining color theme   *******/
:root {
  --main_color: #008040;
  --color_hover: #00994d;
  --color_dark: #004d26;
}


/*******    1st slider class with shown thumb   *******/
.slider {
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  height: 35px;
  background: transparent;
  position: relative;
  cursor: pointer;
  background: linear-gradient(90deg, #cccccc 1px, rgba(238, 238, 238, 0) 1px) repeat-x content-box, linear-gradient(90deg, #cccccc 1px, rgba(238, 238, 238, 0) 1px) repeat-x content-box;
  background-size: 25% 6px, calc(100% - 5px) 12px;
  background-position: 1px 30%, 1px 20%;
  padding: 0 15px;
  overflow: visible;
  /*******    The Thumb    *******/
  /*******    The Track    *******/
}
.slider::-webkit-slider-thumb {
  position: relative;
  height: 7px;
  width: 7px;
  transform: scale(3);
  margin-top: -1px;
  border-radius: 500px;
  background: var(--main_color);
  border: 0;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none;
}
.slider::-moz-range-thumb {
  position: relative;
  height: 7px;
  width: 7px;
  transform: scale(3);
  margin-top: -1px;
  border-radius: 500px;
  background: var(--main_color);
  border: 0;
  cursor: pointer;
  z-index: 2;
}
.slider::-ms-thumb {
  position: relative;
  height: 7px;
  width: 7px;
  transform: scale(3);
  margin-top: -1px;
  border-radius: 500px;
  background: var(--main_color);
  border: 0;
  cursor: pointer;
  z-index: 2;
  transform: none;
  margin-top: -2px;
  height: 21px;
  width: 21px;
  border-radius: 21px;
}
.slider::-webkit-slider-runnable-track {
  background-color: #545454;
  height: 5px;
  border-radius: 3px;
}
.slider::-moz-range-track {
  background-color: #545454;
  height: 5px;
  border-radius: 3px;
}
.slider::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.slider::-ms-fill-lower {
  background-color: #545454;
  height: 5px;
  border-radius: 3px;
}
.slider::-ms-fill-upper {
  background-color: #545454;
  height: 5px;
  border-radius: 3px;
}
.slider:focus {
  outline: none;
}





/*******    2nd slider class with hidden thumb   *******/
.slider2 {
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  height: 35px;
  background: transparent;
  position: relative;
  cursor: pointer;
  background: linear-gradient(90deg, #cccccc 1px, rgba(238, 238, 238, 0) 1px) repeat-x content-box, linear-gradient(90deg, #cccccc 1px, rgba(238, 238, 238, 0) 1px) repeat-x content-box;
  background-size: 25% 6px, calc(100% - 5px) 12px;
  background-position: 1px 30%, 1px 20%;
  padding: 0 15px;
  overflow: visible;
  /*******    The Thumb    *******/
  /*******    The Track    *******/
}
.slider2::-webkit-slider-thumb {
  visibility: hidden;
}
.slider2::-moz-range-thumb {
  visibility: hidden;
}
.slider2::-ms-thumb {
  visibility: hidden;
}
.slider2::-webkit-slider-runnable-track {
  background-color: #545454;
  height: 5px;
  border-radius: 3px;
}
.slider2::-moz-range-track {
  background-color: #545454;
  height: 5px;
  border-radius: 3px;
}
.slider2::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.slider2::-ms-fill-lower {
  background-color: #545454;
  height: 5px;
  border-radius: 3px;
}
.slider2::-ms-fill-upper {
  background-color: #545454;
  height: 5px;
  border-radius: 3px;
}
.slider2:focus {
  outline: none;
}


/*******    The wrapper for the range input    *******/
.range-box {
  position: relative;
  background-color: #f4f4f4;
  padding: 0;
  margin: 0 35px;
  overflow: visible;
}
.range-box:after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  background-color: #b3b3b3;
  height: 4px;
}
.range-box .legend-min {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 11px;
  color: #cccccc;
  margin-top: -18px;
  float: left;
  margin-left: 13px;
}
.range-box .legend-max {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 11px;
  color: #cccccc;
  margin-top: -18px;
  float: right;
  margin-right: 11px;
}

/*******    Extra controls on the side    *******/
.no-selection, .control-plus, .control-minus {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.control-minus {
  position: absolute;
  top: 0;
  background-color: var(--main_color);
  color: white;
  width: 35px;
  text-align: center;
  cursor: pointer;
  height: 40px;
  border-bottom: 4px solid var(--color_dark);
  z-index: 1;
  font-weight: bold;
  font-size: 35px;
  line-height: 35px;
  left: -35px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.control-minus:hover {
  top: 1px;
  background-color: var(--color_hover);
  border-bottom-width: 3px;
}
.control-minus:active {
  top: 3px;
  background-color: var(--main_color);
  border-bottom-width: 2px;
}

.control-plus {
  position: absolute;
  top: 0;
  background-color: var(--main_color);
  color: white;
  width: 35px;
  text-align: center;
  cursor: pointer;
  height: 40px;
  border-bottom: 4px solid var(--color_dark);
  z-index: 1;
  font-weight: bold;
  font-size: 35px;
  line-height: 35px;
  right: -35px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.control-plus:hover {
  top: 1px;
  background-color: var(--color_hover);
  border-bottom-width: 3px;
}
.control-plus:active {
  top: 3px;
  background-color: var(--main_color);
  border-bottom-width: 2px;
}