/* Brand, typography, controls and responsive shell come from admin.css. */
[hidden]{display:none!important}
#mfa{width:100%;margin:0 auto}
#message:empty{display:none}
.captcha-row canvas{display:block;width:100%;height:var(--captcha-size);border-radius:var(--control-radius);background:#181818}
#portal form{display:grid;gap:20px}
#portal .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}
#create-form{display:grid;gap:20px}
#create-dialog,#account-dialog{width:min(480px,calc(100% - 32px))}
.reseller-account-menu,.reseller-account-options{display:grid;gap:12px}
.reseller-account-menu button{width:100%;justify-content:flex-start}
.reseller-account-options{margin-top:20px}
.reseller-page-actions{margin-bottom:24px}
#create-error{color:var(--danger)}
#cost{color:var(--muted);margin:0}
#customers article{padding:20px 0;border-top:1px solid var(--line)}
#customers article h3{margin:0 0 8px}
#customers article p{color:var(--muted)}
#customers article .toolbar{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px}
#customers article select{width:auto;max-width:100%}
#customers-section>.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
#credentials{padding:16px;background:var(--raised);border:1px solid var(--line);border-radius:var(--control-radius)}
#edit-dialog{width:min(480px,calc(100% - 32px))}
#enrollment{color:var(--muted)}
#secret{display:block;margin-top:12px;color:var(--text)}
#mfa .login-back{margin-top:16px}
#authenticator-dialog{width:min(480px,calc(100% - 32px))}
#authenticator-form{display:grid;gap:20px;margin-top:20px}
#authenticator-qr{display:block;width:220px;max-width:100%;height:auto;margin:auto;border-radius:12px}
#authenticator-secret{display:block;margin-top:12px;overflow-wrap:anywhere}
#authenticator-error{color:var(--danger)}
#start-authenticator{margin-top:20px}
@media(max-width:479px){#portal .grid{grid-template-columns:minmax(0,1fr)}#customers article .toolbar>select{width:100%}}