:root {
	--font-master: 'kanit-regular';
	--mgreen-light: #1effa9;
	--mgreen-fade: #92cac2;
	--mgreen: #0da48e;
	--mgreen-border: #079480;
	--mgreen-over-light: #e8f7f1;
	--mjungle-green: #27ae60;
	--mjungle-green-over-light: #27ae601a;
	--mjungle-green-light: #5dca3c;
	--mblue-light: #2f80ed;
	--mblue: #002756;
	--mblue-sapphire: #005979;
	--mblue-over-light: #f4f9ff;
	--mred: #eb5757;
	--mred-over-light: #eb57570d;
	--mwhite: #ffffff;
	--mgray-over-light: #e0e0e0;
	--mgray-light: #bec9df;
	--mgray-82: #828282;
	--mgray-4f: #4F4F4F;
	--mgray-op-14: #6c757d14;
	--morange: #f2994a;
	--mgreen-light-fade: #E8F7F1;
	--mblue-maya: #60BDFF;
	--mcream-light: #FFFEF9;
	/* text-size variable */
	--text-xs: 0.75rem;
	--text-xs--line-height: calc(1 / 0.75);

	--text-sm: 0.875rem;
	--text-sm--line-height: calc(1.25 / 0.875);

	--text-base: 1rem;
	--text-base--line-height: calc(1.5 / 1);

	--text-lg: 1.125rem;
	--text-lg--line-height: calc(1.75 / 1.125);

	--text-xl: 1.25rem;
	--text-xl--line-height: calc(1.75 / 1.25);

	--text-2xl: 1.5rem;
	--text-2xl--line-height: calc(2 / 1.5);

	--text-3xl: 1.875rem;
	--text-3xl--line-height: calc(2.25 / 1.875);

	--text-4xl: 2.25rem;
	--text-4xl--line-height: calc(2.5 / 2.25);

	--text-5xl: 3rem;
	--text-5xl--line-height: 1;

	--text-6xl: 3.75rem;
	--text-6xl--line-height: 1;

	--text-7xl: 4.5rem;
	--text-7xl--line-height: 1;

	--text-8xl: 6rem;
	--text-8xl--line-height: 1;

	--text-9xl: 8rem;
	--text-9xl--line-height: 1;
}

:root,
[data-bs-theme='light'] {
	--bs-success: var(--mgreen) !important;
}

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

@font-face {
	font-family: 'kanit-bold';
	src: url('../fonts/Kanit/Kanit-Bold.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
	font-family: 'kanit-italic';
	src: url('../fonts/Kanit/Kanit-Italic.ttf') format('truetype');
	font-style: italic;
}

html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
	font-family: var(--font-master), 'DXIcons' !important;
}

.ui-widget > * {
	font-family: var(--font-master) !important;
}

.bg-green-container {
	background-color: var(--mjungle-fade) !important;
	border-color: var(--mjungle-fade) !important;
}

.bg-green {
	background-color: var(--mgreen) !important;
	border-color: var(--mgreen) !important;
}

.bg-green-light {
	background-color: var(--mgreen-light) !important;
	border-color: var(--mgreen-light) !important;
}

.bg-green-over-light {
	background-color: var(--mgreen-over-light) !important;
	border-color: var(--mgreen-over-light) !important;
}

.bg-blue-over-light {
	background-color: var(--mblue-over-light) !important;
	border-color: var(--mblue-over-light) !important;
}

.bg-blue {
	background-color: var(--mblue) !important;
	border-color: var(--mblue) !important;
}

.bg-blue-light {
	background-color: var(--mblue-light) !important;
	border-color: var(--mblue-light) !important;
}

.bg-red {
	background-color: var(--mred) !important;
	border-color: var(--mred) !important;
}

.bg-danger-over-light {
	background-color: var(--mred-over-light) !important;
	border-color: var(--mred-over-light) !important;
}

.bg-jgreen {
	background-color: var(--mjungle-green) !important;
	border-color: var(--mjungle-green) !important;
}

.bg-gray-82 {
	background-color: var(--mgray-82) !important;
	border-color: var(--mgray-82) !important;
}

.bg-green-hover {
	background-color: var(--mgreen-light-fade) !important;
	border-color: var(--mgreen-light-fade) !important;
}

.bg-cream-light {
	background-color: var(--mcream-light) !important;
	border-color: var(--mcream-light) !important;
}

.bg-gray-op-14 {
	background-color: var(--mgray-op-14) !important;
	border-color: var(--mgray-op-14) !important;
}

