/* =======================================================
   Stanly Community College - Dynamic Forms Universal CSS
   Purpose: reusable styling for multiple Dynamic Forms.

   Dynamic Forms > Custom CSS Classes examples:
     Header/logo row:      df-form-header
     Instruction row:      df-row df-row-intro
     Section heading:      df-row df-row-section
     Signature/date row:   df-row df-row-signature

   Notes:
     - IDs stay unique: tblName, FirstName, LastName, etc.
     - Classes are reusable: df-row, df-row-intro, df-row-section, etc.
     - No form-specific classes such as change-table-name are used here.
   ======================================================= */

:root {
  /* SCC brand variables */
  --scc-blue: #00447B;
  --scc-gold: #E1AF00;
  --scc-gold-dark: #b88a00;
  --scc-gray: #4E4A4E;
  --scc-light-gray: #f8f9fa;
  --scc-white: #ffffff;
  --scc-error: #d9534f;
  --scc-border: #dee2e6;
  --scc-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Browser will fall back if a font is not installed or not loaded as a web font. */
  --scc-font: 'Garamond Premium Pro Regular', 'Roboto', 'Segoe UI', 'Adobe Caslon Pro Regular', Arial, sans-serif;
  --scc-heading-font: 'Alternative Gothic Condensed ATF Medium', 'Alternative Gothic Condensed ATF Regular', 'Arial Narrow', Arial, sans-serif;

  /* Layout variables */
  --df-page-padding: 75px;
  --df-panel-max-width: 1040px;
  --df-panel-pad-x: 32px;
  --df-panel-pad-y: 28px;
  --df-panel-outer-width: calc(var(--df-panel-max-width) + (var(--df-panel-pad-x) * 2) + 2px);
  --df-content-max-width: 900px;
  --df-row-max-width: 900px;

  /* Shape */
  --df-radius-lg: 12px;
  --df-radius-md: 10px;
  --df-radius-sm: 8px;

  /* Text and controls */
  --df-text: #243447;
  --df-text-strong: #102a43;
  --df-text-muted: #5c6f82;
  --df-row-bg: #fbfdff;
  --df-row-border: #e6edf3;
  --df-input-border: #bcccdc;
  --df-input-hover: #9fb3c8;
  --df-focus-ring: rgba(0, 68, 123, 0.18);
}

/* =======================================================
   Page background
   ======================================================= */
html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  box-sizing: border-box;
  padding: var(--df-page-padding);
  background-image: url(https://eforms.stanly.edu/Forms_Server/css/BlueCroppedFinal.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: var(--scc-font);
}

/* =======================================================
   Dynamic Forms top-right required / conditional notes
   Targets generated DF markup when custom classes cannot be added.
   ======================================================= */

#FillingOut .FormStyle > .textAlignR {
  text-align: right;
}

#FillingOut #Required,
#FillingOut .formConditionDisplay > span {
  display: inline-block !important;
  max-width: 420px;
  margin: 0 0 6px 0;
  padding: 9px 13px;

  background: rgba(255, 255, 255, 0.94);
  color: var(--scc-blue) !important;

  border: 1px solid var(--scc-border);
  border-left: 4px solid var(--scc-error);
  border-right: 4px solid var(--scc-error);
  border-radius: var(--df-radius-sm);
  box-shadow: var(--scc-shadow);

  font-family: var(--scc-font);
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  text-align: center;
}

/* =======================================================
   Main Dynamic Forms panel
   ======================================================= */
#DynamicFormPanel {
  max-width: var(--df-panel-max-width);
  margin: 28px auto 0 auto !important;
  padding: var(--df-panel-pad-y) var(--df-panel-pad-x);
  background: var(--scc-white);
  border: 1px solid var(--scc-border);
  border-radius: var(--df-radius-lg);
  box-shadow: var(--scc-shadow);
  box-sizing: content-box;
}

#DynamicFormPanel,
#DynamicFormPanel *,
#formnavbuttons,
#formnavbuttons * {
  box-sizing: border-box;
}

#DynamicFormPanel,
#DynamicFormPanel td,
#DynamicFormPanel div,
#DynamicFormPanel span,
#DynamicFormPanel label,
#DynamicFormPanel p,
#DynamicFormPanel input,
#DynamicFormPanel select,
#DynamicFormPanel textarea,
#formnavbuttons,
#formnavbuttons input {
  font-family: var(--scc-font);
}

#DynamicFormPanel,
#DynamicFormPanel td,
#DynamicFormPanel div,
#DynamicFormPanel span,
#DynamicFormPanel label,
#DynamicFormPanel p {
  color: var(--df-text);
}

