.form-group .text-box {
    height: 56px;
}


.field-wrapper {
    display: flex;
    flex-flow: column-reverse;
    height: 56px;
    position:relative;
}

    .field-wrapper label, .field-wrapper input {
        transition: all 0.2s;
        touch-action: manipulation;
    }

    .field-wrapper input {
        font-size: 1rem;
        padding-top: 1.5rem;
        cursor: text;
    }

        .field-wrapper input:focus {
            outline: 0;
        }

    .field-wrapper label {
        letter-spacing: 0.05em;
        font-size: 1rem;
        margin: 0;
        background: #fff;
        display:flex;
        height:35px;
    }

        .field-wrapper label:after {
            content: "*";
            color: #BE0F34;
            padding-left: 2px;
        }

    .field-wrapper input:placeholder-shown + label {
        cursor: text;
        max-width: 75%;
        white-space: nowrap;
        text-overflow: ellipsis;
        transform-origin: left bottom;
        transform: translate(17px,49px) scale(1);
    }

    .field-wrapper ::-webkit-input-placeholder {
        opacity: 0;
        transition: inherit;
    }

    .field-wrapper input:focus::-webkit-input-placeholder {
        opacity: 1;
    }

    .field-wrapper input:not(:placeholder-shown) + label,
    .field-wrapper input:focus + label {
        transform: translate(17px, 39px) scale(1);
        font-size: 0.8125rem;
        background: transparent;
    }

#showhidepasswd {
    position: absolute;
    bottom: 0.2rem;
    right: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    text-decoration: none;
    display: none;
}

/* Microsoft Edge Browser 12+ (All) - @supports method */

@supports (-ms-ime-align:auto) {

    .field-wrapper label, #showhidepasswd {
        display: none !important;
    }

    .field-wrapper ::-ms-input-placeholder {
        opacity: 1;
    }

    .field-wrapper input:focus::-ms-input-placeholder {
        opacity: 0;
    }

    .field-wrapper input {
        padding-top: 0.5rem;
    }
}


/*safari 11+*/

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        .field-wrapper label {
            height: 62px;
            display: block;
        }
    }
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        .field-wrapper input:placeholder-shown + label {
            transform: translate(17px,42px) scale(1);
        }
    }
}


@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        .field-wrapper input {
            padding-top: 1.25rem;
            -webkit-appearance: none;
            height: 62px;
        }
    }
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        .field-wrapper input:not(:placeholder-shown) + label, .field-wrapper input:focus + label {
            transform: translate(17px, 24px) scale(1);
        }
    }
}

/* for Safari 10*/
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
        .field-wrapper label {
            height: 35px;
            display: block;
        }
    }
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
        .field-wrapper input:placeholder-shown + label {
            transform: translate(17px,52px) scale(1);
        }
    }
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
        .field-wrapper input:not(:placeholder-shown) + label, .field-wrapper input:focus + label {
            transform: translate(17px, 39px) scale(1);
        }
    }
}


/*for android mobile*/
@media screen and (max-width: 699px) {
    _:-webkit-full-screen, _:in-range:not(*:root), .field-wrapper input:placeholder-shown + label {
        transform: translate(17px,37px) scale(1);
    }

    _:-webkit-full-screen, _:in-range:not(*:root), .field-wrapper input:not(:placeholder-shown) + label, _:-webkit-full-screen, _:in-range:not(*:root),  .field-wrapper input:focus + label {
        transform: translate(17px, 27px) scale(1);
    }
}

/*for firefox*/

@-moz-document url-prefix() {
    .field-wrapper input {
        padding-top: 1.0rem;
    }

   .field-wrapper input:placeholder-shown + label {
        transform: translate(17px,40px) scale(1);
    }

   .field-wrapper input:not(:placeholder-shown) + label, .field-wrapper input:focus + label {
        transform: translate(17px, 22px) scale(1);
    }
}

       
    /*Button styling*/
    .btn-graysred {
        background: #BE0F34 !important;
        color: #fff !important;
        position: relative;
        border: 0px !important;
    }

        .btn-graysred:hover, .btn-graysred:active {
            background: #6E1D22 !important;
            box-shadow: unset !important;
            border: 0px !important;
        }



        .btn-graysred:focus::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            border: 1px solid #4A90E2;
            border-radius: 5px;
            box-shadow: 0 0 5px 0 rgba(74,144,226,0.5) !important;
            margin: -3px;
            margin-left: -2px;
        }

        .btn-graysred:hover::after, .btn-graysred:active::after {
            border: 0px;
            box-shadow: unset !important;
            margin: unset;
            margin-left: unset;
        }