/* yes pretty much everything has !important to actually make what I want happen */

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

/* using div.video-js to be more authoritative than built-in video-js*/
.video-js {
    margin: 0 auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: calc(100vh - 72px) !important;
    height: 100% !important;
    width: 100% !important;
    background: transparent !important;
}

    .video-js .vjs-tech {
        height: fit-content;
    }

/* hide elements we are not using that cause layout issues */
.vjs-custom-control-spacer,
.vjs-spacer {
    display: none !important;
}

.vjs-quality-button,
div.video-js div.vjs-control-bar .vjs-quality-button,
div.video-js div.vjs-control-bar .vjs-quality-button.vjs-menu-button.vjs-control.vjs-button {
    display: none !important; /* hide the button!! */
}

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

div.vjs-poster {
    width: 100% !important;
    background-color: transparent !important;
}

picture.vjs-poster {
    margin: 0 auto;
    width: auto;
    background-color: var(--zeale-black-100) !important;
}

/* hide play button when vast ad playing */
div.vjs-ad-playing div.vjs-control-bar div.vjs-rewind-control,
div.vjs-ad-playing div.vjs-control-bar div.vjs-play-control.vjs-control.vjs-button.vjs-playing,
div.vjs-ad-playing div.vjs-control-bar div.vjs-forward-control,
div.vjs-ad-playing div.vjs-big-play-button {
    display: none !important;
}

.vjs-title-bar {
    top: unset !important;
    bottom: 0 !important;
}

.vjs-title-bar-title {
    font-size: 0.95rem !important;
}

.vjs-title-bar-description {
    font-size: 0.875rem !important;
}

