<style type="text/css">
html {
    font-size: 62.5%; /* เพื่อให้ 1rem มีค่าประมาณ 10px */
}


body {
	margin-top: 0px;
	background-color: #ffffff;
	
}
body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: #ffffff;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: #816398;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #ffffff;  /* creates padding around scroll thumb */
}
a:link {
	text-decoration: none;
	//color:#000000;
	border:0px;
}
a:visited {
	text-decoration: none;
	//color:#000000;
	border:0px;
}
a:hover {
	text-decoration: none;
	//color:#000000;
	border:0px;
}
a:active {
	text-decoration: none;
	//color:#000000;
	border:0px;
}
/* ส่วนเมนูหลักบน */
.grid-container{
	display: grid;
	margin-top: 0px;
	grid-template-columns: repeat(2 2fr);
}
.hbox{
	display:flex;
	width:100%;
	height:80px;
	margin-top: 0px;
	flex-flow:row wrap; 
	justify-content: space-between; 
	background-color:#ffffff; 
	
}
.logobox{
	display:flex;
	width:30%;
	height:100px;
	flex-direction:row;
	justify-content: flex-start; 
	//background:url('temp/logo2.png') center/cover;
}
.img-logo{
	width: 25%;
	margin-left: 20px;
}
.tx-logo{
	margin-top: 20px;
	align: left;
}
tx-1{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1.6rem;
	font-weight: bold;
	color:#150984;
	
}
tx-2{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	//font-weight: bold;
	color:#6a5bf4;
	
}
.menubox{
	display:flex;
	width:70%;
	flex-flow:row wrap; 
	justify-content: flex-end;  
	align-items: center;		
}
.menu{
	display:flex;
	margin-left:20px;
	margin-right:20px;
	align-items: center;
}
/*ปิดส่วนเมนูหลักบน*/
/* ภาพ img */
.main-container{
	display:flex;
	flex-direction:column;
	flex-flow:row wrap;
	width:99%;
	height:100%;
	margin: 0 10px;
	//gap:10px;
	//background-color:#f3f8fe;
}
.foot-container{
	width:99%;
	height:50px;
	margin-top:0px; 
	padding: 0px; 
	position: fixed;
  	bottom: 0;
	align: center;
	background-color: #816398;
}

.himgbox{
	//display: flex;
	display: grid;
	width: 100%;
	height: 300px;
	align-items:center;
	background:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1400&auto=format&fit=crop') center/cover;
}
.shbox{
	display: flex;
	width:50%;
	flex-flow:column wrap; 
	//height:50%;
	margin-left: 60px;
	padding: 10px;
	border-radius:2%;
	border: 1px solid #b5b5b5;
	background-color:#ffffff;
}
.hmenu{
	width: 100%;
	//height: 50px;
}
tx-vatn{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color:#541cea;
	margin:5px;
}

