@charset "utf-8";
/* CSS Document */
@import
	'https://fonts.googleapis.com/css?family=Kanit:400,300&subset=thai,latin'
	;

@font-face {
	font-family: 'Kanit', sans-serif;
	src:
		url('https://fonts.googleapis.com/css?family=Kanit:400,300&subset=thai,latin');
}

@font-face {
	font-family: 'TH Sarabun New';
	src: url('../resources/css/font/THSarabun.ttf')
}

/*คอนนี้มีใช้แค่ที่ layoutDialog เพราะหน้านั้นไม่ได้ใส่ body เฃยต้องเขียนตัวนี้มาใช้แทน*/
.fontClass {
	/*
	font-family: TH Sarabun New, serif, sans-serif;
	font-size: 1.4em;
	*/
	font-family: Arial,Helvetica,sans-serif;
}
/*ควบคุม font ของ layout ทั้งหมด*/
.body {
	/*
	width:1240px;
	font-family: TH Sarabun New, serif, sans-serif;
	*/
	font-family: Arial,Helvetica,sans-serif;
	width: auto;
	height: 100%;
	background: #fffff5;
	margin: auto;
	overflow: scroll;
}

.bodyPopup {
	width: auto;
	background: #fffff5;
	margin: auto;
	border: thin;
	border-style: solid;
	border-color: #000000;
}

table {
	margin: auto;
	border-collapse: collapse;
}

td, th {
	padding: 0;
}

a {
	cursor: pointer;
	text-decoration: underline;
}

table.tableAction {
	margin: auto;
	width: 98%;
	border: none;
	border-collapse: collapse;
}

#header {
	margin: auto;
	width: 1260px;
	height: 120px;
}

.sysName {
	color: #000000;
	font-weight: bold;
	font-size: 4em;
	position: relative;
	top: 0.2em;
}

.main {
	margin: auto;
	padding: 0;
	background-color: #FFFFFF;
}

.vSpace {
	height: 0.4em;
}

.bottomSpace {
	height: 1em;
}

.userInfo {
	padding-left: 0.6em;
	background-color: #999999;
	vertical-align: bottom;
}

.mainMenu {
	width: 400px;
	height: 200px;
	float: left;
}

#moduleName {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.6em;
	background-color: #73a69d;
	height: auto;
	padding-left: 0.6em;
	color: #232323;
}

#moduleNameKPI {
	font-family: TH Sarabun New;
	font-weight: bold;
	font-size: 2em;
	background-color: #a2baff;
	height: auto;
	padding-left: 0.6em;
	color: #4b4b4b;
}

#moduleNameCPI {
	font-family: TH Sarabun New;
	font-weight: bold;
	font-size: 2em;
	background-color: #bcf4bc;
	height: auto;
	padding-left: 0.6em;
	color: #4b4b4b;
}

#moduleName2 {
	font-family: TH Sarabun New;
	font-weight: bold;
	font-size: 1.5em;
	background-color: #ffd99b;
	height: auto;
	padding-left: 0.6em;
	color: #4b4b4b;
}

#moduleName3 {
	font-family: TH Sarabun New;
	font-weight: bold;
	background-color: #ffd99b;
	height: auto;
	padding-left: 0.6em;
	color: #4b4b4b;
}

#moduleName1 {
	background-color: #ffd99b;
	height: auto;
	padding-top: 0.4em;
	padding-left: 0.6em;
	padding-bottom: 0.4em;
	color: #4b4b4b;
	width: 1240px;
	height: 40px;
}

#pageMenu {
	background-color: #ffbd4d;
	height: auto;
	padding-top: 0.4em;
	padding-left: 0.6em;
	padding-bottom: 0.4em;
	color: yellow;
}

#subMenu {
	background-color: #fee8a5;
	height: auto;
	padding-top: 0.4em;
	padding-left: 0.6em;
	padding-bottom: 0.4em;
	color: #000000;
}

#stepMenu {
	background-color: #fcf09a;
	height: auto;
	padding-top: 0.4em;
	padding-left: 0.6em;
	padding-bottom: 0.4em;
	color: #000000;
}

#pageName {
	background-color: #fcf09a;
	height: auto;
	padding-top: 0.4em;
	padding-left: 0.6em;
	padding-bottom: 0.4em;
	color: #000000;
}

.topic {
	width: auto;
	padding-left: 0.6em;
	padding-top: 0.4em;
	margin: auto;
	font-weight: bold;
	font-size: 1em;
	color: #000000;
}

.topicFont {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	color: #363636;
}

