/* Miriel TaskBoard password visibility control v2 */
.password-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.password-input-wrap > input {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 48px !important;
}

.password-input-wrap > button.password-toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  z-index: 20 !important;
  top: 50% !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 6px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #8e9a95 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

.password-input-wrap > button.password-toggle:hover,
.password-input-wrap > button.password-toggle:focus-visible,
.password-input-wrap > button.password-toggle[aria-pressed="true"] {
  background: rgba(132, 157, 113, 0.14) !important;
  color: #c2cec6 !important;
}

.password-input-wrap > button.password-toggle:focus-visible {
  outline: 1px solid rgba(150, 177, 126, 0.72) !important;
  outline-offset: 1px !important;
}

.password-input-wrap > button.password-toggle > svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
  overflow: visible !important;
}


/* password visibility state icon v3
   hidden password  -> normal eye
   visible password -> crossed eye */
.password-input-wrap > button.password-toggle {
  position: absolute !important;
}

.password-input-wrap > button.password-toggle[aria-pressed="true"]::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 15px !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(-42deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
}