/* ==================== */
/* ===== Video js ===== */
/* ==================== */ 

.wrapper .video-js .vjs-big-play-button {background: var(--c-main) !important;color: #fff;border: none;width: 200px;height: 200px;line-height: 196px;padding: 0;border-radius: 50%;box-shadow: 0 0 20px rgb(0 0 0 / 30%);/* border: solid 2px #fff; */margin: 0;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 10;border: solid 3px #fff;}
.wrapper .video-js .vjs-big-play-button .vjs-icon-placeholder {}
.wrapper .video-js .vjs-big-play-button .vjs-icon-placeholder::before {font-family: "Font Awesome 5 Free";content: "\f04b";font-weight: 900;font-size: 70px;margin: 0 0 0 3px;}

.wrapper .video-js {background:#fff}
.wrapper .video-js .vjs-control-bar {background: none;height: auto;padding: 0 40px 20px;margin: 0 0 0px 0;display: flex;align-items: center;}
.wrapper .video-js .vjs-control-bar::after {content:"";background: #009ace;background: -moz-linear-gradient(0deg, #0f62fd 0%, rgba(216,25,30,0) 100%);background: -webkit-linear-gradient(0deg, #009ace 0%, rgba(216,25,30,0) 100%);background: linear-gradient(0deg, #009ace  0%, rgba(216,25,30,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d8191e",endColorstr="#d8191e",GradientType=1);position: absolute;right: 0;left: 0;top: -90px;z-index: 0;pointer-events: none;bottom: 0;}
.wrapper .video-js .vjs-control-bar > * {z-index:1}

.wrapper .video-js .vjs-control-bar .vjs-time-control {font-size:13px}
.wrapper .video-js .vjs-control-bar .vjs-button {height: 40px;width: 40px;z-index: 11;}
.wrapper .video-js .vjs-control-bar .vjs-button .vjs-volume-control {}
.wrapper .video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder {}
.wrapper .video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder::before {line-height: 40px;font-size: 32px;}
.wrapper .video-js .vjs-control-bar .vjs-button.vjs-chapters-button .vjs-icon-placeholder::before {content: "\e93a";font-family: icomoon;font-size: 24px;}

.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-horizontal {}
.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-horizontal .vjs-volume-control {height: 40px !important;}
.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-horizontal .vjs-volume-control .vjs-volume-bar {margin: 19px 0 0 0;height: 2px;background: rgb(255 255 255 / 50%);}
.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-horizontal .vjs-volume-control .vjs-volume-bar .vjs-volume-level {height: 2px;}

.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-vertical {height: 40px;}
.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-vertical .vjs-volume-control {background: var(--c-main);border-radius: 5px;}
.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-vertical .vjs-volume-control::after {content:"";width: 0;height: 0;border-style: solid;border-width: 10px 9px 0 9px;border-color: var(--c-main) transparent transparent transparent;position: absolute;left: 50%;transform:translateX(-50%);bottom: -4px;}
.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-vertical .vjs-volume-control .vjs-volume-bar {background: rgba(255 255 255 / 50%);}
.wrapper .video-js .vjs-control-bar .vjs-volume-panel.vjs-volume-panel-vertical .vjs-volume-control .vjs-volume-bar .vjs-volume-level {}

.video-js .vjs-volume-control .vjs-mouse-display {background:#fff}

.wrapper .video-js .vjs-control-bar .vjs-control-text {}

.wrapper .video-js .vjs-control-bar .vjs-progress-control {padding: 0 50px;}
.wrapper .video-js .vjs-control-bar .vjs-progress-control .vjs-progress-holder {background: rgb(255 255 255 / 50%);height: 2px;text-shadow: none;box-shadow: none;}
.wrapper .video-js .vjs-control-bar .vjs-progress-control .vjs-progress-holder .vjs-load-progress {background: rgb(255 255 255 / 50%);}
.wrapper .video-js .vjs-control-bar .vjs-progress-control .vjs-progress-holder .vjs-load-progress div {background: rgb(255 255 255 / 50%);}
.wrapper .video-js .vjs-control-bar .vjs-progress-control .vjs-progress-holder .vjs-play-progress {}
.wrapper .video-js .vjs-control-bar .vjs-progress-control .vjs-progress-holder .vjs-play-progress::before {line-height: 2px;}


.wrapper .video-js .vjs-time-tooltip {background: #fff;color: #333f4c;font-weight: bold;}
.wrapper .video-js .vjs-mouse-display .vjs-time-tooltip {background: rgb(255 255 255 / 40%);color: #fff;font-weight: normal;display: none;}
.wrapper .video-js .vjs-progress-control .vjs-mouse-display {background:#fff}

.wrapper .vjs-mouse-display {background:#fff}
.wrapper .vjs-mouse-display .vjs-volume-tooltip {background: #fff;color: #333f4c;font-weight: bold;}

.wrapper .vjs-menu-button-popup .vjs-menu {}
.wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content {background: var(--c-main);font-size: 9px;border-radius: 5px;margin: 0 0 10px 0;padding: 10px;text-align: left;color: #fff;overflow: visible;width: 200px !important;left: 50%;transform: translateX(-50%);}
.wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content::before {content:"";width: 0;height: 0;border-style: solid;border-width: 10px 9px 0 9px;border-color: var(--c-main) transparent transparent transparent;position: absolute;left: 50%;transform:translateX(-50%);bottom: -5px;}
.wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content .vjs-menu-title {color: #fff;text-align: left;font-size: 12px;}
.wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content .vjs-menu-item {color: #fff;font-size: 12px;text-align: left;background: none;line-height: 1;text-transform: none;padding: 5px 0;}
.wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content .vjs-menu-item.vjs-texttrack-settings {display:none}
.wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content .vjs-menu-item:hover {font-weight:bold}
.wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content .vjs-menu-item[aria-checked="true"] {font-weight: 600; text-align: left; }


.wrapper .vjs-modal-dialog {left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; height: 100%; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content {background: #fff; color: #333f4c; display: block; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content .vjs-track-settings-colors {display: flex; gap: 20px; margin: 0 0 20px 0; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content .vjs-track-settings-font {width: 100%; display: flex; gap: 20px; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content fieldset {margin: 0; padding: 0; width: 100%; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content fieldset span {display: block; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content fieldset legend {color: #333f4c; font-weight: bold; font-size: 11px; border: none; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content fieldset select {width: 100%; max-width: 100%; margin: 0 0 10px 0; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content .vjs-track-settings-controls {display: block; }
.wrapper .vjs-modal-dialog .vjs-modal-dialog-content .vjs-track-settings-controls button {background: var(--c-main); color: #fff; font-size: 11px; padding: 5px 12px; border-radius: 5px; border: none; }

.video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before, .video-js .vjs-control:focus {text-shadow: none !important;}

.wrapper .video-js .vjs-loading-spinner {border: solid 6px rgb(255 255 255 / 0.5); }
.wrapper .video-js .vjs-loading-spinner::before {}
.wrapper .video-js .vjs-loading-spinner::after {}


@media (max-width: 767px) {
    .wrapper .video-js .vjs-big-play-button {width: 70px; height: 70px; line-height: 70px; }
    .wrapper .video-js .vjs-big-play-button .vjs-icon-placeholder::before {font-size: 35px; }
    .wrapper .video-js .vjs-control-bar {padding: 0 0px 0;}
    .wrapper .video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder::before {font-size: 20px;}
    .wrapper .video-js .vjs-control-bar .vjs-progress-control {padding:0 }
    .wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content {overflow:auto;max-height: 150px !important;}
    .wrapper .vjs-menu-button-popup .vjs-menu .vjs-menu-content::before {content:none}
}


.wrapper .podcast .item .banner .video-js {position: absolute;left: 0;right: 0;bottom: 0;top: 0;padding: 0;width: 100%;height: 100%;background: rgb(0 0 0 / 70%);z-index: 10;}
.wrapper .podcast .video-js .vjs-control-bar {padding: 0 10px 10px;}
.wrapper .podcast .video-js .vjs-control-bar .vjs-time-control.vjs-time-divider {padding:0;min-width: 10px;text-align: center;}
.wrapper .podcast .video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder::before {font-size: 28px;}
.wrapper .podcast .video-js .vjs-control-bar .vjs-progress-control {padding:0}
.wrapper .podcast .video-js .vjs-control-bar .vjs-fullscreen-control {display: none;}
.wrapper .podcast .video-js .vjs-control-bar .vjs-time-control {font-size: 11px; }


.video-js.vjs-fullscreen {width: 100% !important;height: 100% !important;padding-top: 0 !important; }