/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.jplayer.org
 *
 * Skin Name: Midnight Black
 *
 * Copyright (c) 2010-2012 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Per Sandström (https://github.com/persand)
 * Maintainer: Kasim Ahmic (https://github.com/TheInfection)
 * Skin Version: 2.6.3 (jPlayer 2.1.x, 2.2.x, 2.3.x, 2.4.x)
 * Date: October 2nd, 2013
 */

.jp-area {
    height: 100px;
    width: 100%;
}

.jp-area-video {
    margin: auto;
}

.jp-area-center {
    margin-top: 20px;
}

.jp-area-embed {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    min-width: auto !important;
    margin-top: 0 !important;
}

a:active,
a:focus {
    outline: none; /* To keep Google Chrome from adding that ugly yellow border/outlune on buttons when clicked */
}

.jp-audio,
.jp-audio-stream,
.jp-video {
    /* Edit the font-size to counteract inherited font sizing. Eg. 1.25em = 1 / 0.8em */
    font-size: 1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
    font-family: 'Verdana', Arial, sans-serif;
    line-height: 1.6;
    margin: auto;
}

.jp-audio {
    width: 480px;
}

.jp-audio-stream {
    width: 150px;
}

.jp-video-270p {
    width: 480px;
}

.jp-video-360p {
    width: 640px;
}

.jp-video-full {
    /* Rules for IE6 (full-screen) */
    width: 480px;
    height: 270px;
    /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
    position: static !important;
    position: relative;
}

/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
.jp-video-full div div {
    z-index: 1000;
}

.jp-video-full .jp-jplayer {
    top: 0;
    left: 0;
    position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
    overflow: hidden;
}

.jp-video-full .jp-gui {
    position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001; /* 1 layer above the others. */
}

.jp-video-full .jp-interface {
    position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
    bottom: 0;
    left: 0;
}

.jp-video-float .jp-jplayer {
    position: fixed !important;
    bottom: 100px;
    border-top: 4px solid #000;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.jp-interface {
    position: relative;
    width: 100%;
    z-index: 9999;
}

.jp-audio .jp-type-single .jp-interface {
    height: 75px;
}

.jp-audio .jp-type-playlist .jp-interface {
    height: 70px;
}

.jp-audio-stream .jp-type-single .jp-interface {
    height: 50px;
}

/* @group CONTROLS */

.jp-controls-holder {
    clear: both;
    width: 440px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    top: -8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */
}

.jp-interface ul.jp-controls {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.jp-audio ul.jp-controls {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    padding: 0;
}

.jp-audio-stream ul.jp-controls {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
}

.jp-video .jp-type-single ul.jp-controls {
    width: 78px;
    margin-left: 200px;
}

.jp-video .jp-type-playlist ul.jp-controls {
    width: 134px;
    margin-left: 172px;
}

.jp-video ul.jp-controls,
.jp-interface ul.jp-controls li {
    display: inline;
    float: left;
}

.jp-interface ul.jp-controls a {
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

a.jp-play,
a.jp-pause {
    width: 40px;
    height: 40px;
}

a.jp-play,
a.jp-play:hover,
a.jp-pause,
a.jp-pause:hover,
a.jp-stop,
a.jp-stop:hover,
a.jp-previous,
a.jp-previous:hover,
a.jp-next,
a.jp-next:hover,
.jp-seek-bar,
.jp-play-bar,
a.jp-mute,
a.jp-mute:hover,
a.jp-unmute,
a.jp-unmute:hover,
a.jp-volume-max,
a.jp-volume-max:hover,
.jp-volume-bar,
.jp-audio,
.jp-volume-bar,
.jp-volume-bar-value,
a.jp-full-screen,
a.jp-full-screen:hover,
a.jp-restore-screen,
a.jp-restore-screen:hover,
a.jp-repeat,
a.jp-repeat:hover,
a.jp-repeat-off,
a.jp-repeat-off:hover,
a.jp-shuffle,
a.jp-shuffle:hover,
a.jp-shuffle-off,
a.jp-shuffle-off:hover {
    background: none no-repeat; /* sprite removed */
}

a.jp-play {
    background-position: 0 0;
}

a.jp-play:hover {
    background-position: -41px 0;
}

a.jp-pause {
    background-position: 0 -42px;
    display: none;
}

a.jp-pause:hover {
    background-position: -41px -42px;
}

a.jp-stop,
a.jp-previous,
a.jp-next {
    width: 28px;
    height: 28px;
    margin-top: 6px;
}

a.jp-stop {
    background-position: 0 -83px;
    margin-left: 10px;
}

a.jp-stop:hover {
    background-position: -29px -83px;
}

a.jp-previous {
    background-position: 0 -112px;
}

a.jp-previous:hover {
    background-position: -29px -112px;
}

a.jp-next {
    background-position: 0 -141px;
}

a.jp-next:hover {
    background-position: -29px -141px;
}

/* @end */

/* @group progress bar */

.jp-progress {
    overflow: hidden;
    position: absolute;
    background: transparent;
}

.jp-audio .jp-progress {
    top: 27px;
    height: 15px;
}

.jp-audio .jp-type-single .jp-progress {
    top: 27px;
    left: 110px;
    right: 112px;
}

.jp-audio .jp-type-playlist .jp-progress {
    left: 166px;
    right: 179px;
}

.jp-video .jp-progress {
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
}

.jp-seek-bar {
    background-repeat: repeat-x;
    background-position: 0 -202px;
    width: 0;
    min-width: 135px;
    height: 100%;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.jp-play-bar {
    background-repeat: repeat-x;
    background-position: 0 -218px;
    width: 0;
    height: 100%;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 2px 0 5px -2px rgba(0, 0, 0, 0.3);
}

.jp-video .jp-seek-bar,
.jp-video .jp-play-bar {
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* The seeking class is added/removed inside jPlayer */
.jp-seeking-bg {
    /* Animated diagonal stripes (barber-pole) drawn in css rather than a loaded image.
       Crisp at any DPI, no bitmap. Theme blue tones from the old gif. */
    background-image: repeating-linear-gradient(
        -45deg,
        #5fa9ce 0, #5fa9ce 22px,
        #4b9ec8 22px, #4b9ec8 44px);
    background-size: 62px 100%;
    animation: jp-seeking-stripes 1.4s linear infinite;
}
@keyframes jp-seeking-stripes {
    from { background-position: 0 0; }
    to   { background-position: 62px 0; }
}

/* @end */

/* @group volume controls */

a.jp-mute,
a.jp-unmute,
a.jp-volume-max {
    position: absolute;
    width: 18px;
    height: 15px;
}

.jp-audio .jp-type-single a.jp-mute,
.jp-audio .jp-type-single a.jp-unmute {
    top: 12px;
    right: 66px;
}

.jp-audio .jp-type-playlist a.jp-mute,
.jp-audio .jp-type-playlist a.jp-unmute {
    top: 12px;
    right: 133px;
}

.jp-audio-stream .jp-type-single a.jp-mute,
.jp-audio-stream .jp-type-single a.jp-unmute {
    top: 12px;
    right: 67px;
}

.jp-audio-stream .jp-type-single a.jp-volume-max,
.jp-audio .jp-type-single a.jp-volume-max {
    top: 12px;
    right: 0;
}

.jp-audio .jp-type-playlist a.jp-volume-max {
    top: 12px;
    right: 66px;
}

.jp-video a.jp-mute,
.jp-video a.jp-unmute,
.jp-video a.jp-volume-max {
    position: absolute;
    top: 12px;
}

.jp-video a.jp-mute,
.jp-video a.jp-unmute {
    left: 50px;
}

.jp-video a.jp-volume-max {
    left: 130px;
}

a.jp-mute {
    background-position: 0 -170px;
}

a.jp-mute:hover {
    background-position: -19px -170px;
}

a.jp-unmute {
    background-position: -39px -170px;
    display: none;
}

a.jp-unmute:hover {
    background-position: -60px -170px;
}

a.jp-volume-max {
    background-position: 0 -186px;
}

a.jp-volume-max:hover {
    background-position: -19px -186px;
}

.jp-volume-bar {
    position: absolute;
    overflow: hidden;
    background-repeat: repeat-x;
    background-position: 0 -250px;
    width: 45px;
    height: 5px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.jp-audio .jp-type-single .jp-volume-bar {
    top: 32px;
    right: 38px;
}

.jp-audio .jp-type-playlist .jp-volume-bar {
    top: 32px;
    right: 104px;
}

.jp-audio-stream .jp-volume-bar {
    top: 22px;
    right: 28px;
}

.jp-video .jp-volume-bar {
    top: 17px;
    left: 72px;
}

.jp-volume-bar-value {
    background-repeat: repeat-x;
    background-position: 0 -256px;
    width: 0;
    height: 5px;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* @end */

/* @group current time and duration */

.jp-audio .jp-time-holder {
    position: absolute;
    top: 45px;
}

.jp-audio .jp-type-single .jp-time-holder {
    left: 110px;
    right: 112px;
}

.jp-audio .jp-type-playlist .jp-time-holder {
    left: 166px;
    right: 179px;
}

.jp-current-time,
.jp-duration {
    width: auto;
    font-size: 10px;
    font-style: italic;
    padding-right: 2px;
}

.jp-current-time {
    float: left;
    display: inline;
    text-align: left;
    padding-left: 2px;
}

.jp-duration {
    float: right;
    display: inline;
    text-align: right;
}

.jp-video .jp-current-time {
    margin-top: 10px;
    margin-left: 10px;
}

.jp-video .jp-duration {
    margin-top: 10px;
    margin-right: 10px;
}

/* @end */

/* @group playlist */

.jp-title {
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0) !important;
    font-size: 0.7em;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: auto;
    position: relative;
    top: 70px !important;
    width: auto !important;
    white-space: nowrap;
}

/* The video player is short; the offset title lands off-screen, so hide it. */
.jp-video .jp-title {
    display: none;
}

.playing_info {
    position: absolute;
    left: 110px;
    top: 10px;
    font-size: 1.5em;
    font-family: 'Verdana', Arial, sans-serif;
    /* text colour comes from the theme (dark.css / light.css) so it follows the theme */
    width: 300px;
    z-index: 9999;
}

.playing_artist {
    font-size: 0.5em;
    white-space: nowrap;
    overflow: hidden;
}

.playing_artist a {
    text-decoration: none;
}

.playing_title {
    font-size: 0.7em;
    white-space: nowrap;
    overflow: hidden;
}

.playing_title a {
    text-decoration: none;
}

.playing_features {
    position: absolute;
    top: 60px;
    font-size: 0.5em;
}

.playing_lyrics {
    position: relative;
    display: inline;
}

.playing_lyrics a {
    text-decoration: none;
}

.playing_actions {
    position: relative;
    display: inline;
}

.playing_actions div {
    display: inline-block;
}

.jp-title,
.jp-playlist {
    top: 0;
    right: 0;
    width: 25%;
    height: 95%;
    overflow: auto;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0.9;
    position: absolute;
}

.jp-type-single .jp-title,
.jp-type-playlist .jp-title,
.jp-type-single .jp-playlist {
    border-top: none;
}

.jp-title ul,
.jp-playlist ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0.62em;
}

.jp-title li {
    padding: 5px 0;
    font-weight: bold;
}

.jp-playlist li {
    padding: 6px 15px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.jp-playlist li div {
    display: inline;
}

/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */

.jp-type-playlist .jp-playlist li:last-child {
    border-bottom: none;
}

.jp-type-playlist .jp-playlist li.jp-playlist-current {
    padding-left: 20px;
}

.jp-type-playlist .jp-playlist a {
    text-decoration: none;
}

.jp-type-playlist .jp-playlist a.jp-playlist-current {
    font-weight: bold;
}

.jp-type-playlist .jp-playlist a.jp-playlist-item-remove {
    float: right;
    display: inline;
    text-align: right;
    margin-right: 10px;
    font-weight: bold;
    color: #666;
}

.jp-type-playlist .jp-playlist a.jp-playlist-item-remove:hover {
    color: #fff;
}

.jp-type-playlist .jp-playlist .jp-free-media {
    float: right;
    display: inline;
    text-align: right;
    margin-right: 10px;
}

.jp-type-playlist .jp-playlist .jp-free-media a {
    color: #666;
}

.jp-type-playlist .jp-playlist .jp-free-media a:hover {
    color: #fff;
}

.jp-artist {
    font-size: 0.8em;
}

/* @end */

.jp-video-play {
    width: 100%;
    overflow: hidden; /* Important for nested negative margins to work in modern browsers */
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
}

.jp-video-270p .jp-video-play {
    margin-top: -270px;
    height: 270px;
}

.jp-video-360p .jp-video-play {
    margin-top: -360px;
    height: 360px;
}

.jp-video-full .jp-video-play {
    height: 100%;
}

a.jp-video-play-icon {
    position: relative;
    display: block;
    width: 112px;
    height: 100px;
    margin-left: -56px;
    margin-top: -50px;
    left: 50%;
    top: 50%;
    background: none no-repeat; /* sprite removed */
    text-indent: -9999px;
}

.jp-video-play:hover a.jp-video-play-icon {
    background: none no-repeat; /* sprite removed */
}

.jp-jplayer audio,
.jp-jplayer {
    width: 0;
    height: 0;
}

.jp-jplayer {
    background-color: #000;
    position: absolute;
    z-index: 9999;
}

.jp-jplayer-audio {
    top: 10px;
    left: 20px;
}

/* @group TOGGLES */

/* The audio toggles are nested inside jp-time-holder */

ul.jp-toggles {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
}

.jp-audio .jp-type-single ul.jp-toggles {
    width: auto;
    position: absolute;
    left: 50%;
    margin: 0 0 0 -14px;
}

.jp-audio .jp-type-playlist ul.jp-toggles {
    width: auto;
    margin: 0;
    position: absolute;
    right: 15px;
    top: 22px;
}

.jp-video ul.jp-toggles {
    width: auto;
    position: absolute;
    right: 15px;
    top: 6px;
}

ul.jp-toggles li {
    display: block;
    float: right;
}

ul.jp-toggles li a {
    display: block;
    width: 28px;
    height: 28px;
    text-indent: -9999px;
    line-height: 100%; /* need this for IE6 */
}

a.jp-full-screen {
    background-position: 0 -317px;
    margin-left: 20px;
}

a.jp-full-screen:hover {
    background-position: -30px -317px;
}

a.jp-restore-screen {
    background-position: -60px -317px;
    margin-left: 20px;
}

a.jp-restore-screen:hover {
    background-position: -90px -317px;
}

a.jp-repeat {
    background-position: 0 -289px;
}

a.jp-repeat:hover {
    background-position: -30px -289px;
}

a.jp-repeat-off {
    background-position: -60px -289px;
}

a.jp-repeat-off:hover {
    background-position: -90px -289px;
}

a.jp-shuffle {
    background-position: 0 -262px;
    margin-left: 5px;
}

a.jp-shuffle:hover {
    background-position: -30px -262px;
}

a.jp-shuffle-off {
    background-position: -60px -262px;
    margin-left: 5px;
}

a.jp-shuffle-off:hover {
    background-position: -90px -262px;
}

/* @end */

/* @group NO SOLUTION error feedback */

.jp-no-solution {
    padding: 5px;
    font-size: 0.67em;
    color: #ccc;
    display: none;
    text-align: center;
}

.jp-no-solution a {
    color: #ccc;
}

.jp-no-solution span {
    font-size: 1em;
    display: block;
    text-align: center;
    font-weight: bold;
}

.jp-close {
    font-size: 0.67em;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

.jp-close a {
    color: #ccc;
    z-index: 9999;
}

#webplayer-minimize {
    bottom: 2px;
    display: none;
    font-size: 0.67em;
    left: 3px;
    position: fixed;
    text-align: left;
    z-index: 10000;
}

#webplayer-minimize a {
    color: #ccc;
    z-index: 10000;
}

.player_actions {
    position: absolute;
    top: 2px;
    margin-right: 2px;
    right: 25%;
    font-size: 0.67em;
    width: 60px;
    height: 95px;
    text-align: right;
    display: inline;
    /* keep the action buttons clearly visible and above the in-bar playlist */
    opacity: 1;
    z-index: 9995;
}

.player_actions:hover {
    opacity: 1;
}

/* Playlist hidden: shift the actions into the freed space and keep them fully visible. */
#jp_container_1.jp-playlist-collapsed .player_actions {
    right: 4px;
    opacity: 1;
}

.action_button {
    display: inline-block;
}

.broadcast-info {
    display: inline;
}

.broadcast-action {
    display: inline;
}

#webplayer {
    position: fixed;
    z-index: 9999;
    display: none;
    bottom: 0;
    width: 100%;
    height: 100px;
}

/* @end */

/* @group Ampache modern player: compact mode, responsive, visualizer */

/* Compact toggles (classes on #jp_container_1, persisted via cookies).
   Default state is applied per-breakpoint in show_html5_player.inc.php. */
#jp_container_1.jp-playlist-collapsed .jp-playlist {
    display: none;
}

/* Default (in-bar) playlist sits BEHIND the controls so it doesn't cover them
   (base skin gives it z-index:9999, same as the interface). The expanded panel
   below overrides this with a higher z-index to float on top. */
#jp_container_1 .jp-playlist {
    z-index: 9990;
}

/* Expanded playlist: a tall panel anchored just above the player bar. It is
   fixed to the viewport so it escapes the 100px player box and is not clipped. */
#jp_container_1.jp-playlist-expanded .jp-playlist {
    display: block;
    position: fixed;
    right: 0;
    bottom: 100px;
    top: auto;
    /* match the default in-player playlist width (.jp-playlist { width: 25% }) */
    width: 25%;
    min-width: 320px;
    height: 60vh;
    max-height: calc(100vh - 110px);
    /* background intentionally not set here so the theme's `div.jp-playlist`
       colour (dark: #202020 / light: #d4d4d4) shows through in both themes. */
    opacity: 1;
    z-index: 10000;
    overflow-y: auto;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6);
}

body.webplayer-hidden #jp_container_1.jp-playlist-expanded .jp-playlist {
    bottom: 0;
}

