:root {
  /* Smile and Learn brand palette */
  --sl-blue: #5B9BD5;
  --sl-blue-dark: #3D7AB8;
  --sl-blue-soft: #A7C6E5;
  --sl-yellow: #F0C561;
  --sl-dark: #42413E;
  --sl-muted: #7A7A7A;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  color: var(--sl-dark);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #f3f7fa;
  background-image: linear-gradient(160deg, #f5f9fc 0%, #e9f2fa 100%);
}
.form-signin {
  width: 100%;
  max-width: 380px;
  padding: 32px 28px;
  margin: auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(91, 155, 213, 0.18);
}
.brand-logo {
  width: 240px;
  max-width: 85%;
  height: auto;
}
.form-title {
  font-family: "Roboto Slab", "Roboto", serif;
  font-weight: 700;
  color: var(--sl-dark);
}
.form-subtitle {
  font-size: 0.9rem;
  color: var(--sl-muted);
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px 12px;
  font-size: 16px;
  margin-top: 8px;
  border-color: #d7e3ec;
  border-radius: 10px;
}
.form-signin .form-control:focus {
  z-index: 2;
  border-color: var(--sl-blue);
  box-shadow: 0 0 0 0.2rem rgba(91, 155, 213, 0.25);
}
.form-signin .btn-primary {
  margin-top: 18px;
  padding: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 10px;
  border-color: var(--sl-blue);
  background-color: var(--sl-blue);
}
.form-signin .btn-primary:hover,
.form-signin .btn-primary:focus {
  border-color: var(--sl-blue-dark);
  background-color: var(--sl-blue-dark);
  box-shadow: 0 0 0 0.2rem rgba(91, 155, 213, 0.35);
}
.alert {
  border-radius: 10px;
  max-width: 380px;
  margin: 0 auto 16px;
  text-align: left;
}
.alert-primary {
  color: var(--sl-blue-dark);
  background-color: #e9f2fa;
  border-color: #cfe2f2;
}
.alert-danger {
  border-color: #f0c2c2;
}