/* ปิดส่วนภาพ img*/
/* ส่วน icon เมนู*/
.iconbox{
	display: flex;
	width: 100%;	
	//height: 55%;
	margin:20px 10px;
	flex-flow: row wrap; 
	justify-content: space-between; 
}
.lkicon{
	display:flex;	
	width:200px;
	height:220px;
	padding: 10px;
	place-items: center; 
	flex-direction:column;
	text-align:center;
	border-radius:3%;
	border: 1px solid #b5b5b5;
	box-shadow: 4px 8px 8px 0px rgba(0, 0, 0, 0.2);
}
.circle-logo{
	width:70px;
	height:70px;
	padding-top: 10px;
  	padding-bottom: 10px;
	border-radius:50%;
	justify-content: center;
	align-items:center;
	text-align:center;
}
#circle1{
	background-color:#3d79eb;
}
#circle2{
	background-color:#04e162;
}
#circle3{
	background-color:#a860f9;
}
#circle4{
	background-color:#fc7432;
}
#circle5{
	background-color:#3c41fb;
}
#circle6{
	background-color:#bdcb12;
}
/* ปิดส่วน icon เมนู*/
/* ส่วนแสดงข้อมูล*/
.databox{
	display: flex;
	width:100%;
	//height:500px;
	margin:10px;
	flex-flow:row wrap; 
	justify-content: space-between;
}
.newsdt{
	width:69%;
	//height:85%;
	margin-right:5px;
	border-radius:1%;
	border: 1px solid #b5b5b5;
}
.hitform{
	width:30%;
	//height:85%;
	margin-left:5px;
	border-radius:1%;
	border: 1px solid #b5b5b5;
}
/* ปิดส่วนแสดงข้อมูล*/
/* แสดงหน้าผลการจัดซื้อจัดจ้าง*/
.report-container{
	display:flex;
	flex-direction:column;
	flex-flow:row wrap;
	width:100%;
	//height:700px;
	margin: 0 10px;
	gap:10px;
	background-color:#f3f8fe;
}
.shdetail{
	height:80px;	
}
.shbox-re{
	width:80%;
	margin: 40px 40px;
}
.shdata{
	display: flex;
	width: 100%;	
	//height: 25%;
	flex-flow: row wrap; 
	justify-content: space-between; 
}
.shicon{
	display:flex;	
	width:300px;
	height:110px;
	padding: 10px;
	place-items: center; 
	flex-direction:row;
	align-itmes:center;
	jestify-content: flex-start;
	text-align:left;
	background-color:#ffffff;
	border-radius:3%;
	border: 1px solid #b5b5b5;
}
.sh-detail{
	width:60%;
	margin: 10px 20px;
}
.re-detailbox{
	display: flex;	
	flex-flow: column wrap;
	width: 100%;
	padding:10px;
	
}
.re-newsdt{
	//display: flex;
	width:100%;
	//height:500px;
	margin:10px 0;
	border: 1px solid #b5b5b5;
	//border-radius:1%;
	background-color:#ffffff;
}
.circle-shlogo{
	width:50px;
	height:50px;
	padding-top: 10px;
  	padding-bottom: 10px;
	border-radius:50%;
	justify-content: center;
	align-items:center;
	text-align:center;
	background-color:#d6c9fa;
}
tx-hpcm{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color:#7a4fee;
	margin-top:5px;
}
tx-shdata{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	color:#7a4fee;
	margin-top:5px;
}

/* ปิดแสดงหน้าผลการจัดซื้อจัดจ้าง*/

/* แสดงหน้าแนวปฏิบัติด้านการเงิน*/
.prod-container{
	display:flex;
	flex-direction:column;
	flex-flow:row wrap;
	width:100%;
	//height:100%;
	margin: 0 10px;
	gap:10px;
	background-color:#f2fff8;
}
.left-menu{
	width: 20%;
	height: 720px;
	margin: 10px;
	border-radius:2%;
	border: 1px solid #b5b5b5;
	background-color:#ffffff;
}
.detailbox{
	display: flex;	
	flex-flow: column wrap;
	width: 78%;
	padding:10px;
	
}

.searchbox{
	display: flex;
	width:100%;
	//height: 25%;
	justify-content: flex-start; 
	align-items:center;
	border-radius:2%;
	border: 1px solid #b5b5b5;
}
.titlebox{
	width: 500px;
	height:120px;
	margin: 0 50px;
}
.iconbox2{
	display: flex;
	width: 100%;	
	//height: 25%;
	margin:10px 0;
	flex-flow: row wrap; 
	justify-content: space-between; 
}
.newsdt2{
	//display: flex;
	width:100%;
	//height:500px;
	margin:10px 0;
	//border-radius:3%;
	border: 1px solid #b5b5b5;
	background-color:#ffffff;
}
.shbox2{
	width:30%;
	margin: 40px 40px;
}
.lkicon2{
	display:flex;	
	width:170px;
	height:180px;
	padding: 10px;
	place-items: center; 
	flex-direction:column;
	text-align:center;
	border-radius:3%;
	border: 1px solid #b5b5b5;
	box-shadow: 4px 8px 8px 0px rgba(0, 0, 0, 0.2);
}
.circle-logo2{
	width:50px;
	height:50px;
	padding-top: 10px;
  	padding-bottom: 10px;
	border-radius:50%;
	border: 2px solid #b5b5b5;
	justify-content: center;
	align-items:center;
	text-align:center;
}
#lkbox1{
	background-color:#edf3fe;
}
#lkbox2{
	background-color:#eafff3;
}
#lkbox3{
	background-color:#f4ebfe;
}
#lkbox4{
	background-color:#fff5f0;
}
#lkbox5{
	background-color:#fcfff2;
}
#lcircle1{
	background-color:#b4cefa;
}
#lcircle2{
	background-color:#ddffec;
}
#lcircle3{
	background-color:#ead9fd;
}
#lcircle4{
	background-color:#ffeadf;
}
#lcircle5{
	background-color:#f8ffdd;
}
tx-tfin{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color:#009141;
}
/* ปิดส่วนแสดงหน้าแนวเบิกจ่าย*/

