body {
      font-family: Roboto, sans-serif;
      padding: 2rem;
      background-color:#1f232b;
    }

    .container {
      max-width: 600px;
      margin: auto;
	  margin-top:2rem;
      background: #3A3A3A;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .input-group {
      margin-bottom: 1rem;
    }
	h2
	{
		color: #48D7FF;
		font-family: Agency;
	}
	
	h3
	{
		color: white;
		font-family: Agency;
	}
    label {
      display: block;
      font-weight: bold;
      margin-bottom: 0.25rem;
	  color: white;
	  
    }
    input[type="number"]
	{
	 width: 20%;
      padding: 0.5rem;
      font-size: 1rem;
	}
	
    .output {
      font-size: 1.25rem;
      font-weight: bold;
      margin-top: 1rem;
	  color:white;
    }
    .slider-value {
      text-align: right;
      margin-top: -1.5rem;
      margin-bottom: 0.5rem;
	  color: white;
    }
	
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
	 z-index: 2;
	 //border-radius: 0; /* iOS */
     //overflow: hidden;
     width: 90%;
     //-webkit-appearance: none;
      background-color: #000000;
	 padding: 0.5rem;
     //font-size: 1rem;
    }
    /*
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;	  
      -webkit-appearance: none;
      color: #000000;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
	  z-index:0;
      width: 7px;
      -webkit-appearance: none;
      height: 13px;
      cursor: ew-resize;
      background: #48D7FF;
	 // background: url('arrow.png');
      box-shadow: -80px 0 0 80px #000000;
    }

}*/
/** FF*/
/*
input[type="range"]::-moz-range-progress {
  background-color: #48D7FF; 
}
input[type="range"]::-moz-range-track {  
  background-color: #000000;
}
*/
/* IE*/
/*
input[type="range"]::-ms-fill-lower {
  background-color: #000000; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #000000;
}
*/