html, body {
	height: 100%;
}
.bai-jamjuree {
	font-family: 'Bai Jamjuree', sans-serif;
}
.chakra-petch {
	font-family: 'Chakra Petch', sans-serif;
}
.ibm-plex-sans-thai {
	font-family: 'IBM Plex Sans Thai', sans-serif;
}
.prompt {
	font-family: 'Prompt', sans-serif;
}
.sarabun {
	font-family: 'Sarabun', sans-serif;
}
.text-lite {
	color: #444;
}
body {
	margin: 0;
	font-family: 'Bai Jamjuree', sans-serif !important;
	letter-spacing: 0.01em;
	background-color: #fdfdfd;


}

.cover {
    background-image: url("/assets/bg-main1.jpg"); 
    background-position:top; 
    background-repeat: no-repeat; 
    background-size :cover;

    margin-top: -20px;
}

.content-body {
	padding-top: 90px;
	min-height: calc(100vh - 190px) !important;
}
.body-color {
	background-color: #fdfdfd;
}
.content-color {
	color: #555;
}
.banner-darkfont-color {
	color: #057e23;
}
.footer-bg-color {
	background-color: #f1f8f3;
}
.main-body {
	width: 100%;
	/* min-height: 100%; */
	/* min-height: calc(100% - $footer-height) !important; */
	padding-top: 40px !important;
}
.noselect {
	-webkit-touch-callout: none;
   /* iOS Safari */
	-webkit-user-select: none;
   /* Safari */
	-khtml-user-select: none;
   /* Konqueror HTML */
	-moz-user-select: none;
   /* Old versions of Firefox */
	-ms-user-select: none;
   /* Internet Explorer/Edge */
	user-select: none;
   /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.modal {
	font-family: 'IBM Plex Sans Thai', sans-serif;
}
.content {
	padding: 10px;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	max-width: 1000px;
	min-width: 650x;
	margin-left: auto;
	margin-right: auto;
}
a {
	text-decoration: none;
}
/* a:hover {
	color: #067e24 !important;
} */
.tab-content {
	padding-top: 10px;
	padding-bottom: 10px;
}
.btn-signin {
	font-family: 'Open Sans', sans-serif;
}
footer {
	background-color: #f1f8f3;
	line-height: 1.3em !important;
	min-height: 50px;
}
.navbar {
	padding-top: 0px;
	padding-bottom: 0px;
}
ul.pagination {
	margin-top: 5px;
	margin-bottom: 1px;
}
ul.pagination .page-link .material-icons-outlined, ul.pagination .page-link .material-icons {
	font-size: 0.8em;
}
button .material-icons-outlined, button .material-icons {
	font-size: 1.2em;
	padding-right: 1px;
	padding-bottom: 3px;
	vertical-align: middle;
}
.course-banner {
	background-repeat: no-repeat;
   /* Do not repeat the image */
	background-size: cover;
	min-height: 400px;
   /* Resize the background image to cover the entire container */
	color: white;
	font-size: 2em;
	font-weight: 400;
	text-shadow: 0px 1px 1px #04773d;
	font-family: "IBM Plex Sans Thai", sans-serif;
}
.course-banner img {
	height: 80%;
}
.course-banner .detail {
	font-size: 0.7em;
}
.course-banner .detail pre {
	font-family: "IBM Plex Sans Thai", sans-serif !important;
	overflow: inherit !important;
}
.course-banner .detail small, .course-banner .detail .small {
	color: #e4fcdf;
	font-size: 0.7em;
	text-shadow: none;
}
.course-banner .detail a {
	color: #e4fcdf;
}
.course-banner .detail a:hover {
	color: white !important;
}
.table {
	background-color: white;
}
.table th {
	margin-top: 5px;
	background-color: #efefef 65;
	font-family: 'IBM Plex Sans Thai', sans-serif !important;
	font-size: 0.8em;
	padding-top: 8px;
	padding-bottom: 8px;
	border-top: 1px lightgray solid !important;
	border-bottom: 1px #aaa solid !important;
}
.table-hover > tbody > tr:hover {
	--bs-table-accent-bg: #effaef !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
	--bs-table-accent-bg: #f7f7f7;
}

img {
	image-rendering: auto;
  	image-rendering: pixelated;

	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}



@media (max-width: 992px) {
	
	.nav-item {
		border-top: 1px solid #d7e2d7;

		padding: 10px;
   }

}
@media (max-width: 768px) {
	.course-banner {
		font-size: 1.7em;
   }
	.course-banner .detail pre {
		font-size: 1em !important;
   }
}
.nav-tabs {
	padding-top: 20px;
}
.nav-tabs .nav-link {
	font-family: 'IBM Plex Sans Thai', sans-serif;
}
.banner-font {
	color: #04a52c;
	font-family: 'Righteous', cursive;
}
.banner-font .f1 {
	color: #04a52c;
}
.banner-font-color {
	color: #04a52c !important;
}
.title-font {
	font-family: 'IBM Plex Sans Thai', sans-serif;
}
.content-font {
	font-family: 'Bai Jamjuree', sans-serif;
}
.form-control:focus {
	box-shadow: 0 0 0 0.1rem #000;
}
.form-control:invalid {
	background-color: #fff5f5 !important;
	border-color: #ffa2a2 !important;
}
.text-shadow {
	text-shadow: 0px 1px 1px #d6d8d7;
}
.form-floating label {
	font-size: 0.875rem;
}
.form-floating input {
	font-size: 0.875rem;
}
.form-floating .form-control, .form-floating .form-select {
	height: auto !important;
}
.form-floating .form-control:disabled, .form-floating .form-control[readonly] {
	background-color: white;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid;
	border-radius: 0px;
	border-color: #efefef;
	padding-left: 0rem;
	opacity: 1;
}
.form-floating .form-control:not(:placeholder-shown) {
	padding-bottom: 0.2rem;
}
.form-group {
	margin-bottom: 0.5em;
}
.form-group label {
	font-size: 0.85em;
	color: gray;
	margin-bottom: 0px;
	font-family: 'IBM Plex Sans Thai', sans-serif;
}
.form-group .form-control:disabled, .form-group .form-control[readonly] {
	background-color: white;
	color: #333;
	font-weight: 400;
	border: none;
	border-bottom: 1px #f0f0f0 solid;
	border-radius: 0px;
	padding-left: 0px;
	padding-bottom: 1px;
}
.form-group input:disabled::-webkit-input-placeholder {
   /* WebKit browsers */
	color: #fff !important;
}
.form-group input:disabled:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
	color: #fff !important;
}
.form-group input:disabled::-moz-placeholder {
   /* Mozilla Firefox 19+ */
	color: #fff !important;
}
.form-group input:disabled:-ms-input-placeholder {
   /* Internet Explorer 10+ */
	color: #fff !important;
}
.form-group ::-webkit-input-placeholder {
	font-family: 'IBM Plex Sans Thai', sans-serif;
	font-weight: 300;
	color: #c2c0c0 !important;
}
.form-group :-moz-placeholder {
	font-family: 'IBM Plex Sans Thai', sans-serif;
	font-weight: 300;
	color: #c2c0c0 !important;
}
.form-group ::-moz-placeholder {
	font-family: 'IBM Plex Sans Thai', sans-serif;
	font-weight: 300;
	color: #c2c0c0 !important;
}
.form-group :-ms-input-placeholder {
	font-family: 'IBM Plex Sans Thai', sans-serif;
	font-weight: 300;
	color: #c2c0c0 !important;
}
input[type="text"] {
	font-family: 'Bai Jamjuree', sans-serif;
}
.btn {
	font-family: 'IBM Plex Sans Thai', sans-serif;
	margin-right: 2px;
}


