#volume-container{
  width:100%;
  display:flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px 0px black;
}

#volume-container > #btn-mute{
	color: #a19f9f;
	width:25px;
	cursor:pointer;
	font-size:1.2em;
	text-shadow: 1px 1px 0px black;
	transition: text-shadow 0.3s;
}

#volume-container > input#vol-control{
  border:none;
  border-radius:15px;
  width:75%;
  cursor:pointer;	
  margin: 0px 5px 0px 5px;
}

#volume-container > #vol-indicator {
	display:inline-block;
	width:25px;
	color: #1db954;
	transition: text-shadow 0.3s;
}

#volume-section{
	max-width:250px;
	min-width:250px;
	width:60%;
	margin-bottom:10px;
}


/* Slider styling source: https://stackoverflow.com/a/72837476 */
:root {
    --slider-width: 250px;
    --slider-height: 15px;
  }

input[type='range'] {
    cursor: ew-resize;
    overflow: hidden;
  }
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      width: var(--slider-width);
      -webkit-appearance: none;
      background-color: #353535;
    }
    input[type='range']::-webkit-slider-runnable-track {
      height: var(--slider-height);
      -webkit-appearance: none;
      color: #7a7a7a;
      
      margin-top: -1px;
    }
    input[type='range']::-webkit-slider-thumb {
      width: 0px;
      -webkit-appearance: none;
      height: var(--slider-height);
      box-shadow: calc(-1 * var(--slider-width)) 0 0 var(--slider-width) #7a7a7a;
    }
  }
  
  /* FF */
  input[type="range"]::-moz-range-progress {
    background-color: #7a7a7a; 
  }
  input[type="range"]::-moz-range-thumb {
    height: var(--slider-height);
    width: 0;
    border: none;
    box-shadow: calc(-1 * var(--slider-width)) 0 0 var(--slider-width) #7a7a7a;
    box-sizing: border-box;
  }
  
  /* IE */
  input[type="range"]::-ms-fill-lower {
    background-color: #7a7a7a; 
  }
  input[type="range"]::-ms-fill-upper {  
    background-color: #2a2a2a;
  }