@charset "utf-8";
/* CSS Document */
* {
    -webkit-text-size-adjust: none !important;
}
html, body
{
  height: 98%;
}
body { 
	padding:0px; margin:0px;
    line-height:1.8;
    font-family:'sarabun', arial, Helvetica, sans-serif;
    font-size:16px;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background:#fff; color:#333;
	line-height:23px;
}

a {/*color:#233444;*/color:#498a6a; text-decoration:none; cursor:pointer;}
a:hover { text-decoration:underline;}
a img{border:none; cursor:pointer;}
.img_click {cursor:pointer;}
.img_clear {margin-left:-26px; width:16px; opacity:0.7; display: inline; vertical-align:middle;}
@-moz-document url-prefix() { 
  .img_clear {
	  position:absolute;
	  margin-left:-20px; 
	  margin-top: 9px;
  }
}

input[type="submit"], input[type="button"], button{ 
    padding:7px 15px; margin:0px; font-family: 'sarabun', arial, Helvetica, sans-serif;  font-size:15px;
	background:#233444; color:#fff; border:none;
	border-radius: 3px;	-moz-border-radius:3px; -webkit-border-radius:3px; cursor:pointer; -webkit-appearance: none;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], textarea, input[type="date"]{ 
	border-radius: 3px;  
	-moz-border-radius:3px; 
	-webkit-border-radius:3px; 
	border:1px solid #cbcbcb;  
	min-height:25px; 
	font-size:15px;
	color:#000; /*color:#333;*/
	padding-left:5px;
	margin-bottom:2px; margin-top:2px;
	font-family:'sarabun', arial, Helvetica, sans-serif;
	-webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
	width:99%; max-width:600px; min-width:300px;
	-webkit-appearance: none;
}
input.mini{ min-width:80px !important; width:80px !important;}
input.short{ min-width:150px !important; width:150px !important;}
input.medium{ min-width:260px !important; width:260px !important;}
input.down{ min-width:343px !important; width:343px !important;}
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(255, 180, 0, 0.5);
  border: 1px solid rgba(255, 180, 0, 0.5);
}
input:disabled, input:readonly{
  cursor: default;
  background:#e9e9e9;
}
label.click{
  cursor: pointer;
  padding:8px;
}

input[type="checkbox"], input[type="radio"] {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
}

input[type="radio"] {
    width:16px;
    height:16px;
    background: #fff;
    border-radius:10px;
    border:2px solid #4a5865;
	margin:2px;
	cursor:pointer;
	vertical-align:middle;
}
input[type="radio"]:checked {
    background: #fff url(../images/radio.png);
    background-size: 100%;
}
input[type="radio"]:disabled, input[type="radio"]:readonly {
	background:#fff; 
	border:2px solid #838383;
	cursor:default;
}
input[type="radio"][disabled][checked], input[type="radio"][readonly][checked]{
	background: #fff url(../images/radio_dis.png);
	background-size: 100%;
	border:2px solid #838383;
	cursor:default;
}

input[type="checkbox"] {
    width:16px;
    height:16px;
    background: #fff;
    border-radius:3px;
    border:2px solid #4a5865;
	margin:2px;
	cursor:pointer;
	vertical-align:middle;
}
input[type="checkbox"]:checked {
    background: #fff url(../images/checkbox.png);
    background-size: 100%;
}
input[type="checkbox"]:disabled, input[type="checkbox"]:readonly {
	background:#fff; 
	border:2px solid #838383;
	cursor:default;
}
input[type="checkbox"][disabled][checked], input[type="checkbox"][readonly][checked]{
	background: #fff url(../images/checkbox_dis.png);
	background-size: 100%;
	border:2px solid #838383;
	cursor:default;
} 


.vat input[type="radio"]:disabled {
  border-radius: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid #999;
  transition: 0.2s all linear;
  outline: none;
  position: relative;
  top:1px;
  margin:4px;
  cursor:default;
}
.vat input[type="radio"]:checked {
  border: 5px solid #aaa;
  background:none;
}
.vat label input[type=checkbox], .vat label input[type=radio] {
    vertical-align: top;
}


select, option, optgroup ,select option {font-family:'sarabun', arial, Helvetica, sans-serif; font-size:14px;  }

