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

a {
    color: #77BD1E;
}

a:hover, a:focus {
    color: #6baa1b;
}

input:focus {
    box-shadow: 0 0 0 0.2rem rgb(119 189 30 / 25%);
    border-color: #77BD1E !important;
}

#header-block {
    height: 78px;
    z-index: 1040;
}

#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-right-xl {
    border-top-right-radius: .5rem;
    border-bottom-right-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: 0px 2px 12px rgba(30, 58, 138, 0.08);
}

.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: 50%;
	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 {
    display: none;
}

.image-preview-block.show, .file-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;
}

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

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

.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 {
    background-color: #F5F5F5;
}

.image-preview-block, .file-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: 14rem;
}

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

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

.exam-answer-items.active .form-check-label, .exam-answer-items .custom-control-label {
    border-color: #77BD1E !important;
}

#btn-prev-question:hover {
    color: #77BD1E !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: #fff;
}

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

.btn-outline-primary {
    color: #5F9E0E;
    background: #E9FFCE;
    border: 2px solid #77BD1E;
    font-weight: bold;
}

.icon-inside-input {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 48px;
    text-align: center;
}

.form-control.has-icon {
    padding-right: 48px !important;
}

.icon-toggle-show-password.hide:before {
    content: "\f070";
}

.icon-toggle-show-password.show:before {
    content: "\f06e";
}

.border-top-ct {
    border-top: 1px solid #F4F4F5 !important;
}

.icon-my-account-block {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border: 2px solid #E4E4E7;
    border-radius: 10px;
    text-align: center;
}

.form-control {
    height: 42px;
    border-radius: 5px;
}

.form-control:disabled, .form-control[readonly] {
    background: #FAFAFA !important;
    color: #71717A !important;
    border: 1px solid #F4F4F5;
}

.btn {
    border-radius: 10px;
}

.btn-default {
    background: #FFFFFF;
    border: 1px solid #E4E4E7;
    color: #71717A;
}

.mc-title-icon-block {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    background: linear-gradient(225deg, #0CBCA7 0%, #009A88 100%);
    color: #fff;
    text-align: center;
}

.btn-outline-orange {
    background: #F8ECE5;
    color: #FD6C04;
    border: 2px solid #FD6C04;
    font-weight: 500;
}

.btn-outline-orange:hover, .btn-outline-orange:focus {
    background-color: #FD6C04;
    color: #fff;
}

.progress {
    background-color: #EDF7E2;
}

.card-progress-block .progress {
    height: 4px;
}

.tags {
    font-weight: 500;
    background: #0CBCA7;
    padding: 8px 16px;
    margin-bottom: .5rem;
    transition: all .2s;
}

.progress-circle-mt-mc {
    width: 110px !important;
    height: 110px !important;
    line-height: 110px !important;
}

.progress-circle-mt-mc:after {
    border-width: 14px !important;
}

.progress-circle-mt-mc .progress-bar {
    border-width: 14px !important;
}

.progress-circle-mt-mc .progress-value {
    background: #EDF7E2 !important;
}

.my-team .bootstrap-select .filter-option-inner-inner {
    color: #FD6C04;
}

.my-courses .bootstrap-select .filter-option-inner-inner {
    color: #1b2a4e;
}

.my-team .bootstrap-select button:hover .filter-option-inner-inner {
    color: #fff;
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: 0 !important;
}

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

.bootstrap-select .dropdown-item {
    border-radius: 0 !important;
}

.bootstrap-select .dropdown-item.active {
    background-color: #77BD1E !important;
}

.competency-tags-content .tags {
    height: 33px;
    font-size: .875rem !important;
    line-height: 33px !important;
    padding: 0 16px;
}

.competency-tags-content .tags.disabled {
    opacity: .7;
}

.competency-tags-content .tags.disabled .tags-loading {
    display: inline-block;
}

.competency-tags-content .tags .tags-loading, .competency-tags-content .tags.disabled .tags-title, .competency-tags-content .tags.disabled .tags-btn-remove {
    display: none;
}

.page-my-team .tags, .page-course-board .tags {
    background-color: #77BD1E;
}

.table-team-ranking th, .table-custom th {
    border-top: none !important;
    border-bottom: none !important;
    color: #9D9D9D;
    font-weight: 400;
    padding: 0 .75rem 1.5rem;
}

.table-team-ranking tbody tr:first-child td, .table-custom tbody tr:first-child td {
    border-top: none !important;
}

.table-team-ranking .progress, .table-custom .progress {
    height: 5px;
}

.table-team-ranking tr td:first-child, .table-custom tr td:first-child {
    padding-left: 1.5rem;
}

.table-team-ranking tr td:last-child, .table-custom tr td:last-child {
    padding-right: 1.5rem;
}

.picture-text-block, .picture-image-block {
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
}

.btn-ranking-detail {
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.btn-ranking-detail.btn-lg {
    width: 40px !important;
    height: 40px !important;
}

.btn-ranking-detail:hover, .btn-ranking-detail:focus {
    background-color: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
}

.btn-export {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-align: center!important;
    align-items: center!important;
    background-color: #EBFFFD !important;
    border: 1px solid #0CBCA7 !important;
    color: #027E6F !important;
    font-weight: 500;
    height: 60px;
}

.btn-export:hover, .btn-export:focus {
    background-color: #d4e6e4 !important;
    /* color: #027E6F !important; */
}

#modal-team-ranking-detail .picture-text-block, #modal-member-board-detail .picture-text-block, #modal-course-board-detail .picture-text-block, .profile-picture-block.picture-text-block, #modal-team-ranking-detail .picture-image-block, .picture-image-block-lg {
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 1.75rem;
}

#modal-team-ranking-detail .picture-image-block, .picture-image-block-lg {
    background-size: cover !important;
}

