html, body {
    font-family: 'Arial', 'Calibri', 'Open Sans', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 11px;
    line-height: 19px;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
}

body > menu {
    padding: 0;
    margin: 0;
    width: 200px;
    background-color: #fafbfc;
    border-right: 1px solid #e2e2e2;
    margin-right: 25px;
}

body > menu > ul {
    padding: 0;
    margin: 0;
}

body > menu > ul > li {
    
}

body > menu > ul > li > a {
    text-decoration: none;
    color: #000;
    padding: 3px 10px;
    display: block;
    border-left: 3px solid #fafbfc;
}

body > menu > ul > li > a.active,
body > menu > ul > li > a:hover {
    border-left: 3px solid #0052cc;
    background-color: #e1edff;
}

body > section {
    flex: 1;
}

.videos-container {

}

.videos-container h2 {

}

.videos {
    display: flex;
    flex-wrap: wrap;
}

.video {
    width: 23%;
    padding: 1%;
}

.video:hover {
    background-color: #E1EDFF;
    cursor: pointer;
}

.video:hover > img {
    opacity: 0.5;
}

.video > img {
    width: 100%;
}

.video > p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
}

.video > span {
    width: 100%;
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    display: block;
}

.system-iframe {
    width: 99%;
    height: 95%;
    border: 0;
}