/****************
|  sliders.css  |
****************/

/******************************************************************************
|  https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/  |
*******************************************************************************
|  Applying base CSS styles  |
*****************************/

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  /* hides the slider so that a custom slider can be made */
  width: 100%;
  /* specific width is required for Firefox */
  background-color: transparent;
  /* otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
  /* removes the blue border */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* hides the slider so custom styles can be added */
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

/**********************
|  Styling the Thumb  |
**********************/

/* special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid black;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  height: 36px;
  width: 16px;

  margin-top: -14px;
  /* you need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  /* add cool effects to your sliders */
}

/* all the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  border: 1px solid black;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  height: 36px;
  width: 16px;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  border: 1px solid black;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  height: 36px;
  width: 16px;
}

/**********************
|  Styling the Track  |
**********************/

input[type=range]::-webkit-slider-runnable-track {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  background-color: rgb(48, 113, 169);
  border: 0.2px solid rgb(1, 1, 1);
  border-radius: 1.3px;
  cursor: pointer;
  height: 8.4px;
  width: 100%;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: rgb(54, 126, 189);
}

input[type=range]::-moz-range-track {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  background-color: rgb(48, 113, 169);
  border: 0.2px solid rgb(1, 1, 1);
  border-radius: 1.3px;
  cursor: pointer;
  height: 8.4px;
  width: 100%;
}

input[type=range]::-ms-track {
  background-color: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
  cursor: pointer;
  height: 8.4px;
  width: 100%;
}

input[type=range]::-ms-fill-lower {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  background-color: rgb(42, 100, 149);
  border: 0.2px solid rgb(1, 1, 1);
  border-radius: 2.6px;
}

input[type=range]:focus::-ms-fill-lower {
  background-color: rgb(48, 113, 169);
}

input[type=range]::-ms-fill-upper {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  background-color: rgb(48, 113, 169);
  border: 0.2px solid rgb(1, 1, 1);
  border-radius: 2.6px;
}

input[type=range]:focus::-ms-fill-upper {
  background-color: rgb(54, 126, 189);
}

/************************************
|  Building a Complete Range Input  |
****************************************************
|  Full CSS to Style Range Inputs in All Browsers  |
***************************************************/

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  margin: 18px 0;
  width: 100%;
}

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

input[type=range]::-webkit-slider-runnable-track {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  background-color: rgb(48, 113, 169);
  border: 0.2px solid rgb(1, 1, 1);
  border-radius: 1.3px;
  cursor: pointer;
  height: 8.4px;
  width: 100%;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  border: 1px solid black;
  background-color: white;
  border-radius: 3px;
  margin-top: -14px;
  cursor: pointer;
  height: 36px;
  width: 16px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: rgb(54, 126, 189);
}

input[type=range]::-moz-range-track {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  background-color: rgb(48, 113, 169);
  border: 0.2px solid rgb(1, 1, 1);
  border-radius: 1.3px;
  cursor: pointer;
  height: 8.4px;
  width: 100%;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  border: 1px solid black;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  height: 36px;
  width: 16px;
}

input[type=range]::-ms-track {
  background-color: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
  cursor: pointer;
  height: 8.4px;
  width: 100%;
}

input[type=range]::-ms-fill-lower {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  background-color: rgb(42, 100, 149);
  border: 0.2px solid rgb(1, 1, 1);
  border-radius: 2.6px;
}

input[type=range]::-ms-fill-upper {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  background-color: rgb(48, 113, 169);
  border: 0.2px solid rgb(1, 1, 1);
  border-radius: 2.6px;
}

input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px rgb(13, 13, 13);
  border: 1px solid black;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  height: 36px;
  width: 16px;
}

input[type=range]:focus::-ms-fill-lower {
  background-color: rgb(48, 113, 169);
}

input[type=range]:focus::-ms-fill-upper {
  background-color: rgb(54, 126, 189);
}

/*************
|  My Twist  |
*************/

#red-thumb1::-webkit-slider-thumb,
#red-thumb2::-webkit-slider-thumb {
  background-color: rgb(224, 0, 0);
}

#grn-thumb1::-webkit-slider-thumb,
#grn-thumb2::-webkit-slider-thumb {
  background-color: rgb(0, 180, 0);
}

#blu-thumb1::-webkit-slider-thumb,
#blu-thumb2::-webkit-slider-thumb {
  background-color: rgb(0, 0, 255);
}

#red-thumb1::-moz-range-thumb,
#red-thumb2::-moz-range-thumb {
  background-color: rgb(224, 0, 0);
}

#grn-thumb1::-moz-range-thumb,
#grn-thumb2::-moz-range-thumb {
  background-color: rgb(0, 180, 0);
}

#blu-thumb1::-moz-range-thumb,
#blu-thumb2::-moz-range-thumb {
  background-color: rgb(0, 0, 255);
}