@font-face {
font-family: 'Phetsarath_OT'; 
src: url('../fonts/phetsarath_ot.eot'); 
src: url('../fonts/phetsarath_ot.eot?#iefix') format('embedded-opentype'), 
url('../fonts/phetsarath_ot.woff2') format('woff2'), 
url('../fonts/phetsarath_ot.woff') format('woff'), 
url('../fonts/phetsarath_ot.ttf') format('truetype'),
url('../fonts/phetsarath_ot.svg#Phetsarath_OT') format('svg'); 
font-weight: normal;
font-style: normal; 
}

fieldset{
	padding: 0.1em 0.5em;
}

legend{
	
	padding: 0.5em;
	border-top-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	font-weight: bold;	
	
}
/* document information format by dethsada  */

.docinfo{
	
}

.docinfo table{
	margin-left: 5em;
}

.docinfo td{
	padding: 0.5em;
}
.tb_hover:hover{
	background-color: #8cf8ef;
	cursor: pointer;
}

.h1{
	
	color: #5E1616;
	font-size: 1.5em;
	padding-bottom: 0.5em;
	border-bottom: dotted thin #2D2A52;	
	margin-bottom: 0.5em;
}
.orgtr{
	background-color: #00D9FF;
	font-weight: bold;
}
.login_name{
	font-size: 1.1em;
	background-color: rgba(248, 248, 121, 0.37);
	padding: 0.3em;
}

.user_profile{
	margin-top: 2em;
	
}

.contentheader{
	font-size: 1.2em;
	border-bottom: dotted thin #0A246A;
	margin-bottom: 0.8em;
	margin-right: 0.3em;
	padding-top: 0.5em;
	padding-bottom: 0.3em;
	
}

.h4{
	padding-top: 10px;
	color:#0000FF;
	font-style: italic;
}
.none_bd{
	border: none;
}
	
.subtitle{
	font-size: 13pt;
}


/* --------------------------------------------- ICON ---------------------------------- */
.button {
	font-size: 0.9em;
	font-style: italic;
	background-color: #66F506;
	border: dotted thin;
	cursor: pointer;
	padding: 0.3em 0.4em;
	margin: 0.5em 0.4em;
	position: relative;
	text-decoration: none;
	border-radius: 0.3em;
}
.imagebutton{
	width: 25px;
	height: 25px;
}
.button1{
	padding: 0.5em 1.2em;
	margin-left: 0.5em
}
.deletebutton {
	position: relative;
	background-color: #41FA06;
	border: dotted thin;
	border-radius: 0.5em;
	padding: 0 0.7em;
	text-decoration: none;
}
.delete{
	cursor: pointer;
}
.erroricon{
	background-image: url('../img/iconErrorSmall.gif');
	width: 17px;
	height: 17px;
	position: absolute;
	right: 0;
}

/*---------------------------------------------- v_user form ------------------------------------ */
h3{
	color: #0EABC9;
	/*	
	margin: 0.8em auto;
	padding-bottom: 0.3em;
	*/
}

img{
	border: 0;
}

table{
	border-collapse: collapse;
}

.adjust{
	width: 2.5em;
}

.empty{
	width: 2em
}
.require{
	color: red;
	font-style: italic;
	font-weight: bold;
	margin-left: 0.5em;
}

.error{
	margin-left: 0.1em;
	color: red;
}
/*---------------------------------------------- Province Div ---------------------------------- */
.sumaried {
	margin-bottom: 1.5em;		
}
.sumaried ul a{
	margin: 1.2em auto;
}
.probox {
	display: inline-block;
}
.probox li{
	font-size: .8em;
	width:7.5em;
	height: 9.5em;
	float: left;
	border: solid 0.12em #30404A;
	list-style-type: none;
	margin: 0.5em;
	padding: 0.8em;
	border-radius: 1.2em;
	box-shadow: 0 0 0.8em #E2E2CF;
}
.probox img{
	width: 5em;
	height: 6em;
}
.probox a{
	text-decoration: none;
}
.probox li:hover{
	background-color: #2EF5F5;
}
.proname {
	color: #0000FF;
	font-weight: bold;
	margin-top: 0.5em;	
	word-wrap: break-word;
}
/*---------------------------------------------- INDEX PAGE ------------------------------------ */
.indexpage{
	margin-bottom: 5em;
	margin-top: 2em;
	
}
.indexpage ul a{
	margin: 2em auto;
}
.centered{
	text-align: center;
}
.errormessage{
	color: red;
	font-size: 0.8em;
	font-style: italic;
	font-weight: bold;
}
.messagebox{
	border: solid thin red;
	margin-top: 1.5em;
	padding: 1.2em;
}
.hidden{
	display: none;
}

.left{
	float: left;	
}

.right{
	float: right;
}
.header {
	font-size: 18pt;
	width: 100%;	
	border-bottom: dotted thin #0000FF;
	padding: 0.2em;
}
/*----------------------------------------- MASTER DATA BOX -----------------------------------------*/
.master{
	margin: 2em auto;
	position: relative;
	height: 10em;
}

