html.swal2-shown{font-size:12px}.d-flex{display:flex}.align-items-center{align-items:center}.justify-between{justify-content:space-between}.gap-10{gap:10px}.course-detail{background:#f3f3f3;padding-top:30px}.course-detail .content-width-buttons{position:absolute;right:26px;top:10px;z-index:10}.course-detail .content-width-buttons .close-sidebar i,.course-detail .content-width-buttons .open-sidebar i{background:#fff;border:1px solid #666;border-radius:3px;color:#666;cursor:pointer;display:block;height:28px;line-height:25px;text-align:center;transition:all .3s ease-in-out;width:28px}.course-detail .content-width-buttons .close-sidebar i:hover,.course-detail .content-width-buttons .open-sidebar i:hover{opacity:1}.course-detail .sidebar{background:#fff;border-radius:7px;overflow:hidden}.course-detail .sidebar .filter-unwatched{cursor:pointer;margin-left:.5rem}.course-detail .sidebar .filter-unwatched i.fa-eye{color:#aaa}.course-detail .sidebar .filter-unwatched i.fa-eye-slash{color:#000}.course-detail .sidebar .set-percent{background:#f9f9f9;border-bottom:1px solid #f1f1f1;display:flex;flex-direction:column;justify-content:space-between;padding:15px 20px}.course-detail .sidebar .set-percent .top{align-items:center;color:#ffb400;display:flex;justify-content:space-between;margin-bottom:6px}.course-detail .sidebar .set-percent .top .content-count{color:#aaa;font-size:14px}.course-detail .sidebar .set-percent .top .percent{font-size:18px;font-weight:600}.course-detail .sidebar .set-percent .progress-area{background:rgba(255,180,0,.259);border-radius:50px;display:block;height:10px;overflow:hidden;width:100%}.course-detail .sidebar .set-percent .progress-area .bar{background:#ffb400;height:10px}.course-detail .sidebar .set-percent.green .top{color:#25a751}.course-detail .sidebar .set-percent.green .progress-area{background:rgba(255,180,0,.259)}.course-detail .sidebar .set-percent.green .progress-area .bar{background:#25a751}.course-detail .sidebar .inner{height:345px;overflow-y:auto}.course-detail .sidebar .inner.full-height{height:420px}.course-detail .sidebar .inner .section .toggle{align-items:flex-start;border-bottom:1px solid #f1f1f1;cursor:pointer;display:flex;gap:10px;padding:10px 20px}.course-detail .sidebar .inner .section .toggle i{margin-top:2px;transition:all .3s ease-in-out}.course-detail .sidebar .inner .section .toggle span{font-size:14px;font-weight:600}.course-detail .sidebar .inner .section .toggle.collapsed i{transform:rotate(-90deg)}.course-detail .sidebar .inner .section .items a{border-bottom:1px solid #f1f1f1;color:#000;display:flex;gap:10px;padding:10px 20px;transition:all .3s ease-in-out}.course-detail .sidebar .inner .section .items a i{color:#838383;margin-top:2px}.course-detail .sidebar .inner .section .items a i.icon-content-completed{color:#25a751}.course-detail .sidebar .inner .section .items a i.icon-content-incomplete{color:#ffb400}.course-detail .sidebar .inner .section .items a>span{font-size:14px}.course-detail .sidebar .inner .section .items a>span .info,.course-detail .sidebar .inner .section .items a>span .title{display:block}.course-detail .sidebar .inner .section .items a>span .title{margin-bottom:3px}.course-detail .sidebar .inner .section .items a>span .info{color:#aaa}.course-detail .sidebar .inner .section .items a>span .info i{margin-right:5px}.course-detail .sidebar .inner .section .items a.active{background:#ececec}.course-detail .sidebar .inner .section .items a.active:hover{background:#ebebeb}.course-detail .sidebar .inner .section .items a:hover{background:#f1f1f1}.course-detail .title-area{align-items:flex-start;background:#fff;border-top-left-radius:7px;border-top-right-radius:7px;display:flex;gap:10px;justify-content:space-between;margin-top:30px;padding:50px 50px 0}.course-detail .title-area>div:first-child{max-width:75%;width:100%}.course-detail .title-area>div:last-child{max-width:25%}.course-detail .title-area h1,.course-detail .title-area h2{margin:0;padding:0}.course-detail .title-area h1 i,.course-detail .title-area h2 i{font-size:.9em}.course-detail .title-area h1{font-size:24px;font-weight:600}.course-detail .title-area h2{font-size:20px;margin:0 0 10px}.course-detail .title-area .duration{color:#666;cursor:default;margin-top:5px}.course-detail .title-area .buttons-box .watch-list-toggle button{border:none;border-radius:50px;padding:7px 15px;white-space:nowrap}.course-detail .title-area .buttons-box .watch-list-toggle .dropdown-menu{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:15px;box-shadow:0 5px 10px -2px rgba(0,0,0,.12);margin-top:10px;min-width:200px;overflow:hidden;padding:0}.course-detail .title-area .buttons-box .watch-list-toggle .dropdown-menu li{cursor:pointer;display:block;font-size:15px;padding:10px 15px;position:relative;transition:all .3s ease-in-out}.course-detail .title-area .buttons-box .watch-list-toggle .dropdown-menu li i{margin-right:10px}.course-detail .title-area .buttons-box .watch-list-toggle .dropdown-menu li:first-child{border-bottom:1px solid #f1f1f1}.course-detail .title-area .buttons-box .watch-list-toggle .dropdown-menu li:last-child{margin-bottom:0}.course-detail .title-area .buttons-box .watch-list-toggle .dropdown-menu li:hover{background:#f1f1f1}.course-detail .information{background:#fff;border-bottom-left-radius:7px;border-bottom-right-radius:7px;padding:50px}.course-detail .information ul.nav-tabs{border:none;border-bottom:1px solid #d1d1d1;margin:0}.course-detail .information ul.nav-tabs:after{clear:both;content:"";display:block}.course-detail .information ul.nav-tabs li a{background:none;border:none;color:#999;font-weight:600;padding:10px}.course-detail .information ul.nav-tabs li.active a{border-bottom:3px solid #999;color:#000}.course-detail .information .tab-content .tab-pane{padding:20px 0}.course-detail .information p{color:#333;line-height:24px;margin-bottom:20px}.course-detail .information .course-description p{margin-bottom:5px}.course-detail .information .course-description strong{font-weight:600}.course-detail .information .course-description ul{list-style:disc}.course-detail .information .course-description ul li{color:#333;margin:5px}.course-detail .information .tag-list{margin-top:20px}.course-detail .information .tag-list .tag{background:#f1f1f1;border-radius:7px;color:#666;display:inline-block;font-size:14px;margin:0 0 5px;padding:4px 9px;transition:all .3s ease-in-out}.course-detail .information .tag-list .tag:hover{color:#000}.course-detail .information .instructors img{border:1px solid #f1f1f1;border-radius:15px;margin-bottom:10px}.course-detail .information .instructors h3{font-size:20px;font-weight:600}.course-detail .information .instructors h4{font-size:16px}.course-detail .information .instructors h3,.course-detail .information .instructors h4{color:#000;margin:0}.course-detail #lock-content{align-items:center;background:#000;border-radius:7px;color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:420px}.course-detail #lock-content i{margin-bottom:10px}.course-detail #lock-content p{margin-bottom:20px}.course-detail #lock-content a{border:none;font-size:15px;padding:.9rem 2rem;transition:all .3s ease-in-out}.course-detail #lock-content a:hover{background:#ecb105}#content-part #content-area{background:#fff;border-radius:7px;min-height:420px}@media (max-width:992px){.course-detail .content-width-buttons{display:none}.course-detail #content-area{margin-bottom:30px}.course-detail .title-area{padding:30px 30px 0}.course-detail .title-area .set-percent{gap:10px}.course-detail .information{padding:30px}}@media (max-width:767px){.course-detail .content-width-buttons{display:none}.course-detail #content-area{margin-bottom:30px}.course-detail #content-area .link{margin-bottom:10px}.course-detail .title-area{flex-direction:column;padding:20px 20px 0}.course-detail .title-area div:first-child,.course-detail .title-area div:last-child{max-width:100%}.course-detail .title-area h1{font-size:19px}.course-detail .title-area h2{font-size:17px}.course-detail .title-area .buttons-box{flex-direction:column;margin:20px 0}.course-detail .title-area .set-percent{gap:0;width:100%}.course-detail .information{padding:20px}.course-detail .information .instructors h3{font-size:16px;line-height:19px}.course-detail .information .instructors h4{font-size:15px}#content-part #content-area{min-height:194px}}@media only screen and (max-width:992px) and (min-width:768px){#content-part #content-area{min-height:405px}}@media only screen and (max-width:1200px) and (min-width:992px){#content-part #content-area{min-height:346px}}