/* Center the generated Dynamic Forms content inside the panel. */
#DynamicFormPanel #FormPage {
  width: 100% !important;
}

#DynamicFormPanel #FormPage > tbody > tr > td.widthPercent100 > table.borderSpacingNone {
  width: 100% !important;
  max-width: var(--df-content-max-width);
  margin: 0 auto !important;
}

/* =======================================================
   Headings and basic text
   ======================================================= */
#DynamicFormPanel h1,
#DynamicFormPanel h2,
#DynamicFormPanel h3,
#DynamicFormPanel h4,
.df-form-title,
.df-section-title {
  font-family: var(--scc-heading-font, var(--scc-font));
  color: var(--scc-blue);
  margin-top: 0;
  letter-spacing: 0.02em;
}

#DynamicFormPanel p {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--df-text-muted);
}

#DynamicFormPanel a {
  color: var(--scc-blue);
}

#DynamicFormPanel a:hover,
#DynamicFormPanel a:focus {
  color: #002f57;
}

/* =======================================================
   Form header / branding row

   Use on the top table with logo + form title.
   Custom CSS Classes: df-form-header
   ======================================================= */
.df-form-header {
  width: 100%;
  max-width: var(--df-content-max-width);
  margin: 0 auto 28px auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.df-form-header td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
  border: 0 !important;
}

.df-form-header img {
  max-width: 240px;
  height: auto;
}

.df-form-header td:last-child {
  font-family: var(--scc-heading-font, var(--scc-font)) !important;
  color: var(--scc-blue) !important;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left !important;
}

/* Optional centered title-only row. */
.df-form-title-row {
  width: 100%;
  max-width: var(--df-content-max-width);
  margin: 0 auto 24px auto;
  text-align: center;
  background: transparent;
  border: 0;
}

.df-form-title-row td {
  font-family: var(--scc-heading-font, var(--scc-font)) !important;
  color: var(--scc-blue) !important;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 8px 12px;
}

/* =======================================================
   Universal Dynamic Forms row classes

   Put these in Dynamic Forms > Custom CSS Classes.
   Examples:
     df-row df-row-intro
     df-row df-row-section
   ======================================================= */
.df-row,
.df-row-intro,
.df-row-section,
.df-row-signature {
  width: 100%;
  max-width: var(--df-row-max-width);
  margin: 0 auto 5px auto !important;
  background: var(--df-row-bg);
  border: 1px solid var(--df-row-border);
  border-radius: var(--df-radius-md);
}

.df-row td,
.df-row-intro td,
.df-row-section td,
.df-row-signature td {
  padding: 7px 12px;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 600;
  color: #1f3a56;
}

.df-row td:first-child,
.df-row-intro td:first-child,
.df-row-section td:first-child,
.df-row-signature td:first-child {
  color: var(--df-text-strong);
  white-space: nowrap;
}

/* Instruction/help row.
   Has matching SCC-blue accent bars on both left and right. */
.df-row-intro {
  background: var(--scc-light-gray);
  border-left: 4px solid var(--scc-blue) !important;
  border-right: 4px solid var(--scc-blue) !important;
}

.df-row-intro td {
  font-weight: 600;
  color: var(--df-text-strong);
  line-height: 1.5;
}

/* Section heading/divider row. */
.df-row-section {
  background: #f4f8fb;
}

.df-row-section td {
  color: var(--scc-blue);
  font-weight: 700;
}

/* Signature/date row.
   Has matching SCC-blue accent bars on both left and right. */
.df-row-signature {
  background: #f7fbff;
  border-left: 4px solid var(--scc-blue) !important;
  border-right: 4px solid var(--scc-blue) !important;
}

.df-row-signature td {
  vertical-align: bottom;
}

.df-row-signature td {
padding: 0px 12px !important;
}

/* Spacing helpers. */
.df-row-spaced {
  margin-bottom: 22px !important;
}

.df-row-compact {
  margin-bottom: 10px !important;
}

.df-row-tight-after {
  margin-bottom: 4px !important;
}

.df-row-flush-after {
  margin-bottom: 0 !important;
}

.df-row-full {
  max-width: var(--df-content-max-width) !important;
}

.df-no-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Tight label/input pairs.
   Custom CSS Classes: df-row df-tight-pairs
   New alias: df-row df-pairs */
.df-tight-pairs td,
.df-pairs td {
  text-align: left !important;
}

.df-tight-pairs td:first-child,
.df-pairs td:first-child {
  width: 130px !important;
  max-width: 130px !important;
  padding-right: 10px !important;
  white-space: nowrap;
}

.df-tight-pairs input[type="text"],
.df-tight-pairs select,
.df-pairs input[type="text"],
.df-pairs select {
  margin-left: 0 !important;
}

