.login-dialog { position: relative; }
.login-dialog .login-field { transform: translateY(30px); }
.login-dialog .login-error { transform: translateY(16px); }
.login-dialog .login-dialog-title { margin: 0 0 20px; color: #172033; font-size: 16px; font-weight: 700; line-height: 24px; text-align: center; }
.login-dialog .field-label { position: relative; padding-left: 36px; font-weight: 700; }
.login-dialog .field-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #00afe9; background: #f0fafe; }
.login-dialog .field-icon svg { width: 17px; height: 17px; }
.login-dialog .login-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; padding: 5px; display: grid; place-items: center; background: transparent; color: #98a2b3; border-radius: 8px; transition: color 160ms ease, background 160ms ease; }
.login-dialog .login-close svg { width: 18px; height: 18px; }
.login-dialog .login-close:hover { color: #667085; background: #f2f6f8; }
.login-dialog :is(.field-icon,.login-close) svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }