/** @format */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

*:not(.fa, .far, .fas),
.apexcharts-legend * {
	font-family: "IBM Plex Sans Thai", "Roboto", sans-serif !important;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 400;
}

* {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

th,
b,
.bold {
	font-weight: 500 !important;
}

.animate05 {
	-webkit-transition: all 0.05s ease-in-out;
	-moz-transition: all 0.05s ease-in-out;
	-o-transition: all 0.05s ease-in-out;
	-ms-transition: all 0.05s ease-in-out;
	transition: all 0.05s ease-in-out;
}

.no-animate,
.no-animate * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

/* Font utility classes */
.font-thin {
	font-weight: 100;
}
.font-extralight {
	font-weight: 200;
}
.font-light {
	font-weight: 300;
}
.font-regular {
	font-weight: 400;
}
.font-medium {
	font-weight: 500;
}
.font-semibold {
	font-weight: 600;
}
.font-bold {
	font-weight: 700;
}
.font-extrabold {
	font-weight: 800;
}
.font-black {
	font-weight: 900;
}
.font-italic {
	font-style: italic;
}

.color-black {
	color: #141414;
}
.color-grey {
	color: #141414b2;
}
.color-active {
	color: #b9151c;
}
.color-green {
	color: #317b74;
}
.color-primary {
	color: #270909;
}
.color-primary-active {
	color: #1c0505;
}
.text-white,
.color-white {
	color: white !important;
}

.flex1 {
	flex: 1;
}
.flex0 {
	flex: 0;
}

.font9 {
	font-size: 9px;
}
.font10 {
	font-size: 10px;
}
.font11 {
	font-size: 11px;
}
.font12 {
	font-size: 12px;
}
.font13 {
	font-size: 13px;
}
.font14 {
	font-size: 14px;
}
.font16 {
	font-size: 16px;
}
.font18 {
	font-size: 18px;
}
.font20 {
	font-size: 20px;
}
.font22 {
	font-size: 22px;
}
.font24 {
	font-size: 24px;
}
.font26 {
	font-size: 26px;
}
.font28 {
	font-size: 28px;
}
.font30 {
	font-size: 30px;
}
.font32 {
	font-size: 32px;
}
.font34 {
	font-size: 34px;
}
.font36 {
	font-size: 36px;
}
.font38 {
	font-size: 38px;
}
.font40 {
	font-size: 40px;
}
.font45 {
	font-size: 45px;
}
.font48 {
	font-size: 48px;
}
.font50 {
	font-size: 50px;
}
.font80 {
	font-size: 80px;
}

.pointer {
	cursor: pointer;
}
.label-error,
.error-message {
	color: rgba(255, 0, 0, 0.8);
}

.hover100 {
	opacity: 0.85;
}
.hover100:hover {
	opacity: 1;
}
.hover-shadow-sm:hover {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.form-control:focus {
	box-shadow: 0 0 0 0.25rem #b9151d27 !important;
	border-color: #b41d2532 !important;
}
.w-40 {
	width: 40%;
}
.top-left-border-0 {
	border-top-left-radius: 0px !important;
}

html,
body {
	color: #141414;
}

.navbar {
	z-index: 100;
}
.vertical-line {
	border-left: 1px solid #edebeb;
	height: 50px;
	margin: 0 25px;
}

.bg-dot {
	background: url(asset/trd/image/bg-dot.webp) repeat;
	background-size: 110px;
}

.btn.btn-primary {
	background: #b9151c !important;
	border-color: #b4282f !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
	box-shadow: 0 0 0 0.25rem #b9151d40 !important;
}

.btn-view-all-primary {
	border: 1px solid #b41d25 !important;
}
.btn-view-all-primary:hover,
.btn-view-all-primary:focus,
.btn-view-all-primary:active {
	box-shadow: 0 0 0 0.2rem #b9151d29 !important;
}

.btn.btn-primary:hover {
	background-color: #b9151c !important;
	border-color: #b41d2533 !important;
}
.btn.btn-primary:active,
.btn.btn-primary:focus-visible {
	background-color: #b9151c !important;
	border-color: #b41d2533 !important;
	box-shadow: 0 0 0 0.25rem #b9151d27 !important;
}
.select-language .dropdown-menu {
	width: 124px;
	min-width: 124px;
}

.btn-learning-plan {
	font-style: normal;
	transition: all 0.3s ease-out;
}
.btn-learning-plan:not(.active):hover {
	background-color: #b4b4b42d;
	transition: all 0.3s ease-out;
}
.btn-learning-plan.active {
	font-weight: 500;
	border-bottom: 3px solid #cda52c;
	color: #cda52c;
}

.section-hero {
	position: relative;
	background-size: cover;
}

.container-search {
	/* border-radius: 16px; */
	border: 1px solid rgba(20, 20, 20, 0.2);
	background: #fff;
}

.separator-vertical {
	width: 1px;
	background: rgba(0, 0, 0, 0.1);
}
hr.separator {
	border-color: rgba(0, 0, 0, 0.3);
}

.course-category {
	width: 25%;
	background: #444;
	text-decoration: none;
}
.course-category:hover,
.course-category:active {
	background: #302f2f;
	/* box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */
}

::placeholder {
	color: #14141466 !important;
}

/******************************************
*************** Login modal  **************
*******************************************/
.modal-close-btn {
	width: 24px;
	right: 10px;
	top: 10px;
}

/*********** END: Login modal  ***********/

.course-item {
	border-radius: 6px;
	border: 1px solid rgba(20, 20, 20, 0.1);
	background: #f7f7f7;
}

.course-item:hover {
	border-color: rgba(20, 20, 20, 0.2);
}

img.display-image {
	object-fit: cover;
	object-position: top;
}
.course-item:hover img.display-image {
	transform: scale(1.03);
	transition: all 0.3s ease-in-out;
}
.course-item .subject {
	margin-top: 10px;
	height: auto;
	min-height: 91px;
	max-height: 91px;
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 1.9rem;
	word-wrap: break-word;
}
.owl-prev,
.owl-next {
	width: 40px;
	height: 40px;
	border: 1px solid #b41d25;
}
.owl-prev:hover,
.owl-next:hover {
	border: 1px solid #b41d25;
	box-shadow: 0 0 0 0.2rem #b41d252e !important;
}

/* .futureskill-course .owl-item:nth-child(even),
.currentskill-course .owl-item:nth-child(even){
  margin-left: 2px;
  margin-right: 3px;
} */

.container-landing-analytics {
	border-radius: 0px 24px 24px 24px;
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
}

.footer-container .body {
	background-color: #444;
	color: white;
	font-size: 15px;
}

.footer-container .bottom {
	background-color: #270909;
	color: white;
}

.navbar-toggler:focus {
	box-shadow: none !important;
}
.profile-menu.dropdown-menu {
	top: 62px;
	right: 54px;
	width: 340px;
	padding: 0px !important;
	overflow: hidden;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.profile-menu.dropdown-menu > .dropdown-item {
	padding: 15px;
	display: block;
	text-decoration: none;
	color: #141414;
}
.profile-menu.dropdown-menu > .dropdown-item:not(:last-child) {
	border-bottom: 1px solid #e0e0e0;
}
.profile-menu.dropdown-menu > .dropdown-item:hover,
.profile-menu.dropdown-menu > .dropdown-item:active {
	background-color: #f0f0f0;
}
.profile-menu.dropdown-menu .sub-menu-item {
	display: block;
	color: #141414;
	padding: 15px 45px;
	text-decoration: none;
}
.profile-menu.dropdown-menu .sub-menu-item:hover,
.profile-menu.dropdown-menu .sub-menu-item:active {
	background-color: #f0f0f0;
}

.select-language .dropdown-menu {
	top: 38px !important;
	padding: 0px !important;
	overflow: hidden;
}
.select-language .dropdown-menu .dropdown-item {
	padding: 15px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:active {
	background-color: #f0f0f0;
}
.dropdown-menu {
	overflow: hidden;
}

.section-hero-header {
	position: relative;
	background: url(asset/trd/image/bg-hero-default.webp) no-repeat center center;
	background-size: cover;
}
.dropdown-category {
	border: 1px solid #12782d;
}
.dropdown-category .dropdown-toggle::after {
	display: none !important;
}

.container-search input[name="textSearch"]:focus {
	box-shadow: none !important;
	border: none !important;
}
.container-search.active {
	box-shadow: 0 0 0 0.25rem #b9151d24 !important;
	border-color: #b9151d35 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	background-image: none !important;
	background-color: #ff9e0255 !important;
	color: fieldtext !important;

	-webkit-box-shadow: 0 0 0px 1000px #ff9e0240 inset !important;
}

/* bg-hero-section.webp */
/* @media screen and (max-width: 1680px) {}
@media screen and (max-width: 1400px) {} */
/* Tablet msize */
/* @media screen and (max-width: 1280px) {
  .section-hero{
    background: url(asset/trd/image/bg-hero-section.webp) no-repeat center center;
    background-size: 94%;
  }
} */
/* @media screen and (max-width: 1199px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 575px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 360px) {} */

@media (max-width: 991.98px) {
	.section-hero {
		background: none;
	}
	.section-hero-container {
		height: auto !important;
	}
	.course-category {
		display: inline-block;
		width: 48%;
		margin-right: 5px;
		margin-left: 5px;
		margin-bottom: 10px;
	}
	.course-category:last-child {
		width: 98.2%;
	}
	.course-category-list {
		margin-top: -180px !important;
	}
	.container-landing-analytics > .img-content {
		width: 100%;
		height: auto;
	}

	.navbar-collapse {
		position: fixed;
		width: 100%;
		height: fit-content;
		top: 63px;
		left: 0;
		background-color: #fff;
		/* border: red solid 1px; */
		z-index: 1000;
		box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	}
	.profile-menu.dropdown-menu {
		left: 0px;
		top: 67px;
		border: none;
		border-radius: 0px;
		width: 100%;
		padding-left: 0px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	}

	.all-course .title,
	.landing-top-course .title1,
	.currentskill-course .title1,
	.futureskill-course .title1 {
		font-size: 40px;
	}
	.landing-top-course .title2 {
		font-size: 28px;
	}

	.section-hero-header {
		background: url(asset/trd/image/bg-hero-default-mobile.webp) no-repeat
			center center;
		background-size: cover;
		background-position-x: right;
	}
}

@media (max-width: 767.98px) {
	.section-hero-container .txt1 {
		font-size: 40px;
	}
	.section-hero-container .txt2 {
		font-size: 24px;
	}
	.course-category {
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 10px;
	}
	.course-category:last-child {
		width: 100%;
	}

	.all-course .title,
	.landing-top-course .title1,
	.currentskill-course .title1,
	.futureskill-course .title1,
	.landing-analytics .total-count {
		font-size: 24px;
	}
	.landing-top-course .title2 {
		font-size: 16px;
	}
	.title-suggest {
		font-size: 20px;
	}
	.course-item .subject {
		font-size: 14px;
		min-height: 50px;
		max-height: 50px;
		line-height: 1.25;
	}

	.section-hero-header {
		background: url(asset/trd/image/bg-dot.webp) repeat;
		background-size: 110px;
	}
	.section-hero-header .title {
		font-size: 20px;
	}
}

.btn-course-category,
.btn-course-type {
	border: 1px solid #b9151c !important;
}
.btn-course-category:hover,
.btn-course-category:active,
.btn-course-category:focus,
.btn-course-type:hover,
.btn-course-type:active,
.btn-course-type:focus {
	border: 1px solid #b9151c !important;
	box-shadow: 0 0 0 0.2rem #b9151d27 !important;
}

.btn-course-category.active,
.btn-course-type.active {
	border: 1px solid #b9151c !important;
	background-color: #b9151c !important;
	color: white !important;
}
.btn-course-category.active:hover,
.btn-course-category.active:active,
.btn-course-category.active:focus,
.btn-course-type.active:hover,
.btn-course-type.active:active,
.btn-course-type.active:focus {
	box-shadow: 0 0 0 0.2rem #b9151d27 !important;
}
.btn-group .btn-course-type.dropdown-toggle::after {
	display: none !important;
}

.max-line-1 {
	height: auto;
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 1 !important;
	-webkit-line-clamp: 1 !important;
	-webkit-box-orient: vertical;
	line-height: cal(1.9rem * 1) !important;
	word-wrap: break-word;
	min-height: auto !important;
	max-height: auto !important;
}
.max-line-2 {
	height: auto;
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 2 !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical;
	line-height: cal(1.9rem * 2) !important;
	word-wrap: break-word;
	min-height: auto !important;
	max-height: auto !important;
}
.max-line-3 {
	height: auto;
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: cal(1.9rem * 3);
	word-wrap: break-word;
	min-height: auto !important;
	max-height: auto !important;
}

.select-language .dropdown-item.active,
.select-language .dropdown-item:active {
	color: #291919 !important;
	text-decoration: none;
	background-color: #e1e1e1 !important;
}

@media (max-width: 900px) {
	.select-language .dropdown-item.active,
	.select-language .dropdown-item:active {
		background-color: transparent !important;
	}
	.select-language ul.dropdown-menu.show {
		border: none !important;
	}
	.select-language .dropdown-menu .dropdown-item:hover,
	.dropdown-menu .dropdown-item:active {
		background-color: transparent !important;
	}
}

/* NAVBAR profiile */
.profile-menu-content {
	max-height: none !important;
	top: 50px;
	right: 0px;
}

.profile-menu-content .dropdown-item.active,
.profile-menu-content .dropdown-item:active {
	color: #b9151c;
	font-weight: 500;
	text-decoration: underline;
	background-color: transparent !important;
}

.profile-menu-content .sub-menu-item.active,
.profile-menu-content .sub-menu-item:active {
	color: #b9151c;
	text-decoration: underline;
	background-color: transparent !important;
}

.profile-menu-content .dropdown-item svg path {
	fill: #747474;
}

.profile-menu-content .dropdown-item.active svg path,
.profile-menu-content .dropdown-item:active svg path {
	fill: #b9151c;
}

@media (max-width: 991px) {
	.profile-menu-content {
		position: absolute !important;
		width: 100dvw;
		top: 54px;
		right: -28px !important;
		border: 0px !important;
		z-index: 1019 !important;
		box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
		border-radius: 0px !important;
		max-height: none !important;
	}

	.profile-menu-content .dropdown-item > img {
		width: 16px;
	}

	.fix-mobile-layout-shadow {
		width: 100%;
		height: 4px;
		position: fixed;
		top: 60px;
		left: 0px;
	}
}
.dropdown-menu .sub-menu-item:hover {
	background-color: #f0f0f0;
	text-decoration: none;
	color: #000;
}

.dropdown-menu .report-menu:hover {
	background-color: #f0f0f0;
}

.dropdown-menu .sub-menu-item .menu-icon {
	margin-right: 10px;
}

#report-data {
	padding-left: 0px !important;
}

#report-data a {
	padding-left: 53px !important;
}

.dropdown-icon-small {
	width: 24px;
	height: 24px;
	float: right;
	margin-right: 0px !important;
}

.no-underline:hover {
	text-decoration: none;
}
.sub-menu-item {
	display: flex;
	align-items: center;
	padding: 7px;
	/* padding-left: 16px; */
	font-size: 16px;
	text-decoration: none;
	color: #000;
}

.dropdown-menu .sub-menu-item:hover {
	background-color: #f0f0f0;
	text-decoration: none;
	color: #000;
}

.dropdown-menu .report-menu:hover {
	background-color: #f0f0f0;
}

.dropdown-menu .sub-menu-item .menu-icon {
	margin-right: 10px;
}

a {
	text-decoration: none !important;
	background-color: transparent;
}
a:hover {
	/* text-decoration: underline; */
}

/* END: NAVBAR profiile */

/* Student page */
.course-display-image {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.page-student .card {
	width: auto;
	background-color: #fff;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.08);
	height: 100% !important;
}
.page-student .card.shadow-sm:hover {
	border: 1px solid rgba(0, 0, 0, 0.2);
}
.page-student .text-inactive > a {
	color: #747474;
}
.page-student .text-active {
	color: #b9151c;
	/*  */
	font-size: 16px;
	line-height: normal;
	text-decoration-line: underline;
}
.page-student .text-active > a {
	font-weight: bold !important;
	color: #b9151c;
}
.page-student .custom-scroll {
	height: auto;
	max-height: 350px !important;
}
.card .badge {
	font-weight: 400;
	padding: 4px 8px;
}

.badge.badge-warning {
	background-color: #ffa400;
}

.badge.badge-error,
.badge-danger {
	background-color: #dc3545;
}

.card:hover,
.card:focus {
	box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.info-percent.not-start {
	color: #999;
}

.info-percent.success {
	color: #04ba00;
}

.info-percent.error {
	color: #f00;
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: #b9151c;
	border-color: #b9151c;
}

#sidebarMenu .nav-link {
	padding: 0.5rem 1rem 0.5rem 2rem;
}

#courseEnrolAndOverStartedModal .modal-dialog {
	margin-top: 150px !important;
}

#courseEnrolAndOverStartedModal .modal.show {
	margin-top: 150px !important;
}

#courseEnrolAndOverStartedModal .modal-title {
	color: var(--Dark-Text, #141414) !important;

	font-size: 18px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: normal !important;
}

#courseEnrolAndOverStartedModal .modal-desc {
	color: #747474 !important;

	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: normal !important;
}