/* Two label/input pairs in one row.
   Custom CSS Classes: df-row df-two-pairs
   Expected cells: label | field | label | field */
.df-two-pairs {
  width: 100% !important;
  table-layout: fixed !important;
}

.df-two-pairs td {
  text-align: left !important;
}

.df-two-pairs td:nth-child(1),
.df-two-pairs td:nth-child(3) {
  width: 130px !important;
  max-width: 130px !important;
  padding-right: 10px !important;
  white-space: normal !important;
}

.df-two-pairs td:nth-child(2),
.df-two-pairs td:nth-child(4) {
  width: calc((100% - 260px) / 2) !important;
}

.df-two-pairs td:nth-child(2) {
  padding-right: 18px !important;
}

.df-two-pairs td:nth-child(3) {
  padding-left: 18px !important;
}

.df-two-pairs input[type="text"],
.df-two-pairs input[type="email"],
.df-two-pairs input[type="tel"],
.df-two-pairs input[type="number"],
.df-two-pairs input[type="date"],
.df-two-pairs select,
.df-two-pairs textarea {
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

/* Align two-pair rows with df-pairs-narrow (115px label columns).
   Use: df-row df-two-pairs df-two-pairs-narrow */
.df-two-pairs.df-two-pairs-narrow td:nth-child(1),
.df-two-pairs.df-two-pairs-narrow td:nth-child(3) {
  width: 115px !important;
  max-width: 115px !important;
}

.df-two-pairs.df-two-pairs-narrow td:nth-child(2),
.df-two-pairs.df-two-pairs-narrow td:nth-child(4) {
  width: calc((100% - 230px) / 2) !important;
}

/* Three label/input pairs in one row.
   Custom CSS Classes: df-row df-three-pairs
   Expected cells: label | field | label | field | label | field */
.df-three-pairs {
  width: 100% !important;
  table-layout: fixed !important;
}

.df-three-pairs td {
  text-align: left !important;
}

.df-three-pairs td:nth-child(1),
.df-three-pairs td:nth-child(3),
.df-three-pairs td:nth-child(5) {
  width: 130px !important;
  max-width: 130px !important;
  padding-right: 8px !important;
  white-space: normal !important;
}

.df-three-pairs td:nth-child(2),
.df-three-pairs td:nth-child(4),
.df-three-pairs td:nth-child(6) {
  width: calc((100% - 390px) / 3) !important;
}

.df-three-pairs td:nth-child(3),
.df-three-pairs td:nth-child(5) {
  padding-left: 12px !important;
}

.df-three-pairs input[type="text"],
.df-three-pairs input[type="email"],
.df-three-pairs input[type="tel"],
.df-three-pairs input[type="number"],
.df-three-pairs input[type="date"],
.df-three-pairs select,
.df-three-pairs textarea {
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

/* Softer text for long help/instruction cells. */
.df-muted-cell td,
.df-muted-cell td:last-child {
  line-height: 1.45;
  font-weight: 500;
  color: #52606d;
}

.df-help,
.df-note,
#DynamicFormPanel .help-text {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--df-text-muted);
}

.df-error,
#DynamicFormPanel .error,
#DynamicFormPanel .field-validation-error {
  color: var(--scc-error) !important;
  font-weight: 600;
}

.df-required,
#DynamicFormPanel .required,
#DynamicFormPanel .asterisk {
  color: var(--scc-error) !important;
  font-weight: 700;
}

/* =======================================================
   Inputs, selects, textareas
   ======================================================= */
#DynamicFormPanel input[type="text"],
#DynamicFormPanel input[type="password"],
#DynamicFormPanel select,
#DynamicFormPanel textarea {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--df-input-border);
  border-radius: var(--df-radius-sm);
  background: var(--scc-white);
  color: #1f2933;
  font-size: 14px;
  font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

#DynamicFormPanel textarea {
  min-height: 50px;
  resize: vertical;
}

#DynamicFormPanel input[type="text"]:hover,
#DynamicFormPanel input[type="password"]:hover,
#DynamicFormPanel select:hover,
#DynamicFormPanel textarea:hover {
  border-color: var(--df-input-hover);
}

#DynamicFormPanel input[type="text"]:focus,
#DynamicFormPanel input[type="password"]:focus,
#DynamicFormPanel select:focus,
#DynamicFormPanel textarea:focus {
  outline: none;
  border-color: var(--scc-blue);
  box-shadow: 0 0 0 3px var(--df-focus-ring);
}

#DynamicFormPanel input[readonly],
#DynamicFormPanel textarea[readonly],
#DynamicFormPanel select[disabled],
#DynamicFormPanel input[disabled],
#DynamicFormPanel textarea[disabled] {
  background: #eef2f6;
  color: #6b7280;
  cursor: not-allowed;
}

