.vjs-popcorn-skin
    color #1c1c1c
    .vjs-slider
        position relative
        cursor pointer
        background-color rgba(255,255,255,0.2)
        &:hover
            & > .vjs-slider-handle:before
                color $PlayerColor

    .vjs-slider-handle
        position absolute
        top -6px
        width 14px
        height 14px
        margin-left -8px
        &:before
            color rgba(255,255,255,0)
            content '\25CF'
            font-size 46px
            line-height 14px
            transition all .1s !important

    .vjs-control-bar, .vjs-control-window
        display none
        position absolute
        bottom 0
        left 0
        background linear-gradient(transparent, rgba(0,0,0,0.7))

    .vjs-control-bar
        right 0
        height 60px
        width 100%

    &.vjs-user-active
        .player-header-background
            display block

    .vjs-live-controls
        display none

    &.vjs-has-started
        &.vjs-user-inactive
            &.vjs-playing
                .vjs-control-bar, .vjs-control-window
                    display block
                    visibility hidden
                    opacity 0
                    transition visibility 1s, opacity 1s
                    transition visibility 1s, opacity 1s

        .vjs-big-play-button
            display none

    &.vjs-controls-disabled
        .vjs-control-bar, .vjs-control-window
            display none

        .vjs-big-play-button
            display none

    &.vjs-using-native-controls
        .vjs-control-bar, .vjs-control-window
            display none

        .vjs-big-play-button
            display none

    &.vjs-error
        .vjs-control-bar, .vjs-control-window
            display none

        .player-header-background
            &.vjs-control-bar, .vjs-control-window
                visibility visible!important
                opacity 1!important
                display block!important

    .vjs-control
        outline none
        position relative
        float left
        text-align center
        margin 0

    .vjs-control-text
        border 0
        clip rect(0 0 0 0)
        height 1px
        margin -1px
        overflow hidden
        padding 0
        position absolute
        width 1px

    .vjs-play-control
        top 24px
        cursor pointer
        width 14px
        height 16px
        margin-left 20px
        &:hover
            transition all .5s
            -webkit-filter brightness(0.70)
            &:before
                text-shadow none !important

        &:before
            position relative
            text-shadow none !important
            content "\f04b"
            color white
            font-family "Font Awesome 6 Free"
            font-size 14px
            line-height 17px
            font-weight 900

    &.vjs-playing
        .vjs-play-control
            &:before
                content "\f04c"

    .vjs-playback-rate
        .vjs-playback-rate-value
            font-size 1.5em
            line-height 2
            position absolute
            top 0
            left 0
            width 100%
            height 100%
            text-align center
            text-shadow 1px 1px 1px rgba(0, 0, 0, 0.5)

        &.vjs-menu-button
            .vjs-menu
                .vjs-menu-content
                    width 4em
                    left -2em
                    list-style none

    .vjs-mute-control
        &:hover
            transition all .5s
            -webkit-filter brightness(0.70)

    .vjs-volume-control
        top 29px
        width 54px
        float right
        margin-right 0px
        overflow hidden
        height 6px
        border-radius 3px/2px
        &:hover
            top 28px
            height 8px
            & > .vjs-volume-bar
                height 8px

    .vjs-volume-bar
        top 0px
        left -7px
        height 6px
        width 69px
        margin-right 0px
        border-radius 3px / 2px
        &:hover
            & > .vjs-volume-level
                height 8px

            & > .vjs-volume-handle:before
                font-size 14px
                color rgba(0, 0, 0, 0)

    .vjs-volume-menu-button
        .vjs-menu-content
            height 2.9em

    .vjs-volume-level
        position absolute
        top 0
        left 0
        height 6px
        background-color $PlayerColor
        border-radius 3px / 2px
        border-radius 3px / 2px
        background-clip padding
        background-clip padding-box

    .vjs-volume-handle
        &:before
            color rgba(0, 0, 0, 0)
            content '\25CF'
            font-size 14px
            line-height 17px
            margin-left 10px

    .vjs-progress-control
        position absolute
        top 19px
        width auto
        height 18px
        border-radius 3px / 2px
        border-radius 3px / 2px
        background-clip padding-box
        background-clip padding-box
        left 190px
        right 250px
        padding-top 10px
        padding-bottom 2px
        cursor pointer
        transition all .1s !important
        &:hover
            height 20px
            top 18px
            & > .vjs-progress-holder > .vjs-seek-handle:before
                color $PlayerColor

    &:hover
        .vjs-progress-control
            border-radius 3px / 2px
            background-clip padding
            background-clip padding-box

    .vjs-progress-holder
        height calc(100% + 12px)
        top -10px
        border-radius 3px/12px 12px 4px 4px
        border-top 10px solid rgba(0,0,0,0)
        border-bottom 2px solid rgba(0,0,0,0)
        background-clip padding
        background-clip padding-box

    .vjs-play-progress
        background-color $PlayerColor
        transition all 0.5s ease

    @keyframes progress
        to
            background-position -30px 0

    .vjs-load-progress
        border-radius 3px / 2px
        border-radius 3px / 2px
        background-clip padding-box
        background-clip padding-box
        background-size 6px 6px
        transition width 2s
        animation progress 2.8s linear infinite
        background-repeat repeat-x
        background-color white
        opacity 0.4

    .vjs-seek-handle
        width 11px
        height 11px
        transition all 0.5s ease
        &:before
            padding-top 0.1em

    .vjs-time-controls
        position relative
        color #fff
        font-family "Open Sans", sans-serif
        font-size 16px
        top 24px

    .vjs-current-time
        position relative
        float left
        margin-left 18px

    .vjs-duration
        position relative
        float left

    .vjs-remaining-time
        display none
        float left

    .vjs-fullscreen-control
        position relative
        top 23px
        margin-right 17px
        margin-left 17px
        cursor pointer
        float right
        width 18px
        height 18px
        &:hover
            transition all .5s
            -webkit-filter brightness(0.70)
            &:before
                text-shadow none !important

        &:before
            content "\f065"
            text-shadow none !important
            font-size 18px
            font-family "Font Awesome 6 Free"
            height 18px
            width 18px
            color white
            font-weight 900

    &.vjs-fullscreen
        .vjs-fullscreen-control
            &:before
                content "\f066"

    .vjs-big-play-button
        left 0.5em
        top 0.5em
        font-size 3em
        display block
        z-index 2
        position absolute
        width 4em
        height 2.6em
        text-align center
        vertical-align middle
        cursor pointer
        opacity 1
        background-color #07141e
        background-color rgba(7, 20, 30, 0.7)
        border 0.1em solid #3b4249
        border-radius 0.8em
        box-shadow 0px 0px 1em rgba(255, 255, 255, 0.25)
        transition all 0.4s
        &:before
            content "\e001"
            font-family VideoJS
            line-height 2.6em
            text-shadow 0.05em 0.05em 0.1em #000
            text-align center
            position absolute
            left 0
            width 100%
            height 100%

    &.vjs-big-play-centered
        .vjs-big-play-button
            left 50%
            margin-left -2.1em
            top 50%
            margin-top -1.4000000000000001em

    .vjs-loading-spinner
        &:before
            content "\e01e"
            font-family VideoJS
            position absolute
            top 0
            left 0
            width 1em
            height 1em
            text-align center
            text-shadow 0em 0em 0.1em $PlayerColor
            color $PlayerColor

    .vjs-menu-button
        outline 0
        position relative
        float right
        cursor pointer
        margin-right 14px
        height 18px
        width 19px
        .vjs-menu
            .vjs-menu-content
                display block
                padding 0
                margin 0
                outline 0
                position absolute
                width 135px
                bottom 26px
                color #fff
                max-height 355px
                overflow auto
                left -55px
                background-color #151517
                opacity .8
                border-radius 3px
                &::-webkit-scrollbar
                    width 5px

                &::-webkit-scrollbar-track
                    background-color #30333c
                    border-radius 2px

                &::-webkit-scrollbar-thumb
                    background-color #83888c
                    border-radius 2px
                    &:hover
                        background-color #93989c

        &:hover
            .vjs-menu
                display block
                outline 0

        ul
            li
                list-style none
                margin 0
                padding 0.4em 0 0.4em 0
                line-height 1.4em
                font-size 1.2em
                text-align center
                outline 0
                &.vjs-selected
                    color $PlayerColor
                    background-color #151517
                    outline 0

                &.vjs-menu-title
                    text-align center
                    text-transform uppercase
                    font-size 1em
                    line-height 2em
                    padding 0
                    margin 0 0 0.3em 0
                    font-weight bold
                    cursor default

    .vjs-menu
        display none
        position absolute
        bottom 0
        right 1px
        width 20px
        height 30px
        margin-bottom 10px
        outline 0

    .vjs_smallersub_button
        &.vjs-control
            outline 0
            position relative
            float right
            cursor pointer
            margin-right 14px
            height 13px
            width 14px
            &:hover
                transition all .5s
                -webkit-filter brightness(0.70)
                &:before
                    text-shadow none

            &:before
                height 13px
                width 14px
                font-size 14px
                line-height 16px
                content "A"
                color #fff

    .vjs_biggersub_button
        &.vjs-control
            outline 0
            position relative
            float right
            cursor pointer
            margin-right 14px
            height 13px
            width 14px
            &:hover
                transition all .5s
                -webkit-filter brightness(0.70)
                &:before
                    text-shadow none

            &:before
                height 13px
                width 14px
                font-size 18px
                line-height 14px
                content "A"
                color #fff

    .vjs-subtitles-button
        &:before
            content url('../images/icons/player/Subtitles.png')

        &:hover
            &:before
                transition all .5s
                -webkit-filter brightness(0.70)

    .vjs-hidden
        display none

