@import url('iconfont.css');
@import url('fancybox.css');
@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,500;');
*{box-sizing:border-box}
html,body{padding:0;margin:0;font-family:Kanit,Arial,Helvetica,sans-serif;font-weight:300;text-align:center;background:url(img/bg-onestop.jpg) top center;background-size:cover;background-attachment:fixed}
img,iframe{border:0;max-width:100%}
input[type=text],input[type='email'],input[type='password'],textarea,select{border:1px solid rgba(0,0,0,.3);padding:7px 10px 10px;font-size:15px;font-family:Arial,sans-serif;box-shadow:none;outline:none;background:rgba(238,238,238,1);background:-moz-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(238,238,238,1) 6%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(238,238,238,1)),color-stop(6%,rgba(238,238,238,1)),color-stop(30%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,1)));background:-webkit-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(238,238,238,1) 6%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 100%);background:-o-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(238,238,238,1) 6%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 100%);background:-ms-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(238,238,238,1) 6%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 100%);background:linear-gradient(to bottom,rgba(238,238,238,1) 0%,rgba(238,238,238,1) 6%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#ffffff',GradientType=0);border-radius:0}
textarea{min-height:100px}
button[type='submit']{padding:7px 60px;border:1px solid #1bb80d;font-size:20px;font-family:Kanit;font-weight:300;background:#1bb80d;color:#fff;cursor:pointer;transition:.1s all}
button[type='submit']:hover{background:#33d425;transition:.3s all}
header{display:grid;grid-template-columns:auto;padding:5px 15px;width:1170px;margin:0 auto;align-items:flex-end;max-width: 100%}
header>div{display:grid;grid-template-columns:max-content auto;align-items:center}
header>div img{height:100px;margin-right:10px}
header>div .title{text-decoration:none;color:#0c310c}
header>div .title h1{font-size:20px;text-align:left;font-weight:400;margin:0;color:#ffffff;text-shadow:none}
header>div .title h2{font-size:20px;text-align:left;font-weight:400;margin:0;color:#ffffff}
header>div .title h1 span{display: block;}
header nav{text-align:right;position:relative}
header nav>div{display: none;}
header nav>ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns: repeat(5, auto);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.3);position:relative;width: 100%;border-radius: 40px;overflow: hidden;}
header nav>ul>li{text-align: center;}
header nav>ul>li:first-child>a{padding-left:40px}
header nav>ul>li:last-child>a{padding-right:40px}
header nav>ul>li:not(:last-child)>a{border-right:1px solid rgba(255,255,255,.2)}
header nav>ul>li:not(:first-child)>a{border-left:1px solid rgba(0,0,0,.1)}
header nav>ul>li>a{display:block;padding:10px;font-size:16px;color:#383838;text-decoration:none;background:#fde90c}
header nav>ul>li.active>a{background:#4fea66}
.f_arial{font-family:Arial,Helvetica,sans-serif}
.c33{color:#333}
.c99{color:#999}
.cc33{color:#c33}
.mr5{margin-right:5px}
.pt10{padding-top:10px}
.fs13{font-size:13px}
.mb0{margin-bottom:0}
.response{padding:10px 15px 30px;background:#fff2ff;margin-top:15px}
.wrap-header{background:#0c2d58;background:#3f55cd;position: relative;}
.breadcrumb{text-align:left;background:#367ced}
.breadcrumb>div{width:1170px;margin:0 auto;padding:10px 15px;max-width: 100%}
.breadcrumb ul{margin:0;padding:0}
.breadcrumb ul>li{display:inline-block;vertical-align:middle;font-size:13px}
.breadcrumb ul>li>a{font-size:13px;color:#fff;font-family:Arial,sans-serif;text-decoration:none}
.breadcrumb ul>li>a:hover{text-decoration:underline}
.breadcrumb ul>li:not(:last-child):after{content:'\e733';font-family:"iconfont";margin-left:5px;color:#ccc}
.breadcrumb ul>li:last-child>a{color:#eee}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.address{width:270px;display:inline-block;color:rgba(255, 255, 255, 0.9);margin-top:20px}
.container{width:1170px;margin:0 auto;padding:0 15px 20px;text-align:left;color:#fff;max-width: 100%}
.container>.content{background:#fff;padding:30px;box-shadow:0 3px 10px rgba(0,0,0,.3);min-height:81vh}
.head{display:inline-block}
.head>div{display:grid;grid-template-columns:max-content auto;align-items:center;text-align:left}
.head>div img{margin-right:10px}
#main-layout>div{padding-top:7vh;color:#000}
#main-layout img{width:180px}
#main-layout ul{list-style:none;padding:0;margin:0;display:inline-block}
#main-layout ul>li{display:block;margin:10px 0;}
/*#main-layout ul>li>a{display:block;background:#00439a;color:#fff;border:1px solid #00439a;border-radius:30px;padding:7.5px 40px;text-decoration:none;width:320px;font-size:18px;transition:.1s all;white-space:nowrap}*/
#main-layout ul>li>a{display:block;background:#93ff9f;color:#fff;border:1px solid transparent;border-radius:30px;padding:7.5px 40px;text-decoration:none;min-width:320px;font-size:18px;transition:.1s all;white-space:nowrap;margin-left: auto; margin-right: auto;display: inline-block;}
#main-layout ul>li>a:hover{transition:.3s all;background:#f7cfb2;}

/* START MENU COLOR 
=========================================== */
/* MENU 1*/
#main-layout ul>li:first-child>a{background:#fa9a00;color: rgb(35, 35, 35);}
#main-layout ul>li:first-child>a:hover{background: #ffab4b;color: rgb(35, 35, 35);}
/* MENU 2*/
#main-layout ul>li:nth-child(2)>a{background:rgb(242, 255, 0);color: rgb(19, 19, 19);}
#main-layout ul>li:nth-child(2)>a:hover{background:rgb(238, 255, 0);color: rgb(19, 19, 19);}
/* MENU 3*/
#main-layout ul>li:nth-child(3)>a{background:rgb(8, 193, 39);color: #000;}
#main-layout ul>li:nth-child(3)>a:hover{background:rgb(13, 220, 13);color: #000;}
/* MENU 4*/
#main-layout ul>li:nth-child(4)>a{background:rgb(8, 115, 216);}
#main-layout ul>li:nth-child(4)>a:hover{background:rgb(44, 152, 253);color: white;}
/* MENU 5*/
#main-layout ul>li:nth-child(4)>a{background:rgb(0, 0, 0);}
#main-layout ul>li:nth-child(4)>a:hover{background:rgb(80, 80, 80);color: white;}
/* MENU 6*/
#main-layout ul>li:nth-child(5)>a{background:rgb(251, 96, 254);}
#main-layout ul>li:nth-child(5)>a:hover{background:rgb(253, 67, 253);color: white;}
/* MENU 7*/
#main-layout ul>li:nth-child(6)>a{background:rgb(234, 196, 107);}
#main-layout ul>li:nth-child(6)>a:hover{background:rgb(250, 213, 122);color: white;}
/* END MENU COLOR 
=========================================== */

#main-layout ul>li:nth-child(4){padding-top:15px;margin-top:15px;position:relative}
#main-layout ul>li:nth-child(4):after{content:'';width:80%;height:2px;border-radius:50%;background:rgba(255,255,255,.2);top:0;left:0;right:0;margin:0 auto;position:absolute}
#main-layout ul>li i{font-size:20px;display:inline-block;vertical-align:middle;margin-right:5px}
#main-layout ul>li span{display:inline-block;vertical-align:middle}
#main-layout h1{font-weight:400;font-size:28px;line-height:38px;margin:0 0 15px;color:#ffffff;text-shadow:0 1px 3px #e97b05} 
#main-layout h2{font-weight:300;font-size:20px;margin:15px 0 10px;color:rgba(255,255,255,.75)}
.fancybox{display:block;position:relative;padding:5px 5px 1px}
.fancybox:after{content:'';background:rgba(255,255,255,.3);width:0;height:0;position:absolute;top:50%;left:0;visibility:hidden;transition:.3s all;border-radius:50%;right:0;margin:0 auto}
.fancybox:hover:after{width:100%;height:100%;visibility:visible;transition:.3s all;border-radius:0;top:0}
#petition-layout{background:#d1ffe2;background-size:cover;background-attachment:fixed;background:#3f55cd}
#report-preview-button{margin-bottom:30px;padding:0 30px}
#report-preview-button:before,#report-preview-button:after{content:'';display:block;width:100%;clear:both}
#report-preview-button button{font-size:20px;font-family:Kanit;padding:7px 15px;background:#f9f9f9;border:1px solid #ccc;cursor:pointer;float:left}
#report-preview-button button:hover{background:#f0f0f0}
#report-preview-button a{padding:7px 60px;border:1px solid #f8c46f;font-size:20px;font-family:Kanit;font-weight:300;background:#fab342;color:#fff;cursor:pointer;transition:.1s all;text-decoration:none;float:right}
#report-preview-button a:hover{background:#f7a727;transition:.3s all}
#petition-layout .wrap-form{width:80%;position:relative;padding-bottom:20px;margin:0 auto;margin-bottom:40px}
#petition-layout .wrap-form:after{content:'';width:100%;height:3px;background:#eee;border-radius:50%;position:absolute;bottom:0;left:0;right:0;margin:0 auto}
#petition-layout h1.heading{background:transparent;color:#000;text-shadow:0 1px 1px rgba(255,255,255,.3);position:relative;display:block;padding-bottom:5px;margin-bottom:50px;margin-top:0;border-bottom:1px solid #ccc;font-weight:400}
#petition-layout h1.heading:after{content:'';width:100%;height:1px;position:absolute;bottom:0;left:0;background:rgba(255,255,255,.3)}
#petition-layout h1.heading>i{display:inline-block;vertical-align:middle;margin-right:5px;font-size:30px}
#petition-layout h1.heading>span{display:inline-block;vertical-align:middle}
#petition-layout .form-group{display:grid;grid-template-columns:180px auto;margin-bottom:20px}
#petition-layout .form-group label:after{content:':'}
#petition-layout .form-group label{text-align:right;padding-right:15px;color:#000;font-size:15px;font-family:Arial,sans-serif;padding-top:7px;font-weight:700}
#petition-layout+.address{width:100%;margin:0;padding:7px;font-size:13px;color:#fff;font-family:Arial,sans-serif;text-align:center;background:#367ced}
.show-print{display:none}
.success-message{max-width:100%;margin:0 auto;color:#000;text-align:center;font-weight:400;padding-top:20px}
.success-message>p{margin:0 0 5px;color:green}
.success-message>p:not(:first-of-type){color:red}
.success-message>div{padding:30px 0}
.success-message>div>div{margin-bottom:20px}
.success-message>div>div>span{display:block;margin-bottom:2px}
.success-message>div>div>input[type='text']{background:#eee;padding:10px;text-align:center;width:270px;max-width: 100%}
.success-message>div>div:last-child{margin-top:50px}
.success-message>div>div:last-child>button{width:auto;display:inline-block;vertical-align:middle;font-size:18px;padding:7px 50px;font-family:Kanit;background:#ff4500;color:#fff;border:1px solid #ff4500;font-weight:300;margin:0 5px;cursor:pointer;transition:.1s all}
.success-message>div>div:last-child>button:hover{background:#ff6f39;border-color:#ff6f39;transition:.3s all}
.success-message>div>div:last-child>button img{width:24px;display:inline-block;vertical-align:middle;margin-right:5px}
.success-message>div>div:last-child>button span{display:inline-block;vertical-align:middle}
.logo-print img{width:130px;margin-bottom:0}
.logo-print p{font-size:20px;margin:0}
.logo-print>div{margin-top:10px!important}
#petition-check-form{display:inline-block;padding:50px;border:1px solid #ccc;background:#f9f9f9;width:550px;max-width:100%;margin-bottom:50px}
#petition-check-form .form-group{display:block;text-align:center}
#petition-check-form .form-group label{display:block;text-align:center;margin-bottom:2px;color:#333;font-family:Kanit;font-size:18px;font-weight:400}
#petition-check-form .form-group label:after{display:none}
#petition-check-form .form-group input{padding:12px;width:270px;text-align:center;width:100%}
#petition-check-form button{width:100%}
#report{color:#000;position:relative;font-family:Arial,sans-serif}
#report>div{margin:0 30px 30px;border:1px solid #ccc;text-align:center;padding:20px 30px}
#report h3{font-weight:400;text-align:center;font-size:28px;margin:0;font-family:Kanit}
#report h3.heading{margin-top:20px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.45);margin-bottom:20px}
#report h3+p{font-size:22px;margin:0;color:#000;font-family:Kanit;font-weight:400}
#report h3+p+p{font-size:18px;color:#000;margin:0;font-family:Kanit;font-weight:400}
#report .logo{width:140px;margin-top:15px;margin-bottom:5px}
#report .information{text-align:left;margin:30px 0}
#report .information p{margin:0 0 5px}
#report .information .status{color:blue;font-weight:700}
#report .information .status.success{color:green}
#report .information .failed{color:#999}
#report .information .col2{display:grid;grid-template-columns:175px auto;align-items:top}
#report .information .col2>p:first-child{font-weight:700}
#report .information .col2 .detail{padding:10px 15px;background:#f9f9f9;margin-bottom:10px;max-width:100%}
#report .information .img>div{display:grid;grid-template-columns:33.33% 33.33% 33.33%;margin:0 -5px}
#report .information .img img{margin:0;max-width:100%;padding:0}
#report .information .img{border-top:2px solid #eee;margin-top:15px;padding-top:15px;display:block}
#report .information .img b{font-weight: bold;}
#report .right-top-content{position:absolute;top:10px;right:50px}
#report .right-top-content>p{display:grid;grid-template-columns:130px auto;text-align:left;align-items:center}
#report .right-top-content>p>span{display:block}
#report .right-top-content>p>span:first-child{text-align:right;margin-right:15px;font-weight:700}
#report .right-top-content>p:last-child{font-weight:400}
#report-action{text-align:right;margin:0 30px 10px}
#report-action a,#report-action button{display:inline-block;vertical-align:middle;padding:7px 20px;font-size:16px;cursor:pointer}
#report-action a{background:#069;color:#fff;border:1px solid #069;text-decoration:none;padding:5px 20px;transition:.1s all}
#report-action a:hover{background:#09c;transition:.3s all}
#report-action a>span{display:inline-block;vertical-align:middle}
#report-action a>i{display:inline-block;vertical-align:middle;margin-right:5px;font-size:20px}
.image-report,.detail-report{margin:10px 0 0}
.detail-report>div{padding:0;display:inline}
.image-report>div{display:grid;grid-template-columns:25% 25% 25% 25%;margin:0 -5px}
#report-action-bottom{text-align:center}
#report-action-bottom button{width:280px;display:inline-block;vertical-align:middle;font-size:18px;padding:7px 25px;font-family:Kanit;background:#14ce3c;color:#fff;border:1px solid #06ca89;font-weight:300;margin:0 5px;cursor:pointer;transition:.1s all;max-width: 100%}
#report-action-bottom button>img{display:inline-block;vertical-align:middle;margin-right:5px}
#report-action-bottom button>span{display:inline-block;vertical-align:middle}
#report-action-bottom button:hover{background:#46eb6a;border-color:#46eb6a;transition:.3s all}
#report-description{margin-top:30px;padding:20px;background:#f9f9f9}
.edit-images{display:grid;grid-template-columns:33.33% 33.33% 33.33%}
.edit-images>div{padding:5px;position:relative}
.edit-images>div a{display:inline-block;text-decoration:none;position:absolute;top:0;right:0;font-size:35px;color:#c33;font-family:Arial,Helvetica,sans-serif;line-height:30px}
.edit-images>div a:hover{color:red}
.edit-images>div a i{font-style:normal}
#hamberger{display: none;position: fixed; top: 30px; right: 15px; z-index: 10001; color: rgb(255, 255, 255); text-decoration: none; font-size: 24px;}
#hamberger:before{content: '\e728';font-family: "iconfont";font-size: 30px;}
.navbar #hamberger:before{content: '\e734';font-family: "iconfont";font-size: 30px;}
.navbar #hamberger{top: 10px;}
@media(max-width: 1099px){
	header nav > ul > li > a{padding: 8px 15px}
	header > div .title h1{font-size: 18px;}
}
@media(max-width: 992px){
	header nav>ul{border-radius: 0;}
	header{position: relative;}
	header > div img{height: 80px;}
	header > div .title h2{font-size: 18px;}
	header > div .title h1{font-size: 16px;}
	header nav{position: absolute;top: 0;right: -300px;width: 260px;height: 100vh;background: #0a2bc0;z-index: 1000;box-shadow: 0 1px 3px rgba(0,0,0,.3);transition: .1s right}
	.navbar header nav{right: 0;transition: .3s right}
	header nav ul{display: block;box-shadow: none;}
	header nav ul>li{display: block;float: none;text-align: left}
	header nav > ul > li:first-child > a{padding-left: 15px;}
	header nav>div{display: block;text-align: center;padding-bottom: 10px;margin-bottom: 10px;}
	header nav>div img{width: 80px;margin-top: 10px;}
	header nav>div a{text-decoration: none;color: rgb(12, 12, 12);}
	header nav>div h1{font-size: 16px;margin: 0;font-weight: normal;}
	header nav>div h2{font-size: 16px;margin: 0;font-weight: normal;}
	header nav > ul > li >a i{display: none;}
	#hamberger{display: inline-block;}
	body{padding-top: 96px}
	.wrap-header{position: fixed;top:0;left: 0;width: 100%;z-index: 1000;box-shadow: 0 1px 3px rgba(0,0,0,.3)}
	#report-action-bottom{margin-bottom: 70px;}
}
@media(max-width: 767px){
	.image-report > div,#report .information .img > div{grid-template-columns: 50% 50%;}
	#report-action{margin-right: 0;}
	#report .right-top-content{position: relative;top: initial;right: initial;margin-top: 30px;}
	#report .right-top-content > p{display: block;margin: 0 0 5px}
	#report .right-top-content > p > span{display: inline;margin: 0 !important}
	#report .right-top-content > p > span:first-child{text-align: left}
	#petition-layout .form-group{grid-template-columns: auto}
	#petition-layout .form-group label{text-align: left}
	#petition-layout .wrap-form{width: auto;max-width: 100%}
	#petition-layout h1.heading{margin-bottom: 30px;font-size: 25px;}
	.container > .content{padding-bottom: 70px;}
	header>div .title h1 span{display: none;}
	header > div img{height: 55px;}
	body{padding-top: 66px;}
	header > div{align-items: top}
	#hamberger{top: 17px}
	header > div .title{margin-top: -5px;}
	header{padding-bottom: 0;}
	#report .information .col2{grid-template-columns: auto;display: block;margin-bottom: 5px;}
	#report .information .col2>*{display: inline}
	#report > div{margin: 0 0 30px}
	#report-preview-button{padding: 0}
	.container > .content{padding: 15px}
	#report > div{padding: 0;border: 0;}
	#report .information{margin-top: 0;}
	#report h3{font-size: 26px;}
	#report h3 + p{font-size: 20px;}
	#report h3 + p+p{font-size: 20px;}
	.sm-mb-50{margin-bottom: 70px;}
	.container{padding: 0}
}
@media(max-width: 499px){
	#petition-check-form{padding: 30px 15px}
	#petition-check-form button{width: 100%;max-width: 100%;padding-left: 0;padding-right: 0}
	#petition-layout h1.heading > i{display: inline}
	#petition-layout h1.heading > span{display: inline}
}
@media(max-width: 399px){
	#report-preview-button>button{width: 100%;text-align: center;margin-bottom: 10px;}
	#report-preview-button>a{width: 100%;text-align: center;margin-bottom: 40px;}
}
@media(max-width: 359px){
	#report-action-bottom button{padding-left: 0;padding-right: 0;width: 100%}
	.success-message > div > div:last-child > button{padding-left: 0;padding-right: 0;width: 100%;text-align: center}
	header > div .title h2{font-size: 0;}
	header > div .title h2:before{content: 'องค์การบริหารส่วนตำบลทุ่งรวงทอง';font-size: 16px;}
}
@media(max-width: 349px){
	.container > .content{padding: 15px 15px 70px}
}
@media print {
body,html,#petition-layout{background:#fff!important}
.container>.content{box-shadow:none}
.hidden-print{display:none!important}
.print-center{text-align:center}
.show-print{display:block}
.success-message{display:inline-block;border:1px solid #999;width:600px;padding-bottom:60px}
.success-message .petition-number{margin-top:0!important;border:1px solid #ccc;display:inline-block;padding:20px 30px;background:#f9f9f9}
#report>div{border:0;padding:0}
#report .logo{margin-top:0}
#report .information .col2 .detail{padding-right:30px}
.detail-report>div{padding-right:40px;display:inline-block}
}