.topichead {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	background-color: #84cbcb;
	height: 1.7em;
	padding-top: 1em;
	padding-left: 1em;
	padding-bottom: 1em;
	color: #363636;
}

.menuFont {
	font-weight: bold;
	font-size: 1em;
	color: #000000;
	font-size: 1.2em;
	height: 1.4em;
	text-decoration: underline;
}

.tabNoLink {
	font-weight: bold;
	font-size: 1em;
	color: #ffffff;
	font-size: 1.2em;
	height: 1.4em;
	text-decoration: none;
}

.tab {
	font-weight: bold;
	font-size: 1.2em;
	color: #ffffff;
	height: 1.4em;
	text-decoration: underline;
	cursor: pointer;
}

.tabCurrent {
	font-weight: bold;
	font-size: 1.2em;
	color: yellow;
	height: 1.4em;
}

.current {
	color: #CC6633;
	font-weight: bolder;
}

.currentLink {
	color: #CC6633;
	font-weight: bolder;
	text-decoration: underline;
	cursor: pointer;
}

.content {
	width: auto;
	margin: auto;
}

.labelLogin {
	font-size: 1.5em;
	font-weight: bold;
	color: #000000;
	text-align: right;
	width: 40%;
	vertical-align: top;
	height: 1.8em;
}

.dataLogin {
	vertical-align: top;
	font-size: 1.5em;
	font-weight: normal;
	color: #000000;
	text-align: left;
	width: 60%;
	padding-left: 0.4em;
	height: 1.8em;
}

.label {
	font-weight: bold;
	color: #000000;
	text-align: right;
	vertical-align: top;
	float: right;
	margin-right: -1em;
}

.labelV {
	font-weight: bold;
	color: #000000;
	text-align: right;
	float: right;
	vertical-align: middle;
}

.labelM {
	font-weight: bold;
	color: #000000;
	text-align: right;
	float: right;
	vertical-align: middle;
}

.data {
	font-size: 1em;
	color: #000000;
	text-align: left;
	padding-left: 0.4em;
	vertical-align: middle;
}

.labelBlank {
	font-size: 1em;
	font-weight: bold;
	color: #000000;
	text-align: right;
	vertical-align: top;
	height: 1.6em;
}

.dataBlank {
	text-align: left;
	padding-left: 0.4em;
	height: 1.6em;
}

input.text {
	font-weight: normal;
	color: #000000;
	text-align: left;
	font-size: 1em;
}

input.textDisable {
	font-weight: normal;
	color: #000000;
	text-align: left;
	font-size: 1em;
}

.text {
	font-weight: normal;
	color: #000000;
	text-align: left;
	font-size: 1em;
}

input.button_hand {
	font-size: 1em;
	text-align: center;
	cursor: pointer;
}

input.button_disable {
	font-weight: normal;
	color: #000000;
	font-size: 1em;
	text-align: center;
	background-color: #999999;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.hand {
	cursor: pointer;
}

.link {
	text-decoration: underline;
	cursor: pointer;
}

#notify {
	height: 1.8em;
	width: 1260px;
	margin: auto;
	padding-top: 0.2em;
	text-align: center;
	color: #F00;
	font-weight: bold;
}

#legend {
	width: 100%;
	padding-left: 0.6em;
	padding-top: 0.2em;
	padding-bottom: 0.1em;
	height: auto;
	font-size: 1em;
	margin: auto;
}

.legend {
	padding-left: 0.6em;
	font-weight: bold;
	font-size: 1em;
	color: #000000;
}

.required {
	color: #FF0000;
	font-weight: bold;
}

.remark {
	color: #9E4007;
	font-weight: normal;
	font-family: TH Sarabun New;
	vertical-align: bottom;
	margin-left: 0.2em;
}

.remark2 {
	color: #9E4007;
	font-weight: normal;
	font-family: TH Sarabun New;
	margin-left: 0.2em;
	font-size: 1.5em;
}

.notify {
	font-weight: normal;
	color: #FF0000;
	font-size: 1em;
	text-align: center;
	height: 1.8em;
}

.delete {
	text-align: left;
	padding-top: 0.2em;
}

.add {
	float: right;
	text-align: right;
	padding-top: 0.2em;
}

.nextAction {
	width: 98%;
	margin: auto;
	vertical-align: middle;
	text-align: center;
	padding-top: 0.2em;
	padding-bottom: 0.4em;
}

td.left_border {
	width: 1%;
	background-image: url(images/left_border.png);
	background-repeat: repeat-y;
}

