/* Show / hide password (eye button) for pages without projectmaster.master (default.aspx);
   script in script/password-toggle.js. Pages using the master get the same rules from
   style/obaims.css ("Show / hide password") - keep the two in step.
   The button is absolutely positioned at the right end of the password box, so its parent must
   be position: relative (.md-input-wrapper on the login page already is; otherwise use .pw-field). */

.pw-field {
    position: relative;
}

.pw-eye {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #777777;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.pw-eye:hover,
.pw-eye:focus {
    color: #1b8bf9;
    outline: none;
}

.pw-eye:focus-visible {
    outline: 1px dotted currentColor;
}

/* Room for the eye so the text never runs under it */
.pw-field > input.form-control {
    padding-right: 40px;
}

/* settings.aspx validation states: obaims.css puts the state icon at the right end of the box;
   move it left of the eye. */
.content-wrapper .pw-field > .form-control.form-control-danger,
.content-wrapper .pw-field > .form-control.form-control-success,
.content-wrapper .pw-field > .form-control.form-control-warning {
    padding-right: 4.25rem;
    background-position: center right 2.6rem !important;
}

/* Login page (floating-label .md-input-wrapper): the box starts 4px down (wrapper padding-top). */
.md-input-wrapper > .pw-eye {
    top: 4px;
}

.md-input-wrapper > input.md-form-control {
    padding-right: 40px;
}

/* Edge / IE show their own reveal button - one eye is enough */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}