/* Shared login page (defaults). Sector login.css / h3g/login.css can override. */

html.login-page,
body.login-page {margin:0;padding:0;min-height:100%;background:#fff;font-family:Arial,Helvetica,sans-serif;}
.login-page {min-height:100vh;box-sizing:border-box;}
.centerparent {display:block;}
#logo-wrapper-login {text-align:center;}
#logo-login-page {margin-top:4vh;max-width:min(320px,80vw);height:auto;}
#login {
  border:solid 1px #dfdfdf;
  box-shadow:2px 2px 12px #bbb;
  width:300px;
  padding:16px;
  background:#fcfcfc;
  position:absolute;
  left:50%;
  margin-left:-150px;
  box-sizing:border-box;
  transform:translateY(-50%);
  margin-top:45vh;
}
#login h1,
#login h2 {
  background-color:#808080;
  color:#fff;
  margin:-16px -16px 8px -16px;
  padding:16px;
  border:none;
  font-size:1.25em;
}
#login fieldset {padding:0;margin:0;border:none;}
#login .formelement {width:100%;box-sizing:border-box;}
#login .formelement_password {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  width:100%;
  align-items:stretch;
  column-gap:0.25em;
}
#login .formelement_password > label {grid-column:1 / -1;}
#login label {font-size:90%;color:#000;display:block;margin-top:6px;}
#login input {padding:0.35em 0.5em;margin:0;box-sizing:border-box;}
#login input[type="text"],
#login input[type="password"] {width:100%;min-width:0;}
#login .formelement_password > input {grid-column:1;grid-row:2;width:100%;}
#login .button-area {margin-top:0.75em;}
#login .button-area button,
#login button.primary:not(.form-icon-btn),
#login button.primary.button:not(.form-icon-btn) {
  float:right;
  border:none;
  border-radius:9999px;
  background:#808080;
  color:#fff;
  padding:0.4em 1em;
  font-size:0.85em;
  font-weight:700;
  cursor:pointer;
}
#login .button-area button:hover,
#login button.primary:not(.form-icon-btn):hover {
  background:#707070;
  color:#fff;
}
a.form-icon-btn,
button.form-icon-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  border:none;
  border-radius:0.3em;
  background:#9f9f9f;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  line-height:1;
  aspect-ratio:1;
}
#login .formelement_password > .form-icon-btn {
  grid-column:2;
  grid-row:2;
  float:none;
  background:#acacac;
  color:#fff;
  width:1.8em;
  min-width:1.8em;
}
#login .formelement.info {margin:0 0 0.5em 0;}
#login .formelement.info .login-lang-flags {margin:0;padding:0;}
.login-lang-flags {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.35rem 0.5rem;
  margin:0;
  padding:0;
  border:none;
  background:none;
  box-shadow:none;
}
.login-lang-link {
  display:inline-flex;
  align-items:center;
  gap:0.2rem;
  padding:0.15rem 0.35rem;
  border:none;
  background:none;
  color:#555;
  text-decoration:none;
  font-size:0.78rem;
  font-weight:600;
  line-height:1.1;
  border-radius:4px;
  opacity:0.75;
}
.login-lang-link:hover {opacity:1;color:#808080;}
.login-lang-link.active {opacity:1;color:#808080;font-weight:700;}
.login-lang-flag {font-size:1.05rem;line-height:1;}
.login-lang-code {letter-spacing:0.02em;}
#login .message.message-error {
  background:#fdebec;
  color:#9b1c23;
  border:1px solid #f0c4c7;
  border-radius:0.85em;
  padding:0.75em 1em;
  margin:0.75em 0 1em;
  font-size:0.9em;
  font-weight:600;
}
.form-icon-btn .material-icons {
  font-family:"Material Icons Local","Material Icons",sans-serif;
  display:block;
  font-size:1em;
  width:1em;
  height:1em;
  line-height:1;
  overflow:hidden;
  text-align:center;
  color:inherit;
}

@media (max-width: 640px) {
  html.login-page,
  body.login-page {
    margin:0;
    padding:0;
  }
  .login-page {
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    margin:0;
    padding:0;
    padding-top:3.5rem;
  }
  #logo-wrapper-login {padding:1.25rem 1.25rem 0;}
  #logo-login-page {margin-top:0;max-width:min(240px,70vw);}
  .centerparent {display:block;flex:1 1 auto;}
  form#login,
  #login {
    position:static;
    left:auto;
    top:auto;
    transform:none;
    margin:0;
    width:100%;
    max-width:none;
    min-height:100%;
    border:none;
    box-shadow:none;
    border-radius:0;
    padding:1.25rem 1.25rem 2rem;
    background:transparent;
  }
  form#login h1,
  form#login h2,
  #login h1,
  #login h2 {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:20;
    margin:0;
    padding:1rem 1.25rem;
    background-color:#808080;
    color:#fff;
    text-align:left;
    border:none;
    box-sizing:border-box;
  }
  #login .button-area button,
  #login button.primary:not(.form-icon-btn),
  #login button.primary.button:not(.form-icon-btn) {
    float:none;
    width:100%;
    margin-top:1rem;
    background:#808080;
    color:#fff;
  }
}