.sidebar-offcanvas-menu {
  background-color: #dddee0;
  border-radius: 50%;
}
.navbar-toggler {
  padding: 10px;
}
ul.remark {
  list-style-type: none;
  margin-left: 5px;
  padding-left: 19px;
}

ul.remark li:before {
  content: '※';
  margin-left: -18px;
  margin-right: 5px;
}
@media (min-width: 992px) {
.navbar-expand-xl .navbar-brand .navbar-brand-item {
  
}
.sub-menu a.list-group-item{ border:none;}
.video-player{
  max-width: 800px;
}
}
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-brand .navbar-brand-item {
    
  }
  .sub-menu a.list-group-item{ border:none;}
  .video-player{
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
.video-player{
max-width: 1400px;
}
}
/* Side Menu */
.bg-side-menu{ background-color: #333030; }
.bg-side-menu .list-group  .list-group-item {
color: #fff;
margin-bottom: 10px;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: 0.325rem;
}
.bg-side-menu .list-group .list-group-item:hover {
color: #fff;
background-color: #3f4040; 
}
.bg-side-menu .list-group .list-group-item.active {
color: #3f4040;
background-color: #f4f5f9; 
}
.bg-side-menu .collapse-list .list-group-item[aria-expanded=true]{
color:#3f4040;
}
.bg-side-menu .collapse-list .list-group-item[aria-expanded=true]:hover{
color:#f4f5f9;
}
.bg-side-menu .collapse-list .nav .nav-link {
  color: #f4f5f9;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.sub-menu a.list-group-item{ font-size: smaller;}
.mv-thumbnail{ max-width: 100px;}
.mv-thumbnail a{
position: relative;
display: block;
}
.seek-bar{
height: 2px;
position: absolute;
left: 0;
bottom: 0px;
border:solid 1px transparent;background: red;
}
.video-player{margin: 0 auto;}
.course-item-video{background: #000; padding: 0; margin-bottom: 3rem;}

.bg-account-menu{
background-color: #2b2b2b !important;
}
.bg-account-menu .list-group-item {
color: #fff;
margin-bottom: 10px;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: 0.325rem;
}
.bg-account-menu .list-group-item:not(.bg-danger-soft-hover):hover, .bg-account-menu .list-group-item:not(.bg-danger-soft-hover).active {
color: #24292d !important;
background-color: #fff !important;
}
.btn-playlists{
background-color: #2b2b2b;
color:#ffffff;
}
.navbar-brand {
font-size:1.2em;
font-weight: bold;
}
/* Btn */
.btn-purchase{
  background-color: #0cbc87;
  color:#ffffff;
}
.btn-purchase:hover{
  background-color: #0cbc87;
  color:#ffffff;
  font-weight: bold;
}