/***************************************************
information
	filename : form_common.css;
	COPYRIGHT (C)maverica corporation. ALL RIGHTS RESERVED.
	version: 1.0.0
***************************************************/
/******* BASE *******/
/* input */
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;vertical-align:middle;margin:2px;padding:0px;}
input.txt,textarea.txt {margin:2px;padding: 3px;border:1px solid #c6c6c6;vertical-align:middle;font-size:15px;color:#333;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-color: #fff;}
input.txt:focus,textarea.txt:focus {background-color: #fffeef;}
input.ime {ime-mode: disabled;}
input.txr {text-align: right;}
input.txt::-webkit-input-placeholder,
textarea.txt::-webkit-input-placeholder {color: #ccc;}
input.txt:-ms-input-placeholder,
textarea.txt:-ms-input-placeholder {color: #ccc;}
input.txt::-moz-placeholder,
textarea.txt::-moz-placeholder {color: #ccc;}

/******* LINK BUTTON AREA *******/
.BtM {}
.BtM input,
.BtM a,
.BtM span {border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;
display: inline-block;
text-align: center;
text-decoration:none;
display:block;
font-weight:bold;
}

/******* LINK button Rounded *******/
input[type="submit"], input[type="reset"], input[type="button"], button{cursor: pointer;}
.BtRnd6 {-webkit-appearance: none;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;}
.BtRnd10 {-webkit-appearance: none;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;}
.BtRnd18 {-webkit-appearance: none;border-radius: 18px;-webkit-border-radius: 18px;-moz-border-radius: 18px;}
.BtRnd30 {-webkit-appearance: none;border-radius: 30px;-webkit-border-radius: 30px;-moz-border-radius: 30px;}
.BtRnd50 {-webkit-appearance: none;border-radius: 50px;-webkit-border-radius: 50px;-moz-border-radius: 50px;}

/******* LINK button Size *******/
a.btW200,
input.btW200 {width: 200px;padding: 18px 0px;}
a.btW250,
input.btW250 {width: 250px;padding: 18px 0px;}


/******* LINK BUTTON COLOR *******/
/* WHITE */
a.whBT,
input.whBT {background-color: #fff;
background: -moz-linear-gradient(top center, #fff 0%, #f8f8f8 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#f8f8f8));/* Webkit */
background: linear-gradient(top center, #fff 0%, #f8f8f8 100%);
border: 1px solid #b6b6b6;
color:#282828;
box-shadow: 0 0 2px #c8c8c8;
}
a.whBT:hover,
input.whBT:hover {
background-color: #fff;
background: -moz-linear-gradient(top center, #fff 0%, #f3f3f3 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#f3f3f3));/* Webkit */
background: linear-gradient(top center, #fff 0%, #f3f3f3 100%);
border: 1px solid #b6b6b6;
color: #a4a4a4;
}
span.whBTN {
background-color: #fff;
background: -moz-linear-gradient(top center, #fff 0%, #f3f3f3 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#f3f3f3));/* Webkit */
background: linear-gradient(top center, #fff 0%, #f3f3f3 100%);
border: 1px solid #f3f3f3;
color: #dcdcdc;
box-shadow: 0 0 2px #c8c8c8;
}

/* BLUE */
a.blBT,
input.blBT {
background-color: #0085ba;
background: -moz-linear-gradient(top center, #0085ba 0%, #007aab 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#0085ba), to(#007aab));/* Webkit */
background: linear-gradient(top center, #0085ba 0%, #007aab 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}
a.blBT:hover,
input.blBT:hover {
background-color: #1399cf;
background: -moz-linear-gradient(top center, #1399cf 0%, #0386ba 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#1399cf), to(#0386ba));/* Webkit */
background: linear-gradient(top center, #1399cf 0%, #0386ba 100%);
color: #fff;
border: 1px solid #fff;
}
span.blBTN {
background-color: #c6f1fe;
background: -moz-linear-gradient(top center, #c6f1fe 0%, #8fe2fa 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#c6f1fe), to(#8fe2fa));/* Webkit */
background: linear-gradient(top center, #c6f1fe 0%, #8fe2fa 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}

/* GREEN */
a.grnBT,
input.grnBT {
background-color: #8abc1e;
background: -moz-linear-gradient(top center, #8abc1e 0%, #7cb600 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#8abc1e), to(#7cb600));/* Webkit */
background: linear-gradient(top center, #8abc1e 0%, #7cb600 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}
a.grnBT:hover,
input.grnBT:hover {
background-color: #99ce26;
background: -moz-linear-gradient(top center, #99ce26 0%, #7cb600 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#99ce26), to(#7cb600));/* Webkit */
background: linear-gradient(top center, #99ce26 0%, #7cb600 100%);
color: #fff;
border: 1px solid #fff;
}
span.grnBTN {
background-color: #c6f1fe;
background: -moz-linear-gradient(top center, #c6f1fe 0%, #8fe2fa 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#c6f1fe), to(#8fe2fa));/* Webkit */
background: linear-gradient(top center, #c6f1fe 0%, #8fe2fa 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}

/* ORANGE */
a.orgBT,
input.orgBT {
background-color: #fb8800;
background: -moz-linear-gradient(top center, #fb8800 0%, #ef8100 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#fb8800), to(#ef8100));/* Webkit */
background: linear-gradient(top center, #fb8800 0%, #ef8100 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}
a.orgBT:hover,
input.orgBT:hover {
background-color: #ff9920;
background: -moz-linear-gradient(top center, #ff9920 0%, #fb8800 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#ff9920), to(#fb8800));/* Webkit */
background: linear-gradient(top center, #ff9920 0%, #fb8800 100%);
color: #fff;
border: 1px solid #fff;
}
span.orgBTN {
background-color: #c6f1fe;
background: -moz-linear-gradient(top center, #c6f1fe 0%, #8fe2fa 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#c6f1fe), to(#8fe2fa));/* Webkit */
background: linear-gradient(top center, #c6f1fe 0%, #8fe2fa 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}

/* GRAY */
a.gryBT,
input.gryBT {
background-color: #afafaf;
background: -moz-linear-gradient(top center, #afafaf 0%, #a4a4a4 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#afafaf), to(#a4a4a4));/* Webkit */
background: linear-gradient(top center, #afafaf 0%, #a4a4a4 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}
a.gryBT:hover,
input.gryBT:hover {
background-color: #dfdfdf;
background: -moz-linear-gradient(top center, #dfdfdf 0%, #a4a4a4 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#dfdfdf), to(#a4a4a4));/* Webkit */
background: linear-gradient(top center, #dfdfdf 0%, #a4a4a4 100%);
color: #fff;
border: 1px solid #fff;
}
span.gryBTN {
background-color: #c6f1fe;
background: -moz-linear-gradient(top center, #c6f1fe 0%, #8fe2fa 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#c6f1fe), to(#8fe2fa));/* Webkit */
background: linear-gradient(top center, #c6f1fe 0%, #8fe2fa 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}

/* PINK */
a.pinkBT,
input.pinkBT {
background-color: #ff3aae;
background: -moz-linear-gradient(top center, #ff3aae 0%, #ca097a 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#ff3aae), to(#ca097a));/* Webkit */
background: linear-gradient(top center, #ff3aae 0%, #ca097a 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #8e8e8e;
}
a.pinkBT:hover,
input.pinkBT:hover {
background-color: #ff6bc2;
background: -moz-linear-gradient(top center, #ff6bc2 0%, #f043a9 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#ff6bc2), to(#f043a9));/* Webkit */
background: linear-gradient(top center, #ff6bc2 0%, #f043a9 100%);
color: #fff;
border: 1px solid #fff;
}
span.pinkBTN {
background-color: #f4cae3;
background: -moz-linear-gradient(top center, #f4cae3 0%, #ef9acc 100%); /* mozilla */
background: -webkit-gradient(linear, center top, center bottom, from(#f4cae3), to(#ef9acc));/* Webkit */
background: linear-gradient(top center, #f4cae3 0%, #ef9acc 100%);
color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 2px #d68dd0;
}


input[readonly]{
background-color:#efefef;
color:#ccc;
}

input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled,
input:hover[type="submit"]:disabled,
input:hover[type="reset"]:disabled,
input:hover[type="button"]:disabled{
background:#DCDCDC;
cursor:not-allowed;
}

/* select */
select.selectMenu  {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: none;
	border:1px solid #c6c6c6;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin: 0;
	padding: 6px 5px;
	background:#fff url(arw_select_down.png) no-repeat;
	background-size:30px 29px;
	background-position: right center;
	font-size: 14px;
	color:#434343;
	vertical-align: middle;
	}
select.selectMenu:hover {background:#fff url(arw_select_downO.png) no-repeat;background-position: right center;}
select.selectMenu  {-moz-appearance: none;text-indent: 0.01px;text-overflow: '';}
select.selectMenu::-ms-expand {display: none;}

/* checkbox radio */
label.radio {position: relative;display: inline-block;width: 15px;height: 15px;top: 2px;border: 1px solid #c6c6c6;border-radius : 100%;overflow: hidden;cursor: pointer;}
label.radio:before {content: '';display: block;width: 11px;height: 11px;border-radius: 100%;position: absolute;top: 2px;left: 2px;z-index: 1;background-color : #0081b5;}
label.radio input[type="radio"] {-moz-appearance: none;-webkit-appearance: none;margin: 0px;position: absolute;z-index: 2;top: -2px;left: -23px;width: 20px;height: 20px;display: block;box-shadow : 20px 0px #FFF;}
label.radio input[type="radio"]:checked {box-shadow : none;}
label.radio input[type="radio"]:focus {box-shadow : 20px 0px #FFF;opacity: 0.2;}

label.radio_text {cursor: pointer;position: relative;padding-top : 2px;padding-left : 5px;margin-right : 20px;overflow: hidden;padding-left : 25px;display: inline-block;}
label.radio_text:before {position: absolute;width: 15px;height: 15px;border: 1px solid #c6c6c6;border-radius : 50%;left: 0px;top: 4px;content: '';z-index: 3;}
label.radio_text:after {content: '';position: absolute;width: 11px;height: 11px;border-radius: 100%;left: 3px;top: 7px;background-color : #0081b5;z-index: 1;}
label.radio_text input[type="radio"] {-moz-appearance: none;-webkit-appearance: none;position: absolute;z-index: 2;width: 20px;height: 20px;left: -23px;top: 1px;margin: 0px;box-shadow : 20px -1px #FFF;}
label.radio_text input[type="radio"]:checked {box-shadow : none;}
label.radio_text input[type="radio"]:focus {opacity: 0.2;box-shadow : 20px -1px #FFF;}

label.checkbox {cursor: pointer;width: 20px;height: 20px;top: 2px;border: 1px solid #c6c6c6;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background : #fff;overflow: hidden;position: relative;display: inline-block;box-sizing : border-box;}
label.checkbox input[type="checkbox"] {-moz-appearance: none;-webkit-appearance: none;margin: 0;padding: 0;position: absolute;left: 20px;width: 20px;height: 20px;left: -40px;box-shadow : 39px 0px #FFF;z-index: 2;}
label.checkbox input[type="checkbox"]:checked {box-shadow : none;}
label.checkbox input[type="checkbox"]:checked:focus {box-shadow : 39px 0px #666;opacity: 0.1;}
label.checkbox input[type="checkbox"]:focus {box-shadow : 39px 0px #EEE;}
label.checkbox:after {content: '';position: absolute;top: 35%;left: 5px;display: block;margin-top: -8px;width: 8px;height: 12px;border-right: 3px solid #0081b5;border-bottom: 3px solid #0081b5;transform: rotate(45deg);-webkit-transform : rotate(45deg);-moz-transform: rotate(45deg);z-index: 1;}

label.checkbox_text {cursor: pointer;position: relative;padding-left : 20px;padding-bottom : 2px;margin-right : 15px;overflow: hidden;position: relative;padding-left : 25px;display: inline-block;box-sizing   : border-box;}
label.checkbox_text:before {content: '';position : absolute;width: 18px;height: 18px;left: 0px;top: 0;border: 1px solid #c6c6c6;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;z-index: 3;}
label.checkbox_text:after {content: '';position: absolute;top: 35%;left: 6px;display: block;margin-top: -8px;width: 8px;height: 12px;border-right: 3px solid #0081b5;border-bottom: 3px solid #0081b5;transform: rotate(45deg);-webkit-transform : rotate(45deg);-moz-transform: rotate(45deg);z-index: 1;}
label.checkbox_text input[type="checkbox"] {-moz-appearance: none;-webkit-appearance: none;position: absolute;left: -40px;width: 20px;height: 20px;display: block;box-shadow : 41px 0px #FFF;z-index: 2;margin: 0px;padding: 0px;}
label.checkbox_text input[type="checkbox"]:checked {box-shadow : none;}
label.checkbox_text input[type="checkbox"]:checked:focus {box-shadow : 40px 0px #666;opacity: 0.1;}
label.checkbox_text input[type="checkbox"]:focus {box-shadow : 41px 0px #EEE;}


/**** FORM SIZE ****/
input.size60 {width:60px;}
input.size80 {width:80px;}
input.size100 {width:100px;}
input.size120 {width:120px;}
input.size140 {width:140px;}
input.size160 {width:160px;}
input.size180 {width:180px;}
input.size200 {width:200px;}
input.size220 {width:220px;}
input.size240 {width:240px;}
input.size250 {width:250px;}
input.size300 {width:300px;}
input.size350 {width:350px;}
input.size400 {width:400px;}
input.size450 {width:450px;}
input.size500 {width:500px;}
input.size550 {width:550px;}
input.size600 {width:600px;}
input.size650 {width:650px;}
input.PayCRDNO {width:80px;}
input.PayCRDNAME {width:150px;}

select.size60 {width:60px;}
select.size80 {width:80px;}
select.size100 {width:100px;}
select.size120 {width:120px;}
select.size140 {width:140px;}
select.size160 {width:160px;}
select.size180 {width:180px;}
select.size200 {width:200px;}
select.size250 {width:250px;}
select.size300 {width:300px;}
select.size350 {width:350px;}
select.size400 {width:400px;}
select.size450 {width:450px;}
select.size500 {width:500px;}
select.size550 {width:550px;}
select.size600 {width:600px;}
select.size650 {width:650px;}

textarea.size60 {width:60px;}
textarea.size80 {width:80px;}
textarea.size100 {width:100px;}
textarea.size120 {width:120px;}
textarea.size140 {width:140px;}
textarea.size160 {width:160px;}
textarea.size180 {width:180px;}
textarea.size200 {width:200px;}
textarea.size250 {width:250px;}
textarea.size300 {width:300px;}
textarea.size350 {width:350px;}
textarea.size400 {width:400px;}
textarea.size450 {width:450px;}
textarea.size500 {width:500px;}
textarea.size550 {width:550px;}
textarea.size600 {width:600px;}
textarea.size650 {width:650px;}

/* ===================================================================================
for SP max-width: 640px
=================================================================================== */
@media screen and (max-width: 640px) {
	input.txt,textarea.txt {padding: 10px;}
	input.size250,
	input.size300,
	input.size350,
	input.size400,
	input.size450,
	input.size500,
	input.size550,
	input.size600,
	input.size650,
	select.size250,
	select.size300,
	select.size350,
	select.size400,
	select.size450,
	select.size500,
	select.size550,
	select.size600,
	select.size650,
	textarea.size250,
	textarea.size300,
	textarea.size350,
	textarea.size400,
	textarea.size450,
	textarea.size500,
	textarea.size550,
	textarea.size600,
	textarea.size650 {width:93%;}
}
/*** iphone5  max-width: 320px ***/
@media screen and (min-width: 0px) and (max-device-width: 320px){
	input.PayCRDNO {width:50px;}
	input.PayCRDNAME {width:100px;}
}
/*** Nexus5  max-width: 360px ***/
@media screen and (min-width: 321px) and (max-device-width: 360px){
	input.PayCRDNO {width:60px;}
	input.PayCRDNAME {width:120px;}
}
/*** iphone6  max-width: 375px ***/
@media screen and (min-width: 361px) and (max-device-width: 375px){
	input.PayCRDNO {width:64px;}
	input.PayCRDNAME {width:125px;}
}
/*** Nexus4  max-width: 384px ***/
@media screen and (min-width: 376px) and (max-device-width: 384px){
	input.PayCRDNO {width:66px;}
	input.PayCRDNAME {width:128px;}
}
/*** Nexus6  max-width: 412px ***/
@media screen and (min-width: 385px) and (max-device-width: 412px){
	input.PayCRDNO {width:70px;}
	input.PayCRDNAME {width:140px;}
}
/*** iphone6 plus  max-width: 920px ***/
@media screen and (min-width: 413px) and (max-device-width: 920px){
	input.PayCRDNO {width:78px;}
	input.PayCRDNAME {width:150px;}
}