.login-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#F8F9FA;color:#1E1F1E;overflow:auto;--page:#F8F9FA;--text:#1E1F1E;--dark:#323432;--line:#BFC0BF;--muted:#5B5D5B;font-family:"A3 Inter",system-ui,sans-serif;font-optical-sizing:none;font-variation-settings:"opsz" 18}
.login-dialog.login-background-hell {
    background: #f8f9fa url("../images/hell-4k.png") center / cover no-repeat;
}
.login-dialog.login-background-dunkel {
    background: #15161a url("../images/dunkel-4k.png") center / cover no-repeat;
}
.login-dialog.login-background-dunkel .team-sign-in {
    color: #fff;
}
.login-dialog::backdrop{background:transparent}
html:has(.login-dialog[open]){overflow:hidden}

    
    .login-dialog *{ box-sizing: border-box; }
    
    
    .login-dialog .login_screen{ min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; }
    .login-dialog .login-panel {
      --logo-width: 211px;
      width: min(100%, 400px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 44px;
      padding: 34px 24px;
      margin-top: 10px;
      position: relative;
      top: 20px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 8px 28px rgb(30 31 30 / 10%);
    }
    .login-dialog .brand_area{ width: 100%; text-align: center; }
    .login-dialog .brand_lockup{ display: flex; justify-content: center; }
    .login-dialog .login-panel .brand_lockup img{ width: min(100%, var(--logo-width)); height: auto; }
    .login-dialog .brand_tagline{ margin: 24px 0 0; font-size: clamp(16px, 1.55vw, 23px); letter-spacing: -.025em; line-height: 1.4; }
    .login-dialog .brand_area .brand_tagline{ font-size: 18px; }
    .login-dialog .brand_tagline.team-sign-in{ margin: 0 0 16px; font-weight: 700; text-align: center; }
    .login-dialog .login_area{ width: 100%; max-width: 340px; }
    .login-dialog .login_card{ width: 100%; }
    .login-dialog a{ color: var(--text); text-underline-offset: 3px; }
    .login-dialog a:hover{ text-decoration-thickness: 2px; }
    .login-dialog .field{ margin-bottom: 21px; }
    .login-dialog .field label{ display: block; margin-bottom: 9px; text-align: center; font-size: 12px; font-weight: 500; color: #323432; }
    .login-dialog .field input{ width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--page); color: var(--text); font: inherit; font-size: 15px; text-align: center; }
    .login-dialog .field input:focus-visible{ outline: 2px solid var(--dark); outline-offset: 2px; }
    .login-dialog .login_button{ width: 100%; height: 46px; border: 1px solid var(--dark); border-radius: 3px; background: var(--dark); color: #FFFFFF; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: none; }
    .login-dialog .login_button:hover{ background: #B894C7; border-color: #B894C7; color: #FFFFFF; }
    .login-dialog .login-panel .login_area{ max-width: 280px; }
    .login-dialog .login-panel .field input{ height: 40px; }
    .login-dialog .login-panel .field input::placeholder{
      color: #5b5d5b;
      opacity: 1;
      font-size: 12px;
      font-weight: 500;
    }
    .login-dialog .login-panel .field input:focus:not(#challenge_answer)::placeholder{
      color: transparent;
    }
    .login-dialog .login-panel .field:has(> #password){ margin-bottom: 42px; }
    .login-dialog .login-panel .field:last-of-type{ margin-bottom: 36px; }
    .login-dialog .login-panel .login_button{
      display: block;
      width: min(100%, 135px);
      height: 27px;
      border-radius: 10px;
      margin-inline: auto;
    }
    .login-dialog .login_button:focus-visible,.login-dialog a:focus-visible{ outline: 2px solid var(--dark); outline-offset: 3px; }
    .login-dialog .form_message{ padding: 12px; margin: 0 0 20px; border: 1px solid var(--muted); background: var(--page); font-size: 12px; line-height: 1.5; }
    @media (max-width: 600px) {
      .login-dialog .login_screen { padding: 40px 24px; }
      .login-dialog .login-panel { gap: 34px; }
      .login-dialog .brand_tagline{ margin-top: 20px; font-size: clamp(14px, 4vw, 20px); }
    }
    .login-dialog .login-close{position:fixed;right:16px;top:12px;z-index:5;display:block;width:40px;height:40px;text-align:center;padding:0;border:0;border-radius:2px;background:var(--page);color:#323432;font:32px/40px Arial,sans-serif;text-decoration:none;cursor:pointer}
    .login-dialog .login-close:hover{background:#323432;color:#fff}
  
.login-dialog [hidden]{display:none!important}

.login-dialog .hero-product-brand { color: #f2f6f8; margin-bottom: 0; text-decoration: none; }

.login-dialog .login-recovery { text-align: center; font-size: 12px; margin: 24px 0 0; }

.login-dialog footer.portal-footer { justify-content: center; }