#musicplayer{
    background:rgb(39, 39, 39);
    border:2px solid #ffffff;
    width:100%;
}

.songtitle{
    padding:5px;
    border-bottom:2px solid #e74492;
    display:block;
    font-family: "StarJR Large Compressed";
    color: white;
}

.controls{
    font-size:18px !important;
    background-color:#dbfcff;
    text-align:center;
    width:100%;
}

.controls td{
    padding:8px 5px 0px 5px;
}

.seeking{
    background-color:#dbfcff;
    display:flex;
    justify-content: space-evenly;
    padding:5px;
}

.current-time{
    padding-right:5px;
}

.total-duration{
    padding-left:5px;
}

i.fas:hover{
    cursor:help;
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
    color:#e74492;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background-color:#dbfcff;
}

input[type=range]:focus {
    outline: none;
}

/* Chrome */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: help;
    background: #E74492;
}

input[type=range]::-webkit-slider-thumb {
    height: 10px;
    width: 10px;
    border-radius: 0px;
    background: #E74492;
    cursor: help;
    -webkit-appearance: none;
    margin-top: -4.5px; 
}

/* Firefox */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: help;
    background: #E74492;
}

input[type=range]::-moz-range-thumb {
    height: 10px;
    width: 10px;
    border-radius: 0px;
    background: #E74492;
    cursor: help;
    border:none;
}


/* player.css */
#musicplayer.mp-wrapper{
  background:rgb(0, 0, 0);
  border:2px solid #ffffff;
  width:100%;           /* responsive — fits container */
  max-width:520px;
  padding:6px;
  box-sizing:border-box;
}

.mp-top .songtitle{
  padding:5px;
  border-bottom:2px solid #ffffff;
  display:block;
  font-weight:600;
  white-space:nowrap;
}

.mp-controls{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:6px;
  align-items:center;
  font-size:18px;
  background-color:#000000;
  padding:6px 0;
}

.mp-controls button{
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
}

.mp-controls i.fas{
  color:#ffffff;
}

.seeking{
  background-color:#000000;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  margin-top:6px;
}

.current-time, .total-duration{
  min-width:34px;
  text-align:center;
  font-size:13px;

  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  color: white;
}

input[type=range] {
  -webkit-appearance: none;
  width:100%;
  background-color:#000000;
}

input[type=range]:focus { outline:none; }

input[type=range]::-webkit-slider-runnable-track { height:2px;     background: white; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; margin-top:-4px; background: white; border-radius:0; }

input[type=range]::-moz-range-track { height:2px; background: white; }
input[type=range]::-moz-range-thumb { width:10px; height:10px; background: white; border:none; }

.mp-tracklist { margin-top:8px; max-height:220px; overflow:auto; }
.track-list { list-style:none; padding:0; margin:0; }
.track-list li {
  padding:6px 8px;
  border-bottom:1px solid #ffffff;
  color: white;
  cursor:pointer;
  font-size:14px;
  font-family: "StarJR Large Compressed";
}
.track-list li.playing { background:#ffeef6; color: #26a100; font-weight:600; }
.track-list li:hover { background:#f7f7f7; }