/* Keep the floating video centred on screen and above the expanded playlist
   panel (the panel is z-index:10000; the video was unstacked below it). */
#jp_container_1.jp-video-float .jp-jplayer {
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
}

body.jp-nowplaying-hidden .playing_info,
body.jp-nowplaying-hidden .jp-jplayer-audio {
    display: none;
}

/* Now-playing artwork for internal random & democratic streams */
.playing_art {
    position: absolute;
    top: 0;
    left: -90px;
    width: 80px;
    height: 80px;
    max-width: none;
    max-height: none;
    object-fit: cover;
    margin: 0;
    border-radius: 3px;
    z-index: 10000;
}

.playing_album {
    font-size: 0.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playing_album a {
    text-decoration: none;
}

/* Lightweight Web Audio AnalyserNode + canvas visualizer overlay.
   Covers all page content above the player bar; the visualization itself
   is centred (both axes) inside the overlay. */
#visualizer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 100px;
    z-index: 9998;
    background-color: #000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#visualizer:fullscreen {
    bottom: 0;
}

/* When the player is hidden there is no 100px bar to leave room for:
   let the visualizer cover the whole screen (no black box + gap). */
body.webplayer-hidden #visualizer {
    bottom: 0;
}

#viz-canvas {
    display: block;
    width: min(90%, 1000px);
    height: min(80%, 520px);
}