/* ---------------------------------------- TITLE PAGE -------------------------------------------- */
.topic{
	position: absolute;
	margin-left: 1.2em;
}
.noticenames{
	position: absolute;
	font-size: 10pt;
	font-weight:bold;
	width:8.6em;
	padding: 0.9em 0.1em;
	word-wrap: break-word;
	background-color: rgba(0,0,0, 0.4);
	color: #F0F7F0;
}
.titlenames{	
	position: absolute;
	margin: 0.5em auto;
	font-size: 0.86em;	
	width: 8.8em;				
	word-wrap: break-word;	
}
.titles {
	display: inline-block;
	/*-------- try to fixed this for other browser by kongxiong
	width: 40%;
	*/
}
.titles li{	
	overflow: hidden;
	width: 7.5em;
	height: 8em;
	float: left;	
	/*border: solid 1px #4830F7;*/
	list-style-type: none;
	margin:0.3em 0.4em;	
	/*box-shadow: 0 0 0.5em #E2E2CF;*/
	border-radius: 0.2em;
	/*--- fixed the sized min --- by kongxiong */
	margin-top: 10px;
	
}
.titles img{
	
	width: 100%;	
	height: 100%;
}

.titles a{
	text-decoration: none;
	/* padding: 0.2em; */
}
.titles li:hover{
	background-color: #2EF5F5;
	opacity: 0.5;
	border-radius: 3em;
}
.titles label{
	position: absolute;
	padding: 0.5em;	
	border-bottom-right-radius: 0.9em;
	border-top-right-radius: 0.5em;
	background-color: #0A246A;
	color: #F1F103;
	font-weight: bold;
	cursor: pointer;
	border-top-left-radius: 0.5em;
}
.addrowbutton {
	margin-top: 0.3em;
	margin-bottom: 1.5em;
}
.addrowbutton input[type="submit"], .addrowbutton input[type="button"]{
	padding: 0.2em 0.5em;
	color: #FF0000;		
	border: dotted thin;
	cursor: pointer;
}
.submitbox {	
	margin-top: .5em;
	padding: 0.3em 0.2em;
	display: inline-block;	
	background-color: #E6E2AF;
	width: 100%;		
}
.submitbox input[type="submit"], .submitbox input[type="reset"], .submitbox input[type="button"], .submitbox button[type="button"] {
	padding: .3em 1.5em;
	font-weight: bold;
	cursor: pointer;
}
/* --------------------------------------------- Data Manager ------------------------ */

.tablebox{
	display: inline-block;
}
.tablebox li{
	float: left;
	list-style: none;
	margin: 0.3em;
	padding: 0.2em;
	border: solid 0.1em #30404A;	
}
/*********************************************** REPORT TABLE ***************************************** */
.equipreport{
	width: 100%;
}
.equipreport th{
	font-size:0.8em;
	padding: 0.3em;
	background-color: #576B9C;
	color: #FFFFFF; 
	border-bottom: solid thin #FFFFFF;
	border-right: solid thin #FFFFFF;
	border-left: solid thin #FFFFFF;   
}
.equipreport td{
	font-size: 0.8em;
	padding: 0.2em;
	border-bottom: dotted thin #30404A;
	border-right: dotted thin #30404A;
	border-left: dotted thin #30404A;
}

/* ------------------------------------------------------ SUMMARIES TABLE --------------------- */
.alignright {
	text-align: right;
}
.alignleft{
	text-align: left;
}
.sumtable {
	width: 100%;
	font-size: 0.7em;
}
.sumtable th{
	background-color: #4380D3;
	color: #FFFFFF;
	padding: 0.3em;
}
.sumtable td{
	padding: 0.2em;
	border-bottom: dotted thin #2D2A52;
	border-right: dotted thin #2D2A52;
	
}

.sumtable tr{
	border-bottom: dotted thin #2D2A52;
	
	
}

/********************************************************** BEAUTIFUL TABLE **********************************************************/
.beautified{
	width: 99%;
}

.beautified input{
	border: none;
}

.beautified th{
	background-color: #4FA9B8;
	color: #FFFFFF;
	padding: 0.3em;
}
.beautified td{	
	padding: 0.1em;
	word-break: break-word;
	border-bottom: dotted thin #30404A;
	border-right: dotted thin #30404A;	
	
}
.beautified input[type="text"], .beautified select {
	width: 96%;
	height: 96%;
	border: none;
	background-color: inherit;	
	
}

/********************************************************** EDITABLE TABLE **********************************************************/
.editable input, .editable select{
	
	border: none;
	/* background-color: inherit; 
	width: 96%;
	height: 96%;
	*/
}

.editable td{
	position: relative;
	padding: 0.4em;
	padding-right: 0.8em;
}
.editable input[type=file]{
	display: block;
	font-size: 0.66em;
	width: 7em;
}
.editable input[type=number]{
	text-align: right
}
.editable input[type=checkbox]{
	width: 1.2em;
}
.editable button{
	width: 40px;
	height: 40px;
}
.editable .button_1{
	width: 100%;
	height: 100%;
	border: solid 0.1em antiquewhite;
	border-radius: 0.5em;
	display: block;
	background-color: darkgrey;
}

.editable td:nth-child(2) img{
	max-width: 7em;
	max-height: 10em;
}
.attend{
	font-size: 12pt;
	font-weight: bolder;
	color:red;
}

