/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 15rem;
 }
 
 /* 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 {
    background-color: var(--theme-color2);
    border-radius: 0.5rem;
    height: 0.5rem;  
    position: relative;
    top: -6px;
    border: 1px solid black;
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -6px; /* Centers thumb on the track */
 
    /*custom styles*/
    background-color: var(--theme-color1);
    height: 1rem;
    width: 1rem;
    border-radius: 0.5rem;
    border: 1px solid black;
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: var(--theme-color2);
    top: -20px; /* Centers thumb on the track */
    border-radius: 0.5rem;
    height: 0.5rem;
    border: 1px solid black;
 }
 
 /* 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*/
    background-color: var(--theme-color1);
    height: 1rem;
    width: 1rem;
    border-radius: 0.5rem;
    border: 1px solid black;
 }