/* Restored 5-band graphic equalizer panel (toggled by the EQ button). */
#equalizer {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 110px;
    z-index: 10001;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    /* background + label colour come from the theme (dark.css / light.css) */
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

#equalizer .eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-family: 'Verdana', Arial, sans-serif;
}

#equalizer .eq-band input[type="range"] {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 10px;
    height: 90px;
    accent-color: #1e90ff;
    cursor: pointer;
}

#webplayer.viz-active {
    background-color: #000 !important;
}

/* Visualizer active: the bar is black, so the now-playing text must be light in any theme. */
#webplayer.viz-active .playing_info,
#webplayer.viz-active .playing_title a,
#webplayer.viz-active .playing_artist a,
#webplayer.viz-active .playing_album a {
    color: #eee !important;
}

/* Only the active play/pause should render -- the flex reorder let the inactive
   one linger (it was just camouflaged by the light player background). */
#jp_container_1.jp-state-playing a.jp-play,
#jp_container_1.jp-state-paused a.jp-pause {
    display: none !important;
}

/* Blend the whole player chrome into the black bar. Opaque #000 (incl.
   .jp-interface, which also carries the theme's #f8f8f8) so the sprite
   artifacts stay covered -- transparency exposes them. Light text on top. */
#webplayer.viz-active .jp-gui,
#webplayer.viz-active .jp-interface,
#webplayer.viz-active .jp-type-playlist,
#webplayer.viz-active .jp-title,
#webplayer.viz-active .jp-playlist {
    background-color: #000 !important;
    border-top-color: transparent !important;
    box-shadow: none !important;
}

