@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.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 #0472FF;font-size:20px;font-family:Kanit;font-weight:300;background:#0472FF;color:#fff;cursor:pointer;transition:.1s all}



button[type='submit']:hover{background:#0048a5;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:#fff;text-shadow:none}



header>div .title h2{font-size:20px;text-align:left;font-weight:400;margin:0;color:#fff}



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:#fff;text-decoration:none;background:#7fcb25}



header nav>ul>li.active>a{background:#c18423}



.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:#0472ff;position: relative;}



.breadcrumb{text-align:left;background:#b97f22}



.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,.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:#7fcb25;color:#fff;border:1px solid #7dc725;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:#cf8e26;color:#fff;border-color:#dc9728}



#main-layout ul>li:nth-child(5){padding-top:15px;margin-top:15px;position:relative}



#main-layout ul>li:nth-child(5):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:#fff;text-shadow:0 1px 3px #00439a}



#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:#79c123;background-size:cover;background-attachment:fixed;background:#79c123}



#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 #0472FF;font-size:20px;font-family:Kanit;font-weight:300;background:#0472FF;color:#fff;cursor:pointer;transition:.1s all;text-decoration:none;float:right}



#report-preview-button a:hover{background:#0048a5;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;position:fixed;bottom:0;left:0;text-align:center;background:#a06e1d}



.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:205px 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;}



/*dd ad   



#report .information .attach>div{display:grid;grid-template-columns:20% 20% 20% 20% 20%;margin:0 -5px}



#report .information .attach img{margin:0;max-width:100%;padding:0} */



#report .information .attach{border-top:2px solid #eee;margin-top:15px;padding-top:15px;display:block}



#report .information .attach b{font-weight: bold;}

/* end dd add*/



#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:#df76ad;color:#fff;border:1px solid #df76ad;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:#139eff;border-color:#139eff;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: white; 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: #0472ff;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: white;}



	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}



}