/*
    Make a skin for your page using this pattern.
    Change "dark" on your preferred skin name and use option "skin" when init Jouele (see documentation).
*/

.jouele-skin-blue .jouele-progress-line-bar_base:after { /* Control 'timeline' */
    background-color: #bfbfbf;
}

.jouele-skin-blue .jouele-progress-line-bar_play:after { /* Control 'elapsed' */
    background-color: #d04000;
}
.jouele-skin-blue .jouele-progress-line-bar_play.jouele-is-playing:after { /* Control 'elapsed' when playing */
    background-color: #f59331;
}
.jouele-skin-blue .jouele-progress-line:hover .jouele-progress-line-bar_play:after { /* Control 'elapsed' on hover */
    background-color: #d04000;
}
.jouele-skin-blue .jouele-progress-line-lift { /* Control 'position' */
    background-color: #7dc8eb;
}
.jouele-skin-blue .jouele-progress-line-lift.jouele-is-playing { /* Control 'position' when playing */
    background-color: #f59331;
}
.jouele-skin-blue .jouele-progress-line:hover .jouele-progress-line-lift { /* Control 'position' on hover */
    background-color: #d04000;
}
.jouele-skin-blue .jouele-progress-line-lift:before { /* Preloader animation in control 'position' */
    border-color: currentColor;
}
.jouele-skin-blue .jouele-progress-line-lift.jouele-is-playing:before { /* Preloader animation in control 'position' when playing */
    border-color: #f59331;
}
.jouele-skin-blue .jouele-progress-line:hover .jouele-progress-line-lift:before { /* Preloader animation in control 'position' on hover */
    border-color: #d04000;
}

.jouele-skin-blue .jouele-info-control-button-icon_unavailable .jouele-svg-color,
.jouele-skin-blue .jouele-info-control-button-icon_play .jouele-svg-color { /* Control 'play-pause' */
    fill: #7dc8eb;
}
.jouele-skin-blue .jouele-info-control-button-icon_play.jouele-is-playing .jouele-svg-color { /* Control 'play-pause' when playing */
    fill: #f59331;
}
.jouele-skin-blue .jouele-info-control-button:hover .jouele-info-control-button-icon_play .jouele-svg-color { /* Control 'play-pause' on hover */
    fill: #d04000;
}
.jouele-skin-blue .jouele-info-time { /* Control 'time-elapsed' and 'time-total' */
    color: inherit;
}

.jouele-skin-blue .jouele-info-control-text {
    font-weight: 500;
    padding-left: 0.3em;
}