:root {
  --institution-boot-accent: #4489c5;
  --institution-boot-text: #0d223f;
  --institution-boot-muted: #7f90a2;
}

:root .base-loading__container {
  /* Do not change, is lined up with Loading Component.
     Do not set display here — App.scss hides this with .base-loading__container { display: none }
     once the app CSS loads; a :root-qualified display rule would win on specificity and stick. */
  margin-top: 180px;
  text-align: center;
}

.institution-boot-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--institution-boot-text);
}

.institution-boot-loader__logo {
  display: block;
  width: min(280px, 80vw);
  height: auto;
}

.institution-boot-loader__subtitle {
  font-size: 13px;
  color: var(--institution-boot-muted);
}

.institution-boot-loader__spinner {
  width: 36px;
  height: 36px;
  margin-top: 8px;
  border: 3px solid rgba(68, 137, 197, 0.2);
  border-top-color: var(--institution-boot-accent);
  border-radius: 50%;
  animation: institution-boot-spin 0.9s linear infinite;
}

@keyframes institution-boot-spin {
  to {
    transform: rotate(360deg);
  }
}