select, option {/*font-family:'sarabun', arial, Helvetica, sans-serif;*/
  -webkit-appearance: none; 
  background:url(../images/down.png) no-repeat right;
  background-size:15px;
  padding: 3px 10px;
  border-radius: 3px;
  background-color: #fff;
  border:#cbcbcb 1px solid;
  min-height:28px; 
 }
ul, li { list-style:none;}
td { vertical-align:top;}
hr {border-top: 1px dotted #acacac;
	border-bottom: 1px dotted #fff;}

.btn_blue {background:#0097cc !important;}
.btn_green {background:#1eaf62 !important;}
.btn_gray {background:#c5c5c5 !important; color:#222 !important;}
.btn_dis {background:#c5c5c5 !important; color:#888 !important; cursor: inherit !important;}
.btn_red {background:#fe605d !important;}
.btn_orange {background:#ee7b00 !important;}
.btn_star {background:#0097cc url(../images/i_star_w.png) no-repeat left !important; padding-left:30px !important; background-position:8px !important; background-size:15px !important;}
input.btn_member {background:#0097cc url(../images/i_man.png) no-repeat left; padding-left:30px ; background-position:8px; background-size:15px;}
input.btn_norate {background:#fe605d url(../images/i_norate_wh.png) no-repeat left; padding-left:30px; background-position:8px; background-size:15px;}
.mainbody {height:100%;}
.eg {color:#777; font-size:13px;}
label.error, .error{font-size:13px; color:#F00;}
.warning { color:#F00;}
.maxwidth { max-width:180px; word-wrap:break-word; }
.pagebreak {page-break-before: always;}

/*------------ Project --------------*/
.bg {background:url(../images/bg.jpg) repeat-y center;  background-size:cover; width:100%; height:100%; position:absolute; display:block; opacity: 0.7; z-index:-1;}
.projectbox table{ 
	margin:7% auto; width:60%; max-width:700px; 
	background:rgba(255,255,255,0.8); 
	border-radius:10px; padding:20px 30px 30px 30px;
	box-shadow: 0 0 10px rgba(80, 80, 80, 0.5);
    border: 1px solid rgba(100, 100, 100, 0.7);
}
.projectbox .select_mate{ width:500px; font-size:18px; padding:5px 0;}
.projectbox input[type="submit"],.projectbox input[type="button"],.projectbox button { padding:7px; font-size:18px;}
.projectbox .login td{ font-size:18px; vertical-align:middle !important;}
.projectbox input { font-size:18px;}
.projectbox .login .warning { font-size:14px;}

/*------------ Left Tool --------------*/
.tool { width:70px; background:#f5f5f5; border-left:2px #ccc solid;}
.tool li, .nodata li { display:block;text-align:center; border:3px #233444 solid;   border-radius:40px; padding:10px 6px; margin:6px; 
transition: all .3s ease-in-out;}
.tool img, .nodata img { width:30px; vertical-align:middle; }
.tool li:hover, .nodata li:hover{ cursor: pointer; background:#10c1a5; padding:15px 10px; border:3px #10c1a5 solid;}
.tool li:hover {margin:0px;}
.nodata li:hover {margin:0px auto;}
.tool .text, .nodata .text{ position:absolute;
  opacity: 0; color:#fff; width:60px; margin-left:-13px;
  text-align: center; font-size:16px; font-weight:bold;
  padding-top: 0px;
  transition: all .3s ease-in-out;
}
.tool li:hover .text, .nodata li:hover .text{padding-top: 5px; opacity: 1;}
.tool li:hover img, .nodata li:hover img{opacity: 0.2;}
.tool #upload_link, .tool #upload_link_voice{text-decoration:none;}
.tool #upload, .tool #upload_voice{ display:none}

.nodata li {width:40px; margin:0px auto;}
.nodata {text-align:center; display:block; width:100%; margin:20px auto; padding:40px 0; border-top:#39b7ac 25px solid;}

.toptool { margin-top:-17px;}
.toptool li { display:inline-block; text-align:center; border:2px #233444 solid;   border-radius:40px; padding:6px; margin:4px; 
transition: all .3s ease-in-out;}
.toptool img { width:30px; vertical-align:middle; }
.toptool li:hover{ cursor: pointer; background:#10c1a5; border:2px #10c1a5 solid;}
.toptool .text{ position:absolute;
  opacity: 0; color:#fff; width:60px; margin-left:-15px;
  text-align: center; font-size:16px; font-weight:bold;
  padding-top: 0px; margin-top:-2px;
  transition: all .3s ease-in-out;
}
.toptool li:hover .text{padding-top: 5px; opacity: 1;}
.toptool li:hover img{opacity: 0.2;}

/*------------ List Data --------------*/
.h1_title {color:#39b7ac; font-size:1.8em; padding:10px 0;}
.h1_title a{ color:#498a6a; font-size:0.6em;}
.h1_title span{vertical-align:middle !important;}
.listdata a {text-decoration:none; }
.listdata { border-bottom:#ccc 2px solid; min-width:650px;}
.listdata a:focus {outline: none;}
.listdata th{ background:#39b7ac; color:#fff; text-align:left; font-weight:500; padding:1px 4px;}
.listdata th.sort, .listdata th.sort_up, .listdata th.sort_down {cursor:pointer;}
.listdata .mergeCol {text-align:center !important; padding:2px;}
th.sort:after {
	background: url(../images/i_sort.png) no-repeat; 
	padding-right:15px; background-size:10px; background-position:center;
	content: "";
}
th.sort_up:after {
	background: url(../images/i_up.png) no-repeat; 
	padding-right:15px; background-size:10px; background-position:center;
	content: "";
}
th.sort_down:after {
	background: url(../images/i_down.png) no-repeat; 
	padding-right:15px; background-size:10px; background-position:center;
	content: "";
}
.listdata tr:hover td{border-top:#9fcbc7 1px solid !important; border-bottom:#9fcbc7 1px solid !important; background:#e5f2f1!important; }
.listdata td {padding:6px 4px; border-top:#dfdfdf 1px solid; border-bottom:#fff 1px solid;}
.listdata tr:nth-of-type(odd) td{ background:#f5f5f5;}
/*.listdata td:last-child { text-align:center; width:150px;}*/
.listdata img { vertical-align:middle;}
.listdata tr.main td { background:#f0f0f0;}
.listdata tr.sub td:nth-of-type(2):before 
{
	content: ""; background : url(../images/i_arrow.png) no-repeat; background-size:60%; 
	padding-left:25px;  background-position:center;
}
.listdata td:last-of-type { text-align:right;}
.frm .listdata td:last-of-type { text-align: inherit;}
.list { padding:10px; border-radius:5px; margin:10px auto;}
.list .title{border-bottom:#39b7ac 2px solid; font-weight:bold; font-size:18px; margin-bottom:5px; }
.list .title span { font-weight:inherit; font-size:15px; color:#355b6d;}
.list .title span strong { font-size:18px; color:#333;}
.listdata td:last-of-type a { margin-right:10px;  color:#233444;}
.listdata .tab {border-bottom:#089286 1px solid; font-size:12px; line-height:normal; text-align:center;}
.listdata .subtab {font-size:12px;}
.listdata .subtab th, .listdata .subtab td {padding:0; text-align:center; width:60px;}
.listdata .imgcen{ margin:0 auto; display:block; position:relative;}
.listdata .items { padding:0 5px; background:#e5f2f1 !important; border-bottom:#bce7e3 1px solid; border-top:#bce7e3 1px solid; text-align:left !important;}


.list_assign { border-bottom:#39b7ac 1px solid;}
.frm .list_assign td{ padding:0;}
.list_assign .tbmain {background:#bce7e3 !important; 
	border-bottom:#9cdbd5 1px solid; border-top:#39b7ac 1px solid; 
	padding:4px; line-height:15px;}
.list_assign .tbmain td {vertical-align:middle !important; padding:3px 0;}
.list_assign .tbmain a { font-weight:bold; color:#000;}
.list_assign .tbmain span {font-size:12px; color:#05645c}
.list_assign .tbhead {background:#e5f2f1;}
.list_assign .tbhead td {border-bottom:#bce7e3 1px solid; }
.list_assign .tbdata tr:first-of-type td {border-top: border-top:#bce7e3 1px solid !important;}
.list_assign .tbhead td td { padding:0 5px;  }
/*.list_assign .tbhead span { color:#138f84; font-size:12px;}*/
.list_assign .tbdata td {padding:4px; border-top:#dfdfdf 1px solid; vertical-align:top;}
.list_assign .tbdata td td { padding:0; border:none;}
.list_assign img { vertical-align:middle;}
.list_assign td:last-of-type a img{ margin-right:10px;}

.listsub {border:#39b7ac 1px solid; width:100%; min-width:600px;}
.listsub th{background:#39b7ac; color:#fff; text-align:left; font-weight:500; font-size:12px; padding:2px 4px; line-height:18px; text-align:center;}
/*.listsub input[type="text"] { width:90% !important;}*/
.listsub .big{font-size:14px;}
.listsub .tab {border-bottom:#089286 1px solid; font-size:12px; min-width:100px;}
.listsub td {background:#fff; padding:3px 5px !important;}
.listsub td, .listsub th { vertical-align:middle;}
.vTop, .vTop td{vertical-align:top !important;}
.vTop td { border-bottom:#39b7ac 1px solid; padding:10px 5px !important;}
.vTop textarea { width:98% !important;}
input.price { text-align:right !important;}
input.button_delete { background:#fff; border:#E95454 1px solid; border-radius:20px; color:#E95454;
 padding:0 3px; height:20px; background:#fce7e7; font-size:10px; line-height:inherit;
 vertical-align:middle; line-height:normal;}
input.button_add { background:#39b7ac; color:#fff; padding:2px 10px; line-height:inherit; border-radius: 0 0 10px 10px; font-size:14px;}
.more { right:0; float:right;}
.sumprice td {background:#e5f2f1 !important; border-top:#bce7e3 1px solid; font-weight:bold;}


.count { font-size:13px; color:#666; padding:0 5px; margin-top:10px;}
.count span{ font-weight:bold; font-size:16px;}
.count, .page { vertical-align:middle;}
.tap .two { width:30%; border-left:#ccc 2px solid;}

/*------------ Stat --------------*/

.statdata a {text-decoration:none; }
.statdata { border-bottom:#ccc 2px solid; border-left:#ccc 1px dotted;}
.statdata a:focus {outline: none;}
.statdata th{ background:#39b7ac; color:#fff; text-align:center; font-weight:500; padding:1px 2px; border-right:#ccc 1px dotted;}
.statdata th.sort, .statdata th.sort_up, .statdata th.sort_down {cursor:pointer;}
.statdata td {padding:4px 2px; border-top:#dfdfdf 1px solid; border-bottom:#fff 1px solid; border-right:#ccc 1px dotted;}
.statdata th.blank { background:#23a59a !important; padding:0px;}
.statdata td.blank { background:#e0e0e0 !important; padding:0px;}
.statdata tr:nth-of-type(1) th{border-bottom:#ccc 1px dotted;}
.score { text-align:center; width:3.5%;}
.statdata .total { background:#d5f7f4; text-align:center; font-weight:bold;}
.statdata .total .blank { background:#c4eae7 !important;}
.statdata .correct { background:#cbf3bf; text-align:center; vertical-align:top; color:#060;}
.statdata .incorrect { background:#fdd3d3; text-align:center; vertical-align:top; color:#900;}
.statdata .incorrect img, .statdata .correct img { margin-top:5px;}
.statdata th.linel , .statdata td.linel { border-left:#777 1px dotted ;}
.statdata th.liner , .statdata td.liner { border-right:#777 1px dotted ;}


/*------------ Search --------------*/
.search { background:#f5f5f5; padding:5px; border-radius:5px; margin:5px 0;}
.search .blank { width:10%;}
.search input[type="submit"],.search input[type="button"],.search button { padding:5px 10px; font-size:14px;}
.search a { font-size:14px;}

/*------------ From --------------*/
.frm { background:#f5f5f5; padding:10px; border-radius:5px; width:100%; margin:5px auto;}
.frm td { padding:4px 2px;}
.frm td td { padding:2px;}
.frm .title{border-bottom:#39b7ac 2px solid; font-weight:bold; font-size:18px; margin-bottom:10px; }
.frm .title span { font-weight:inherit; font-size:15px; color:#355b6d;}
.frm .title span strong { font-size:18px; color:#333;}
.mtitle {font-weight:bold; font-size:18px; margin-bottom:3px;}
.title_bar { background:#39b7ac; color:#fff; font-weight:bold; font-size:18px; margin-bottom:10px; padding:2px 5px;}
.title_bar span{font-weight: 200; font-size:14px;}
.frm .frmfield td:nth-of-type(1) {/*width:20%; min-*/width:150px;}
.frm .frmfield .nofield td:nth-of-type(1) { width:15px !important;}
.frm .frmfield td td:nth-of-type(1), .frm .frmfield td td td:nth-of-type(1) {width: inherit; margin:0;}
.frm .frm_check td:nth-of-type(1){ width:100px;  min-width:100px;}
.frm a{text-decoration:underline;}
.frm a img {vertical-align:middle;}
.frm input[type="text"],.frm input[type="password"],.frm input[type="email"],.frm input[type="number"],.frm input[type="tel"],.frm textarea,.frm input[type="date"] {width:300px;}
.button { margin:10px 0; /*right:0; text-align:right;*/}

.checkbox.custom {
  float: left; margin: 0 0 5px 0; padding: 0; display: block;
  width: 100%; 
}
.custom input[type="radio"].custom, .custom input[type="checkbox"].custom {margin-left: 0;padding: 0;}
.custom input[type=radio].css-checkbox, .custom input[type=checkbox].css-checkbox {
  position: absolute; overflow: hidden; clip: rect(0 0 0 0);
  height: 1px; width: 1px; margin: -1px; padding: 0px; border: 0;
}
.custom input[type=radio].css-checkbox+span.css-label, .custom input[type=checkbox].css-checkbox+span.css-label {
  height: 25px; width: 25px; display: inline-block; line-height: 25px;
  background-repeat: no-repeat; background-position: 0 0; vertical-align: middle; cursor: pointer; opacity: 1;
}
.custom input[type=radio].css-checkbox+span.css-label:hover, .custom input[type=checkbox].css-checkbox+span.css-label:hover{opacity: 0.8;}
.custom input[type=radio].css-checkbox:checked+span.css-label, .custom input[type=checkbox].css-checkbox:checked+span.css-label {background-position: 0 -26px;}
.custom .css-label {background-image: url(../images/check1.png) !important; }
.custom {font-size: 16px; font-weight:bold;}
.custom label {cursor: pointer; }


/*------------ Research --------------*/
.research {background:#f5f5f5; padding:10px; border-radius:5px; width:95%; margin:5px auto;}
.research .title{border-bottom:#39b7ac 2px solid; font-weight:bold; font-size:18px; margin-bottom:10px;}
.research a{text-decoration:underline;}
.research .listdata th { font-size:17px; text-align:center;}
.research .listdata td { font-size:17px; padding: 10px 15px; background:#fff;}


/*------------ Report --------------*/
.choice {background:#f5f5f5; padding:15px 5px; border-radius:5px; margin:5px auto;}
.choice td{ padding:20px 35px; vertical-align:middle; }
.choice div { border:1px #ccc solid; border-radius:10px; background:#fff; min-width:300px;}
.choice div ul { margin:0; padding:0;}
.choice div li { display:inline-block; padding:5px 10px; vertical-align:middle; font-size:20px;}
.choice div li img{ width:45px; vertical-align:middle;}
.choice div li:nth-of-type(1) {border-right:1px #ccc solid;}

.graph { width:40%; min-width:550px;}

.graph dl {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  position: relative;
  padding: 0 20px;
}

.graph dt {
  align-self: flex-start;
  width: 100%;
  font-weight: 700;
  display: block;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 20px;
}

.graph .text {
  display: flex;
  align-items: center;
  height: 40px;
  width: 130px;
  position: absolute;
  left: 0;
  justify-content: flex-end;
}

.graph .num {
  display: flex;
  align-items: center;
  height: 40px;
  width: 170px;
  position: absolute;
  left: 0;
  justify-content: flex-end;
  z-index:100;
  color:#eee;
}
.graph .scale { 
  margin-left: 115px; 
  width: 430px; 
  border-top:#ddd 1px solid;
}
.graph .scale li{ 
  display:inline-block;
  font-size: 10px;
  padding-left:13px;
  line-height:10px;
}

.percentage {
  font-size: .8em;
  line-height: 1;
  text-transform: uppercase;
  width: 100%;
  height: 40px;
  margin-left: 130px;
  background: repeating-linear-gradient(to right, #ddd, #ddd 1px, #fff 1px, #fff 6.67%);
}

.graph dd:nth-of-type(1):after {background-color: #f53051;}
.graph dd:nth-of-type(2):after {background-color: #70b11f;}
.graph dd:nth-of-type(3):after {background-color: #f7941c;}
.graph dd:nth-of-type(4):after {background-color: #1481c4;}
.graph dd:nth-of-type(5):after {background-color: #91268e;}

.percentage:after {
  content: "";
  display: block;
  background-color: #2a5c63;
  width: 50px;
  margin-bottom: 10px;
  height: 60%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: background-color .3s ease;
}
.percentage:hover:after, .percentage:focus:after {
  background-color: #aaa;
}
.percentage-0 .num, .percentage-1 .num {color:#39b7ac;}
.percentage-0:after {width: 0.33%;}
.percentage-1:after {width: 3.33%;}
.percentage-2:after {width: 6.67%;}
.percentage-3:after {width: 10%;}
.percentage-4:after {width: 13.33%;}
.percentage-5:after {width: 16.67%;}
.percentage-6:after {width: 20%;}
.percentage-7:after {width: 23.33%;}
.percentage-8:after {width: 26.67%;}
.percentage-9:after {width: 30%;}
.percentage-10:after {width: 33.33%;}
.percentage-11:after {width: 36.67%;}
.percentage-12:after {width: 40%;}
.percentage-13:after {width: 43.33%;}
.percentage-14:after {width: 46.67%;}
.percentage-15:after {width: 50%;}
.percentage-16:after {width: 53.33%;}
.percentage-17:after {width: 56.67%;}
.percentage-18:after {width: 60%;}
.percentage-19:after {width: 63.33%;}
.percentage-20:after {width: 66.67%;}
.percentage-21:after {width: 70%;}
.percentage-22:after {width: 73.33%;}
.percentage-23:after {width: 76.67%;}
.percentage-24:after {width: 80%;}
.percentage-25:after {width: 83.33%;}
.percentage-26:after {width: 86.67%;}
.percentage-27:after {width: 90%;}
.percentage-28:after {width: 93.33%;}
.percentage-29:after {width: 96.67%;}
.percentage-30:after {width: 100%;}


/*------------ Footer --------------*/
.imgfile td{ border-bottom:#39b7ac 1px solid; padding:15px 0;}
.imgfile tr:first-of-type td { border:none; font-size:large; font-weight:bold;  padding:0; color:#0f756c}
.imgfile a strong {color:#0f756c;}

/*------------ Footer --------------*/
.footer {width:100%; background:#ccc; text-align:center; display: marker}

/*------------ Print --------------*/
.print .detail span {border-bottom: 1px #555 dashed; padding-bottom: 0em;}
.headtitle { font-size:25px; font-weight:bold; line-height:35px; text-decoration:underline;}
.mainprint { width:90%;/* border:3px #ddd solid;*/ margin:10px auto; }
.mainprint td {font-size:16px}
.mainprint .data { border-top:#555 1px solid;  border-left:#555 1px solid;}
.mainprint .data td, .mainprint .data th {border-right:#555 1px solid;  border-bottom:#555 1px solid; padding:3px;}
.mainprint .data th { background:#eee;}
.mainprint .data td td, .mainprint .data td td td { border:none;}
.mainprint .data .double td{ border-bottom:double #555 !important; }
.print .uls{ border-bottom:#555 1px dotted !important; min-width:80px; vertical-align:bottom !important;}
.print .ul { border-bottom:#555 1px dotted !important; min-width:120px; vertical-align:bottom !important;}
.print .ulb { border-bottom:#555 1px dotted !important; min-width:150px; vertical-align:bottom !important;}
.print .spacetd td{ padding:3px 0 0 6px; }
/*.print .spacetd .ul, .print .signature .ul {min-width:200px;}*/
.multiline {text-align: justify;
  text-justify: inter-word; background:url(../images/bgline.png) top left repeat; line-height:24px; height:80px;}
.multi_bgline {background:url(../images/bgline.png) top left repeat; line-height:24px; background-position-y: 3px;}

.headprint {width:90%; margin:10px auto 0px auto; border-bottom:#ddd 2px solid;}
.headprint .comname { font-size:18px; line-height:19px; font-weight:bold;}
.headprint .address{ font-size:11px; line-height:13px;}
.headprint h2 { text-decoration:underline}
.headprint img { width:200px;}
.print .nodate{ border:1px #555 solid; text-align:left; }
.print .nodate td { padding:0 10px; font-size:14px;}
.headprint .name {background:#d3ffff;}
.print .copy { border:#555 1px solid; padding:0 15px; text-align:center}
.print .copy a { color:#333;}
.print .copy strong { text-decoration:underline;}
.print .subname {background:#eee; border-bottom:#555 1px solid; padding:5px 10px; font-size:larger; font-weight:bold;}
.print .checkcard {border:#555 1px solid;}
.print .signature { margin-top:5px; margin-bottom:5px;}
.print .signature td {vertical-align:bottom; padding:10px 3px 0 3px;}
.print .h40 td {height:40px}


@media print {
  @page {
    size: 210mm 297mm;
    margin: 7mm;
	
  }
  body {font-family:Arial, Helvetica, sans-serif;
  -webkit-print-color-adjust: exact; color-adjust: exact; 
  }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], textarea, input[type="date"]{font-size:12px  !important; border:none; padding:0; }
  /*html,body {height: 100%;}*/
  .headprint{font-family:'sarabun', arial, Helvetica, sans-serif;}
  .headprint .comname { font-size:1.3em; line-height:19px;}
  .headprint .address{ font-size:0.65em; line-height:12px;}
  .headtitle { font-size:1.3em; line-height:30px;}
  hr {border-top: 2px dotted #acacac;
	border-bottom: 2px dotted #fff; display:block;}
	
 .mainprint td {font-size:14px !important; }
 .nodate td{font-size:13px !important; }
 .mainprint, .headprint { width:100%; font-size:14px; /*font-size:0.82em;*/ color:#000;  line-height:normal; margin:2px auto; }
 .headprint img { width:130px;}
 .print .uls{min-width:60px;}
 .print .ul{min-width:100px;}
 .print .ulb{min-width:130px;}
 .spacetd .ul {min-width:120px;}
 .print .signature .ul {min-width:150px;}
 .p_remark td{ font-size:12px !important;}
 .copy td{ font-size:13px !important;}
 
 #mainmenu, .count, .page, .tool, .footer, .print_dis {display:none !important;}
 strong.print_dis {visibility:hidden;}
 .search { background:#fff; font-size:12px  !important; line-height:10px !important;}
 .search .dropdown {border:none; font-size:12px  !important;}
 .search input[type="submit"], .search input[type="button"], .search button{ border:#aaa 1px solid; background: none; padding:0 5px; font-size:12px;}
 .search #displayText { display:none;}
 .data th {font-size:14px !important;}
 .statdata { font-size:11px; line-height:13px;}
 /*.statdata { font-size:9px; line-height:12px;} */ 
 .statdata td { padding:0 2px;}
 th.sort:after, th.sort_up:after, th.sort_down:after { padding:0; background:none !important;}
 .h1_title { width:100%; text-align:center; color:#000; font-size:large; padding:0;}
 .h1_title a{ display:none;}
 frm { background:none;}
 
 
 .statdata th{ background:#d5f7f4;}
 .statdata th.blank { background:#c4eae7 !important;}
 .statdata img { width:10px;}
 .statdata {border-bottom:none; border-left:#555 1px solid;}
 .statdata th{border-top:#555 1px solid; solid; border-right:#555 1px solid;}
 .statdata td {border-top:#555 1px solid; border-bottom:#555 1px solid; border-right:#555 1px solid;}
}
/*@media print and (-webkit-min-device-pixel-ratio:0) {   
	.mainprint, .headprint {font-size:0.65em; } 
	.headprint img { width:100px;} 
	.print .ul, .spacetd .ul , .print .signature .ul {min-width:80px !important;}    
}*/

@media only screen and (min-device-width: 769px) and (max-device-width: 2500px){
body {min-width:800px;} 
}

@media only screen and (max-device-width: 768px){
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
}
.search .blank { width:1%;}
.research .listdata { width:100%;}
.research .listdata td:last-of-type { text-align:center;}

.frm .frmfield td:nth-of-type(1) {width:120px;}

}