.form-field {
    background-color: #ffffff;
    height: 50px;
    width: 280px;
    color: #7e7c8a;
    font-family: 'pangram-regular';
    position: relative;
    -webkit-transition: 300ms all ease;
    -o-transition: 300ms all ease;
    transition: 300ms all ease;
}

@media (max-width: 46.24em) {
    .form-field {
        width: 100%;
    }
}

.form-field--text-area {
    height: 105px;
    width: 100%;
    margin-bottom: 13px;
}

.form-field--text-area .form-field-input {
    padding-top: 20px;
}

.form-field-input {
    height: 100%;
    width: 100%;
    padding: 0 12px;
    font-size: 14px;
    border: solid 1px #dbdfe5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    color: #1f1c35;
    padding-top: 8px;
    -webkit-transition: 500ms ease all;
    -o-transition: 500ms ease all;
    transition: 500ms ease all;
    font-family: 'pangram-regular' !important;
}

.form-field-input:focus,
.form-field-input:hover {
    border: solid 2px #2f2063;
    outline: none;
}

.form-field-input:focus~.form-field-label {
    top: 8px;
    font-size: 10px;
}

textarea:focus~.form-field-label {
    display: none;
}

.form-field-input--error {
    border: solid 2px #fb6a69;
}

.form-field-input--error:focus,
.form-field-input--error:hover {
    border: solid 2px #fb6a69;
}

.form-field-label {
    font-size: 14px;
    position: absolute;
    pointer-events: none;
    -webkit-transition: 200ms ease all;
    -o-transition: 200ms ease all;
    transition: 200ms ease all;
    top: 15px;
    left: 13px;
}

.form-field-label--active {
    top: 8px;
    font-size: 10px;
}

.form-field-error-message {
    color: #f25554;
    font-size: 12px;
    position: absolute;
    width: 250px;
    bottom: -18px;
    left: 2px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
}

.form-field-error-message-cross {
    height: 10px;
    width: 10px;
    border: 1px solid #f25554;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.form-field-error-message-cross:before {
    content: "";
    position: absolute;
    height: 8px;
    width: 1px;
    background-color: #f25554;
    top: 1px;
    left: 4.5px;
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);
}

.form-field-error-message-cross:after {
    content: "";
    position: absolute;
    height: 8px;
    width: 1px;
    background-color: #f25554;
    top: 1px;
    left: 4.5px;
    -webkit-transform: rotateZ(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotateZ(-45deg);
}

// WEBPACK FOOTER //
// ./src/styles/Field.css