/* https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */

/********** Range Input Styles **********/

/* Range Reset */
input[type="range"] {
  -webkit-appearance: none;
   appearance: none;
   background: transparent;
   cursor: pointer;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/

/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid #1a2445;
  border-right-color: #3a506b;
  border-bottom-color: #3a506b;
  background-color: #2e2e27;
  background-repeat: repeat-x;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -12px; /* Centers thumb on the track */

  /* custom styles */
  height: 11px;
  margin-top: -4px;
  width: 5px;
  background: #640000;
  border: 1px solid #812b25;
  border-right-color: #21110f;
  border-bottom-color: #21110f;
}

input[type="range"]:focus::-webkit-slider-thumb {
  border: 1px solid #21110f;
  border-right-color: #812b25;
  border-bottom-color: #812b25;
}

/******** Firefox styles ********/

/* slider track */
input[type="range"]::-moz-range-track {
  height: 5px;
  border: 1px solid #1a2445;
  border-right-color: #3a506b;
  border-bottom-color: #3a506b;
  background-color: #2e2e27;
  background-repeat: repeat-x;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  border: none; /*Removes extra border that FF applies*/
  border-radius: 0; /*Removes default border-radius that FF applies*/

  /* custom styles */
  height: 11px;
  margin-top: -4px;
  width: 5px;
  background: #640000;
  border: 1px solid #812b25;
  border-right-color: #21110f;
  border-bottom-color: #21110f;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #053a5f;
  outline: 3px solid #053a5f;
  outline-offset: 0.125rem;
}