$borderColour: #e0e0e0;
$hoverColour: #F54997;
$bodyColor: #212121;
$controlBackgroundColour: #000000;
$transparentizeColour: #000000;
$volumeHandleBackgoundColour: #FFFFFF;
.video-js,
.vjs-default-skin {
    .vjs-loading-spinner {
        border-color: $hoverColour;
        &:before,
        &:after {
            border-color: $hoverColour;
        }
    }
    .vjs-big-play-button {
        background-color: transparentize($transparentizeColour, 0.5);
        position: absolute;
        margin: 0;
        border-radius: 0;
        border: none;
        width: 85px;
        height: 85px;
        bottom: 0;
        left: 0;
        top: auto;
        box-shadow: none;
        &:hover,
        &:focus {
            background-color: $hoverColour;
        }
        &:before {
            font-size: 60px;
            height: auto;
            padding: 0;
            margin: 0;
            line-height: 85px;
        }
    }
    &:hover,
    &:focus {
        .vjs-big-play-button,
        .vjs-big-play-button:focus {
            border-color: transparent;
            box-shadow: none;
            background-color: $hoverColour;
        }
    }
    .vjs-progress-control {
        width: auto;
        height: 50px;
        bottom: 50px;
        top: auto;
        background-color: rgba(51, 51, 51, 0.5);
        position: absolute;
        left: 0;
        right: 0;
        .vjs-slider {
            height: 10px;
            margin: 0 10px;
        }
        .vjs-slider-handle {
            top: 40%;
        }
    }
    .vjs-load-progress {
        background: $borderColour;
    }
    .vjs-progress-holder .vjs-play-progress,
    .vjs-progress-holder .vjs-load-progress,
    .vjs-progress-holder .vjs-load-progress div {
        height: 10px;
        line-height: 50px;
    }
    .vjs-volume-level,
    .vjs-play-progress {
        background-color: $hoverColour;
        &:before {
            right: -8px;
            font-size: 0.9em;
            height: 25px;
            width: 10px;
            background: $volumeHandleBackgoundColour;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            content: '';
        }
    }
    &.vjs-has-started .vjs-control-bar {
        height: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .vjs-control-bar {
        background-color: $controlBackgroundColour;
    }
    .vjs-control {
        &:before {
            font-size: 30px;
            height: auto;
            padding: 0;
            margin: 0;
            line-height: 50px;
            width: 50px;
        }
        &:focus:before,
        &:hover:before {
            box-shadow: none;
            text-shadow: none;
        }
    }
    .vjs-live-control {
        width: auto;
        height: 20px;
        bottom: 50px;
        top: -55px;
        position: absolute;
        left: 0;
        right: 0;
    }
    .vjs-current-time,
    .vjs-remaining-time {
        right: 82px;
    }
    .vjs-duration {
        right: 50px;
    }
    .vjs-time-divider {
        right: 75px;
        bottom: 0;
    }
    .vjs-playback-rate {
        .vjs-menu {
            width: 50px;
        }
        .vjs-playback-rate-value {
            line-height: 50px;
        }
    }
    .vjs-current-time,
    .vjs-duration,
    .vjs-time-divider {
        position: absolute;
        height: 50px;
        display: block;
        >div {
            line-height: 50px;
            height: 50px;
        }
    }
    .vjs-remaining-time {
        display: none;
    }
    .vjs-play-control,
    .vjs-fullscreen-control,
    .vjs-subtitles-button,
    .vjs-playback-rate,
    .vjs-captions-button,
    .vjs-chapters-button,
    .vjs-mute-control,
    .vjs-volume-menu-button,
    .vjs-quality-button,
    .vjs-descriptions-button,
    .vjs-audio-button {
        width: 50px;
        height: 50px;
        border-right: 1px solid $borderColour;
        right: auto;
        left: auto;
        display: inline-block;
        &:hover,
        &:focus {
            background-color: $hoverColour;
        }
    }
    .vjs-play-control {
        position: absolute;
        left: 0px;
    }
    .vjs-fullscreen-control {
        border-right-width: 0;
        margin-left: 85px;
    }
    .vjs-volume-menu-button {
        border-right-width: 0;
        position: absolute;
        left: 50px;
        &:hover,
        &:focus {
            border-right-width: 1;
            background-color: transparent;
            &:before {
                background-color: $hoverColour;
            }
        }
        &:before {
            width: 50px;
            left: 0;
            top: 50%;
            -webkit-transform: translate(-0%, -50%);
            -ms-transform: translate(-0%, -50%);
            transform: translate(-0%, -50%);
        }
    }
    .vjs-menu {
        bottom: 20px;
    }
    .vjs-volume-bar,
    .vjs-volume-level {
        height: 10px;
    }
    .vjs-volume-bar {
        width: 90%;
        top: 20%;
        margin: 0;
    }
    .vjs-seek-handle {
        height: auto;
    }
    .vjs-slider-handle,
    .vjs-volume-bar .vjs-volume-handle {
        &:before {
            width: 10px;
            height: 20px;
            background-color: $volumeHandleBackgoundColour;
            position: absolute;
            right: 0;
            top: -5px;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            content: "";
            font-family: none;
        }
    }
    .vjs-live-controls {
        display: none;
    }
    .vjs-menu-button-inline {
        &:hover,
        &:focus,
        &.vjs-slider-active {
            width: 14em;
        }
        .vjs-menu {
            left: 97px;
            .vjs-menu-content {
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                overflow: visible;
                height: auto;
                width: 8em;
            }
        }
    }
    &.vjs-no-flex .vjs-menu-button-inline {
        width: 14em;
    }
    .vjs-time-tooltip,
    .vjs-mouse-display,
    .vjs-play-progress {
        &:after {
            line-height: 10px;
        }
    }
}