#webplayer.viz-active .jp-current-time,
#webplayer.viz-active .jp-duration,
#webplayer.viz-active .jp-playlist a {
    color: #eee !important;
}

#webplayer.viz-active .jp-playlist a.jp-playlist-current {
    color: #4db8ff !important;
}

/* Visualizer active: keep the action buttons fully lit (they default to opacity
   0.4 and are hard to see against the black bar) as if permanently hovered. */
#webplayer.viz-active .player_actions {
    opacity: 1 !important;
}

/* Video always scales down to its container / the viewport (all screen sizes) */
.jp-video-270p,
.jp-video-360p {
    max-width: 100%;
}

.jp-jplayer video {
    max-width: 100%;
    height: auto;
}

/* Responsive: slim the player on small screens */
@media (max-width: 768px) {
    .jp-area,
    .jp-audio {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .jp-video-360p,
    .jp-video-270p {
        width: 100% !important;
    }

    .jp-jplayer video {
        max-width: 100%;
        height: auto;
    }

    /* When expanded on mobile, let the playlist use more of the width */
    .jp-title,
    .jp-playlist {
        width: 55%;
    }

    /* Surface the action toggles on mobile (previously hidden) */
    .player_actions {
        position: absolute;
        top: 2px;
        right: 4px;
        width: auto;
        height: auto;
        opacity: 1;
    }

    /* Give the seek bar the horizontal space freed by collapsing chrome */
    .jp-audio .jp-type-playlist .jp-progress {
        left: 60px;
        right: 90px;
    }

    .jp-audio .jp-type-playlist .jp-volume-bar {
        right: 60px;
    }

    /* Fluidize the video control bar so it fits narrow screens */
    .jp-video .jp-type-single ul.jp-controls,
    .jp-video .jp-type-playlist ul.jp-controls {
        margin-left: 0;
        width: auto;
    }

    .jp-video a.jp-mute,
    .jp-video a.jp-unmute {
        left: 40px;
    }

    .jp-video a.jp-volume-max {
        left: 108px;
    }

    .jp-video .jp-volume-bar {
        left: 60px;
    }

    .jp-video ul.jp-toggles {
        right: 4px;
    }

    .playing_info {
        width: 45%;
    }
}

/* @end */

/* @group Reordered player rows: controls (top) -> seek -> times (bottom).
   Shared by BOTH the video and music players via #jp_container_1. The legacy
   skin pins each row with absolute offsets, so we flatten the interface into a
   real flex column and order the three rows. The #id prefix also gives these
   rules the specificity to beat the base .jp-audio/.jp-video positions. */
#jp_container_1 .jp-interface {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 4px 8px 6px;
    box-sizing: border-box;
    height: auto;
    /* the interface grows downward from a fixed top, so shift the whole stack
       up to lift the time row off the bottom edge (both players). */
    position: relative;
    bottom: 20px;
}

