@font-face {
    font-family: Charmonman;
    src: url('Charmonman-Bold.ttf');
}

.video-course canvas {
    background-color: #000 !important;
}


.video-group {
    position: relative;
}

    .video-group .video-control-group {
        position: absolute;
        bottom: 8px;
        left: 0;
        width: 100%;
        padding: 0 25px;
        background-color: rgba(0,0,0,0.1);
    }

        .video-group .video-control-group .control-video {
            width: 100%
        }

.video-control-group {
    display: none;
}

.show .video-control-group {
    display: block;
}

.video-control-group.pause-video {
    display: block;
}

.control-video {
    display: flex;
    justify-items: flex-end;
    justify-content: space-between;
    height: 30px
}

    .control-video * {
        align-items: center
    }

    .control-video .control-left {
        display: flex;
    }

    .control-video .control-right {
        display: flex;
    }

    .control-video .active-control {
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-left: 2px;
        background-size: cover
    }

        .control-video .active-control.play {
            background-image: url('/Content/lib/VideoPlayer/icon/pause.svg');
        }

        .control-video .active-control.pause {
            background-image: url('/Content/lib/VideoPlayer/icon/play.svg');
        }

    .control-video .time-clip {
        color: #fff
    }

    .control-video .sound-control-group {
        display: flex
    }

    .control-video .sound-control {
        cursor: pointer;
        width: 20px;
        height: 20px;
        background-size: cover;
        background-image: url('/Content/lib/VideoPlayer/icon/audio.svg');
    }

        .control-video .sound-control.muted {
            background-image: url('/Content/lib/VideoPlayer/icon/audio-mute.svg');
        }

    .control-video .sound-control-range {
        display: none;
        margin-right: 10px;
        width: 80px;
        cursor: pointer
    }

        .control-video .sound-control-range input {
            margin-top: 7px;
        }

        .control-video .sound-control-range.active {
            display: block
        }

        .control-video .sound-control-range input {
            width: 100%
        }

    .control-video .full-screen {
        margin-left: 10px;
        margin-right: 2px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        background-size: cover;
        background-image: url('/Content/lib/VideoPlayer/icon/full-screen.svg');
    }

.video-group .video-control-group .timer, .video-group .video-control-group .timer input, .video-group .video-control-group .timer-range {
    width: 100%
}

.video-group .video-control-group .timer {
    margin-top: 5px;
    position: relative
}

.video-group .video-control-group .timer-range {
    color: #fff
}

.video-group .video-control-group .timer-title {
    display: none;
    position: absolute;
    cursor: default;
    top: -35px;
    left: 0;
    color: #110f0f;
    padding: 3px 5px;
    background-color: #fff
}


    .video-group .video-control-group .timer-title.active {
        display: block;
    }


/*Loading*/
.Loading-video {
    position: absolute;
    display: none !important;
    width: 30px !important;
    height: auto;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
}

    .Loading-video.loading {
        display: block !important;
    }

.video-data video {
    width: 100%
}

.video-course {
    text-align: center;
}