.video-720px {
    max-width: 720px;
    float: none;
    margin: 0 auto;
}

.video-outer-container {
    width: 100%;
    height: 100%;
    text-align: left;
}

.video-inner-container {
    width: 100%;
    height: 100%;
}

.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    /*margin: 10px;*/
    padding: 5px 10px;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    color: #FFF;
    background-color: rgba(50, 50, 50, 0.3);
    z-index: 999;
}

.video-loading {
    background: url("images/loading_hd.gif") center center no-repeat;
    background-size: 100% 100%;
    /*background: black url("../img/cropper/loading.gif") center center no-repeat;*/
}

.video-ended {
    background: url("../img/defaults/default_video_end_poster.svg") center center no-repeat;
    background-size: 100% 100%;
}

.course-content-row {
    padding-top: 10px;
    padding-bottom: 15px;
}

.media-control {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

@media (max-width: 991px) {
    .media-control {
        font-size: 14px;
        font-family: 'Open Sans', sans-serif;
    }
}

.active-video-in-list {
    border: 1px solid;
    border-color: #CCCCCC;
    background-color: #f6f6f6;
}

.video-js {
    border-radius: 10px;
}

.vjs-tech {
    border-radius: 10px;
}

.vjs-poster {
    border-radius: 10px;
}

/* This appears to be needed because the control bar (or its contents) will otherwise break out of the player. */
.video-js .vjs-control-bar {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}