:root{
    --primary-color: #CF037F;
    --acent-color: #b4066e;
    --dark-mode-color:#424242;
    --player-line-color: #595959;
    --player-fade-color: #c5c5c5;
  }

  .vy-player-wrapper{
      background-color: var(--dark-mode-color);
      border: 1px solid var(--player-line-color);
  }
    .vy-player-progress-wrapper{
        background-color: var(--player-line-color);
  }
  .vy-player-progress-wrapper .vy-player-progress-status{
        background-color: #fff;
  }
  .vy-player-progress-wrapper .vy-player-progress-dot{
      background-color: rgb(255, 255, 255, 0);
    }
  .vy-player-progress-wrapper .vy-player-progress-dot .dot-inner{
      background-color: #fff;
    }
  
  .vy-player-progress-wrapper .vy-player-progress-status.fade-color{
      background-color: var(--player-fade-color);
  }
  
  .vy-player-progress-wrapper .vy-player-progress-status:hover,
  .vy-player-progress-wrapper .vy-player-progress-status:focus,
  .vy-player-progress-wrapper .vy-player-progress-status:active{
      background-color: var(--player-fade-color);
  }
  
  
  .vy-player-progress-wrapper .vy-player-progress-dot:hover,
  .vy-player-progress-wrapper .vy-player-progress-dot:focus,
  .vy-player-progress-wrapper .vy-player-progress-dot:active
  {
    background-color: rgb(255, 255, 255, 0.22);
    }
  .vy-player-progress-wrapper .vy-player-progress-dot.fade-color{
      background-color: rgb(255, 255, 255, 0.22);
  }
  
  .vy-player-progress-wrapper .vy-player-progress-dot .dot-inner.fade-color{
    background-color: var(--player-fade-color);
  }
  
  .vy-player-content-wrap .vy-artist-info .vy-artist-name{
      color: #fff;
      }
   .vy-player-content-wrap .vy-artist-info .vy-song-name{
      color: var(--player-fade-color);
   }
      
   
  .vy-player-wrapper .vy-player-content-wrap .player-item .vy-control-volume-status{
    color: var(--player-fade-color);
  }
  .vy-player-content-wrap .player-item svg{
  fill: #fff;
  }
  
  .vy-player-content-wrap .vy-player-controls .vy-previous svg,
  .vy-player-content-wrap .vy-player-controls .vy-next svg
  {
    fill: var(--player-fade-color) !important;
    }
  .vy-player-content-wrap .player-item  svg:hover,
  .vy-player-content-wrap .player-item  svg:focus
  {
  fill: var(--player-fade-color) !important;
  }
  
  .vy-player-content-wrap .player-item .vy-player-controls  .vy-play-pause svg:hover,
  .vy-player-content-wrap .player-item .vy-player-controls  .vy-play-pause svg:focus,
  .vy-player-content-wrap .player-item .vy-player-controls  .vy-play-pause svg:active
  {
      fill: var(--player-fade-color) !important;
  }
  .vy-player-content-wrap .player-item .vy-current-duration,
  .vy-player-content-wrap .player-item .vy-total-duration
  {
    color: var(--player-fade-color);
    }