input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background-color: #f3f3f3;
}

input[type="range"]:focus {
  outline: none;
}

/* --- track --- */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  background-color: #046b99;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  background-color: #046b99;
  cursor: pointer;
}

input[type="range"]::-ms-track {
  margin: 7px 0;
  border: 1px solid transparent;
  width: 100%;
  height: 2px;
  color: transparent;
  cursor: pointer;
}

input[type="range"]::-ms-fill-lower {
  background-color: #046b99;
}

input[type="range"]::-ms-fill-upper {
  background-color: #046b99;
}

/* --- thumb --- */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #046b99;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: #fff;
  cursor: pointer;
}

input[type="range"]::-moz-range-progress {
  background-color: #046b99;
}

input[type="range"]::-moz-range-thumb {
  border: 1px solid #046b99;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: #fff;
  cursor: pointer;
}

/*  testing  */

input[type="range"]::-moz-range-track {
  background-color: #046b99;
}

/* end testing */

.slidecontainer {
  margin-left: 1.25rem;
  width: 89%;
}

@media only screen and (min-width: 1200px) {
  .slidecontainer {
    margin-left: 1.25rem;
    width: 94%;
  }
}

@media only screen and (max-width: 991px) {
  .slidecontainer {
    width: 86%;
  }
}

.firefox input[type="range"]::-moz-range-track {
  border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #fff;
}

.firefox input[type="range"]::-moz-range-thumb {
  background: #ecf0f1;
  border: 1px solid #bdc3c7;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
}

.slider-wrapper {
  background-color: #f3f3f3;
}