@import url("fonts.css?v=1.1");
@import url("fontawesome-all.css");
@import url("jquery-ui-1.12.1.css");
/*@import url("jquery-ui-1.11.4.ed.css");
@import url("jquery-ui-1.11.4.ed.structure.css");
@import url("jquery-ui-1.11.4.ed.theme.css"); */
@import url("bootstrap.css");
@import url("datepicker.css");
@import url("datatables.css");
/*@import url("timeline_small.css");*/
@import url("jstree_style.css");
@import url("cropper.min.css");
@import url("perfect-scrollbar.css");
@import url("theme_style.css?v=1.1");
@import url("zingchart.css?v=1.1");
/*@import url("animate.min.css");
@import url("morris.css");
@import url("waves.min.css");*/

/*@import url("metisMenu.min.css");
@import url("morris.css"); */
/*:root {
	--banner: #d0d8de;
	--req: #337ab7;
	--follow: #f0ad4e;
	--report: #5cb85c;
	--basic: #d94fa6;
	--mis: #9b17b1;
	--history: #868e96;
}*/

* {
	font-family: 'CS ChatThaiUI';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	/* font-size:14px; */
	/* font-size:11pt; */
	font-size: 0.965rem;
}

body {
	line-height: 1.5rem;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Noto Sans Thai UI';
}

label {
	font-size: 100%;
	color: #0f8492;
}

/*.modal-header-sm,*/
.modal-footer-sm {
	padding-top: 8px;
	/* padding-bottom:8px;  */
}

.model-header-error {
	color: #fff;
	/* background-color: #d9534f; */
	background-color: var(--danger);
}

.model-header-alert {
	color: #fff;
	/* background-color:#f0ad4e; */
	background-color: var(--warning);
}

.model-header-info {
	color: #fff;
	/* background-color:#337ab7;  */
	background-color: var(--info);
}

.model-header-currect {
	color: #fff;
	/* background-color:#5cb85c;  */
	background-color: var(--success);
}

.model-header-filter {
	color: #fff;
	/* background-color:#5cb85c;  */
	background-color: var(--purple);
}

.cursor-pointer {
	cursor: pointer;
}

.model-header-confirm {
	color: #fff;
	/* background-color: #6f42c1;  */
	background-color: var(--purple);
}

.model-header-error .close,
.model-header-alert .close,
.model-header-info .close,
.model-header-currect .close {
	opacity: .2;
}

.col-deep-orange .navbar .navbar-brand,
.col-deep-orange .navbar .navbar-brand:hover,
.col-deep-orange .navbar .navbar-brand:active,
.col-deep-orange .navbar .navbar-brand:focus {
	color: #fff;
}

.col-deep-orange .navbar .nav>li>a:hover,
.col-deep-orange .navbar .nav>li>a:focus,
.col-deep-orange .navbar .nav .open>a,
.col-deep-orange .navbar .nav .open>a:hover,
.col-deep-orange .navbar .nav .open>a:focus {
	background-color: rgba(0, 0, 0, 0.05);
}

.col-deep-orange .navbar .nav>li>a {
	color: #fff;
}

.col-deep-orange .navbar .bars {
	float: left;
	padding: 10px 20px;
	font-size: 22px;
	color: #fff;
	margin-right: 10px;
	margin-left: -10px;
	margin-top: 4px;
}

.col-deep-orange .navbar .bars:hover {
	background-color: rgba(0, 0, 0, 0.08);
}

.col-brown .navbar .navbar-brand,
.col-brown .navbar .navbar-brand:hover,
.col-brown .navbar .navbar-brand:active,
.col-brown .navbar .navbar-brand:focus {
	color: #fff;
}

.col-brown .navbar .nav>li>a:hover,
.col-brown .navbar .nav>li>a:focus,
.col-brown .navbar .nav .open>a,
.col-brown .navbar .nav .open>a:hover,
.col-brown .navbar .nav .open>a:focus {
	background-color: rgba(0, 0, 0, 0.05);
}

.col-brown .navbar .nav>li>a {
	color: #fff;
}

.col-brown .navbar .bars {
	float: left;
	padding: 10px 20px;
	font-size: 22px;
	color: #fff;
	margin-right: 10px;
	margin-left: -10px;
	margin-top: 4px;
}

.col-brown .navbar .bars:hover {
	background-color: rgba(0, 0, 0, 0.08);
}

.bg-deep-orange {
	background-color: #FF5722 !important;
}