.vjs-popcorn-skin
    &.vjs-has-started
        .vjs-control-bar, .vjs-control-window
            display block
            visibility visible
            transition visibility 0.1s, opacity 0.1s
            transition visibility 0.1s, opacity 0.1s

.vjs-popcorn-skin .vjs-control:focus:before,
.vjs-popcorn-skin .vjs-control:hover:before
    text-shadow 0em 0em 1em #ffffff

.vjs-popcorn-skin .vjs-mute-control,
.vjs-popcorn-skin .vjs-volume-menu-button
    top 25px
    cursor pointer
    float right
    height 16px
    width 22px
    margin-right 11px

.vjs-popcorn-skin .vjs-mute-control:before,
.vjs-popcorn-skin .vjs-volume-menu-button:before
    position relative
    content url('../images/icons/player/Sound3.png')

.vjs-popcorn-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-popcorn-skin .vjs-volume-menu-button.vjs-vol-2:before
    content url('../images/icons/player/Sound2.png')

.vjs-popcorn-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-popcorn-skin .vjs-volume-menu-button.vjs-vol-1:before
    content url('../images/icons/player/Sound1.png')

.vjs-popcorn-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-popcorn-skin .vjs-volume-menu-button.vjs-vol-0:before
    content url('../images/icons/player/Sound0.png')