.font-green-light {
	color: var(--mgreen-light) !important;
}

.font-green-fade {
	color: var(--mgreen-fade) !important;
}

.font-green-over-light {
	color: var(--mgreen-over-light) !important;
}

.font-green {
	color: var(--mgreen) !important;
}

.font-jungle-green {
	color: var(--mjungle-green) !important;
}

.font-jungle-green-light {
	color: var(--mjungle-green-light) !important;
}

.font-danger {
	color: var(--mred) !important;
}

.font-blue {
	color: var(--mblue) !important;
}

.font-blue-light {
	color: var(--mblue-light) !important;
}

.font-gray82 {
	color: var(--mgray-82) !important;
}

.font-gray-4f {
	color: var(--mgray-4f) !important;
}

.font-gray-light {
	color: var(--mgray-light) !important;
}

.form-label-blue,
.font-blue {
	color: var(--mblue) !important;
}

.font-white {
	color: var(--mwhite) !important;
}

.font-orange {
	color: var(--morange) !important;
}

.font-blue-maya {
	color: var(--mblue-maya) !important;
}

.font-very-small {
	font-size: 0.9em;
}

.border-green {
	border-color: var(--mgreen) !important;
}

.border-red {
	border-color: var(--mred) !important;
}

.border-blue {
	border-color: var(--mblue) !important;
}

.border-blue-light {
	border-color: var(--mblue-light) !important;
}

.border-gray-ol {
	border-color: var(--mgray-over-light) !important;
}

/* text-size */
.text-xs {
	font-size: var(--text-xs) !important; /* 0.75rem */
	line-height: var(--text-xs--line-height) !important;
}
.text-sm {
	font-size: var(--text-sm) !important; /* 0.875rem */
	line-height: var(--text-sm--line-height) !important;
}
.text-base {
	font-size: var(--text-base) !important; /* 1rem */
	line-height: var(--text-base--line-height) !important;
}
.text-lg {
	font-size: var(--text-lg) !important; /* 1.125rem */
	line-height: var(--text-lg--line-height) !important;
}
.text-xl {
	font-size: var(--text-xl) !important; /* 1.25rem */
	line-height: var(--text-xl--line-height) !important;
}
.text-2xl {
	font-size: var(--text-2xl) !important; /* 1.5rem */
	line-height: var(--text-2xl--line-height) !important;
}
.text-3xl {
	font-size: var(--text-3xl) !important; /* 1.875rem */
	line-height: var(--text-3xl--line-height) !important;
}
.text-4xl {
	font-size: var(--text-4xl) !important; /* 2.25rem */
	line-height: var(--text-4xl--line-height) !important;
}
.text-5xl {
	font-size: var(--text-5xl) !important; /* 3rem */
	line-height: var(--text-5xl--line-height) !important;
}
.text-6xl {
	font-size: var(--text-6xl) !important; /* 3.75rem */
	line-height: var(--text-6xl--line-height) !important;
}
.text-7xl {
	font-size: var(--text-7xl) !important; /* 4.5rem */
	line-height: var(--text-7xl--line-height) !important;
}
.text-8xl {
	font-size: var(--text-8xl) !important; /* 6rem */
	line-height: var(--text-8xl--line-height) !important;
}
.text-9xl {
	font-size: var(--text-9xl) !important; /* 8rem */
	line-height: var(--text-9xl--line-height) !important;
}

/* sizing */
.h-1 {
	height: 2rem !important;
}

.h-2 {
	height: 4rem !important;
}

.h-3 {
	height: 6rem !important;
}

.h-4 {
	height: 8rem !important;
}

.h-5 {
	height: 10rem !important;
}

.h-5-5 {
	height: 11rem !important;
}

.h-6 {
	height: 12rem !important;
}

.h-7 {
	height: 14rem !important;
}

.h-7-5 {
	height: 15rem !important;
}

.h-8 {
	height: 16rem !important;
}

.h-8-5 {
	height: 17rem !important;
}

.h-9 {
	height: 18rem !important;
}

.h-10 {
	height: 20rem !important;
}

.h-11 {
	height: 22rem !important;
}

.h-12 {
	height: 24rem !important;
}

.h-13 {
	height: 26rem !important;
}

.h-14 {
	height: 28rem !important;
}

.h-15 {
	height: 30rem !important;
}

.h-16 {
	height: 32rem !important;
}

.min-h-1 {
	min-height: 2rem !important;
}

.min-h-2 {
	min-height: 4rem !important;
}

