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

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

  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/* ==========================================================
   MPCDS — Finalsite Enrollment Parent Portal
   Styled to match the Admissions newsletter.
   Paste into: Settings > Portal > Parent Portal Design > Custom CSS
   To revert at any time: delete everything here and save.
   ==========================================================

   SET THESE IN THE FIELDS ABOVE THE CSS BOX:
     Background Color .... #EAF7FE   (Lightest Blue)
     Dark Accent Color ... #003057   (Cajun Navy)

   PALETTE
     #003057  Cajun Navy      headings, buttons
     #0082BA  Team Blue       rules, accents
     #EAF7FE  Lightest Blue   page ground, panels
     #ABE0F9  Light Blue      (held in reserve)
     #33485C  body text
     #0068a5  links

   NOTE 1: the @import must stay on line 1. CSS ignores an
   @import placed after any rule.
   NOTE 2: sections 5-8 style the cleaned Parent Portal Content
   block. They depend on its class names (mp-welcome, mp-item,
   mp-panel). If someone edits that block in the VISUAL editor
   instead of the source view, the editor strips the classes and
   these rules stop applying.
   ========================================================== */


/* ---- 1. BACKGROUND -------------------------------------- */

body {
  background-color: #EAF7FE !important;
  background-image: none;
}


/* ---- 2. LOGO --------------------------------------------
   Matched to the card width in section 3 so the two line up
   edge to edge. If you change one, change the other.

   THE IMPORTANT BIT: Finalsite hides the logo wrapper below
   roughly 768px with display:none, which is why the logo
   vanished on phones and on narrow desktop windows. This
   override sits OUTSIDE any media query on purpose so it
   applies at every width. Do not move it into one.          */

.authentication-school-header .header-image {
  display: block !important;
}

img[src*="sa-assets-production/logos"] {
  display: block !important;
  width: 100% !important;
  max-width: 680px !important;
  height: auto !important;
  margin: 28px auto 24px auto !important;
}


/* ---- 3. THE CARD ----------------------------------------
   Blue hairline across the top, same as the newsletter header.

   Finalsite holds the portal content in a fixed column roughly
   465px wide but lets this card stretch the full browser width,
   which strands white space on both sides. Capping the card
   closes that gap.

   DIAL: max-width. Raise it for a roomier card.
      680px = comfortable reading measure  (current)
      780px = roomier
     1100px = wide
       none = delete the max-width line for full width          */

#content-body {
  background-color: #ffffff;
  border-top: 5px solid #0082BA;
  border-radius: 4px;
  box-shadow: 0 2px 16px rgba(0, 48, 87, 0.10);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  float: none;
}


/* ---- 3b. CONTENT COLUMN ---------------------------------
   Finalsite caps section.sign-in around 450px. Releasing it
   lets the text fill the card instead of stranding white
   space on both sides.                                       */

#content-body .sign-in,
#content-body .sign-in > header,
#content-body .login-page-description {
  max-width: 100% !important;
  width: 100% !important;
}

/* Login fields stay narrow on purpose — full-width inputs
   read as harder to fill in than they are.                  */

#content-body form.new_user {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}


/* ---- 3c. THE PORTAL TITLE -------------------------------
   Finalsite's own rule (.sign-in header h1) is more specific
   than a bare h1, which is why this was still rendering
   black. Matching its specificity to win it back.            */

#content-body .sign-in header h1 {
  font-family: Georgia, 'Times New Roman', serif;
  color: #003057;
  font-size: 15px;
  line-height: 1.4;
  font-weight: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}


/* ---- 4. BASE TYPE --------------------------------------- */

body,
#content-body,
label,
input,
select,
textarea {
  font-family: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}

#content-body p,
#content-body li {
  font-size: 15px;
  line-height: 1.65;
  color: #33485C;
}

#content-body strong {
  color: #1B2F42;
  font-weight: 600;
}

