#zoomranger {
    background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
    /*border: solid 1px #82CFD0;*/
    border-radius: 8px;
    height: 7px;
    width: 356px;
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
    z-index: 3;
    
    border-radius: 5em;
    -webkit-appearance: none;   
    appearance: none;
    width: 100%;  
    height: 2px;
    background: currentColor; 
    outline: none;  
    opacity: 0.7;  
    -webkit-transition: .2s; 
    transition: opacity .2s;
    z-index: 2;
    cursor: pointer;
    
    margin-top: 12px;
}

#footer #pageranger {
    background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
    /*border: solid 1px #82CFD0;*/
    border-radius: 8px;
    height: 7px;
    width: 356px;
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
    z-index: 3;
    
    border-radius: 5em;
    -webkit-appearance: none;   
    appearance: none;
    width: 100%;  
    height: 2px;
    background: currentColor; 
    outline: none;  
    opacity: 0.7;  
    -webkit-transition: .2s; 
    transition: opacity .2s;
    z-index: 2;
    cursor: pointer;
}
.slider:hover {
  opacity: 1;  
}

.slider::-moz-range-thumb {
  -webkit-appearance: none;  
  appearance: none;
  width: 10px; 
  height: 10px;  
  background: currentColor; 
  cursor: grab;  
  border-radius: 50%;
}


.slider::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  width: 12px; 
  height: 12px;   
  background: currentColor;   
  
  cursor: grab;  
  border-radius: 50%;
}

.slider.dark::-moz-range-thumb {
    background: var(--dark-color); 
}

.slider.light::-moz-range-thumb {
    background: var(--light-color); 
}