.description{
	width: 35%;
	word-wrap: break-word;
	vertical-align: top;
}
/*------------------------------- */


.menubox{
	margin-top: 0.5em;
	margin-bottom: 1.2em;
	padding: 0.3em 0.2em;
	background-color: #E7F0FA;
}
.menubox button[type="button"],.menubox input[type="button"], .menubox input[type="submit"], .menubox input[type="reset"]{
	padding: 0.3em 1.2em;	
	border: solid  2px #8B90ED;
	font-weight: bold;
	cursor: pointer;
}

.menubox img{
	width: 3em;
	height: 3em;
}

.bold {
	font-weight: bold;
}
.italic{
	font-weight: bolder;
	font-style: italic;
	color:#0000FF;
}
/*----------------------------------------------- COLUMN FORMAT ----------------------------- */
.itemcode{
	width:120px;
}
.itemdate{
	width:75px;
}
.equipunit{
	width: 65px;
}
.safety {
	width: 150px;
}

.delete img{
	width: 1.1em;
	height: 1.1em;
}
.exitbutton{
	height: 2em;
}

.subcat a{
	display: inline-block;
	text-decoration: none;
	padding: 0.7em 1.8em;
	margin: 0.2em;
	border: dotted thin #2D2A52;
	border-radius: 0.5em;
}
.subcat a:hover{
	background-color:#FFE2BC;
}
/* -------------------------------------------- ITEM INSERT -------------------------- */
.list{
	position:absolute;
	list-style: none;
	background-color: #FFFFFF;
	z-index: 1;
}
.list li{
	line-height: 2.5em;
	cursor: pointer;
}
.list li:hover{
	background-color: #FFE2BC;
}

/* -------------------------------------------- PAGE DIVIDING ------------------------ */
.paging{
	clear: both;
	margin-top: 1.5em;
	padding-top: 0.5em;
	border-top: dotted thin gray;
	text-align: center;
}

.paging a{
	display: inline-block;
	padding: 0.2em 0.5em;
	margin: 0.2em;
	border: solid thin gray;
	border-radius: 0.3em;
	text-decoration: none;
	color: #863F00;
}
.paging a:hover{
	background-color: #F0F7F0;
}
.paging a.selected{
	background-color: #FFE2BC;
}
.amounterror{
	background-color: red;
	position:  absolute;
	float: right;
	border-radius: 0.5em;
	border-top-left-radius:0;
	display: none;
}
/*--------------------------------------------- Format Column width on table ----------------------- */

.itemcols{
	width: 30px;
}
.empcodecols{
	width: 5em;
}

/* -------------------------------------------- Search box (add by dethsada) ------------------------ */
.searchbox{
	padding: 0.2em;	
	background-color: #F4F2FC;
	margin-bottom: 1em;
}
.searchbox input[type="button"],.searchbox input[type="submit"], .searchbox input[type="reset"]{
	padding: 0.4em 1.3em;		
	font-weight: bold;
	cursor: pointer;
	
}
.searchbox td,.searchbox input[type="text"]{
	padding: 0.2em;
}
.searchbox select{
	padding: 0.2em;
	
}

.searchbox fieldset{
	margin: 0 0.3em 0.5em 0.3em;
	padding: 0.5em;
}
.searchbox td{
	padding: 0.25em 0.2em;
}
.searchbox p{
	padding: 0.3em 0;
}

.searchbox label{
	display: inline-block;
	width: 5em;
	text-align: right;
	
}

.toexcel{
	background-color: #3b5998;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: underline;
	color: white;
	border: solid 2px white;
}
.toprint{
	padding: 5px;
	width: 100%;
	cursor: pointer;
	background-color: #3b5998;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: none;
	color: white;
	border: solid 2px white;
}
.toprint_a{
	padding:4px;
	display: block;
	width: 90%;
	cursor: pointer;
	background-color: #3b5998;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: none;
	color: white;
	border: solid 2px white;
	text-align: center;
}
.toreturn{
	padding: 5px;
	width: 100%;
	cursor: pointer;
	background-color: #ff7800;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: none;
	color: white;
	border: solid 2px white;
}

.adjustright{
	width:780px;
}


.notice{
	border-radius: 4em;
	border: solid thin;
	padding: 0.4em;
	margin-left: 0.2em;
	background-color: rgba(0,0,255,0.3);
	color: #F0F7F0;
	
}

/*************************************************** The Element FROM KONGXIONG *******************************************************/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

.h3{
	font-size: 1.1em;
	color: #2D2A52;
	text-align: center;
}
h4 {
	color: #2893ee;
}
h5 {
	color: red;
}
.hh1{
	font-family: 'Phetsarath_OT',Times New Roman, Calibri, Calibri, tahoma;
	padding:20px 0 0 30px;
	color: #a9a9da;
}
.btn2 {
	text-align: center;	
	background-color: #E6E2AF;
	border-radius: 0.5em;	
}
.btnlogin {
	text-align: center;	
	background-color:#0000FF;
	color: #FFFFFF;
	font-size: 0.8em;
	padding: 0.4em 0.8em;
	cursor: pointer;
	font-weight: bold;
	margin: 0.5em 0;
}