h1, h2, h3, h4,
.page-header {
  font-family: Georgia, 'Times New Roman', serif;
  color: #003057;
  font-weight: normal;
  letter-spacing: 0.01em;
}


/* ---- 5. WELCOME LINE ------------------------------------
   Georgia navy display type, as in the newsletter headers.   */

.mp-welcome {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 23px !important;
  line-height: 1.3 !important;
  color: #003057 !important;
  text-align: center;
  margin: 4px 0 14px 0;
}


/* ---- 6. SHORT ACCENT RULE UNDER THE WELCOME LINE -------- */

.mp-accent {
  width: 56px;
  height: 3px;
  background-color: #0082BA;
  margin: 0 auto 26px auto;
}


/* ---- 7. BLUE-RULE ITEMS ---------------------------------
   The newsletter's bulleted-line treatment: a Team Blue rule
   at the left instead of a bullet.                          */

.mp-item {
  border-left: 3px solid #0082BA;
  padding-left: 16px;
  margin: 0 0 20px 0;
  font-size: 15px;
  line-height: 1.65;
  color: #33485C;
}


/* ---- 8. CONTACT PANEL -----------------------------------
   Lightest Blue panel with a Team Blue cap.                 */

.mp-panel {
  background-color: #EAF7FE;
  border-top: 3px solid #0082BA;
  padding: 22px 24px 6px 24px;
  margin: 30px 0 6px 0;
}

.mp-panel p {
  margin: 0 0 16px 0;
}

.mp-panel h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  color: #003057;
  margin: 0 0 10px 0;
}

.mp-contact {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.mp-panel .mp-contact strong {
  color: #003057;
}

/* Grades served — quieter than the division name.            */

.mp-grades {
  color: #647A8D;
}

/* Phone numbers are links so they're tappable on a phone, but
   styled as plain text so the panel isn't a wall of blue.     */

.mp-contact a[href^="tel:"],
.mp-contact a[href^="tel:"]:visited {
  color: #33485C;
  text-decoration: none;
}

.mp-contact a[href^="tel:"]:hover {
  color: #003057;
  text-decoration: underline;
}


/* ---- 9. BUTTONS ----------------------------------------- */

.btn,
.btn-primary,
.btn-default,
.btn-success {
  font-family: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em;
  border-radius: 3px;
}

.btn-primary,
.btn-success {
  background-color: #003057;
  background-image: none;
  border-color: #003057;
  color: #ffffff;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background-color: #0082BA;
  border-color: #0082BA;
  color: #ffffff;
}

.btn-default {
  border-color: #0082BA;
  color: #003057;
}

.btn-default:hover,
.btn-default:focus {
  background-color: #EAF7FE;
  border-color: #003057;
  color: #003057;
}


/* ---- 10. LINKS ------------------------------------------ */

a,
a:visited {
  color: #0068a5;
}

a:hover,
a:focus {
  color: #003057;
  text-decoration: underline;
}


/* ---- 11. FOOTER ----------------------------------------- */

footer,
footer p {
  color: #33485C;
}

footer a,
footer a:visited {
  color: #0068a5;
}

footer a:hover {
  color: #003057;
}


/* ---- 12. PHONE ------------------------------------------
   Media queries work here — unlike in the newsletter.        */

@media (max-width: 600px) {

  /* Sizing only. The rule that actually un-hides the logo lives
     in section 2, outside any media query.                     */

  img[src*="sa-assets-production/logos"] {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    margin: 18px auto 14px auto !important;
  }

  #content-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mp-welcome {
    font-size: 20px !important;
  }

  .mp-item {
    padding-left: 13px;
    font-size: 14.5px;
  }

  .mp-panel {
    padding: 18px 16px 4px 16px;
  }

}

  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: #003057;
  }

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

  #content-body {
    border-top-color: #003057;
  }

  .notification-alert {
    background-color: rgba(0, 48, 87, 0.1);
  }

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

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

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

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

  .student-summary-action-link {
    color: #003057;
  }

  button.btn-primary {
    background-color: #003057;
  }

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