@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/_populasse-auth-fonts/chivomono-400.woff2) format('woff2');
}

body {
  background-color: #0E1A45 !important;
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(234,241,255,.16), transparent 58%),
    repeating-linear-gradient(90deg, rgba(234,241,255,.06) 0 1px, transparent 1px 28px) !important;
  background-attachment: fixed !important;
}

.MuiContainer-root.MuiContainer-maxWidthXs {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  background: #EDE9DC !important;
  border: 1px solid #C9C3B0 !important;
  border-radius: 8px !important;
  padding: 30px 24px 24px !important;
  margin-top: 72px !important;
  box-shadow: 0 24px 60px rgba(5,8,15,.45) !important;
  position: relative !important;
}

.MuiContainer-root.MuiContainer-maxWidthXs::after {
  order: -2;
  content: "";
  display: block;
  width: 100%;
  height: 52px;
  margin-bottom: 14px;
  background-image: url(/_populasse-auth-fonts/grid-title-light.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.MuiContainer-root.MuiContainer-maxWidthXs::before {
  order: -1;
  content: "ACCÈS AUX SERVICES — VOIES 1 · 2 · 3";
  display: block;
  font-family: 'Chivo Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  color: #6E6A5B;
  margin-bottom: 18px;
  padding-left: 16px;
  background-image: radial-gradient(circle, #FF3B2F 0 3px, transparent 3.5px);
  background-repeat: no-repeat;
  background-size: 8px 8px;
  background-position: 0 4px;
}

.MuiGrid-root:has(> #UserSvg) {
  display: none !important;
}

.MuiGrid-root:has(> a[href*="authelia.com"]) {
  display: none !important;
}

h5.MuiTypography-h5, .MuiTypography-h5 {
  font-family: 'Chivo Mono', monospace !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
  color: #0E1A45 !important;
}

label.MuiFormLabel-root, label.MuiInputLabel-root {
  font-family: 'Chivo Mono', monospace !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  color: #6E6A5B !important;
}
label.Mui-focused { color: #D8362A !important; }

.MuiOutlinedInput-root { border-radius: 4px !important; background: #FFFFFF !important; }
.MuiOutlinedInput-notchedOutline { border-color: #CFC9B6 !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #D8362A !important; }
.MuiInputBase-input { font-family: 'Chivo Mono', monospace !important; color: #0E1A45 !important; letter-spacing: .04em !important; }

.MuiCheckbox-root { color: #B8322A !important; }
a, .MuiButton-text, .MuiLink-root { color: #B8322A !important; }

button.MuiButton-contained {
  background: #D8362A !important;
  color: #FFF6F4 !important;
  border-radius: 4px !important;
  font-family: 'Chivo Mono', monospace !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  box-shadow: 0 3px 0 #962017 !important;
  transition: background .15s, transform .1s, box-shadow .1s !important;
}
button.MuiButton-contained:hover { background: #E5493D !important; }
button.MuiButton-contained:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 #962017 !important; }

@media (prefers-color-scheme: dark) {
  body {
    background-color: #05080F !important;
    background-image:
      radial-gradient(ellipse at 50% -10%, rgba(120,150,220,.14), transparent 58%),
      repeating-linear-gradient(90deg, rgba(234,241,255,.035) 0 1px, transparent 1px 28px) !important;
  }
  .MuiContainer-root.MuiContainer-maxWidthXs {
    background: #111726 !important;
    border-color: #26304A !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.6) !important;
  }
  .MuiContainer-root.MuiContainer-maxWidthXs::before { color: #7E8CB0 !important; }
  .MuiContainer-root.MuiContainer-maxWidthXs::after { background-image: url(/_populasse-auth-fonts/grid-title-dark.svg) !important; }
  h5.MuiTypography-h5, .MuiTypography-h5 { color: #EAF1FF !important; }
  label.MuiFormLabel-root, label.MuiInputLabel-root { color: #7E8CB0 !important; }
  label.Mui-focused { color: #FF6B5E !important; }
  .MuiOutlinedInput-root { background: #080C16 !important; }
  .MuiOutlinedInput-notchedOutline { border-color: #2C364F !important; }
  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #FF6B5E !important; }
  .MuiInputBase-input { color: #EAF1FF !important; }
  .MuiCheckbox-root { color: #FF6B5E !important; }
  a, .MuiButton-text, .MuiLink-root { color: #FF6B5E !important; }
  button.MuiButton-contained { box-shadow: 0 3px 0 #7A160F !important; }
  button.MuiButton-contained:active { box-shadow: 0 1px 0 #7A160F !important; }
}