#modal-team-ranking-detail .progress, #modal-member-board-detail .progress, #modal-course-board-detail .progress {
    height: 4px;
}

#course-board-summary-block .progress {
    height: 8px;
}

#footer-block {
    background-color: #333;
}

#footer-block a {
    font-weight: 200;
}

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

.bg-white-07 {
    background: rgba(255,255,255,0.7);
}

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

.btn-success-soft.active, .btn-success-soft:focus, .btn-success-soft:hover {
    background: rgba(40, 167, 69, .15) !important;
    color: #28a745 !important;
}

.btn-tools {
    border-radius: .25rem !important;
}

.btn-tools.active, .btn-tools:focus, .btn-tools:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
}

/* My Class */
#mcls-sidebar {
    z-index: 1;
}

.mcls-sidebar-content {
    overflow-y: auto;
    z-index: 1;
}
.mcls-content-collapse-button {
    transition: all .2s;
}

.mcls-content-collapse-button:hover {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.mcls-content-collapse-button.collapsed {
    border-radius: .5rem !important;
}

.card-collapse-video {
    z-index: 1;
}

.card-collapse-video, .card-collapse-video .mcls-content-collapse-button.collapsed {
    border-radius: .5rem .5rem 0 0 !important;
}

.mcls-content-collapse-button:not(.collapsed) {
    border-radius: .5rem .5rem 0 0;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.mcls-content-collapse-button:hover .mcls-content-collapse-button-title, .mcls-content-collapse-button:not(.collapsed) .mcls-content-collapse-button-title {
    color: #77BD1E !important;
}

.mcls-content-collapse-button.collapsed .icon-arrow:before {
    content: "\f107";
}

.mcls-content-collapse-button .icon-arrow:before {
    content: "\f106";
}

.mcls-sidebar-progress .progress {
    height: 10px;
}

.mcls-sidebar-structure-collapse-button:not(.collapsed) {
    background-color: rgba(0,0,0,.03);
    color: #77BD1E;
    border-bottom: 1px solid #dee2e6!important;
}

.mcls-sidebar-structure-collapse-button:hover {
    background-color: rgba(0,0,0,.03);
}

.mcls-sidebar-structure-collapse-button.collapsed:not(.done) .icon-play {
    font-weight: 400 !important;
}

.mcls-sidebar-structure-collapse-button:not(.done) .icon-play {
    font-weight: 900 !important;
}

.mcls-sidebar-structure-collapse-button .icon-play:before {
    content: "\f04b";
}

.mcls-sidebar-structure-collapse-button .icon-circle:before {
    content: "\f111";
}

.mcls-sidebar-structure-collapse-button.done .icon-play, .mcls-sidebar-structure-collapse-button.done .icon-circle {
    font-weight: 900 !important;
    color: #77BD1E;
}

.mcls-sidebar-structure-collapse-button.done .icon-play:before, .mcls-sidebar-structure-collapse-button.done .icon-circle:before {
    content: "\f058";
}

.mcls-sidebar-structure-collapse-button.collapsed .icon-arrow:before {
    content: "\f107";
}

.mcls-sidebar-structure-collapse-button .icon-arrow:before {
    content: "\f106";
}

.mcls-sidebar-structure-sub-link {
    display: block;
    color: rgba(0, 0, 0, .7);
    text-decoration: none !important;
}

.mcls-sidebar-structure-sub-item.active .mcls-sidebar-structure-sub-link, .mcls-sidebar-structure-sub-link:hover {
    color: #77BD1E !important;
}

.mcls-sidebar-structure-sub-link i {
    font-weight: 400;
    width: 18px;
}

.mcls-sidebar-structure-sub-item.active .mcls-sidebar-structure-sub-link i {
    font-weight: 900 !important;
}

.btn-teal {
    background-color: #0CBCA7;
    color: #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.btn-teal:hover, .btn-teal:focus {
    background-color: #0ba996;
    color: #fff ;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.quiz-detail-absolute {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3rem;
    background: rgba(0, 0, 0, .7);
}

.exam-answer-items p {
    margin-bottom: 0 !important;
}

.exam-answer-items:hover, .exam-answer-items:focus {
    background-color: #f8f9fa !important;
}

.exam-answer-items.active:hover {
    background: rgba(119, 189, 30, 0.1) !important;
}

.exam-result-progress-block {
    position: absolute;
    left: 50%;
    bottom: -64px;
    height: 128px;
    width: 128px;
    transform: translateX(-50%);
    border-radius: 50%;
    background-color: #f8f9fa;
    padding-top: 8px;
}

.exam-result-progress-block.passed {
    background-color: #77BD1E;
}

.exam-result-progress-block.not-pass {
    background-color: #FD6C04;
}

.exam-result-progress-content {
    margin: auto;
    height: 112px;
    width: 112px;
    line-height: 104px;
    border-radius: 50%;
    border: 6px solid #fff;
}

.exam-result-progress-block.not-pass .exam-result-progress-content {
    background-color: #F8ECE5;
    color: #FD6C04;
}

.exam-result-progress-block.passed .exam-result-progress-content {
    background-color: #EDF7E2;
    color: #77BD1E;
}

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

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

.input-group .form-control {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.discuss-detail-comments-item {
    margin-bottom: 1.5rem;
}

.discuss-detail-comments-item:last-child {
    margin-bottom: 0 !important;
}

.mcls-sidebar-structure-collapse-button.disabled {
    opacity: .5;
}

.mcls-sidebar-structure-collapse-button.disabled:hover {
    cursor: not-allowed;
}

.btn-prev-next-topic {
    background: transparent;
}

.btn-prev-next-topic:hover, .btn-prev-next-topic:focus {
    background-color: #77BD1E;
    color: #fff;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

#card-prev-next-button:first-child {
    border-radius: 0.5rem 0.5rem;
}

#card-prev-next-button:not(:first-child) {
    border-radius: 0 0 0.5rem 0.5rem;
}

#card-prev-next-button:not(:first-child) .btn-prev-next-topic:first-child {
    border-radius: 0 0 0 0.5rem !important;
}

#card-prev-next-button:not(:first-child) .btn-prev-next-topic:last-child {
    border-radius: 0 0 0.5rem 0 !important;
}

