#seafix-demo .sf-password-field{position:relative}
#seafix-demo .sf-password-plain{display:block;min-width:0}
/* Keep room for the eye even in recovery forms with their own input padding. */
#seafix-demo .sf-password-plain.sf-password-field > input[data-sf-password]{box-sizing:border-box;width:100%;padding-right:48px!important}
#seafix-demo .sf-input-wrap.sf-password-field{position:relative;padding-right:48px}
#seafix-demo .sf-password-field input{grid-column:1 / -1;min-width:0}
#seafix-demo .sf-password-field:has(> :is(svg,i)) input{grid-column:2}
#seafix-demo .sf-password-field .sf-password-visibility{position:absolute;right:3px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;min-height:0;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:var(--sf-muted);box-shadow:none;cursor:pointer}
#seafix-demo .sf-password-field .sf-password-visibility svg{width:18px;height:18px;color:inherit}
#seafix-demo .sf-password-field .sf-password-visibility:hover{color:var(--sf-text)}
#seafix-demo .sf-password-field .sf-password-visibility:focus-visible{outline:2px solid var(--sf-primary);outline-offset:-3px}