.loading
    position absolute
    z-index 9
    background-color $BgColor1
    -webkit-user-select none
    width 100%
    height 100%
    opacity 1
    overflow hidden
    margin auto
    left 0
    right 0
    padding-top $TitleHeight
    -webkit-backface-visibility hidden

    .minimize-icon
        top 47px
        right 20px
        position fixed
        color $CloseButton
        font-size 18px
        cursor pointer
        z-index 100
        -webkit-font-smoothing antialiased
        transition color 0.2s

        &:hover
            color $CloseButtonHover

    .maximize-icon
        display none
        bottom 20px
        right 20px
        position fixed
        color $CloseButton
        font-size 25px
        cursor pointer
        z-index 100
        background $BgColor2
        padding 10px 20px
        opacity 0.9
        border-radius 3px
        box-shadow 0 2px 6px 0 rgba(0,0,0,0.15), 0 4px 14px 0 rgba(0,0,0,0.25)
        -webkit-font-smoothing antialiased
        transition background 0.2s, color 0.2s, opacity 0.2s

        &:hover
            color $ButtonText
            background $ButtonBgHover
            opacity 1

        &.done:hover
            color #fff
            background #27ae60

        & > *
            font-size 12px
            vertical-align top
            line-height 25px

        #maxic
            font-size 18px
            margin-left 10px

    #userISP
        text-decoration underline

    .vpn
        margin-top 20px

    .seed_status
        visibility hidden
        margin-top 20px

    .loading-backdrop
        position absolute
        width 100%
        height 100%
        background-repeat no-repeat
        background-position-x 50%
        background-position-y 50%
        background-size cover
        -webkit-filter blur(20px) brightness(0.7)

    .loading-backdrop-overlay
        width 100%
        height 100%
        position absolute
        opacity 0.65
        background-color #000

    .state-flex
        height 100%
        display flex
        align-items center
        justify-content center

    .state
        color #fff
        font-family $MainFont
        -webkit-font-smoothing antialiased
        text-align center
        width 500px
        height 400px
        z-index 11
        -webkit-backface-visibility hidden

        .title
            font-family $MainFontBold
            font-size 16px
            line-height 20px
            padding-bottom 10px
            text-overflow ellipsis
            word-wrap break-word
            display inline-block

        .external-play
            font-size 14px
            font-style italic
            padding-bottom 6px
            visibility hidden

        .loading-progressbar
            position relative
            margin-bottom 29px
            width 100%
            background-color #bababa
            border-radius 13px
            overflow hidden
            visibility hidden

            & > div
                background-color $ButtonBgActive
                margin-left -100%
                width 100%
                height 5px
                border-radius 13px
                left 0px
                animation-name bounce_bar
                animation-duration 3s
                animation-iteration-count infinite
                animation-timing-function linear

        .playing-progressbar
            position relative
            margin-bottom 4px
            margin-top 10px
            background-color #bababa
            border-radius 13px
            display none

            & > div
                background-color $ButtonBgActive
                height 10px
                border-radius 13px
                left 0px

        .player-controls
            text-align center
            margin-left 30px
            color $Text1
            font-size 14px
            margin-top 20px
            display none
            i
                cursor pointer
                margin-right 20px

        #rbreak1, #rbreak2, #rbreak3
            line-height 13px

        #cancel-button-vpn
            width 140px!important
            position inherit!important
            display inline-block
            margin-left 5px

        #cancel-button-regular
            margin-top 10px
            font-size 10px
            cursor pointer
            display inline-block
            margin-right 5px

        .vpn
            .heading
                font-size 25px
                margin-bottom 10px
            .subheading
                font-size 15px
                margin-bottom 10px
                line-height 20px
            .flex-map
                display flex
                align-items center
                margin-top 20px
                margin-bottom 20px
                .details
                    padding-left 20px
                    .group
                        margin-bottom 15px
                        display flex
                        text-align left
                        .fixed-width
                            width 140px

            .map
                width 300px
                img
                    border 10px solid #bbb
                    width 100%

        .cancel-button
            z-index 2
            cursor pointer
            width 120px
            height 35px
            line-height 1
            margin 20px auto auto auto
            -moz-border-radius 3px
            -webkit-border-radius 3px
            border-radius 3px
            -moz-background-clip padding
            -webkit-background-clip padding-box
            background-clip padding-box
            background-color $ButtonBg
            -webkit-backface-visibility hidden
            transition background-color .5s

            &:hover
                background $ButtonBgHover
                text-decoration none

            &:active
                box-shadow inset 0 1px 4px rgba(0,0,0,0.6)
                background $ButtonBgActive

            .cancel-button-text
                -webkit-backface-visibility hidden
                position relative
                font-family $MainFont, $Font, $AlternateFont
                -webkit-font-smoothing antialiased
                text-align center
                top 12px
                font-size 12px

        .open-button
            float right
            cursor pointer
            transition opacity .2s
            opacity 0.4
            z-index 10

            &:hover
                opacity 1

            &:active
                opacity 1

            .open-button-text
                -webkit-backface-visibility hidden
                position relative
                color #fff
                font-family $MainFont, $Font, $AlternateFont
                -webkit-font-smoothing antialiased
                text-align center
                top 12px
                font-size 12px

        .loading-info
            width auto
            height auto
            margin auto
            padding 14px 14px 10px 14px
            border-radius 4px
            left 0
            right 0
            background rgba(0, 0, 0, .6)
            display inline-block

            &:hover
                > .show-pcontrols,
                > .magnet-icon
                    opacity 0.4
                    transition-delay 0s

                    &:hover
                        opacity 1

                    &:active
                        opacity 1

            .magnet-icon
                float right
                cursor pointer
                transition opacity .3s
                transition-delay .3s
                opacity 0
                margin -1px 1px 0 0

                &:hover
                    opacity 1

            span
                position relative
                color #fff
                font-family $MainFont
                -webkit-font-smoothing antialiased
                font-size 12px
                line-height 14px

                &.loading-info-text
                    float left
                    padding-right 32px
                &.value
                    float right
                    text-align right

            .text_filename
                width 255px
                padding-right 3px
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
                cursor pointer

                &:hover
                    overflow visible

            .show-pcontrols
                float right
                cursor pointer
                transition opacity .3s
                transition-delay .3s
                opacity 0
                margin 2px -1px -4px 0

                &:hover
                    opacity 1

            .buffer_percent
                text-align center
                font-size 14px
                line-height 10px

    .warning-nospace
        display none
        position absolute
        bottom 30px
        width 66%
        left 17%
        text-align center
        color #fff
        .warn
            font-size 13px
        .detail
            opacity .85
            font-size 11px

        &:before
            content '\f071'
            color #FFFF00
            font-family "Font Awesome 6 Free"
            font-weight 900
            font-size 16px
            padding-right 8px

@keyframes bounce_bar
    0%
        margin-left:-100%
    100%
        margin-left:100%