/* remove drop shadow */
.vjs-svg-icon {
    filter: none !important;
}

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

    .vjs-1600 .vjs-time-control,
    .video-js .vjs-current-time {
        margin-left: 0px !important;
    }

    .video-js .vjs-duration-display {
        margin-right: 0px !important;
    }

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

    /* do NOT show tooltips! */
    .video-js .vjs-control-text {
        display: none !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;
    }

    /* force icons in middle (ff/rewind) to be large */
    .video-js .vjs-rewind-control,
    .video-js .vjs-play-control,
    .video-js .vjs-forward-control {
        width: 4rem !important;
        height: 4rem !important;
    }

        .video-js .vjs-rewind-control .vjs-svg-icon,
        .video-js .vjs-play-control .vjs-svg-icon,
        .video-js .vjs-forward-control .vjs-svg-icon {
            width: 3.2rem !important;
            height: 3.2rem !important;
            fill: white !important;
        }

    /* black text when live*/
    .video-js .vjs-live-control {
        text-shadow: 1px 1px 1px #000 !important;
        height: 30px !important;
        padding-right: 10px !important;
        line-height: 32px !important;
        position: absolute !important;
        bottom: 1rem !important;
        left: 5rem !important;
        color: var(--zeale-black-90) !important;
        text-shadow: 0 0 #000 !important;
    }

    /* red button when live*/
    .video-js .vjs-live-display:before {
        background-color: red !important;
    }

    /* match design for big play button */
    .video-js .vjs-control-bar .vjs-play-control {
        background: transparent !important;
        bottom: calc(50% - 2rem) !important;
        left: calc(50% - 2rem) !important;
    }

    .video-js .vjs-big-play-button {
        background: transparent !important;
        position: absolute !important;
        width: 4.0rem !important;
        height: 4.0rem !important;
        top: calc(50%) !important;
        bottom: unset !important;
        left: 50% !important;
    }

    .video-js.vjs-480.vjs-has-started .vjs-big-play-button {
        pointer-events: all !important;
    }

    /* if ads playing, hide pause/play buttons */
    .video-js.vjs-ad-playing .vjs-big-play-button,
    .video-js.vjs-ad-playing .vjs-rewind-control,
    .video-js.vjs-ad-playing .vjs-play-control,
    .video-js.vjs-ad-playing .vjs-forward-control {
        pointer-events: none !important;
        display: none !important;
        visibility: hidden !important;
    }

    .video-js.vjs-ad-playing.vjs-paused .vjs-big-play-button,
    .video-js.vjs-ad-playing.vjs-paused .vjs-play-control {
        pointer-events: revert !important;
        visibility: revert !important;
    }

    .video-js .vjs-replay-button {
        width: 4.0rem !important;
        height: 4.0rem !important;
        left: calc(50% - 0.4rem);
        display: none !important; /* actually we dont need if big play shows up */
    }

        .video-js .vjs-replay-button .vjs-svg-icon {
            width: 4.0rem !important;
            height: 4.0rem !important;
        }

    .video-js .vjs-big-play-button .vjs-svg-icon,
    .video-js .vjs-control-bar .vjs-play-control .vjs-svg-icon {
        opacity: 0.7 !important;
        vertical-align: top !important;
        line-height: inherit !important;
    }

        .video-js .vjs-big-play-button .vjs-svg-icon:hover,
        .video-js .vjs-control-bar .vjs-play-control .vjs-svg-icon:hover {
            opacity: 1.0 !important;
        }

    .video-js .vjs-control-bar .vjs-airplay-button .vjs-icon-placeholder
    .video-js .vjs-control-bar .vjs-chromecast-button .vjs-icon-placeholder {
        width: 1.5rem !important;
        height: 1.5rem !important;
        opacity: 0.7 !important;
        fill: white !important;
        vertical-align: bottom !important;
        line-height: inherit !important;
    }

    .video-js .vjs-fullscreen-control.vjs-control.vjs-button {
        bottom: 3.4rem !important;
        right: 2rem !important;
        position: absolute !important;
        width: 1.65rem !important;
    }

        .video-js .vjs-fullscreen-control.vjs-control.vjs-button .vjs-icon-placeholder {
            width: 28px !important;
            height: 29px !important;
        }

    /* small screen: right side moves to 0.6rem */
    .video-js.vjs-480 .vjs-fullscreen-control.vjs-control.vjs-button {
        right: 0.6rem !important;
        bottom: 2.4rem !important;
    }

    .video-js .vjs-airplay-button.vjs-control.vjs-button,
    .video-js .vjs-chromecast-button.vjs-control.vjs-button {
        bottom: 3.4rem !important;
        right: 4.65rem !important;
        position: absolute !important;
        width: 1.65rem !important;
    }

        .video-js .vjs-airplay-button.vjs-control.vjs-button .vjs-icon-placeholder,
        .video-js .vjs-chromecast-button.vjs-control.vjs-button .vjs-icon-placeholder {
            width: 24px;
            height: 37px;
        }

    /* small screen: second right side moves to 2.75rem */
    .video-js.vjs-480 .vjs-airplay-button.vjs-control.vjs-button,
    .video-js.vjs-480 .vjs-chromecast-button.vjs-control.vjs-button {
        right: 2.75rem !important;
        bottom: 2.4rem !important;
    }

    .video-js .vjs-control-bar .vjs-progress-control {
        bottom: 2rem !important;
    }

    /* small screen move down */
    .video-js.vjs-480 .vjs-control-bar .vjs-progress-control {
        bottom: 1.1rem !important;
    }

    .video-js .vjs-current-time,
    .video-js .vjs-duration {
        position: absolute !important;
        bottom: 1rem !important;
        font-family: "FigTree", serif !important;
        font-weight: 600 !important;
        text-shadow: none !important;
        font-size: 0.925rem !important;
        color: #fff !important;
    }

    /* small screen: move times to edge*/
    .video-js.vjs-480 .vjs-current-time,
    .video-js.vjs-480 .vjs-duration {
        bottom: 0.1rem !important;
    }
    /* position rewind/ff and big-play 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 .vjs-play-control {
        position: absolute !important;
        width: 4.0rem !important;
        height: 4.0rem !important;
        bottom: calc(50% - 2rem) !important;
    }

    .video-js .vjs-poster {
        aspect-ratio: 16 / 9 !important;
    }

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

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

    /* small screen: move buttons a little closer */
    .video-js.vjs-480 .vjs-control-bar .vjs-rewind-control {
        left: calc(50% - 7rem) !important;
    }

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

    /* position current time (on left) */
    .video-js .vjs-current-time {
        left: 2rem !important;
    }

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

    /* position total duration (on right) */
    .video-js .vjs-duration {
        right: 2rem !important;
    }

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

    /* when done, don't show both big button AND play/pause button */
    .video-js.vjs-ended.vjs-show-big-play-button-on-pause vjs-play-control {
        display: none !important;
    }

/* dont hide rew/ff buttons on small screens (reverts a setting in video.js css theme */
.vjs-480 .vjs-rewind-control,
.vjs-480 .vjs-forward-control {
    display: inline-block !important;
}

/* when done, don't show play pause button if replay showing */
button.vjs-play-control.vjs-control.vjs-button.vjs-paused.vjs-ended {
    display: none !important;
}

