@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/auth-assets/jost-cyrillic.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/auth-assets/manrope-cyrillic.woff2") format("woff2");
}

:root {
  --selzio-auth-ink: #0d3440;
  --selzio-auth-coral: #c45d46;
  --selzio-auth-paper: #fff4dc;
  --selzio-auth-panel: #f2e4c5;
  --selzio-auth-muted: #697776;
  --selzio-auth-line: rgba(13, 52, 64, 0.36);
}

html,
body,
#root {
  min-height: 100%;
}

html:has(#first-factor-stage),
body:has(#first-factor-stage) {
  color: var(--selzio-auth-ink) !important;
  background-color: var(--selzio-auth-paper) !important;
  background-image: url("/auth-assets/selzio-grain.png") !important;
  background-size: 180px 180px !important;
  font-family: "Manrope", sans-serif !important;
}

#first-factor-stage {
  box-sizing: border-box;
  min-height: 100vh !important;
  padding: clamp(24px, 6vh, 72px) 20px !important;
}

#first-factor-stage > .MuiContainer-root {
  box-sizing: border-box;
  max-width: 520px !important;
  padding: clamp(30px, 5vw, 54px) !important;
  border: 1px solid var(--selzio-auth-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--selzio-auth-panel) 86%, transparent);
  box-shadow: 0 20px 60px rgba(13, 52, 64, 0.12);
}

#first-factor-stage h1,
#first-factor-stage h2,
#first-factor-stage h3,
#first-factor-stage h4,
#first-factor-stage h5,
#first-factor-stage h6 {
  color: var(--selzio-auth-ink) !important;
  font-family: "Jost", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

#first-factor-stage svg {
  color: var(--selzio-auth-ink);
  fill: currentColor;
}

#form-login {
  width: 100%;
}

#form-login .MuiFormControl-root,
#form-login .MuiInputBase-root {
  width: 100%;
}

#form-login .MuiOutlinedInput-root {
  min-height: 58px;
  color: var(--selzio-auth-ink) !important;
  border-radius: 0 !important;
  background: rgba(255, 244, 220, 0.58) !important;
  font-family: "Manrope", sans-serif !important;
}

#form-login .MuiOutlinedInput-notchedOutline {
  border-color: var(--selzio-auth-line) !important;
  border-width: 1px !important;
}

#form-login .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
#form-login .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--selzio-auth-coral) !important;
  border-width: 1px !important;
}

#form-login .MuiInputLabel-root {
  color: var(--selzio-auth-muted) !important;
  font-family: "Manrope", sans-serif !important;
}

#form-login .MuiInputLabel-root.Mui-focused {
  color: var(--selzio-auth-coral) !important;
}

#username-textfield,
#password-textfield {
  box-sizing: border-box;
  min-width: 0;
  min-height: 58px;
  color: var(--selzio-auth-ink) !important;
  background: transparent !important;
  font: 500 17px / 1.4 "Manrope", sans-serif !important;
}

#username-textfield:-webkit-autofill,
#password-textfield:-webkit-autofill,
#username-textfield:-webkit-autofill:hover,
#password-textfield:-webkit-autofill:hover,
#username-textfield:-webkit-autofill:focus,
#password-textfield:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--selzio-auth-ink) !important;
  caret-color: var(--selzio-auth-ink) !important;
  box-shadow: 0 0 0 1000px var(--selzio-auth-paper) inset !important;
  transition: background-color 9999s ease-out 0s;
}

#form-login .MuiInputAdornment-root,
#form-login .MuiIconButton-root {
  color: var(--selzio-auth-ink) !important;
}

#sign-in-button {
  min-height: 54px;
  border-radius: 0 !important;
  color: var(--selzio-auth-paper) !important;
  background: var(--selzio-auth-ink) !important;
  box-shadow: none !important;
  font: 600 15px / 1 "Manrope", sans-serif !important;
  letter-spacing: 0.08em !important;
}

#sign-in-button:hover,
#sign-in-button:focus-visible {
  background: var(--selzio-auth-coral) !important;
}

#first-factor-stage a[href*="authelia.com"] {
  display: none !important;
}

@media (max-width: 600px) {
  #first-factor-stage {
    align-items: flex-start !important;
    padding: 20px 14px !important;
  }

  #first-factor-stage > .MuiContainer-root {
    padding: 28px 20px !important;
    border-radius: 12px;
  }
}