.btn-prev-next-topic.disabled {
    background: transparent !important;
    opacity: 0.5;
    border: none !important;
    color: #212529 !important;
}

#mcls-content .card:last-child {
    margin-bottom: 0 !important;
}

.liked i {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

/* My Courses */
#card-competencies .card-body {
    position: relative;
}

#card-competencies .card-body.compress {
    overflow: hidden;
}

#card-competencies .card-body.expand {
    overflow: unset;
    max-height: unset !important;
}

.competencies-expand-compress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    border-radius: 0 0 .5rem .5rem;
    background-color: #fff;
    margin-top: 1rem;
}

.competencies-expand-compress button {
    border-radius: 0 0 .5rem .5rem;
}

.competencies-expand-compress button:focus {
    box-shadow: none !important;
}

#card-competencies-body {
    border-radius: 0 0 .5rem .5rem;
}

.competency-tags-content .tags {
    margin-top: .5rem;
    margin-bottom: 0 !important;
}

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

.btn-orange:hover, .btn-orange:focus {
    background-color: rgb(228, 97, 4);
    border-color: rgb(202, 86, 3);
    color: #fff;
}

.btn-orange:not(:disabled):not(.disabled).active, .btn-orange:not(:disabled):not(.disabled):active, .show>.btn-orange.dropdown-toggle {
    background-color: rgb(202, 86, 3);
    border-color: rgb(177, 76, 3);
    color: #fff;
}