.min-h-3 {
	min-height: 6rem !important;
}

.min-h-4 {
	min-height: 8rem !important;
}

.min-h-5 {
	min-height: 10rem !important;
}

.min-h-5-5 {
	min-height: 11rem !important;
}

.min-h-6 {
	min-height: 12rem !important;
}

.min-h-7 {
	min-height: 14rem !important;
}

.min-h-8 {
	min-height: 16rem !important;
}

.min-h-9 {
	min-height: 18rem !important;
}

.min-h-10 {
	min-height: 20rem !important;
}

.min-h-11 {
	min-height: 22rem !important;
}

.min-h-12 {
	min-height: 24rem !important;
}

.min-h-13 {
	min-height: 26rem !important;
}

.min-h-14 {
	min-height: 28rem !important;
}

.min-h-15 {
	min-height: 30rem !important;
}

.min-h-16 {
	min-height: 32rem !important;
}

.min-h-16-5 {
	min-height: 33rem !important;
}

.min-h-17 {
	min-height: 34rem !important;
}

.max-h-1 {
	max-height: 2rem !important;
}

.max-h-2 {
	max-height: 4rem !important;
}

.max-h-3 {
	max-height: 6rem !important;
}

.max-h-4 {
	max-height: 8rem !important;
}

.max-h-5 {
	max-height: 10rem !important;
}

.max-h-5-5 {
	max-height: 11rem !important;
}

.max-h-6 {
	max-height: 12rem !important;
}

.max-h-7 {
	max-height: 14rem !important;
}

.max-h-8 {
	max-height: 16rem !important;
}

.max-h-9 {
	max-height: 18rem !important;
}

.max-h-10 {
	max-height: 20rem !important;
}

.max-h-11 {
	max-height: 22rem !important;
}

.max-h-12 {
	max-height: 24rem !important;
}

.max-h-13 {
	max-height: 26rem !important;
}

.max-h-14 {
	max-height: 28rem !important;
}

.max-h-15 {
	max-height: 30rem !important;
}

.max-h-16 {
	max-height: 32rem !important;
}

.max-h-16-5 {
	max-height: 33rem !important;
}

.max-h-17 {
	max-height: 34rem !important;
}


/* สำหรับ breakpoint xs: min-width = 0px */
@media (min-width: 0px) {
	.w-xs-25 {
		width: 25% !important;
	}

	.w-xs-50 {
		width: 50% !important;
	}

	.w-xs-75 {
		width: 75% !important;
	}

	.w-xs-100 {
		width: 100% !important;
	}
}

/* สำหรับ breakpoint sm: min-width = 576px */
@media (min-width: 576px) {
	.w-sm-25 {
		width: 25% !important;
	}

	.w-sm-50 {
		width: 50% !important;
	}

	.w-sm-75 {
		width: 75% !important;
	}

	.w-sm-100 {
		width: 100% !important;
	}
}

/* สำหรับ breakpoint md: min-width = 768px */
@media (min-width: 768px) {
	.w-md-25 {
		width: 25% !important;
	}

	.w-md-50 {
		width: 50% !important;
	}

	.w-md-75 {
		width: 75% !important;
	}

	.w-md-100 {
		width: 100% !important;
	}
}

/* สำหรับ breakpoint lg: min-width = 992px */
@media (min-width: 992px) {
	.w-lg-25 {
		width: 25% !important;
	}

	.w-lg-50 {
		width: 50% !important;
	}

	.w-lg-75 {
		width: 75% !important;
	}

	.w-lg-100 {
		width: 100% !important;
	}
}

/* สำหรับ breakpoint xl: min-width = 1200px */
@media (min-width: 1200px) {
	.w-xl-25 {
		width: 25% !important;
	}

	.w-xl-50 {
		width: 50% !important;
	}

	.w-xl-75 {
		width: 75% !important;
	}

	.w-xl-100 {
		width: 100% !important;
	}
}

/* สำหรับ breakpoint xxl: min-width = 1400px */
@media (min-width: 1400px) {
	.w-xxl-25 {
		width: 25% !important;
	}

	.w-xxl-50 {
		width: 50% !important;
	}

	.w-xxl-75 {
		width: 75% !important;
	}

	.w-xxl-100 {
		width: 100% !important;
	}
}

/* input ช่องที่เขียว */
.btn {
	font-weight: 500 !important;
}

.form-control-success:disabled,
.form-control-success[readonly] {
	background-color: var(--mgreen-over-light);
	border-color: var(--mgreen-over-light);
	color: var(--mgreen);
}
/* input ช่องที่เขียว */

