@font-face {
  font-family: "Atlas Somic";
  src: url("/assets/fonts/nt-somic-bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

#login .login-panel {
  width: min(340px, calc(100% - 32px));
  gap: 12px;
  padding: 22px;
  background: #fefefe;
}
#login .login-brand { overflow: visible; }
#login .login-brand img { display: block; width: 160px; max-width: 100%; margin: 0; }
#login h1,
#homeLogoButton h1 {
  font-family: "Atlas Somic", "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: 0;
}
#login h1 { margin: 12px 0 0; padding: 0; font-size: 40px; line-height: 1; color: #414952; }
#login label { gap: 5px; font-size: 13px; color: #56616a; }
#login input { height: 38px; border: 1px solid #bfc5c5; background: #e4e7e6; color: #414952; }
#login button { min-height: 41px; }
#loginError:empty { display: none; }

.topbar { flex-wrap: wrap; }
#homeLogoButton { align-items: flex-start; gap: 36px; min-width: 0; max-width: 100%; }
#homeLogoButton .brand-logo-dark { display: block; width: 180px; height: auto; flex: 0 0 auto; }
#homeLogoButton .atlas-brand-copy { border-left: 1px solid #69717a; padding-left: 22px; min-width: 0; }
#homeLogoButton h1 { font-size: 47px; line-height: 35px; position: relative; top: -3px; margin: 0; overflow-wrap: normal; }
#homeLogoButton #userLabel { font-size: 14px; line-height: 18px; margin: 3px 0 0; color: #c6cdd3; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  #homeLogoButton { gap: 20px; }
  #homeLogoButton .brand-logo-dark { width: 96px; }
  #homeLogoButton .atlas-brand-copy { padding-left: 12px; }
  #homeLogoButton h1 { font-size: 26px !important; line-height: 19px; top: -2px; }
  #homeLogoButton #userLabel { font-size: 11px; line-height: 14px; margin-top: 1px; }
}
@media (max-width: 340px) {
  #homeLogoButton { flex-wrap: wrap; }
}