#tabh {
	border: 2px solid white;
	background-color: #EEE;
	text-align: left;
	padding-left: 0;
	border-spacing: 0; 
	border-collapse:collapse;
	border-color:#d3dce8;	
	width: 100%;
	
}
#tab {
	border: 2px solid black;
	background-color: #FFFFFF;
	text-align: left;
	padding: 0px;
	border-spacing: 1px; 
	border-collapse:collapse;
	border-color:#8cd4f9;
	
	margin-left: 2.5%;	
	margin-right: 2.5%;	
	width:95%; 
	
}
#tab_report {
	border: 2px solid black;
	background-color: #FFFFFF;
	text-align: left;
	padding: 0px;
	border-spacing: 1px; 
	border-collapse:collapse;
	border-color:#8cd4f9;
	
	margin-left: 2.5%;	
	margin-right: 2.5%;	
	width:100%; 
	max-width:940px;
	
}
.tbHeader {
	font-family:'Phetsarath_OT', Times New Roman, Calibri, Calibri, tahoma;
	height: 30px;
	font-size: 14px;
	font-weight: bold;
	color: #003333;
	background-color: #c3cfd8;
}

.btn_center{
	padding: 0 40% 0 40%;
}


.align_left{
	text-align: left;
}
.align_right{
	padding-right: 5px;
	text-align: right;
}
.control{
	padding: 10px 0 0 25px;
}
#saveRm{
	float: right;
	margin: 20px 25px 20px  0;
}
.hidden{
	display: none;
}
#login{
	padding: 0 0 0 35%;
}
#tab input[type="text"]{
	padding-left: 0px;
	width:100%;
	height: 100%;
	/*border: none; */
}
.errChk{
	color:red;
}
.msgChk{
	color:blue;
}

.overflow{
	word-wrap:break-word;
	/* text-overflow: ellipsis; */ 
}
.contentpage{
	width: 99%;
	margin: 0 auto;	
	padding-top: 0.3em;
	padding-left:0.5em;
	font-size: inherit;
}

.delete1{
	cursor: pointer;
}
/* ===================================== Add/Edit User Dialog ============================ */
#add_edit_user{
	width: 100%;
	height: auto;
	position: absolute;
	
}
#add_edit_user table{
	width: 100%;
}
#add_edit_user td{
	text-align: left;
}
#add_edit_user #dialog {
	background-color: rgb(223, 234, 243)
}
#add_edit_user fieldset {
	margin-bottom: 1em;
}
.mask{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.5;
}

#dialogparent{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	z-index: 999;
}

#dialog{
	font-size: 9pt;
	position: absolute;
	left: 30%;
	right: auto;
	top: 20em;
	width: 50%;
	height: auto;
	border-top-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	background-color: white;
	box-shadow: 0 0 1em black;
	padding: 0.3em;
	text-align: center;	
	overflow: auto;
}
#dialogparent_user{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	z-index: 999;
}

#dialog_user{
	font-size: 9pt;
	position: relative;
	left: 30%;
	right: auto;
	top: 0em;
	width: 60%;
	height: auto;
	border-top-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	background-color: white;
	box-shadow: 0 0 1em black;
	padding: 0.3em;
	text-align: center;	
	overflow: auto;
}
/* ==================================== Add/Edit News Dialog ================================ */

#add_edit_news{
	width: 100%;
	height: auto;
	position: absolute;
}

#newsdialogparent{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

#newsdialog{
	font-size: 9pt;
	position: relative;	
	margin: 0.3em auto;
	width: 90%;	
	background-color: white;
	box-shadow: 0 0 1em black;
	padding: 0.6em;
	overflow: auto;
}
#newsdialog p{
	padding: 0.3em;
}
#newsdialog input[type='text'] {
	width: 99%;
	padding: 0.5em;
}

#newsdialog textarea{
	width: 99%;
	
}

/* ---------------------------------------------------------------------------------- */
#cover{
	/*
	height: 30em;
	*/
	
}
#block_search{
	margin-left: 3%;
}
/********************************************************** REPORT TABLE **********************************************************/
.beautified_report{
	width: 100%;
}

.beautified_report th{
	background-color: #4FA9B8;
	color: #FFFFFF;
	padding: 0.3em;
	word-break: break-all;
}
.beautified_report td{
	overflow: hidden;
	padding: 0.2em;
	word-wrap: break-word;
	border-bottom: dotted thin #30404A;
	border-right: dotted thin #30404A;	
}
.beautified_report .none_bd {	
	border: none;	
	
}

.infobox td, .infobox button{
	padding: 0.2em;
}
.infobox fieldset{
	background-color:#F0F7FF;
	padding-bottom: 1em;
}
.infobox legend{
	padding: 0.5em;
	font-size:13pt;
	font-weight: bold;
}
.infobox label{
	width: 9em;
}
/* ----------------------- complete page add by dethsada --------------- */

.completepage{
	color: #3b5998;
	padding: 8em;
	 
}

.completepage h1{
	border-bottom: dotted thin;
	font-size: 2em;
	margin-bottom: 1.2	em;
	font-style: italic;
	padding-bottom: 0.5em;
}

