/*import forminput*/

.form-input{
	/*margin-bottom:.75em;*/
	text-align:left;
	position: relative;
	isolation:isolate;
	font-size:var(--form-padding);
}

.form-input input,
.form-input select{
	padding:calc(var(--form-padding)*1.25) var(--form-padding);
	border:1px solid #989898;
	outline:none;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-size:1.1em;
    width:100%;
    /*border-radius:.3em;*/
    position: relative;
    appearance:none;
    -webkit-appearance: none;
   -moz-appearance: none;
}

.form-input input:focus{
	border-color: #80bdff;
    box-shadow: 0 0 0 0.1rem rgb(0 123 255 / 25%);
}

.form-label{
	position: absolute;
	inset:0;
	z-index:1;
	padding:calc(var(--form-padding)*1.25) 0px;
	margin-inline:calc((var(--v-margin)/2) + .6em);
	pointer-events: none;
	font-size:1.1em;
	color:#989898;
	transition:200ms;
}

.form-input > input:focus ~ .form-label,
.form-input > input:not(:invalid) ~ .form-label,
.form-input > select:focus ~ .form-label,
.form-input > select:not(:invalid) ~ .form-label{
	padding:calc(var(--form-padding)/3) calc(var(--form-padding)/4) ;
	font-size:.8em;
	color:#999;
	font-weight:700;
}

.form-select .select-triangle{
	content:'';
	position: absolute;
	right:calc(var(--form-padding)*1.5);
	top:50%;
	transform:translateY(-25%);
	border:calc(var(--form-padding)*.8) solid #999;
	border-left-color:transparent;
	border-bottom-color:transparent;
	border-right-color:transparent;
	transition:100ms;
}

.form-input > select:active ~ .form-label ~ .select-triangle{
	transform:translateY(0%);
}

.form-checkbox{
	display:block;
	text-align:left;
	cursor:pointer;
	font-size:.8em;
	padding-left:2em;
	position: relative;
	/*font-weight:700;*/
	line-height:1.4em;
	font-weight:300;
	margin:1em 0;
}

.form-checkbox input{
	position: absolute;
	top:0;
	left:0;
	width:1.25em;
	height:1.25em;
}

.form-checkbox a{
	text-decoration: none;
}

.form-wrapper{
	--form-padding:14px;
	--h-margin:5px;
	--v-margin:calc(var(--h-margin)*2);
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:var(--v-margin);
	margin-bottom:var(--v-margin);
}

.form-wrapper > div:not(.form-inline){
	grid-column:span 4;
}

.inline-25{
	width:span 1;
}

.inline-50{
	grid-column:span 2;
}

.iti{
	display:block !important;
}

.input-inline{
	display:flex;
	margin:0px -.5em;
}

.input-inline > div{
	padding:0px .5em;
	flex-grow:1;
}

.form-lower p{
	margin:.5em auto;
	font-weight:400;
	font-size:.8em;
	line-height:1.4em;
}

.form-p{
	font-size:.7em;
	line-height:1.4em;
}

.form-wrapper .form-inline.form-inline-form{
	display:flex;
	margin:0 -.25em;
}

.form-wrapper .form-inline.form-inline-form > div{
	padding:0px .25em;
}

.form-btn{
	background:var(--maincolor);
	color:#fff;
	/*text-transform: uppercase;*/
	font-size:1.4em;
	font-weight:700;
	padding:.8em 1em;
	/*text-transform: uppercase;*/
	/*border-radius:.2em;*/
	margin:1em auto;
	letter-spacing: -0em;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #989898;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #989898;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #989898;
}

@media(max-width:767px){

	.form-wrapper{
		--form-padding:12px;
		--h-margin:3px;
		font-size:var(--form-padding);
	}

	.form-wrapper > div:not(.inline-25){
		grid-column:span 4;
	}

	.inline-25{
		grid-column:span 2;
	}
}

/*<div class="form-wrapper">
	<div class="form-input">
		<div class="form-label">Country</div>
		<select>
			<option>Select Country</option>
		</select>
	</div>
	<div class="form-input form-inline inline-50">
		<div class="form-label">Email</div>
		<input type="text" placeholder="Email">
	</div>
	<div class="form-input form-inline inline-50">
		<div class="form-label">Password</div>
		<input type="text" placeholder="Password">
	</div>
	<div class="form-input form-inline inline-50">
		<div class="form-label">First name</div>
		<input type="text" placeholder="First name">
	</div>
	<div class="form-input form-inline inline-50">
		<div class="form-label">Last name</div>
		<input type="text" placeholder="Last name">
	</div>
	<div class="form-input">
		<div class="form-label">Card number</div>
		<input type="text" placeholder="Card number">
	</div>
	<div class="form-input form-inline inline-50">
		<div class="form-label">Security code</div>
		<input type="text" placeholder="Security code">
	</div>
	<div class="form-input form-inline inline-25">
		<div class="form-label">Month</div>
		<input type="text" placeholder="MM">
	</div>
	<div class="form-input form-inline inline-25">
		<div class="form-label">Year</div>
		<input type="text" placeholder="YY">
	</div>
</div>*/