@media screen {
  /* IE7 needs !important */

  body  {
    background-color:#022667 !important;
  }

  :root{
  --sss-navy:#022667;
  --sss-gold:#9B8549;
  --sss-white:#FFFFFF;
  --sss-ink:#111111;

  /* neutrals */
  --sss-bg:#ffffff;
  --sss-panel:#ffffff;
  --sss-soft:#f6f7fb;
  --sss-border:#e3e6ef;

  /* states */
  --sss-focus: rgba(2, 38, 103, 0.25);
}

/* ================================
   Page background image
================================ */
body {
  background-image: url("https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/0aaa2b70-fad1-11f0-942e-75f706d69897/07496286-06e1-11f1-9903-fd0522225770.jpg?1770769896");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;  /* optional: fixed for parallax feel */
}

/* subtle overlay so text stays legible */
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255,255,255,0.65);  /* lighter page look */
  pointer-events: none;
  z-index: -1;
}

/* ================================
   Layout
================================ */
#content-body {
  border-top: 0;
  padding: 25px;
  margin: auto;
  position: relative;
  z-index: 0;
  max-width: 65rem;
  background-color: var(--sss-soft) !important;
}

header {
  max-width: 65rem;
  margin: auto;
  background-color: var(--sss-white);
}

/* Logo sizing */
.header-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-image img {
  width: 100%;
  max-width: 900px;   /* adjust 800–1100px if needed */
  height: auto;
  margin: 20px auto;
}

/* ================================
   Headers (thinner + gold accents)
================================ */

/* H1 – Navy bar with gold underline */
h1 {
  font-family: "Open Sans", sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  text-transform: none;
  color: var(--sss-white) !important;
  background-color: var(--sss-navy) !important;
  padding: 10px 16px;
  border-radius: 8px;
  line-height: 1.3;
  border-bottom: 3px solid var(--sss-gold);
}

h1.summary-title {
  width: 100%;
}

.sign-in header h1,
.sign-in header .h1,
.create-account header h1,
.create-account header .h1,
.forgot-password header h1,
.forgot-password header .h1,
.admin-login header h1,
.admin-login header .h1 {
  color: var(--sss-white) !important;
  padding: 6px 16px !important;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0;
  border-bottom: 3px solid var(--sss-gold);
}

/* H2 – Navy bar with gold left rule */
h2,
.sa-form-field[data-flavor='section'],
.sa-form-field[data-flavor='subsection'] {
  font-family: "Open Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: none;
  color: var(--sss-white) !important;
  background-color: var(--sss-navy) !important;
  margin: 0 !important;
  padding: 8px 20px !important;
  border-left: 4px solid var(--sss-gold);
  line-height: 1.35;
}

/* Keep accent — don't remove borders */
section h2:first-of-type,
section .h2:first-of-type {
  margin: 0 !important;
}

h3,
.sa-form-title,
.sa-form-nav-page-name {
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  color: var(--sss-navy) !important;
  line-height: 1.35;
}

/* Body text */
.form-text {
  color: var(--sss-ink) !important;
}

/* Required asterisk */
.label-required:after,
.teacher-rec-modal-required-label:after,
.sa-form-required-label:after,
.label-required-prepend:before,
.sa-form-required-label-prepend:before {
  color: #d84848;
}

/* Links */
a {
  color: var(--sss-navy) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(2, 38, 103, 0.35) !important;
}

a:hover,
a:focus {
  text-decoration: none !important;
}

/* Selects */
select {
  width: auto;
}

/* Header nav active */
.header-actions li.active a {
  color: var(--sss-ink) !important;
}

.header-actions li.active {
  border-bottom: 3px solid var(--sss-gold) !important;
}

/* Form preview bar */
.sa-form-preview {
  margin: 0 -25px 20px -25px !important;
  background: var(--sss-navy) !important;
}

