/* FORM
======================================================= */

/* ERROR TEXT */
form span.red.text {position:absolute;bottom:calc(var(--ss)*-18vw); color:var(--red); font:var(--p-xs)}

/* FIELDS */
form .segment{margin-bottom:calc(var(--ss)*44vw);}
form .segment > .field{margin-bottom:calc(var(--ss)*20vw); position:relative; width:100%;}
form .segment:last-child,
form .segment > .field:last-child{margin-bottom: 0 !important;}


form div.grid-2 label{grid-column:1 / 3}

/* INPUT */
form input[type="text"], form input[type="text"]:focus, form input[type="text"]:hover, form .error input[type="text"],
form input[type="tel"], form input[type="tel"]:focus, form input[type="tel"]:hover, form .error input[type="tel"],
form textarea, form .selection.dropdown{padding:calc(var(--ss)*15vw) 0; border:0; border-bottom:var(--border); box-shadow:none; border-radius:0; background: transparent; margin-bottom:0; font:var(--title); height:calc(var(--ss)*44vw); min-height:fit-content; display:flex; align-items: center; line-height:1; color:var(--white ); width:100%; text-align: left; text-transform: uppercase; letter-spacing:var(--ls07)}

form textarea{border:var(--border); height:calc(var(--ss)*132vw); padding:calc(var(--ss)*17vw) calc(var(--ss)*14vw);}

form .mainfield > label{width:100%;font:var(--title); margin-bottom:var(--spacing); text-transform: uppercase; letter-spacing:var(--ls07)}

#required-text p{font:var(--p1); letter-spacing:var(--ls07);}

@media(max-width:768px){}

@media(min-width:769px){
    form > div{max-width:calc(var(--ss)*715vw); margin:0 auto;}
    
    form .segment > .field.w-50[data-uid="96"]{margin-bottom: 0;}
    
    form .segment > .field.w-50,
    form .field.w-50 input[type="text"], form .field.w-50 input[type="text"]:focus, form .field.w-50 input[type="text"]:hover, form .error .field.w-50 input[type="text"],
	form .field.w-50 input[type="tel"], form .field.w-50 input[type="tel"]:focus, form .field.w-50 input[type="tel"]:hover, form .error .field.w-50 input[type="tel"],
	form .field.w-50 textarea, form .field.w-50 .selection.dropdown{width:calc(var(--ss)*333vw)}
    
    form .mainfield > label{margin-bottom:calc(var(--ss)*27vw); }
    
}

@media(min-width:1513px){
    /* ERROR TEXT */
	body.fixed-width form span.red.text {bottom:calc(-18/16*1rem);}
    
    body.fixed-width form > div{max-width:calc(715/16*1rem);}
    
    /* FIELDS */
    body.fixed-width form .segment{margin-bottom:calc(44/16*1rem);}
	body.fixed-width form .segment > .field{margin-bottom:calc(20/16*1rem);}
    
    body.fixed-width form input[type="text"], body.fixed-width form input[type="text"]:focus, body.fixed-width form input[type="text"]:hover, body.fixed-width form .error input[type="text"],
	body.fixed-width form input[type="tel"], body.fixed-width form input[type="tel"]:focus, body.fixed-width form input[type="tel"]:hover, body.fixed-width form .error input[type="tel"],
	body.fixed-width form textarea, body.fixed-width form .selection.dropdown{padding:calc(15/16*1rem) 0; height:calc(44/16*1rem);}
    
    body.fixed-width form .segment > .field.w-50,
    body.fixed-width form .field.w-50 input[type="text"], body.fixed-width form .field.w-50 input[type="text"]:focus, body.fixed-width form .field.w-50 input[type="text"]:hover, body.fixed-width body.fixed-width form .error .field.w-50 input[type="text"],
	body.fixed-width form .field.w-50 input[type="tel"], body.fixed-width form .field.w-50 input[type="tel"]:focus, body.fixed-width form .field.w-50 input[type="tel"]:hover, body.fixed-width form .error .field.w-50 input[type="tel"],
	body.fixed-width form .field.w-50 textarea, body.fixed-width form .field.w-50 .selection.dropdown{width:calc(333/16*1rem)}
    
    body.fixed-width form textarea{height:calc(132/16*1rem);padding:calc(17/16*1rem) calc(14/16*1rem);}
	
	body.fixed-width form .mainfield > label{margin-bottom:calc(27/16*1rem); }
}