#DynamicFormPanel input[type="checkbox"],
#DynamicFormPanel input[type="radio"] {
  transform: scale(1.08);
  margin-right: 8px;
  vertical-align: middle;
}

#DynamicFormPanel input[type="file"] {
  max-width: 100%;
  font-weight: 400;
}

/* Dynamic Forms generated file attachment button */
#DynamicFormPanel button[id^="attachFile_"] {
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--scc-blue);
  border-radius: var(--df-radius-sm);
  background: var(--scc-blue);
  color: var(--scc-white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#DynamicFormPanel button[id^="attachFile_"]:hover,
#DynamicFormPanel button[id^="attachFile_"]:focus {
  background: #002f57;
  border-color: #002f57;
  box-shadow: 0 0 0 3px var(--df-focus-ring);
  outline: none;
}

/* =======================================================
   Signature areas, if Dynamic Forms renders them as inputs/blocks
   ======================================================= */
#DynamicFormPanel .signature,
#DynamicFormPanel .signatureBox,
#DynamicFormPanel [class*="signature"] {
  max-width: 100%;
}

/* =======================================================
   Form navigation buttons

   Dynamic Forms often renders #formnavbuttons outside
   #DynamicFormPanel. This keeps that separate button card,
   but centers the buttons vertically and horizontally.
   ======================================================= */
#formnavbuttons {
  max-width: var(--df-panel-max-width) !important;
  min-height: 86px !important;
  margin: 14px auto 28px auto !important;
  padding: 0 var(--df-panel-pad-x) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px;

  text-align: center;
  background: var(--scc-white) !important;
  border: 1px solid var(--scc-border);
  border-radius: var(--df-radius-lg);
  box-shadow: var(--scc-shadow);
  box-sizing: border-box;
}

#formnavbuttons input[type="button"],
#formnavbuttons input[type="submit"] {
  min-width: 130px;
  min-height: 42px;
  margin: 0 !important;
  padding: 8px 16px;
  border: 1px solid var(--scc-blue);
  border-radius: var(--df-radius-sm);
  background: var(--scc-blue);
  color: var(--scc-white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#formnavbuttons input[type="button"]:hover,
#formnavbuttons input[type="submit"]:hover,
#formnavbuttons input[type="button"]:focus,
#formnavbuttons input[type="submit"]:focus {
  background: #002f57;
  border-color: #002f57;
  box-shadow: 0 0 0 3px var(--df-focus-ring);
  outline: none;
}

#formnavbuttons input[type="button"]:disabled,
#formnavbuttons input[type="submit"]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Optional secondary button class, if you can apply it. */
#formnavbuttons .df-button-secondary,
#DynamicFormPanel .df-button-secondary {
  background: var(--scc-gray) !important;
  border-color: var(--scc-gray) !important;
}

/* Center Google reCAPTCHA when Dynamic Forms places it above the nav buttons. */
.g-recaptcha,
#DynamicFormPanel .g-recaptcha,
#FillingOut .g-recaptcha {
  width: 304px !important;
  max-width: 100% !important;
  margin: 14px auto 12px auto !important;
}

.g-recaptcha > div,
#DynamicFormPanel .g-recaptcha > div,
#FillingOut .g-recaptcha > div {
  margin-left: auto !important;
  margin-right: auto !important;
}