.completepage button{
	background-color: #3b5998;
	padding: 0.8em;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: underline;
	color: white;
	border: solid 2px white;
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;
}
.img_usr{
	vertical-align: middle;
	height: 5em;
	
	border-radius: 0.3em;
	border: solid 2px rgb(221, 143, 205);
}
/*------------------------------------------- check Error ----------*/
.req_err{
	z-index: 9999;
	padding-left: 5px;
	width: 180px;
	color: black;
	background-color: red;
	position:  absolute;
	float: right;
	border-radius: 0.5em;
	border-top-left-radius:0;
	display: none;
}
/*-------------------------========================= Flowchart position of staff ============> BY kongxiong  ----------*/
.flowchar_a{
	width: 100%;
	border: solid 1px;
	border-collapse: collapse;
}
.flowchar_a th{
	border: dashed 1px;
	background-color:#0EABC9;
}
.flowchar_a td{
	border: dashed 1px;
}

/*===================== char item as menu ============*/

.flowchar_a th li{
	list-style: none;
	display: inline-block;
	font-weight: bold;
}

.flowchar_a th a{
	text-decoration: none;
	padding: 1em 0 1em 0 ;
	display: block;
	color: #FFFFFF;	
	cursor: pointer;
}
.flowchar_a td a{
	text-decoration: none;
	padding: 0.3em 0 0 0;
	display: block;
	color: #654684;
	cursor: pointer;
}

.flowchar_a td ol{
	padding-left: 15%;
	font-weight: bold;
}


.flowchar_a a:hover{
	background-color: #efdef7;	
	color: #000000;
}
.flowchar_a .section td li{
	padding: 0.5em 0 0.5em 0 ;
	list-style: none;
	display: inline-block;
	font-weight: bold;
}

.flowchar_a .section td{
	text-align: center;
}
.section {
	background-color: #e2e1c4;	
}

/*============================================================== WEBMASTER STAFF =============================================*/
#addstaff{
	position: relative;
	background-color: #e8eaea;
	margin: 1% 4%;
	padding: 2% 8%;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	border: solid 2px white;
}

#addstaff table{
	width: 100%;
}

#addstaff table td{
	padding: 0.1em;
	vertical-align: top;
}
/*
#addstaff table td input[type="text"], textarea{
	padding-left: 0px;
	width:100%;
	height: 95%;
	border: none; 
}
*/

/*================================================= IN USER APP AND ROLLE =============================*/
#inuser{
	width: 100%;
	height: 100%;
}
#inuser td{
	border-left: none;
	border-right: none;
}

/*===========================user ==========================*/
#frmadduser table{
	
}



.titlemenu{
	width: 100%;
}

/* ------------------------------------- REMINDER Index Page ------------------------------- */

#topcontent{
	margin-top: 0.3em;
	
}

#notice_bar{
	float: left;
	width: 11em;	
}

#calendar{
	
	 width: 82%;	
}
#calendarbox{
	margin: 0.5em auto;
	
}
#contentzone{
	/*margin-left: 12em; */
}

#bottom{
	width: 95%;
	position: relative;
	margin-bottom: 1.5em;
	overflow: auto;
}

.boxmenu{
	display: inline-block;
	margin: 0.5em auto;
}

.boxmenu li{
	width:7.3em;
	height: 7.1em;
	margin: 0.3em 0.3em 0.3em 3em;
	float: left;
	border: solid thin #44919E;
	list-style-type: none;
	box-shadow: 0 0 0.8em #E2E2CF;
	background-color: rgba(255,255,210,0.5);
}
.boxmenu img{
	width: 5em;
	height: 6em;
}

.boxmenu li:hover{
	background-color: #2EF5F5;
}
.boxmenu a{
	text-decoration: none;
}

#search{
	border: solid thin;
	position: absolute;
	margin-right: 0.5em;
}
#search input{
	padding: 0.15em;
}
/*=========== reminder Notice ============*/
.topic_reminder{
	position: absolute;
	margin-left: 1.2em;
}
.topic_reminder img{
	width: 100%;
	height: 100%;
}
.noticenames_reminder{
	position: relative;
	font-size: 10pt;
	font-weight:bold;
	padding: 0.9em 0.1em;
	word-wrap: break-word;
	background-color: rgba(0,0,0, 0.4);
	color: #F0F7F0;
}
.notice_reminder{
	border-radius: 4em;
	border: solid thin;
	padding: 0.4em;
	margin-left: 0.2em;
	background-color: rgba(0,0,255,0.3);
	color: #F0F7F0;
	
}
/*
#notice_bar_reminder{
	float: left;
	width: 11em;	
}
*/
.boxmenu_reminder{
	display: inline-block;
	margin: 0.5em auto;
}

.boxmenu_reminder li{
	width:8em;
	height: 8em;
	margin: 0.0em 0.0em 0.0em 0.2em;
	float: left;
	border: solid thin #44919E;
	list-style-type: none;
	box-shadow: 0 0 0.8em #E2E2CF;
	background-color: rgba(255,255,210,0.5);
}
.boxmenu_reminder img{
	width: 5em;
	height: 6em;
}

.boxmenu_reminder li:hover{
	background-color: #2EF5F5;
}
.boxmenu_reminder a{
	text-decoration: none;
}
/*======================== END =======================*/

