@font-face {
    font-family: Kanit;
    src: url('/scss/font/kanit/Kanit-Regular.ttf') format('truetype');
}

body {
    background-color: #fbfbfb;
}

body.preloder, body.portrait {
    overflow: hidden;
}

body, .popover, .tooltip {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans", "Kanit", sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

body.lang-th {

}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: unset;
}

#header-block {
    height: 64px;
    z-index: 1041;
}

#header-block, #sidebar-block, #classroom-header-block, #interactive-block, .profile-navbar-float {
    box-shadow: 0 0 0.875rem 0 rgba(41,48,66,.05);
    background-color: #fff;
}

#header-block .logo {
	display: inline-block;
}

#header-block, .main-block, #footer-block {
	transition: margin-left .5s;
}

.input-search {
    border-radius: 0;
    border: 0;
    padding-left: 0;
}

.btn-no-focus:focus, .btn-no-focus.focus, .input-search:focus, .btn-sort:focus, .btn-dropdown:focus, #chat-input:focus, #modal-discussion-board-comment:focus, .input-no-focus:focus {
    box-shadow: none;
}

.input-search:focus::placeholder, #chat-input:focus::placeholder, #modal-discussion-board-comment:focus::placeholder, #modal-discussion-board input:focus::placeholder, #modal-discussion-board textarea:focus::placeholder, .input-focus-fade:focus::placeholder {
    color: #a7acb1;
}

.header-menu-items {
    margin-right: 1rem;
}

.header-menu-items:last-child {
    margin-right: 0;
}

.header-menu-items .header-menu-link {
    padding: .5rem;
    transition: all .2s ease-in-out;
}

.header-menu-link-circle {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #EEEEEE;
    border-radius: 50%;
    color: rgba(0, 0, 0, .7) !important;
}

.header-menu-link-circle:hover {
    color: rgba(0, 0, 0, .9) !important;
}

#sidebar-block {
    position: fixed;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 240px;
}

#sidebar-block.expand {
    -webkit-animation: sidebar-slide-left-to-right .5s forwards;
    animation: sidebar-slide-left-to-right .5s forwards;
}

#sidebar-block.compress {
    -webkit-animation: sidebar-slide-right-to-left .5s forwards;
    animation: sidebar-slide-right-to-left .5s forwards;
}

.sidebar-header {
    height: 64px;
}

.sidebar-menu-items {
    position: relative;
    margin-bottom: 1rem;
    white-space: nowrap;
}

.sidebar-menu-items:last-child {
    margin-bottom: 0 !important;
}

.sidebar-menu-items .sidebar-menu-link {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-align: center!important;
    align-items: center!important;
    position: relative;
    margin: auto;
    color: #6c757d;
    transition: all .2s ease-in-out;
    height: 32px;
}

.sidebar-menu-items .sidebar-menu-link i:first-child {
    width: 38px;
}

.sidebar-menu-items.theme-red.active .sidebar-menu-link, .sidebar-menu-items.theme-red .sidebar-menu-link:hover {
    color: #dc3545;
}

.sub-menu {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%);
    padding: 1rem 0;
    overflow-y: auto;
}

.sub-menu-items {
    border-bottom: 1px solid #f7f7fc;
}

.sub-menu-items .sub-menu-link {
    display: block;
    color: #6c757d;
    padding: .75rem 1.5rem;
}

.main-block {
    overflow: hidden;
}

.card {
    position: relative;
    box-shadow: 0 0 0.875rem 0 rgba(41,48,66,.05);
    background-color: #fff;
    border-radius: .5rem;
    border: 0;
    -webkit-transition: box-shadow .25s ease,-webkit-transform .25s ease;
    transition: box-shadow .25s ease,-webkit-transform .25s ease;
    transition: box-shadow .25s ease,transform .25s ease;
    transition: box-shadow .25s ease,transform .25s ease,-webkit-transform .25s ease;
}

.a-card {
    display: block;
}

.a-card:hover {
    text-decoration: none;
}

a .card {
    color: #212529;
}

.card-thumbnail {
	position: relative;
}

.card-thumbnail .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 0;
	background-color: #babdbf;
}

.card-content {
    padding: 1rem 1.5rem 1.5rem;
}

.card-content-title {
    line-height: unset !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-content-instructor {
    color: #6c757d;
    font-size: .8rem;
}

body.desktop a:hover .card {
    box-shadow: 0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem -.75rem rgba(22,28,45,.1)!important;
    -webkit-transform: translate3d(0,-3px,0);
    transform: translate3d(0,-3px,0);
}

.rounded-top-xl {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.rounded-left-xl {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.rounded-bottom-xl {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.rounded-xl {
	border-radius: .5rem !important;
}

.max-line-1 {
    line-height: unset !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.max-line-2 {
    line-height: unset !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.max-line-3 {
    line-height: unset !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.max-line-4 {
    line-height: unset !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.card-state-block {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 12px;
    z-index: 1;
}

.card-state-items {
    display: inline-block;
    margin-right: .5rem;
    border-radius: 4px;
    padding: 3px 8px;
    font-weight: 500;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}

.card-state-items:last-child {
    margin-right: 0;
}

.card-state-items img {
    width: auto !important;
}

.card-state-live, .card-state-new {
    color: #fff;
    background-color: #dc3545;
}

.card-state-live {
    -webkit-animation: opacity-05-1 1.5s infinite;
    animation: opacity-05-1 1.5s infinite;
    opacity: 1;
}

.card-state-upcoming {
    color: #fff;
    background-color: #17a2b8;
}

.card-state-success {
    color: #fff;
    background-color: #28a745;
}

@-webkit-keyframes opacity-05-1 {
    0% { opacity: .7; }
    50% { opacity: 1; }
    100% { opacity: .7; }
}

@keyframes opacity-05-1 {
    0% { opacity: .7; }
    50% { opacity: 1; }
    100% { opacity: .7; }
}

.card .price-bf-dc {
    margin-right: .5rem;
    color: #6c757d;
    font-size: .8rem;
    text-decoration: line-through;
}

a.topic-3, a .list-items {
    color: #212529;
}

a.topic-3:hover {
    text-decoration: none;
}

a:hover .list-items {
    background-color: #f8f9fa;
}

.list-items {
    transition: all .2s ease-in-out;
    padding: .75rem 1.5rem;
}

.float-fit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.float-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
}

.overlay {
    background: rgba(0, 0, 0, .5);
}

#form-search {
	position: relative;
}

span.icon-inside-input {
    position: absolute;
    top: 0;
    z-index: 2;
    display: block;
    width: 2.5rem;
    height: 100%;
    text-align: left;
    pointer-events: none;
}

span.icon-inside-input.right {
    right: 0;
}

span.icon-inside-input i {
	position: absolute;
	top: 50%;
	left: 60%;
	transform: translateX(-50%) translateY(-50%);
    color: #6c757d;
}

span.icon-inside-input.right i {
    left: 50% !important;
}

.form-control.append-icon {
    padding-left: 2.5rem !important;
}

.form-control.append-icon-right {
    padding-right: 2.5rem !important;
}

#footer-block a {
    color: rgba(0, 0, 0, .6);
    transition: all .1s ease-in-out;
}

#footer-block a:hover {
    color: rgba(0, 0, 0, .9);
}

.sidebar-menu-link.dropdown-toggle::after {
    display: none;
}

.header-menu-items a:focus {
    outline: 0 !important;
}

#sidebar-block.initial-expand .sidebar-menu-items .dropdown-menu {
    position: fixed !important;
    top: auto !important;
    left: 240px !important;
    bottom: 15px !important;
    margin-left: -15px;
    transform: unset !important;
    transform: unset !important;
}

#sidebar-block.initial-expand.compress .sidebar-menu-items .dropdown-menu {
    left: 80px !important;
}

.sidebar-menu-items .dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem;
}

.sidebar-menu-items .dropdown-menu i {
    width: 26px;
    text-align: center;
}

.shadow-custom {
    box-shadow: 0 0 0.875rem 0 rgba(41,48,66,.05);
}

.w-20 {
    width: 20%;
}

.fixed-block {
    position: fixed;
    overflow-y: auto;
    z-index: 1099;
}

.top-0 {
    top: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

#setting-fixed-block {
    transition: all .3s;
    transform: translateX(-100%);
}

#setting-fixed-block.show {
    transform: translateX(0%);
}

#orders-details-block {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

#orders-details-block.show {
    -webkit-animation: orders-details-slide-right-to-left .5s forwards;
    animation: orders-details-slide-right-to-left 0.5s forwards;
}

#orders-details-block.hide {
    -webkit-animation: orders-details-slide-left-to-right .5s forwards;
    animation: orders-details-slide-left-to-right 0.5s forwards;
}

@-webkit-keyframes orders-details-slide-right-to-left {
    100% { transform: translateX(0%); }
}

@keyframes orders-details-slide-right-to-left {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes orders-details-slide-left-to-right {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

@keyframes orders-details-slide-left-to-right {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

#backdrop-orders-details {
    z-index: 1098;
}

.z-index-9999 {
    z-index: 9999 !important;
}

.btn-facebook {
    color: #fff;
    background-color: #3578E5;
    border-color: #3578E5;
}

.btn-facebook:hover {
    color: #fff;
    background-color: #306cce;
    border-color: #306cce;
}

hr.hr-or-register-login:after {
    background: #fff;
    content: attr(data-content);
    padding: 0 4px;
    position: relative;
    top: -11px;
}

#support-category .nav-item .nav-link {
	padding: .5rem 1rem;
}

#support-category .nav-item.active .nav-link {
	border-radius: .3rem;
	background-color: #f8f9fa;
}

