/home/bdqbpbxa/demo-subdomains/magnetiq.goodface.com.ua/css/ui-kit/form-elements.css
.multi-input {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.686vw
/*10px*/
;
}
.input {
position: relative;
display: block;
width: 100%;
margin-bottom: 0.686vw
/*10px*/
;
}
.input__error {
color: #EF436C;
transition: opacity 0.4s;
margin-top: 0.549vw
/*8px*/
;
display: none;
}
.input__wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
}
.input__wrapper input,
.input__wrapper textarea {
border-radius: 2.196vw
/*32px*/
;
background: var(--White, #FFF);
border: 1px solid var(--White, #FFF);
padding: 0 2.196vw
/*32px*/
0 2.196vw
/*32px*/
;
height: 4.393vw
/*64px*/
;
width: 100%;
color: rgba(0, 0, 0, 0.7);
line-height: 100%;
transition: color 0.4s, background 0.4s, border 0.4s;
overflow: hidden;
}
.input__wrapper textarea {
min-height: 4.393vw
/*64px*/
;
padding: 1.510vw
/*22px*/
2.196vw
/*32px*/
1.510vw
/*20px*/
2.196vw
/*32px*/
;
line-height: 140%;
resize: none;
}
body.-apple .input__wrapper input {
padding-top: 4px;
padding-bottom: 1px;
}
body.-apple .input__wrapper textarea {
padding-top: 20px;
}
.input__wrapper input::placeholder,
.input__wrapper textarea::placeholder {
color: var(--Black);
opacity: 0.4;
}
.input__wrapper input:focus,
.input__wrapper textarea:focus {
border-color: var(--Grey);
color: rgba(0, 0, 0, 1);
}
.input.-invalid input,
.input.-invalid textarea,
.input.--dropdown.-invalid .--dropdown__value {
border-color: #EF436C;
}
.input.-invalid .input__error {
display: block;
}
.form .screen-reader-response,
.form .wpcf7-response-output {
display: none;
}
/* checkbox */
.--checkbox {
position: relative;
cursor: pointer;
width: fit-content;
user-select: none;
display: flex;
justify-content: flex-start;
align-items: center;
}
.--checkbox input {
display: none;
}
.--checkbox span {
transition: color 0.4s, opacity 0.4s;
color: var(--black-70, rgba(0, 0, 0, 0.70));
}
.--checkbox:before,
.--checkbox:after {
content: '';
position: absolute;
display: block;
left: 0;
border-radius: 0.137vw
/*2px*/
;
min-width: 1.373vw
/*20px*/
;
width: 1.373vw
/*20px*/
;
aspect-ratio: 1/1;
transition: opacity 0.4s, border 0.4s;
box-sizing: border-box;
background: var(--White);
}
.--checkbox:after {
opacity: 0;
pointer-events: none;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiByeD0iMiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTYgMTAuMzU3MUw4LjQgMTIuNUwxNCA3LjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=);
}
.--checkbox:before {
position: relative;
margin-right: 1.098vw
/*16px*/
;
border: 0.137vw
/*2px*/
solid var(--Dark-grey);
}
.--checkbox.-checked:before {
opacity: 0;
}
.--checkbox.-checked:after {
opacity: 1;
}
.--checkbox.-invalid:before {
border-color: #EF436C;
}
@media screen and (max-width: 1100px) {
.multi-input {
flex-wrap: wrap;
gap: 0 clamp(9px, 2.564vw, 11px)
/*10px*/
;
}
.multi-input .input {
width: 100%;
}
.input {
margin-bottom: clamp(9px, 2.564vw, 11px)
/*10px*/
;
}
.input__error {
margin-top: clamp(7px, 2.051vw, 9px)
/*8px*/
;
}
.input__wrapper input,
.input__wrapper textarea {
border-radius: 32px;
padding: 0 clamp(31px, 8.205vw, 33px)
/*32px*/
;
height: clamp(54px, 14.359vw, 58px)
/*56px*/
;
}
.input__wrapper textarea {
min-height: clamp(54px, 14.359vw, 58px)
/*56px*/
;
padding: 17px clamp(31px, 8.205vw, 33px)
/*32px*/
19px clamp(31px, 8.205vw, 33px)
/*32px*/
;
}
body.-apple .input__wrapper input {
padding-top: 2px;
padding-bottom: 0;
}
body.-apple .input__wrapper textarea {
padding-top: 18px;
}
/* checkbox */
.--checkbox {
padding: 0 clamp(26px, 6.923vw, 29px);
}
.--checkbox:after {
left: clamp(26px, 6.923vw, 29px);
}
.--checkbox:before,
.--checkbox:after {
border-radius: 2px;
min-width: 20px;
width: 20px;
}
.--checkbox:before {
margin-right: clamp(15px, 4.103vw, 17px)
/*16px*/
;
border: 2px solid var(--Dark-grey);
}
.--checkbox a {
white-space: nowrap;
}
}
@media screen and (max-width: 760px) {
.multi-input {
flex-direction: column;
}
.multi-input .input {
width: 100%;
max-width: 100%;
}
}