/* The show/hide-password button (static/password-reveal.js). Shared by the school portals' sign-in and the
   platform console's, so it takes its colours from the field around it (currentColor) rather than either theme. */
.pw-reveal { position: relative; display: block; }
.pw-reveal > input { width: 100%; padding-right: 3rem !important; }
.pw-reveal__btn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; min-width: 44px; min-height: 44px; /* a comfortable target for a thumb */
  margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: inherit; opacity: .6; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pw-reveal__btn:hover, .pw-reveal.is-shown .pw-reveal__btn { opacity: 1; }
.pw-reveal__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; opacity: 1; }
.pw-reveal__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-reveal__slash { display: none; }
.pw-reveal.is-shown .pw-reveal__slash { display: inline; }
/* Some browsers draw their own reveal button on password fields; one button is enough. */
.pw-reveal input::-ms-reveal, .pw-reveal input::-ms-clear { display: none; }