/* (A) MATERIAL ICONS */
.material-icons {
    font-size: 28px;
    color: #efff6a;
  }
  
/* icons */
.icons ul li a {
  display: flex;
  justify-content:center;
  flex:1;
}
.icons .icon{
  font-size: 2rem;
  flex: 0 0 3rem;
}

.icons .text {
  font-size: 1.4rem;
}
.icons .text span {
  font-size: .8rem;
  display: block;
  margin-top: 10px;
}

@media screen and (min-width:480px) {
  .icons ul {
      display: flex;
      flex-wrap: wrap;
  }
  .icons ul li {
      display: flex;
      flex: 0 0 calc( 50% - 2rem);
  }
}
@media screen and (min-width:768px) {
  .icons ul li {
      display: flex;
      flex: 1;
  }
}




  /* (B) WRAPPER */
  #aWrap {
    font-family: arial, sans-serif;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    max-width: 500px;
    padding: 10px;
    border-radius: 10px;
    background: #484848;
  }
  
  /* (C) PLAY/PAUSE BUTTON */
  #aPlay {
    padding: 0;
    margin: 0;
    background: 0;
    border: 0;
    cursor: pointer;
  }
  /*<i class="fa-solid fa-circle-play"></i>*/
  
  /* (D) TIME */
  #aCron {
    font-size: 14px;
    color: #cbcbcb;
    margin: 0 10px;
  }
  
  /* (E) RANGE SLIDERS */
  /* (E1) HIDE DEFAULT */
  #aWrap input[type="range"] {
    box-sizing: border-box;
    appearance: none;
    border: none;
    outline: none;
    box-shadow: none;
    width: 150px;
    padding: 0;
    margin: 0;
    background: 0;
  }
  #aWrap input[type="range"]::-webkit-slider-thumb {
    appearance: none;
  }
  
  /* (E2) CUSTOM SLIDER TRACK */
  #aWrap input[type=range]::-webkit-slider-runnable-track {
    background: #626262;
  }
  #aWrap input[type=range]::-moz-range-track {
    background: #626262;
  }
  
  /* (E3) CUSTOM SLIDER BUTTON */
  #aWrap input[type=range]::-webkit-slider-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 0;
    background: #fff;
  }
  #aWrap input[type=range]::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 0;
    background: #fff;
  }
  
  /* (F) VOLUME */
  #aVolIco {
    margin: 0 10px;
  }
  
  /* (G) PLAYLIST */
  #aList {
    width: 100%;
    padding: 10px;
    margin: 10px;
    color: #7e7e7e;
    background: #323232;
  }
  .aRow {
    cursor: pointer;
    padding: 10px 0;
  }
  .aRow.now {
    color: #fea;
  }