/*ปุ่มไม่มี radius*/
.btn-none-radius {
	border-radius: 0 !important;
	border: 0 !important;
}

/*ปุ่มไม่มี radius*/

/* ความกว้างของ button ค่าเริ่มต้น */

.btn-base {
	min-width: 9rem !important;
}

/*ความกว้างของ button*/

/*ความหนาของตัวหนังสือ*/

.font-weight-100 {
	font-weight: 100 !important;
}

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

.font-weight-300 {
	font-weight: 300 !important;
}

.font-weight-400 {
	font-weight: 400 !important;
}

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

.font-weight-600 {
	font-weight: 600 !important;
}

.font-weight-700 {
	font-weight: 700 !important;
}

.font-weight-800 {
	font-weight: 800 !important;
}

.font-weight-900 {
	font-weight: 900 !important;
}
/*ความหนาของตัวหนังสือ*/

/* custom color class success*/

.c-badges {
	display: inline-block;
	background-color: var(--mgreen-over-light);
	color: var(--mgreen);
	padding: 5px 25px;
	margin: 0px 5px 5px 0px;
	border-radius: 25px;
}

.c-badges.info {
}

/* Label Status */
.c-badges-status-container {
	padding: 0.125rem 0.625rem;
	background-color: #27ae601a;
	color: #27ae60;
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 700;
	/*margin-left: 1.25rem;*/
}

.c-badges-status-container.inactive {
	background-color: #f5b7b1;
	color: #e74c3c;
}

.c-badges-status-container.supend {
	background-color: #fff1e5;
	color: #ff7800;
}

.valid-feedback {
	color: var(--mgreen) !important;
}

.form-control.is-valid,
.was-validated .form-control:valid {
	border-color: var(--mgreen) !important;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
	border-color: var(--mgreen) !important;
}

.form-select.is-valid,
.was-validated .form-select:valid {
	border-color: var(--mgreen) !important;
}

.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
	border-color: var(--mgreen) !important;
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
	border-color: var(--mgreen) !important;
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
	background-color: var(--mgreen) !important;
}

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
	color: var(--mgreen) !important;
}

.form-switch .form-check-input:focus {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2839, 174, 96,0.6%29'/%3e%3c/svg%3e") !important;
	box-shadow: 0 0 0 0.25rem var(--mjungle-green-over-light) !important;
}

.form-switch .form-check-input:checked {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-switch > .form-check-input:checked {
	background-color: var(--mjungle-green) !important;
	border-color: var(--mjungle-green) !important;
}

.form-switch > .form-check-input:focus {
	border-color: var(--mjungle-green) !important;
}

.btn-success {
	background-color: var(--mgreen) !important;
	border-color: var(--mgreen) !important;
}

.btn-success.disabled,
.btn-success:disabled {
	background-color: var(--mgreen) !important;
	border-color: var(--mgreen) !important;
}
.btn-outline-success {
	--bs-btn-color: var(--mgreen) !important;
	--bs-btn-border-color: var(--mgreen) !important;
	--bs-btn-hover-bg: var(--mgreen) !important;
	--bs-btn-hover-border-color: var(--mgreen) !important;
	--bs-btn-active-bg: var(--mgreen) !important;
	--bs-btn-active-border-color: var(--mgreen) !important;
	--bs-btn-disabled-color: var(--mgreen) !important;
	--bs-btn-disabled-border-color: var(--mgreen) !important;
}
.btn-outline-success {
	color: var(--mgreen) !important;
	border-color: var(--mgreen);
	border-radius: 8px !important;
}

	.btn-outline-success:hover {
		background-color: var(--mgreen-fade) !important;
		border-color: var(--mgreen-fade) !important;
		color: #fff !important;
	}

	.btn-check:active + .btn-outline-success,
	.btn-check:checked + .btn-outline-success,
	.btn-outline-success.active,
	.btn-outline-success.dropdown-toggle.show,
	.btn-outline-success:active {
		background-color: var(--mgreen) !important;
		border-color: var(--mgreen) !important;
		color: #fff !important;
	}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
	color: var(--mgreen) !important;
}

.btn-outline-green {
	color: var(--mgreen) !important;
	border-color: var(--mgreen) !important;
}

.btn-outline-blue {
	color: var(--mblue-light) !important;
	border-color: var(--mblue-light) !important;
}

.btn-outline-white {
	color: #fff !important;
	border-color: #fff !important;
	border-radius: 8px !important;
}

