/* (A) MATERIAL ICONS */
.aWrap .svg-inline--fa {
  color: white !important;
}

/* (B) WRAPPER */
.aWrap {
  display: flex;
  padding: 3.226px 6px;
align-items: center;
gap: 3px;
flex: 1 0 0; border-radius: 3.871px;
  background: linear-gradient(180deg, #4EA1FF 42.5%, #0557B4 100%), #87817E;
  width: 192px;
 
}

.aWrap,
.aWrap * {
  box-sizing: border-box;
}

/* (C) PLAY/PAUSE BUTTON */
.aPlay {
  padding: 0;
  margin: 0;
  background: 0;
  border: 0;
  cursor: pointer;
}

/* (D) TIME */
.aCron {
  font-size: 14px;
  color: #cbcbcb;
  margin: 0 3px; white-space: nowrap;
}

/* (E) RANGE SLIDERS */
/* (E1) HIDE DEFAULT */
.aWrap input[type="range"] {
  appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  width: 65px;
  padding: 0;
  margin: 0;
  background: 0;
}

.range,
.range-volume {
  position: relative;
  display: flex;
  align-items: center;
}
.range-volume {  display: none;}

.range input,
.range-volume input {
  position: relative;
  z-index: 1;
}

.range .change-range,
.range-volume .change-range {
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  width: 0px;
  background-color: rgb(187, 187, 187);
  border-radius: 10px 0 0 10px;
}

.range-volume .change-range {
  height: 10px;
  width: 95%;
}
.aPlayIco {width: 15px;
  display: inline-block;}
.under-ranger {
  position: absolute;
  left: 0;
  top: 1;
  height: 4px;
  width: 100%;
  background-color:#fff;
  border-radius: 10px;
}

.range-volume .under-ranger {
  height: 10px;
}

.aWrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
}

/* (E2) CUSTOM SLIDER TRACK */
.aWrap input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 6px;
  border-radius: 10px;
}

/* (E3) CUSTOM SLIDER BUTTON */
.aWrap input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  position: relative;
  cursor: pointer;
  margin-top: -5px;
}

.aWrap input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  position: relative;
  cursor: pointer;
  margin-top: -5px;
}

/* (F) VOLUME */
.aVolIco {
  margin: 0 2px;
  cursor: pointer;
}

input.aVolume {
  width: 100px !important;
}

.aVolume::-webkit-slider-runnable-track {
  height: 10px !important;
}

.aVolume::-webkit-slider-thumb {
  margin-top: -3px !important;
}

.aVolume::-moz-range-thumb {
  margin-top: -3px !important;
}

.volume-container {
  display: flex;
  align-items: center;
}