/* plotsligt soft-panel skin for Authelia. Keep this tiny: Authelia owns the form. */
:root {
  --plots-bg: #f8f7f3;
  --plots-fg: #161616;
  --plots-muted: #77736b;
  --plots-line: #dedbd2;
  --plots-soft: #fffdf8;
  --plots-accent: #2563eb;
  --plots-accent-2: #0ea5e9;
  --plots-shadow: 0 20px 45px rgba(15, 23, 42, .10);
}

:root[data-plotsligt-theme="dark"] {
    --plots-bg: #10100f;
    --plots-fg: #f1eee6;
    --plots-muted: #9c978d;
    --plots-line: #302e29;
    --plots-soft: #171614;
    --plots-accent: #93c5fd;
    --plots-accent-2: #38bdf8;
    --plots-shadow: 0 24px 55px rgba(0, 0, 0, .30);
}

html,
body,
#root {
  min-height: 100%;
  background: var(--plots-bg) !important;
}

body {
  margin: 0;
  color: var(--plots-fg);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background-image: radial-gradient(circle at top left, #eef2ff 0%, var(--plots-bg) 34%, var(--plots-bg) 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
}

html[data-plotsligt-theme="dark"] body {
  background-image: radial-gradient(circle at top left, rgba(147, 197, 253, .14) 0%, rgba(147, 197, 253, .055) 24%, var(--plots-bg) 46%, var(--plots-bg) 100%) !important;
}


.MuiAppBar-root {
  background: transparent !important;
  box-shadow: none !important;
}

#language-button,
.MuiIconButton-root {
  color: var(--plots-muted) !important;
}

#first-factor-stage .MuiContainer-root {
  background: color-mix(in srgb, var(--plots-soft), transparent 3%) !important;
  border: 1px solid var(--plots-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--plots-shadow) !important;
  padding: 28px !important;
  max-width: 430px !important;
}

#first-factor-stage .MuiContainer-root::before {
  content: "Private access";
  display: block;
  margin: 0 0 10px;
  color: var(--plots-accent);
  font: 700 11px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#UserSvg {
  display: none !important;
}

#first-factor-stage h5 {
  color: var(--plots-fg) !important;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  font-weight: 620 !important;
  letter-spacing: -.05em !important;
  margin: 0 0 24px !important;
  text-align: left !important;
}

.MuiTypography-root,
.MuiInputBase-input,
.MuiFormLabel-root {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.MuiFormLabel-root,
.MuiTypography-body1,
.MuiLink-root {
  color: var(--plots-muted) !important;
}

.MuiOutlinedInput-root {
  color: var(--plots-fg) !important;
  background: color-mix(in srgb, var(--plots-soft), transparent 8%) !important;
  border-radius: 14px !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: color-mix(in srgb, var(--plots-line), transparent 5%) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--plots-accent) !important;
}

.MuiCheckbox-root.Mui-checked,
.MuiFormLabel-root.Mui-focused {
  color: var(--plots-accent) !important;
}

#sign-in-button {
  background: linear-gradient(90deg, var(--plots-accent), var(--plots-accent-2)) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  transition: transform .18s ease, opacity .18s ease !important;
}

#sign-in-button:hover {
  transform: translateY(-1px);
  box-shadow: none !important;
}

#reset-password-button,
a[href="https://www.authelia.com"] {
  color: var(--plots-muted) !important;
  text-decoration-color: color-mix(in srgb, var(--plots-muted), transparent 55%) !important;
}

@media (max-width: 620px) {
  #first-factor-stage .MuiContainer-root {
    border-radius: 18px !important;
    margin-inline: 16px !important;
    padding: 22px !important;
  }
}