::placeholder{color: var(--color-placeholder, #000000); opacity: 1;}
:-ms-input-placeholder {color: var(--color-placeholder, #000000);}
::-ms-input-placeholder {color: var(--color-placeholder, #000000);}
/******************/
/* Form Header ****/
/******************/
.form-header{
width: 100%;
margin-bottom: var(--gap-700, 48px);
display: flex;
flex-direction: column;
gap: var(--gap-300, 12px);
}
/************************************************************************************************/
/* Form *****************************************************************************************/
/************************************************************************************************/
.form-group,
form input,
form textarea,
.wpcf7 form .form-row p,
.wpcf7 form input.wpcf7-form-control,
.wpcf7 form textarea.wpcf7-form-control{width: 100%;}
form input[type="checkbox"],
form input[type="radio"]{width: auto;}
/******************/
/* Form Part ******/
/******************/
form .form__part:not(:last-of-type){
margin-bottom: var(--gap-600);
}
/* Form Part - Heading & Helper */
form .form__part .form-part__heading,
form .form__part .form-part__helper,
form .form__part .form-part__heading p,
form .form__part .form-part__helper p{
font-family: var(--ff-text);
font-size: var(--fs-h-600);
font-size: var(--fs-400);
color: var(--color-primary, #000000);
}
form .form__part .form-part__heading:not(:empty){margin-bottom: var(--gap-500);}
form .form__part .form-part__helper:not(:empty){margin-top: var(--gap-500);}
/* Form Part - Row */
form .form__part .form-row{margin-bottom: var(--gap-500);}
form .form__part .form-row:last-child{margin-bottom: 0;}
form .form__part .form-row.flex{display: flex;gap: var(--gap-500);}
form .form__part .form-row.form-row--acceptance{margin-bottom: 0;}
form .form__part .form-row.form-row--acceptance label{font-size: var(--fs-400);font-size: var(--fs-200);}
form .form__part .form-row.form-row--submit{margin-top: var(--gap-700);display: flex;justify-content: center;}
/* Inline Submit & Add To Cart */
form .form-row.form-row--inline-submit button[type="submit"],
form .form-row.form-row--inline-add-to-cart button[type="submit"]{flex-shrink: 0;margin-top: 0;}
/* Inline Submit */
form .form-row.form-row--inline-submit{display: grid; grid-template-columns: 1fr 200px; gap: var(--gap-300);}
@media(max-width:767px){
form .form__part .form-row{margin-bottom: var(--gap-500);}
/* Inline Submit */
form .form-row.form-row--inline-submit{grid-template-columns: 1fr;}
form .form__part .form-row.form-row--submit{margin-top: var(--gap-500);}
}
/******************/
/* Form Elements **/
/******************/
/* General Label & Input */
form label,
form label > span.input-label,
.wpcf7 form label,
.wpcf7 form label > span.input-label{
font-family: var(--ff-text);
font-size: var(--fs-400);
}
/* Input's Label */
form label > span.input-label,
.wpcf7 form label > span.input-label{
margin-bottom: var(--gap-300);
padding-block: 0;
}
form label > span.input-label:empty,
.wpcf7 form label > span.input-label:empty{display: none;}
/* Input's Wrapper */
form label span,
.wpcf7 form label span.wpcf7-form-control-wrap{
width: 100%;
position: relative;
display: block;
}
/* Input */
form input,
form textarea,
.wpcf7 form input.wpcf7-form-control,
.wpcf7 form textarea.wpcf7-form-control
{
padding: var(--padding-input);
font-family: var(--ff-text);
font-size: var(--fs-400);
font-size: var(--fs-300);
line-height: var(--lh-400);
color: var(--color-text);
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: var(--br-200);
transition: var(--trans);
}
/* form input:focus,
form textarea:focus,
.wpcf7 form input.wpcf7-form-control:focus,
.wpcf7 form textarea.wpcf7-form-control:focus{border-color: var(--color-accent);} */
/* Submit */
form button[type="submit"],
.wpcf7 form input.wpcf7-submit{
width: auto;
padding: var(--padding-button);
font-family: var(--ff-text-500);
font-size: var(--fs-600);
font-size: var(--fs-400);
background-color: var(--color-accent, #000000);
border-color: var(--color-accent, #000000);
color: #FFFFFF;
border-radius: var(--br-800);
cursor: pointer;
}
form button[type="submit"]:hover,
form button[type="submit"]:focus,
.wpcf7 form input.wpcf7-submit:hover,
.wpcf7 form input.wpcf7-submit:focus{
background-color: var(--hover-accent, #000000);
border-color: var(--hover-accent, #000000);
}
.wpcf7 .wpcf7-form .form-row.form-row--submit{margin-bottom: 0px;}
.wpcf7 .wpcf7-form .form-row.form-row--submit,
.wpcf7 .wpcf7-form .form-row.form-row--submit p{
display: flex;
justify-content: flex-end;
justify-content: center;
}
.wpcf7 .wpcf7-form .form-row.form-row--submit .wpcf7-spinner{display: none;}
@media(max-width:767px){
/* Input's Label */
form label > span.input-label,
.wpcf7 form label > span.input-label{
margin-bottom: var(--gap-200);
}
.wpcf7 form input.wpcf7-submit{margin-top: var(--gap-400);}
}
/******************/
/* Checkboxes *****/
/******************/
/* Checkbox */
.input-checkbox{--size: 18px;position: relative;min-height: var(--size, 18px);}
.input-checkbox input[type="checkbox"]{width: initial;height: initial;padding: 0;margin: 0;cursor: pointer;opacity: 0;position: absolute;}
.input-checkbox input[type="checkbox"] + label{--top: 0px;position: relative;display: inline-block;padding-left: calc(var(--size, 18px) + var(--gap-200, 8px));line-height: calc(var(--size, 18px) + var(--top, 4px));cursor: pointer;}
.input-checkbox input[type="checkbox"] + label:before,
.input-checkbox input[type="checkbox"] + label:after{top: calc(var(--top) * 0.5);}
.input-checkbox input[type="checkbox"] + label:before{content:'';-webkit-appearance: none;appearance: none;width: var(--size, 18px);height: var(--size, 18px);position: absolute;top:0;left: 0;margin-right: var(--gap-300, 12px);display: inline-block;background-color: white;border: 1px solid var(--color-border, #C0C0C0FF);border-radius: 0px;vertical-align: middle;flex-shrink: 0;cursor: pointer;transition: var(--trans);}
.input-checkbox input[type="checkbox"] + label:after{content: '';position: absolute;width: var(--size, 18px);height: var(--size, 18px);top: 0;left: 0;background-repeat: no-repeat;background-position: center;background-size: 50%;opacity: 0;transition: var(--trans);transition-delay: var(--trans-duration-300, 100ms);}
.input-checkbox input[type="checkbox"] + label:after{background-image: url('data:image/svg+xml,');}
.input-checkbox input[type="checkbox"]:checked + label:before{background-color: var(--color-accent, #000000);border-color: var(--color-accent, #000000);}
.input-checkbox input[type="checkbox"]:checked + label:after{opacity: 1;}
/* Contact Form 7 - Checkbox */
.wpcf7 .form-row.form-row--checkbox,
.wpcf7 .form-row.form-row--checkbox p{max-width: var(--col-8, 1020px);margin-inline: auto;}
.wpcf7 .form-row.form-row--checkbox > label,
.wpcf7 .form-row.form-row--checkbox p > label{display: block;width: 100%;margin-top: var(--gap-300, 32px);margin-bottom: var(--gap-200, 8px);font-family: var(--ff-sans);font-size: var(--fs-400, 18px);text-transform: uppercase;}
.wpcf7 .form-row.form-row--checkbox span.wpcf7-checkbox{display: flex;flex-wrap: wrap;gap: var(--gap-300, 12px);}
.wpcf7 .form-row.form-row--checkbox span.wpcf7-checkbox .wpcf7-list-item{margin:0;}
.wpcf7 .form-row.form-row--checkbox span.wpcf7-checkbox .wpcf7-list-item label{cursor: pointer;}
.wpcf7 .form-row.form-row--checkbox span.wpcf7-checkbox .wpcf7-list-item input{width: 1px;height: 1px;opacity: 0;visibility: hidden;position: absolute;}
.wpcf7 .form-row.form-row--checkbox span.wpcf7-checkbox .wpcf7-list-item span{display: block;padding: 12px 20px;background-color: white;border: 1px solid white;border-radius: var(--br-300, 30px);font-family: var(--ff-sans);font-size: var(--fs-400, 18px);line-height:var(--lh-200, 1.20);color: var(--color-grey, red);transition: var(--trans);}
.wpcf7 .form-row.form-row--checkbox span.wpcf7-checkbox .wpcf7-list-item input:checked + span{background-color: var(--color-accent, #FDB52B);border-color: var(--color-accent, #FDB52B);color: var(--color-text, #000000);}
/******************/
/* Radio **********/
/******************/
/* .wpcf7 .form-row.form-row--radio,
.wpcf7 .form-row.form-row--radio p{
max-width: var(--col-8, 1020px);
margin-inline: auto;
} */
.wpcf7 .form-row.form-row--radio .wpcf7-form-control.wpcf7-radio{
display: flex;
align-items: center;
justify-content: flex-start;
column-gap: var(--gap-600, 32px);
row-gap: var(--gap-400, 16px);
flex-wrap: wrap;
color: var(--color-primary, #000000);
}
.wpcf7 .form-row.form-row--radio .wpcf7-list-item input[type="radio"]{width: auto;}
/* Radio - Vertical */
.wpcf7 .form-row.form-row--radio.form-row--radio-vertical .wpcf7-form-control.wpcf7-radio{flex-direction: column;align-items: flex-start;gap: var(--gap-200, 8px);}
/* Radio - Input Radio */
.wpcf7 form span.wpcf7-radio{--size: 18px;--size-inner: 10px;position: relative;min-height: var(--size, 18px);}
.wpcf7 form span.wpcf7-radio input[type="radio"]{width: initial;height: initial;padding: 0;margin: 0;cursor: pointer;opacity: 0;position: absolute;}
.wpcf7 form span.wpcf7-radio input[type="radio"] + span{--top: 4px;position: relative;display: block;padding-left: calc(var(--size, 18px) + var(--gap-300, 12px));line-height: calc(var(--size, 18px) + var(--top, 4px));cursor: pointer;}
.wpcf7 form span.wpcf7-radio input[type="radio"] + span:before{content:'';-webkit-appearance: none;appearance: none;width: var(--size, 18px);height: var(--size, 18px);position: absolute;top:0;left: 0;margin-right: var(--gap-300, 12px);display: inline-block;background-color: white;border: 1px solid var(--color-border, #C0C0C0FF);border-radius: 50%;vertical-align: middle;flex-shrink: 0;cursor: pointer;transition: var(--trans);}
.wpcf7 form span.wpcf7-radio input[type="radio"] + span:after{content: '';position: absolute;width: var(--size-inner, 10px);height: var(--size-inner, 10px);top: calc((var(--size, 18px) - var(--size-inner, 10px)) / 2);left: calc((var(--size, 18px) - var(--size-inner, 10px)) / 2);background-color: var(--color-accent, #000000);border-color: var(--color-accent, #000000);border-radius: 50%;opacity: 0;transition: var(--trans);}
.wpcf7 form span.wpcf7-radio input[type="radio"]:checked + span:after{opacity: 1;}
/******************/
/* Acceptance *****/
/******************/
.wpcf7 form .wpcf7-acceptance .wpcf7-list-item{margin:0;}
.wpcf7 form .wpcf7-acceptance label{margin-left: 0px;font-family: var(--ff-text);}
.wpcf7 form .wpcf7-acceptance label a{text-decoration: underline;transition: var(--trans);}
.wpcf7 form .wpcf7-acceptance label a:hover,
.wpcf7 form .wpcf7-acceptance label a:focus{color: var(--color-accent);}
/* Acceptance - Checkbox */
.wpcf7 form span.wpcf7-acceptance{--size: 18px;position: relative;min-height: var(--size, 18px);}
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"]{width: initial;height: initial;padding: 0;margin: 0;cursor: pointer;opacity: 0;position: absolute;}
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"] + span{--top: 4px;position: relative;display: block;padding-left: calc(var(--size, 18px) + var(--gap-200, 8px));line-height: calc(var(--size, 18px) + var(--top, 4px));cursor: pointer;}
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"] + span:before,
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"] + span:after{top: calc(var(--top, 4px) * 0.5);}
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"] + span:before{content:'';-webkit-appearance: none;appearance: none;width: var(--size, 18px);height: var(--size, 18px);position: absolute;top:0;left: 0;margin-right: var(--gap-300, 12px);display: inline-block;background-color: white;border: 1px solid var(--color-border, #C0C0C0FF);border-radius: var(--br-200);vertical-align: middle;flex-shrink: 0;cursor: pointer;transition: var(--trans);}
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"] + span:after{content: '';position: absolute;width: var(--size, 18px);height: var(--size, 18px);top: 0;left: 0;background-repeat: no-repeat;background-position: center;background-size: 50%;opacity: 0;transition: var(--trans);transition-delay: var(--trans-duration-300, 100ms);}
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"] + span:after{background-image: url('data:image/svg+xml,');}
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"]:checked + span:before{background-color: var(--color-accent, #000000);border-color: var(--color-accent, #000000);}
.wpcf7 form span.wpcf7-acceptance input[type="checkbox"]:checked + span:after{opacity: 1;}
/******************/
/* Error Messages */
/******************/
.form-responce:empty{display: none;}
.form-responce{margin-top: var(--gap-500, 24px);}
.form-responce,
.wpcf7 span.wpcf7-not-valid-tip{display: block;margin-top: var(--gap-200, 8px);font-family: var(--ff-sans);font-size: var(--fs-200, 13px);font-weight: normal;color: var(--color-error, #FF0000);}
.form-responce .message{font-size: var(--fs-200, 13px);color: var(--color-text, #000000);}
.form-responce .message.error{color: var(--color-error);}
/* Response Message */
.wpcf7 form .wpcf7-response-output{margin: 0;padding: 0;border: 0;margin-top: var(--gap-500, 24px);font-family: var(--ff-sans);font-size: var(--fs-300, 14px);text-align: center;}
.wpcf7 form .wpcf7-response-output:empty{display: none;}
.wpcf7 form.sent .wpcf7-response-output{color: var(--color-primary, #000000);}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{color: var(--color-error, #FF0000);}
@media(max-width:1024px){.wpcf7 form .form-row{flex-direction: column;}}
.wpcf7 .form-row.form-row--pills span.wpcf7-radio input[type="radio"] + span:before,
.wpcf7 .form-row.form-row--pills span.wpcf7-radio input[type="radio"] + span:after,
.wpcf7 .form-row.form-row--pills span.wpcf7-checkbox input[type="checkbox"] + span:before,
.wpcf7 .form-row.form-row--pills span.wpcf7-checkbox input[type="checkbox"] + span:after{
content: unset;
}
.wpcf7 .form-row.form-row--pills p > label{
display: block;
width: 100%;
margin-top: var(--gap-500);
margin-bottom: var(--gap-200);
}
/* span.wpcf7-checkbox */
.wpcf7 .form-row.form-row--pills span.wpcf7-form-control{
display: flex;
flex-wrap: wrap;
gap: var(--gap-300);
}
.wpcf7 .form-row.form-row--pills span.wpcf7-form-control .wpcf7-list-item{
margin:0;
}
.wpcf7 .form-row.form-row--pills span.wpcf7-form-control .wpcf7-list-item label{
cursor: pointer;
}
.wpcf7 .form-row.form-row--pills span.wpcf7-form-control .wpcf7-list-item input{
width: 1px;
height: 1px;
opacity: 0;
visibility: hidden;
position: absolute;
}
.wpcf7 .form-row.form-row--pills span.wpcf7-form-control .wpcf7-list-item span{
padding: var(--padding-button-200);
display: block;
font-family: var(--ff-text-500);
font-size: var(--fs-200);
letter-spacing: var(--ls);
background-color: var(--color-grey-100);
border: 1px solid var(--color-grey-100);
border-radius: var(--br-800);
transition: var(--trans);
}
.wpcf7 .form-row.form-row--pills span.wpcf7-form-control .wpcf7-list-item input:checked + span{
background-color: var(--color-accent);
border-color: var(--color-accent);
color: white;
}
/************************************************************************************************/
/* Specific Form ********************************************************************************/
/************************************************************************************************/
#request-demo .form-header,
#request-demo form{
width: 100%;
max-width: var(--col-7);
margin-inline: auto;
}
#request-demo .form-header{text-align: center;}
#request-demo form .form__part .form-row {margin-bottom: var(--gap-600);}
#request-demo form .form__part .form-row:last-child{margin-bottom: 0;}
#request-demo form .form__part .form-part__heading:not(:empty) {margin-bottom: var(--gap-300);}
#request-demo form .form__part .form-row.form-row--acceptance label{
font-size: var(--fs-200);
}
@media(max-width:1024px){
#request-demo form .form__part .form-row {margin-bottom: var(--gap-500);}
}