:root {
--pixelMultiplicator:1;
--mainFontSize:20px;
--mainLineHeight:40px;
--mainFontWeight:var(--p-regular);
--mainFontFamily:"Exo 2",sans-serif;
--mainFontColor:var(--color-body);
}
form, form label, form input, form select, form button {
font-family:var(--mainFontFamily);
font-weight:var(--mainFontWeight);
font-style:var(--mainFontFamily);
color:var(--mainFontColor);
}
.requestForm_wrapper {
padding:25px;
}
.requestForm {
width:100%;
}
.formRow {
position:relative;
width:100%;
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
}
.formRow:not(.formRow_privacy):not(.formRow_submit) {
width:calc(100% - 1px);
border-left:1px solid var(--mainFontColor);
}
.formField {
position:relative;
margin-top:-1px;
}
.formRow:last-Child .formField {
position:relative;
margin-bottom:0;
}
.formField_container {
position:relative;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.formField_full {
width:100%;
}
.formField_half {
width:calc(100% / 2);
}
.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(var(--mainLineHeight) * 2);
padding-top:calc(var(--mainLineHeight) * 0.2);
padding-bottom:calc(var(--mainLineHeight) * 0.2);
border-top:1px solid var(--mainFontColor);
border-right:1px solid var(--mainFontColor);
border-bottom:1px solid var(--mainFontColor);
}
.formGroup + .formGroup {
margin-top:calc(30px * var(--pixelMultiplicator));
}
.formGroup + .formGroup h2 {
padding-top:calc(40px * var(--pixelMultiplicator));
}
.formField_styled label {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;
}
.formField_styled label span {
font-size:calc(var(--mainFontSize) * 0.8);
line-height:calc(var(--mainLineHeight) * 0.8);
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(var(--mainLineHeight) * 0.5);
padding-right:var(--mainLineHeight);
}
.inFocus label, .hasValue label {
z-index:1;
}
.inFocus label span, .hasValue label span {
top:calc(var(--mainLineHeight) * 0.2);
font-size:calc(var(--mainFontSize) * 0.6);
line-height:calc(var(--mainLineHeight) * 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:calc(var(--mainFontSize) * 0.8);
line-height:calc(var(--mainLineHeight) * 0.8);
margin:0;
}
.formField_styled {
background-color:rgba(255,255,255,0.3);
}
.formField_styled input[type="text"], .formField_styled input[type="email"], .formField_styled input[type="password"] {
font-size:var(--mainFontSize);
line-height:var(--mainLineHeight);
position:absolute;
bottom:calc(var(--mainLineHeight) * 0.2);
left:calc(var(--mainLineHeight) * 0.5);
width:calc(100% - var(--mainLineHeight));
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
border:0;
border-radius:0;
background:none;
z-index:4;
opacity:0;
padding: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(--mainLineHeight) * 0.2);
left:calc(var(--mainLineHeight) * 0.5);
width:calc(100% - var(--mainLineHeight));
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
border:0;
border-radius:0;
background:none;
font-size:var(--mainFontSize);
line-height:var(--mainLineHeight);
height:var(--mainLineHeight);
z-index:4;
opacity:0;
}
.formField_styled.inFocus select, .formField_styled.hasValue select {
opacity:1;
}
.formField_styled textarea {
position:absolute;
top:calc(var(--mainLineHeight) * 0.8);
left:calc(var(--mainLineHeight) * 0.5);
width:calc(100% - var(--mainLineHeight));
bottom:calc(var(--mainLineHeight) * 0.2);
border:0;
font-size:var(--mainFontSize);
line-height:var(--mainLineHeight);
background:none;
resize:none;
display:block;
z-index:4;
opacity:0;
padding:0;
}
.formField_styled.inFocus textarea, .formField_styled.hasValue textarea {
opacity:1;
}
.formField_textarea .formField_wrapper {
height:calc(var(--mainLineHeight) * 5);
}
.checkboxHolder input {
position:absolute;
top:0;
left:0;
height:100%;
opacity:0;
cursor:pointer;
}
.checkboxHolder .checkmark {
position:absolute;
top:calc((var(--mainLineHeight) - var(--mainFontSize)) / 4);
left:0;
width:calc(var(--mainFontSize) - (2px * var(--pixelMultiplicator)));
height:calc(var(--mainFontSize) - (2px * var(--pixelMultiplicator)));
border:1px solid var(--mainFontColor);
}
.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 var(--mainFontColor);
border-width:0 calc(var(--mainFontSize) / 10) calc(var(--mainFontSize) / 10) 0;
display:none;
width:calc(var(--mainFontSize) / 5);
height:calc(var(--mainFontSize) / 5 * 2);
margin-top:calc(var(--mainFontSize) / 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:var(--mainLineHeight);
}
.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(--mainFontSize);
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));
}
form button {
border:0;
background:none;
background-color:rgba(255,255,255,0.3);
border:1px solid var(--mainFontColor);
width:auto;
padding-left:25px;
padding-right:25px;
font-family: var(--font-secondary);
line-height: 10px;
    max-width: max-content;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.formRow_dummy {
opacity:0;
position:absolute;
top:0;
left:0;
width:0;
height:0;
pointer-events:none;
}
.formField_icon {
display:flex;
align-items:center;
justify-content:flex-end;
}
.formField_icon svg {
height:var(--mainFontSize);
width:auto;
}
.formField_remove {
cursor:pointer;
}
.formRow_privacy {
margin-top:25px;
}
.formRow_privacy + .formRow_privacy {
margin-top:0;
}
.ui-datepicker {
    width: auto!important;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
}
@media screen and (max-width:1279px) {
.formField_fourth {
width:calc(100% / 2);
}
}
@media screen and (max-width:1023px) {
.formField_half {
    width:100%;
}
.formField_third {
    width:100%;
}
.formField_fourth {
    width:100%;
}
}