#support-category .nav-item.active .nav-link:hover {
	background-color: #f8f9fa;
}

.text-facebook {
	color: #1877f2 !important;
}

#form-edit-profile .form-group {
    margin-bottom: 1.25rem;
}

#form-edit-profile .col-form-label {
    padding-top: 0;
}

#form-edit-profile.view .mode-view, #form-edit-profile.edit .mode-edit {
    display: block;
}

#form-edit-profile.view .mode-edit, #form-edit-profile.edit .mode-view {
    display: none;
}

#form-edit-profile.edit .col-form-label {
    padding-top: calc(.375rem + 1px);
}

#form-edit-profile.edit .info, #form-edit-profile.edit .edit-hidden {
    display: none;
}

#form-edit-profile .form-control:disabled, #form-edit-profile.edit .form-control[readonly] {
    background: transparent;
}

#form-edit-profile a {
    display: inline-block;
}

textarea {
    resize: none;
}

.bg-success-soft {
    background: rgba(40, 167, 69, .1);
    color: #28a745;
}

.btn-dark-soft {
    background-color: rgba(27,42,78,.1) !important;
    color: #1b2a4e !important;
}

.btn-dark-soft:focus, .btn-dark-soft:hover {
    background-color: rgba(27,42,78,.15) !important;
    color: #1b2a4e !important;
}

.bg-black {
    background-color: #000 !important;
}

.bg-f5 {
    background-color: #F5F5F5 !important;
}

.bg-purple {
    background-color: #7c69ef !important;
}

.nav-pills .nav-item {
    margin-right: .5rem;
}

.nav-pills .nav-item:last-child {
    margin-right: 0;
}

.nav-pills.nav-pills-center .nav-link {
    text-align: center;
}

.nav-pills .nav-link {
    color: #212529;
    border-radius: .5rem;
    border-radius: .5rem;
    transition: all .2s ease-in-out;
    padding: .75rem 1rem;
    margin-bottom: .25rem;
}

.nav-pills .nav-link i {
    width: 20px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link, .nav-pills .nav-link:hover {
    color: #212529;
    background-color: #F5F5F5;
}

.nav-pills .nav-link.disabled {
    opacity: 0.4;
}

.nav-pills .nav-item.theme-green .nav-link:hover {
    background: rgba(40, 167, 69, .1);
    color: #28a745 !important;
}

.nav-pills .nav-item.theme-red .nav-link:hover {
    color: #dc3545 !important;
    background-color: rgba(223,71,89,.1);
}

.nav-pills .nav-item.theme-yellow .nav-link:hover {
    color: #fad776 !important;
    background-color: rgba(250,215,118,.1);
}

.nav-pills .nav-item.theme-black .nav-link:hover {
    color: #1b2a4e !important;
    background-color: rgba(27,42,78,.1);
}

.dropdown-menu {
    border-radius: .5rem;
    min-width: unset;
}

.page-item.disabled .page-link {
    opacity: .5;
}

.data-list .items {
    border-bottom: 1px solid #dee2e6;
}

.data-list .items:last-child {
    border-bottom: none;
}

#courses-continue-studying-block img {
    border-radius: .5rem .5rem 0;
}

.modal-content {
    border: 0;
    border-radius: .5rem;
}

.modal-header {
    border-bottom: 0;
}

.modal-footer {
    border-top: 0;
}

#a-profile-picture {
	position: relative;
}

#a-profile-picture #button-profile-picture {
	position: absolute;
	top: 25%;
	left: 0;
	right: 0;
	bottom: 0;
	color: #fff;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
	padding: 1.5rem 1.5rem 0;
	text-align: center;
	opacity: 0;
	transition: all .2s ease-in-out;
}

#a-profile-picture:hover #button-profile-picture {
	opacity: 1;
}

.overlay-20 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .2);
	z-index: 1;
}

.profile-gallery-items .overlay-20 {
	transition: all .2s ease-in-out;
	opacity: 0;
    border-radius: .5rem !important;
}

.profile-gallery-items:hover {
	cursor: pointer;
}

.profile-gallery-items:hover .overlay-20 {
	opacity: 1;
}

#file-profile-picture-block label::after {
	display: none !important;
}

.custom-file input[type="file"]:hover {
	cursor: pointer;
}

#btn-bars:focus {
	box-shadow: none;
}

.preloader-block {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: #19AAF8;
}

.preloader-block .preloader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 50%;
}

.sk-fold-cube:before {
    background-color: #fff;
}

.carousel-control-next {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    border-radius: 0 .5rem .5rem 0;
}

.carousel-control-prev {
    background: rgb(0,0,0);
    background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    border-radius: .5rem 0 0 .5rem;
}

.owl-stage {
    display: -ms-flexbox!important;
    display: flex!important;
}

.owl-stage-outer {
    overflow: unset !important;
}

.owl-item {
    display: -ms-flexbox!important;
    display: flex!important;
    transition: visibility .3s, opacity .3s;
}

.owl-item.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 0px;
    margin: 0 !important;
}

.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    background-color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    margin: 0 !important;
    transition: all .2s;
}

.owl-theme .owl-nav [class*=owl-]:active {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.owl-theme .owl-nav .disabled {
    opacity: .7;
    color: #6c757d !important;
}

.owl-theme .owl-nav [class*=owl-].disabled:hover {
    color: #6c757d !important;
    background-color: #fff !important;
}

.text-rating-scale {
    color: #eb8a2f;
}

.card-video-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity .2s;
}

.a-card.video-playing .card-video-preview {
    opacity: 1;
}

.a-card.video-playing img {
    display: none;
}

.overflow-hidden {
    overflow: hidden;
}

.ts-m-03 {
    transition: margin .3s;
    margin-left: 0;
}

body .sub-menu {
    opacity: 0;
}

body.desktop .sub-menu-header {
    display: none;
}

body.mobile-tablet .sub-menu {
    top: 0px;
    left: -240px;
    width: 240px;
    z-index: 1060;
}

body.mobile-tablet .sub-menu.show {
    -webkit-animation: mobile-tablet-sub-menu-left-to-right .5s forwards;
    animation: mobile-tablet-sub-menu-left-to-right .5s forwards;
}

body.mobile-tablet .sub-menu.sb-expand.show {
    -webkit-animation: mobile-tablet-sub-menu-left-to-right .5s forwards;
    animation: mobile-tablet-sub-menu-left-to-right .5s forwards;
}

body.mobile-tablet .sub-menu.hide {
    -webkit-animation: mobile-tablet-sub-menu-right-to-left .5s forwards;
    animation: mobile-tablet-sub-menu-right-to-left .5s forwards;
}

body.mobile-tablet .sub-menu.sb-expand.hide {
    -webkit-animation: mobile-tablet-sub-menu-right-to-left .5s forwards;
    animation: mobile-tablet-sub-menu-right-to-left .5s forwards;
}

@-webkit-keyframes mobile-tablet-sub-menu-right-to-left {
    0% { left: 0px; }
    100% { left: -240px; }
}

@keyframes mobile-tablet-sub-menu-right-to-left {
    0% { left: 0; }
    100% { left: -240px; }
}

@-webkit-keyframes mobile-tablet-sub-menu-left-to-right {
    0% { left: -240px; }
    100% { left: 0px; }
}

@keyframes mobile-tablet-sub-menu-left-to-right {
    0% { left: -240px; }
    100% { left: 0px; }
}

.progress-thumbnail {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.popover .jw-controls, .popover .jw-overlays, .popover .jw-controls-backdrop{
    display: none !important;
}

.popover {
    border: 0;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    z-index: 1042;
    border-radius: .5rem;
}

.popover .arrow::before {
    border-right: 0 !important;
    border-left: 0 !important;
}

.popover .popover-header {
    border: 0 !important;
}

.popover .popover-header h3 {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.popover .popover-header {
    padding: 1.5rem 1.5rem .5rem 1.5rem !important;
    background: transparent;
}

.popover .popover-body {
    padding: 0 1.5rem 1.5rem !important;
}

.video-preview-player {
    position: relative;
}

.video-preview-player .spinner-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

#login-page , #register-page {
    overflow: hidden;
}

.left-block-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
}

.left-block-content .left-block-title {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2.5rem;
}

.breadcrumb {
    background: transparent;
}

.breadcrumb .breadcrumb-item a {
    color: #6c757d;
}

#sale-block {
    opacity: 0;
    visibility: hidden;
}

#sale-block.show {
    opacity: 1;
    visibility: visible;
}

.focus-none:focus {
    box-shadow: none !important;
}

.jconfirm .jconfirm-box {
    padding: 2rem !important;
}