/*======================================= Document System , kongxiong =========================*/
#f_receive table{
	width: 100%;
}
#f_receive textarea{
	width: 100%;
}
#control_view {
	overflow: auto;
	word-wrap: break-word;
}
/********************** BEAUTIFUL TABLE IN DOCUMENT SYSTEM =>kongxiong****************************/
.beautified_doc{
	width: 100%;
}

.beautified_doc input{
	border: none;
}

.beautified_doc th{
	background-color: #4FA9B8;
	color: #FFFFFF;
	padding: 0.3em;
}
.beautified_doc td{	
	padding: 0.1em;
	/*word-break: break-word;*/
	border-bottom: dotted thin #30404A;
	border-right: dotted thin #30404A;	
	
}
.beautified_doc input[type="text"], .beautified_doc select {
	width:100%;
	height: 100%;
	border: none;
	background-color: inherit;
	padding: 0.1em;	
	
}


.sectionbox{
	float: left;
	margin: 0.2em;
	border: dotted thin #0000FF;
	padding: 0.5em;
}
.unitbox{
	float: left;
	margin: 0.2em;
	border: dotted thin #0000FF;
	padding: 0.5em;
}
/*===========================  the dialog popup login to download document // kong added =============================*/
#dialogparent_poplog{
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 15%;
	width: 100%;
	height: 100%;
	z-index: 999;
}

#dialog_poplog{
	font-size: 9pt;
	position: relative;
	left: 35%;
	right: auto;
	top: 1%;
	width: 25%;
	height: auto;
	border-top-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	background-color: white;
	box-shadow: 0 0 1em black;
	padding: 1.2em;
	text-align: center;	
	overflow: auto;
}
#dialog_poplog input{
	margin-bottom: 0.3em;
}
/*============================================= Planning System */
/*=======index===*/
#plan_td input{
	width: 100%;
	color: #fff;
	background-color: rgba(82, 0, 255, 0.48);
	border-radius: 0.5em;
	border: solid 2px rgb(255, 224, 0);
	cursor: pointer;
}

#tb_add{
	width: 100%;
}

/* ================================ Planning System -- Work detail page =================== */
.worktopic{
	background-color: #7DD8E9;
	border-radius: 0.8em;
	width:95%;
	margin: 0.5em auto;
	padding:0.8em;
	opacity: 0.8;
}
.worktopic td {
	/* padding-top: 0.5em; */
}
.worktopic textarea, input {
	padding: 0.3em;
}
.workflow{
	background-color: #F3E2E2;
	border-radius: 0.8em;
	width:96%; 
	margin: 0.5em auto;
	padding:0.8em;
	opacity: 0.8;
}

.workflow p{
	padding: 0.5em 0;	
}
.workflow label{
	display: inline-block;
	
	width: 5em;
}

.t_content {
	width: 100%;
	background-color: rgb(247, 245, 245);
	padding-left: 1.5em;
	
}
.t_head{
	width: 100px;
	padding: 0.3em;
	font-weight: bold;
}

#w_detail{
	background-color: rgb(247, 245, 245);
}
#w_detail textarea{
	width: 98%;
}
#comment textarea{
	width: 98%;
}

#comment{
	background-color: rgb(247, 245, 245);
}
.btnrow{
	text-align: center;	
	background-color: #E6E2AF;
	border-radius: 0.3em;
	padding: 0.3em;
	cursor: pointer;
	font-weight: bold;
	margin-top: 0.2em;
}
/*---------------------------------- Show Comment table -------------------- */
.comment_table{
	width: 99%;
	background-color: #DAEFFD;
	margin: 0.5em auto;
	padding:0.8em;
	border-radius: 0.5em;
}
.comment_table td{
	padding: 0.5em;
	word-wrap: break-word;
}
.border_bottom{
	border-bottom: dotted thin #0054E3;
}

/*---------------------------------- Show Comment board -------------------- */
.comment_board{
	width: 99%;
	background-color: #E6E6E6;
	margin: 0.5em auto;
	padding:0.8em;
	border-radius: 0.5em;
	
}
.comment_board td{
	padding: 0.5em;
	word-wrap: break-word;	
}
/********************************************************** EDITABLE TABLE in Planning System **********************************************************/
/*====the detail in Planning System =====*/
.editable_detail input, .editable_detail select{
	width: 100%;
	height: 100%;
	border: none;
	/* background-color: inherit; */
}

.editable_detail td{
	position: relative;
	/* padding: 0.5em; */
}
.editable_detail input[type=file]{
	display: block;
	font-size: 0.66em;
	width: 7em;
}
.editable_detail input[type=number]{
	text-align: right
}
.editable_detail button{
	width: 40px;
	height: 40px;
}

.editable_detail td:nth-child(2) img{
	max-width: 7em;
	max-height: 10em;
}
/*==== =============================================== the comment in Planning System =====*/

.highlight{
	font-size: 1.1em;
	color: #0000FF;
	font-style: italic;
	padding-left: 0.4em;
}

.editable_comment input, .editable_comment select{
	width: 100%;
	height: 100%;
	border: none;
	/* background-color: inherit; */
}

.editable_comment td{
	position: relative;
	/* padding: 0.5em; */
}
.editable_comment input[type=file]{
	display: block;
	font-size: 0.66em;
	width: 7em;
}
.editable_comment input[type=number]{
	text-align: right
}
.editable_comment button{
	width: 40px;
	height: 40px;
}

