:root {
--formFontStyle:italic;
--formFontWeight:500;
--formFontSize:calc(18px * var(--pixelMultiplicator));
--formLineHeight:calc(30px * var(--pixelMultiplicator));
}
form, form label, form input, form select {
font-family:var(--mainFontFamily);
font-weight:var(--formFontWeight);
font-style:var(--formFontStyle);
color:var(--mainFontColor);
}
.requestForm {
width:100%;
}
.formRow {
position:relative;
width:100%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
.formRow:not(.formRow_privacy):not(.formRow_submit) {
width:100%;
}
.formField {
position:relative;
}
.formRow:last-Child .formField {
position:relative;
margin-bottom:0;
}
.formField_full {
width:100%;
}
.formField_half {
width:calc((100% / 2) - 4px - (0.5 * var(--gridDistanceWidth)));
}
.formField_third {
width:calc(100% / 3);
}
.formField_twothird {
width:calc(100% / 3 * 2);
}
.formField_threefourth {
width:calc(100% / 4 * 3);
}
.formField_fourth {
width:calc(100% / 4);
}
.formField_wrapper {
position:relative;
min-height:calc(90px * var(--pixelMultiplicator));
}
.formField_styled label {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;
}
.formField_styled label span {
font-size:var(--formFontSize);
line-height:var(--formLineHeight);
position:absolute;
left:0;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
transform-origin:left top;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
-ms-transition:all 200ms ease;
-o-transition:all 200ms ease;
transition:all 200ms ease;
white-space:nowrap;
padding-left:calc(28px * var(--pixelMultiplicator));
padding-right:calc(28px * var(--pixelMultiplicator));
}
.inFocus label, .hasValue label {
z-index:1;
}
.inFocus label span, .hasValue label span {
top:calc(var(--formLineHeight) * 0.5);
font-size:calc(var(--formFontSize) * 0.6);
line-height:calc(var(--formLineHeight) * 0.6);
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none;
}
label p, label a, label p a {
font-size:var(--formFontSize);
line-height:var(--formLineHeight);
}
.formField_styled {
position:relative;
border:2px solid #ffffff;
background-color:#F2F3F7;
border-radius:calc(45px * var(--pixelMultiplicator));
margin-bottom:calc(20px * var(--pixelMultiplicator));
}
.formField_styled:before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:calc(45px * var(--pixelMultiplicator));
-webkit-box-shadow: -30px -30px 50px 0px rgba(255,255,255,1); 
box-shadow: -30px -30px 50px 0px rgba(255,255,255,1);
z-index:2;
}
.formField_styled:after {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:calc(45px * var(--pixelMultiplicator));
-webkit-box-shadow: 30px 30px 80px 0px rgba(55,84,170,0.1); 
box-shadow: 30px 30px 80px 0px rgba(55,84,170,0.1);
z-index:1;
}
.formField_styled input[type="text"], .formField_styled input[type="email"], .formField_styled input[type="password"] {
font-size:var(--formFontSize);
line-height:var(--formLineHeight);
position:absolute;
bottom:calc(var(--formLineHeight) * 0.5);
left:calc(28px * var(--pixelMultiplicator));
width:calc(100% - (56px * var(--pixelMultiplicator)));
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
border:0;
border-radius:0;
background:none;
z-index:4;
opacity:0;
}
.formField_styled.inFocus input[type="text"], .formField_styled.inFocus input[type="email"], .formField_styled.inFocus input[type="password"], .formField_styled.hasValue input[type="text"], .formField_styled.hasValue input[type="email"], .formField_styled.hasValue input[type="password"] {
opacity:1;
}
.formField_styled select {
position:absolute;
bottom:calc(var(--formLineHeight) * 0.5);
left:calc(28px * var(--pixelMultiplicator));
width:calc(100% - (56px * var(--pixelMultiplicator)));
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
border:0;
border-radius:0;
background:none;
font-size:var(--formFontSize);
line-height:var(--formLineHeight);
height:var(--formLineHeight);
z-index:4;
opacity:0;
}
.formField_styled.inFocus select, .formField_styled.hasValue select {
opacity:1;
}
.formField_styled textarea {
position:absolute;
top:var(--formLineHeight);
left:calc(28px * var(--pixelMultiplicator));
width:calc(100% - (56px * var(--pixelMultiplicator)));
bottom:calc(var(--formLineHeight) * 0.5);
border:0;
font-size:var(--formFontSize);
line-height:var(--formLineHeight);
background:none;
resize:none;
display:block;
z-index:4;
opacity:0;
}
.formField_styled.inFocus textarea, .formField_styled.hasValue textarea {
opacity:1;
}
.formField_textarea .formField_wrapper {
height:calc(var(--formLineHeight) * 5);
}
.checkboxHolder input {
position:absolute;
top:0;
left:0;
height:100%;
opacity:0;
cursor:pointer;
}
.checkboxHolder .checkmark {
position:absolute;
top:0;
left:0;
width:calc(var(--formLineHeight) - 2px);
height:calc(var(--formLineHeight) - 2px);
border:1px solid #656462;
}
.checkboxHolder .checkmark:after {
content:"";
position:absolute;
left:50%;
top:50%;
-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);
-o-transform:translateX(-50%) translateY(-50%) rotate(45deg);
transform:translateX(-50%) translateY(-50%) rotate(45deg);
border:solid #656462;
border-width:0 calc(var(--formFontSize) / 10) calc(var(--formFontSize) / 10) 0;
display:none;
width:calc(var(--formFontSize) / 5);
height:calc(var(--formFontSize) / 5 * 2);
margin-top:calc(var(--formFontSize) / 20 * -1);
}
.checkboxHolder input:checked ~ .checkmark:after {
display:block;
}
.checkboxHolder:hover input ~ .checkmark {
}
.checkboxHolder input:checked ~ .checkmark {
}
.formField_privacy {
display:flex;
align-items:stretch;
}
.formField_privacy .formField_wrapper {
border:0!important;
padding:0;
min-height:auto;
}
.formField_submit .formField_wrapper {
border:0!important;
padding:0;
display:flex;
justify-content:flex-end;
}
.formField_left .formField_wrapper {
border:0;
padding:0;
display:flex;
justify-content:flex-start;
}
.checkboxHolder {
display:block;
position:relative;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
padding-left:calc(var(--formLineHeight) * 1.5);
}
.formRow_security {
position:absolute;
opacity:0;
pointer-events:none;
width:1px;
height:1px;
overflow:hidden;
}
.formField_submit input {
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
display:block;
border:0;
cursor:pointer;
}
.formRow_flex {
display:flex;
}
.formRow_flexCenter {
justify-content:center;
}
.formField_select:after {
content:'';
position:absolute;
top:0;
right:var(--gridDistanceWidth);
bottom:0;
width:var(--formFontSize);
background-image:url(/typo3conf/ext/formprocessing/Resources/Public/Images/formSelect.svg);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
z-index:2;
pointer-events:none;
}
.formAbsolute {
width:100%;
}
.formRow_privacy + .formRow_privacy {
margin-top:calc(20px * var(--pixelMultiplicator));
}
.formRow_privacy + .formRow_submit {
margin-top:calc(10px * var(--pixelMultiplicator));
}
button {
border:0;
background:none;
font-weight:inherit;
font-size:inherit;
line-height:inherit;
color:inherit;
}
@media screen and (max-width:1023px) {
.formField_fourth {
width:calc(100% / 2);
}
}
@media screen and (max-width:767px) {
.formField_half {
    width:100%;
}
.formField_fourth {
    width:100%;
}
}