body {
	font-family: 'Sarabun', 'Helvetica Neue', Helvetica, Arial,
		sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Sarabun', sans-serif !important;
}

.required-label::after, .required-label-static::after {
	content: ' *';
	color: red;
}

span.pid-element:not(:last-child)::after {
	content: ' ';
}

textarea.form-control {
	line-height: 1.5rem;
}

.p-0, .table>tbody>tr>td.p-0 {
	padding: 0;
}

.p-1, .table>tbody>tr>td.p-1 {
	padding: 0.4rem;
}

.swal2-html-container {
	line-height: 2rem;
}

input[type='checkbox']:not(.form-control), input[type='radio']:not(.form-control)
	{
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 5px;
}

.app-title {
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: 1px;
}

.app-subtitle {
	margin-top: 8px;
	opacity: 0.9;
	font-size: 1rem;
	font-weight: 300;
}

.div-hover-bg:hover {
	background-color: #f5f5f5 !important; /* Light grey hover effect */
}

.bg-hc-R {
	background-color: #0162bc;
}

.text-hc-R {
	color: #0162bc;
}

.bg-hc-I {
	background-color: #158b49;
}

.text-hc-I {
	color: #158b49;
}

.bg-hc-A {
	background-color: #f27a07;
}

.text-hc-A {
	color: #f27a07;
}

.bg-hc-S {
	background-color: #7a3c98;
}

.text-hc-S {
	color: #7a3c98;
}

.bg-hc-E {
	background-color: #2ba2b2;
}

.text-hc-E {
	color: #2ba2b2;
}

.bg-hc-C {
	background-color: #f52847;
}

.text-hc-C {
	color: #f52847;
}

.bg-cluster-A {
	background-color: #ff4757;
	color: #ffffff;
}

.text-cluster-A {
	color: #ff4757;
}

.bg-cluster-B {
	background-color: #1e90ff;
	color: #ffffff;
}

.text-cluster-B {
	color: #1e90ff;
}

.bg-cluster-C {
	background-color: #2ed573;
	color: #ffffff;
}

.text-cluster-C {
	color: #2ed573;
}

.bg-cluster-D {
	background-color: #ffa502;
	color: #ffffff;
}

.text-cluster-D {
	color: #ffa502;
}

.bg-cluster-E {
	background-color: #9b59b6;
	color: #ffffff;
}

.text-cluster-E {
	color: #9b59b6;
}

@media print {
	body,html {
		font-size: 12pt; /* Recommended standard size for paper */
		background-color: #FFFFFF;
	}
	.content, p, th, td {
		font-size: 10pt !important;
	}
	.skip-links {
		display: none !important;
	}
	/* Hide the sidebar and navbar */
	.app-sidebar, .main-sidebar, .app-header, .main-header, .app-footer,
		.noprint {
		display: none !important;
	}

	/* Expand main content to full width */
	.app-main, .content-wrapper {
		margin-left: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}
	.col-print-1 { width: 8.33333333%; float: left; }
  .col-print-2 { width: 16.66666667%; float: left; }
  .col-print-3 { width: 25%; float: left; }
  .col-print-4 { width: 33.33333333%; float: left; }
  .col-print-5 { width: 41.66666667%; float: left; }
  .col-print-6 { width: 50%; float: left; }
  .col-print-7 { width: 58.33333333%; float: left; }
  .col-print-8 { width: 66.66666667%; float: left; }
  .col-print-9 { width: 75%; float: left; }
  .col-print-10 { width: 83.33333333%; float: left; }
  .col-print-11 { width: 91.66666667%; float: left; }
  .col-print-12 { width: 100%; float: left; }
  
  /* Ensure the row acts as a wrapper */
  .row { display: flex; flex-wrap: wrap; }
}

@page {
  size: A4 portrait; /* Options: A4, letter, legal, landscape, etc. */
  margin: 10mm; /* Sets the boundary for printable area */
}