@import "../../styles.css";

.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: 24px;
        text-align:left;
    }

        .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, 38px) scale(1);
    }

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

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

    .field-wrapper input:not(:placeholder-shown) + label,
    .field-wrapper input:focus + label {
        transform: translate(17px, 28px) 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 !important;
    }

    .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, 
.btn-loader {
    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;
    }

.btn-loader {
    background-color: #D8D8D8 !important;
    color: #7D7D7D !important;
    position: relative;
    cursor: auto !important;
}

    .btn-loader:after {
        content:'Logging in';
        padding-left: 14px;
    }

.loader {
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid #7D7D7D;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    top: calc((100% - 20px) /2);
}

.validation-error-border {
    border: 1px solid var(--statusError) !important;
}

.validation-error {
    border-radius: 2px;
    background-color: #F8E7EB;
    margin: 4px 0;
    color: var(--statusError);
    font-size: 0.875rem;
    font-weight: bold;
    padding: 8px 18px;
}

    .validation-error h3 {
        background: url(//res2.grays.com/handlers/imagehandler.ashx?t=cr&id=62125&s=d&index=0&ct=svg) no-repeat 4% 7px;
        font-weight: bold;
        color: var(--statusError);
        font-size: 0.875rem;
        text-indent: 2rem;
        padding: 10px 15px;
        margin: 0;
    }

    .validation-error p {
        font-weight: normal;
        color: #000;
        font-size: 0.875rem;
        padding: 0 15px 15px 15px;
    }

    .validation-error a,
    .validation-error a:hover,
    .validation-error a:focus {
        font-size: 0.875rem;
        color: #00529E;
        text-decoration: none;
    }

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}