.btn-outline-white:hover {
	background-color: #fff !important;
	color: var(--mgreen) !important;
}

.btn-outline-dark-blue {
	border: 1.5px solid var(--mblue) !important;
	border-radius: 12px !important;
	color: var(--mblue) !important;
	align-items:center;
}

	.btn-outline-dark-blue:hover {
		border: 1.6px solid var(--mblue) !important;
	}

.link-success {
	color: var(--mgreen) !important;
}

/* custom color class success*/

/* devextreme grid blue header */

.dx-color-theme-header-blue .dx-datagrid-headers {
	background-color: var(--mblue-over-light);
	color: var(--mblue) !important;
	font-weight: 700 !important;
	font-family: var(--font-master) !important;
}

/* devextreme grid font , body */
.dx-viewport .dx-datagrid-rowsview,
.dx-viewport .dx-datagrid-headers {
	font-family: var(--font-master), 'DXIcons' !important;
}

/*
    Validation
*/

.form-control.is-invalid,
.form-select.is-invalid {
	background-color: #ffcece !important;
	border: 1px solid #eb5757;
	background-image: none !important;
}

.form-control.is-invalid::placeholder {
	color: #212529 !important;
	opacity: 1 !important;
}

.c-invalid-feedback {
	display: none;
	width: 100%;
	margin-top: 0.25rem;
	padding-left: 10px;
	font-size: 0.775em;
	color: #dc3545;
}

.c-invalid-feedback.invalid {
	display: initial;
}

.c-required::after {
	content: ' *';
	color: var(--mred);
	/*font-weight: bold;*/
}

