#video-container
    position: absolute
    background: #f0f0f0
    width: 200px
    height: 200px
    background-size: 80px auto
    bottom: 81px
    transition: all 0.5s
    .ExpandButton
        position: absolute
        right: 0
        background: rgba(177,177,177,0.8)
        padding: 5px
        color: #efefef
        cursor: pointer
    &.expanded
        position: absolute
        background: #000000
        width: 100%
        height: calc(100% - 116px)
        .ExpandButton
            background: rgba(255,255,255,0.8)
            color: #2d2d2d
        #video_player
            width: 100% !important
            height: 100% !important
            video
                width: 100%
                height: 100%

#video_player
    width: 199px !important
    border-top: 1px solid #E7E7E7
    background: #F7F7F7
    video
        width: 200px
        height: 200px
    .vjs-control-bar
        display: none
    .vjs-error-display
        display: none

.MarginedLeft10
    margin-left: 10px

#PlayerContainer
    display: flex
    flex-direction: row
    position: fixed
    +box-sizing(border-box)
    height: 80px
    z-index: 1000
    width: 100%
    bottom: 0
    background-image: linear-gradient(to bottom, #fff, #fefefe)
    border-top: 1px solid #f0f0f0
    +box-shadow(rgba(black,.1) 0 0 8px 1px)

    .cover, .info
        display: table-cell
        vertical-align: top

    .cover
        position: relative
        background: #F0F0F0
        width: 80px
        height: 80px
        background-size: cover

        #LoadingOverlay
            display: none
            position: absolute
            background: black
            width: 100%
            height: 100%
            opacity: .5

    .info
        flex: 1
        padding: 16px
        .info-text
            padding-left: 30px
            height: 22px
            overflow: hidden
            .track-info
                display: flex
                flex-direction: row
                width: 100%
                .next
                    margin-right: 6px
                .currentHolder
                    text-overflow: ellipsis
                    white-space: nowrap
                    overflow: hidden
                    height: 35px
                    width: 10px
                    flex: 1
                .action
                    padding-right: 13px
                    &.right
                        padding-right: 0px
                        padding-left: 13px
                        &.first
                            padding-left: 67px

                    i
                        cursor: pointer
                        opacity: .25
                        &:hover
                            opacity: .55
                    .pause
                        display: none
                    &.active
                        i
                            opacity: 0.7

                font-size: 20px
                color: #000

                .artist
                    opacity: .5
                    font-weight: 400
                    font-family: 'Open Sans', Arial
                    text-overflow: ellipsis
                .title
                    font-weight: 700
                    font-family: 'Open Sans', Arial
                    text-overflow: ellipsis

            .video-info
                display: none
                font-size: 12px
                color: #000
                opacity: .3

        .controls
            margin-top: 13px
            display: table
            width: 100%

            .current-time, .progress-bg-container, .duration
                display: table-cell
                vertical-align: middle

            .current-time, .duration
                width: 30px
                font-size: 11px
                color: #000

            .duration
                text-align: right

            .progress-bg-container
                display: table-cell
                vertical-align: middle

                .mouse-time
                    position: absolute
                    font-size: 11px
                    color: #000
                    margin-top: -15px
                    margin-left: 0

                .progress-bg, .progress-current, .loading-progress
                    border-radius: 3px

                .progress-bg
                    background: #E0E0E0
                    cursor: pointer
                    position: relative

                    .loading-progress
                        height: 6px
                        background: linear-gradient(to bottom, #E4E4E4 0%, shade(#EEEEEE, 30%) 100%)
                        width: 0

                    .progress-current
                        height: 6px
                        background: linear-gradient(to bottom, #eb2728 0%, shade(#eb2728, 30%) 100%)
                        width: 0
                        position: absolute

            .volume-icon
                color: #000
                display: table-cell
                vertical-align: middle
                width: 20px
                padding-left: 18px
                +opacity(0.4)
                cursor: pointer

            .volume-bg-container
                display: table-cell
                vertical-align: middle
                width: 80px

                .volume-bg, .volume-current
                    border-radius: 3px

                .volume-bg
                    background: #E0E0E0
                    cursor: pointer

                    .volume-current
                        +opacity(0.75)
                        height: 6px
                        background: linear-gradient(to bottom, #eb2728 0%, shade(#eb2728, 30%) 100%)
                        width: 100%