iframe[src*="recaptcha"],
iframe[title*="reCAPTCHA"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =======================================================
   Mobile hard-fix
   Keeps universal styling visible on phones
   ======================================================= */
@media (max-width: 768px) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;
    background-image: url(https://eforms.stanly.edu/Forms_Server/css/BlueCroppedFinal.png) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll !important;
    font-family: var(--scc-font) !important;
    -webkit-text-size-adjust: 100%;
  }

  #DynamicFormPanel {
    width: auto !important;
    max-width: none !important;
    margin: 14px 10px 0 10px !important;
    padding: 18px 12px !important;
    background: var(--scc-white) !important;
    border: 1px solid var(--scc-border) !important;
    border-radius: var(--df-radius-lg) !important;
    box-shadow: var(--scc-shadow) !important;
    box-sizing: border-box !important;
  }

  #DynamicFormPanel #FormPage,
  #DynamicFormPanel #FormPage > tbody > tr > td.widthPercent100 > table.borderSpacingNone {
    width: 100% !important;
    max-width: 100% !important;
  }

  .df-form-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    text-align: center !important;
  }

  .df-form-header td {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    text-align: center !important;
  }

  .df-form-header img {
    display: block !important;
    max-width: 280px !important;
    width: 90% !important;
    height: auto !important;
    margin: 0 auto 8px auto !important;
  }

  .df-form-header td:last-child {
    font-size: 24px !important;
    text-align: center !important;
  }

  .df-row,
  .df-row-intro,
  .df-row-section,
  .df-row-signature {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 10px auto !important;
    padding: 0 !important;
    background: var(--df-row-bg) !important;
    border: 1px solid var(--df-row-border) !important;
    border-radius: var(--df-radius-md) !important;
    box-sizing: border-box !important;
  }

  .df-row-intro,
  .df-row-signature {
    border-left: 4px solid var(--scc-blue) !important;
    border-right: 4px solid var(--scc-blue) !important;
  }

  .df-row td,
  .df-row-intro td,
  .df-row-section td,
  .df-row-signature td {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--df-text-strong) !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  #DynamicFormPanel input[type="text"],
  #DynamicFormPanel select,
  #DynamicFormPanel textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  #DynamicFormPanel input[type="checkbox"],
  #DynamicFormPanel input[type="radio"] {
    transform: scale(1.15) !important;
    margin-left: 6px !important;
  }

  #formnavbuttons {
    width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    margin: 14px 10px 20px 10px !important;
    padding: 16px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    background: var(--scc-white) !important;
    border: 1px solid var(--scc-border) !important;
    border-radius: var(--df-radius-lg) !important;
    box-shadow: var(--scc-shadow) !important;
    box-sizing: border-box !important;
  }

  #formnavbuttons input[type="button"],
  #formnavbuttons input[type="submit"] {
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  /* Mobile required/condition notices */
  #FillingOut .FormStyle > .textAlignR {
    width: auto !important;
    max-width: none !important;
    margin: 8px 10px 12px 10px !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #FillingOut #Required,
  #FillingOut .formConditionDisplay > span,
  #FillingOut .fcRed.fBold.displayBlock {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 8px auto !important;
    padding: 8px 10px !important;

    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--scc-blue) !important;

    border: 1px solid var(--scc-border) !important;
    border-left: 4px solid var(--scc-error) !important;
    border-right: 4px solid var(--scc-error) !important;
    border-radius: var(--df-radius-sm) !important;
    box-shadow: var(--scc-shadow) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* =======================================================
   Print / export cleanup
   ======================================================= */
  @media print {
    html,
    body {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
	  background-image: none !important;
	  background-color: var(--scc-white) !important;
	  background-attachment: scroll !important;
    }

    #FillingOut,
    #FillingOut .FormStyle,
    #DynamicFormPanel {
      margin-left: auto !important;
      margin-right: auto !important;
    }
	
    #DynamicFormPanel {
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
	
    #DynamicFormPanel {
      width: 960px !important;
      max-width: 960px !important;
      transform: none !important;
    }

    #DynamicFormPanel #FormPage,
    #DynamicFormPanel #FormPage > tbody > tr > td.widthPercent100 > table.borderSpacingNone {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
	#DynamicFormPanel,
	#DynamicFormPanel #FormPage {
  	  margin-top: 0 !important;
	  padding-top: 0 !important;
	}
  }

/* =======================================================
   Align timer, required note, and conditional note
   Timer visual style is left as Dynamic Forms default.
   ======================================================= */

@media screen and (min-width: 769px) {
  :root {
    --df-top-note-right-pad: 0px; /* increase to 8px/12px to pull all three left */
  }

  /* Same alignment corral as the main white form panel */
  #FillingOut > .FormStyle > .timer-form-container,
  #FillingOut > .FormStyle > div.textAlignR,
  #FillingOut > .FormStyle > div.formConditionDisplay {
    width: var(--df-panel-max-width) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 var(--df-top-note-right-pad) 0 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Align timer to right edge, but do NOT restyle timer box */
  #FillingOut > .FormStyle > .timer-form-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    margin-bottom: 6px !important;
  }

  /* Align required and conditional notes */
  #FillingOut > .FormStyle > div.textAlignR,
  #FillingOut > .FormStyle > div.formConditionDisplay {
    text-align: right !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #FillingOut > .FormStyle > div.textAlignR {
    margin-bottom: 8px !important;
  }

  #FillingOut > .FormStyle > div.formConditionDisplay {
    display: block !important;
    margin-bottom: 28px !important;
  }

  #FillingOut #Required,
  #FillingOut .formConditionDisplay > span {
    margin-right: 0 !important;
  }
}

 /* Select2 closed dropdown box */
.select2-container {
  width: 100% !important;
  max-width: 300px;
}

.select2-container--default .select2-selection--single {
  height: 40px !important;
  border: 1px solid #b8c7d7 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  color: #001f3f !important;
  font-size: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  right: 8px !important;
}

