/* custom */
/* text */
.text-purple {
    color: #6944BC !important;}


/* main-wrapper */
.main-wrapper {
    padding-top: 60px;
    padding-left: 80px;
    padding-right: 80px;}
@media (max-width: 991px) {
.main-wrapper {
    padding-top: 100px;
    padding-left: 30px;
    padding-right: 30px;}
}


/* header */
.header {
    height: 60px;
    box-shadow: 0 2px 16px #a9a9a96e;}
@media (max-width: 991px) {
.header {
    height: 100px;}
}

/* left */
.header .left .a-logo {
    height: auto;
    position: initial;}
.header .left .a-logo img {
    max-height: 110px;
    max-width: 110px;}
@media (max-width: 991px) {
.header .left .a-logo img {
    top: 30px;}
}

/* right */
/* search-form */
.header .right .search-form .form-control {
    border-radius: 25px;}
@media (max-width: 991px) {
.header .right .search-form {
    max-width: 200px;
    position: absolute;
    bottom: 12px;
    right: 0;}
}
@media (max-width: 767px) {
.header .right .search-form {
    max-width: 120px;}
}

/* btn-group-toggle */
@media (max-width: 991px) {
.header .right .btn-group-toggle {
    position: absolute;
    bottom: 12px;
    left: 15px;}
}
@media (max-width: 767px) {
.header .right .btn-group-toggle .btn {
    padding: 2px 10px;
    font-size: 11px;}
}


/* link-item */
.header .right .link-item {
    margin-left: 20px;
    padding-right: 0;
    padding-left: 0;}
.header .right .link-item img {
    height: 18px;}
/*
@media (max-width: 991px) {
.header .right .link-item {
    margin-top: -45px;}
}*/

/* profile */
.header .right .profile {
    margin-left: 20px;
    padding-right: 0;
    padding-left: 0;}
.header .right .profile img {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    object-fit: cover;}
/*
@media (max-width: 991px) {
.header .right .profile {
    margin-top: -45px;}
}*/





/* video-player */

/* iframe, video */  
.video-player iframe,
.video-player video,
.video-player .video-js {
    width: 100%;
    height: 400px;}
@media (max-width: 767px) {
.video-player iframe,
.video-player video,
.video-player .video-js {
    height: 250px;}
}


/* details */
.video-player .details {
    padding: 15px;}
/* breadcrumb */
.video-player .details .breadcrumb .breadcrumb-item a {
    padding-top: 0;
    padding-bottom: 0;
    color: #727476;
    font-size: 14px;}
.video-player .details .breadcrumb .breadcrumb-item:first-of-type a {
    padding-left: 0;}

/* btn-view-notes */
.video-player .details .btn-view-notes {
    padding-left: 20px;
    padding-right: 20px;}

/* title */
.video-player .details .title {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}




/* rating */
.rating {
    margin-top: 10px;}
.rating label {
    margin-right: 15px;
    color: #767676;}
.rating .fa {
    font-size: 14px;
    margin-right: 3px;
    color: #d6d6d6;}
.rating .fa.active {
    color: #edba00;}



/* card-video */
/* item */
.card-video .item {
    padding: 15px;}
/* item-thumb */
.card-video .item-thumb {
    height: 130px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;}
.card-video .item-thumb::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0000008a;}
.card-video .item-thumb .img-primary {
    height: 100%;
    width: 100%;
    object-fit: cover;}
.card-video .item-thumb .btn-play {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;}
.card-video .item-thumb .btn-play span {
    position: absolute;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate(50%,50%);
    -ms-transform: translate(50%,50%);
    transform: translate(50%,50%);}
.card-video .item-thumb .btn-play span img {
    height: 38px;}
.card-video .item-thumb .duration {
    background-color: #0000006b;
    border-radius: 25px;
    color: #fff;
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 11px;
    padding: 5px 15px;}
/* details */
.card-video .details  {
    padding-top: 10px;}
/* title */
.card-video .details .title {
    margin-top: 10px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}
/* breadcrumb */
.card-video .details .breadcrumb .breadcrumb-item a {
    padding-top: 0;
    padding-bottom: 0;
    color: #727476;
    font-size: 13px;}
.card-video .details .breadcrumb .breadcrumb-item:first-of-type a {
    padding-left: 0;}



/* course-tab */
/* nav */
.course-tab .nav-pills {
    flex-wrap: initial;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 2px solid #ddd;}
.course-tab .nav-pills .nav-item {
    display: inline-block;}
.course-tab .nav-pills .nav-link {
    margin-top: 10px;
    position: relative;
    padding: 10px;}
.course-tab .nav-pills .nav-item .nav-link.active::after {
    content: '';
    background-color: #6944BC;
    width: 80%;
    height: 3px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: -2px;
    z-index: 1;}
.course-tab .nav-pills .nav-link img {
    max-width: 100%;}
.course-tab .nav-pills .nav-link.active img:first-of-type,
.course-tab .nav-pills .nav-link:not(.active) img:last-of-type {
    display: none;}
.course-tab .nav-pills .nav-link.active {
    background-color: transparent;}
/* head */
.course-tab .head {
    padding-left: 25px;
    margin-bottom: 10px;}
.course-tab .head .title {
    margin-top: 15px;
    font-size: 19px;}
/* body */
/* item */
.course-tab .body .item {
    padding: 12px 10px 12px 25px;
    border-bottom: 1px solid #ddd;
    position: relative;}
.course-tab .body .item.active {
    background-color: #f3f3f3;}
.course-tab .body .item.active::after {
    content: '';
    background-color: #6944BC;
    height: 100%;
    width: 7px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;}
.course-tab .body .item .col-item {
    margin-right: 20px;
    margin-bottom: 10px;
    display: inline-block;}
.course-tab .body .item .col-item.chapter {
    font-size: 14px;}
.course-tab .body .item .col-item .fa {
    color: #a7a7a7;}
.course-tab .body .item .col-item span {
    font-size: 11px;
    color: #a7a7a7;}
.course-tab .body .item .img-primary {
    max-width: 100%;
    max-height: 80px;}
.course-tab .body .item .title {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}





/* offcanvas-profile */
/* offcanvas-header */
.offcanvas-profile .offcanvas-header {
    display: inline-block;
    padding-bottom: 15px;
    background-color: #1987A4;}
.offcanvas-profile .offcanvas-header .btn-offcanvas-close {
    position: absolute;
    top: 15px;
    right: 10px;}
.offcanvas-profile .offcanvas-header .img-profile {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #fff;
    padding: 2px;}
.offcanvas-profile .offcanvas-header .name {
    color: #fff;
    font-size: 16px;}
.offcanvas-profile .offcanvas-header .id {
    font-size: 14px;
    color: #3bc2e5;}
/* change-class */
.offcanvas-profile .offcanvas-header .change-class {
    margin-top: 15px;}
.offcanvas-profile .offcanvas-header .change-class label {
    color: #fff;
    padding-right: 10px;}
.offcanvas-profile .offcanvas-header .change-class .btn-group-toggle {
    background-color: #d6f7ff;
    padding: 3px;}
.offcanvas-profile .offcanvas-header .change-class .btn-group-toggle .btn {
    background-color: transparent;
    color: #1987A4;
    padding: 3px 15px;
    font-size: 11px;}
.offcanvas-profile .offcanvas-header .change-class .btn-group-toggle .btn.active {
    background-color: #1987A4;
    color: #fff;}
/* offcanvas-body */
.offcanvas-profile .offcanvas-body .offcanvas-inner-body {
    padding: 10px;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table {
    width: 100%;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table td,
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table th {
    font-size: 15px;
    color: #606060;
    padding-top: 15px;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table td {
    white-space: nowrap;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table th {
    text-align: right;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table select {
    min-width: 135px;
    background-color: #1987A4;
    color: #fff;
    padding: 5px;
    border-radius: 25px;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table .progress-report th {
    text-align: left;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table .progress-report .item {
    background-color: #E8E8E8;
    color: #634bae;
    padding: 15px 10px;
    border-radius: 10px;
    text-align: center;
    display: table;
    margin-top: 7px;
    min-width: 90px;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table .progress-report .item label {
    margin-bottom: 0;
    font-size: 9px;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table .progress-report .item .data {
    font-size: 15px;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table .progress-report .item.exam {
    color: #1C77D1;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body table .progress-report .item.watched {
    color: #1987A4;}
/* foot-link */
.offcanvas-profile .offcanvas-body .offcanvas-inner-body .foot-link {
    display: block;
    text-align: left;
    background-color: #E8E8E8;
    color: #838383;
    border-radius: 25px;
    margin-top: 10px;}
.offcanvas-profile .offcanvas-body .offcanvas-inner-body .foot-link .fa {
    float: right;}
/* btn-logout */
.offcanvas-profile .offcanvas-body .offcanvas-inner-body .btn-logout {
    background-color: #b53131;
    color: #f1f0f0;
    border-radius: 25px;
    margin-top: 35px;
    width: 180px;}



/* saved-videos */
.saved-videos .offcanvas-header {
    padding: 15px;}
.saved-videos .offcanvas-title {
    font-size: 18px;}
/* offcanvas-body */
.saved-videos .offcanvas-body {
    overflow-x: hidden;
    padding: 0;}
.saved-videos .offcanvas-body .offcanvas-inner-body {
    padding: 0;}
/* card-video */
.saved-videos .card-video {
    padding: 15px 15px 5px;}
.saved-videos .card-video .item {
    padding: 0;}
/* item-thumb */
.saved-videos .card-video .item-thumb {
    height: 75px;}
.saved-videos .card-video .item-thumb .duration {
    right: 8px;
    bottom: 8px;
    font-size: 8px;
    padding: 3px 10px;}
.saved-videos .card-video .item-thumb .btn-play span img {
    height: 25px;}
/* details */
/* title */
.saved-videos .card-video .details .title {
    margin-top: 5px;}
/* breadcrumb */
.saved-videos .card-video .details .breadcrumb .breadcrumb-item a {
    font-size: 11px;}
/* rating */
.saved-videos .rating label {
    font-size: 10px;
    margin-right: 9px;}
.saved-videos .rating .fa {
    margin-right: 2px;
    font-size: 11px;}




/* notification-offcanvas */
.notification-offcanvas .offcanvas-header {
    padding: 15px;}
.notification-offcanvas .offcanvas-title {
    font-size: 18px;}
/* offcanvas-body */
.notification-offcanvas .offcanvas-body {
    overflow-x: hidden;
    padding: 0;}
.notification-offcanvas .offcanvas-body .offcanvas-inner-body {
    padding: 0;}
/* item */
.notification-offcanvas .offcanvas-body .item {
    color: #2e2e2e;
    padding: 15px;}
.notification-offcanvas .offcanvas-body .item:not(:last-of-type) {
    border-bottom: 1px solid #ddd;}
.notification-offcanvas .offcanvas-body .item .date-time {
    font-size: 11px;
    color: #8e9299;}
.notification-offcanvas .offcanvas-body .item .title {
    font-size: 13px;
    line-height: 17px;
    margin-top: 5px;
    margin-bottom: 10px;}
.notification-offcanvas .offcanvas-body .item .dec {
    font-size: 11.3px;}
.notification-offcanvas .offcanvas-body .item .img-primary {
    margin-top: 10px;
    margin-bottom: 5px;
    max-width: 100%;
    max-height: 130px;}





/* modal-open */
body.modal-open {
  position: fixed;
  padding-right: 0 !important;}
body.modal-open .modal {
  padding-right: 0 !important;}



/* modal-show-file */
.modal-show-file .modal-body {
  padding: 0;}
.modal-show-file .btn-close {
  background-color: #fff;
  padding: 7px;
  position: absolute;
  top: -20px;
  right: -20px;}
.modal-show-file embed {
  display: block;}
@media (max-width: 991px) {
.modal-show-file embed {
  height: 60vh !important;}
}
@media (max-width: 767px) {
.modal-show-file .btn-close {
  right: 0;}
}




/* test */
/* subject-name */
.test .subject-name {
    font-size: 18px;}
/* test-item */
.test .test-item {
    height: 100%;
    box-shadow: 0 10px 15px #d9dee1;
    border-radius: 10px;
    position: relative;}
/* url-primary */
.test .test-item .url-primary {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;}
/* body */
.test .test-item .body {
    padding: 20px 20px 55px 20px;}
.test .test-item .body .title {
    color: #5e6464;}
.test .test-item .body .date-time {
    margin-top: 20px;
    font-size: 11px;}
/* foot */
.test .test-item .foot {
    background-color: #DAECF0;
    border-radius: 0 0 10px 10px;
    margin-top: 20px;
    padding: 10px 20px;}
.test .test-item .foot .item {
    color: #5e6464;
    font-size: 11px;}
@media (min-width: 768px) {
.test .test-item .foot {
    position: absolute;
    bottom: 0;
    width: 100%;}
}



/* test-instructions */
/* title */
.test-instructions .title {
    font-size: 24px;}
/* btn-back */
.test-instructions .btn-back {
    position: absolute;
    right: 15px;
    top: 0;}
/* count-row */
.test-instructions .count-row .item {
    margin: 20px 10px 0 10px;
    padding: 15px;}
.test-instructions .count-row .item label {
    color: #7a8181;}
.test-instructions .count-row .item .data {
    color: #2b2c2c;
    font-weight: bold;
    display: inline-block;}
@media (max-width: 1199px) {
.test-instructions .count-row .item {
    margin-top: 0;
    padding-bottom: 0;}
}
/* instruction */
.test-instructions .instruction {
    background-color: #F2F2F2;
    margin: 25px;
    border-radius: 15px;
    padding: 20px;}
.test-instructions .instruction .sub-title {
    font-size: 18px;}
/* ul */
.test-instructions .instruction ul {
    max-height: 160px;
    overflow-y: auto;
    margin-bottom: 0;
    margin-top: 10px;}
.test-instructions .instruction ul li {
    font-size: 12px;
    margin-bottom: 8px;}





/* test-result */
/* title */
.test-result .title {
    font-size: 24px;}
/* btn-submit */
.test-result .btn-submit {
    border: none;
    color: #fff;
    border-radius: 25px;
    padding: 10px 25px;
    background: linear-gradient(-45deg, #1987A4, #4CABC3);}