/* รูปสำหรับ Block UI */
.logo-loading {
	width: 150px;
	height: 150px;
	background-image: url('../images/logo-loading.gif');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* รูปสำหรับ Block UI */

/* position สำหรับ badge  */
.end-10 {
	right: 90% !important;
}
/* position สำหรับ badge   */

.mn-h-73 {
	min-height: 73vh !important;
}

.mx-h-73 {
	max-height: 73vh !important;
}

/* ปุ่ม แสดงข้อมูล grid / list */
.grid-list {
	--color: var(--mgreen);
	--background: transparent;
	--background-hover: var(--mgreen-over-light);
	--icon-color: var(--mgreen);
	padding: 6px 12px 6px 8px;
	margin: 0;
	display: flex;
	outline: none;
	position: relative;
	border: none;
	border-radius: 9px;
	background: var(--b, var(--background));
	cursor: pointer;
	-webkit-appearence: none;
	-webkit-tap-highlight-color: transparent;
	transform: scale(var(--scale, 1)) translateZ(0);
	transition: transform 0.15s, background 0.4s;
}

.grid-list:active {
	--scale: 0.95;
}

.grid-list:hover {
	--b: var(--background-hover);
}

.grid-list.without-text {
	--background: transparent;
	--background-hover: var(--mgreen-over-light);
	--icon-color: var(--mgreen);
	padding: 6px;
}

.grid-list .icon {
	width: 24px;
	height: 24px;
	position: relative;
}

.grid-list .icon i {
	position: absolute;
	left: var(--left, 4px);
	top: var(--top, 4px);
	display: block;
	border-radius: 2px;
	width: var(--width, 7px);
	height: var(--height, 7px);
	background: var(--icon-color);
	-webkit-animation: var(--name, var(--dots-name, none))
		var(--duration, var(--dots-duration, 0.5s))
		var(--easing, var(--dots-easing, linear)) forwards
		var(--delay, var(--dots-delay, 0s));
	animation: var(--name, var(--dots-name, none))
		var(--duration, var(--dots-duration, 0.5s))
		var(--easing, var(--dots-easing, linear)) forwards
		var(--delay, var(--dots-delay, 0s));
}

.grid-list .icon .dots i:nth-child(1) {
	--x-middle: -8px;
	--y-middle: 10px;
	--x-end: -2px;
	--y-end: 12px;
	--x-back: 10px;
	--y-back: 7px;
	--x-back-end: 9px;
	--y-back-end: 0;
}

.grid-list .icon .dots i:nth-child(2) {
	--left: 13px;
	--x-middle: -12px;
	--y-middle: 5px;
	--x-end: -11px;
	--y-end: 7px;
	--x-back: -3px;
	--y-back: 1px;
	--x-back-end: -9px;
	--y-back-end: 0;
}

.grid-list .icon .dots i:nth-child(3) {
	--top: 13px;
	--x-middle: 4px;
	--y-middle: -5px;
	--x-end: -2px;
	--y-end: -7px;
	--x-back: -5px;
	--y-back: 0px;
	--x-back-end: 9px;
	--y-back-end: 0;
}

.grid-list .icon .dots i:nth-child(4) {
	--left: 13px;
	--top: 13px;
	--x-middle: 0;
	--y-middle: -10px;
	--x-end: -11px;
	--y-end: -12px;
	--x-back: -14px;
	--y-back: -8px;
	--x-back-end: -9px;
	--y-back-end: 0;
}

.grid-list .icon .lines {
	--name: var(--lines-name, none);
	--duration: var(--lines-duration, 0.15s);
	--easing: var(--lines-easing, linear);
	--delay: var(--lines-delay, 0s);
}

.grid-list .icon .lines i {
	--left: 9px;
	--top: 3px;
	--height: 2px;
	--width: 11px;
	transform: translateY(20%) translateZ(0) scaleX(0);
}

.grid-list .icon .lines i:nth-child(2) {
	--top: 8px;
}

.grid-list .icon .lines i:nth-child(3) {
	--top: 13px;
}

.grid-list .icon .lines i:nth-child(4) {
	--top: 18px;
}

.grid-list .text {
	margin-left: 4px;
	position: relative;
	line-height: 24px;
	font-weight: 600;
	font-size: 14px;
	min-width: 28px;
	color: var(--color);
}

.grid-list .text span {
	--y-default: 0;
	--o-default: 1;
	--y-active: -12px;
	--o-active: 0;
	display: block;
	opacity: var(--o-default);
	transform: translateY(var(--y-default)) translateZ(0);
	-webkit-animation: var(--span-name, none) 0.4s ease forwards;
	animation: var(--span-name, none) 0.4s ease forwards;
}

.grid-list .text span:last-child {
	--y-default: 12px;
	--o-default: 0;
	--y-active: 0;
	--o-active: 1;
	position: absolute;
	left: 0;
	top: 0;
}

.grid-list.animation {
	--span-name: text;
	--dots-name: back;
	--lines-name: scale-down;
}

.grid-list.animation .lines i {
	transform-origin: 0 50%;
}

.grid-list.animation .lines i:nth-child(3),
.grid-list.animation .lines i:nth-child(4) {
	transform-origin: 100% 50%;
}

.grid-list.animation.active {
	--span-name: text-active;
	--dots-name: move;
	--lines-name: scale;
	--lines-duration: 0.15s;
	--lines-delay: 0.3s;
}

.grid-list.animation.active .lines i {
	transform-origin: 100% 50%;
}

.grid-list.animation.active .lines i:nth-child(3),
.grid-list.animation.active .lines i:nth-child(4) {
	transform-origin: 0 50%;
}
/* ปุ่ม แสดงข้อมูล grid / list */
/* selcect2 */
.select2-container {
	color: var(--mblue) !important;
}

.c-select2.is-invalid ~ .select2-container--default .select2-selection--single {
	background-color: #ffcece !important;
	border: 1px solid #eb5757 !important;
	background-image: none !important;
}

.c-select2.is-invalid
	~ .select2-container--default
	.select2-selection--single
	.select2-selection__placeholder {
	color: #212529 !important;
	opacity: 1 !important;
}

.select2-container--default .select2-selection--single {
	height: 2.363rem !important;
	padding: 0.313rem !important;
	border: 1px solid #dee2e6 !important;
	border-radius: 0.375rem !important;
}

.select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	height: 2.25rem !important;
}

.select2-dropdown {
	border: 1px solid #dee2e6 !important;
	border-radius: 0.375rem !important;
}

.select2-search__field {
	border: 1px solid #dee2e6 !important;
	border-radius: 0.375rem;
	color: var(--mblue) !important;
}

.select2-container--default
	.select2-selection--single
	.select2-selection__placeholder {
	color: #bdbdbd !important;
}

.select2-results__option[aria-selected='true'] {
	background-color: var(--mblue) !important;
	color: #fff !important;
	border-radius: 0.375rem !important;
}

.select2-results__option--highlighted[aria-selected] {
	background-color: #e8f7f1 !important;
	color: var(--mblue) !important;
	border-radius: 0.375rem !important;
}

.select2-container--default .select2-results > .select2-results__options {
	border-radius: 0.375rem !important;
	max-height: 18rem !important;
}

.select2-container--default
	.select2-selection--single
	.select2-selection__clear {
	display: none;
}