/* IOS FIXES */
@media(max-width:768px){}



/* SELECT
======================================================= */
form div[data-vtype="select"]{z-index:1000;}
form .selection.dropdown{position:relative; cursor:pointer;}
.dropdown > select { display: none; }
form .dropdown:not(.button) > .default.text.placeholder{opacity:0.3}
form .default.dropdown:not(.button) > .text, form .dropdown:not(.button) > .default.text{font:var(--input);}

form .selection.dropdown .menu{outline: 0; margin: 0; max-height:calc(var(--ss)*467vw); box-shadow: 0 2px 3px 0 rgba(34,36,38,.15); background:var(--red); border-radius:0; border:var(--border); width:100%;overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch;transition: opacity .1s ease;left: 0;cursor: auto; position: absolute;  top:100%;padding:0;font:var(--input); text-shadow: none; text-align: left; z-index: 1000; }

form .field .dropdown .menu > .item{font:var(--input); color:var(--white); padding:calc(var(--ss)*15vw); z-index: 11; will-change: transform,opacity; margin:0 auto;height:calc(var(--ss)*44vw); display:flex;align-items: center; justify-content: flex-start; border-radius:0; transition:all 0.3s;border:var(--border); width:100%; letter-spacing:var(--ls07); cursor:pointer; background:var(--white30)}
form .field .dropdown .menu > .item:not(:last-child){border-bottom:var(--border)}
form .field .dropdown .menu > .item.active{background-color:var(--white); color:var(--black)}
form .field .dropdown .menu > .item:focus,
form .field .dropdown .menu > .item:hover{background-color:rgba(255, 255, 255, 0.5)}

form .selection.dropdown > .dropdown.icon{width:calc(var(--ss)*18.3vw); height:calc(var(--ss)*20vw); top:50%; right:0; transform:translateY(-50%); transition: transform 0.3s; background:url('/templates/loftlines/images/shared/select-input.svg') center / contain no-repeat; margin: 0; padding:0; opacity:1;cursor: pointer;position: absolute;z-index: 3;}
form .selection.dropdown.active > .dropdown.icon{transform:translateY(-50%) scaleY(-1);}
form .selection.dropdown > .dropdown.icon::before {display: none;}

@media(max-width:768px){}

@media(min-width:769px){}

@media(min-width:1513px){
    body.fixed-width form .selection.dropdown .menu{max-height:calc(467/16*1rem); }
    body.fixed-width form .field .dropdown .menu > .item{ padding:calc(15/16*1rem);height:calc(44/16*1rem);}
    
    body.fixed-width form .selection.dropdown > .dropdown.icon{width:calc(18/16*1rem); height:calc(20/16*1rem);}
}

/* IOS FIXES */
@media(max-width:768px){}


/* CHECKBOX
======================================================= */
form .chckbox{width:100%;}
form .chckbox label{display:flex;padding-left:calc(var(--ss)*45vw); font:var(--p-xs); margin-bottom:0; align-items:flex-start; padding-top:0; height:fit-content;}

form .chckbox label:before{position: absolute; left:0; top:0; content:''; height:calc(var(--ss)*20vw); width:calc(var(--ss)*20vw); color:var(--white); background:transparent; border:var(--border); z-index:1; transition:border 0.3s; display: flex; justify-content: center; align-items: center; cursor:pointer; border-radius:0}

form .chckbox.checked label:before{ content: "✓";}

form .chckbox:after,
form .chckbox label:after{display:none;}

form .field.error .chckbox label::before{background:transparent;}

@media(max-width:768px){
    form .chckbox label{padding-right:calc(var(--ss)*22vw);}
}

@media(min-width:769px){}

@media(min-width:1513px){
    body.fixed-width form .chckbox label{padding-left:calc(45/16*1rem);}

	body.fixed-width form .chckbox label:before{height:calc(20/16*1rem); width:calc(20/16*1rem);}
}

