/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%;
  }
}