/* Select2 opened dropdown menu */
.select2-dropdown {
  border: 1px solid #b8c7d7 !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
}

/* Individual options */
.select2-results__option {
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: #001f3f !important;
}

/* Hover / highlighted option */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #004278 !important;
  color: #fff !important;
}

/* Selected option */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #e8f0f8 !important;
  color: #004278 !important;
}

.df-row.df-small td,
.df-row.df-small label,
.df-row.df-small input,
.df-row.df-small select,
.df-row.df-small textarea {
  font-size: 1em !important;
}

/* Three-column choice rows.
   Dynamic Forms renders each cell as checkbox/radio + label.
   Custom CSS Classes: df-checkbox-three-columns, df-choice-three-columns
   Legacy alias: df-tight-radio */
.df-checkbox-three-columns,
.df-choice-three-columns,
.df-tight-radio {
  width: 100% !important;
  table-layout: fixed !important;
}

.df-checkbox-three-columns td,
.df-choice-three-columns td,
.df-tight-radio td {
  width: 33.333% !important;
  max-width: none !important;
  padding: 6px 18px !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.df-checkbox-three-columns input[type="radio"],
.df-checkbox-three-columns input[type="checkbox"],
.df-choice-three-columns input[type="radio"],
.df-choice-three-columns input[type="checkbox"],
.df-tight-radio input[type="radio"],
.df-tight-radio input[type="checkbox"] {
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
}

/* Two-column checkbox lists */
.df-checkbox-list {
  width: 100% !important;
  table-layout: fixed !important;
}

.df-checkbox-list td {
  padding: 6px 10px !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Dynamic Forms usually renders:
   checkbox | label | checkbox | label */
.df-checkbox-list td:nth-child(1),
.df-checkbox-list td:nth-child(3) {
  width: 42px !important;
  max-width: 42px !important;
  padding-left: 18px !important;
  padding-right: 6px !important;
  text-align: center !important;
}

.df-checkbox-list td:nth-child(2),
.df-checkbox-list td:nth-child(4) {
  width: calc(50% - 42px) !important;
  padding-left: 6px !important;
}

.df-checkbox-list input[type="checkbox"],
.df-checkbox-list input[type="radio"] {
  margin: 0 !important;
  vertical-align: middle !important;
}

.df-checkbox-heading td:first-child {
  width: 42px !important;
  max-width: 42px !important;
  padding-left: 18px !important;
  padding-right: 6px !important;
  text-align: center !important;
}

.df-checkbox-heading td:nth-child(2) {
  padding-left: 6px !important;
}

/* Three-pair checkbox lists.
   Dynamic Forms renders: checkbox | label | checkbox | label | checkbox | label
   Custom CSS Class: df-checkbox-three-pairs */
.df-checkbox-three-pairs {
  width: 100% !important;
  table-layout: fixed !important;
}

.df-checkbox-three-pairs td {
  padding: 6px 10px !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.df-checkbox-three-pairs td:nth-child(1),
.df-checkbox-three-pairs td:nth-child(3),
.df-checkbox-three-pairs td:nth-child(5) {
  width: 42px !important;
  max-width: 42px !important;
  padding-left: 18px !important;
  padding-right: 6px !important;
  text-align: center !important;
}

.df-checkbox-three-pairs td:nth-child(2),
.df-checkbox-three-pairs td:nth-child(4),
.df-checkbox-three-pairs td:nth-child(6) {
  width: calc((100% - 126px) / 3) !important;
  padding-left: 6px !important;
}

.df-checkbox-three-pairs input[type="checkbox"],
.df-checkbox-three-pairs input[type="radio"] {
  margin: 0 !important;
  vertical-align: middle !important;
}

.df-program-select {
    width: 100% !important;
    max-width: 100% !important;
}

.df-program-select select {
    width: 520px !important;
    max-width: 100%;
}

/* Wider Academic Program API dropdown */
#DynamicFormPanel .df-program-select,
#DynamicFormPanel select.df-program-select,
#DynamicFormPanel .df-program-select .select2-container,
#DynamicFormPanel select.df-program-select + .select2-container {
  width: 530px !important;
  max-width: 100% !important;
}

/* Wider general-purpose dropdown */
#DynamicFormPanel .df-dropdown-select,
#DynamicFormPanel select.df-dropdown-select,
#DynamicFormPanel .df-dropdown-select .select2-container,
#DynamicFormPanel select.df-dropdown-select + .select2-container {
  width: 400px !important;
  max-width: 100% !important;
}

/* Extra-wide general-purpose dropdown */
#DynamicFormPanel .df-dropdown-select-wide,
#DynamicFormPanel select.df-dropdown-select-wide,
#DynamicFormPanel .df-dropdown-select-wide .select2-container,
#DynamicFormPanel select.df-dropdown-select-wide + .select2-container {
  width: 600px !important;
  max-width: 100% !important;
}