#card-competencies .card-body.expand .competencies-expand-compress {
    position: relative !important;
}

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

.rate-star, .instructors-item .fa-star, #modal-feedback-student .fa-star, .text-back-01 {
    color: rgba(0, 0, 0, .1);
}

.rate-star:hover {
    cursor: pointer;
}

.rate-star:hover, .rate-star.focus {
    color: #ffd451 !important;
}

.rate-star.active {
    color: #ffc107 !important;
}

.collapse .stream-noty-block, .collapsing .stream-noty-block {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.mcls-content-collapse-button.collapsed .mcls-content-collapse-button-detail .stream-noty-block:not(.live) {
    display: inline-block;
}

.mcls-content-collapse-button .mcls-content-collapse-button-detail .stream-noty-block:not(.live) {
    display: none;
}

.bg-blue {
    background-color: #1167EA !important;
    color: #fff !important;
}

.bg-teal-soft {
    background-color: #EAFDFB;
    color: #fff;
}

.calendar-detail-item {
    margin-bottom: 1rem;
    border-radius: .25rem;
    padding: 1rem;
}

.calendar-detail-item.your_course {
    background-color: #EAFDFB;
}

.calendar-detail-item.other_course {
    background-color: #F5F5F5;
    color: #6c757d;
}

.calendar-detail-item .icon-square {
    border-radius: .25rem;
    width: 15px;
    height: 15px;
    margin-top: .25rem;
}

.calendar-detail-item.your_course .icon-square {
    background-color: #0CBCA7;
}

.calendar-detail-item.other_course .icon-square {
    background-color: #BAC5D0;
}

.calendar-detail-item.your_course .calendar-detail-item-title, .calendar-detail-item.your_course .icon-clock {
    color: #0CBCA7;
}

.calendar-detail-block {
    background: linear-gradient(90deg, #f9f9f9 0%, #fff 100%);
}

.calendar-detail-item.other_course .calendar-detail-item-time {
    opacity: .7;
}

.calendar-detail-item:last-child {
    margin-bottom: 0 !important;
}

.btn-muted {
    background-color: #C2C3C7;
    border-color: #C2C3C7;
    color: #616264;
}

.btn-muted:hover, .btn-muted:focus {
    background-color: #afb0b3;
    border-color: #afb0b3;
}

.btn-muted:active, .btn-muted.active {
    background-color: #9b9c9f;
    border-color: #9b9c9f;
}

.table-calendar td, .table-calendar th {
    padding: .25rem;
    text-align: center;
    font-size: .8rem;
}

.calendar-item {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: .75rem;
    transition: all .2s;
}

.calendar-item:hover {
    cursor: pointer;
    background-color: #F5F5F5;
}

.calendar-item.your_course {
    background-color: #0CBCA7;
}

.calendar-item.your_course:hover {
    background-color: #0ba996 !important;
    color: #fff !important;
}

.calendar-item.other_course {
    background-color: #BAC5D0;
}

.calendar-item.other_course:hover {
    background-color: #a7b1bb !important;
    color: #fff !important;
}

.calendar-item.your_course.active, .calendar-item.other_course.active {
    color: #fff !important;
}

.calendar-item-explanation {
    width: 32px;
    height: 32px;
    border-radius: .5rem;
}

.calendar-block .calendar-header .btn-link {
    color: #6c757d;
    text-decoration: none !important;
}

.calendar-block .calendar-header .btn-link:hover, .calendar-block .calendar-header .btn-link:focus, .calendar-block .calendar-header .btn-link.active, .calendar-block .calendar-header .btn-link:active {
    color: #0CBCA7;
    box-shadow: none !important;
    outline: none !important;
}

#card-upcoming-course i {
    width: 20px;
}

.btn-yellow {
    background-color: #F8CC00;
    border-color: #F8CC00;
    color: #1167EA;
}

.btn-yellow:hover, .btn-yellow:focus, .btn-yellow.focus {
    background-color: #dfb800;
    border-color: #c6a300;
    color: #1167EA;
}

.btn-yellow.active, .btn-yellow:active {
    background-color: #c6a300;
    border-color: #ae8f00;
    color: #1167EA;
}

.calendar-detail-content {
    overflow-y: auto;
}

.modal-content.your_course {
    background-color: #0CBCA7 !important;
    color: #fff !important;
}

.modal-content.other_course {
    background-color: #F5F5F5 !important;
}

.modal-content.other_course *:not(.course-detail-title) {
    color: #616264 !important;
}

.modal-content.other_course .course-detail-title {
    color: #212529 !important;
}

.modal-content.upcoming_course {
    background-color: #1167EA !important;
    color: #fff !important;
}

.btn-white:hover, .btn-white:focus {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
}

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

.modal-content.upcoming_course a, .modal-content.your_course a, .modal-content.other_course a {
    color: #fff !important;
    text-decoration: underline;
}

.modal-content.upcoming_course a:hover, .modal-content.your_course a:hover {
    color: #fff !important;
    text-decoration: underline;
}

.modal-content.other_course a:hover {
    text-decoration: underline;
}

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

.st-btn {
    height: 38px !important;
    line-height: 38px !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 10px !important;
}

.st-btn .st-label {
    font-size: 1rem !important;
    font-weight: normal !important;
}

.st-btn > img {
    height: 24px !important;
    width: 24px !important;
    top: 6px !important;
}

.btn-copy {
    color: rgba(0, 0, 0, 0.7);
}

.btn-copy:focus, .btn-copy:hover {
    color: rgba(0, 0, 0, 0.9);
}

/* Inbox Message */
#message-instructors, #message-content, #message-student {
    overflow-y: auto;
}