.jconfirm div.jconfirm-title-c {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.jconfirm .jconfirm-title {
    line-height: 1.2;
}

.jconfirm .jconfirm-content-pane {
    display: block !important;
    width: auto !important;
}

.jconfirm .jconfirm-content-pane, .jconfirm .jconfirm-content {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.jconfirm .jconfirm-buttons {
    text-align: right !important;
    margin-top: .25rem !important;
    padding-bottom: 0 !important;
}

.jconfirm .jconfirm-buttons button {
    text-transform: unset !important;
    font-weight: normal !important;
    font-size: unset !important;
    margin-bottom: 0 !important;
}

.spinner-border.spinner-border-sm {
    position: relative;
    top: -1px !important;
    margin-right: .25rem;
}

.btn-lg .spinner-border.spinner-border-sm {
    position: relative;
    top: -3px !important;
    margin-right: .5rem;
}

#modal-video .close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 1;
}

.header-menu-items #profile-picture {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #EEEEEE;
    color: rgba(0, 0, 0, .9) !important;
    text-align: center;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: bold;
}

#members-dropdown {
    font-weight: 500;
}

#members-dropdown.dropdown-toggle::after {
    display: none !important;
}

#members-dropdown + .dropdown-menu i {
    width: 24px;
    margin-right: .25rem;
    font-size: 18px;
}

#language-dropdown.dropdown-toggle::after, .dropdown-no-caret.dropdown-toggle::after {
    display: none !important;
}

.c-if-cover-block {
    position: relative;
    border-radius: .5rem;
    overflow: hidden
}

.c-if-cover {
    position: relative;
    margin: -4px;
    height: 400px;
    overflow-y: hidden;
    filter: blur(4px);
    -webkit-filter: blur(4px);
    border-radius: .5rem;

    /* Center and scale the image nicely */
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.c-if-cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0,0,0);
    background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    border-radius: .5rem;
}

.courses-includes-block .courses-includes-items {
    margin-bottom: .25rem;
}

.courses-includes-block .courses-includes-items i {
    width: 24px;
    text-align: center;
    margin-right: .5rem;
}

.nav-tabs .nav-link {
    background: transparent;
    color: #495057;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    transition: all .2s;
}

#sale-block .progress {
    height: 6px;
    border-radius: 2px;
}

.text-white-70 {
    color: rgba(255, 255, 255, .7);
}

#classroom-header-block {
    box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%);
    background-color: #fff;
    z-index: 1041;
    min-height: 64px;
    transition: top .2s;
}

.landscape #classroom-header-block {
    height: 64px !important;
    min-height: unset;
}

#header-block .progress-circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    min-width: 40px;
    margin: 0;
}

#header-block .progress-circle .progress-bar {
    border-width: 2px;
}

#header-block .progress-circle.done .progress-value {
    color: #fff !important;
}

#header-block .progress-circle .progress-value * {
    z-index: 1;
}

.landscape .classroom-main-block {
    width: 60%;
}

.landscape #interactive-block {
    width: 40%;
}

.portrait #discussion-board-block {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    z-index: 1042;
    background-color: #fff;
    box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%);
}

.portrait #discussion-board-block.show {
    -webkit-animation: discussion-board-slide-left-to-right .5s forwards;
    animation: discussion-board-slide-left-to-right 0.5s forwards;
}

.portrait #discussion-board-block.hide {
    -webkit-animation: discussion-board-slide-right-to-left .5s forwards;
    animation: discussion-board-slide-right-to-left 0.5s forwards;
}

@-webkit-keyframes discussion-board-slide-right-to-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@keyframes discussion-board-slide-right-to-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes discussion-board-slide-left-to-right {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

@keyframes discussion-board-slide-left-to-right {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

.portrait #discussion-board-block .discussion-board-content {
    overflow-y: auto;
}

.portrait .topics-title-block-portrait, .landscape .topics-title-block-landscape {
    display: block;
}

.portrait .topics-title-block-landscape, .landscape .topics-title-block-portrait {
    display: none;
}

#chat-content {
    position: relative;
    overflow-y: auto;
}

.message-container {
    margin-bottom: 1rem;
}

#chat-content .message-container:last-child {
    margin-bottom: 0 !important;
}

.message-container.left {
    -ms-flex-pack: start!important;
    justify-content: flex-start!important;
}

.message-container.right {
    -ms-flex-pack: end!important;
    justify-content: flex-end!important;
}

.message-container .message {
    display: inline-block;
    border-radius: .5rem;
    background-color: #EEEEEE;
    margin-right: auto;
}

.message-container.left .name, .message-container.left .message {
    margin-left: .5rem!important;
}

.message-members-not-profile {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: #EEEEEE;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.message-time {
    font-size: .7rem;
    margin-left: .75rem;
    color: #6c757d;
    margin-top: 2px;
}

.message-container.right .message-time {
    text-align: right;
    margin-left: 0 !important;
}

.message-container.right .message-content {
    margin-left: auto;
}

#chat-input + span i {
    top: 10px;
    transform: translateX(-50%) !important;
}

#chat-submit {
    z-index: 10;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* Classroom */
.portrait .classroom-main-block {
    position: relative;
    background-color: #fff;
}

.landscape .classroom-main-block {
    padding-bottom: 3rem;
}

.portrait #interactive-block, .portrait .classroom-main-block {
    width: 100%;
}

#interactive-block {
    overflow: hidden;
}

.portrait #interactive-block {
    transition: all .2s;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.landscape #interactive-block {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    z-index: 1040;
}

#interactive-tab-block {
    position: relative;
}

#interactive-tab-block.scrollable {
    border-bottom: 1px solid #dee2e6;
}

#interactive-tab-scroll {
    position: relative;
    overflow-y: hidden;
}

#interactive-tab-scroll, #chat-content, .portrait #discussion-board-block .discussion-board-content {
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#interactive-tab-block::-webkit-scrollbar, #interactive-tab-scroll::-webkit-scrollbar, #interactive-tab-content .tab-pane::-webkit-scrollbar, #chat-content::-webkit-scrollbar, .portrait #discussion-board-block .discussion-board-content::-webkit-scrollbar {
    width: 0 !important;
    background: transparent;
    display: none;
}

.tab-pane {
    position: relative;
}

.portrait #interactive-tab-scroll {
    height: 38px;
}

.landscape #interactive-tab-scroll {
    height: 54px;
}

#interactive-tab-block.scrollable #interactive-tab-scroll {
    margin-bottom: -1px;
    padding: 0 45px;
}

#interactive-tab-block #scrollable-btn-left, #interactive-tab-block #scrollable-btn-right {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45px;
    height: 54px;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

#interactive-tab-block.scrollable button {
    position: absolute;
    top: 50%;
    left: 50%: ;
    transform: translateY(-50%) translateX(-50%);
    transition: all .2s;
}

#interactive-tab-block.scrollable button:focus {
    box-shadow: none;
}

#interactive-tab-block.scrollable #scrollable-btn-left {
    left: 0;
}

#interactive-tab-block.scrollable #scrollable-btn-right {
    right: 0;
}

#interactive-tab-block.scrollable #scrollable-btn-left, #interactive-tab-block.scrollable #scrollable-btn-right {
    display: block !important;
}

#interactive-tab-block.scrollable button.disabled {
    opacity: .5;
    cursor: default;
}

#interactive-tab {
    width: max-content;
}

#interactive-tab-block.scrollable #interactive-tab {
    border-bottom: 0;
    padding-right: 54px;
}

#interactive-tab .nav-link {
    transition: none !important;
}

.portrait #interactive-tab.nav-tabs .nav-link {
    padding: .75rem 1.5rem 1rem;
}

.landscape #interactive-tab.nav-tabs .nav-link {
    padding: 1rem 1.5rem;
}

#prev-next-block {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
}

.icon-swipe-block {
    padding-top: 12px;
}

.portrait .icon-swipe-block {
    display: block;
}

.landscape .icon-swipe-block {
    display: none;
}

.landscape #btn-hide-discussion-board {
    display: none;
}

.portrait #discussion-board-block {
    margin: 0 !important;
}

.landscape #discussion-board-block {
    position: relative;
    /* box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%); */
    /* background-color: #fff; */
    background-color: #fbfbfb;
    /* border-radius: .5rem; */
}

.w-48px {
    width: 48px;
}

.w-64px {
    width: 64px;
}

#modal-discussion-board .create, #modal-discussion-board .comment {
    display: none;
}

#modal-discussion-board .modal-content.mode-create .create, #modal-discussion-board .modal-content.mode-comment .comment {
    display: block;
}

#modal-discussion-board .mode-create #discussion-action-block {
    -ms-flex-align: center!important;
    align-items: center!important;
}

#modal-discussion-board .mode-comment #discussion-action-block {
    -ms-flex-align: start!important;
    align-items: flex-start!important;
}

#form-discussion {
    width: 100%;
    margin: 0;
}

#modal-discussion-board .mode-comment #form-discussion {
    /* width: 75%; */
    /* margin: 0 auto !important; */
}

.items-link {
    display: block;
}

.headings {
    font-weight: 500;
}

.data-list .items-link {
    border-left: 4px solid transparent;
    transition: background .2s;
}

.data-list .items-link:hover {
    cursor: pointer;
    text-decoration: none;
    background-color: #f5f5f5;
}

.data-list .items-link:hover .headings {
    /* text-decoration: underline; */
}

.file-preview-block, .image-preview-block, .thumbnail-preview-block {
    display: none;
}

.image-preview-block.show, .file-preview-block.show, .thumbnail-preview-block.show {
    display: block;
    margin-top: .5rem;
}

.landscape #btn-reload-discussion-board i {
    /* display: none; */
}

#btn-reload-discussion-board {
    /* margin-right: 1rem; */
}

#discussion-board-btn-group #btn-reload-discussion-board {
    margin-right: 0 !important;
}