td.right_border {
	width: 1%;
	background-image: url(images/right_border.png);
	background-repeat: repeat-y;
}

.searchArea {
	width: auto;
	margin: auto;
	alignment-adjust: middle;
}

.searchCondition {
	width: auto;
	margin: auto;
	padding-top: 0.6em;
}

table.conditionTable {
	width: 98%;
	border: none;
	padding: no;
}

#result {
	margin: auto;
	text-align: center;
}

.resultTable {
	width: 98%;
	margin: auto;
}

.result {
	font-weight: normal;
	color: #06662F;
	font-size: 1.2em;
	text-align: center;
	height: 1.8em;
}

.headRowFirst {
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	color: #000000;
	padding-top: 0.2em;
	background-color: #69C;
	border-left: #000000;
	border-left-style: solid;
	border-left-width: 2px;
	border-top: #000000;
	border-top-style: solid;
	border-top-width: 2px;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.headRow {
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	color: #000000;
	padding-top: 0.2em;
	background-color: #69C;
	border-top: #000000;
	border-top-style: solid;
	border-top-width: 2px;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.headRowLast {
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	color: #000000;
	padding-top: 0.2em;
	background-color: #69C;
	border-top: #000000;
	border-top-style: solid;
	border-top-width: 2px;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
}

.oddRowTR {
	background-color: #B8E7E7;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.evenRowTR {
	background-color: #F0FBFB;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.remarkRowTR {
	background-color: #FFB3B3;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	text-decoration: line-through;
}

.blankRowTR {
	background-color: #FFFFFF;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.notFoundRowTR {
	background-color: #FFFFFF;
	border-left: #000000;
	border-left-style: solid;
	border-left-width: 2px;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
	height: 1.8em;
}

.totalRowTR {
	background-color: #DDBB73;
	border-bottom: #000000;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.resultRowFirst {
	font-weight: normal;
	font-size: 1em;
	color: #000000;
	vertical-align: auto;
	border-left: #000000;
	border-left-style: solid;
	border-left-width: 2px;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
}

.resultRow {
	font-weight: normal;
	font-size: 1em;
	color: #000000;
	vertical-align: auto;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
	padding-left: 0.1em;
	padding-right: 0.1em;
}

.resultRowLast {
	font-weight: normal;
	font-size: 1em;
	color: #000000;
	vertical-align: auto;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
}

.resultRowLeft {
	font-weight: normal;
	font-size: 1em;
	color: #000000;
	vertical-align: auto;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
	padding-left: 0.1em;
	padding-right: 0.1em;
	text-align: left;
}

.resultRowRight {
	font-weight: normal;
	font-size: 1em;
	color: #000000;
	vertical-align: auto;
	border-right: #000000;
	border-right-style: solid;
	border-right-width: 2px;
	padding-left: 0.1em;
	padding-right: 0.1em;
	text-align: right;
}

.totalRecord {
	font-weight: normal;
	font-size: 1.1em;
	height: 1.6em;
	padding-right: 0.4em;
	color: #000000;
	text-align: right;
	color: #000000;
}

table.total {
	width: 98%;
	margin: auto;
}

.pageList {
	width: 60%;
	font-weight: normal;
	font-size: 1.1em;
	height: 1.6em;
	color: #000000;
	text-align: right;
}

.totalPage {
	width: 30%;
	position: relative;
	font-weight: normal;
	font-size: 1.1em;
	height: 1.6em;
	color: #000000;
	text-align: right;
	padding-right: 0.4em;
}

.search {
	text-align: center;
	padding-top: 0.5em;
}

.pageCode {
	margin: auto;
	font-weight: normal;
	font-size: 0.9rem;
	height: 0.9em;
	color: #000000;
	text-align: right;
	padding-bottom: 0.4em;
	padding-right: 0.2em;
	border: none;
}

#footer {
	margin: auto;
	position: relative;
	float: none;
	width: 100%;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	font-weight: bold;
	color: #165a90;
	font-size: 0.9rem;
	text-align: center;
	background-color: #94b8b8;
}

#contact {
	margin: auto;
	position: relative;
	float: none;
	width: 100%;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	font-weight: bold;
	color: #000000;
	font-size: 0.9em;
	text-align: center;
	background-color: #fffdb4;
}
/* .systemData (ใช้กับ span เท่านั้น) ใช้สำหรับข้อมูลที่เป็นความต้องการของระบบ อาจแสดงหรือไม่แสดงให้ user เห็นขึ้นอยู่กับ policy ของแต่ละระบบ */
.systemData {
	color: #999999;
}

