/* xl - DESKTOP STYLES */ 
/* 1. Main background of the player */
.mejs-container, 
.mejs-embed, 
.mejs-embed body, 
.mejs-container .mejs-controls {
    background: #13088f !important; /* Your deep blue/purple color */
}

/* 2. Progress bar - Total time/Loaded bar background */
.mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background: rgba(255, 255, 255, 0.2) !important; /* Soft white so the pink pops */
}

/* 3. Current progress bar & volume level (The active filling color) */
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #c9198a !important; /* Your vibrant pink color */
}

/* 4. Play/Pause and Mute button icons */
.mejs-controls .mejs-button button:focus {
    outline: 1px dotted #c9198a !important;
}

/* 5. Time text color (Current time / remaining time) */
.mejs-controls .mejs-time span {
    color: #ffffff !important;
}