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: var(--bs-primary);           
  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: 2.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;
}

.org-sem-form {
  border: 1px solid var(--bs-light-75);
  background-color: var(--bs-light-25);
}

.card {  
  margin-top: 1.0rem; 
}

.card-body {
  height: 110px;
}

.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);
}

/* ── Processing overlay ───────────────────────────────────────────────── */

#processingOverlay .processing-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1040;
}

#processingOverlay .processing-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background: #ffffff;
    border-radius: 0.625rem;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.20);
    min-width: 280px;
    max-width: 420px;
}

.btn-help {
  background-color: #ffffff;  /* white */
  color: #0b5ed7;             /* Bootstrap primary blue */
  border-color: #0b5ed7;
}
.btn-help:hover {
  background-color: #0b5ed7;
  color: #ffffff;
}

.pref-1 {
  background-color: var(--bs-success);  
  color: var(--bs-primary); /* Bootstrap success */
}
.pref-2 {
  background-color: var(--bs-warning); 
  color: var(--bs-primary); /* Bootstrap success */
}
.pref-3 {
  background-color: var(--bs-danger-50);  
  color: var(--bs-primary); /* Bootstrap success */
}