/* Row 3 -> top. Lay the whole control strip out as one centred flex row.
   The <ul>/<li> wrappers are flattened with display:contents so every button
   and the volume slider become direct, individually-orderable flex items. */
#jp_container_1 .jp-interface > .jp-controls-holder {
    order: 1;
    top: auto;
    width: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* tight spacing *within* a group; group boundaries add margin below */
    gap: 4px;
    overflow: visible;
}

#jp_container_1 .jp-controls-holder ul.jp-controls,
#jp_container_1 .jp-controls-holder ul.jp-toggles,
#jp_container_1 .jp-controls-holder ul.jp-controls li,
#jp_container_1 .jp-controls-holder ul.jp-toggles li {
    display: contents;
}

/* Neutralise the legacy per-button offsets so spacing is even and every
   icon is vertically centred on the row (incl. the taller Play button). */
#jp_container_1 .jp-controls-holder a {
    float: none;
    margin: 0;
    position: static;
    top: auto;
    left: auto;
    right: auto;
}

#jp_container_1 .jp-controls-holder a.jp-mute,
#jp_container_1 .jp-controls-holder a.jp-unmute,
#jp_container_1 .jp-controls-holder a.jp-volume-max {
    /* hug the sprite glyph so the icon fills its box (was 19px, left-padded) */
    width: 16px;
    height: 16px;
}