/* Video embed helper */
.video-responsive {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sa-form-nav-page-name {
  margin-right: 20px;
}

/* Step indicators */
.sa-form-nav-pages-current i.fa-circle {
  color: var(--sss-gold) !important;
}

.sa-form-nav-pages
.sa-form-nav-pages-current
.sa-form-nav-pages-current-number {
  color: var(--sss-white);
}

/* Textareas */
.sa-form-field-group-body textarea {
  height: auto;
  width: auto;
}

/* Inputs */
.form-select,
.sa-form-field-group-body select {
  border-color: var(--sss-border);
}

.form-select:focus,
.sa-form-field-group-body select:focus,
.form-control:focus,
.sa-form-field-group-body input[type=text]:focus,
.sa-form-field-group-body textarea:focus {
  border-color: var(--sss-navy) !important;
  box-shadow: 0 0 0 0.25rem var(--sss-focus) !important;
}

/* Checkboxes / radios */
input[type="radio"],
input[type="checkbox"],
.form-check-input:checked {
  accent-color: var(--sss-gold) !important;
}

.form-check-input:checked {
  background-color: var(--sss-navy) !important;
  border-color: var(--sss-border) !important;
}

/* Icons */
.fa-arrow-down {
  color: var(--sss-navy) !important;
  margin-bottom: 10px !important;
}

/* ================================
   Buttons (SSS style – ultra refined)
================================ */
.btn-primary,
.btn-light,
.btn-success,
.btn-secondary,
.sign-in .login-options .login-option,
.create-account .login-options .login-option,
.forgot-password .login-options .login-option,
.admin-login .login-options .login-option {
  color: var(--sss-white) !important;
  background-color: var(--sss-navy) !important;
  font-size: 0.85rem;                 /* smaller text */
  font-weight: 600;
  text-transform: none;
  border: 1px solid var(--sss-navy) !important; /* thinner border */
  border-radius: 6px !important;
  text-decoration: none !important;
  padding: 4px 10px !important;       /* thinner */
  line-height: 1.1;
  transition: all .2s ease-in-out;
}

/* Hover / focus */
.btn-check:focus + .btn-primary, .btn-primary:focus,
.btn-check:hover + .btn-primary, .btn-primary:hover,
.btn-check:focus + .btn-light, .btn-light:focus,
.btn-check:hover + .btn-light, .btn-light:hover,
.btn-check:focus + .btn-success, .btn-success:focus,
.btn-check:hover + .btn-success, .btn-success:hover,
.btn-check:focus + .btn-secondary, .btn-secondary:focus,
.btn-check:hover + .btn-secondary, .btn-secondary:hover,
.sign-in .login-options .login-option:hover,
.create-account .login-options .login-option:hover,
.forgot-password .login-options .login-option:hover,
.admin-login .login-options .login-option:hover {
  color: var(--sss-white) !important;
  background-color: var(--sss-navy) !important;
  border: 1px solid var(--sss-gold) !important;
  box-shadow: 0 0 0 0.12rem rgba(155, 133, 73, 0.18) !important;
  transform: translateY(-1px);
}

/* Disabled */
.btn-primary:disabled {
  color: var(--sss-white) !important;
  background-color: var(--sss-navy) !important;
  opacity: 0.45;
}

/* Center button inputs */
input.btn.btn-primary,
input.btn.btn-light,
input.btn.btn-success,
input.btn.btn-secondary {
  margin: auto;
}

/* ================================
   Footer
================================ */
footer {
  max-width: 65rem;
  color: var(--sss-ink);
  background-color: var(--sss-white);
  border-top: 0 !important;
  margin: auto !important;
}

footer a {
  color: var(--sss-navy) !important;
  text-decoration: underline !important;
}

footer a:hover,
footer a:focus {
  color: var(--sss-ink) !important;
  text-decoration: none !important;
}

/* Billing area */
.billing-history-statement-link {
  font-size: 13px !important;
  color: var(--sss-white) !important;
}

.billing-history .statement-year-selector {
  font-size: 13px !important;
  float: none !important;
}

.statement-year-selector a {
  font-size: 13px !important;
}

.dropdown-toggle {
  font-size: 13px !important;
  color: var(--sss-white) !important;
  margin: -10px !important;
}

.billing-history h2 {
  padding-bottom: 20px !important;
  padding-left: 10px !important;
}

.billing-account h2 {
  padding-left: 10px !important;
}

.billing-account .billing-account-selector .bulk-actions .bulk-action {
  background: none !important;
}

.dropdown-item a {
  color: #212529 !important;
}

.billing-history .billing-history-header {
  background-color: var(--sss-navy) !important;
  border-left: 6px solid var(--sss-gold);
}


  h1,
  h2,
  h3,
  .sa-form-title,
  .sa-form-nav-page-name,
  .sa-form-nav-pages-current i.fa-circle,
  .sa-form-field[data-flavor='section'],
  .sa-form-field[data-flavor='subsection']
  {
    color: #022667;
  }

  section h2:first-of-type {
    border-bottom-color: #022667;
  }

  #content-body {
    border-top-color: #022667
  }

  .notification-alert {
    background-color: rgba(2, 38, 103, 0.1);
  }

  .notification-alert .notification-icon > i {
    color: #022667;
  }

  .summary-communication > .notification-icon > .fa-bullhorn {
    color: #022667;
  }

  li.page-item.active > a.page-link {
    background-color: #022667
  }

  ul.header-actions > li > a > .header-action-label {
    color: #022667
  }

  .student-summary-action-link {
    color: #022667
  }

  button.btn-primary {
    background-color: #022667
  }

  .ap-installment-list.table {
    .ap-installment-contact-highlight {
      background-color: #022667
    }
  }
}