/* แสดงหน้าแนวปฏิบัติด้านพัสดุ*/
.proc-container{
	display:flex;
	flex-direction:column;
	flex-flow:row wrap;
	width:100%;
	//height:100%;
	margin: 0 10px;
	gap:10px;
	background-color:#fcfdec;
}
.lkicon3{
	display:flex;	
	width:180px;
	height:180px;
	padding: 10px;
	place-items: center; 
	flex-direction:column;
	text-align:center;
	border-radius:3%;
	border: 1px solid #b5b5b5;
	box-shadow: 4px 8px 8px 0px rgba(0, 0, 0, 0.2);
}
tx-tproc{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color:#6f770b;
}
/* ปิดแสดงหน้าแนวปฏิบัติด้านพัสดุ*/
/* แสดงหน้าระเบียบงานการเงิน*/
.afin-container{
	display:flex;
	flex-direction:column;
	flex-flow:row wrap;
	width:100%;
	//height:100%;
	margin: 0 10px;
	gap:10px;
	background-color:#f8f0ff;
}
.finicon{
	display:flex;	
	width:350px;
	height:100px;
	margin: 5px 0;
	padding: 10px;
	//place-items: center; 
	flex-direction:row;
	//align-itmes:center;
	jestify-content: flex-start;
	text-align:left;
	background-color:#ffffff;
	border-radius:3%;
	border: 1px solid #b5b5b5;
}
.fin-detail{
	width:80%;
	margin: 5px 10px;
}
.circle-finlogo{
	width:50px;
	height:50px;
	padding-top: 10px;
  	padding-bottom: 10px;
	border-radius:50%;
	justify-content: center;
	align-items:center;
	text-align:center;
}
.t-link{
	width:80%;
	text-align:right;
	}
tx-hpcm{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color:#7a4fee;
	margin-top:5px;
}
tx-findata{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color:#4e15e3;
	margin-top:5px;
}
tx-hfin{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color:#8115f7;
	margin-top:5px;
}
tx-dfin{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.8rem;
	color:#000000;
	text-align:center;
	margin-top:5px;
}
#ci1{
	background-color:#e4c5fe;
}
#ci2{
	background-color:#c5ccfe;
}
#ci3{
	background-color:#d1fec5;
}
#ci4{
	background-color:#c8fbed;
}
/* ปิดแสดงหน้าระเบียบงานการเงิน*/

/* แสดงหน้าระเบียบงานพัสดุ*/
.aproc-container{
	display:flex;
	flex-direction:column;
	flex-flow:row wrap;
	width:100%;
	//height:100%;
	margin: 0 10px;
	gap:10px;
	background-color:#fff2ec;
}
.procicon{
	display:flex;	
	width:350px;
	height:110px;
	padding: 10px;
	//place-items: center; 
	flex-direction:row;
	//align-itmes:center;
	jestify-content: flex-start;
	text-align:left;
	background-color:#ffffff;
	border-radius:3%;
	border: 1px solid #b5b5b5;
}
.proc-detail{
	width:80%;
	margin: 5px 10px;
}