/* nudge max-volume off the slider */
#jp_container_1 .jp-controls-holder a.jp-volume-max {
    margin-left: 6px;
}

#jp_container_1 .jp-controls-holder .jp-volume-bar {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    flex: 0 0 auto;
}

/* Left-to-right order: prev, play, next, stop, mute, slider, max, then the
   fullscreen (video) / shuffle / repeat toggles. */
#jp_container_1 .jp-controls-holder a.jp-previous { order: 1; }
#jp_container_1 .jp-controls-holder a.jp-play,
#jp_container_1 .jp-controls-holder a.jp-pause { order: 2; }
#jp_container_1 .jp-controls-holder a.jp-next { order: 3; }
#jp_container_1 .jp-controls-holder a.jp-stop { order: 4; }
#jp_container_1 .jp-controls-holder a.jp-mute,
#jp_container_1 .jp-controls-holder a.jp-unmute { order: 5; }
#jp_container_1 .jp-controls-holder .jp-volume-bar { order: 6; }
#jp_container_1 .jp-controls-holder a.jp-volume-max { order: 7; }
#jp_container_1 .jp-controls-holder a.jp-full-screen,
#jp_container_1 .jp-controls-holder a.jp-restore-screen { order: 8; }
#jp_container_1 .jp-controls-holder a.jp-shuffle,
#jp_container_1 .jp-controls-holder a.jp-shuffle-off { order: 9; }
#jp_container_1 .jp-controls-holder a.jp-repeat,
#jp_container_1 .jp-controls-holder a.jp-repeat-off { order: 10; }

