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

/* set height to match design */
.video-js {
    height: 7.05rem !important;
    padding: 0px !important;
    color: white !important;
    background: #04283c !important;
    border-radius: 1rem !important;
    font-family: "FigTree", serif !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    font-size: 0.925rem !important;
}

    .video-js .vjs-vast-label {
        bottom: 0.3rem !important;
        position: absolute !important;
        left: 16.3rem !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;
    }

    .video-js .vjs-audio-info {
        display: none !important;
    }

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

    .video-js .vjs-control-bar .vjs-progress-control {
        bottom: calc(50% - 0.6rem) !important;
        width: calc(100% - 18.2875rem) !important;
        left: 16.1875rem !important;
    }

    .video-js .vjs-load-progress {
        background-color: #ccd0d2 !important;
    }

    .video-js .vjs-play-progress {
        background-color: #DF5231 !important;
    }

    .video-js .vjs-play-control,
    .video-js .vjs-replay-control,
    .video-js button.vjs-big-play-button.vjs-bp-block {
        background-color: #DF5231 !important;
        border-radius: 50% !important;
    }

        .video-js .vjs-play-progress .vjs-svg-icon,
        .video-js button.vjs-big-play-button.vjs-bp-block .vjs-svg-icon {
            fill: white !important;
        }

    .video-js .vjs-svg-icon {
        fill: white !important;
        width: 28px !important;
        height: 28px !important;
        filter: none !important;
    }

    .video-js .vjs-current-time,
    .video-js .vjs-duration {
        position: absolute !important;
        bottom: calc(50% - 2rem) !important;
        font-family: "FigTree", serif !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        line-height: 1.1375rem !important;
        text-shadow: none !important;
        color: var(--zeale-black-0) !important;
    }

    .video-js .vjs-current-time {
        left: 16.1875rem !important;
    }

    .video-js .vjs-duration {
        right: 1.85rem !important;
    }

    .video-js .vjs-time-divider {
        display: none !important;
    }

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

        .video-js div.vast-skip-button:hover .vast-skip-button-text {
            /* !important is because I need to override videojs' built in CSS */
            color: #000 !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 {
        position: absolute !important;
        bottom: calc(50% - 0.6rem) !important;
    }

    .video-js .vjs-control-bar .zeale-speed-control {
        position: absolute !important;
        left: 12.2rem !important;
        top: 2.1rem !important;
        font-size: 1.4rem !important;
        width: 2.375rem !important;
        height: 2.375rem !important;
        opacity: 0.7 !important;
    }

    .video-js .vjs-control-bar .vjs-rewind-control {
        left: 1.325rem !important;
        width: 2.875rem !important;
    }

    .video-js .vjs-play-control {
        position: absolute !important;
        top: 1.4rem !important;
        left: 4.6rem !important;
        width: 3.9375rem !important;
        height: 3.9375rem !important;
    }

        .video-js .vjs-play-control .vjs-svg-icon {
            height: 44px !important;
            width: 44px !important;
        }

    .video-js .vjs-replay-control,
    .video-js .vjs-big-play-button {
        position: absolute !important;
        top: 3.31rem !important;
        left: 6.525rem !important;
        width: 3.9375rem !important;
        height: 3.9375rem !important;
    }

        .video-js .vjs-replay-control .vjs-svg-icon,
        .video-js .vjs-big-play-button .vjs-svg-icon {
            height: 38px !important;
            width: 38px !important;
        }

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

    .video-js .vjs-control-bar .vjs-forward-control {
        left: 9rem !important;
        width: 2.875rem !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;
}

/* small screen show controls anyways */
.vjs-rewind-control,
.vjs-forward-control,
.vjs-480 .vjs-rewind-control,
.vjs-480 .vjs-forward-control,
.video-js .vjs-hidden.vjs-rewind-control,
.video-js .vjs-hidden.vjs-forward-control,
.video-js.vjs-480 .vjs-hidden.vjs-rewind-control,
.video-js.vjs-480 .vjs-hidden.vjs-forward-control {
    display: block !important;
    visibility: visible !important;
}
div.vjs-480 div.vjs-control-bar div.vjs-progress-control {
    bottom: 0 !important;
    left: 1rem !important;
    right: 1rem !important;
    width: calc(100% - 2rem) !important;
}
/* copied from zeale-speed-control */
div.vjs-480 div.vjs-control-bar div.vjs-current-time {
    position: absolute !important;
    right: 1.5rem !important;
    text-align: right !important;
    top: 2.735rem !important;
    font-size: 1.4rem !important;
    width: 3.375rem !important;
    color: var(--zeale-black-40) !important;
    left: unset !important;
}
/* we dont have room on the screen rn */
div.vjs-480 div.vjs-duration {
    display: none !important;
}