.passwordWrapper {
  position: relative;   /* so the button can be positioned inside */
  display: block;       /* not inline */
  width: 100%;          /* fill the parent */
}

.form-group.has-float-label .passwordWrapper {
    position: relative;
    left: auto;
    top: auto;
    padding: 0;
    z-index: auto;
    flex: 1 1 100%;         /* if parent stays flex, let it fill the row */
    min-width: 0;           /* avoid flex overflow pushing things sideways */
}

.form-group .passwordWrapper .passwordVisibilityButton {
    position: absolute;
    right: 10px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

/* Edge / IE: hide the built-in reveal + clear buttons */
.passwordWrapper input[type="password"]::-ms-reveal,
.passwordWrapper input[type="password"]::-ms-clear {
    display: none;
}

.passwordWrapper .form-control {
    width: 100%;
    box-sizing: border-box;   /* make padding/border predictable */
}

.form-group.has-float-label .passwordWrapper .form-control {
    height: 2.95rem;
    padding-top: 1.25rem;
    padding-left: .725rem;
    box-sizing: border-box;
}

.form-group .passwordWrapper input {
    padding-right: 32px;
}

.form-group .passwordWrapper .passwordVisibilityButton i{
    pointer-events: none;
    font-size: 18px;
}

.form-group .passwordWrapper .passwordVisibilityButton[class] { top: 50%; }


/* Only show a focus ring when focus is keyboard-induced */
.passwordWrapper .passwordVisibilityButton:focus {
    outline: none;              /* kill default ring on mouse click */
    box-shadow: none;           /* kill Bootstrap-style focus glow if any */
}

.passwordWrapper .passwordVisibilityButton:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: none;
}

.form-group .passwordWrapper .passwordVisibilityButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}