/****** COMMON ******/

.sl-bloc li.sl-active,
.sl-bloc li.active,
.sl-player-button.sl-active {
    background-color: #666666 !important;
}
#sl-description a {
    color: #666666;
}


/****** FLOWPLAYER ******/

.flowplayer .fp-progress,
.flowplayer .fp-volumelevel,
.flowplayer .fp-dropdown li.active,
.flowplayer.is-fullscreen .fp-fullscreen
{
    background-color: #666666 !important;
}

/****** THEOPLAYER ******/

.theoplayer-skin .vjs-play-progress,
.theoplayer-skin .vjs-volume-level
{
    background-color: #666666 !important;
}

.video-js {
    --red: #D72919;
    --blue: #052E45;
    --light:#F3F5FD;
    --btn-player-img: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject x='-14' y='-14' width='70' height='70'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(7px);clip-path:url(%23bgblur_0_1267_2577_clip_path);height:100%;width:100%'%3E%3C/div%3E%3C/foreignObject%3E%3Cg data-figma-bg-blur-radius='14'%3E%3Crect width='42' height='42' rx='21' fill='%23162642'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26 21L16 27V15L26 21Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='bgblur_0_1267_2577_clip_path' transform='translate(14 14)'%3E%3Crect width='42' height='42' rx='21'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --btn-player-size : 120px
}

.video-js .vjs-big-play-button {
    background-image: var(--btn-player-img) !important;
    width: var(--btn-player-size) !important;
    height: var(--btn-player-size) !important;
    background-size: var(--btn-player-size) !important;
    margin-top: calc(-1*var(--btn-player-size)/2);
    margin-left: calc(-1*var(--btn-player-size)/2);
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.vjs-control:focus-visible,
.vjs-menu-button:focus-visible
{
    background: var(--blue) !important;
    color:var(--light) !important;
    outline: var(--red) !important;
}


.vjs-text-track-cue div
{
    background-color: rgba(51, 51, 51, 0.80) !important;
    color: var(--light) !important;
    text-shadow: initial !important;
    border-radius: 10px !important;
    padding: 12px;
}


.vjs-menu-title, .video-js .vjs-menu-item {
    color: var(--blue) !important;
    background-color: var(--light) !important;
}

.vjs-menu-item.vjs-selected {
    color: #FFFFFF !important;
}

@media (max-width: 768px) {
    .video-js {
        --btn-player-size : 60px
    }
}