#courseEnrolAndOverStartedModal .btn-close-modal {
	border-radius: 4px !important;
	background: #616a71 !important;
	color: white !important;
}

#courseEnrolAndOverStartedModal .btn-confirm-modal {
	border-radius: 4px !important;
	background: #b9151c !important;
	color: white !important;
}

#courseEnrolAndOverStartedModal .btn-close-modal:hover {
	color: white !important;
}

.button-guide-dowload a {
	width: max-content !important;
	height: 47px !important;
	padding-top: 10px;
}

.d-flex.justify-content-center.align-items-center {
	padding-left: 6px !important;
	padding-right: 6px !important;
}

.card-course-short-name {
	color: #ababab;

	font-size: 14px;
	font-style: normal;
	line-height: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-course-teacher-name {
	color: rgba(20, 20, 20, 0.6);
	font-size: 14px;
}

.card-title {
	color: #141414;
	font-size: 18px;
	font-weight: 700;
	display: inline-block;
	word-wrap: break-word;
	text-overflow: ellipsis;
	max-height: 3.9em;
	line-height: 1.3em;

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#content {
	/* max-width: 1920px!important; */
	margin-left: 200px;
	/* margin-left: 220px;  */
	/* padding: 20px; */
}

.card-container {
	min-height: 100vh;
	padding: 24px;
	width: 100%;
	max-width: 1920px !important;
	margin: auto;
}

.card {
	width: auto;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
	/* box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08); */
	/* margin: 20px; */
	background-color: #fff;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.08);
	height: 100%;
}

.card-header {
	font-size: 20px;
	font-weight: bold;
	background-color: #ffffff;
}

.card-header-image {
	/* min-height: 148px; */
	height: auto;
	width: 100%;
	max-width: 100%;
	border-radius: 8px 8px;
	padding: 4px 4px;
}

.card-header-image img {
	width: 100%;
	max-width: 100%;
	object-fit: cover;
}

.card-body {
	/* font-size: 16px; */
	width: auto;
	/* min-height: 220px;
      max-height: 220px; */
	/* line-height: normal; */
	/* overflow: hidden; */
	/* padding: 6px 12px 12px 12px; */
}

.card .progress {
	height: 3px;
	width: 100%;
	/* background-color: #c9c9c9 !important; */
}

.card .progress-bar {
	background-color: #6e070a;
}

.btn-primary {
	border-radius: 8px 8px;
	background-color: #b9151c !important;
	border: none;
	padding: 8px 16px 8px 16px;
	gap: 10px;
	opacity: 0px;
	font-size: 16px;
}

.btn.btn-default {
	border-radius: 4px;
	border: 1px solid #b9151c !important;
	color: #b9151c !important;
	background-color: white;
}

.btn.btn-default::after {
	color: #b9151c;
}

.img-whp {
	width: 200px;
	height: auto;
}

.tag {
	width: 200px;
	height: auto;
}

.tc_content {
	h5 {
		width: 200px;
		height: auto;
	}
}

.tc_footer {
	width: 200px;
	height: auto;
}

.btn {
	border-radius: 4px;
	/* background: #E09000;
      color: #FFF; */
	font-size: 12px;
	font-style: normal;
}

.card-course-short-name {
	color: #ababab;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-course-teacher-name {
	color: rgba(20, 20, 20, 0.6);
	font-size: 14px;
}

.card-title {
	color: #141414;
	font-size: 18px;
	font-weight: 700;
	display: inline-block;
	word-wrap: break-word;
	text-overflow: ellipsis;
	max-height: 5em;
	line-height: 1.3em;

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.color-secondary {
	color: var(--Second, #ffa400);
	/*  */
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.color-gray {
	color: rgba(20, 20, 20, 0.4);
	/*  */
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.line-height-0 {
	line-height: 0;
}

.card .percent {
	margin-top: -5px;
}

.box-card {
	padding: 2px 2px;
	/* margin: 2px; */
}

.text-active {
	color: var(--Primary, #b9151c);
	/*  */
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-decoration-line: underline;
}

.text-inactive {
	color: #747474;
	/*  */
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.icon-custom {
	width: 64px;
	height: 64px;
	position: fixed;
	bottom: 24px;
	right: 24px;
}

.course-not-start {
	background-color: gray;
}

.box-card-empty {
	background-color: #fafafa;
	color: #747474;
	font-size: 20px;
	min-height: 400px !important;
}

.max-content {
	max-width: 1280px;
}

#btn-select-custom {
	border-radius: 4px;
	background: var(--Primary, #b9151c);
	height: 50px;
	padding: 8px 16px;
	color: white;
	font-size: 18px;
}

.view-answer,
.width-30-percent a {
	color: #b9151c !important;
}

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

.container-body {
	/* min-height: 92vh; */
}

.container-content-root {
	min-height: 91vh;
}

.text-active > a {
	color: #b9151c;
}

.text-inactive > a {
	color: #747474;
}

.card .badge {
	font-weight: 400;
	padding: 4px 8px;
}

.badge.badge-warning {
	background-color: #ffa400;
}

.badge.badge-error {
	background-color: #ff0000;
}

.badge.badge-secondary {
	background-color: #999;
}

.card:hover,
.card:focus {
	box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.show > .btn-primary.dropdown-toggle {
	background-color: #b9151c;
	border-color: #b9151c;
}

.info-percent.not-start {
	color: #999;
}

.info-percent.success {
	color: #04ba00;
}

.info-percent.error {
	color: #f00;
}

.info-percent.all,
.info-percent.studying {
	color: #ffa400;
}

.info-percent.not_studying {
	color: #999999;
}

.info-percent.not_success {
	color: #f00;
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: #b9151c !important;
	border-color: #b9151c !important;
}

#sidebarMenu .nav-link {
	padding: 0.5rem 1rem 0.5rem 2rem;
}

.modal.show .modal-dialog {
	margin: 0 auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	/* เพื่อให้ modal อยู่กลางจอในแนวตั้ง */
}

.modal-title {
	color: var(--Dark-Text, #141414);
	/*  */
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.modal-desc {
	color: #747474;
	/*  */
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.btn-close-modal {
	border-radius: 4px !important;
	background: #616a71 !important;
	color: white !important;
}

.btn-confirm-modal {
	border-radius: 4px !important;
	background: #b9151c !important;
	color: white !important;
}

.btn-close-modal:hover {
	color: white !important;
}

.mCSB_scrollTools .mCSB_draggerContainer {
	background: #d9d9d9 !important;
	border-radius: 10px !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	width: 8px !important;
}

.mCSB_dragger_bar {
	background-color: #b9151c !important;
}

.mCSB_scrollTools {
	width: 10px !important;
	margin-right: 5px !important;
}

.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical,
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
	margin-right: 6px !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
	width: 0px !important;
}

.mCSB_inside > .mCSB_container {
	/* margin-right: 20px !important; */
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active.active:hover {
	background: none !important;
	background-color: #b9151c !important;
	border-color: #b9151c !important;
}

.modal-guide-mobile {
	border: none !important;
	background-color: #f0fffa00;
}

.modal-body {
	background-color: white !important;
	padding-top: 0px !important;
}
/* END: Student page */

.badge-success {
	background-color: #28a745 !important;
}

.alert {
	border-color: #1414141a !important;
	background-color: #fafafa !important;
	color: #14141480 !important;
}

.min-hight-device {
	min-height: 76.78dvh;
}
.profile-button .profile-image {
	object-fit: cover;
	border: 1px solid #a5a3a3;
}

.form-check-input:checked,
.form-check-input:focus {
	background-color: #b9151c !important;
	border-color: #b4282f !important;
	box-shadow: 0 0 0 0.25rem rgba(180, 40, 47, 0.168) !important;
}