#message-content-block {
    position: relative;
}

.message-content-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top-right-radius: .5rem;
    height: 56px;
    background-color: #fff;
    z-index: 1;
}

#message-content {
    position: relative;
    margin-top: 56px;
}

.message-item {
    display: -ms-flexbox!important;
    display: flex!important;
    width: 50%;
    margin-bottom: 1rem;
}

.message-item:last-child {
    margin-bottom: 0 !important;
}

.message-item.self {
    margin-left: auto !important;
    -ms-flex-pack: end!important;
    justify-content: flex-end!important;
}

.message-item .message-profile-picture {
    min-width: 32px;
    height: 32px;
    max-width: 32px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 32px;
}

.message-item .message-text {
    background-color: #f5f5f5;
    font-size: .9rem;
    border-radius: 0.25rem!important;
}

.message-item .message-datetime {
    font-size: 80%;
    font-weight: 400;
}

.message-item.self .message-profile-picture {
    -ms-flex-order: 1;
    order: 1;
}

.message-item.self .message-text {
    -ms-flex-order: 0;
    order: 0;
    background-color: #77BD1E;
    color: #fff;
}

.message-item.self .message-datetime {
    text-align: right;
}

.ib-msg-last-msg {
    color: #6c757d !important;
    word-break: break-all;
    max-height: 22px;
    overflow: hidden;
}

.unread .message-instructors-name, .unread .message-student-name {
    font-weight: 700 !important;
}

.unread .message-instructors-last-msg, .unread .ib-msg-last-msg {
    color: #77BD1E !important;
}

.message-item.focus {
    box-shadow: 0 0 0 0.2rem rgb(119 189 30 / 25%);
}

.count-message-unread-block {
    position: absolute;
    bottom: 104px;
    left: 50%;
    transform: translateX(-50%);
}

.message-instructors-link, .message-student-link {
    border-radius: .3rem!important;
}

.message-instructors-link:hover, .message-student-link:hover {
    cursor: pointer;
    background-color: #f8f9fa !important;
}

.message-instructors-item.active .message-instructors-link, .message-student-item.active .message-student-link {
    background-color: #f1f8e9 !important;
}

.picture-image-block {
    background-size: cover !important;
}

.badge-light {
    background-color: #eee !important;
}


#modal-teaching-video .create, #modal-teaching-video .comment {
    display: none;
}

#modal-teaching-video .modal-content.mode-create .create, #modal-teaching-video .modal-content.mode-comment .comment {
    display: block;
}

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

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

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

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

.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-online-certificate-introduce .ck-toolbar {
    border-radius: .3rem .3rem 0 0;
}

#modal-online-certificate-introduce .ck-editor__editable_inline {
    border-radius: 0 0 .3rem .3rem;
}