#tableMenu {
	width: 1180px;
	height: 40px;
	vertical-align: bottom;
	position: relative;
	background-color: #FFFFFF;
}

#tableMenu .delMenu {
	width: 500px;
	position: relative;
	float: left;
	color: #000000;
	height: 40px;
	margin-left: -0.5em;
}

#tableMenu .addMenu {
	width: 680px;
	position: relative;
	background-color: #ffffff;
	float: right;
	text-align: right;
	color: #000000;
	height: 40px;
	margin-right: -2em;
}

.inputSearch {
	float: left;
	margin-bottom: 0.1em;
	margin-left: 0.4em;
}

.dataTableSearch {
	text-align: center;
	margin-bottom: 0.4em;
	margin-left: -1em;
	margin-right: -1em;
}

.disableStatus {
	background-color: #FFB3B3 !important;
	background-image: none !important;
	color: #000000 !important;
	text-decoration: line-through !important;
}

.inputNormal {
	margin-bottom: 0.2em;
	float: left;
}

.inputErrorValidate {
	margin-bottom: 0.2em;
	float: left;
	color: #2e6e9e;
	border-color: #cd0a0a;
}

.fCenter {
	display: block;
	text-align: center;
}

.textLabel {
	width: 500px;
	padding-right: 0.2em;
	vertical-align: top;
}

.title {
	font-weight: bold;
	font-size: 1em;
	border: 1px solid #036e81;
	background: #036e81;
	color: #fffff0;
	border: 1;
}

.title2 {
	font-weight: bold;
	font-size: 1em;
	border: 1px solid #81c4ff;
	background: #81c4ff;
	color: #000000;
	border: 1;
}

.textData {
	display: block;
	width: 700px;
}

.textLabel {
	text-align: left;
	width: 700px;
}

.gInput {
	float: left;
	font-size: 1em;
	margin-bottom: 0.1em;
	margin-left: 0.1em;
}

.gridSearch {
	border: none;
	width: 100%;
}

.gridSearch tr, .gridSearch td {
	border: none;
}

.colstyle {
	width: 30%;
}

.nortifyMessage {
	margin-left: 0.2em;
	color: #cd0a0a;
	background-color: #fef1ec;
}

.btnColor {
	background-color: red !important;
	background-image: none;
}

#divmainPage {
	width: 1200px;
	vertical-align: bottom;
	position: relative;
	background-color: #FFFFFF;
	height: 297px;
}

#divmainPage .panel1 {
	width: 600px;
	position: relative;
	float: left;
	color: #000000;
	margin-left: -0.5em;
	height: 297px;
}

#divmainPage .panel2 {
	width: 600px;
	position: relative;
	background-color: #ffffff;
	float: left;
	text-align: right;
	color: #000000;
	margin-right: -1em;
	height: 297px;
}

.headerGradient {
	width: 100%;
	margin: auto;
	padding: 0;
	background: #ffdb4d; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: rgba(194, 215, 215, 1);
	background: -moz-linear-gradient(left, rgba(194, 215, 215, 1) 0%,
		rgba(194, 215, 215, 1) 43%, rgba(194, 215, 215, 1) 87%,
		rgba(194, 215, 215, 1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(194, 215, 215,
		1)), color-stop(43%, rgba(194, 215, 215, 1)),
		color-stop(87%, rgba(194, 215, 215, 1)),
		color-stop(100%, rgba(194, 215, 215, 1)));
	background: -webkit-linear-gradient(left, rgba(194, 215, 215, 1) 0%,
		rgba(194, 215, 215, 1) 43%, rgba(194, 215, 215, 1) 87%,
		rgba(194, 215, 215, 1) 100%);
	background: -o-linear-gradient(left, rgba(194, 215, 215, 1) 0%,
		rgba(194, 215, 215, 1) 43%, rgba(194, 215, 215, 1) 87%,
		rgba(194, 215, 215, 1) 100%);
	background: -ms-linear-gradient(left, rgba(194, 215, 215, 1) 0%,
		rgba(194, 215, 215, 1) 43%, rgba(194, 215, 215, 1) 87%,
		rgba(194, 215, 215, 1) 100%);
	background: linear-gradient(to right, rgba(194, 215, 215, 1) 0%,
		rgba(194, 215, 215, 1) 43%, rgba(194, 215, 215, 1) 87%,
		rgba(194, 215, 215, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94b8b8',
		endColorstr='#C2D7D7', GradientType=1);
}