body.app-layout-bg {
    background: #f7f8fa;
}

body.app-layout-bg .app-layout-content {
    background: #f7f8fa;
}

.offcanvas-body .navbar-nav-font-bottom .nav-item{
    width: 100% !important;
    border-bottom:1px solid #242e5c;
}

/* Apply Source Sans 3 to all heading elements */
h1, h2, h3, h4, h5, h6 {
    font-family: "Source Sans 3", sans-serif !important;
    color: var(--bs-primary-dark);
}

/* Apply Source Sans 3 to elements with Bootstrap heading classes */
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Source Sans 3", sans-serif !important;
    color: var(--bs-primary-dark);
}

/* Scrollable form area */
.form-scroll {
  max-height: 60vh;      /* adjust as needed */
  overflow-y: auto;
}

/* Nice scroll behaviour on touch devices */
.form-scroll {
  -webkit-overflow-scrolling: touch;
}

/* Ensure inner content does not stick to the right edge */
.form-scroll {
  padding-right: 0.5rem;
}

/* Make the primary button text a bit more prominent */
button[type="button"].btn-primary {
  font-weight: 600;
}

/* Grey rectangular header background for the subject preferences page */
.page-header-box {
  background-color: #f1f3f5;           /* light grey */
  border: 1px solid var(--bs-light-50);
  border-radius: 0.75rem;
  padding: 1rem;
  width: 100%;
}

.alert-error {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.app-pretty-page-shell {
  --app-pretty-border: var(--bs-light-50);
  --app-pretty-surface: var(--bs-light-25);
  max-width: 1200px;
  min-height: 50vh;
  margin: 3.5rem auto;
  padding: 1.5rem 1.5rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--app-pretty-border);
  border-radius: 12px;
  /* box-shadow: 0 1px 8px var(--bs-primary-25); */
  box-shadow: 0 1px 20px var(--bs-primary-50);
} 

.app-pretty-page-shell-medium {
  max-width: 1050px;
}

.app-pretty-page-shell-narrow {
  max-width: 950px;
}

.card-shell {
  --card-pretty-border: var(--bs-light-50);
  --card-pretty-surface: var(--bs-light-25);

  padding: 1.5rem;
  margin-bottom: 1.5rem;         /* space between cards vertically */
  background: var(--bs-body-bg);
  border: 1px solid var(--card-pretty-border);
  border-radius: 12px;
  box-shadow: 0 1px 20px var(--bs-primary-50);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger-dark);
  --bs-btn-border-color: var(--bs-danger-dark);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-danger-dark);
  --bs-btn-hover-border-color: var(--bs-danger-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-dark-rgb);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-danger-dark);
  --bs-btn-active-border-color: var(--bs-danger-dark);
}