.field {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-block-end: 20px;
  font-size: 14px;
  line-height: 1.4;
  color: rgb(41, 37, 44);
  background-color: rgb(255, 255, 255);
  transition: all 300ms;
}

@media (max-width: 959px) {
  .field {
    margin-block-end: 16px;
  }
}

.field::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  border-color: rgba(41, 37, 44, 0.2);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px rgba(41, 37, 44, 0);
  transition: border-color 300ms;
}

.field__inner {
  position: relative;
  flex: 1;
}

.field__group {
  display: flex;
  gap: 16px;
}

.field__label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 16px 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: inherit;
  color: rgb(148, 148, 148);
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: break-word;
  pointer-events: none;
  transition: transform 300ms ease;
  transform: translateY(-50%);
  transform-origin: left top;
  -webkit-box-orient: vertical;
}

.field__input {
  width: 100%;
  padding: 24px 16px 10px;
  font-size: inherit;
  line-height: 1.4;
  color: rgb(41, 37, 44);
  appearance: none;
  background: none;
  border: none;
  outline: none;
  box-shadow: none !important;
}

.field__input::placeholder {
  opacity: 0;
}

.field__input::-webkit-search-cancel-button {
  display: none;
}

.field__input:focus~.field__label,
.field__input:not(:placeholder-shown)~.field__label,
.field__input:-webkit-autofill~.field__label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: normal;
  white-space: nowrap;
  transform: scale(0.7) translate(0, -120%);
  -webkit-box-orient: vertical;
}

.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus,
.field__input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset !important;
  -webkit-text-fill-color: rgb(41, 37, 44);
}

.field__input.textarea {
  min-height: 100px;
  padding-block: 0;
  padding-inline: 16px;
  margin-block: 20px 6px;
  resize: none;
}

.field__input.textarea+.field__label {
  inset-block-start: 25px;
}

.field__suffix {
  display: flex;
  justify-content: center;
  padding-block: 6px;
  padding-inline-end: 10px;
}

.field__info {
  display: flex;
  font-size: 12px;
  line-height: 1.4;
}

.field__info>svg {
  margin-inline-end: 4px;
}

.field__info--error {
  margin-block: -10px 20px;
  font-size: 12px;
  color: rgb(240, 73, 73);
}

.field__info--error:empty {
  display: none;
}

@media (min-width: 960px) {
  .field__info>svg {
    margin-inline-end: 8px;
  }
}

.field:hover::after {
  border-color: rgba(41, 37, 44, 0.2);
  border-width: calc(1px + 1px);
}

.field:focus::after,
.field:focus-within::after {
  border-color: rgba(41, 37, 44, 0.2);
  border-width: calc(1px + 1px);
}

.field--disabled {
  pointer-events: none;
}

.field--disabled::after {
  background-color: rgb(0 0 0 / 10%);
  border-color: rgb(0 0 0 / 10%);
}

.field--error::after {
  border-color: rgba(240, 73, 73, 0.2);
  border-width: calc(1px + 1px);
}

.field--normal .field__input {
  padding: 13px 16px;
}

.field--normal .field__input::placeholder {
  opacity: 1;
}

.field--normal .field__input~.field__label,
.field--normal .field__input:focus~.field__label,
.field--normal .field__input:not(:placeholder-shown)~.field__label,
.field--normal .field__input:-webkit-autofill~.field__label {
  display: none;
}

.field-checkbox {
  position: relative;
  inset-block-start: 0.2em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  outline: none;
}

.field-checkbox input[type="checkbox"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: auto;
  cursor: pointer;
  opacity: 0;
}

.field-checkbox .checkbox {
  position: relative;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-collapse: separate;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 2px;
  transition: all 0.3s;
  direction: ltr;
}

.field-checkbox .checkbox::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 21.5%;
  display: table;
  width: 6px;
  height: 8px;
  content: " ";
  border: 2px solid rgb(255, 255, 255);
  border-block-start: 0;
  border-inline-start: 0;
  opacity: 0;
  transition:
    all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
    opacity 0.1s;
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
}

.field-checkbox input[type="checkbox"]:checked+.checkbox {
  background-color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
}

.field-checkbox input[type="checkbox"]:checked+.checkbox::after {
  position: absolute;
  display: table;
  content: " ";
  border: 2px solid rgb(255, 255, 255);
  border-block-start: 0;
  border-inline-start: 0;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
}

.field select~.icon-arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  margin-block: auto;
  margin-inline: auto;
  pointer-events: none;
}

.field-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.field-switch-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: rgba(41, 37, 44, 0.1);
  border-radius: 20px;
  transition: 0.2s;
}

.field-switch-slider::before {
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  content: "";
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  transition: 0.2s;
}

.field-switch input {
  width: 0;
  height: 0;
  opacity: 0;
}

.field-switch input:checked+.field-switch-slider {
  background-color: rgba(41, 37, 44, 1);
}

.field-switch input:checked+.field-switch-slider::before {
  transform: translateX(20px);
}

.field-radio {
  position: relative;
  margin-inline-end: 8px;
}

.field-radio-wrapper {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 20px;
  cursor: pointer;
}

.field-radio-wrapper:last-child {
  margin-inline-end: 0;
}

.field-radio .radio {
  position: relative;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  width: 16px;
  height: 16px;
  border-collapse: separate;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(221, 221, 221);
  border-radius: 50%;
  transition: all 0.3s;
}

.field-radio .radio::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 16px;
  height: 16px;
  margin-block-start: -8px;
  margin-inline-start: -8px;
  content: "";
  background-color: #000;
  border-radius: 16px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transform: scale(0);
}

.field-radio>input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.field-radio>input:checked+.radio {
  border-color: rgb(0, 0, 0);
}

.field-radio>input:checked+.radio::after {
  opacity: 1;
  transform: scale(0.5);
}

.form__error-message {
  margin-block: -10px 20px;
  font-size: 12px;
  color: rgb(240, 73, 73);
}

.form__error-message:empty {
  display: none;
}

.icon--checkbox {
  cursor: pointer;
}

.icon--checkbox .filled {
  opacity: 0;
  fill: rgba(61, 56, 25, 1);
  stroke: rgba(61, 56, 25, 1);
  transition: opacity 0.1s ease;
}

.icon--checkbox .checkmark {
  stroke: rgba(255, 255, 255, 1);
  transition: stroke-dashoffset 0.3s ease;
}

input:checked~.icon--checkbox .filled {
  opacity: 1;
}

input:checked~.icon--checkbox .box {
  stroke: rgba(221, 221, 221, 1);
}

input:checked~.icon--checkbox .checkmark {
  stroke-dashoffset: 0;
}

@media (max-width: 959px) {
  .form__error-message {
    margin-block: -8px 16px;
  }
}