.requestForm {
position:relative;
width:100%;
display:flex;
flex-wrap:wrap;
}
.requestForm_wrapper {
width:var(--gridWidth10);
margin:0 auto;
}
.formRow {
position:relative;
width:100%;
display:flex;
justify-content:space-between;
}
.formField {
position:relative;
}
.formRow:last-Child .formField {
position:relative;
margin-bottom:0;
}
.formField_full {
width:calc(100% - 2px);
}
.formField_half {
width:calc(((100% - (20px * var(--pixelMultiplicator))) / 2) - 2px);
}
.formField_third {
width:calc(((100% - (20px * var(--pixelMultiplicator))) / 3) - 2px);
}
.formField_styled {
min-height:calc(74px * var(--pixelMultiplicator));
border:1px solid #cccccc;
}
.formRow_border {
min-height:calc(74px * var(--pixelMultiplicator));
border:1px solid #cccccc;
display:flex;
align-items:center;
padding-left:calc(20px * var(--pixelMultiplicator));
width:calc(100% - (20px * var(--pixelMultiplicator)) - 2px);
}
.formRow_border .formField_styled {
border:0;
}
.formRow + .formRow .formField_styled {
border-top:0px solid #cccccc;
}
.formRow + .formRow_border {
border-top:0px solid #cccccc;
}
label, {
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
font-size: calc(18px * var(--pixelMultiplicator));
}
label p, label p a {
font-size: calc(14px * var(--pixelMultiplicator));
line-height:calc(30px * var(--pixelMultiplicator));
}
.formField_styled label {
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
left:calc(20px * var(--pixelMultiplicator));
line-height:calc(30px * var(--pixelMultiplicator));
transform-origin:left top;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
white-space:nowrap;
display:flex;
align-items:center;
color:#68676C;
}
.formRow_border .formField_styled label {
left:0;
}
.inFocus label, .hasValue label {
top:calc(8px * var(--pixelMultiplicator));
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none;
-webkit-transform:scale(.7);
-moz-transform:scale(.7);
-ms-transform:scale(.7);
-o-transform:scale(.7);
transform:scale(.7);
}
.formField_styled input[type="text"], .formField_styled input[type="email"] {
position:absolute;
bottom:0;
left:0;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
border:0;
background:none;
height:calc(50px * var(--pixelMultiplicator));
width:calc(100% - (40px * var(--pixelMultiplicator)));
font-size: calc(18px * var(--pixelMultiplicator));
line-height:calc(50px * var(--pixelMultiplicator));
padding-left:calc(20px * var(--pixelMultiplicator));
padding-right:calc(20px * var(--pixelMultiplicator));
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
}
.formField_styled select {
position:absolute;
bottom:0;
left:0;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
border:0;
border-radius:0;
background:none;
height:calc(50px * var(--pixelMultiplicator));
width:100%;
font-size: calc(18px * var(--pixelMultiplicator));
line-height:calc(50px * var(--pixelMultiplicator));
padding-left:calc(20px * var(--pixelMultiplicator));
padding-right:calc(20px * var(--pixelMultiplicator));
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
}
.formRow_border .formField_styled select {
padding-left:0;
}
.formField_styled textarea {
border:0;
height:calc(140px * var(--pixelMultiplicator));
padding-top:calc(30px * var(--pixelMultiplicator));
width:calc(100% - (40px * var(--pixelMultiplicator)));
margin-left:calc(20px * var(--pixelMultiplicator));
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
line-height:calc(28px * var(--pixelMultiplicator));
background:none;
resize:none;
}
.checkboxHolder input {
position:absolute;
top:0;
left:0;
height:100%;
width:calc(25px * var(--pixelMultiplicator));
opacity:0;
cursor:pointer;
}
.checkboxHolder .checkmark {
position:absolute;
top:calc(3px * var(--pixelMultiplicator));
left:0;
height:calc(23px * var(--pixelMultiplicator));
width:calc(23px * var(--pixelMultiplicator));
border:1px solid #cccccc;
background-color:#ffffff;
}
.checkboxHolder .checkmark:after {
content:"";
position:absolute;
display:none;
}
.checkboxHolder input:checked ~ .checkmark:after {
display:block;
}
.checkboxHolder:hover input ~ .checkmark {
background-color:#68676C;
}
.checkboxHolder input:checked ~ .checkmark {
background-color:#68676C;
}
.checkboxHolder .checkmark:after {
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);
width:calc(5px * var(--pixelMultiplicator));
height:calc(10px * var(--pixelMultiplicator));
border:solid white;
border-width:0 calc(3px * var(--pixelMultiplicator)) calc(3px * var(--pixelMultiplicator)) 0;
}
::-webkit-input-placeholder {
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
line-height:calc(30px * var(--pixelMultiplicator));
}
::-moz-placeholder {
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
line-height:calc(30px * var(--pixelMultiplicator));
}
::-moz-placeholder {
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
line-height:calc(30px * var(--pixelMultiplicator));
}
::-ms-input-placeholder {
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
line-height:calc(30px * var(--pixelMultiplicator));
}
::-ms-input-placeholder {
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
line-height:calc(30px * var(--pixelMultiplicator));
}
::placeholder {
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
color:#68676C;
line-height:calc(30px * var(--pixelMultiplicator));
}
.formField_privacy {
display:flex;
align-items:stretch;
margin-top:calc(30px * var(--pixelMultiplicator));
}
.checkboxHolder {
display:block;
position:relative;
padding-left:calc(40px * var(--pixelMultiplicator));
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.formRow_security {
position:absolute;
opacity:0;
pointer-events:none;
}
.formRow_flex {
display:flex;
}
.formRow_flexCenter {
justify-content:center;
}
.formField_submit {
width:100%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.formField_submit button {
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
border:0;
cursor:pointer;
background:none;
}
label[for="formPrivacy"] {
width:calc(100% - (40px * var(--pixelMultiplicator)));
}
.formField_select:after {
content:'';
position:absolute;
top:0;
right:calc(30px * var(--pixelMultiplicator));
bottom:0;
width:calc(10px * var(--pixelMultiplicator));
background-image:url(/fileadmin/templates/images/formSelect.svg);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
z-index:2;
}
.formField_textarea:not(.hasValue):not(.inFocus) label {
top:calc(30px * var(--pixelMultiplicator));
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none;
}
label p + p {
margin-top:calc(20px * var(--pixelMultiplicator));
}
fieldset {
width:100%;
border:0;
margin:0;
padding:0;
}
fieldset + fieldset {
margin-top:40px
}
fieldset h3 {
margin-bottom:calc(30px * var(--pixelMultiplicator));
}
select {
font-family:'Roboto', sans-serif;
font-weight:400;
font-style:normal;
border:0;
background:none;
font-size: calc(18px * var(--pixelMultiplicator));
line-height:calc(74px * var(--pixelMultiplicator));
width:calc(100% - (20px * var(--pixelMultiplicator)));
color:#68676C;
}
option {
color:#68676C;
}
.formChild {
display:none;
}
.fomrCheck #formSubmit, .formSend #formSubmit {
opacity:0.5;
pointer-events:none;
}
.formRow_grey {
background-color:#cfd7bd;
}