tx-hproc{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color:#933000;
	margin-top:5px;
}
tx-procdata{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color:#642100;
	margin-top:5px;
}
/* ปิดแสดงหน้าระเบียบงานพัสดุ*/
/* แสดงหน้าดาวน์โหลดุ*/
.dl-container{
	display:flex;
	flex-direction:column;
	flex-flow:row wrap;
	width:100%;
	//height:100%;
	margin: 0 10px;
	gap:10px;
	background-color:#f2f2ff;
}

.al-dl-container{
	display:flex;
	flex-direction:column;
	flex-flow:row wrap;
	width:100%;
	//height:100%;
	margin: 0 10px;
	gap:10px;
	background-color:#d7e1ff;
}
.iconbox3{
	display: flex;
	width: 100%;	
	//height: 25%;
	margin:10px 0;
	gap:100px;
	flex-flow: row wrap; 
	justify-content: flex-start; 
}
.type-box{
	display: flex;
	width: 100%;	
	//height: 25%;
	margin:10px 0;
	//gap:100px;
	flex-direction:column;
	flex-flow:row wrap;
	justify-content: space-between;  
}
.finicon2{
	display:flex;	
	//width:350px;
	height:90px;
	padding: 10px;
	//place-items: center; 
	flex-direction:row;
	//align-itmes:center;
	jestify-content: flex-start;
	text-align:left;
	background-color:#ffffff;
	border-radius:3%;
	border: 1px solid #b5b5b5;
}
.sh-type-box{
	width:50%; 
	height:30px; 
	padding:2px; 
	border-radius:5%;
	
}
.sh-type-box2{
	width:100%; 
	height:30px; 
	padding:2px; 
	border-radius:5%;
	
}

/* ปิดแสดงหน้าดาวน์โหลด*/
/* แสดงรายละเอียดแนวปฎิบัติ*/
.md-box{
	display:flex;	
	//width:350px;
	height:90px;
	padding: 20px;
	//place-items: center; 
	flex-direction:row;
	//align-itmes:center;
	jestify-content: flex-start;
}
.rmenu-box{
	width:200px;
	padding: 10px;
}
.sh-flow-data{
	margin: 20px;
}
/* ปิดแสดงรายละเอียดแนวปฎิบัติ*/
/* ส่วนกำหนดข้อความ*/
tx-f-sh{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color:#fffff;
}
tx-menu{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color:#000000;
}
tx-h{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color:#000000;
	margin-top:5px;
}
tx-h-g{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	font-weight: bold;
	color:#000000;
	margin-top:5px;
}
tx-d{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.8rem;
	color:#000000;
	margin-top:5px;
}
tx-d-t{
	width: 100%;
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
	color:#000000;
	margin-top:5px;
	text-align:right;
}
tx-hit-button{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
	color:#000000;
	margin-top:5px;
}
tx-table{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	color:#000000;
	margin-top:5px;
}
tx-btn{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
	color:#3c41fb;
}
tx-footer{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
	color:#ffffff;
}
tx-n-tb{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1.2rem;
	font-weight: bold;
	margin-left:20px;
	color:#2810b1;
}
tx-lk-tb{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
	text-align:right;
	margin-right:20px;
	color:#3c41fb;
}
tx-menu-flow{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	text-align: justify;
	text-indent: 30px;
	font-weight: bold;
	//text-align:right;
	margin-right:20px;
	color:#5b6ce6;
}
tx-hflow-d{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	text-align: justify;
	text-indent: 30px;
	font-weight: bold;
	//text-align:right;
	margin-right:20px;
	color:#838383;
}
tx-flow-wn{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	text-align: justify;
	text-indent: 30px;
	//font-weight: bold;
	//text-align:right;
	margin-right:20px;
	color:#d11847;
}
tx-flow-dt{
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 1rem;
	text-align: justify;
	text-indent: 30px;
	//font-weight: bold;
	//text-align:right;
	margin-right:20px;
	color:#000000;
}

</style>