.btn-remove-value-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
}

.btn-remove-value-input {
    display: none;
}

.input-search.has-value {
    padding-right: 2.5rem !important;
}

.input-search.has-value + .btn-remove-value-input {
    display: block;
}

.fix-top-1 {
    position: relative;
    top: 1px;
}

.btn-sort, .btn-dropdown {
    background-color: #F5F5F5;
}

.btn-sort:hover, .btn-dropdown:hover {
    background-color: #EEEEEE;
}

.btn-sort::after, .btn-dropdown::after {
    display: none;
}

.image-preview-block, .file-preview-block, .thumbnail-preview-block {
    background-color: #F5F5F5;
}

.image-preview-block, .file-preview-block, .thumbnail-preview-block {
    position: relative;
}

.btn-remove-image-preview {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0;
    border-radius: 50%;
    transition: all .2s;
    font-size: .9rem;
}

.btn-remove-image-preview:hover {
    background: rgba(0, 0, 0, .9);
    color: #fff;
}

.discussion-members-picture {
    min-width: 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    font-size: .8rem;
    background-color: #EEEEEE;
    font-weight: bold;
}

.font-weight-500 {
    font-weight: 500;
}

.discussion-comment {
    padding: 30px 15px;
    transition: all .2s;
}

.discussion-comment-members-name {
    font-weight: 500;
}

.discussion-comment-status a, .discussion-headings-status a {
    color: #6c757d;
}

.discussion-comment-reply-items {
    margin-bottom: .5rem;
    background: #f8f9fa;
    transition: all .2s;
}

.discussion-comment-reply-items:last-child {
    margin-bottom: 0 !important;
}

.discussion-members-picture-block {
    min-width: 48px;
    width: 48px;
}

.shadow-top {
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.15)!important;
}

div.textarea {
    /* height: 37px; */
    word-break: break-word!important;
    word-wrap: break-word!important;
    overflow: auto;
}

.textarea[placeholder]:empty:before {
    content: attr(placeholder);
    color: #6c757d;
}

.textarea[placeholder]:empty:focus:before {
    color: #a7acb1;
}

.mentioned-members {
    white-space: nowrap;
}

#discussion-file-preview {
    width: 56px;
}

#discussion-image-preview {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
}

#discussion-image-preview-block {
    position: relative;
    width: 56px;
    height: 56px;
    overflow: hidden;
}

.portrait .topic-detail, .portrait .topic-detail-button {
    display: none;
}

.landscape .topic-detail {
    display: -webkit-box;
}

.text-underline {
    text-decoration: underline;
}

[data-show-line="3"] {
    line-height: unset !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#members-dropdown-block .dropdown-menu {
    width: 15rem;
}

.dropdown-menu .dropdown-item {
    padding: .5rem 1rem !important;
    border-radius: .3rem !important;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f5f5f5;
}

.portrait .hide-in-portrait, .landscape .hide-in-landscape {
    display: none;
}

.portrait .show-in-portrait, .landscape .show-in-landscape {
    display: block;
}

.btn.text-rating-scale:hover {
    color: #d47c2a !important;
}

.btn-rating-scale {
    color: #eb8a2f;
}

.btn-rating-scale:hover {
    color: #eb8a2f !important;
    text-decoration: none;
}

.btn-rating-scale i {
    font-weight: 300;
}

.btn-rating-scale:hover i, .btn-rating-scale.hover i, .btn-rating-scale.active i {
    font-weight: 900 !important;
}

.documents-block {
    overflow-y: auto;
    background-color: rgb(82, 86, 89);
}

#exam-footer-block {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%);
    z-index: 1;
}

.cs-pointer:hover {
    cursor: pointer;
}

.btn-white {
    background-color: #fff;
    border-color: #fff;
}

#exam-score-history-block.show {
    -webkit-animation: exam-score-history-left-to-right .5s forwards;
    animation: exam-score-history-left-to-right .5s forwards;
}

#exam-score-history-block.hide {
    -webkit-animation: exam-score-history-right-to-left .5s forwards;
    animation: exam-score-history-right-to-left .5s forwards;
}

@-webkit-keyframes exam-score-history-left-to-right {
    0% { left: -500px; }
    100% { left: 0px; }
}

@keyframes exam-score-history-left-to-right {
    0% { left: -500px; }
    100% { left: 0px; }
}

@-webkit-keyframes exam-score-history-right-to-left {
    0% { left: 0px; }
    100% { left: -500px; }
}

@keyframes exam-score-history-right-to-left {
    0% { left: 0; }
    100% { left: -500px; }
}

#exam-score-categories-block.show {
    -webkit-animation: exam-score-categories-left-to-right .5s forwards;
    animation: exam-score-categories-left-to-right .5s forwards;
}

#exam-score-categories-block.hide {
    -webkit-animation: exam-score-categories-right-to-left .5s forwards;
    animation: exam-score-categories-right-to-left .5s forwards;
}

@-webkit-keyframes exam-score-categories-left-to-right {
    0% { left: -500px; }
    100% { left: 0px; }
}

@keyframes exam-score-categories-left-to-right {
    0% { left: -500px; }
    100% { left: 0px; }
}

@-webkit-keyframes exam-score-categories-right-to-left {
    0% { left: 0px; }
    100% { left: -500px; }
}

@keyframes exam-score-categories-right-to-left {
    0% { left: 0; }
    100% { left: -500px; }
}

.op-0 {
    opacity: 0;
}

.icon-facebook:hover {
    color: #1877f2 !important;
}

.icon-line:hover {
    color: #00b901 !important;
}

.icon-twitter:hover {
    color: #1da1f2 !important;
}

.icon-youtube:hover {
    color: #ff0100 !important;
}

.card .card-thumbnail img {
    border-radius: .5rem .5rem 0 0;
}

.card-course {
    width: 100%;
}

.btn-favorite.active i.icon-favorite, .btn-favorite:hover i.icon-favorite {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: #dc3545;
}

.btn-favorite.active:hover i.icon-favorite {
    color: #e35d6a !important;
}

.dropdown-settings .dropdown-item i {
    width: 20px;
}

#backdrop-sidebar {
    z-index: 1041 !important;
}

.loading-block {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fbfbfb;
    z-index: -1;
}

.loading-block.show {
    z-index: 9999;
}

.loading-block .loading-content-block {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
}

#courses-structure .card {
    box-shadow: none;
    border: 1px solid rgba(0,0,0,.125);
}

#courses-structure .card-header {
    background-color: #fff;
    font-weight: bold;
}

#courses-structure .card-header button:focus {
    box-shadow: none;
    text-decoration: none;
}

.accordion>.card:not(:last-of-type) {
    border-bottom: 0 !important;
}

.badge-video-preview {
    font-size: .8rem;
}

.sharethis-inline-share-buttons .st-btn {
    flex: 1 1 auto!important;
}

.sharethis-inline-share-buttons .st-btn, .sharethis-inline-share-buttons .st-btn span {
    display: inline-block !important;
}

form label.error {
    color: #dc3545 !important;
    font-size: .8rem;
    margin-bottom: 0;
}

form .form-control.error {
    border-color: #dc3545!important;
}

.methods-items {
    position: relative;
    transition: background .2s;
    cursor: pointer;
    padding-left: 0;
    margin-bottom: 1rem;
}

.methods-items .form-check-input {
    margin-top: 0 !important;
    margin-left: 1.25rem !important;
    top: 50%;
    transform: translateY(-50%);
}

.methods-items .form-check-label {
    display: block;
    padding-left: 2.75rem;
    padding-right: 1rem;
}

.methods-items:hover * {
    cursor: pointer;
}

.custom-checkbox .custom-control-label-middle::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#register-page .modal {
    z-index: 2050;
}

#register-page .modal-backdrop {
    z-index: 2040;
}

input.error + label::before {
    border-color: #dc3545 !important;
}

.custom-control-label .error {
    display: block;
}


.jconfirm-box-container-center .jconfirm-icon-c, .jconfirm-box-container-center .jconfirm-title, .jconfirm-box-container-center .jconfirm-content, .jconfirm-box-container-center .jconfirm-buttons {
    text-align: center !important;
}

.jconfirm-box-container-center .jconfirm-title {
    display: block !important;
}

.btn-toggle-password, .btn-toggle-password.active:hover {
    color: #6c757d;
}

.btn-toggle-password i:before {
    content: "\f070";
}

.btn-toggle-password.active i:before {
    content: "\f06e";
}

.btn-toggle-password.focus {
    border-color: transparent !important;
}

.morecontent span {
    display: none;
}

.morelink {
    display: block;
    text-decoration: underline;
}

#documents-block canvas {
    display: block;
    max-width: 100%;
    width: 100%;
    margin: auto;
}

#documents-block canvas:hover {
    cursor: pointer;
}

.documents-btn-close {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
}

#documents-block.expand {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
}

#documents-block.expand .documents-btn-close {
    display: block !important;
}

.jw-logo {
    display: none;
    opacity: 0.3;
}

.topics-noty-block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
}

.topics-noty-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
}

.btn-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%!important;
}

.btn-circle.btn-lg {
    width: 48px !important;
    height: 48px !important;
}

.document-items {
    position: relative;
    border-bottom: 1px solid #dee2e6;
    z-index: 1;
}

.document-items:last-child {
    border-bottom: 0!important;
}

