:root {
  color-scheme: dark;
  --zero-ember: #ef490f;
  --zero-bg: #050505;
  --zero-card: #0a0a0a;
  --zero-border: #1a1a1a;
  --zero-text: #e0e0e0;
  --zero-muted: #666;
}

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

body {
  color: var(--zero-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

.MuiContainer-root {
  max-width: 380px !important;
}

.MuiPaper-root {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.MuiContainer-root.MuiContainer-maxWidthXs {
  background: var(--zero-card) !important;
  border: 1px solid var(--zero-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 60px rgba(239, 73, 15, .05) !important;
  padding: 28px 24px !important;
}

.MuiTypography-h5,
h1,
h2 {
  color: #fff !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.MuiInputLabel-root,
.MuiInputLabel-root.Mui-focused {
  color: var(--zero-muted) !important;
  font-family: Inter, -apple-system, sans-serif !important;
}

.MuiOutlinedInput-root {
  background: #111 !important;
  border-radius: 8px !important;
  color: var(--zero-text) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--zero-border) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--zero-ember) !important;
  border-width: 1px !important;
}

.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px rgba(239, 73, 15, .12) !important;
}

.MuiInputBase-input {
  color: var(--zero-text) !important;
  font-family: Inter, -apple-system, sans-serif !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--zero-text) !important;
  caret-color: var(--zero-ember) !important;
  box-shadow: 0 0 0 1000px #111 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
  transition: background-color 9999s ease-out 0s !important;
}

.MuiCheckbox-root {
  color: var(--zero-muted) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--zero-ember) !important;
}

.MuiButton-contained,
.MuiButton-containedPrimary {
  background: var(--zero-ember) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.MuiButton-contained:hover,
.MuiButton-containedPrimary:hover {
  background: #ff5a1f !important;
}

a,
.MuiLink-root,
button.MuiButton-text {
  color: var(--zero-ember) !important;
}

a[href*="authelia.com"] {
  color: #333 !important;
  font: 400 10px/1 "IBM Plex Mono", ui-monospace, monospace !important;
}

#root img {
  max-height: 80px !important;
  max-width: 100px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}

.MuiAlert-standardError,
.MuiSnackbarContent-root {
  background: rgba(239, 73, 15, .12) !important;
  border: 1px solid rgba(239, 73, 15, .35) !important;
  color: var(--zero-text) !important;
}

@media (max-height: 680px), (max-width: 480px) {
  .MuiContainer-root.MuiContainer-maxWidthXs {
    padding: 22px 18px !important;
  }
}