.bg-brown {
	background-color: #795548 !important;
}


.bg-blue-grey {
	background-color: #607D8B !important;
}

.remark {
	color: #b9b9b9 !important;
	font-size: 0.75rem;
	font-style: italic;
}

.bg-light-green {
	background-color: #8BC34A !important;
}


.bg-lime {
	background-color: #CDDC39 !important;
}
.bg-deep-green {
	background-color: #187e1d !important;
}

.table-step {
	border-spacing: 0;
	border-collapse: collapse;
	font-family: 'Noto Sans Thai UI';
	font-size: 10pt;
}

.table-step img {
	height: 18px;
}

.table-step td,
.table-step td img {
	padding: 0px;
	margin: -1px;
}

.table-step {
	border-spacing: 0;
	border-collapse: collapse;
	font-family: 'Noto Sans Thai UI';
	font-size: 10pt;
}

.table-step img {
	height: 18px;
}

.table-step td,
.table-step td img {
	padding: 0px;
	margin: -1px;
}

/* .div-main-menu {
	max-height: 500px;
	height: 100%;
} */

.div-main-manual {
	height: 100%;
	max-height: 500px;
}


.div-display-file-name {
	color: #73818f;
}

.col-form-label {
	padding-left: 0px;
}

@media (min-width: 768px) {
	.col-form-label {
		text-align: right;
	}
}

label.request:after {
	font-family: 'Font Awesome 5 Free';
	content: "\f069";
	font-weight: 900;
	color: var(--red);
	font-size: 8px;
	position: absolute;
	top: 2px;
	right: 4px;
	padding-top: calc(0.375rem + 1px);
	padding-bottom: calc(0.375rem + 1px);
	margin-bottom: 0;
	/* font-size: inherit; */
	line-height: 1.5;
}

.div-title {
	border-bottom: 1px solid #ececec;
	padding-bottom: 8px !important;
	margin-bottom: 1rem;
	margin-top: .75rem;
	color: #115f83;
}

.div-title button.btn {
	margin-top: -4px;
}

.big {
	font-size: 150%;
}

/* .color-indigo{
	color:#3F51B5;
} */

.color-pink {
	color: var(--pink) !important;
}

.bg-pink {
	background-color: var(--pink);
}

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

.bg-blue {
	background-color: var(--blue);
}

.color-indigo {
	color: var(--indigo) !important;
}

.bg-indigo {
	background-color: var(--indigo);
}

.color-purple {
	color: var(--purple) !important;
}

.bg-purple {
	background-color: var(--purple);
}

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

.color-deep-red {
	color: #e21515 !important;
}

.color-label {
	color: #0f8492 !important;
}

.bg-orange {
	background-color: var(--orange);
}

.color-deep-orange {
	color: #FF5722 !important;
}

.bg-deep-orange {
	background-color: #FF5722;
}

.bg-gold {
	background-color: #ffbb22
}

.color-yellow {
	color: var(--yellow) !important;
}

.bg-yellow {
	background-color: var(--yellow);
}

fieldset.fieldset-sub {
	border-top: 1px dashed #c8ced3 !important;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	/* padding-right: 0.6rem; */
	padding-bottom: 0.6rem;
	margin-top: 0.6rem;
}

fieldset.fieldset-sub legend {
	font-size: 100%;
	/* font-size: 0.95rem; */
	display: inline-block;
	width: auto;
	margin-left: 1.5rem;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
	/* color: #076A78; */
	/* font-weight: bold; */
}

