.h-20px {
    height: 20px;
}

.field-wrapper {
    position: relative;
}

    .field-wrapper input,
    .field-wrapper textarea {
        transition: none !important;
        padding: 15px 20px !important;
        margin-left: 0px !important;
        margin-top: 0px !important;
        margin-bottom: 10px !important;
        resize: vertical;
    }

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

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

    .field-wrapper.hasValue input:not(:focus),
    .field-wrapper.hasValue textarea:not(:focus) {
        border: 0.5px solid #80868b;
        border-radius: 4px;
        width: 100%;
    }

    .field-wrapper .field-placeholder {
        font-size: 16px;
        position: absolute;
        top: 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 0 0 6px;
        padding: 0px 8px;
        -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: 1;
        text-align: left;
        color: #80868b;
        transform-origin: 0px 20px;
        height: 56px
    }

        .field-wrapper .field-placeholder span {
            font-weight: bold;
            background: #ffffff;
            padding: 0 8px;
        }

    .field-wrapper input:not([disabled]):focus ~ .field-placeholder,
    .field-wrapper textarea:not([disabled]):focus ~ .field-placeholder {
        color: #1A73E8 !important;
    }

    .field-wrapper input:not([disabled]):focus ~ .field-placeholder,
    .field-wrapper.hasValue input:not([disabled]) ~ .field-placeholder,
    .field-wrapper textarea:not([disabled]):focus ~ .field-placeholder,
    .field-wrapper.hasValue textarea:not([disabled]) ~ .field-placeholder {
        -webkit-transform: scale(.75) translateY(-65%) translateY(-7px);
        transform: scale(.75) translateY(-65%) translateY(-7px);
    }

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

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

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

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

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

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