.document-items:hover {
    background-color: #fafafa;
    cursor: pointer;
}

.btn-download-courses-documents {
    position: relative;
    z-index: 2;
}

.countdown-block {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, .7);
    min-width: 280px;
}

.l-h-1 {
    line-height: 1;
}

.notification-circle {
    position: absolute;
    margin-left: 6px;
    width: 22px;
    height: 22px;
    line-height: 16px;
    border-radius: 50%!important;
    font-weight: normal;
    font-size: .65rem;
    text-align: center;
}

.chat-noty-unread {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -48px;
    width: 32px;
    height: 32px;
    border-radius: 50%!important;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.2s;
}

.chat-noty-unread.show {
    visibility: visible;
    opacity: 1;
}

.btn.disabled, .btn:disabled {
    cursor: not-allowed;
    background-color: #9E9E9E !important;
    border-color: #9E9E9E !important;
    color: rgba(255,255,255,.5)!important;
}

.btn-link.disabled, .btn-link:disabled {
    background: transparent !important;
    color: unset !important;
    border-color: transparent !important;
}

.exam-nav-questions-items .exam-nav-questions {
    border-radius: 0 !important;
}

.exam-nav-questions-items:first-child .exam-nav-questions {
    border-radius: .25rem 0 0 .25rem !important;
}

.exam-nav-questions-items:last-child .exam-nav-questions {
    border-radius: 0 .25rem .25rem 0 !important;
}

.table-exam-detail td {
    /* padding-bottom: 0; */
}

.table-exam-detail td:first-child {
    /* padding-left: 0; */
}

.btn-exam-circle {
    padding: 0;
    width: 5.5rem;
    height: 5.5rem;
    min-width: 5.5rem;
    min-height: 5.5rem;
    border-radius: 50%;
}

.exam-nav-block .exam-nav-questions {
    transition: background-color .2s;
    background-color: #EEEEEE;
    cursor: pointer;
    border-radius: .25rem;
}

.exam-nav-block .exam-nav-questions.correct {
    background: #28a745 !important;
}

.exam-nav-block .exam-nav-questions.wrong {
    background: #dc3545 !important;
}

.exam-questions-title {
    line-height: unset;
}

.exam-questions-title img {
    max-width: 100% !important;
    height: auto !important;
}

.exam-answer-items {
    transition: background .2s;
    cursor: pointer;
    padding-left: 0;
    margin-bottom: .25rem;
    /* background-color: #F5F5F5; */
}

.exam-answer-items:hover {
    /* background-color: #EEEEEE; */
}

.exam-answer-items:not(.not-active):hover * {
    cursor: pointer;
}

.exam-answer-items.not-active:hover * {
    cursor: default;
}

.exam-answer-items .form-check-input, .exam-answer-items .custom-control-input {
    margin: 1.35rem 0 0 1.25rem;
}

.exam-answer-items .form-check-label, .exam-answer-items .custom-control-label {
    display: block;
    padding-left: 2.75rem;
    padding-right: 1rem;
}

#btn-prev-question:hover {
    color: #212529 !important;
}

.w-120px {
    width: 120px;
}

.bg-exam {
    background: url('/data-file/assets/image/bg-exam.jpg?v=asdasdasdasd');
    background-attachment: fixed;
    background-size: cover;
}

.rounded-left-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.border-dotted-top {
    border-top: 1px dotted #dee2e6 !important;
}

.custom-rating-scale label:hover {
    cursor: pointer;
}

.custom-rating-scale .custom-control-label::before, .custom-rating-scale .custom-control-label::after {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#form-exam .card {
    margin-left: 0;
    margin-right: 0;
}

#form-exam .card .exam-answer-items {
    background-color: #f6f6f6;
}

#form-exam .card .exam-answer-items:not(.not-active):hover {
    background-color: #EEEEEE;
}

#form-exam .card .exam-answer-items.members-answer {
    background-color: #EEEEEE;
    color: #212529;
}

#form-exam .card .exam-answer-items.correct {
    background-color: #28a745 !important;
    color: #fff !important;
    opacity: 1 !important;
}

#form-exam .card .exam-answer-items.correct * {
    color: #fff !important;
}

.bg-square .square-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg-square .square-block li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    bottom: -150px;
}

.bg-square.animate .square-block li {
    animation: bg-square-animate 25s linear infinite;
}

.bg-square .square-block li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.bg-square .square-block li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.bg-square .square-block li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.bg-square .square-block li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.bg-square .square-block li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.bg-square .square-block li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.bg-square .square-block li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.bg-square .square-block li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.bg-square .square-block li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.bg-square .square-block li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes bg-square-animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.rounded-xl-1-5 {
    border-radius: 1.5rem;
}

.jw-logo-top-right {
    height: 64px !important;
    width: 30% !important;
}

#table-exam-history th, #table-exam-history td {
    padding: 1rem;
}

ul.pagination li {
    margin: 0 .25rem;
}

ul.pagination li a {
    border: none !important;
    border-radius: .3rem;
    color: #212529;
    background: transparent !important;
}

ul.pagination li.active a:hover {
    cursor: default;
}

ul.pagination li a:focus {
    box-shadow: none;
}

.page-item.active .page-link {
    z-index: 0;
}

.text-purple {
    color: #7c69ef !important;
}

.badge-dark-soft {
    background-color: rgba(27,42,78,.1);
    color: #6c757d;
}

.badge-dark-soft:hover {
    background-color: rgba(27,42,78,.15);
    color: #6c757d;
}

.profile-picture-text-block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    color: rgba(0, 0, 0, .9) !important;
    text-align: center;
    border-radius: 50%;
}

.profile-picture-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-weight: bold;
}

.category-items .category-link,
.sub-category-items .sub-category-link,
.profile-navbar-items .profile-navbar-link,
.knowledge-base-groups-items .knowledge-base-groups-link {
    display: block;
    padding: .5rem .75rem;
    border-radius: .3rem;
    transition: all .2s;
    color: rgba(0, 0, 0, .6);
}

.category-items .category-link:hover,
.profile-navbar-items .profile-navbar-link:hover,
.knowledge-base-groups-items .knowledge-base-groups-link:hover {
    background-color: #EEEEEE;
    text-decoration: none;
    color: rgba(0, 0, 0, .8);
}

.profile-navbar-float {
    position: fixed;
    top: 64px;
    right: 0;
    left: 0;
    z-index: 1030;
}

.w-max-content {
    width: max-content;
}

#my-course-tab .nav-link {
    color: rgba(0, 0, 0, .6);
}

#my-course-tab .nav-link.active {
    color: rgba(0, 0, 0, .9);
}

.category-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    border-radius: 0 0 .5rem .5rem;
}

.lr-topics-items, .lr-quiz-items {
    border-top: 1px solid #dee2e6;
}

.lr-main-topics .lr-main-topics-progress, .lr-main-quiz .lr-main-quiz-score {
    transition: opacity .2s;
}

.lr-main-topics.collapsed, .lr-main-quiz.collapsed {
    background: transparent;
}

.lr-main-topics:hover, .lr-main-quiz:hover, .lr-main-topics, .lr-main-quiz {
    background-color: #fafafa;
}

.lr-main-topics.collapsed .lr-main-topics-progress, .lr-main-quiz.collapsed .lr-main-quiz-score {
    opacity: 1;
}

.lr-main-topics .lr-main-topics-progress, .lr-main-quiz .lr-main-quiz-score {
    opacity: .4;
}

.lr-topics-items:first-child, .lr-quiz-items:first-child {
    border-top: 0;
}

.lr-main-topics.collapsed .icon-arrow:before, .lr-main-quiz.collapsed .icon-arrow:before {
    content: "\f107";
}

.lr-main-topics .icon-arrow:before, .lr-main-quiz .icon-arrow:before {
    content: "\f106";
}

.lr-sub-topics a, .lr-sub-quiz a {
    color: #212529;
}

.lr-sub-topics-icon {
    width: 18px;
}

.learning-record-main-block .btn-download-cert {
    background: rgba(255,255,255,.2);
}

.learning-record-main-block .btn-download-cert:hover {
    background: rgba(255,255,255,.3) !important;
}

.op-05 {
    opacity: .5;
}

.icon-exam-block {
    width: 3rem;
    height: 3rem;
    text-align: center;
}

.icon-exam-block i {
    font-size: 1.5em;
}

#faqs-list .collapse-header .btn.collapsed {
    color: #212529;
}

#faqs-list .collapse-header .btn.collapsed .icon-arrow:before {
    content: "\f107";
}

#faqs-list .collapse-header .btn.collapsed .icon-arrow:before {
    content: "\f107";
}

#faqs-list .collapse-header .btn .icon-arrow:before {
    content: "\f106";
}

.bg-eee {
    background-color: #EEEEEE;
}

.img-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    transform: translateY(-50%);
    font-weight: bold;
}

.btn-change-payment-method {
    position: relative;
    z-index: 1040;
}


body.mobile-tablet .category-items-block,
body.mobile-tablet .sub-category-items-block,
body.mobile-tablet .knowledge-base-groups-items-block {
    width: max-content;
}