.ui-autocomplete {
	z-index: 2147483647;
	max-height: 300px;
	max-width: 800px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	/* overflow-x: auto; */
	/* add padding to account for vertical scrollbar */
	padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.ul-attachment {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.ul-attachment li {
	border-top: 1px solid rgb(230, 229, 229);
	padding-left: 9px;
	position: relative;
}

.ul-attachment li:first-child {
	border-top: none;
}

.ul-attachment li::before {
	content: "• ";
	color: #adb6ba;
	font-size: 18px;
	position: absolute;
	top: 0px;
	left: 7px;
}

.sim-img {
	height: 35px;
	margin-top: 2px;
	margin-left: 4px;
}

.ul-address-list {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.ul-address-list li {
	padding-left: 5px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
}

.ul-address-list li:last-child {
	padding-left: 5px;
	border-bottom: none;
	margin-bottom: 0px;
}

.table-sub thead tr th {
	background-color: #607D8B;
	border: 1px solid #a4b2b8;
	text-align: center;
	color: #fff;
	vertical-align: middle;
}

.table-sub tfoot tr {
	background-color: #5a778524;
	border: 1px solid #a4b2b8;
	vertical-align: middle;
}

ol.num {
	counter-reset: item;
	padding-left: 12px;
}

ol.num li {
	display: block;
	text-indent: -11px;
	line-height: initial;
	margin-top: 8px;
}

ol.num li:before {
	content: counters(item, ".") " ";
	counter-increment: item
}

.label-prefix-other {
	margin-bottom: 0px;
}

.btn-img {
	width: 24px;
}

.msgbox {
	z-index: 1060;
}

.msgbox-backdrop {
	z-index: 1055;
}

.df-inline-block {
	/*ใช้แทน d-inline-block เพราะ มันซ่อนไม่ได้*/
	display: inline-block;
}

.df-inline {
	/*ใช้แทน d-inline เพราะ มันซ่อนไม่ได้*/
	display: inline;
}

@media only screen and (max-width: 1024px) {
	html {
		font-size: 10pt;
	}

	.col-1,
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6,
	.col-7,
	.col-8,
	.col-9,
	.col-10,
	.col-11,
	.col-12,
	.col,
	.col-auto,
	.col-sm-1,
	.col-sm-2,
	.col-sm-3,
	.col-sm-4,
	.col-sm-5,
	.col-sm-6,
	.col-sm-7,
	.col-sm-8,
	.col-sm-9,
	.col-sm-10,
	.col-sm-11,
	.col-sm-12,
	.col-sm,
	.col-sm-auto,
	.col-md-1,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-md-10,
	.col-md-11,
	.col-md-12,
	.col-md,
	.col-md-auto,
	.col-lg-1,
	.col-lg-2,
	.col-lg-3,
	.col-lg-4,
	.col-lg-5,
	.col-lg-6,
	.col-lg-7,
	.col-lg-8,
	.col-lg-9,
	.col-lg-10,
	.col-lg-11,
	.col-lg-12,
	.col-lg,
	.col-lg-auto,
	.col-xl-1,
	.col-xl-2,
	.col-xl-3,
	.col-xl-4,
	.col-xl-5,
	.col-xl-6,
	.col-xl-7,
	.col-xl-8,
	.col-xl-9,
	.col-xl-10,
	.col-xl-11,
	.col-xl-12,
	.col-xl,
	.col-xl-auto {
		padding-right: 8px;
		padding-left: 4px;
	}

	.tab-content .tab-pane {
		padding: 0.5rem;
	}

	label.request:after {
		/* font-size: 4px;
		top: 4px;
		right: 1px; */
		font-size: 6px;
		top: 4px;
		left: unset;
		right: unset;
		padding-left: 3px;
	}
}

.table-green thead th {
	border-bottom: 1px solid #2f8e50;
	border-top: none;
	color: #138b47;
}

.table-green tfoot td.td-sum {
	border-top: 1px solid #2f8e50;
	font-size: 110%;
	font-weight: bold;
}

.c-vr {
	width: 1px;
	background-color: rgba(0, 0, 21, .2);
}


@media (min-width: 576px) {
	.border-sm-top {
		border-top: 1px solid #e3e7eb !important;
	}

	.border-sm-right {
		border-right: 1px solid #e3e7eb !important;
	}

	.border-sm-bottom {
		border-bottom: 1px solid #e3e7eb !important;
	}

	.border-sm-left {
		border-left: 1px solid #e3e7eb !important;
	}

	.border-sm-top-0 {
		border-top: 0 !important;
	}

	.border-sm-right-0 {
		border-right: 0 !important;
	}

	.border-sm-bottom-0 {
		border-bottom: 0 !important;
	}

	.border-sm-left-0 {
		border-left: 0 !important;
	}

	.border-sm-x {
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}

	.border-sm-y {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
	}

	.border-sm {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}

	.border-sm-0 {
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
	}
}

@media (min-width: 768px) {
	.border-md-top {
		border-top: 1px solid #e3e7eb !important;
	}

	.border-md-right {
		border-right: 1px solid #e3e7eb !important;
	}

	.border-md-bottom {
		border-bottom: 1px solid #e3e7eb !important;
	}

	.border-md-left {
		border-left: 1px solid #e3e7eb !important;
	}

	.border-md-top-0 {
		border-top: 0 !important;
	}

	.border-md-right-0 {
		border-right: 0 !important;
	}

	.border-md-bottom-0 {
		border-bottom: 0 !important;
	}

	.border-md-left-0 {
		border-left: 0 !important;
	}

	.border-md-x {
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}

	.border-md-y {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
	}

	.border-md {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}

	.border-md-0 {
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
	}
}

@media (min-width: 992px) {
	.border-lg-top {
		border-top: 1px solid #e3e7eb !important;
	}

	.border-lg-right {
		border-right: 1px solid #e3e7eb !important;
	}

	.border-lg-bottom {
		border-bottom: 1px solid #e3e7eb !important;
	}

	.border-lg-left {
		border-left: 1px solid #e3e7eb !important;
	}

	.border-lg-top-0 {
		border-top: 0 !important;
	}

	.border-lg-right-0 {
		border-right: 0 !important;
	}

	.border-lg-bottom-0 {
		border-bottom: 0 !important;
	}

	.border-lg-left-0 {
		border-left: 0 !important;
	}

	.border-lg-x {
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}

	.border-lg-y {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
	}

	.border-lg {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}

	.border-lg-0 {
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
	}
}

@media (min-width: 1200px) {
	.border-xl-top {
		border-top: 1px solid #e3e7eb !important;
	}

	.border-xl-right {
		border-right: 1px solid #e3e7eb !important;
	}

	.border-xl-bottom {
		border-bottom: 1px solid #e3e7eb !important;
	}

	.border-xl-left {
		border-left: 1px solid #e3e7eb !important;
	}

	.border-xl-top-0 {
		border-top: 0 !important;
	}

	.border-xl-right-0 {
		border-right: 0 !important;
	}

	.border-xl-bottom-0 {
		border-bottom: 0 !important;
	}

	.border-xl-left-0 {
		border-left: 0 !important;
	}

	.border-xl-x {
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}

	.border-xl-y {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
	}

	.border-xl {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}

	.border-xl-0 {
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
	}
}

	/*** load animation ***/
	.page-loader-wrapper-form-load {
		z-index: 99999999;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: transparent;
		overflow: hidden;
		text-align: center;
	}
	
	.page-loader-wrapper-form-load .loader {
		position: relative;
		/* top: calc(50% - 45px); */
		top: calc(50% - 120px);
	}	
	.lds-roller {
		display: inline-block;
		position: relative;
		width: 80px;
		height: 80px;
	  }
	  .lds-roller div {
		animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		transform-origin: 40px 40px;
	  }
	  .lds-roller div:after {
		content: " ";
		display: block;
		position: absolute;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #b7b9bb ;
		margin: -4px 0 0 -4px;
	  }
	  .lds-roller div:nth-child(1) {
		animation-delay: -0.036s;
	  }
	  .lds-roller div:nth-child(1):after {
		top: 63px;
		left: 63px;
	  }
	  .lds-roller div:nth-child(2) {
		animation-delay: -0.072s;
	  }
	  .lds-roller div:nth-child(2):after {
		top: 68px;
		left: 56px;
	  }
	  .lds-roller div:nth-child(3) {
		animation-delay: -0.108s;
	  }
	  .lds-roller div:nth-child(3):after {
		top: 71px;
		left: 48px;
	  }
	  .lds-roller div:nth-child(4) {
		animation-delay: -0.144s;
	  }
	  .lds-roller div:nth-child(4):after {
		top: 72px;
		left: 40px;
	  }
	  .lds-roller div:nth-child(5) {
		animation-delay: -0.18s;
	  }
	  .lds-roller div:nth-child(5):after {
		top: 71px;
		left: 32px;
	  }
	  .lds-roller div:nth-child(6) {
		animation-delay: -0.216s;
	  }
	  .lds-roller div:nth-child(6):after {
		top: 68px;
		left: 24px;
	  }
	  .lds-roller div:nth-child(7) {
		animation-delay: -0.252s;
	  }
	  .lds-roller div:nth-child(7):after {
		top: 63px;
		left: 17px;
	  }
	  .lds-roller div:nth-child(8) {
		animation-delay: -0.288s;
	  }
	  .lds-roller div:nth-child(8):after {
		top: 56px;
		left: 12px;
	  }
	  @keyframes lds-roller {
		0% {
		  transform: rotate(0deg);
		}
		100% {
		  transform: rotate(360deg);
		}
	  }
	/*** end load animation ***/