/* Group boundaries: a wider left margin separates group starts — stop, the
   volume group (mute), and the toggles group. Video starts the toggles with
   fullscreen; audio (no fullscreen) starts them with shuffle. */
#jp_container_1 .jp-controls-holder a.jp-stop,
#jp_container_1 .jp-controls-holder a.jp-mute,
#jp_container_1 .jp-controls-holder a.jp-unmute,
#jp_container_1 .jp-controls-holder a.jp-full-screen,
#jp_container_1 .jp-controls-holder a.jp-restore-screen {
    margin-left: 16px;
}

#jp_container_1.jp-audio .jp-controls-holder a.jp-shuffle,
#jp_container_1.jp-audio .jp-controls-holder a.jp-shuffle-off {
    margin-left: 16px;
}

/* The music player's jplayer element (the 80px album-art poster) reserves
   space in the flow, which pushed the flex interface below the bar. Take it
   out of flow like the video's floating media element so the three rows fit —
   but keep it visible (don't collapse it) so the album art still shows. */
#jp_container_1.jp-audio .jp-jplayer {
    position: absolute;
    top: 10px;
    left: 20px;
    /* keep the album-art poster above the interface's opaque themed background
       (both default to z-index:9999, and the interface comes later in the DOM,
       so full-width small-screen layouts would otherwise paint over the art) */
    z-index: 10000;
}

/* Row 1 -> middle */
#jp_container_1 .jp-interface > .jp-progress {
    order: 2;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0;
}

/* Row 2 -> bottom */
#jp_container_1 .jp-interface > .jp-time-row {
    order: 3;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    /* keep the times clear of the corner minimize/expand buttons */
    padding: 0 28px;
}

.jp-video .jp-interface > .jp-title {
    order: 4;
}

#jp_container_1 .jp-time-row .jp-current-time,
#jp_container_1 .jp-time-row .jp-duration {
    position: static;
    margin: 0;
    float: none;
}

/* @end */

/* @group Modern player: small-screen layout. Keep BOTH the action buttons and
   the controls visible — dock the actions on the left as a fixed-width column
   and pad the flex interface by that width so they sit side by side without
   overlapping. Placed after the flex block above so it wins the cascade. */
@media (max-width: 768px) {
    /* Album art stays on the left at its normal size; mirror the action buttons
       as a same-size (80px) block on the RIGHT, above the player chrome (the
       art poster is z-index:9999, which was hiding them). The controls sit
       spaced in the centre, padded clear of both blocks. */
    .player_actions {
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        width: 80px;
        height: auto;
        opacity: 1;
        z-index: 10001;
        /* fixed 3-per-row grid to match the wider player */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        align-content: start;
        justify-items: center;
    }

    #jp_container_1 .jp-interface {
        padding-left: 108px;
        padding-right: 90px;
    }

    /* tighter group spacing so the control strip fits the reduced centre width
       and prev/play/next don't wrap off-screen */
    #jp_container_1 .jp-controls-holder a.jp-stop,
    #jp_container_1 .jp-controls-holder a.jp-mute,
    #jp_container_1 .jp-controls-holder a.jp-unmute,
    #jp_container_1 .jp-controls-holder a.jp-full-screen,
    #jp_container_1 .jp-controls-holder a.jp-restore-screen,
    #jp_container_1.jp-audio .jp-controls-holder a.jp-shuffle,
    #jp_container_1.jp-audio .jp-controls-holder a.jp-shuffle-off {
        margin-left: 8px;
    }
}

/* @end */

@media (min-width: 769px) and (max-width: 1150px) {
    #jp_container_1:not(.jp-playlist-expanded) .jp-playlist {
        display: none;
    }

    .player_actions {
        right: 4px;
        opacity: 1;
    }

    .playing_info {
        display: none;
    }
}

/* @end */

/* @group Modern player: very narrow -- the album art (80px on the left) would
   overlap the leftmost control once the control strip fills the width. Hide it
   (controls take priority, matching the info/playlist behaviour above) and
   reclaim its left padding. Audio keeps playing: display:none doesn't stop the
   <audio> element inside .jp-jplayer. */
