:root {
  --main-width:100%;
  --box-width:90%;
  --main-bg:#f4f4f4;
  --sec-bg:#e9e9e9;
  --frm-bg:#ffffff;
  --f-color:#14284b;
  --btn-color:#14284b;
  --btn-txt:#fff;
  --f-kanit:'Kanit';
  --f-sarabun:'sarabun';
}







html, body {
  font-family: var(--f-sarabun), arial, Helvetica, sans-serif;
  padding:0; margin:0;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  text-overflow: normal;
}
a, a:hover, a:active { color:var(--f-color) !important; text-decoration: none; cursor: pointer; }
body {color:#000; /* background:var(--main-bg);*/}
.fc {color:var(--f-color);}
.aBlack { color:#2b2b29 !important; }
.fc13 {color:var(--f-color);}
.mainBg {background:var(--main-bg);}
input[type="submit"], button {
  border: none;
  color: white;
  padding: 5px 20px;
  font-size: 17px;
  cursor: pointer;
  border-radius: 5px;
  font-family:var(--f-kanit);
  -webkit-appearance: none;
  outline: none;
  background-color:var(--btn-color);
  color:var(--btn-txt);
}
img.im { vertical-align:middle; margin-top:-2px;}
.firebaseui-container { margin:0 !important; }
.firebaseui-idp-button, .firebaseui-tenant-button { max-width:250px !important;}
.firebaseui-idp-list>.firebaseui-list-item, .firebaseui-tenant-list>.firebaseui-list-item {
	margin: 0 0 15px 0 !important;
	text-align: left !important;}
.firebaseui-card-content { padding:0 !important;}

.parent {display: flex; justify-content: center; align-items: center; }

.mainBlock {background:var(--frm-bg); padding:0;
margin-left:auto; margin-right:auto; width:var(--main-width);  display:block;}
.mainBlock .box {padding:10px 30px; width:var(--box-width); margin-left:auto; margin-right:auto; }

.frBold td:first-of-type { font-weight:400 !important;}
.fInherit { font-weight:300}

.head td.mainLogo{ padding-right:30px;}
.title::before { content:"\00275A "; padding-right: 3px; padding-bottom:3px; color:var(--f-color); font-size:20px; }
.title {font-size: 22px; font-family: var(--f-kanit); vertical-align: text-bottom}
.headTitle {background:var(--frm-bg); width:var(--main-width); margin-left:auto; margin-right:auto; }
.bread{padding:12px 30px 8px 30px; margin-top:-5px; min-height:24px; max-width:var(--box-width); margin-left:auto; margin-right:auto; }
.bread a{ color:var(--f-color);}
.bread img { vertical-align:middle;}


.block td{padding:7px;}

.warning {color: #f15756;}

.twoTap td, .oneTap td{ padding:4px 0; vertical-align:top;}
.oneTap td {height:10px; min-height:35px;}
.line td, .frmline td { border-bottom:#f3f3f3 1px solid; padding:7px 0;}
.oneTap td:first-of-type { width:160px; font-family:var(--f-kanit); font-weight:400;}
.oneTap td.name {font-family:var(--f-kanit); font-weight:400; padding-top:15px;}
.twoTap td:first-of-type { width:160px; font-family:var(--f-kanit);}
.oneTap td.tdTab { padding:5px 0px !important; height:35px; min-height:35px;}

.twoField td.field input[type="text"],.twoField td.field input[type="number"],.twoField td.field input[type="tel"] { width:94% !important;}
.imgField { position:relative; float:right; margin-top:-35px; margin-right:5px;}

.searchTap { width:50%;}
.searchTap td {padding:4px 0px;}
.searchTap div, .oneTap div, .twoTap div, .container, .container div{outline: none !important;} 

.midTap { width:80%;}

.lgIndex{ width:100%; display:block; background:var(--main-bg); }
.lgIndex .box {padding:10px 30px 0 30px;}
.lgIndex td { vertical-align:top; margin-right:auto; margin-left:auto;}
.lgIndex img.logo { width:100%; max-width:70px;}

.chkBox ul { padding:0; margin:0 0 10px 0;}
.chkBox li { width:23%; margin:0; display:inline-block; padding:5px; vertical-align:top;}
.chkBox li label { cursor:pointer}

.opa { opacity: 0.5;}
.minHi { height:45px; display:inline; vertical-align:middle;}

.hilight {background:#fff; padding:25px 20px 0 20px; display:inline-block; margin:0 auto; text-align:center; width:300px; margin-left:25%;}
.hilightFrm {background:#fff; padding:25px 20px 0 20px; display:inline-block; }
.terms { opacity: 0.9;}
.terms a{ color:#62778c}

.imgFile {max-width:300px; margin-bottom:25px; display:block;}
.rows { background:#f7f7f7; padding:7px 10px; margin-bottom:10px; border-radius:20px; }
.del {padding-bottom:0; text-align:right;}
.addMore { text-align:left; padding:5px; margin-top:-12px;}

.hrLineHeight{height: 3px; background: #ccc;}

/* ----- List Link in Index -------*/
.list-link { width:82%; min-width:640px; margin:0 auto; padding:15px; 
background:#fff; border-radius:11px; border:#f4f4f4; box-shadow: 1px 3px 60px 0px rgba(0,0,0,0.08);}
.list-link li{ margin:7px; padding:11px 7px 18px 7px; font-family:var(--f-kanit); font-weight:200; 
border-bottom:#ddd 1px solid; background:url(../images/i_next.png) no-repeat right; }
.list-link .f4 { font-weight:200; padding-bottom: 11px;}
.list-link .f4:before { content:'⠿ '; font-size:20px;}
@media (max-width: 600px) {.list-link { width:100%; min-width:300px; margin:0 auto; padding:15px 0; 
 border-radius: 0px; border:none; box-shadow: none;}}

/*Copy Text to clipboard*/
.copy {
	display:inline-block;
	border-radius: 7px;  
	-moz-border-radius:7px; 
	-webkit-border-radius:7px; 
	border:1px solid #d0d7de;
	background:#f6f8fa; 
	font-size:17px; 
	min-height:30px; 
	color:#2b2b29;
	padding:5px 5px 3px 5px; 
	margin-bottom:2px; /*margin-top:20px;*/
	}
.copy input{border:none !important; background:none !important; min-width:300px;}
.copy input[type=submit],.copy input[type=button],.copy button { background:none; margin:0; border-left:#ccc 1px solid; border-top:none; border-bottom:none; border-right:none; color:#777;
 font-size:17px; border-radius:0;}
.copy input[type=text]:focus {
  box-shadow: none;
  border: none;
}
.copy img { margin-top:-5px;}
.copy input.s{width:82%; }

.tooltip{position: relative;display: inline-block;}
.refTip{position: relative;}
.tooltip .tooltiptext, .refTip .tooltiptext{
  visibility: hidden;
  width: 140px;
  background-color: #fcffb0;
  color: #333;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  font-size:12px;
  opacity: 0;
  transition: opacity 0.3s;
  left: 50%; 
  margin-left: -75px;
}

.tooltip .tooltiptext::after, .refTip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fcffb0 transparent transparent transparent;
}

.tooltip:hover .tooltiptext, .refTip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.fixFt {position: relative; min-height: 97vh;}
.fixMain {padding-bottom: 2.0rem;}
.fixFt > footer{position: absolute; bottom: 0; width: 100%; height: 2.0rem;}

/*history*/
.arRow{background: url(../images/i_next.png) no-repeat right;}
.arLine {border-bottom: #e0e2e5 1px solid;
    margin-bottom: 18px;
    padding-bottom: 18px;}
.atLine {border-top: #e0e2e5 1px solid;
    margin-top: 10px;
    padding-top: 10px;}	
.tbHead {/*max-width: var(--box-width);*/
    margin-left: auto;
    margin-right: auto;}
	.boxHis {background:var(--sec-bg); /*min-height:90vh;*/}
	.boxClaim {background:var(--sec-bg); min-height:57vh;}
	.boxCheck {background:var(--sec-bg); padding:20px 5%; margin: 0 auto; /*min-height:50vh;*/}
	
    .rowHis {
    	margin-bottom: 18px; padding-bottom: 18px;
		padding:20px; border-radius:10px;
		background:#ffffff;
		/*max-width: var(--box-width);*/
		margin-left: auto;
		margin-right: auto;
		}
	.rowHis a { color:#1071cf !important;}
	/*.rowHis td { vertical-align:top;}*/
	.rowHis .photo { width: 216px;}
	.rowHis .photo img { width:206px; height:auto;}
	.rowHis .topHead {border-bottom:#ccc 1px solid; height:47px; font-family:'Kanit'; margin-bottom: 11px;}
	.rowHis .topHead td { padding:1px 5px; vertical-align: middle;}
	.rowHis .topHead .rgNum { margin-top:-7px;}
	.rowHis .topHead .rgStatus { margin-top:-5px;}
	/*.rowHis .topHead img {margin-top:-7px;}*/
	.rowHis .view { text-align:right; vertical-align: bottom;}
	.rowHis .hisClaim { background:#fbf5d4 url(../images/i_next.png) no-repeat right; background-position:98%; margin:10px 0 10px auto; padding:10px 2.5%; border-radius:5px; padding:10px;}
	.hisClaim { background:#fbf5d4; border:#eade9e 1px solid;}
	.hisClaim td {padding:3px 5px; text-align:left;}
	.hisClaim .status img{ width:20px; margin-right:5px; vertical-align:middle;}
	.hisClaim .txt {overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
	   -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; font-family:'sarabun';}
	.btnClaim {  position:absolute; top:-2%; right:0%;}
	.hisLeft  { width:70%;}
	.hisRight { width:30%;}
	.hisRight {text-align:right}
	.hisRight a .hisClaim{ color:#2b2b29;}
	.linkOpt {color:#777; border:#777 1px solid; border-radius:5px; display:inline-block; 
		margin:1px; padding:1px 4px; font-size:13px; font-family:'Kanit';}
	.linkOpt img{ width:14px; vertical-align:middle; margin-right:5px; margin-top:-2px; opacity:0.7;}
	.groupOpt { margin-top:10px;}
	
	.rowHis .regisNo {border-bottom: #e0e2e5 1px solid; margin-bottom:5px;}
	.rowHis .rowHisLeft {border-right:#e0e2e5 1px solid;  width:40%; vertical-align:top; padding-right: 20px;}
	.rowHis .rowHisLeft td { padding:2px 0;}
	.rowHis .rowHisRight{ padding-left:20px; vertical-align:top}
	.rowHis .twoTap {font-weight: 300;}
	.rowHis .twoTap td:first-of-type { font-weight:400 !important;}
	.rowHis img.ic {vertical-align:middle; width:23px; margin-top:-2px; margin-right:13px;}
	.rowHis .sub div{ margin-top:-7px;}

	.chatClaim .rowHis{ width:85%;
		position: relative;
		box-shadow: 0px 4px 6px -5px rgba(0, 0, 0, 0.3);
	}
	.chatClaim .hisClaim {margin-right:13px; border:none;}
	.chatClaim .logClaim {margin-left:13px;}

.chatClaim .rowHis:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
	border:#eade9e 1px solid;
    top: 30px;
    margin-top: -10px;
}
.chatClaim .hisClaim:after {
	border-color: #fbf5d4 transparent transparent transparent;
    border-width: 20px 20px 0 0;
	right: -20px;
}

.chatClaim .logClaim:after {
    border-width: 0 20px 20px 0;
    border-color: transparent #ffffff transparent transparent;
    left: -20px;
}

#extra-table td { padding:0px;}
#extra-table table td {padding:4px 0px;}

/*Service*/
.sv-date ul{ padding:0; margin:0; }
.sv-date li{ display:inline-block; border-right:#aaa 1px solid; padding:0 10px 0 5px; margin-bottom:3px;}
.sv-date li:last-of-type{ border:none;}

.sv-his {border:#ddd 1px solid; border-radius:7px; background:#f9f9f9; padding:10px; margin:5px auto; }
.sv-his .name {font-family: var(--f-kanit); }
.his-date {margin-top:7px;}
.his-date ol {
   list-style: none;
   counter-reset: item;
   margin:0; padding:0;
 }
.his-date li {
   counter-increment: item;
   margin-bottom: 5px;
 }
.his-date li:before {
   margin-right: 10px;
   content: counter(item);
   background: var(--btn-color);
   opacity:0.9;
   border-radius: 100%;
   color: var(--btn-txt);
   width: 1.45em;
   text-align: center;
   display: inline-block;
   font-weight: inherit;
   font-size:small;
 }



footer .mainBlock {background: none; padding:10px 0;  
margin-left:auto; margin-right:auto;
-webkit-box-shadow: none;
-moz-box-shadow:none;
box-shadow:none;}

footer table {width:100%;}
footer, footer a, footer a:hover{ color:#000 !important}




@media only screen and (min-width: 1px) and (max-width: 820px){

body,html{overflow-x:hidden; background:#ffffff;}
.searchID {margin:0 auto; width:100%; min-width:270px;}

.mainBlock .box { width:94%; padding:10px 3%; }
.block td, td.block{ display:block; width:100%; padding:5px 0;}
td.block td, td.block td td, td.block td td td { display:inline-block; width:auto;}

.oneTap td, .oneTap td:first-of-type { display:block; width:98%; vertical-align:top;}
.searchTap td { display:block; width:97%;}
.oneTap td { padding:0 0 17px 0; height:auto; min-height:inherit;}
.oneTap td:first-of-type { padding:5px 0px 5px 10px; }
.rowHis {padding:15px;}
.rowHis .oneTap td:first-of-type { padding:5px 0px; }
.rowHis .regisNo {border: none;}
.rowHis .rowHisLeft { width:100%; padding-bottom:18px; border-right:none;}
.rowHis .rowHisRight {padding:18px 0 0 0px; border-top:#e0e2e5 1px solid; vertical-align:top}
.rowHis .rowHisLeft, .rowHis .rowHisRight {display:block; width:100%;}
.oneTap td.name {/*padding:5px 0px 5px 10px;*/
 	padding: 3px; z-index:200;
    display: inline-block;
    background: #fff;
    position: absolute;
    width: auto;
    margin: -7px 0 0 15px;
    line-height: 10px;
    color: #555;
    font-size: 14px; font-weight:300;}
.oneTap td.tdTab { padding:5px 0px 30px 10px !important;}
.frmline td{ border-bottom:none;}
.twoTap td:first-of-type { width:110px; font-family:var(--f-kanit);}
.twoField td.field {width:48%; padding-right:1%; display:inline-block;}
.twoField td.field input[type="text"],.twoField td.field input[type="number"],.twoField td.field input[type="tel"] { width:92% !important;}

.rsSearch .oneTap td{ padding:5px 0px 2px 10px; }
.rsSearch td:last-of-type { padding:0px 0px 10px 10px;}

.rows td.name {background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%);} 
.tap { padding-left:15px !important;}
.head td{display:block; width:100%; padding:5px 0;}
.head td.txt { width:100%; text-align:center;}
.head td.mainLogo{ float:none;  width:100%; text-align:center;} 
.midTap { width:100%;}

/*.lgIndex{ text-align:center;}*/
.lgIndex .box {padding: 2% 2% 0 2%; width:96%;}
.chkBox li {width: auto; min-width: 42%;}

.minHi { display:table-cell;}
.headTitle {padding:2% 0; display:block; }
.bread{padding:5px 0px; max-width: 94%;}

.iLong { width:100%;}
/*Copy Text to clipboard*/
.copy {
	width:90%; border:none;
}
.copy input[type=submit],.copy input[type=button],.copy button { 
    border-left: none;
    display: block;
    width: 100px;
    background: #eee;
    border-radius: 5px;
    padding: 7px 0 5px 0;
    border: #bbb 1px solid;}
.tooltip { display:block; margin:15px auto 5px auto;}



	

footer, footer a, footer a:hover{ color:#000 !important}
#g-recaptcha {
    transform:scale(0.97);
    transform-origin:0 0;
}
/*.curve {background-color: #1f1f1f; display:block;
  width: 100%;
  height: 100px;
  padding:0 50px; margin-left:-50px; margin-top:-70px; z-index:0;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;}*/

@supports (-webkit-touch-callout: none) 
  {
	strong, h1,h2,h3,h4,h5,label.error{letter-spacing: -0.5px;}
	.fstsearch input{
		border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
		border:1px solid #d0d1d6;
		background:#fff;
		font-size:17px;
		min-height:25px;
		color:#2b2b29;
		padding:2px 5px; margin:2px 0;
		-webkit-transition:all .3s ease-in-out;
		-moz-transition:all .3s ease-in-out; 
		-ms-transition:all .3s ease-in-out;
		-o-transition:all .3s ease-in-out;
		outline: none;
		width:95%; /*max-width:500px;*/
		font-family: var(--f-sarabun), Arial, Helvetica, sans-serif;}
  }
}
@media only screen and (min-width: 821px) and (max-width: 1200px){
.chkBox li { width:30%;}
}

@media only screen and (min-width: 1px) and (max-width: 414px){


.rows { padding:15px 7px; }
.twoField td.field input[type="text"],.twoField td.field input[type="number"],.twoField td.field input[type="tel"] { width:80% !important;}
.lgIndex .box { padding: 4% 0 0 0; width:100%;}
.lgIndex td { padding:0 10px;}
.lgIndex img.logo { width:100%; max-width:50px;}
/*.chkBox li { width:47%;}*/

.addMore { text-align:left; padding:5px; margin-top:-1;}
.del {margin-top:-15px;}

/*history*/
.tbHead {max-width: 100%;}
	.rowHis {padding:10px; max-width: 100%;}
	.rowHis .group { display:block; width:100%;}
	.rowHis .photo { margin:10px auto 20px auto;}
	.rowHis .photo{ text-align:center}
	.hisRight {text-align:left}
	.rowHis .topHead td {vertical-align: middle;}
	.rowHis .topHead img {margin-top: 0px;}
	.rowHis .topHead {border-bottom:none; height: auto; margin-bottom:5px;}
	.rowHis .view { margin-top:10px; padding-top:10px; vertical-align:bottom;}
	/*.hisClaim {width:90%; margin:4% 1%;}*/
	.rowHis .hisClaim {width:95%; margin:4% auto;}
	.btnClaim {  position: relative; width:50%; /*margin-top:-30px;*/ top: inherit; right: inherit;}
	.hisLeft, .hisRight { width:100%; margin-bottom:15px;}
	.groupOpt { padding-bottom:15px; margin-top:0px;}
	
	/*.rowHis .regisNo {border: none;}
	.rowHis .rowHisLeft { width:100%; padding-bottom:18px; border-right:none;}
	.rowHis .rowHisRight {padding:18px 0 0 5px; border-top:#e0e2e5 1px solid; vertical-align:top}
	.rowHis .rowHisLeft, .rowHis .rowHisRight {display:block; width:100%;}*/
	
/*Service*/
.sv-date li{ display:block; border-right:none;}

.firebaseui-container { margin:0 auto !important; }
.firebaseui-idp-list>.firebaseui-list-item, .firebaseui-tenant-list>.firebaseui-list-item {
	text-align: center !important;}
.imgField { margin-right:15px;}	
.oneTap td.tdTab { height:inherit; min-height:inherit;}

}
@media only screen and (min-width: 1px) and (max-width: 380px){
.iBlock td, td.iBlock{ display:block; width:100%; padding:5px 0;}
.iCenter td, td.iCenter{ text-align:center}
}
@media only screen and (min-width: 1px) and (max-width: 320px){

.chkBox li { width:95%;}
}



@media only screen and (min-device-width: 1025px) {
 .disPC {display:none !important;}
 .showPC { display:block !important;}
 .sv-date li:first-of-type{ padding-left:0px;}
}

@media only screen and (max-device-width: 1024px) {
 .disNone {display:none !important;}
}