/* =======================================================
   Gold accented rows
   ======================================================= */

/* Gold instruction/help row: left and right accents */
.df-row-intro-gold {
  width: 100%;
  max-width: var(--df-row-max-width);
  margin: 0 auto 10px auto !important;
  background: var(--scc-light-gray);
  border: 1px solid var(--df-row-border);
  border-left: 4px solid var(--scc-gold-dark) !important;
  border-right: 4px solid var(--scc-gold-dark) !important;
  border-radius: var(--df-radius-md);
}

.df-row-intro-gold td {
  padding: 7px 12px;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 600;
  color: var(--df-text-strong);
  line-height: 1.5;
}

/* Gold section heading row: left accent only */
.df-row-section-gold {
  width: 100%;
  max-width: var(--df-row-max-width);
  margin: 0 auto 10px auto !important;
  border: 1px solid var(--df-row-border);
  border-radius: var(--df-radius-md);
}

.df-row-section-gold td {
  padding: 7px 12px;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 700;
  color: var(--scc-gold-dark);
}

/* =======================================================
   Higher contrast row variants

   Add these alongside the regular row class when a section
   needs more visual separation.

   Examples:
     df-row df-row-section df-row-section-contrast
     df-row df-row-section df-row-section-contrast-strong
     df-row df-row-intro df-row-intro-contrast
     df-row df-row-intro df-row-intro-contrast-strong
     df-row-section-gold df-row-section-gold-contrast
     df-row-section-gold df-row-section-gold-contrast-soft
     df-row-intro-gold df-row-intro-gold-contrast
     df-row-intro-gold df-row-intro-gold-contrast-soft
   ======================================================= */

.df-row-section-contrast {
  background: #e8f1f8 !important;
  border-color: #c5d8e8 !important;
}

.df-row-section-contrast td {
  color: #003a68 !important;
}

.df-row-section-contrast-strong {
  background: #dbeaf5 !important;
  border-color: #adc8dc !important;
}

.df-row-section-contrast-strong td {
  color: #002f57 !important;
}

.df-row-intro-contrast {
  background: #edf4f9 !important;
  border-color: #c5d8e8 !important;
  border-left-color: #003a68 !important;
  border-right-color: #003a68 !important;
}

.df-row-intro-contrast td {
  color: #102a43 !important;
}

.df-row-intro-contrast-strong {
  background: #e2eef7 !important;
  border-color: #adc8dc !important;
  border-left-color: #002f57 !important;
  border-right-color: #002f57 !important;
}

.df-row-intro-contrast-strong td {
  color: #0b2740 !important;
}

.df-row-section-gold-contrast {
  background: #fff3c4 !important;
  border-color: #d6b34b !important;
  border-left-color: #9a7100 !important;
}

.df-row-section-gold-contrast td {
  color: #6f5200 !important;
}

.df-row-section-gold-contrast-soft {
  background: #fff8e3 !important;
  border-color: #dec46f !important;
  border-left-color: #a87f00 !important;
}

.df-row-section-gold-contrast-soft td {
  color: #665000 !important;
}

.df-row-intro-gold-contrast {
  background: #fff6d6 !important;
  border-color: #d6b34b !important;
  border-left-color: #9a7100 !important;
  border-right-color: #9a7100 !important;
}

.df-row-intro-gold-contrast td {
  color: #4f3c00 !important;
}

.df-row-intro-gold-contrast-soft {
  background: #fff9e8 !important;
  border-color: #dec46f !important;
  border-left-color: #a87f00 !important;
  border-right-color: #a87f00 !important;
}

.df-row-intro-gold-contrast-soft td {
  color: #5f4900 !important;
}

/* Right align numeric text fields.
   Dynamic Forms may put the custom class on the input or on a wrapper. */
#DynamicFormPanel input.right-align-number,
#DynamicFormPanel .right-align-number input {
  text-align: right !important;
}

/* Left align numeric text fields.
   Dynamic Forms may put the custom class on the input or on a wrapper. */
#DynamicFormPanel input.left-align-number,
#DynamicFormPanel .left-align-number input {
  text-align: left !important;
}

/* =======================================================
   Table stack add-on

   Add Custom CSS Class "df-table-stack" to an outer wrapper table
   that contains other styled Dynamic Forms tables.
   ======================================================= */

