.video-chapter{
background: #fff;
border: 1px solid #ccc;
}
.video-chapter .chapters:before {
display: block;
content: 'Video chapters';
text-transform: uppercase;
font-size: .8em;
color: #666;
margin: 1rem 1rem 0.5rem;
}
html[lang="de"] .video-chapter .chapters:before {
content: 'Video-Kapitel';
}
html[lang="jp"] .video-chapter .chapters:before {
content: 'ビデオチャプター';
}
html[lang="zh"] .anchor-navigation-contentarea .linklist-anchors:before {
content: '视频章节';
}
.chapters li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.chapters li{
display: block;
cursor: pointer;
position: relative;
color: #039;
padding: 0.5rem 1rem !important;
margin: 0 !important;
transition: all .3s;
}
.chapters li:hover {
background: #0392;
}
.chapters li:focus,
.chapters li:active,
.chapters li.active{
_color: #fff;
background: #0394;
}


@media (max-width: 767.98px){
.video-chapter .video-wrapper{
border-bottom: 1px solid #ccc;
margin-bottom: 1rem;
}
}
@media (min-width: 768px){.video-chapter{
display: flex;
}
.video-chapter .video-wrapper{
border-right: 1px solid #ccc;
flex: 1;
}
.video-chapter .chapters{
flex: 0 1 auto;
overflow-y: auto;
overflow-x: hidden;
padding-left: 1rem;
margin-left: -1rem;
z-index: 1;
}
li.active:before {
content: '';
display: block;
position: absolute;top: 0;left: -27px;z-index: 5;
border: 17px solid transparent;
border-right: 10px solid #0394;
}
}
