.field-wrapper {
    position: relative;
}

    .field-wrapper input:focus,
    .field-wrapper textarea:focus,
    .field-wrapper select:focus {
        border-bottom: 1.5px solid #1A73E8 !important;
        border: 1.5px solid #1A73E8;
        border-radius: 4px;
        width: 100%;
        color: #454545 !important;
    }

    .field-wrapper input::-ms-clear {
        display: none;
    }

    .field-wrapper .field-placeholder {
        position: absolute;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
        transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
        z-index: 10;
        text-align: left;
        padding: 8px 0px 8px 8px;
        top: 8px;
        left: 4px;
        color: #969696;
        cursor: text;
        white-space: nowrap;
        transform-origin: 0px 20px;
        pointer-events: none;
    }

        .field-wrapper .field-placeholder span {
            background: #ffffff;
            padding: 0 6px;
        }

    .field-wrapper input:focus ~ .field-placeholder,
    .field-wrapper textarea:focus ~ .field-placeholder,
    .field-wrapper select:focus ~ .field-placeholder {
        color: #1A73E8 !important;
    }

    .field-wrapper input:focus ~ .field-placeholder,
    .field-wrapper.hasValue input ~ .field-placeholder,
    .field-wrapper textarea:focus ~ .field-placeholder,
    .field-wrapper.hasValue textarea ~ .field-placeholder,
    .field-wrapper.hasValue select ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-50%) translateY(-17px);
        transform: scale(.75) translateY(-50%) translateY(-17px);
    }

@media screen and (max-width: 1200px) {
    .field-wrapper input:focus ~ .field-placeholder,
    .field-wrapper.hasValue input ~ .field-placeholder,
    .field-wrapper textarea:focus ~ .field-placeholder,
    .field-wrapper.hasValue textarea ~ .field-placeholder,
    .field-wrapper.hasValue select ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-50%) translateY(-17px);
        transform: scale(.75) translateY(-50%) translateY(-17px);
    }
}

@media screen and (max-width: 991px) {
    .field-wrapper input:focus ~ .field-placeholder,
    .field-wrapper.hasValue input ~ .field-placeholder,
    .field-wrapper textarea:focus ~ .field-placeholder,
    .field-wrapper.hasValue textarea ~ .field-placeholder,
    .field-wrapper.hasValue select ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-50%) translateY(-17px);
        transform: scale(.75) translateY(-50%) translateY(-17px);
    }
}

@media screen and (max-width: 600px) {
    .field-wrapper input:focus ~ .field-placeholder,
    .field-wrapper.hasValue input ~ .field-placeholder,
    .field-wrapper textarea:focus ~ .field-placeholder,
    .field-wrapper.hasValue textarea ~ .field-placeholder,
    .field-wrapper.hasValue select ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-50%) translateY(-17px);
        transform: scale(.75) translateY(-50%) translateY(-17px);
    }
}

@media screen and (max-width: 500px) {
    .field-wrapper input:focus ~ .field-placeholder,
    .field-wrapper.hasValue input:not([disabled]) ~ .field-placeholder,
    .field-wrapper textarea:focus ~ .field-placeholder,
    .field-wrapper.hasValue textarea ~ .field-placeholder,
    .field-wrapper.hasValue select ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-50%) translateY(-17px);
        transform: scale(.75) translateY(-50%) translateY(-17px);
    }
}

@media screen and (max-width: 400px) {
    .field-wrapper input:focus ~ .field-placeholder,
    .field-wrapper.hasValue input ~ .field-placeholder,
    .field-wrapper textarea:focus ~ .field-placeholder,
    .field-wrapper.hasValue textarea ~ .field-placeholder,
    .field-wrapper.hasValue select ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-50%) translateY(-17px);
        transform: scale(.75) translateY(-50%) translateY(-17px);
    }
}

@media screen and (max-width: 300px) {
    .field-wrapper input:focus ~ .field-placeholder,
    .field-wrapper.hasValue input ~ .field-placeholder,
    .field-wrapper textarea:focus ~ .field-placeholder,
    .field-wrapper.hasValue textarea ~ .field-placeholder,
    .field-wrapper.hasValue select ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-50%) translateY(-17px);
        transform: scale(.75) translateY(-50%) translateY(-17px);
    }
}