/* IOS FIXES */
@media(max-width:768px){
}


/* CHECKBOXES (BTN GROUP) 
======================================================= */
form div.btn-group{gap:calc(var(--ss)*3vw)}
form div.btn-group .checkboxes label{padding: 0 calc(var(--ss)*14vw); background:transparent; color:var(--white); border:var(--border); font:var(--input); transition: all 0.3s; height:calc(var(--ss)*44vw); display:flex; justify-content: center; align-items: center; border-radius:0; cursor:pointer; text-transform: uppercase; letter-spacing:var(--ls07)}
form div.btn-group .checkboxes.checked label{color:var(--black); background: var(--white)}
form div.btn-group .checkboxes:not(.checked):hover label{background:var(--white30);}

form div.btn-group[data-uid="10"]{margin-bottom:calc(var(--ss)*3vw);}

@media(max-width:768px){
}

@media(min-width:769px){
    form div.btn-group{gap:calc(var(--ss)*5vw)}
    form div.btn-group[data-uid="10"]{margin-bottom:calc(var(--ss)*5vw);}
}

@media(min-width:1513px){
	body.fixed-width form div.btn-group{gap:calc(var(--ss)*3vw)}
    body.fixed-width form div.btn-group .checkboxes label{padding: 0 calc(14/16*1rem); height:calc(44/16*1rem); }
    body.fixed-width form div.btn-group[data-uid="10"]{margin-bottom:calc(5/16*1rem);}
}


/* RADIO
======================================================= */

form .radio label{ font:var(--p1); line-height: 1; padding-left:calc(var(--ss)*45vw); height:calc(var(--ss)*20vw); display:flex; align-items: center; position:relative; cursor:pointer;}
form .radio label:before{position: absolute; left:0; top:0; content:''; height:calc(var(--ss)*20vw); width:calc(var(--ss)*20vw); min-width:calc(var(--ss)*20vw); border-radius:0; background:transparent; border:var(--border); z-index:1; transition:all 0.3s; cursor:pointer; }
form .radio.checked label:before{background:var(--white); border-color:var(--black)}

@media(max-width:768px){
    form div[data-vtype="radios"] .field:not(:last-child){margin-bottom:calc(var(--ss)*27vw);}
}

@media(min-width:769px){
    form .mainfield[data-vtype="radios"] > .field{width:calc(50% - calc(var(--ss)*2.5vw))}
	
}

@media(min-width:1441px){
    body.fixed-width form .radio label{ padding-left:calc(45/16*1rem); height:calc(20/16*1rem);}
    body.fixed-width form .radio label:before{height:calc(20/16*1rem); width:calc(20/16*1rem); min-width:calc(20/16*1rem);}
}


/* TEMPLATE
======================================================= */

@media(max-width:768px){}

@media(min-width:769px){
	button[type="submit"]{margin:0 auto; width:calc(var(--ss)*281vw);}
}

@media(min-width:1513px){
    body.fixed-width button[type="submit"]{width:calc(281/16*1rem);}
}

/* IOS FIXES */
@media(max-width:768px){}







/*
PLACEHOLDERS :-(
========================================================== */

input::-webkit-input-placeholder { opacity:0.3; color:inherit !important; font:inherit;}
input::-moz-placeholder { opacity:0.3; color:inherit !important; font:inherit; padding:inherit; border-radius:inherit;}
input:-ms-input-placeholder { opacity:0.3; color:inherit !important; font:inherit; padding:inherit; border-radius:inherit;}
input:-moz-placeholder { opacity:0.3; color:inherit !important; font:inherit; padding:inherit; border-radius:inherit;}

textarea::-webkit-input-placeholder { opacity:0.3; font:inherit; color:inherit !important; padding:0;}
textarea::-moz-placeholder { opacity:0.3; font:inherit; color:inherit !important; padding:0; border-radius:inherit;}
textarea:-ms-input-placeholder { opacity:0.3; font:inherit; color:inherit !important; padding:0; border-radius:inherit;}
textarea:-moz-placeholder { opacity:0.3; font:inherit; color:inherit !important; padding:0; border-radius:inherit;}