.select2-container--default .select2-selection--single {
	position: relative;
}

.select2-container--default .select2-selection--single .form-control-clear {
	position: absolute;
	right: 1.875rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 10;
}

.select2-container--default .select2-selection--single .form-control-clear i {
	color: var(--mred);
	font-size: 1rem;
}

.select2-container--default
	.select2-selection--single
	.select2-selection__rendered {
	color: var(--mblue) !important;
	padding-right: 2.5rem !important;
}
/* selcect2 */
/* select2 multiple */
.select-delay {
	display: none !important;
}

.select2-dropdown {
	border: 1px solid #ced4da !important;
}

.select2-container--default
	.select2-selection--multiple
	.select2-search--inline
	.select2-search__field {
	border: 0 !important;
}

.select2-container--default .select2-selection--multiple {
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
	background-color: #ced4da !important;
}

.select2.select2-container
	.select2-selection--multiple
	.select2-selection__choice
	.select2-selection__choice__remove {
	color: var(--mgreen);
	font-size: 1.2rem;
	margin-right: 5px !important;
	margin-left: 2px !important;
}

.select2-container--default
	.select2-selection--multiple
	.select2-selection__choice {
	background-color: var(--mgreen-over-light) !important;
	border: 1px solid transparent !important;
	border-radius: 50px !important;
}
/* select2 multiple */

@-webkit-keyframes text {
	0% {
		opacity: var(--o-active);
		transform: translateY(var(--y-active)) translateZ(0);
	}

	100% {
		opacity: var(--o-default);
		transform: translateY(var(--y-default)) translateZ(0);
	}
}

@keyframes text {
	0% {
		opacity: var(--o-active);
		transform: translateY(var(--y-active)) translateZ(0);
	}

	100% {
		opacity: var(--o-default);
		transform: translateY(var(--y-default)) translateZ(0);
	}
}

@-webkit-keyframes text-active {
	0% {
		opacity: var(--o-default);
		transform: translateY(var(--y-default)) translateZ(0);
	}

	100% {
		opacity: var(--o-active);
		transform: translateY(var(--y-active)) translateZ(0);
	}
}

@keyframes text-active {
	0% {
		opacity: var(--o-default);
		transform: translateY(var(--y-default)) translateZ(0);
	}

	100% {
		opacity: var(--o-active);
		transform: translateY(var(--y-active)) translateZ(0);
	}
}

@-webkit-keyframes move {
	50% {
		transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
	}

	100% {
		transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
	}
}

@keyframes move {
	50% {
		transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
	}

	100% {
		transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
	}
}

@-webkit-keyframes back {
	0%,
	15% {
		transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
	}

	50% {
		transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
	}

	100% {
		transform: translate(var(--x-back-end, 0), var(--y-back-end, 0))
			scale(1);
	}
}

@keyframes back {
	0%,
	15% {
		transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
	}

	50% {
		transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
	}

	100% {
		transform: translate(var(--x-back-end, 0), var(--y-back-end, 0))
			scale(1);
	}
}

@-webkit-keyframes scale {
	100% {
		transform: translateY(20%) translateZ(0) scaleX(1);
	}
}

@keyframes scale {
	100% {
		transform: translateY(20%) translateZ(0) scaleX(1);
	}
}

@-webkit-keyframes scale-down {
	0% {
		transform: translateY(20%) translateZ(0) scaleX(1);
	}

	100% {
		transform: translateY(20%) translateZ(0) scaleX(0);
	}
}

@keyframes scale-down {
	0% {
		transform: translateY(20%) translateZ(0) scaleX(1);
	}

	100% {
		transform: translateY(20%) translateZ(0) scaleX(0);
	}
}

/*--------------------------------------------------------------
# Error 401
--------------------------------------------------------------*/
.error-401 {
	padding: 30px;
}

.error-401 h1 {
	font-size: 180px;
	font-weight: 700;
	color: #4154f1;
	margin-bottom: 0;
	line-height: 150px;
}

.error-401 h2 {
	font-size: 24px;
	font-weight: 700;
	color: #012970;
	margin-bottom: 30px;
}

.error-401 .btn {
	background: #51678f;
	color: #fff;
	padding: 8px 30px;
}