#DynamicFormPanel table.df-table-stack {
  width: 100% !important;
  max-width: var(--df-row-max-width);
  margin: 0 auto 10px auto !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#DynamicFormPanel table.df-table-stack > tbody > tr > td {
  padding: 0 !important;
  vertical-align: top !important;
}

#DynamicFormPanel table.df-table-stack > tbody > tr > td > table.df-row,
#DynamicFormPanel table.df-table-stack > tbody > tr > td > table.df-row-intro,
#DynamicFormPanel table.df-table-stack > tbody > tr > td > table.df-row-section,
#DynamicFormPanel table.df-table-stack > tbody > tr > td > table.df-row-signature,
#DynamicFormPanel table.df-table-stack > tbody > tr > td > table.df-row-intro-gold,
#DynamicFormPanel table.df-table-stack > tbody > tr > td > table.df-row-section-gold {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 4px !important;
}

#DynamicFormPanel table.df-table-stack.df-stack-tight > tbody > tr > td > table.df-row,
#DynamicFormPanel table.df-table-stack.df-stack-tight > tbody > tr > td > table.df-row-intro,
#DynamicFormPanel table.df-table-stack.df-stack-tight > tbody > tr > td > table.df-row-section,
#DynamicFormPanel table.df-table-stack.df-stack-tight > tbody > tr > td > table.df-row-signature,
#DynamicFormPanel table.df-table-stack.df-stack-tight > tbody > tr > td > table.df-row-intro-gold,
#DynamicFormPanel table.df-table-stack.df-stack-tight > tbody > tr > td > table.df-row-section-gold {
  margin-bottom: 0 !important;
}

/* =======================================================
   Accounting-style expense grid

   Use with df-row on spreadsheet-like expense tables.
   Custom CSS Classes: df-row df-expense-grid
   ======================================================= */

#DynamicFormPanel table.df-expense-grid {
  width: 100% !important;
  max-width: var(--df-row-max-width) !important;
  table-layout: fixed !important;
}

#DynamicFormPanel table.df-expense-grid td {
  padding: 8px 7px !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

#DynamicFormPanel table.df-expense-grid td:first-child {
  width: auto !important;
}

#DynamicFormPanel table.df-expense-grid input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 38px !important;
  padding: 7px 9px !important;
}

#DynamicFormPanel table.df-expense-grid input.right-align-number,
#DynamicFormPanel table.df-expense-grid .right-align-number input,
#DynamicFormPanel table.df-expense-grid td:nth-child(n+4) input[type="text"] {
  text-align: right !important;
}

#DynamicFormPanel table.df-expense-grid td:nth-child(1) {
  width: 10% !important;
}

#DynamicFormPanel table.df-expense-grid td:nth-child(2),
#DynamicFormPanel table.df-expense-grid td:nth-child(3) {
  width: 11% !important;
}

#DynamicFormPanel table.df-expense-grid td:nth-child(4),
#DynamicFormPanel table.df-expense-grid td:nth-child(5),
#DynamicFormPanel table.df-expense-grid td:nth-child(9),
#DynamicFormPanel table.df-expense-grid td:nth-child(10) {
  width: 9% !important;
}

#DynamicFormPanel table.df-expense-grid td:nth-child(6),
#DynamicFormPanel table.df-expense-grid td:nth-child(7),
#DynamicFormPanel table.df-expense-grid td:nth-child(8) {
  width: 8% !important;
}

.df-tight-pairs.df-tight-pairs-narrow td:first-child,
.df-pairs.df-pairs-narrow td:first-child {
  width: 115px !important;
  max-width: 115px !important;
}

.df-tight-pairs.df-tight-pairs-wide td:first-child,
.df-pairs.df-pairs-wide td:first-child {
  width: 170px !important;
  max-width: 170px !important;
}

.df-tight-pairs.df-tight-pairs-wider td:first-child,
.df-pairs.df-pairs-wider td:first-child {
  width: 200px !important;
  max-width: 200px !important;
}

/* Mobile safety net.
   Dynamic Forms mobile may rebuild table rows without preserving custom row
   classes, so keep this limited to stable form controls and Select2 wrappers. */
@media (max-width: 768px) {
  #DynamicFormPanel input[type="text"],
  #DynamicFormPanel input[type="email"],
  #DynamicFormPanel input[type="tel"],
  #DynamicFormPanel input[type="number"],
  #DynamicFormPanel input[type="date"],
  #DynamicFormPanel input[type="password"],
  #DynamicFormPanel select,
  #DynamicFormPanel textarea,
  #DynamicFormPanel .select2-container,
  #DynamicFormPanel .df-program-select,
  #DynamicFormPanel .df-dropdown-select,
  #DynamicFormPanel .df-dropdown-select-wide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}