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

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html,
body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.turbo-progress-bar {
  background-color: var(--color-gray-900);
  padding: 2px;
}

/* An embedded form takes its heading and surrounding layout from its host page. */
html.form-embedded,
.form-embedded body {
  height: auto;
  background: transparent;
}

.form-embedded .form-shell {
  display: block;
  min-height: 0;
  height: auto;
  padding: 0;
}

.form-embedded .form-card {
  max-width: none;
  max-height: none;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.form-embedded .form-grid {
  display: block;
  height: auto;
}

.form-embedded .form-introduction {
  display: none;
}

.form-embedded .form-main {
  margin: 0;
  overflow: visible;
}

.form-embedded #main {
  padding: 8px;
}

.fade-out {
  animation: fadeOut 0.3s forwards;
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}