.error-401 .btn:hover {
	background: #3e4f6f;
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/

.error-404 h1 {
	font-size: 180px;
	font-weight: 700;
	color: var(--mgreen);
	margin-bottom: 20px;
	line-height: 150px;
}

.error-404 h2 {
	font-size: 30px;
	font-weight: 700;
	color: #012970;
	margin-bottom: 30px;
}

.error-404 h5 {
	color: var(--mgray-82);
}

@media (min-width: 992px) {
	.error-401 img {
		max-width: 50% !important;
	}
}
@media (max-width: 992px) {

	.error-404 h1 {
		font-size: 100px !important;
		margin-bottom: 0 !important;
	}
}

.html-content {
	all: inherit; /* ให้ทุกค่าใช้ตามพ่อแม่ */
	line-height: inherit;
	text-align: inherit;
	flex-wrap: wrap;
	width: inherit;
	height: inherit;
}

.html-content h1,
.html-content h2,
.html-content h3 {
	font-size: inherit; /* ให้ Header ใช้ขนาดตาม div */
}

.html-content img {
	max-width: 100%;
	height: auto;
}

.html-content table {
	max-width: 100%;
	border-collapse: collapse;
}

/* จำนวนบรรทัดที่ต้องการให้แสดง */
.multi-line-truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3em; /* ปรับความสูงแต่ละบรรทัดได้ */
	max-height: 2.6em; /* 1.3em * 2 บรรทัด */
}

.multi-line-truncate-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.multi-line-truncate-4 {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.multi-line-truncate-5 {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* จำนวนบรรทัดที่ต้องการให้แสดง */

/*
    ================ Dx custom ================
*/
.dx-custom .dx-checkbox-icon,
.dx-custom.dx-select-checkbox,
.dx-custom-treelist .dx-treelist-checkbox-size .dx-checkbox-icon {
	border-radius: 4px;
	width: 20px;
	height: 20px;
}

.dx-custom.dx-checkbox-checked .dx-checkbox-icon,
.dx-custom-treelist
	.dx-treelist-checkbox-size.dx-checkbox-checked
	.dx-checkbox-icon {
	background-color: #002756 !important;
	border-color: #002756 !important;
	color: #fff !important;
}

.dx-custom-treelist .dx-checkbox-indeterminate .dx-checkbox-icon {
	color: #002756 !important;
}

.dx-custom-treelist .dx-checkbox-indeterminate .dx-checkbox-icon::before {
	background-color: #002756 !important;
}

.dx-custom.dx-state-disabled.dx-checkbox .dx-checkbox-icon,
.dx-custom-treelist .dx-state-disabled.dx-checkbox .dx-checkbox-icon {
	opacity: 1;
}

.member-icon {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: 5px;
	background-size: cover;
	transition: background-image 0.3s ease;
}

.member-icon.member-icon-book {
	background-image: url(../assets/img/book-icon-green.svg);
}

.btn:hover .member-icon.member-icon-book,
.btn:focus .member-icon.member-icon-book {
	background-image: url(../assets/img/book-icon-white.svg);
}

.no-effect-on-export * {
	box-shadow: none !important;
	filter: none !important;
	backdrop-filter: none !important;
}

.dx-htmleditor-content {
	font-family: 'kanit-regular', sans-serif;
}

	/* จับเวลาผู้ใช้เลือกฟอนต์จาก toolbar */
	.dx-htmleditor-content font[face="Kanit"],
	.dx-htmleditor-content span[style*="font-family: Kanit"] {
		font-family: 'kanit-regular', sans-serif !important;
	}

.content-container {
	position: relative;
	box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	background-color: #fff;
	padding-top: calc(var(--bs-gutter-x)* .5);
	padding-bottom: calc(var(--bs-gutter-x)* .5);
	margin-top: auto;
	margin-bottom: auto;
}

.summary-box {
	padding: 0.4rem 0.1rem;
	border-radius: 8px;
	border: 1px solid #E0E0E0;
	background-color: #fff;
	text-align: center;
}

.content-header {
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 0 0.8rem;
	color: #04417E;
}

.header-container-rank {
	border-bottom: 1px solid #E0E0E0;
	padding-top: .75rem !important;
	border-radius: 20px 20px 0 0;
}

	.header-container-rank.rank-up {
		background-color: #A6F1C5;
	}

	.header-container-rank.rank-down {
		background-color: #FFD1D1;
	}

.content-container:has(.header-container-rank) {
	padding: 0;
}

.number-text {
	font-size: 2.5rem;
}

.number-text-sm {
	font-size: 2rem;
}

.overflow-x-hidden {
	overflow-x: hidden;
}

.none-border-grid > .dx-datagrid .dx-column-lines > td {
	border-left: 0 !important;
	border-right: 0 !important;
}