.editable_comment td:nth-child(2) img{
	max-width: 7em;
	max-height: 10em;
}
/*=========================== title link =======================*/
#d_title:hover {
	background-color: rgb(207, 197, 247)
}
#d_title {
	/* background-color: rgb(255, 245, 245) */
}
#d_title a {
	display: block;
	text-decoration: none;
}
#b_title:hover {
	background-color: #D8D8D8;
}
#b_title {
	/* background-color: rgb(255, 245, 245) */
}
#b_title a {
	display: block;
	text-decoration: none;
}

/*========================================= STAFF SYSTEM ===================================================*/
.staff_list td {
	padding-top: 0.4em;
}
/*=========================== manage the dialog =============================*/
#dialogparent_staff{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

#dialog_staff{
	font-size: 9pt;
	position: relative;
	left: 5%;
	right: auto;
	top: 1%;
	width: 80%;
	height: auto;
	border-top-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	background-color: white;
	box-shadow: 0 0 1em black;
	padding: 0.3em;
	text-align: center;	
	overflow: auto;
}
/*===================== detail staff infomation ================*/
#detail_info{
	position: relative;
	background-color: #e8eaea;
	margin-top: 0.2em;
	/* top: 0.5em; */
	padding: 1em 3em;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	border: solid 2px white;
	text-align: left;
}

#detail_info table{
	width: 100%;
}
#detail_info table td{
	padding: 0.2em;
}
.close_ico img{
	margin: 0.5em;
	position: relative;
	float: right;
	z-index: 999;
	background-color: rgb(158, 197, 255);
}

#img_pic {
	margin-right: 1.5em;
	border: solid thin #0EABC9;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.6),
		inset 0 -1.5em 1.5em -1.5em #B2F0FC,
		inset 0 1.5em 1.5em -1.5em #FFFFFF,
		inset 0 0.7em 0 0 rgba(255,255,255,0.1);
}

.staff_pic{
	padding:0.2em;
	border: solid thin #0EABC9;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.6),
		inset 0 -1.5em 1.5em -1.5em #B2F0FC,
		inset 0 1.5em 1.5em -1.5em #FFFFFF,
		inset 0 0.7em 0 0 rgba(255,255,255,0.1);
	height: 9em;
	width: 7em;
}

/*================================== FROM OLD ICT SYSTEM========================================================*/
.txtarea {
	font-family:'Phetsarath_OT', Saysettha OT,Saysettha Lao,Arial,Helvetica,sans-serif, Times New Roman, Calibri, tahoma;
	font-size: 12px;
	width: 660px;
	height: 25px;
	-moz-border-radius: 5px;
}
.txtbox{
	font-family:'Phetsarath_OT', Saysettha OT,Saysettha Lao,Arial,Helvetica,sans-serif, Times New Roman, Calibri, tahoma;
	font-size: 12px;
	width: 210px;
	-moz-border-radius: 5px;
}
.txtboxB{
	font-family:'Phetsarath_OT', Saysettha OT,Saysettha Lao,Arial,Helvetica,sans-serif, Times New Roman, Calibri, tahoma;
	font-size: 12px;
	width: 605px;
	-moz-border-radius: 5px;
}
.txtboxN{
	font-family:'Phetsarath_OT', Saysettha OT,Saysettha Lao,Arial,Helvetica,sans-serif, Times New Roman, Calibri, tahoma;
	font-size: 12px;
	width: 290px;
	-moz-border-radius: 5px;
}
.txtboxC{
	font-family:'Phetsarath_OT',Saysettha OT,Saysettha Lao,Arial,Helvetica,sans-serif, Times New Roman, Calibri, tahoma;
	font-size: 12px;
	width: 230px;
	-moz-border-radius: 5px;
}
.inputtextpict {
	font-family:'Phetsarath_OT', Saysettha OT,Saysettha Lao,Arial,Helvetica,sans-serif, Times New Roman, Calibri, tahoma;
	font-size: 12px;
	width: 222px;
	-font-style: italic;
	-moz-border-radius: 5px;
}
.inputtextdate {
	font-family:'Phetsarath_OT', Times New Roman, Calibri, tahoma;
	font-size: 12px;
	width: 180px;
	-font-style: italic;
	-moz-border-radius: 5px;
}
/*use for select option general*/
.selectOption {
	font-family:'Phetsarath_OT', Saysettha OT,Saysettha Lao,Arial,Helvetica,sans-serif, Times New Roman, Calibri, tahoma;
	font-size: 12px;
	width: 214px;
	-moz-border-radius: 5px;
}

/*===================================== Dialog Change USER Pwd ======================================*/
/*=========================== manage the dialog =============================*/
#dialogparent_chpwd{
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 20%;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

#dialog_chpwd{
	font-size: 9pt;
	position: relative;
	left: 35%;
	right: auto;
	top: 1%;
	width: 40%;
	height: auto;
	border-top-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	background-color: white;
	box-shadow: 0 0 1em black;
	padding: 0.3em;
	text-align: center;	
	overflow: auto;
}
.changepwd{
	/* width: 100%; */
}

