.radio-player {
position: absolute;
    display: block;
    width: 299px;
    height: 71px;
    margin: 1px;

    }
    
    .play-button {
      position: absolute;
    top: 37px;
    left: 103px;
    height: 21px;
    width: 44px;
      cursor: pointer;
      
    }
    
    
    #volumeControl {
      width: 120px;
      cursor: pointer;
    }
    .volume-container {
          top: 13px;
    left: 277px;
    position: absolute;
      width: 9px;
    height: 45px;
    }
    
    .volume-track {
    position: absolute;
    bottom: 0;
    width: 9px;
    height: 45px;
    background: transparent;
    border-radius: 2px;
    }
    
    .volume-fill {
          position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    background: #ffcad8;
    border-radius: 2px;
    transition: none;
    }
    
    .volume-knob {
      position: absolute;
      width: 13px;
      height: 11px;
      margin: 0 0 0 -2px;
      background-image: url("/static/image/body/radio/knob.png");
      background-color: var(--skincolor); 
      background-blend-mode: var(--skincolor-blendmode); 
      background-size: cover;
      background-repeat: no-repeat;
      cursor: pointer;
      transition: none;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-user-select: none;
      border-radius: 2px;
    }
    
    .volume-knob:hover {
      background-image: url("/static/image/body/radio/knob_bright.png");
    }
    

    .listener-count {
      position: absolute;
      color: #ffffff;
      display: none;
    }

    #trackArt {
width: 45px;
    height: 45px;
    position: absolute;
        top: 13px;
    left: 13px;
    border-radius: 2px;


      
      /* Fade transition */
      transition: opacity 0.5s ease-in-out;
      opacity: 1;
    }
    /* .now-playing {
    overflow: hidden;
    white-space: nowrap;
    width: 81px;
    height: 14px;
    position: absolute;
    top: 17px;
    left: 67px;
    color: #fff;
    
      transition: opacity 0.5s ease-in-out;
      opacity: 1;
    } */

    .now-playing {
      position: absolute;
      top: 17px;
      left: 66px;
      width: 81px;
      height: 14px;
      overflow: hidden;
      transition: opacity 0.5s ease-in-out;
      opacity: 1;
    }
    
    .marquee-track {
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
    
    .marquee-content {
      display: inline-block;
      white-space: nowrap;
      animation: radioMarquee 20s linear infinite;
      font-size: 9px;
      font-family: 'arial', sans-serif;
      color: white;
    }
    
    .marquee-content span {
      display: inline-block;
      padding-right: 60px; /* gap between repeats */
    }

    
    @keyframes radioMarquee {
      0%, 30% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    #recentTracks {
      position: absolute;
      width: 71px;
      height: 42px;
      top: 16px;
      left: 195px;
      overflow: hidden;
      color: #fff;
      line-height: 10px;
      font-size: 9px;
    }

    #recentList {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #statusImage {
      position: absolute;
    width: 29px;
    height: 16px;
    top: 13px;
    left: 155px;
    }

    #prevBtn {
  top: 37px;
  left: 66px;
  width: 29px;
  height: 21px;
  background-image: url("/static/image/body/radio/prev.png");
  background-color: var(--skincolor); 
  background-blend-mode: var(--skincolor-blendmode); 
  background-size: cover;
    }
    
    #prevBtn:hover {
      background-image: url("/static/image/body/radio/prev_bright.png");
    }
    

    #nextBtn {
  top: 37px;
  left: 155px;
  width: 29px;
  height: 21px;
  background-image: url("/static/image/body/radio/next.png");
  background-color: var(--skincolor); 
  background-blend-mode: var(--skincolor-blendmode); 
  background-size: cover;
    }

    #nextBtn:hover {
      background-image: url("/static/image/body/radio/next_bright.png");
    }



#recentList li {
    white-space: nowrap;       /* prevent the text from wrapping */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show … when too long */
}

#radioimagegloss {
position: absolute;
    top: 13px;
    left: 13px;
    opacity: 26%;

}

/* #radiotitlegloss {
position: absolute;
    top: 13px;
    left: 66px;
    opacity: 26%;
}

#radiodescgloss {
position: absolute;
    top: 13px;
    left: 192px;
    opacity: 26%;
}

#radioindigloss {
position: absolute;
    top: 13px;
    left: 192px;
    opacity: 26%;
}

#radiovolgloss {
position: absolute;
    top: 13px;
    left: 192px;
    opacity: 26%;
} */

.radio-btn {
  position: absolute;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 2px;
  transition: 0.2s;
}

#playBtn {
  top: 37px;
  left: 103px;
  width: 44px;
  height: 21px;
  background-image: url("/static/image/body/radio/play.png");
  background-color: var(--skincolor); 
  background-blend-mode: var(--skincolor-blendmode); 
  background-size: cover;
}

#playBtn:hover {
  background-image: url("/static/image/body/radio/play_bright.png");
}

#playBtn.playing {
  background-image: url("/static/image/body/radio/pause.png");
  background-color: var(--skincolor); 
  background-blend-mode: var(--skincolor-blendmode); 
  background-size: cover;
}

#playBtn.playing:hover {
  background-image: url("/static/image/body/radio/pause_bright.png");
}