body.desktop .category-items-block,
body.desktop .sub-category-items-block,
body.desktop .knowledge-base-groups-items-block {
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

body.desktop .category-items,
body.desktop .knowledge-base-groups-items {
    margin-bottom: .5rem!important;
}

.discussion-comment-block .discussion-comment {
    border-bottom: 1px solid #dee2e6;
}

.discussion-comment-block .discussion-comment:last-child {
    border-bottom: none !important;
}

.discussion-file-attach:hover {
    background-color: #f5f5f5;
}

.popup-banner-close {
    position: absolute;
    top: 4px;
    right: 10px;
}

.breadcrumb-item.text-white-50+.breadcrumb-item::before {
    color: rgba(255,255,255,.5)!important;
}

.w-h-inherit {
    width: inherit;
    height: inherit;
}

#knowledge-base-file-preview {
    width: 56px;
}

#knowledge-base-image-preview {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
}

#knowledge-base-image-preview-block {
    position: relative;
    width: 56px;
    height: 56px;
    overflow: hidden;
}

#knowledge-base-thumbnail-preview {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
}

#knowledge-base-thumbnail-preview-block {
    position: relative;
    min-width: 56px;
    max-width: 56px;
    height: 56px;
    overflow: hidden;
}

.card-create-knowledge-base .card {
    color: #2e3192;
}

.certificate-checker-wrapper {
    max-width: 760px;
    margin:0 auto;
}

.offline-topics-correct i {
    font-size: 65px;
    color: #28a745;
}

.offline-topics-wrong i {
    font-size: 65px;
    color: #dc3545;
}

.mid-qr-code {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
    color: #212529 !important;
}

.btn-exam-continue {
    min-width: 100px;
}

.card-course .card {
    overflow: hidden;
}

.wave {
    display: block;
    position: absolute;
/*     background-color: rgba(0, 123, 255, 0.2); */
    background-color: rgba(218, 218, 218, 0.7);
    border-radius: 50%;
    transform: scale(0);
}

.wave.animate {
    animation: ripple 600ms linear;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.competency-content .tags {
    height: 31px;
    line-height: 31px;
    font-weight: normal !important;
    font-size: .875rem !important;
}

.competency-content .tags-loading {
    display: none;
}

.competency-content .tags.disabled .tags-loading {
    display: block;
    top: 0 !important;
}

.bootstrap-select>.dropdown-toggle:after {
    display: none !important;
}

.tags-btn-remove {
    color: rgba(255,255,255,.5);
}

.tags-btn-remove:hover, .tags-btn-remove:focus {
    color: rgba(255,255,255,1);
}

.tags.disabled {
    opacity: .7;
}

.append-button-right input {
    padding-right: 2.5rem !important;
}

.append-button-right button {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 2.5rem;
    height: 100%;
    text-align: center;
}

.append-button-right button:hover, .append-button-right button:focus {
    background: transparent;
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

.chart-out-style{
    max-height: 300px;
    width: 100%;
    float: left;
    position: relative;
}

.chart-in-style{
    max-height: 300px;
    width: 100%;
    position: absolute;
    top: 32%;
    left: 0;
    line-height: 19px;
    text-align: center;
    z-index: 99;
}

@media (max-width: 542px) {
    .chart-in-style {
        top: 28%;
    }
}

@media (max-width: 381px) {
    .chart-in-style {
        top: 25%;
    }
}


#notifications-dropdown.dropdown-toggle::after, .dropdown-no-caret.dropdown-toggle::after {
    display: none !important;
}

.border-alert {
    border: solid 1px red;
}

.bg-noti-list-alert {
    background-color: #f3f3f3;
}

.number-alert {
    height: 22px;
    width: 22px;
    background-color: #d63031;
    border-radius: 20px;
    color: white;
    text-align: center;
    position: absolute;
    top: -4px;
    left: 21px;
    border-style: solid;
    font-size: 12px;
}

.noti-num-ellipse {
    width: 30px !important;
}

.noti-head-block {
    width: 320px;
    max-height: 500px;
    overflow-y: auto;
}

.ck-editor__editable_inline {
    min-height: 160px;
    padding: .5rem 1rem !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
}

.ck-editor__editable_inline.ck-focused {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
}

.ck-editor__editable p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

#modal-knowledge-base .ck-toolbar {
    border-radius: .3rem .3rem 0 0;
}

#modal-knowledge-base .ck-editor__editable_inline {
    border-radius: 0 0 .3rem .3rem;
}

.btn-attach {
    background-color: #eee;
    border-color: #eee;
}

.btn-attach:hover, .btn-attach:focus {
    background-color: #d6d6d6;
    border-color: #d6d6d6;
}

.notes-items {
    transition: background-color .2s;
}

.notes-items:hover {
    background-color: #fafafa;
}

.notes-items.focus, .notes-items.focus:hover {
    background: rgba(0, 123, 255, 0.1);
}

.notes-items {
    border-bottom: 1px solid #dee2e6!important;
}

.notes-items:last-child {
    border-bottom: 0 !important;
}

.icon-enter-key {
    transform: translateX(-50%) translateY(-50%) rotate(90deg) !important;
}

.autocomplete-items {
    position: absolute;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    max-height: 80vh;
    overflow-y: auto;
}

.autocomplete-items div {
    padding: 10px;
    background-color: #fff; 
    border-bottom: 1px solid #ebebeb; 
}

.autocomplete-items div:hover {
    cursor: pointer;
    background-color: #e3e3e3;
}

.btn-toggle-password {
    height: 38px !important;
}

/* learning-path */
.main-timeline,
#learning_path_card {
    padding: 20px 0;
    position: relative;
    margin-top: 4rem;
}

.main-timeline::before {
    content: "";
    height: 40px;
    width: 40px;
    background-color: #e7e7e7;
    border-radius: 50%;
    border: 10px solid #303334;
    transform: translatex(-50%);
    position: absolute;
    left: 50%;
    top: 60px;
    z-index: 4;
}

.main-timeline::after {
    content: "";
    height: 40px;
    width: 40px;
    background-color: #e7e7e7;
    border-radius: 50%;
    border: 10px solid #303334;
    transform: translatex(-50%);
    position: absolute;
    left: 50%;
    top: -15px;
    z-index: 4;
}

.main-timeline::after {
    top: auto;
    bottom: 15px;
}

.main-timeline .timeline {
    padding: 35px 0;
    margin-top: -30px;
    position: relative;
    /* z-index: 1; */
    min-height: 300px;
}