h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	font-family: 'IBM Plex Sans Thai', sans-serif;
}

h2, .h2 {
	font-size: 1.9em;
}

h3, .h3 {
	font-size: 1.5em;
}

h4, .h4 {
	font-size: 1.3em;
}

h5, .h5 {
	font-size: 1.1em;
}


.shadow-sm {
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !important;
}
.page-title, .page-title-small {
	font-family: 'IBM Plex Sans Thai', sans-serif !important;
	font-size: 1.8em;
	margin-bottom: 0.5rem !important;
}
.page-title small, .page-title-small small, .page-title .small, .page-title-small .small {
	font-size: 0.5em;
	font-weight: 300;
}
.page-title-small {
	font-size: 20px;
}
timepicker .form-control {
	font-size: 0.8em !important;
	padding: 0.25rem 0.5rem !important;
}
.form-select[disabled], .form-select:disabled {
	background-color: white;
	background-image: none;
	color: #333;
	font-weight: 400;
	border: none;
	border-bottom: 1px gray dotted;
	border-radius: 0px;
	padding-left: 0px;
	padding-bottom: 1px;
}
pre {
	font-family: 'Bai Jamjuree', sans-serif !important;
	font-size: 1em;
	margin-bottom: 0;
	white-space: pre-wrap;
   /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;
   /* Mozilla, since 1999 */
	white-space: -pre-wrap;
   /* Opera 4-6 */
	white-space: -o-pre-wrap;
   /* Opera 7 */
	word-wrap: break-word;
   /* Internet Explorer 5.5+ */
}
a.disabled {
	color: gray;
	cursor: not-allowed;
	text-decoration: underline;
}
.tooltip-inner {
	background-color: #313131;
	border: 1px solid lightgray;
	letter-spacing: 0.1em;
	color: white;
	font-family: 'IBM Plex Sans Thai', sans-serif;
	text-align: left;
	font-weight: 300;
	font-size: 12px;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 300px;
}
.tooltip.top .tooltip-arrow:before, .tooltip.top .tooltip-arrow, .tooltip.bottom .tooltip-arrow:before, .tooltip.bottom .tooltip-arrow {
	border-top-color: lightgray;
	border-bottom-color: lightgray;
}
.animate {
	animation-duration: 0.3s;
	-webkit-animation-duration: 0.3s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}
