:root {

        /* 
        
        document.documentElement.style.setProperty('--progress-bar', data.progress_bar.color);
        document.documentElement.style.setProperty('--progress-bar-background', data.progress_bar.background_color);
        document.documentElement.style.setProperty('--control-icons', data.control_icons.icon_color);
        document.documentElement.style.setProperty('--progress-slider', data.control_icons.slider_color);
        document.documentElement.style.setProperty('--volume-slider-background', data.control_icons.volume_slider_background_color);
        document.documentElement.style.setProperty('--volume-slider', data.control_icons.volume_slider_color);
        document.documentElement.style.setProperty('--left-controls-text', data.control_icons.left_controls_text);
    
        
        
    */

    --progress-bar: #d1151e;
    --progress-bar-background: #000000;
    --control-icons: #f2efef;
    --progress-slider: #f1efef;
    --volume-slider-background: #d1141e;
    --volume-slider: #f2efef;
    --left-controls-text: #f2efef;



    --plyr-control-radius: 0;
    --plyr-color-main: var(--progress-bar);
    --plyr-video-control-color: var(--control-icons);
    --plyr-video-progress-buffered-background: var(--progress-bar-background);
    --plyr-range-thumb-background: var(--progress-slider);
}


.vjs-control-bar {
    color: var(--control-icons) !important;
}

.vjs-load-progress {
    background: var(--progress-bar-background) !important;
    color: var(--progress-slider) !important;
}

.vjs-volume-level {
    background-color: var(--progress-bar) !important;
}

.vjs-play-progress {
    background-color: var(--progress-bar) !important;
    color: var(--progress-slider) !important;
}

.vjs-slider-horizontal {
    background: var(--progress-bar-background) !important;
}


/* Start Layout 1 */
.veri_layout_1_plyr_controls {
    flex-direction: column;
}

.veri_layout_1_plyr_controls .plyr_custom_progress {
    width: 100%;
}

.plyr__controls .plyr_custom_controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-basis: auto;
}



.veri_layout_1_plyr_controls .plyr_custom_controls_actions {
    width: 33.333%;
    display: flex;
    justify-content: flex-start;
}


.veri_layout_1_plyr_controls .plyr_custom_controls_time {
    display: flex;
    align-items: center;
    width: 33.333%;
    justify-content: center;
}

.veri_layout_1_plyr_controls .plyr_custom_controls_volume {
    display: flex;
    width: 33.333%;
    align-items: center;
    justify-content: flex-end;
}

.veri_layout_1_plyr_controls .plyr__time {
    margin: 5px;
}

/* End layout 1 */


/* ---------------- */

/* Start Layout 2 */
.veri_layout_2_plyr_controls {
    flex-direction: column;
}

.veri_layout_2_plyr_controls .plyr_custom_progress {
    width: 100%;
}

.plyr__controls .plyr_custom_controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-basis: auto;
}



.veri_layout_2_plyr_controls .plyr_custom_controls_actions {
    width: 33.333%;
    display: flex;
    justify-content: center;
}


.veri_layout_2_plyr_controls .plyr_custom_controls_time {
    display: flex;
    align-items: center;
    width: 33.333%;
    justify-content: flex-start;
}

.veri_layout_2_plyr_controls .plyr_custom_controls_volume {
    display: flex;
    width: 33.333%;
    align-items: center;
    justify-content: flex-end;
}

.veri_layout_2_plyr_controls .plyr__time {
    margin: 5px;
}

/* End layout 2 */

/* ------------------------------------- */


/* Start Layout 3 */
.veri_layout_3_plyr_controls {
    flex-direction: column;
}

.veri_layout_3_plyr_controls .plyr_custom_progress {
    width: 100%;
}

.plyr__controls .plyr_custom_controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-basis: auto;
}



.veri_layout_3_plyr_controls .plyr_custom_controls_actions {
    /* width: 50%; */
    display: flex;
    justify-content: flex-start;
}


/* .veri_layout_3_plyr_controls .plyr_custom_controls_time {
    display: flex;
    align-items: center;
    width: 33.333%;
    justify-content: flex-start;
} */

.veri_layout_3_plyr_controls .plyr_custom_controls_volume {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.veri_layout_3_plyr_controls .plyr__time {
    margin: 5px;
}

/* End layout 3 */




#video {
    display: block !important;
    width: 100%;
    height: 400px;
}

.video-js .vjs-play-progress:before,
.vjs-slider-horizontal .vjs-volume-level:before {
    top: 0px;
}