body {
    /*background: url(../img/video_bg.jpg) 50% 0 no-repeat #15181c;*/
    /*color: #fff;*/
}

header, footer {
    display: none;
}


a:link {
    text-decoration: none;
}

:root {
    /*--plyr-color-main: #932ab6;*/
}

nav {
    border: black;
}

#lesson-header {
    border-bottom: 1px solid #DDDDDD;
}

#lesson-footer {
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

.dropdown-toggle {
    border: 1px solid rgba(255,255,255,.2); background-color: #F0F4FA
}

#lesson-body p {
    font-size: larger;
    line-height: 200%;
}

#lesson-name {
    color: black;
}

.display-none {
    display: none !important;
}

.modal .modal-dialog-aside{
    width: 450px;
    max-width:80%; height: 100%; margin:0;
    transform: translate(0); transition: transform .2s;
}

.modal .modal-dialog-aside .modal-content{  height: inherit; border:0; border-radius: 0;}
.modal .modal-dialog-aside .modal-content .modal-body{ overflow-y: auto }
.modal.fixed-left .modal-dialog-aside{ margin-left:auto;  transform: translateX(100%); }
.modal.fixed-right .modal-dialog-aside{ margin-right:auto; transform: translateX(-100%); }

.modal.show .modal-dialog-aside{ transform: translateX(0);  }




.video-container {
    position: relative;
    min-height: 200px;
}

.video-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.video-loader p {
    margin-top: 1rem;
    color: #333;
}