.music-holder { max-width: 400px; margin-bottom: 1em; }
.music-holder .coverart { line-height: 0; margin-bottom: 1em; }
.music-holder .coverart img { max-width: 100%; }

/* if you want to observe the player unhide this */
.audiojs { display: none; } 
.audiojs { position: relative; max-width: 400px; height: 45px; border: 1px solid var(--color); background: transparent; overflow: hidden; display: none; } 
.audiojs audio { position: absolute; } 
.audiojs .play-pause { position: absolute; bottom: 15px; left: 15px; z-index: 50; width: 16px; height: 20px; padding: 0; margin: 0; overflow: hidden; display: none; } 
.audiojs p { display: none; width: 20px; margin-bottom: 0 !important; cursor: pointer; line-height: 0; } 
.audiojs .play { display: block; } 
.audiojs .play:before {  } 
.audiojs .scrubber { position: absolute; left: 0; bottom: 0; width: 100%; background: rgb(206, 206, 206); height: 5px; margin: 0; overflow: hidden; z-index: 1; } 
.audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; z-index: 1; 
  background-color: var(--color); } 
.audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000; 
  background-color: var(--color5); opacity: 0.3; } 
.audiojs .time { position: absolute; right: 15px; bottom: 13px; z-index: 2; color: var(--color); font-family: monospace; font-size: 12px; line-height: 12px !important; } 
.audiojs .time em { padding-right: 2px; font-style: normal; } 
.audiojs .time strong { padding-left: 2px; font-weight: normal; } 
.audiojs .error-message { display: none; margin: 0px 10px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: var(--color); 
  text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; } 
.audiojs .error-message a { color: var(--color); text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }

.audiojs .songtitle { position: absolute; left: 15px; bottom: 10px; right: 12px;  overflow: hidden; z-index: 5; line-height: 1.2em; font-size: 14px; display: none; }

.audiojs .previous-next { position: absolute; left: 15px; bottom: 10px; width: 100px; overflow: hidden; z-index: 5; line-height: 1.2em; font-size: 16px; height: 20px; display: flex; } 
.audiojs .previous-next .previous { margin-right: 9px; }
.audiojs .previous-next .previous:before {  }
.audiojs .previous-next .next { }
.audiojs .previous-next .next:before {  }
        
.audiojs .play {  } 
.audiojs .loading {  } 
.audiojs .error {  } 
.audiojs .pause {  } 
        
.playing .play, .playing .loading, .playing .error { display: none; } 
.playing .pause { display: block; } 
.playing .pause:before {  }

.loading .play, .loading .pause, .loading .error { display: none; } 
.loading .loading { display: block; } 

.error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; } 
.error .error { display: block; } 
.error .play-pause p { cursor: auto; } 
.error .error-message { display: block; }


ol.audio-list { counter-reset: li; }
ol.audio-list li { display: flex; }
ol.audio-list li:before {
    counter-increment: li;
    content: counter(li, decimal-leading-zero);
    width: 27px;
}
ol.audio-list li a { text-decoration: none !important; }
ol.audio-list li span { width: 27px; }
ol.audio-list li.playing { font-weight: 600; }
/* ol.audio-list li.playing a:before { content: '_ '; } */
ol.audio-list li.playing span { /* text-indent: -99999px; background-color: blue; */ }
ol.audio-list li.playing span:before { content: '\2759\200A\200A\200A\2759'; }
ol.audio-list li.paused span:before { content: '\25BA'; }

ol.audio-list-single {  }
ol.audio-list-single li { display: flex; }
ol.audio-list-single li:before {  }
ol.audio-list-single li a { text-decoration: none !important; }
ol.audio-list-single li span { width: 27px; }
ol.audio-list-single li.playing { font-weight: normal; }
/* ol.audio-list li.playing a:before { content: '_ '; } */
ol.audio-list-single li.playing span { /* text-indent: -99999px; background-color: blue; */ }
ol.audio-list-single li.playing span:before { content: '\2759\200A\200A\200A\2759'; }
ol.audio-list-single li.paused span:before { content: '\25BA'; }

.audiojs .icons
{
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-style: normal;
    color: var(--color);
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
}
.audiojs .icons:before, .audiojs .icons:after
{
    content: '';
    pointer-events: none;
}
.audiojs .icons.icon-play
{
    width: 0;
    height: 0;
    border-width: 10px 0 10px 16px;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    margin: 0;
}
.audiojs .icons.icon-pause
{
    width: 5px;
    height: 18px;
    margin: 0 20px 0 0;
    box-shadow: inset 0 0 0 32px, 10px 0 0 0;
}

.arrow-next {
    width: 0; 
    height: 0; 
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid var(--color);
}
  
.arrow-previous {
    width: 0; 
    height: 0; 
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 
    border-right: 10px solid var(--color); 
    margin-right: 9px;
}