.sliders {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:0px 5px 0px 5px;
  margin:auto;
  width: 100%;
}

.slider-container {
  xborder:1px solid lime;
  width: 100%;

  position:relative;
  display:flex;
  align-items: center;
  justify-content: center;
  color:rgb(204, 204, 204);
  font-size:0.9em;
  font-family: Roboto Mono;
  margin:auto;
}

.slider-container > .amount {
  xborder:1px solid red;
  position:absolute;
  z-index:2;
  pointer-events:none;
  width:90%;
  display:flex;
  align-items: center;
  justify-content: start;
  padding-left:10%;

  text-shadow: 0px 0px 2px rgba(0,0,0,0.5)
}

.slider {
  border:2px solid rgb(108, 108, 108);
  border-radius:5px;
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background-color: #232323;
  outline: none;
  xopacity: 0.7;
  -webkit-transition: .2s;
  transition: background-color .2s;
  cursor: pointer;
  overflow: hidden;

  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.8)

}

.slider:hover {
  opacity: 1;
  background-color: #07233c;
}



.slider::-webkit-slider-thumb {
  xborder-radius:100%;
  -webkit-appearance: none;
  appearance: none;
  width: 4%;
  height: 100%;
  cursor: pointer;
  xbackground: #cbcbcb;

  background:rgba(255,255,255,0.5);

}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  cursor: pointer;
  background:rgba(0,0,0,0.5);

  xbox-shadow: 5px 5px 5px lime;
}


input[type="range"]::-ms-fill-lower {
  xbackground-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  xbackground-color: #13bba4;
}

input[type="range"]::-moz-range-progress {
  xbackground-color: #43e5f7; 
}
input[type='range']::-webkit-slider-runnable-track {
  height: var(--slider-height);
  -webkit-appearance: none;
  xcolor: #13bba4;
 
  margin-top: -1px;
}