.vjs-has-started.vjs-paused .vjs-poster {
    opacity: 1 !important; /* fix issue on iOS */
}

/* set height to match design */
.video-js {
    min-height: 180px !important;
    padding: 0px !important;
    color: black !important;
    background: #F2F3F4 !important;
}

/* position title bar */
.vjs-audio .vjs-audio-info {
    text-align: center !important;
    position: absolute !important;
    color: #35434B !important;
    text-shadow: 0 0 black !important;
    top: 0px !important;
    width: 100% !important;
}

    /* color title bar text */
    .vjs-audio .vjs-audio-info .vjs-audio-item {
        text-shadow: 0 0 black !important;
    }

/* do NOT show tooltips! */
.video-js .vjs-control-text {
    display: none !important;
}

/* position initial (before-playing only) play button */
.vjs-audio .vjs-big-play-button {
    background-color: #ccd0d2 !important;
    height: 3.75rem !important;
    width: 3.75rem !important;
    /* top is set commonly with play/pause and replay buttons later */
}

    /* background circle for big play button */
    .vjs-audio .vjs-big-play-button.vjs-bp-block .vjs-svg-icon {
        fill: #35434b !important;
        width: 60% !important;
        height: 60% !important;
    }

/* set fonts, text colors */
.vjs-audio .vjs-audio-item {
    font-family: "FigTree", serif !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4625rem !important;
    text-shadow: none !important;
    color: var(--zeale-black-70) !important;
}

/* make background of already-listened area white */
.vjs-audio .vjs-load-progress {
    background-color: #ccd0d2 !important;
}

/* SMALL SCREEN start of progress bar */
.vjs-480.vjs-audio .vjs-progress-control {
    left: 1.6rem !important;
    right: 1.6rem !important;
}

/* unused? should be set by prior rule */
.vjs-audio .vjs-progress-control .vjs-load-progress {
    background: #ccd0d2 !important;
}

/* force controls (progress, ffwd, rewind) to show even if not running rn */
.vjs-audio .vjs-control-bar {
    opacity: unset !important;
    background: unset !important;
}

.vjs-audio .vjs-current-time,
.vjs-audio .vjs-duration {
    position: absolute !important;
    bottom: calc(6.3625rem - 1.2rem) !important; /* 6.3625rem is from .vjs-progress-control */
    font-family: "FigTree", serif !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    font-size: 0.925rem !important;
    color: var(--zeale-black-80) !important;
}

.vjs-audio .vjs-volume-panel {
    display: none !important;
}

/* position current time (on left) */
.vjs-audio .vjs-current-time {
    left: 3% !important;
}

/* SMALL SCREEN position current time (on left)  */
.vjs-480.vjs-audio .vjs-current-time {
    left: 0.6rem !important;
}

/* position total duration (on right) */
.vjs-audio .vjs-duration {
    right: 3% !important;
}

/* SMALL SCREEN position current time (on left) */
.vjs-480.vjs-audio .vjs-duration {
    right: 0.6rem !important;
}

/* ? */
.vjs-audio .vjs-time-divider {
    display: none !important;
}

/* hide volume panel mute button */
.vjs-audio .vjs-volume-panel .vjs-mute-control {
    display: none !important;
}

/* ? */
.vjs-audio .vjs-progress-control .vjs-play-progress:before {
    opacity: unset !important;
    background: #1b2b34 !important;
}

/* align text on right */
.vjs-audio .vjs-duration-display {
    margin-right: 0 !important;
}

/* current progress in show */
.vjs-audio .vjs-control-bar .vjs-progress-control {
    bottom: 6.3625rem !important;
    width: calc(100% - 3rem) !important;
    height: 25px !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 1.5rem !important;
    right: 1.5rem !important;
}

/* SMALL SCREEN current progress in show */
.vjs-audio .vjs-480 .vjs-control-bar .vjs-progress-control {
    width: calc(99% - 2.4rem) !important;
}

/* set height of load progress */
.vjs-audio .vjs-control-bar .vjs-progress-control .vjs-load-progress,
.vjs-audio .vjs-progress-control .vjs-load-progress,
.vjs-audio .vjs-progress-control .vjs-play-progress {
    height: 0.25rem !important;
    top: -5.6rem !important;
}

/* set height (and width??) of play progress (I think left padding equivalent) */
.video-js .vjs-progress-control .vjs-play-progress:before {
    width: 1rem !important;
    height: 1rem !important;
    right: -8px !important; /* moves ball slightly to the right */
    top: -6px !important; /* move ball slightly up */
}

/* set background of control bar */
.vjs-audio .vjs-control-bar {
    background: rgba(0,0,0,0) !important;
}

