@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, .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);
    color: #1b2a4e;
}

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

.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;
    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;
}

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

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

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

.img-instructor {
    width: 40px;
    border-radius: 25px;
    display: inline;
    margin-right: 8px;
}

@media screen and (max-width: 768px) {
    .offline-block .found-classmanage.topics-noty-content {
        top: 10%!important;
        transform: unset!important;
    }
}


.table-online-calendar thead th {
    border: none;
}

.table-online-calendar thead th {
    border-right: 1px solid #dee2e6;
    font-size: .9rem;
}

.table-online-calendar thead th:last-child {
    border-right: none;
}

.table-online-calendar td {
    vertical-align: top;
    border-right: 1px solid #dee2e6;
    padding: 0 !important;
}

.table-online-calendar td:last-child {
    border-right: none;
}

.table-online-calendar td .calendar-courses-item {
    height: 32px;
    overflow-y: auto;
}

.table-online-calendar tbody.type-day td .calendar-courses-item {
    height: auto !important;
}

@media (min-width: 768px) {
    .table-online-calendar td .calendar-courses-item {
        height: 100px;
    }
}

.table-online-calendar tr:last-child td:last-child {
    border-radius: 0 0 .5rem 0;
}

.table-online-calendar tbody.type-day tr td:first-child {
    border-left: none;
}

.table-online-calendar tbody.type-day tr td:last-child {
    border-right: none;
}

.calendar-day-item {
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%!important;
    font-size: .9rem;
    color: #212529;
}

.calendar-day-item:hover {
    background-color: #f5f5f5;
    color: #212529;
    text-decoration: none;
}

.calendar-courses-link {
    display: block;
    font-size: .8rem;
    margin-left: .75rem;
    margin-right: .75rem;
}

.table-online-calendar tbody.type-day .calendar-courses-link {
    display: inline-block;
    font-size: 1rem;
}

.time-line-active-circle {
    position: absolute;
    left: -8px;
    top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.h-tr-day { 
    height:64px!important;
}

.graph-calendar-day { 
    position:absolute;
    width:135px;
    z-index:1;
    overflow-y:auto;
}

.scroll-x-day {
    overflow-x: auto;
}

.signature-pad,
.signature-secondary-pad {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 10px;
    width: 100%;
    /*height: 100%;*/
    height: 200px;
    max-width: 700px;
    max-height: 460px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
    padding: 16px;
}

.signature-pad::before,
.signature-secondary-pad::before,
.signature-pad::after,
.signature-secondary-pad::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 40%;
    height: 10px;
    bottom: 10px;
    background: transparent;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before,
.signature-secondary-pad::before {
    left: 20px;
    -webkit-transform: skew(-3deg) rotate(-3deg);
    transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after,
.signature-secondary-pad::after {
    right: 20px;
    -webkit-transform: skew(3deg) rotate(3deg);
    transform: skew(3deg) rotate(3deg);
}

.signature-pad--body,
.signature-secondary-pad--body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #f4f4f4;
}

.signature-pad--body canvas,
.signature-secondary-pad--body canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer,
.signature-secondary-pad--footer {
    color: #C3C3C3;
    text-align: center;
    font-size: 1.2em;
    margin-top: 8px;
}

#signature-preview,
#signature-secondary-preview {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

#signature-preview > img,
#signature-secondary-preview > img {
    max-width: 100%;
}

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

.btn-line-login, .btn-add-line {
    background-color: #1bb71f;
    color: #FFFFFF;
}

.btn-line-login:hover , .btn-add-line:hover {
    color: #fff;
    background-color: #1bb71f;
    border-color: #1bb71f;
}

.btn-ignore-line {
    color: #FFFFFF;
    background-color: #d7dde2;
    border-color: #d7dde2;
}

.btn-ignore-line:hover {
    color: #FFFFFF;
    background-color: #cacfd4;
}

.profile-sidebar-menu {
    overflow-y: auto;
}

.profile-sidebar-menu .profile-sidebar-menu-link {
    color: rgba(0, 0, 0, 0.6);
    padding: .75rem 1rem;
    border-radius: .3rem;
}

.profile-sidebar-menu-link .icon {
    width: 24px;
    text-align: center;
}

.profile-sidebar-menu-link:hover {
    color: rgba(0, 0, 0, 0.8);
    text-decoration: none !important;
    background: #EEEEEE;
}

.profile-sidebar-menu-item.active .profile-sidebar-menu-link {
    color: #01629f;
    background: rgba(1, 98, 159, .05);
}

.sub-header-profile-menu {
    height: 56px;
    overflow-x: auto;
}

.sub-header-profile-menu::-webkit-scrollbar, .hidden-scrollbar::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none; /* Firefox */
}

.sub-header-profile-menu .sub-header-profile-menu-link {
    padding: 0.5rem 0.75rem;
    border-radius: 0.3rem;
    transition: all .2s;
    color: rgba(0, 0, 0, .6);
    background: rgba(0,0,0,.05);
    font-size: .8rem;
}

.sub-header-profile-menu .sub-header-profile-menu-link:hover {
    background: rgba(0,0,0,.1);
    text-decoration: none;
    color: rgba(0, 0, 0, .8);
}

.sub-header-profile-menu-item.active .sub-header-profile-menu-link {
    color: #01629f;
    background: rgba(1, 98, 159, .05);
}

.rating-uncheck {
    border-left: 1px solid red;
    border-right: 1px solid red;
    background-color: #ff9a9a;
}