/* ============================================================
   N107 – Benutzerverwaltung Passwort Auge

   Ausschließlich:
   #userPassword
   ============================================================ */

#n69vPasswordWrap .n107-password-input-wrap,
.n69z-password-field .n107-password-input-wrap{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
}

#n69vPasswordWrap .n107-password-input-wrap #userPassword,
.n69z-password-field .n107-password-input-wrap #userPassword{
  width:100% !important;
  min-width:0 !important;
  padding-right:52px !important;
  box-sizing:border-box !important;
}

#n107UserPasswordToggle{
  position:absolute !important;
  top:50% !important;
  right:7px !important;
  transform:translateY(-50%) !important;

  width:38px !important;
  height:36px !important;
  min-width:38px !important;
  min-height:36px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:0 !important;

  border:1px solid transparent !important;
  border-radius:9px !important;

  background:transparent !important;
  color:#8fa9bd !important;

  cursor:pointer !important;

  z-index:2 !important;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease !important;
}

#n107UserPasswordToggle:hover{
  background:#102a40 !important;
  border-color:#294b65 !important;
  color:#ffffff !important;
}

#n107UserPasswordToggle:focus-visible{
  outline:2px solid #2585ff !important;
  outline-offset:1px !important;
}

#n107UserPasswordToggle[aria-pressed="true"]{
  background:#102f49 !important;
  border-color:#3472a0 !important;
  color:#ffffff !important;
}

#n107UserPasswordToggle svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
  pointer-events:none !important;
}

@media(max-width:760px){
  #n107UserPasswordToggle{
    width:42px !important;
    height:40px !important;
    min-width:42px !important;
    min-height:40px !important;
    right:4px !important;
  }

  #n69vPasswordWrap .n107-password-input-wrap #userPassword,
  .n69z-password-field .n107-password-input-wrap #userPassword{
    padding-right:54px !important;
  }
}