/*Input curve*/

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], textarea, input[type="date"], input[type="search"] { 
	border-radius: 23px !important;  
	-moz-border-radius: 23px !important; 
	-webkit-border-radius: 23px !important;
	border:1px solid #a0a0a0 !important;  
	min-height:35px !important; 
	font-size:18px;
	color:#000;
	padding:3px 10px !important; margin:4px 0;
	margin-bottom:2px; margin-top:2px;
	-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:98% !important;
	font-family: var(--f-sarabun), Arial, Helvetica, sans-serif;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select {border-radius: 30px !important;  
	-moz-border-radius: 30px !important; 
	-webkit-border-radius: 30px !important;
	border:1px solid #a0a0a0 !important;  
	min-height:40px !important; 
	padding:10px 35px 10px 10px !important;
  display: inline-block;

  /* reset */
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   box-shadow: none !important;
  
  background-image:
    linear-gradient(45deg, transparent 50%, #999 50%),
    linear-gradient(135deg, #999 50%, transparent 50%) !important;
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em !important;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em !important;
  background-repeat: no-repeat !important; 
  padding-right:35px !important; 
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus, input[type="date"]:focus, select:focus{
  box-shadow: 0 0 5px rgba(255, 180, 0, 0.5);
  border: 1px solid rgba(255, 180, 0, 0.5);
}
select option:checked, select:focus > option:checked, 
select option:hover, option:hover {background-color: #f0f0f0 !important;}

button[disabled]:active, button[disabled], input[type="button"][disabled]:active,
input[type="button"][disabled], input[type="submit"][disabled]:active,
input[type="submit"][disabled], button[disabled]:hover,
input[type="button"][disabled]:hover,input[type="submit"][disabled]:hover
{
  cursor: inherit ;
  background-color: #ccc !important;
  background: #ccc !important;
}
input[type="text"]:read-only, input[type="tel"]:read-only, input[type="number"]:read-only, textarea:read-only  {background-color: #f7f7f7 !important; cursor: inherit !important;}


input::placeholder {
  overflow: visible;
}
input[type="submit"], input[type="button"], button ,.btn{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}


input[type="submit"], button , .btn {
  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);
}

.btn:disabled {background: #e7e7e7; color: #777;  }
.blue {background-color: #569ef1; }
.blue:hover {opacity: 1;}

.gray {background-color: #d7d7d7; color: #333; opacity: 0.9;}
.gray:hover {opacity: 1; }

.btnLong { width:100%;}
.btniLong { min-width:200px;}
.btnShort { width: auto;}
.btnRegis {background-color: var(--btn-color); color:var(--btn-txt); border:none; border-radius:5px; padding: 10px 20px; font-size:18px; min-width:250px;}
.btnMini { padding:2px 7px !important; font-size:13px;}
.btn_more {
  border: none;
  background:#fff;
  padding: 2px 0px;
  font-size: 17px;
  color:var(--f-color) !important;
  cursor: pointer;
  border-radius: 5px;
  font-family:var(--f-kanit);
  }
  
.btn_remove { color:#ef5655;
  border: none;
  background:#fff;
  padding: 0px;
  margin-top:-8px;
  font-size: 14px;
  height:20px;
  line-height:13px;
  cursor: pointer;
  font-family:var(--f-kanit);}

.btn_line {border:#777 1px solid !important; background:#fff !important; color:#333 !important;}

button.btn_line:disabled, button.btn_line[disabled],
input.btn_line[type="button"][disabled], input.btn_line[type="submit"][disabled], button.btn_line[disabled]:hover, input.btn_line[type="button"][disabled]:hover,input.btn_line[type="submit"][disabled]:hover
{border:#777 1px solid !important; background:#fff !important; color:#333 !important; opacity:0.4 !important;}


/*input*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.boxOther {width:270px;}

/*error*/
label.error{ font-size: 14px; color:#dc0225 !important; display:block; padding-left:10px; line-height: 25px;}
.warning {color:#dc0225; }
select.long { width:100%; font-family: var(--f-sarabun), Arial, Helvetica, sans-serif; color:#333; }
select.short, input.short{ width:270px;}
input.long { width:100%;}


.btn_more {
  border: none;
  background:#fff;
  padding: 2px 0px;
  font-size: 17px;
  color:var(--f-color) !important;
  cursor: pointer;
  font-family:var(--f-kanit);
  border-radius: 0 0 7px 7px ;
  -webkit-appearance: none;
  -webkit-border-radius: none;
  outline: none;
}
  
.btn_remove { color:#ef5655;
  border: none;
  background:#f7f7f7;
  padding: 0px;
  font-size: 14px;
  height:20px;
  line-height:13px;
  cursor: pointer;
  font-family:var(--f-kanit);
  outline: none;
}

details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
outline:none;
}

details > summary {
  list-style: none;
  color: var(--f-color);
  cursor:pointer;
  outline:none;
}
details > summary::-webkit-details-marker {
  display: none;
  outline:none;
}

details[open] summary
{ display:none;}

header, main, footer { min-width:280px;}

@media only screen and (min-width: 415px) and (max-width: 1024px){

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], textarea, input[type="date"], input[type="search"] { 	width:97% !important;}
}
@media only screen and (min-width: 1px) and (max-width: 414px){
input[type="text"],input[type="number"],input[type="tel"], textarea{ width:90% !important; padding:5px 15px !important;}
select {padding:10px !important; height:45px; padding-right:35px !important; }
select.pad {padding:10px 35px 10px 0px !important; height:45px; text-indent: 10px;}

.boxOther {display: block;}
.btniLong { width:100%;}
.btnLong { width:100%;}
.btnShort { width: auto; padding:5px !important;}
}