/*----------------------------------------------------
** WEB COMBO / form.css
** Ver.1.0.0
** copyright 2020 GRANTEST Inc.
**----------------------------------------------------
** WEB FONTS
** font-family:'Number';
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/
form, input{
	margin:0;
	padding:0;
}
form{
	line-height:1;
}
select, input, button, textarea{
	box-sizing:border-box;
	font-size:16px; 
}
input:-webkit-autofill, textarea:-webkit-autofill {
	background-color: rgba(255,255,255,0);
	background-image: none;
	color: rgb(0,0,0);
}
::placeholder{
	color:rgba(232,89,154,0.5);
}
input[type='date'],
input[type='time'],
input[type="button"],
input[type="submit"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="reset"],
select, button, textarea{
	-webkit-appearance:none;
	appearance:none;
	border-radius:0;
	border:none;
	box-shadow:none;
	box-sizing:border-box;
	filter: none;
}
input[type='date']:focus,
input[type='time']:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="reset"]:focus,
select:focus,
button:focus,
textarea:focus{
	outline:none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin:0;
}
input[type="number"]{
  -moz-appearance:textfield;
}
input[type="date"],
input[type="time"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"]{
	width:100%;
	text-indent:0.7em;
	background-color: transparent;
}
textarea{
	border:none;
	margin:0;
	padding:10px 0.7em;
	resize:vertical;
	width:100%;
}
div.textareawrap{
	position:relative;
	font-size:16px;
	line-height:1.8em;
}
div.textareawrap > .textarea_dummy{
  overflow:hidden;
  visibility:hidden;
  box-sizing:border-box;
  min-height:3em;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
	line-height:inherit;
}
div.textareawrap > textarea{
	position:absolute;
	top:0;
	left:0;
	display:block;
	overflow:hidden;
	box-sizing:border-box;
	padding:5px 15px;
	width:100%;
	height:100%;
	background-color:transparent;
	color:inherit;
	font:inherit;
	letter-spacing:inherit;
	resize:none;
	line-height:inherit;
}
div.selectwrap{
	display:inline-block;
	background-color:#FFF;
	position:relative;
	z-index:1;
	box-sizing: border-box;
}
div.selectwrap::after{
	content:'';
	position:absolute;
	width:0;
	height:0;
	border:solid 6px transparent;
	border-top:solid 9px rgba(204,204,204,0.5);
	top:50%;
	right:0;
	transform:translate(-25%,-25%);
	z-index:-1;
}
select{
	display:inline-block;
	vertical-align:middle;
	text-indent:0;
	background-color:transparent;
	max-width:100%;
	padding-right: 20px;
	box-sizing: border-box;
}
input[type="submit"],
input[type="button"],
button{
	font-size:16px;
	font-weight:400;
	width:100%;
	transition:all 0.3s ease;
	box-sizing:border-box;
	cursor:pointer;
}
[type="radio"]:checked,
[type="radio"]:not(:checked){
	position:absolute;
	display:none;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label{
	position:relative;
	z-index:1;

	padding:0 0 0 35px;
	cursor:pointer;
	display:inline-block;
	height:30px;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:24px;
	height:24px;
	border:solid 3px rgba(204,204,204,0.5);
	border-radius:100%;
	background:#FFF;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after{
	content:'';
	width:20px;
	height:20px;
	background:#39D;
	position:absolute;
	top:5px;
	left:5px;
	border-radius:100%;
	transition:all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after{
	opacity:0;
	transform:scale(0);
}
[type="radio"]:checked + label:after{
	opacity:1.0;
	transform:scale(1);
}
[type="radio"] + label p{
	line-height:30px;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
	position:absolute;
	display:none;
}
div.wc_checkbox [type="checkbox"]:checked + label,
div.wc_checkbox [type="checkbox"]:not(:checked) + label{
	position:relative;
	padding:0 0 0 35px;
	cursor:pointer;
	display:inline-block;
	height:30px;
	z-index:1;
}
div.wc_checkbox [type="checkbox"]:checked + label:before,
div.wc_checkbox [type="checkbox"]:not(:checked) + label:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:24px;
	height:24px;
	border:solid 3px rgba(204,204,204,0.5);
	background:#FFF;
}
div.wc_checkbox [type="checkbox"]:disabled + label:before{
	background:#DDD;
}
div.wc_checkbox [type="checkbox"]:checked + label::after,
div.wc_checkbox [type="checkbox"]:not(:checked) + label::after{
	content:"";
	width:15px;
  height:8px;
  border-left:3px solid #39D;
  border-bottom:3px solid #39D;
	position:absolute;
	top:7px;
	left:6px;
	transition:all 0.2s ease;
}
div.wc_checkbox [type="checkbox"]:disabled + label::after{
  border-left:3px solid #dbdbdb;
  border-bottom:3px solid #dbdbdb;
}
div.wc_checkbox [type="checkbox"]:not(:checked) + label::after{
	opacity:0;
	transform:scale(0) rotate(-45deg);
}
div.wc_checkbox [type="checkbox"]:checked + label::after{
	opacity:1;
	transform:scale(1) rotate(-45deg);
}
div.wc_checkbox [type="checkbox"] + label{
	line-height:30px;
}
div.wc_switcharea{
	position:relative;
	z-index:1;
}
div.wc_switcharea label p{
	line-height:36px;
	padding:0 60px 0 0;
}
div.wc_switcharea label::before,
div.wc_switcharea label::after{
	content:'';
	position:absolute;
	display:block;
	top:50%;
	transform:translateY(-50%);
	transition:all 0.2s ease;
}
div.wc_switcharea label::before{
	box-shadow:inset 1px 1px 2px #ceced1,inset -1px -1px 2px #ffffff;
	border-radius:15px;
	width:51px;
	height:30px;
	background-color:#f2f2f6;
	z-index:1;
	right:0;
}
div.wc_switcharea [type="checkbox"]:checked + label::before{
	background-color:#0bf;
}
div.wc_switcharea label::after{
	box-shadow:1px 1px 2px #d9d9d9,-1px -1px 2px #ffffff;
	border-radius:13px;
	width:26px;
	height:26px;
	background-color:#fff;
	z-index:2;
	right:23px;
}
div.wc_switcharea [type="checkbox"]:checked + label::after{
	box-shadow:1px 1px 2px #009fd9,-1px -1px 2px #00d7ff;
	right:2px;
}
div.wc_filewrap{
	display:flex;
	position:relative;
	z-index:1;
}
div.wc_filewrap > *:not(.wc_filebtnarea) {
	position: relative;
	z-index: 1;
}
div.wc_filewrap div.wc_thumbnail{
	margin:0 6px 0 0;
	background-color:#dbdbdb;
	width:36px;
	height:36px;
	flex-shrink:0;
	overflow:hidden;
	position:relative;
	z-index:1;
	box-sizing:border-box;
	border:solid 1px #dbdbdb;
}
div.wc_filewrap div.wc_thumbnail img{
	width:34px;
	height:34px;
	object-fit:cover;
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
div.wc_filewrap div.wc_thumbnail canvas{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
div.wc_filewrap input[type="file"]{
	display:none;
}
div.wc_filewrap button.wc_thumdelete{
	position:relative;
	z-index:1;
	background-color:transparent;
	width:36px;
	height:36px;
	border-radius:50%;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23fff" d="M25.6 9.6h-5.76l-0.64-3.2h-6.4l-0.64 3.2h-5.76c-0.294 0-0.533 0.239-0.533 0.533s0.239 0.533 0.533 0.533h2.201l0.867 13.871c0.073 1.171 1.092 2.129 2.266 2.129h8.533c1.173 0 2.193-0.958 2.267-2.129l0.867-13.871h2.199c0.294 0 0.533-0.239 0.533-0.533s-0.239-0.533-0.533-0.533zM13.674 7.467h4.652l0.426 2.133h-5.504l0.427-2.133zM21.469 24.469c-0.038 0.613-0.59 1.131-1.202 1.131h-8.533c-0.612 0-1.164-0.517-1.202-1.13l-0.863-13.804h12.662l-0.862 13.803zM16 24c0.294 0 0.533-0.239 0.533-0.533v-10.667c0-0.294-0.239-0.533-0.533-0.533s-0.533 0.239-0.533 0.533v10.667c0 0.294 0.239 0.533 0.533 0.533zM12.966 24c0.006 0 0.013 0 0.019 0 0.293-0.011 0.524-0.257 0.514-0.553l-0.367-10.667c-0.012-0.293-0.281-0.513-0.553-0.514-0.293 0.011-0.524 0.257-0.514 0.553l0.367 10.667c0.011 0.287 0.247 0.514 0.533 0.514zM19.014 24c0.006 0 0.013 0 0.019 0 0.287 0 0.523-0.227 0.533-0.514l0.367-10.667c0.010-0.294-0.221-0.542-0.514-0.553-0.277 0.021-0.542 0.221-0.553 0.514l-0.367 10.667c-0.010 0.295 0.221 0.542 0.514 0.553z" /></svg>');
	background-repeat:no-repeat;
	background-position:center;
	background-size:30px;
	background-color:#445;
}
div.wc_filewrap label.wc_filelabel{
	display: block;
	background-color:#000;
	color:#FFF;
	width: 90px;
	text-align: center;
	line-height:36px;
	white-space:nowrap;
}
div.wc_filewrap label.wc_filelabel + input{
	width: calc( 100% - 168px );
	max-width: calc( 100% - 168px );
	background-color:transparent;
	color:rgba(68,68,85,0.5);
	-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 36px,#000 72px);
	mask-image:linear-gradient(to left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 36px,#000 72px);
	position:relative;
	z-index:1;
}
div.wc_filewrap div.wc_filebtnarea {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 36px;
	bottom: 0;
	left: 36px;
	cursor: pointer;
}