.vjs-popcorn-skin .vjs-progress-holder .vjs-play-progress,
.vjs-popcorn-skin .vjs-progress-holder .vjs-load-progress
    position absolute
    display block
    height 100%
    margin 0
    padding 0
    left 0
    top 0
    border-radius 3px / 2px
    border-radius 3px / 2px
    background-clip padding
    background-clip padding-box
    background-clip padding-box

.vjs-current-time-display
    width 50px
    text-align right

.vjs-duration-display
    width 50px
    text-align left

.vjs-time-divider
    position relative
    color #fff
    font-family "Open Sans", sans-serif
    font-size 16px
    position relative
    float left
    margin-left 4px
    margin-right 3px
    top 8px

.vjs-popcorn-skin:hover .vjs-big-play-button,
.vjs-popcorn-skin .vjs-big-play-button:focus
    outline 0
    border-color #fff
    background-color #505050
    background-color rgba(50, 50, 50, 0.75)
    box-shadow 0 0 3em #ffffff
    box-shadow 0 0 3em #ffffff
    transition all 0s
    transition all 0s

.vjs-error
    .vjs-big-play-button
        display none

    .vjs-error-display
        display block
        position absolute
        left 0
        top 75px
        width 100%
        height calc(100% - 115px)

.vjs-error-display
    display none
    div
        top 40%
        color #666
        position absolute
        font-size 1.6em
        text-align center
        bottom 1em
        right 1em
        left 1em
        width 60%
        margin-left 20%

