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

button[type='submit']:hover{background:#176ed7;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:18px;text-align:left;font-weight:400;margin:0;color:#9c48b4;text-shadow:none}

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

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:#116cdc}

header nav>ul>li.active>a{background:#f6ff95;font-size:16px;color:#0051b5}

.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:#d5ecfe;margin-top:15px}

.wrap-header{background:#0c2d58;background:#f6ff90;position: relative;}

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

.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:#ebfd2b;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:#116cdc;color:#fff;border:1px solid #e0f0ff;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:#f6ff90;color:#116cdc;border-color:#ffffff}

#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:400;font-size:22px;margin:15px 0 10px;color:#ebfd2b}

.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:#10a0ff;background-size:cover;background-attachment:fixed;background: #2271f0;
background: linear-gradient(180deg, rgba(34, 113, 240, 1) 34%, rgba(31, 176, 224, 1) 100%);}

#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:#116cdc}

.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:#e96601;color:#fff;border:1px solid rgb(249, 82, 21);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:#139eff;color:#fff;border:1px solid #fff;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:#ff8e37;border-color:#ff9e54;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: #116cdc; 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: #217cec;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}

}