.playlist-trigger {position: fixed;right: 60px;bottom: 60px;background: var(--c-main);width: 80px;height: 80px;line-height: 80px;border-radius: 50%;color: #fff;text-align: center;font-size: 29px;cursor: pointer;}
.playlist-trigger i {}
.playlist-trigger.playing i {display:none}
.playlist-trigger .count { background: #d50000; font-size: 11px; font-weight: 600; width: 25px; height: 25px; border-radius: 50%; line-height: 25px; position: absolute; top: -2px; right: -1px; }

.playlist-trigger .waveform { display: flex; align-items: center; gap: 2px; justify-content: center; height: 80px; }
.playlist-trigger .waveform span { display: block; width: 4px; height: 8px; background-color: #fff; border-radius: 3px; }
.playlist-trigger.playing .waveform span {animation: wave 1.2s ease-in-out infinite;}

.playlist-trigger .waveform span:nth-child(1) { animation-delay: 0s; animation-duration: 1.1s;height: 4px; }
.playlist-trigger .waveform span:nth-child(2) { animation-delay: 0.15s; animation-duration: 1.3s;height: 8px;}
.playlist-trigger .waveform span:nth-child(3) { animation-delay: 0.25s; animation-duration: 1.2s;height: 17px; }
.playlist-trigger .waveform span:nth-child(4) { animation-delay: 0.05s; animation-duration: 1.4s;height: 30px; }
.playlist-trigger .waveform span:nth-child(5) { animation-delay: 0.2s; animation-duration: 1.1s;height: 15px; }
.playlist-trigger .waveform span:nth-child(6) { animation-delay: 0.1s; animation-duration: 1.5s;height: 22px; }
.playlist-trigger .waveform span:nth-child(7) { animation-delay: 0.3s; animation-duration: 1.25s;height: 4px; }

@keyframes wave {
  0%, 100% { height: 6px; }
  25% { height: 10px; }
  50% { height: 30px; }
  75% { height: 12px; }
}


.audio-player-wrapper {position: fixed;bottom: 60px;left: 50%;transform: translateX(-50%);max-width: 600px;min-width: 600px;border-radius: 20px;overflow: hidden;/* display:none; */border: solid 3px var(--c-main);background: var(--c-main);padding: 10px;box-shadow: 0 0 30px rgb(0 0 0 / 40%);opacity: 0;pointer-events: none;transition: all 0.4s;}
.audio-player-wrapper.active {/* display:block; */opacity: 1;pointer-events: auto;}
.audio-player-wrapper .playlist {background: #222;color: #fff;padding: 20px 10px 20px 20px;font-size: 14px;display: none;border-radius: 10px;margin: 0 0 10px 0;}
.audio-player-wrapper .playlist.active {display:block}

.audio-player-wrapper .playlist ul {list-style: none;padding: 0 15px 0 0;max-height: 193px;overflow: auto;margin: 0;}
.audio-player-wrapper .playlist ul::-webkit-scrollbar {width: 4px;}
.audio-player-wrapper .playlist ul::-webkit-scrollbar-thumb {background-color: #999; border-radius: 6px; cursor:grab;}
.audio-player-wrapper .playlist ul::-webkit-scrollbar-thumb:hover {background:#fff;}
.audio-player-wrapper .playlist ul li {padding: 4px 0;cursor: pointer;display: flex;align-items: flex-start;background: #222;border: none;color: #fff;align-items: center;}
.audio-player-wrapper .playlist ul li img {width: 40px;height: 40px;object-fit: cover;border-radius: 5px;}
.audio-player-wrapper .playlist ul li .text {padding: 0 0 0 10px;width: calc(100% - 90px);}
.audio-player-wrapper .playlist ul li .text .name {font-weight: 600;font-size: 12px;display: flex;align-items: flex-end;position: relative;display: block;            /* or inline-block */white-space: nowrap;       /* keep text on a single line */overflow: hidden;          /* hide overflow */text-overflow: ellipsis;   /* show ... */width: 400px;              /* must have a fixed or max width */}
.audio-player-wrapper .playlist ul li .reorder { margin: 0 5px 0 auto; opacity: 0.5; }
.audio-player-wrapper .playlist ul li .reorder i {}
.audio-player-wrapper .playlist ul li .remove-item {border: none;background: none;color: #fff;margin: 0 0 0 10px;padding: 0;line-height: 1;font-size: 13px;}
.audio-player-wrapper .playlist ul li .remove-item:hover {color:var(--c-main-light)}
.audio-player-wrapper .playlist ul li.playing .text .name::before { content:""; width: 12px; aspect-ratio: 1; --c: no-repeat linear-gradient(var(--c-main-light)0 0); background:var(--c) 0%   100%,var(--c) 50%  100%,var(--c) 100% 100%; animation: l2 0.5s infinite linear; display: block; margin: 0 10px 0 0; position: absolute; left: 0; bottom: 5px; }
.audio-player-wrapper .playlist ul li.active .text .name {color: var(--c-main-light);font-weight: 700;position: relative;}
.audio-player-wrapper .playlist ul li.playing .text .name {padding: 0 0 0 18px;}
.audio-player-wrapper .playlist ul li .text .meta  {font-size: 11px;opacity: 0.7;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 400px;}
.audio-player-wrapper .playlist ul li::after {}
.audio-player-wrapper .playlist ul li span {flex: 1;line-height: 1.1;padding: 0 40px 0 0;}



.current-track {display: flex;color: #fff;align-items: center;}
.current-track .current-track-poster { flex: 0 1 100px; margin: 0 10px 0 0; border-radius: 10px; overflow: hidden; }
.current-track .current-track-poster img {}
.current-track .current-track-info {}
.current-track .current-track-info .name { font-weight: 700; font-size: 15px; }
.current-track .current-track-info .meta {font-size: 12px;opacity: 0.7;display: flex;gap: 7px;}



@keyframes l2 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  20% {background-size: 20% 60% ,20% 100%,20% 100%}
  40% {background-size: 20% 80% ,20% 60% ,20% 100%}
  60% {background-size: 20% 100%,20% 80% ,20% 60% }
  80% {background-size: 20% 100%,20% 100%,20% 80% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}




.audio-player-wrapper .audioplayer {width: 100%;}
.audio-player-wrapper .audioplayer .video-js {width: 100%;height: 100px;}
.audio-player-wrapper .audioplayer .video-js .vjs-poster {display:none}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar {display: flex;background: var(--c-main);height: 100px;padding: 0px 0;opacity: 1 !important;flex-wrap: wrap;align-items: center;justify-content: center;padding: 13px 0 0 0;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control {height:auto;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-volume-panel-horizontal {}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-volume-panel-horizontal .vjs-volume-control {margin-top: 5px;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-volume-panel-horizontal .vjs-volume-control .vjs-slider {}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-volume-panel-horizontal .vjs-volume-control .vjs-slider .vjs-volume-tooltip {display: none;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control:not(.vjs-volume-control):not(.vjs-progress-control) {height: 40px;min-height: 40px;line-height: 40px;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control:not(.vjs-volume-control) .vjs-icon-placeholder {}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control:not(.vjs-volume-control) .vjs-icon-placeholder::before {line-height: 40px;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playlist-button {position: absolute;right: 180px;top: 19px;font-size: 17px;width: auto;height: auto !important;line-height: 1;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playlist-button i {}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playlist-button i::before { font-weight:300}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-button.vjs-next-button, .audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-button.vjs-prev-button {font-size: 16px;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-play-control {width: 50px;height: 50px !important;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-play-control  .vjs-icon-placeholder {width: 50px;background: #fff;height: 50px;border-radius: 50%;color: var(--c-main);line-height: 1;text-align: center;display: flex;align-items: center;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-play-control  .vjs-icon-placeholder::before {content:none}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-play-control  .vjs-icon-placeholder::after {line-height: 50px;width: 50px;content: "\f04b";font-size: 24px;font-family: "font awesome 6 pro";font-weight: 900;padding: 0 0 0 4px;display: block;position: relative;top: auto;left: auto;height: 50px;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-play-control  .vjs-control-text {display:none;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-play-control.vjs-playing .vjs-icon-placeholder::after {content:"\f04c"; padding:0}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-controlbar-spacer {flex: 0 1 100%;}
.audio-player-wrapper .audioplayer .video-js .vjs-load-progress div {background: rgb(255 255 255 / 30%);}
.audio-player-wrapper .audioplayer .video-js .vjs-slider {background: rgb(255 255 255 / 10%);}
.audio-player-wrapper .audioplayer .video-js .vjs-big-play-button {display: none !important;}
.audioPlayer-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {padding-top: 30px;}



.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playback-rate {}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playback-rate .vjs-playback-rate-value {
    font-size: 12px;
    line-height: 40px;
}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playback-rate .vjs-button {
    line-height: 1;
    font-size: 12px;
}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playback-rate .vjs-menu {margin-bottom: 20px;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playback-rate .vjs-menu ul {
    background: #222;
    border-radius: 7px;
    font-size: 10px;
    padding: 3px;
    max-height: none;
}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playback-rate .vjs-menu ul li {font-weight: 300;font-family: "Open Sans";padding: 7px 0;line-height: 1;background: none;}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playback-rate .vjs-menu ul li span {
}
.audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playback-rate .vjs-menu ul li.vjs-selected {
    background: #fff;
    /* color: #fff; */
    font-weight: 600;
    border-radius: 5px;
    display: block;
}


.audio-player-wrapper .audio-player-top { display: none; }

@media (max-width: 991px) {
  .dbgbar_reopen {display:none}
  .playlist-trigger {right: 20px;bottom: 20px;width: 60px;height: 60px;}
  .playlist-trigger .waveform {height: 60px;}
  .playlist-trigger .count {top: -7px;right: -3px;}
}
@media (max-width: 767px) {
    .audio-player-wrapper {max-width: calc(100% - 0px);min;min-width: calc(100% - 0px);bottom: 0;top: 0;z-index: 100000;display: flex;flex-direction: column;border-radius: 0;/* align-items: flex-end; */height: 100dvh;max-height: 100dvh;overflow: hidden;}
    .audio-player-wrapper .audioplayer .video-js .vjs-control-bar .vjs-control.vjs-playlist-button {right: 10px;display: none;}

    .current-track {height: 70px;}
    .current-track .current-track-poster {flex: 0 1 70px;height: 70px;}
    .current-track .current-track-poster img {}
    .current-track .current-track-info { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .current-track .current-track-info .name {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: calc(100% - 20px);display: block;}
    .current-track .current-track-info .meta {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: calc(100% - 20px);display: block;}
    .current-track .current-track-info .meta .subject, .current-track .current-track-info .meta .chapter {display: inline;}


    .audio-player-wrapper .playlist {padding: 10px;flex: 1;margin: 0 0 30px 0;display:block}
    .audio-player-wrapper .playlist ul { max-height: 100%; height: 100%; }
    .audio-player-wrapper .playlist ul li .text .name { width: auto; }
    .audio-player-wrapper .playlist ul li .text .meta {width: calc(100% - 20px)}

    .audio-player-wrapper .audio-player-top {display: flex;align-items: center;margin: 0 0 15px 0;}
    .audio-player-wrapper .audio-player-top h3 { margin: 0; color: #fff; font-weight: 800; font-size: 25px; }
    .audio-player-wrapper .audio-player-top .close-player-on-mobile {display: block;border: none;background: #222;color: #fff;border-radius: 50%;margin: 0;align-self: flex-end;width: 40px;height: 40px;line-height: 40px;font-size: 20px;margin: 0 0 0 auto;}
}