@media (max-width: 540px) {
    #jp_container_1.jp-audio .jp-jplayer {
        display: none;
    }

    #jp_container_1 .jp-interface {
        padding-left: 8px;
    }
}

/* @end */


/*
 * Crisp SVG transport icons (Bootstrap Icons, MIT — https://icons.getbootstrap.com/).
 * Transport buttons: recreate the light circular button in CSS and lay a vector glyph
 * on top (background-image). Volume buttons: bare light-grey glyph, no circle, enlarged
 * box so the whole icon stays visible (background-size: contain, no clipping).
 * Sharp at any DPI. background-* use !important to override the sprite.
 */
a.jp-play, a.jp-pause, a.jp-stop, a.jp-previous, a.jp-next,
a.jp-shuffle, a.jp-shuffle-off, a.jp-repeat, a.jp-repeat-off {
    background-color: #cfcfcf;
    border-radius: 50%;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 58% !important;
    transition: background-color .15s ease;
}
a.jp-play:hover, a.jp-pause:hover, a.jp-stop:hover, a.jp-previous:hover, a.jp-next:hover,
a.jp-shuffle:hover, a.jp-shuffle-off:hover, a.jp-repeat:hover, a.jp-repeat-off:hover {
    background-color: #fff;
}
a.jp-shuffle, a.jp-repeat { opacity: .45; }

/* Volume buttons: bare light-grey glyph, no circle, enlarged box (no clipping). */
a.jp-mute, a.jp-unmute, a.jp-volume-max {
    width: 22px !important;
    height: 22px !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    overflow: visible !important;
    transition: opacity .15s ease;
}
a.jp-mute:hover, a.jp-unmute:hover, a.jp-volume-max:hover { opacity: .7; }

a.jp-play       { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/play.svg") !important; }
a.jp-pause      { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/pause.svg") !important; }
a.jp-stop       { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/stop.svg") !important; }
a.jp-previous   { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/previous.svg") !important; }
a.jp-next       { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/next.svg") !important; }
a.jp-mute       { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/volume-min.svg") !important; }
a.jp-volume-max { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/volume-max.svg") !important; }
a.jp-unmute     { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/unmute.svg") !important; }
a.jp-shuffle, a.jp-shuffle-off { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/shuffle.svg") !important; }
a.jp-repeat, a.jp-repeat-off   { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/repeat.svg") !important; }


/*
 * Sprite removal completion (Bootstrap Icons, MIT — https://icons.getbootstrap.com/).
 * Covers the controls the first SVG pass left on the PNG sprite: full-screen /
 * restore-screen buttons, the video play-overlay, and the seek / play / volume
 * bars (rebuilt as pure-CSS gradients so no bitmap texture is needed).
 * With this in place jplayer.midnight.black.png and
 * jplayer.midnight.black.video.play.png can be deleted. background-* use
 * !important to override the (now removed) sprite rules above.
 */

/* Full-screen / restore buttons: match the circular transport-button treatment. */
a.jp-full-screen, a.jp-restore-screen {
    background-color: #cfcfcf;
    border-radius: 50%;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 58% !important;
    transition: background-color .15s ease;
}
a.jp-full-screen:hover, a.jp-restore-screen:hover {
    background-color: #fff;
    background-position: center !important;
}
a.jp-full-screen    { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/fullscreen.svg") !important; }
a.jp-restore-screen { background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/restore-screen.svg") !important; }

/* Video play-overlay: reuse the audio play glyph on a CSS circle (same
   treatment as the transport buttons), scaled up for the overlay. */
a.jp-video-play-icon {
    background-color: #cfcfcf !important;
    border-radius: 50% !important;
    background-image: url("../lib/modules/jquery-jplayer-midnight-black/svg/play.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 56% center !important;
    background-size: 46% !important;
    transition: background-color .15s ease;
}
.jp-video-play:hover a.jp-video-play-icon { background-color: #fff !important; }

/* Progress + volume bars: rebuilt as gradients (theme blue), no sprite texture. */
.jp-seek-bar {
    background: #696969 !important;
    background-image: none !important;
}
.jp-play-bar {
    background: linear-gradient(to bottom, #34a9f2, #1c9ced) !important;
}
.jp-volume-bar {
    background: #696969 !important;
    background-image: none !important;
}
.jp-volume-bar-value {
    background: linear-gradient(to bottom, #34a9f2, #1c9ced) !important;
}