.form-field {
    position: relative;
    width: auto;
}

.form-field__label {
    pointer-events: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: absolute;
    left: 0.9rem;
    top: .7rem;
    color: #ccc;
    padding: 0;
    font-size: 1rem;
    cursor: text;
}

.form-field__input,
input.form-field__input[type="text"],
input.form-field__input[type="email"],
input.form-field__input[type="tel"],
input.form-field__input[type="number"],
input.form-field__input[type="password"],
.form-field__textarea {
    width: 100%;
    font-size: 1rem;
    box-sizing: border-box;
    padding: 1.1rem .9rem .25rem .9rem;
    border: 0.0497rem solid #ccc;
    border-radius: 0.5em;
    background-color: #fff0;
}

.form-field__input:focus,
.form-field__input[type="email"]:focus,
.form-field__input[type="tel"]:focus,
.form-field__input[type="number"]:focus,
.form-field__input[type="password"]:focus,
.form-field__textarea:focus {
    outline: none;
    border: 0.0497rem solid #ff3e00 !important;
}

.form-field--textarea .form-field__textarea {
    height: 10rem;
    resize: vertical;
}

.form-field--active .form-field__label {
    top: 0.25rem;
    font-size: 0.75rem;
    color: #999;
}

.form-field__toggle {
    position: absolute;
    right: .7rem;
    top: .4rem;
    cursor: pointer;
    color: #ccc;
    font-size: 1.5rem;
}

.form-field__toggle:hover {
    color: #fff;
}