@keyframes slideIn {
	0% {
		transform: translateY(1rem);
		opacity: 0;
   }
	100% {
		transform: translateY(0rem);
		opacity: 1;
   }
	0% {
		transform: translateY(1rem);
		opacity: 0;
   }
}
@-webkit-keyframes slideIn {
	0% {
		-webkit-transform: transform;
		-webkit-opacity: 0;
   }
	100% {
		-webkit-transform: translateY(0);
		-webkit-opacity: 1;
   }
	0% {
		-webkit-transform: translateY(1rem);
		-webkit-opacity: 0;
   }
}
.slideIn {
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}
@media print {
	body, html {
		visibility: hidden;
		margin: 0px !important;
		padding: 0px !important;
   }
	#print-area {
		visibility: visible;
		margin: 0px !important;
		padding: 0px !important;
   }
	.row {
		margin: 0px !important;
		padding: 0px !important;
		--bs-gutter-x: 0px;
		--bs-gutter-y: 0px;
   }
	.main-body {
		margin: 0px !important;
		padding: 0px !important;
		min-height: 800px;
		max-height: 810px;
   }
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		margin: 0px !important;
		padding: 0px !important;
   }
	.page {
		margin: 0px !important;
		padding: 0px !important;
	   /* border: initial;
		*/
	   /* border-radius: initial;
		*/
	   /* width: initial;
		*/
	   /* box-shadow: initial;
		*/
	   /* background: initial;
		*/
		page-break-after: always;
   }
}





.appcover {
	/* background: url(assets/cover.png); */
	background: url(assets/bg1.png);
	background-position: top;
	background-size: cover;
	color: white;
	min-height: 550px;
	text-shadow: 1px 1px 15px #0a6600;
}
.appcover .banner-1 {
	font-size: 3em;
	font-weight: 500 !important;
}
.appcover .banner-2 {
	font-size: 1.8em;
	font-weight: 400 !important;
}
.appcover .banner-3 {
	font-size: 1.4em;
	font-weight: 400 !important;
}
@media (max-width: 768px) {
	.appcover .banner-1 {
		font-size: 2.7em;
   }
	.appcover .banner-2 {
		font-size: 1.5em;
   }
	.appcover .banner-3 {
		font-size: 1.2em;
   }
}
@media (max-width: 576px) {
	.appcover .banner-1 {
		padding-top: 1.5em;
		font-size: 2.1em;
   }
	.appcover .banner-2 {
		font-size: 1.3em;
   }
	.appcover .banner-3 {
		font-size: 1em;
   }
}
@media (max-width: 420px) {
	.appcover .banner-1 {
		padding-top: 1.5em;
		font-size: 1.8em;
   }
	.appcover .banner-2 {
		font-size: 1.3em;
   }
	.appcover .banner-3 {
		font-size: 1em;
   }
}
.home-content {
	min-height: calc(100vh - 190px) !important;
	background-color: white;
}
.title-logo {
	height: 35px;

	@media (max-width: 576px) {
		height: 25px;
	}
}