.preview-container {
    width: 100%;
    height: 100%; /*calc(100vh - 75px - 1em);*/
}

    .preview-container .video-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 100%;
    }

        .preview-container .video-container > .video-js {
            display: contents
        }

.video-js .vjs-text-track-display {
    container-type: size !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    /* 1% of the actual displayed video height, correct whether the video is
                       letterboxed (black bars top/bottom) or pillarboxed (black bars left/right) */
    --vh-unit: min(1cqh, 1cqw * 9 / 16);
}

    /* vtt.js wraps cues in an unclassed div with inline inset/margin (CUE_BACKGROUND_PADDING).
                       Reset it so the cue's own top/bottom/padding math lines up with the real display box. */
    .video-js .vjs-text-track-display > div {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        inset: 0 !important;
        margin: 0 !important;
    }

    .video-js .vjs-text-track-display .vjs-text-track-cue {
        position: absolute !important;
        width: auto !important;
        height: auto !important;
        font-size: calc(4.17 * var(--vh-unit)) !important;
        /* line-height: 1.1 !important; */
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* letterbox offset (centers the actual video frame within the display box,
                           whether it's letterboxed or pillarboxed) + 5% of the video frame height
                           as a safe-area margin above the bottom edge */
        padding-bottom: calc((100cqh - 100 * var(--vh-unit)) / 2 + 4 * var(--vh-unit)) !important;
    }

        /* vtt.js sets font-family: sans-serif inline on the nested divs it generates,
                           which wins over inherited (even !important) values from ancestors, so we
                           must override it directly with an author !important rule on those elements. */
        .video-js .vjs-text-track-display .vjs-text-track-cue,
        .video-js .vjs-text-track-display .vjs-text-track-cue div {
            font-family: "SVN-AvenirNext-Demi", sans-serif !important;
            /* color: white !important; */
			/* background-color: transparent !important; */
			/* text-shadow: none !important; */
			/* -webkit-text-stroke: calc(0.1 * var(--vh-unit)) black !important; */
        }

            .video-js .vjs-text-track-display .vjs-text-track-cue i {
                font-family: "SVN-AvenirNext-DemiItalic", sans-serif !important;
                font-style: normal !important;
                font-size: 67%;
                -webkit-text-stroke: calc(0.07 * var(--vh-unit)) black !important;
                display: block;
                line-height: 1 !important;
            }

/*.vjs-texttrack-settings {
                    display: none !important;
                }
                */

.vjs-menu-item-text {
	text-transform: capitalize;
}

/* Quality Selector Button */
.vjs-quality-selector .vjs-icon-placeholder {
    font-size: 0.75em;
    font-weight: bold;
    line-height: 3em;
    font-family: Arial, sans-serif;
    letter-spacing: 0.02em;
}

.vjs-quality-selector .vjs-menu {
    min-width: 80px;
}

.vjs-quality-selector .vjs-menu-item {
    text-transform: none;
    font-size: 0.9em;
}