div.vast-skip-button {
    bottom: 1.2rem !important;
    right: 5rem !important;
    border: 0 !important;
    padding: 0px 4px !important;
    height: auto !important;
    font-weight: normal !important;
    font-size: 0.7rem !important;
    background-color: transparent !important;
    line-height: 16px !important;
}
/* yes even at "this large size" I want this font videojs.. */
.vjs-1600 div.vast-skip-button {
    font-size: 0.9rem !important;
}

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

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

/* small screen: change layout for vast items*/
div.video-js.vjs-480 div.vast-skip-button {
    right: unset !important;
    left: 50% !important;
}
/* large screen */
div.video-js.vjs-960 div.vjs-vast-label {
    bottom: 1.4rem !important;
    font-size: 0.9rem !important;
}

div.vjs-vast-label {
    bottom: 0.7rem !important;
    position: absolute !important;
    left: 5rem !important;
    text-shadow: none !important;
}

/* larger, desktop size */
div.video-js.vjs-920 div.vjs-vast-label {
    bottom: 0.9rem !important;
    font-size: 14px !important;
}

div.video-js.vjs-480 div.vjs-vast-label {
    left: unset !important;
    right: 50% !important;
}

.vjs-480 .vjs-vast-skip-icon {
    height: 14px !important; /* we don't affect line height this way */
    margin-top: -20px !important; /* but we can still line up */
}

/* small screen line them up */
div.video-js.vjs-480 div.vjs-vast-label,
div.video-js.vjs-480 div.vast-skip-button {
    line-height: 32px !important;
    bottom: 0.1rem !important;
}

span.vjs-info,
.videojs.vjs-480 span.vjs-info,
.videojs.vjs-920 span.vjs-info {
    top: auto !important;
    bottom: 0rem !important;
    text-shadow: none !important;
    background: transparent !important;
}

.vjs-info .vjs-text {
    position: absolute !important;
    bottom: 4rem !important;
    left: 2rem !important;
    line-height: normal !important;
}

    .vjs-info .vjs-text .vjs-ttl {
        font-size: 16px !important;
    }

    .vjs-info .vjs-text .vjs-dsc {
        font-size: 13px !important;
    }

/* small screen: dont show on top of video - will display below */
.video-js.vjs-480 .vjs-info {
    display: none !important;
}

.video-js .vjs-null .vjs-control {
    display: revert-layer !important;
}

/* large screen don't move progress bar... */
.video-js.vjs-1600 .vjs-control-bar .vjs-progress-control {
    width: revert-layer !important;
    left: 2rem !important;
    right: 2rem !important;
}

/* small screen set specific start/width/stop */
.video-js.vjs-480 .vjs-control-bar .vjs-progress-control {
    left: 0.6rem !important;
    width: calc(100% - 1.2rem) !important;
    right: 0.6rem !important;
}

/* patch for Safari not revealing pause button when paused.. */
.video-js.vjs-show-big-play-button-on-pause.vjs-paused .vjs-big-play-button {
    display: block !important;
    opacity: initial !important;
}

.vast-skip-button.enabled {
    color: #fff !important;
}

div.vast-skip-button:hover {
    background-color: rgba(127,127,127,0.8) !important;
}

/* fix play button on iOS not showing */
.video-js .vjs-b-p-b {
    opacity: 1 !important;
    color: #fff !important;
    background-color: rgba(127,127,127,0.8) !important;
}

/* hide buttons on iOS */
.vjs-big-button .vjs-b-r-b, .vjs-big-button .vjs-b-f-b {
    display: none !important; /* override videojs css */
}

/* show more things when paused / not yet run */
.video-js.vjs-null .vjs-time-control,
.video-js.vjs-null .vjs-progress-control {
    visibility: visible !important;
}

/* dont show "normal" play button when paused, let big play or replay show */
.vjs-play-control.vjs-paused {
    visibility: hidden !important;
}

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

/* inactive touched enabled user - hide controls on small screens */
.video-js.vjs-touch-enabled.vjs-user-inactive .vjs-play-control,
.video-js.vjs-touch-enabled.vjs-user-inactive .vjs-rewind-control,
.video-js.vjs-touch-enabled.vjs-user-inactive .vjs-forward-control {
    display: none !important;
}

/* ad playing on INACTIVE touch screen */
.video-js.vjs-ad-playing.vjs-touch-enabled.vjs-user-inactive .vjs-control-bar,
.video-js.vjs-ad-playing.vjs-touch-enabled.vjs-user-inactive .vjs-bg-bar {
    display: none !important;
}

.video-js.vjs-ad-playing.vjs-touch-enabled.vjs-user-inactive .vjs-play-control {
    display: none !important;
}