#playPauseBtn.init .pause,#playPauseBtn.play .play,#playPauseBtn.pause .pause{display:none}

.custom-audio-player {
    max-width: 280px;
    border: 1px solid #f0f0f0;
    border-radius: 50px; /* Pill shape for a clean, modern look */
}
.custom-audio-player.init { max-width: 55px; overflow:hidden}
.custom-audio-player.pause .graph-bar{animation:none}

.play-btn {
    width: 36px;
    height: 36px;
    background-color: #0d6efd; /* Standard Bootstrap blue, adjust to match SlideServe exact hex if needed */
    border: none;
    transition: all 0.2s ease-in-out;
}

.play-btn:hover {
    transform: scale(1.05);
}

.playing-graph {
    height: 18px;
    gap: 3px;
}

.graph-bar {
    width: 4px;
    background-color: #0d6efd;
    border-radius: 4px;
    animation: bounceGraph 1s infinite ease-in-out;
    transform-origin: bottom;
}

.bar-1 { height: 60%; animation-delay: 0.0s; }
.bar-2 { height: 100%; animation-delay: 0.2s; }
.bar-3 { height: 50%; animation-delay: 0.4s; }
.bar-4 { height: 80%; animation-delay: 0.6s; }

/* Animation Keyframes */
@keyframes bounceGraph {
    0%, 100% {
        transform: scaleY(0.4);
    }
    50% {
        transform: scaleY(1);
    }
}