.vjs-audio div.vast-skip-button:hover {
    /* !important is because I need to override videojs' built in CSS */
    background-color: lightgray !important;
    color: #000 !important;
}

    .vjs-audio div.vast-skip-button:hover .vast-skip-button-text {
        /* !important is because I need to override videojs' built in CSS */
        color: #000 !important;
    }

/* this lets us move control bar items wherever we want, and force showing even when "ended" */
.video-js .vjs-control-bar,
.video-js.vjs-ended .vjs-control-bar {
    display: contents !important;
}

    /* position rewind/ff buttons vertically, and size/position */
    .video-js .vjs-control-bar .vjs-rewind-control,
    .video-js .vjs-control-bar .vjs-forward-control,
    .video-js .vjs-control-bar .zeale-speed-control {
        position: absolute !important;
        bottom: 1.7925rem !important;
        width: 3.0rem !important;
        height: 3.0rem !important;
    }

/* SMALL SCREEN position control buttons slightly lower */
.vjs-480.video-js .vjs-control-bar .vjs-rewind-control,
.vjs-480.video-js .vjs-control-bar .vjs-forward-control,
.vjs-480.video-js .vjs-control-bar .zeale-speed-control {
    bottom: 1.1925rem !important;
}

.video-js .vjs-control-bar .zeale-speed-control {
    left: 3% !important;
}

.video-js .vjs-control-bar .vjs-rewind-control {
    left: calc(50% - (3rem * 3)) !important;
}

.video-js .vjs-control-bar .vjs-forward-control {
    right: calc(50% - (3rem * 3)) !important;
}

/* SMALL SCREEN position speed control (on left)
                    .vjs-480.vjs-audio .vjs-control-bar .zeale-speed-control {
                        left: 0.6rem !important;
                    } */

/* center our play/pause and replay buttons */
.video-js .vjs-control-bar .vjs-play-control.vjs-button,
.video-js .vjs-replay-button {
    position: absolute !important;
    left: 50% !important;
    top: unset !important;
    bottom: -0.5rem !important;
    border-radius: 50% !important;
    background-color: #ccd0d2 !important;
    height: 3.75rem !important;
    width: 3.75rem !important;
    transform: translate(-50%, -50%) !important;
}

/* make control glyphs large (play/pause one is larger, changed afterwards */
.video-js .vjs-control-bar .vjs-svg-icon {
    width: 2rem !important;
    height: 2rem !important;
    fill: #35434b !important;
}

/* disable the drop shadows */
.video-js .vjs-svg-icon {
    filter: none !important;
}

/* sets top of control for play/pause, replay, and big-play (before-played) button in common */
.vjs-audio .vjs-play-control {
    top: 7.4rem !important;
}

.vjs-audio .button,
.vjs-audio .vjs-big-play-button.vjs-bp-block {
    top: 8rem !important;
}

/* SMALL SCREEN move play/pause, replay, and big-play (before-played) button down */
.vjs-480.vjs-audio .vjs-play-control,
.vjs-480.vjs-audio .button,
.vjs-480.vjs-audio .vjs-big-play-button.vjs-bp-block {
    top: 8.5rem !important;
}

/* adjust play/paused button used while playing */
.vjs-audio .vjs-play-control,
.vjs-audio .vjs-replay-button {
    background-color: #ccd0d2 !important;
    height: 3.75rem !important;
    width: 3.75rem !important;
    bottom: -0.5rem !important;
    top: unset !important;
}

    /* adjust play/paused button icon used while playing */
    .vjs-audio .vjs-play-control .vjs-svg-icon,
    .vjs-audio .vjs-replay-button .vjs-svg-icon {
        fill: #35434b !important;
        width: 60% !important;
        height: 60% !important;
    }

/* dont show any labels on controls */
.vjs-control-text {
    display: none !important;
}

/* make loading bar thicker */
.video-js .vjs-progress-control .vjs-slider:before {
    height: 0.5rem !important;
}

/* show rewind/forward even on small screens, but adjust their placement */
.vjs-480 .vjs-rewind-control {
    display: block !important;
    left: 22% !important;
}

.vjs-480 .vjs-forward-control {
    display: block !important;
    right: 22% !important;
}

.vjs-replay-button,
.vjs-ended:not(.vjs-vr):not(.vjs-up-next):not(.vjs-outstream) .vjs-replay-button {
    position: absolute !important;
    z-index: -10 !important;
}

/* show controls even when not playing, and have to be MORE specific than the shaka videojs theme which already uses !important */
div.video-js div.vjs-control-bar.vjs-null {
    opacity: unset !important;
    visibility: visible !important;
}

.video-js .vjs-control-bar .vjs-icon-placeholder {
    font-family: "FigTree", serif !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    color: var(--zeale-black-80) !important;
    fill: var(--zeale-black-80) !important;
    font-size: 1.1rem !important;
    display: block !important;
}