.changepwd th{
	text-align: right;
	color: #408af8;
	padding: 0.3em;
}
.changepwd td{	
	width: 60%;
	padding: 0.1em;
	word-break: break-word;;
	
}
.changepwd input{
	width:100%;
	height: 100%;
	border: 1px dotted #408af8;
	background-color: inherit;	
	
}

/*------------------------------ webboard ---------------------*/
#reply_text{
	width: 100%;
}
/*============================== CONTROL THE ICT STRUCTURE ============================*/
.ict_str, .ict_str table {
	width: 100%;
	margin-bottom: 5em;
}
.ict_str td{
	vertical-align: top;
	text-align: center;
}
.ict_str img{
	padding:0.2em;
	margin: 0.5em auto;
	border: solid thin #0EABC9;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.6),
		inset 0 -1.5em 1.5em -1.5em #B2F0FC,
		inset 0 1.5em 1.5em -1.5em #FFFFFF,
		inset 0 0.7em 0 0 rgba(255,255,255,0.1);
}

/*--------- the ict head ------*/
.ict_head1{
	position:relative;
	padding: 5px;
	width: 9em;
	cursor: pointer;
	margin: 0.9em auto;
	background-color: #3b5998;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: none;
	color: white;
	border: solid 2px white;
	z-index: 55;
}
.ict_head2{
	position:relative;
	padding: 5px;
	width: 9em;
	cursor: pointer;
	margin: 2em auto;
	background-color: #447ea3;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: none;
	color: white;
	border: solid 2px white;
	z-index: 55;
}
.str_sec{
	padding: 5px;
	width: 8em;
	cursor: pointer;
	margin: 2em auto;
	/*padding: 0 0.5em 0 0.5em;*/
	background-color: #259ccd;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: none;
	color: white;
	border: solid 2px white;
	z-index: 999;
}

.unit_head{
	padding: 5px;
	width: 10em;
	cursor: pointer;
	margin: 3em auto;
	padding: 0 0.5em 0 0.5em;
	background-color: #6ac1e5;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: none;
	color: white;
	border: solid 2px white;
	z-index: 999;
}
.ict_str table  td{
	text-align: left;
	vertical-align: inherit;
}
.unit_member{
	padding: 5px;
	width: 15em;
	cursor: pointer;
	margin: 0.5em auto;
	background-color: #b99df8;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.4),
		inset 0 -1.1em 1.5em -1.5em #82D8E8,
		inset 0 1.5em 1.5em -1.5em #82D8E8,
		inset 0 0.5em 0 0 rgba(255,255,255,0.1);
	border-radius: 0.8em;
	text-decoration: none;
	color: white;
	border: solid 2px white;
	z-index: 999;
}
.str_sec img, .unit_head img, .unit_member img{
	cursor: pointer;
}
/*------------------control the line in structure -------------*/
#head_line{
	position: absolute;
	top: 20em;
}
#head_line2{
	position: absolute;
	top:38em;
}
#head_line3{
	position: absolute;
	top:42.1em;
	margin-left: 0em;
	margin-right: auto;
}
#head_line4{
	position: absolute;
	margin-left: 18em;
	top:42.1em;
}
#head_line5{
	position: absolute;
	margin-left: 28.8em;
	top:42.1em;
}
#head_line6{
	position: absolute;
	top:42.1em;
}
#head_line7{
	position: absolute;
	margin-left: 12.5em;
	top:42.1em;
}#head_line8{
	position: absolute;
	margin-left: 25.6em;
	margin-right: auto;
	top:42.1em;
}#head_line9{
	position: absolute;
	margin-left: 37.5em;
	top:42.1em;
}#head_line10{
	position: absolute;
	margin-left: 50em;
	top:42.1em;
	z-index: 1;
}
/*================start from see section and unit detail =================*/
#head_line11{
	position: absolute;
	top: 20.6em;
}
#head_line12{
	position: absolute;
	top:23em;
	margin-left: 15em;
	margin-right: auto;
}
#head_line13{
	position: absolute;
	top:23em;
	margin-left: 26.5em;
	margin-right: auto;
}
#head_line14{
	position: absolute;
	top:23em;
	margin-left: 15em;
	margin-right: auto;
}
#head_line15{
	position: absolute;
	top:23em;
	margin-left: 47.8em;
	margin-right: auto;
}
/*-------------- two position*/
#head_line11_{
	position: absolute;
	top: 29em;
}
#head_line12_{
	position: absolute;
	top:31.5em;
	margin-left: 15em;
	margin-right: auto;
}
#head_line13_{
	position: absolute;
	top:31.5em;
	margin-left: 26.5em;
	margin-right: auto;
}
#head_line14_{
	position: absolute;
	top:31.5em;
	margin-left: 15em;
	margin-right: auto;
}
#head_line15_{
	position: absolute;
	top:31.5em;
	margin-left: 47.8em;
	margin-right: auto;
}

/*------------- ETL DOC SYSTEM ---------------*/
.titles .doc_num{
	margin-top: 4em;
}
.announce {
	background-color: brown;
	display: block;
	border-radius: 0.5em;
	padding: 0.2em 1.5em 0.2em 1em;
	color: seashell;
}

.radiochecked{
	cursor: pointer;
}