@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@500;600;700&family=Lato:wght@400;700&display=swap');

body, #root {
  background: #2F3B40 !important;
  font-family: 'Lato', sans-serif !important;
  min-height: 100vh;
}

/* Full-page background covers the Metabase illustration */
#root > div,
[class*='LoginPage'],
[class*='Layout'] {
  background: #2F3B40 !important;
  background-image: none !important;
}

/* Hide the bottom illustration */
svg[class*='Layout'], [class*='illustration'] {
  display: none !important;
}

/* Login card */
form {
  background: #384850 !important;
  border: 1px solid rgba(169,255,64,0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(20,30,32,0.55) !important;
  padding: 40px !important;
}

/* Inputs */
input[type=text], input[type=email], input[type=password] {
  background: #2F3B40 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  color: #f0f2f1 !important;
  font-family: 'Lato', sans-serif !important;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus {
  border-color: #A9FF40 !important;
  box-shadow: 0 0 0 3px rgba(169,255,64,0.14) !important;
  outline: none !important;
}

/* Labels */
label {
  color: rgba(240,242,241,0.65) !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

/* Headings */
h1, h2, h3, h4 {
  font-family: 'Mulish', sans-serif !important;
  color: #f0f2f1 !important;
}

/* Submit button */
button[type=submit] {
  background: #A9FF40 !important;
  color: #2F3B40 !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: 'Mulish', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  width: 100% !important;
}
button[type=submit]:hover { background: #bfff5a !important; }

/* Checkbox label */
input[type=checkbox] + span, input[type=checkbox] ~ label {
  color: rgba(240,242,241,0.65) !important;
}

/* Links */
a { color: #A9FF40 !important; }
a:hover { color: #bfff5a !important; }

/* Body text, spans */
p, span { color: rgba(240,242,241,0.75) !important; }