.vjs-error-display a,
.vjs-error-display a:visited
    color #F4A460

.vjs-loading-spinner
    display none
    position absolute
    top 50%
    left 50%
    font-size 4em
    line-height 1
    width 1em
    height 1em
    margin-left -0.5em
    margin-top -0.5em
    opacity 0.75
    animation spin 1.5s infinite linear

.video-js
    background-color #000
    position relative
    padding 0
    font-size 10px
    vertical-align middle
    font-weight normal
    font-style normal
    font-family Arial, sans-serif
    user-select none
    user-select none
    &.vjs-error
        .vjs-loading-spinner
            display none !important

        .vjs-text-track
            display none!important

    .vjs-tech
        position absolute
        top -50vh
        left -50vh
        width calc(100% + 100vh)
        height calc(100% + 100vh)
        border 50vh solid #000

    &.vjs-fullscreen
        position fixed
        overflow hidden
        z-index 1000
        left 0
        top 0
        bottom 0
        right 0
        width 100% !important
        height 100% !important
        &.vjs-user-inactive
            cursor none

    &:-webkit-full-screen
        width 100% !important
        height 100% !important

    &.vjs-using-native-controls
        .vjs-poster
            display none

    .vjs-text-track-display
        text-align center
        position absolute
        bottom 38px
        left 1em
        right 1em

    .vjs-text-track
        display none
        text-align center
        background-color transparent
        text-shadow 0px 0px 10px #000, -2px -2px 1px #000, 2px -2px 1px #000, -2px 2px 1px #000, 2px 2px 1px #000
        pointer-events none

    .vjs-subtitles
        color #ffffff

    .vjs-captions
        color #ffcc66

.vjs-popcorn-skin .vjs-menu-button .vjs-menu .vjs-menu-content::-webkit-resizer,
.vjs-popcorn-skin .vjs-menu-button .vjs-menu .vjs-menu-content::-webkit-scrollbar-corner,
.vjs-popcorn-skin .vjs-menu-button .vjs-menu .vjs-menu-content::-webkit-scrollbar-button,
.vjs-popcorn-skin .vjs-menu-button .vjs-menu .vjs-menu-content::-webkit-scrollbar-track-piece
    display none

.vjs-popcorn-skin .vjs-menu-button ul li:hover,
.vjs-popcorn-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-popcorn-skin .vjs-menu-button ul li.vjs-selected:hover
    color $PlayerColor

.vjs-popcorn-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-popcorn-skin .vjs-captions-button:hover .vjs-control-content:before
    box-shadow 0 0 1em #ffffff
    box-shadow 0 0 1em #ffffff

body
    &.vjs-full-window
        padding 0
        margin 0
        height 100%
        overflow-y auto

.vjs-poster
    background-repeat no-repeat
    background-position 50% 50%
    background-size contain
    cursor pointer
    height 100%
    margin 0
    padding 0
    position relative
    width 100%
    img
        display block
        margin 0 auto
        max-height 100%
        padding 0
        width 100%

.vjs-tt-cue
    display block
    padding 5px 10px

.vjs-lock-showing
    display block !important
    opacity 1
    visibility visible

.vjs-poster,
.vjs-loading-spinner,
.vjs-big-play-button,
.vjs-text-track-display,
.vjs-youtube .iframeblocker
    pointer-events none !important

#vjs-tip
    visibility hidden
    display block
    padding 5px
    font-size 11px
    position absolute
    z-index 100000
    pointer-events none

#vjs-tip-arrow
    background url(unquote('data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==')) no-repeat top left
    bottom 0
    left 50%
    margin-left -4px
    background-position bottom left
    position absolute
    width 9px
    height 5px
    opacity 0

#vjs-tip-inner
    border-radius 3px
    border-radius 3px
    padding 5px 8px 4px
    background-color rgba(0,0,0,0)
    color #fff
    max-width 200px
    text-align center
    font-size 150%
    font-weight 500
