.form__group {
    position: relative;
    padding: 15px 0 0;
    margin-top: 10px;
    width: 100%;
  }
  
.form__field {
    font-family: inherit;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #9b9b9b;
    outline: 0;
    font-size: 1em;
    color: #333;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
}

.form__field::placeholder {
    color: #666666;
}

.form__field:focus::placeholder {
    color: #666666;
}

.form__field:focus {
    padding-bottom: 6px;
    border-width: 3px;
    border-image: linear-gradient(to right, #477493, #0f719b);
    border-image-slice: 1;
}

.form__field_bad_input {
    padding-bottom: 6px;
    font-weight: 700;
    border-width: 3px;
    border-image: linear-gradient(to right, #f91d1d, #9f4a4a);
    border-image-slice: 1;
}
  
  /* reset input */
.form__field:required, .form__field:invalid {
    box-shadow: none;
}