.main-timeline .timeline::before,
.main-timeline .timeline::after {
    content: "";
    height: 100%;
    width: 50%;
    border-radius: 160px 0 0 160px;
    border: 15px solid #46b2bc;
    border-right: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

/* .main-timeline .timeline:nth-child(odd)::after {
    box-shadow: #ccc 10px 0 10px -3px inset;
}

.main-timeline .timeline:nth-child(even)::after {
    box-shadow: #ccc -10px 0 10px -3px inset;
} */

.main-timeline .timeline::after {
    height: calc(100% - 30px);
    width: calc(50% - 12px);
    border-color: #65c7d0;
    left: 12px;
    top: 15px;
}

.main-timeline .timeline-content:hover {
    text-decoration: none;
}

.main-timeline .timeline-code {
    color: #65c7d0;
    font-size: 50px;
    font-weight: 600;
    display: inline-block;
    transform: translatey(-50%);
    position: absolute;
    top: 50%;
    left: 10%;
}

.main-timeline .timeline-icon {
    color: #65c7d0;
    font-size: 70px;
    display: inline-block;
    transform: translateY(-50%);
    position: absolute;
    left: 34%;
    top: 50%;
}

.main-timeline .content {
    color: #909090;
    width: 50%;
    padding: 20px;
    display: inline-block;
}

.main-timeline .title {
    color: #65c7d0;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}

.main-timeline .dot-course {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #fff;
    transform: translatex(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.timeline-first-top {
    content: "";
    height: 15px;
    /* width: 120px; */
    width: calc(50% - 280px);
    /* background-color: #0069d9; */
    position: absolute;
    left: 280px;
    top: 0;
    z-index: 2;
}

.timeline-first-bottom {
    content: "";
    height: 15px;
    /* width: 120px; */
    width: calc(50% - 280px);
    /* background-color: #007bff; */
    position: absolute;
    left: 280px;
    top: 15px;
    z-index: 2;
}

.main-timeline .content:nth-child(even) {
    left: 0;
    right: auto;
}

.main-timeline .timeline:nth-child(even)::before {
    left: auto;
    right: 0;
    border-radius: 0 160px 160px 0;
    border: 15px solid red;
    border-left: none;
}

.main-timeline .timeline:nth-child(even)::after {
    left: auto;
    right: 12px;
    border-radius: 0 160px 160px 0;
    border: 15px solid green;
    border-left: none;
}

.main-timeline .timeline:nth-child(even) .content {
    float: left;
}

.main-timeline .timeline:nth-child(even) .timeline-code {
    left: auto;
    right: 10%;
}

.main-timeline .timeline:nth-child(even) .timeline-icon {
    left: auto;
    right: 32%;
}

.main-timeline .timeline:nth-child(5n+1)::before {
    /* border-color: #46b2bc; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(odd) .curve-top {
    content: "";
    height: 100%;
    width: 400px;
    border-radius: 160px 0 0 160px;
    /* border: 15px solid #0069d9; */
    border-width:15px; 
    border-style:solid;
    border-right: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.main-timeline .timeline:nth-child(odd) .curve-bottom {
    content: "";
    height: calc(100% - 30px);
    width: calc(50% - 12px);
    border-radius: 160px 0 0 160px;
    /* border: 15px solid #007bff; */
    border-width:15px; 
    border-style:solid;
    border-right: none;
    position: absolute;
    left: 12px;
    top: 15px;
    z-index: 2;
    /* box-shadow: #ccc 10px 0 10px -3px inset; */
}

.main-timeline .timeline:nth-child(even) .curve-top {
    content: "";
    height: 100%;
    width: 400px;
    border-radius: 0 160px 160px 0;
    /* border: 15px solid #007bff; */
    border-width:15px; 
    border-style:solid;
    border-left: none;
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    z-index: 2;
}

.main-timeline .timeline:nth-child(even) .curve-bottom {
    content: "";
    height: calc(100% - 30px);
    width: calc(50% - 12px);
    border-radius: 0 160px 160px 0;
    /* border: 15px solid #0069d9; */
    border-width:15px; 
    border-style:solid;
    border-left: none;
    position: absolute;
    left: auto;
    right: 12px;
    top: 15px;
    z-index: 2;
    /* box-shadow: #ccc -10px 0 10px -3px inset; */
}

.main-timeline .timeline:nth-child(5n+1)::after {
    /* border-color: #65c7d0; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+1) .timeline-icon {
    color: #65c7d0;
}

.main-timeline .timeline:nth-child(5n+1) .timeline-code {
    color: #65c7d0;
}

.main-timeline .timeline:nth-child(5n+1) .title {
    color: #65c7d0;
    position: absolute;
    left: 10%;
    right: auto;
}

.main-timeline .timeline:nth-child(5n+2)::before {
    /* border-color: #ea3c14; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+2)::after {
    /* border-color: #EF5720; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(5n+2) .timeline-icon {
    color: #EA3C14;
}

.main-timeline .timeline:nth-child(5n+2) .timeline-code {
    color: #EA3C14;
}

.main-timeline .timeline:nth-child(5n+2) .title {
    color: #EA3C14;
    position: absolute;
    left: auto;
    right: 10%;
}

.main-timeline .timeline:nth-child(5n+3)::before {
    /* border-color: #8CC63E; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(5n+3)::after {
    /* border-color: #6CAF29; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+3) .timeline-icon {
    color: #8CC63E;
}

.main-timeline .timeline:nth-child(5n+3) .timeline-code {
    color: #8CC63E;
}

.main-timeline .timeline:nth-child(5n+3) .title {
    color: #8CC63E;
    position: absolute;
    left: 10%;
    right: auto;
}

.main-timeline .timeline:nth-child(5n+4)::before {
    /* border-color: #F99324; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+4)::after {
    /* border-color: #FBB03B; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(5n+4) .timeline-icon {
    color: #F99324;
}

.main-timeline .timeline:nth-child(5n+4) .timeline-code {
    color: #F99324;
}

.main-timeline .timeline:nth-child(5n+4) .title {
    color: #F99324;
    position: absolute;
    left: auto;
    right: 10%;
}

.main-timeline .timeline:nth-child(5n+5)::before {
    /* border-color: #0071BD; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(5n+5)::after {
    /* border-color: #0050A3; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+5) .timeline-icon {
    color: #0071BD;
}

.main-timeline .timeline:nth-child(5n+5) .timeline-code {
    color: #0071BD;
}

.main-timeline .timeline:nth-child(5n+5) .title {
    color: #0071BD;
    position: absolute;
    left: 10%;
    right: auto;
}

.main-timeline .timeline:nth-child(5n+6)::after {
    /* border-color: #65c7d0; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(5n+6)::before {
    /* border-color: #46b2bc; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+7)::before {
    /* border-color: #ea3c14; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(5n+7)::after {
    /* border-color: #EF5720; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+8)::before {
    /* border-color: #8CC63E; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+8)::after {
    /* border-color: #6CAF29; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(5n+9)::before {
    /* border-color: #F99324; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(5n+9)::after {
    /* border-color: #FBB03B; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+10)::before {
    /* border-color: #0071BD; */
    border-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(5n+10)::after {
    /* border-color: #0050A3; */
    border-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) {
    position: absolute;
    left: 330px;
    top: -20px;
    z-index: 3;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top,
.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top {
    content: "";
    height: 15px;
    width: 75px;
    background-color: #d8d8d8;
    position: absolute;
    left: 67px;
    top: 17px;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top-active,
.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top-active {
    content: "";
    height: 15px;
    width: 75px;
    /* background-color: #0069d9; */
    position: absolute;
    left: 67px;
    top: 17px;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom,
.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom {
    content: "";
    height: 15px;
    width: 75px;
    background-color: #e5e5e5;
    position: absolute;
    left: 67px;
    top: 32px;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom-active,
.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom-active {
    content: "";
    height: 15px;
    width: 75px;
    /* background-color: #007bff; */
    position: absolute;
    left: 67px;
    top: 32px;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .description {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: 50%;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) {
    position: absolute;
    left: 160px;
    top: -20px;
    z-index: 3;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .description {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: 50%;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) {
    position: absolute;
    left: 170px;
    top: 250px;
    z-index: 3;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .description {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: 50%;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) {
    position: absolute;
    left: 340px;
    top: 250px;
    z-index: 3;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .description {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: 50%;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) {
    position: absolute;
    right: 240px;
    top: -20px;
    z-index: 3;
    ;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top,
.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top {
    content: "";
    height: 15px;
    width: 55px;
    background-color: #e5e5e5;
    position: absolute;
    left: -60px;
    top: 17px;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top-active,
.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top-active {
    content: "";
    height: 15px;
    width: 55px;
    /* background-color: #007bff; */
    position: absolute;
    left: -57px;
    top: 17px;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom-active,
.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom-active {
    content: "";
    height: 15px;
    width: 55px;
    /* background-color: #0069d9; */
    position: absolute;
    left: -57px;
    top: 32px;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom,
.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom {
    content: "";
    height: 15px;
    width: 55px;
    background-color: #d8d8d8;
    position: absolute;
    left: -60px;
    top: 32px;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .description {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: 50%;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) {
    position: absolute;
    right: 80px;
    top: -20px;
    z-index: 3;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .description {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: 50%;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) {
    position: absolute;
    right: 80px;
    top: 250px;
    z-index: 3;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .description {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: 50%;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) {
    position: absolute;
    right: 240px;
    top: 250px;
    z-index: 3;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .description {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: 50%;
}

.dot-course {
    position: relative;
    display: inline-block;
}

.dot-course .description {
    width: 150px;
    color: #000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 14px;
    margin-left: -60px;
    margin-bottom: 4px;
}

.icon-learning-topic {
    font-size: 20px;
}

.icon-learning-course {
    font-size: 24px;
}

.border-3 {
    border-width: 3px !important;
}

.border-not-learning {
    border-color: #acacac;
}

.text-not-learning {
    color: #acacac;
}

/* timeline */
.timeline-progress-top {
    content: "";
    height: 15px;
    width: 117px;
    background-color: #d8d8d8;
    /* box-shadow: #ccc -8px 8px 10px -3px; */
}

.timeline-progress-bottom {
    content: "";
    height: 15px;
    width: 117px;
    background-color: #e5e5e5;
    /* box-shadow: #ccc -8px 8px 10px -3px; */
}

.timeline-progress-top-active,
.timeline-progress-bottom-active {
    content: "";
    height: 15px;
    width: 117px;
    /* box-shadow: #ccc -8px 8px 10px -3px; */
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-top {
    position: absolute;
    left: -120px;
    top: 17px;
    background-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-top-active {
    position: absolute;
    left: -120px;
    top: 17px;
    /* background-color: #0069d9; */
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .timeline-progress-top {
    position: absolute;
    left: 67px;
    top: 17px;
    /* width: 160px; */
    width: 180px;
    background-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .timeline-progress-top-active {
    position: absolute;
    left: 67px;
    top: 17px;
    width: 180px;
    /* background-color: #007bff; */
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top {
    position: absolute;
    left: 67px;
    top: 17px;
    /* width: 60px; */
    /* width: 30px; */
    background-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top-active {
    position: absolute;
    left: 67px;
    top: 17px;
    /* width: 60px; */
    /* width: 30px; */
    /* background-color: #007bff; */
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-bottom {
    position: absolute;
    left: -120px;
    top: 32px;
    background-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-bottom-active {
    position: absolute;
    left: -120px;
    top: 32px;
    /* background-color: #007bff; */
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .timeline-progress-bottom {
    position: absolute;
    left: 66px;
    top: 32px;
    /* width: 160px; */
    width: 180px;
    background-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .timeline-progress-bottom-active {
    position: absolute;
    left: 66px;
    top: 32px;
    /* width: 160px; */
    width: 180px;
    /* background-color: #0069d9; */
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom {
    position: absolute;
    left: 67px;
    top: 32px;
    /* width: 60px; */
    /* width: 30px; */
    background-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active {
    position: absolute;
    left: 67px;
    top: 32px;
    /* width: 60px; */
    /* width: 30px; */
    /* background-color: #0069d9; */
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-top {
    position: absolute;
    left: 68px;
    top: 17px;
    width: 135px;
    background-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-top-active {
    position: absolute;
    left: 68px;
    top: 17px;
    width: 135px;
    /* background-color: #007bff; */
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .timeline-progress-top {
    position: absolute;
    left: -154px;
    top: 17px;
    width: 150px;
    background-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .timeline-progress-top-active {
    position: absolute;
    left: -154px;
    top: 17px;
    width: 150px;
    /* background-color: #0069d9; */
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-top {
    position: absolute;
    left: -63px;
    top: 7px;
    width: 60px;
    background-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-top-active {
    position: absolute;
    left: -63px;
    top: 17px;
    width: 60px;
    /* background-color: #0069d9; */
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-bottom {
    position: absolute;
    left: 68px;
    top: 32px;
    width: 135px;
    background-color: #d8d8d8;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-bottom-active {
    position: absolute;
    left: 68px;
    top: 32px;
    width: 135px;
    /* background-color: #0069d9; */
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .timeline-progress-bottom {
    position: absolute;
    left: -154px;
    top: 32px;
    width: 150px;
    background-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .timeline-progress-bottom-active {
    position: absolute;
    left: -154px;
    top: 32px;
    width: 150px;
    /* background-color: #007bff; */
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-bottom {
    position: absolute;
    left: -63px;
    top: 32px;
    width: 60px;
    background-color: #e5e5e5;
}

.main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active {
    position: absolute;
    left: -63px;
    top: 32px;
    width: 60px;
    /* background-color: #007bff; */
}

.main-timeline .timeline:last-child .timeline-progress-top-active,
.main-timeline .timeline:last-child .timeline-progress-bottom-active {
    width: 100%;
}

.link-to-courses {
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.bg-gray {
    background-color: #6c757d !important;
}

.border-solid-tranparent {
    border: 1px solid transparent !important;
}

.py-badge-path {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

@media screen and (max-width:1200px) {

    .main-timeline .timeline:nth-child(even) .curve-top,
    .main-timeline .timeline:nth-child(odd) .curve-top {
        width: calc(50% - 12px);
    }

    .main-timeline .timeline:nth-child(odd) .curve-bottom,
    .main-timeline .timeline:nth-child(even) .curve-bottom {
        width: calc(50% - 25px);
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-top-active {
        width: 148px;
        left: -150px;
        top: 17px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active {
        width: 148px;
        left: -150px;
        top: 32px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top-active {
        width: 65px;
        left: -85px;
    }
}

@media screen and (max-width:900px) {

    .dot-course .description {
        width: 130px;
    }

    .timeline-first-top {
        height: 10px;
        width: 30px;
    }

    .timeline-first-bottom {
        height: 10px;
        top: 9px;
        width: 30px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top-active {
        height: 10px;
        top: 17px;
        width: 80px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top-active,

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top-active {
        height: 10px;
        top: 17px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active {
        height: 10px;
        top: 20px;
        width: 80px; 
    }
    
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom {
        height: 10px;
        top: 20px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom-active {
        height: 10px;
        top: 26px;
    }

    .main-timeline .timeline {
        margin-top: -19px;
    }

    .main-timeline .timeline:before {
        border-radius: 50px 0 0 50px;
        border-width: 10px;
    }

    .main-timeline .timeline:after {
        height: calc(100% - 18px);
        width: calc(50% - 9px);
        border-radius: 43px 0 0 43px;
        border-width: 10px;
        top: 9px;
        left: 9px;
    }

    .main-timeline .timeline:nth-child(even):before {
        border-radius: 0 50px 50px 0;
        border-width: 10px;
    }

    .main-timeline .timeline:nth-child(even):after {
        height: calc(100% - 18px);
        width: calc(50% - 9px);
        border-radius: 0 43px 43px 0;
        border-width: 10px;
        top: 9px;
        right: 9px;
    }

    .main-timeline .timeline-icon {
        font-size: 60px;
    }

    .main-timeline .timeline-code {
        font-size: 40px;
    }

    .main-timeline .timeline:nth-child(even) .curve-top {
        width: calc(50% - 12px);
        border-radius: 0 50px 50px 0;
        border-width: 10px;
    }

    .main-timeline .timeline:nth-child(even) .curve-bottom {
        height: calc(100% - 18px);
        width: calc(50% - 21px);
        border-radius: 0 43px 43px 0;
        border-width: 10px;
        top: 9px;
        right: 9px;
    }

    .main-timeline .timeline:nth-child(odd) .curve-top {
        width: calc(50% - 12px);
        border-radius: 50px 0 0 50px;
        border-width: 10px;
    }

    .main-timeline .timeline:nth-child(odd) .curve-bottom {
        height: calc(100% - 18px);
        width: calc(50% - 21px);
        border-radius: 43px 0 0 43px;
        border-width: 10px;
        top: 9px;
        left: 9px;
    }

    /* dot */
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) {
        left: 250px;
        top: -25px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) {
        left: 120px;
        top: -25px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) {
        left: 120px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) {
        left: 250px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) {
        right: 160px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) {
        right: 45px;;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) {
        right: 30px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) {
        right: 160px;
    }

    /* timeline && progress */

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-top-active {
        top: 22px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-top-active {
        top: 17px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .timeline-progress-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .timeline-progress-top-active {
        top: 28px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top-active {
        top: 28px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-top-active {
        top: 27px;
        height: 10px;
        width: 100px;
        left: -103px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active {
        top: 37px;
        height: 10px;
        width: 100px;
        left: -103px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-bottom-active {
        top: 31px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-bottom-active {
        top: 26px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+3) .timeline-progress-bottom-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active {
        top: 37px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .timeline-progress-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .timeline-progress-top-active {
        top: 30px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+3) .timeline-progress-bottom-active {
        top: 37px;
        height: 10px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top-active {
        top: 22px;
        height: 10px;
        width: 52px;
        left: 67px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top-active {
        top: 17px;
        height: 10px;
        width: 40px;
        left: -42px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom {
        top: 26px;
        height: 10px;
        width: 40px;
        left: -42px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom-active {
        top: 31px;
        height: 10px;
        width: 52px;
        left: 67px;
    }
}

@media screen and (max-width:700px) {

    /* dot */
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) {
        left: 100px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) {
        left: 100px;
        top: 260px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1){
        right: 30px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2){
        right: 20px;
        top: 260px;
    }

    /* timeline progress */

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top-active {
        height: 10px;
        top: 27px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom {
        height: 10px;
        top: 17px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom-active {
        height: 10px;
        top: 26px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .timeline-progress-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-bottom-active {
        top: 27px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .timeline-progress-top-active {
        top: 17px;
    }
}

@media screen and (max-width:425px) {

    .timeline-first-top,
    .timeline-first-bottom {
        left: 120px;
        width: 100px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top-active{
        width: 50px;
        left: 67px;
        top: 22px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top-active {
        width: 50px;
        left: 67px;
        top: 27px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top-active {
        width: 50px;
        left: -53px;
        top: 16px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top-active {
        width: 50px;
        left: -53px;
        top: 27px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom-active {
        width: 50px;
        left: 67px;
        top: 31px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom-active {
        width: 50px;
        left: 67px;
        top: 18px;
    }


    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom {
        width: 50px;
        left: -53px;
        top: 18px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom-active {
        top: 26px;
        width: 50px;
        left: -53px;
    }

    .main-timeline::before {
        transform: translatex(100%);
    }
}

@media screen and (max-width:375px) {

    .timeline-first-top,
    .timeline-first-bottom {
        width: 120px;
        left: 80px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) {
        left: 60px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) {
        left: 60px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) {
        right: 10px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) {
        right: 10px;
    }
}

@media screen and (max-width:321px) {

    .timeline-first-top,
    .timeline-first-bottom {
        width: 80px;
        left: 80px;
    }

    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-top-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-top-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-top-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-top-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-top-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+4) .timeline-progress-bottom-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+1) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(odd) .dot-course:nth-child(5n+2) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom-active,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) .progress-line-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom,
    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) .progress-line-bottom-active {
        display: none;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+1) {
        right: -10px;
    }

    .main-timeline .timeline:nth-child(even) .dot-course:nth-child(5n+2) {
        right: -10px;
    }

    .main-timeline .timeline:nth-child(odd) .curve-top {
        width: calc(50% + 12px);
    }

    .main-timeline .timeline:nth-child(odd) .curve-bottom {
        width: calc(50% + 10px);
    }
}

.card-dot-progress {
    width: 3rem;
    height: 3rem;
    background-color: #eaeaea;
    z-index: 1;
    border: 3px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dot-percent {
    font-size: 0.75rem;
}

.progress-card {
    position: relative;
}

.card-line-progress {
    position: absolute;
    top: 52%;
    content: "";
    width: 0.25rem;
    height: 150%;
    background-color: #eaeaea;
}

.card-line-progress-active {
    position: absolute;
    top: 52%;
    content: "";
    width: 0.25rem;
    height: 150%;
}

.card-course-item:last-child .card-line-progress,
.card-course-item:last-child .card-line-progress-active {
    height: 50%;
}

.end-dot {
    height: 50%;
    width: 2rem;
    height: 2rem;
    background-color: #eaeaea;
    z-index: 1;
    border-radius: 50%!important;
    position: absolute;
    top: 100%;
    border: 3px solid #000;
}

.card-course-data:hover {
    transition: transform 0.5s ease;
}

.card-course-data:hover {
    cursor: pointer;
    transform: translateY(-10px);
}

.card-course-data a {
    text-decoration: none;
}

.card-course-detail {
    position: absolute;
    bottom: 120%;
    left: -55%;
    width: 155px;
    display: none;
}

.card-course-detail img {
    max-height: 90px;
    max-width: 170px;
}
/* end learning path */