/* =======================================================
   Stanly Community College - Dynamic Forms HRD CSS
   Purpose: compact, plain styling for HRD-style one-page forms.

   This is intentionally lighter than DF-Wide.css:
     - flatter rows
     - smaller field padding
     - less rounded/card styling
     - common helper classes kept for compatibility
   ======================================================= */

:root {
  --scc-blue: #00447B;
  --scc-gold: #E1AF00;
  --scc-gold-dark: #b88a00;
  --scc-gray: #4E4A4E;
  --scc-border: #d7dde3;
  --scc-light-gray: #f6f8fa;
  --scc-white: #ffffff;
  --scc-error: #d9534f;

  --df-page-padding: 2px;
  --df-panel-max-width: 1120px;
  --df-panel-pad-x: 6px;
  --df-panel-pad-y: 4px;
  --df-content-max-width: 1100px;
  --df-row-max-width: 1100px;

  --df-text: #111827;
  --df-text-muted: #4b5563;
  --df-row-bg: #ffffff;
  --df-row-border: #dfe5eb;
  --df-input-border: #bfc7cf;
  --df-input-hover: #8da3b8;
  --df-focus-ring: rgba(0, 68, 123, 0.15);

  --df-font: Arial, "Segoe UI", sans-serif;
}

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(--df-font);
}

#DynamicFormPanel {
  max-width: var(--df-panel-max-width);
  margin: 10px auto 0 auto !important;
  padding: var(--df-panel-pad-y) var(--df-panel-pad-x);
  background: var(--scc-white);
  border: 1px solid #e2e8ee;
  border-radius: 2px;
  box-shadow: none;
  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,
#formnavbuttons button {
  font-family: var(--df-font) !important;
}

#DynamicFormPanel,
#DynamicFormPanel td,
#DynamicFormPanel div,
#DynamicFormPanel span,
#DynamicFormPanel label,
#DynamicFormPanel p {
  color: var(--df-text);
  font-size: 13px;
  line-height: 1.25;
}

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

#DynamicFormPanel h1,
#DynamicFormPanel h2,
#DynamicFormPanel h3,
#DynamicFormPanel h4,
.df-form-title,
.df-section-title {
  color: #111827;
  font-family: var(--df-font) !important;
  font-weight: 700;
  letter-spacing: 0;
}

#DynamicFormPanel p {
  margin: 0 0 8px 0;
}

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

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

#FillingOut #Required,
#FillingOut .formConditionDisplay > span {
  display: inline-block !important;
  max-width: 420px;
  margin: 0 0 6px 0;
  padding: 5px 8px;
  background: #ffffff;
  color: var(--df-text) !important;
  border: 1px solid var(--scc-border);
  border-left: 3px solid var(--scc-error);
  border-right: 3px solid var(--scc-error);
  border-radius: 2px;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  text-align: center;
}

/* Header/title rows */
.df-form-header {
  width: 100%;
  max-width: var(--df-content-max-width);
  margin: 0 auto 10px auto !important;
  border-collapse: collapse;
}

.df-form-header td {
  padding: 4px 6px;
  vertical-align: middle;
}

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

.df-form-header td:last-child,
.df-form-title-row td {
  color: #111827 !important;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

/* Plain compact row classes */
.df-row,
.df-row-intro,
.df-row-section,
.df-row-signature,
.df-row-intro-gold,
.df-row-section-gold {
  width: 100%;
  max-width: var(--df-row-max-width);
  margin: 0 auto 6px auto !important;
  background: var(--df-row-bg);
  border: 1px solid var(--df-row-border);
  border-radius: 2px;
  border-collapse: separate;
  border-spacing: 0;
}

.df-row td,
.df-row-intro td,
.df-row-section td,
.df-row-signature td,
.df-row-intro-gold td,
.df-row-section-gold td {
  padding: 5px 7px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  color: var(--df-text);
}

.df-row td:first-child,
.df-row-intro td:first-child,
.df-row-section td:first-child,
.df-row-signature td:first-child {
  white-space: nowrap;
}

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

.df-row-intro td,
.df-row-signature td {
  line-height: 1.35;
}

.df-row-section {
  background: #edf2f7;
}

.df-row-section td {
  color: #16324f;
  font-weight: 700;
}

.df-row-intro-gold {
  background: #fbf8ed;
  border-left: 3px solid var(--scc-gold-dark) !important;
  border-right: 3px solid var(--scc-gold-dark) !important;
}

.df-row-section-gold {
  background: #f7edc4;
}

.df-row-section-gold td {
  color: #403200;
  font-weight: 700;
}

/* Keep text and controls at the surrounding compact row size. */
.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;
}

.df-row-section-contrast {
  background: #dfeaf3 !important;
}

.df-row-section-contrast-strong {
  background: #cfdeeb !important;
}

.df-row-intro-contrast {
  background: #eef4f9 !important;
  border-left-color: #003761 !important;
  border-right-color: #003761 !important;
}

.df-row-intro-contrast-strong {
  background: #dfeaf3 !important;
  border-left-color: #003761 !important;
  border-right-color: #003761 !important;
}

.df-row-section-gold-contrast {
  background: #efd775 !important;
}

.df-row-section-gold-contrast-soft {
  background: #f2e4a4 !important;
}

.df-row-intro-gold-contrast {
  background: #f4e4a5 !important;
  border-left-color: var(--scc-gold-dark) !important;
  border-right-color: var(--scc-gold-dark) !important;
}

.df-row-intro-gold-contrast-soft {
  background: #f7ecc2 !important;
  border-left-color: var(--scc-gold-dark) !important;
  border-right-color: var(--scc-gold-dark) !important;
}

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

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

.df-row-tight-after {
  margin-bottom: 2px !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;
}

.df-muted-cell td,
.df-muted-cell td:last-child {
  color: var(--df-text-muted);
  font-weight: 500;
  line-height: 1.35;
}

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

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

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

/* Compact fields */
#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 {
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid var(--df-input-border);
  border-radius: 2px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 400;
}

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

#DynamicFormPanel input[type="text"]:hover,
#DynamicFormPanel input[type="email"]:hover,
#DynamicFormPanel input[type="tel"]:hover,
#DynamicFormPanel input[type="number"]:hover,
#DynamicFormPanel input[type="date"]: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="email"]:focus,
#DynamicFormPanel input[type="tel"]:focus,
#DynamicFormPanel input[type="number"]:focus,
#DynamicFormPanel input[type="date"]:focus,
#DynamicFormPanel input[type="password"]:focus,
#DynamicFormPanel select:focus,
#DynamicFormPanel textarea:focus {
  outline: none;
  border-color: var(--scc-blue);
  box-shadow: 0 0 0 2px var(--df-focus-ring);
}

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

#DynamicFormPanel input[type="checkbox"],
#DynamicFormPanel input[type="radio"] {
  margin-right: 5px;
  vertical-align: middle;
}

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

#DynamicFormPanel button[id^="attachFile_"] {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #9aa7b4;
  border-radius: 2px;
  background: #f3f4f6;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#DynamicFormPanel button[id^="attachFile_"]:hover,
#DynamicFormPanel button[id^="attachFile_"]:focus {
  background: #e5e7eb;
  border-color: #6b7280;
  outline: none;
}

/* Optional secondary action button. */
#formnavbuttons .df-button-secondary,
#DynamicFormPanel .df-button-secondary {
  background: var(--scc-gray) !important;
  border-color: var(--scc-gray) !important;
}

/* Tight label/input pairs.
   Preferred use: df-row df-pairs
   Legacy alias: df-tight-pairs
   Width modifiers: df-pairs-narrow, df-pairs-wide, df-pairs-wider */
.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: 8px !important;
  white-space: nowrap;
}

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

.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.
   Use: 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: 8px !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 {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

/* Three label/input pairs in one row.
   Use: 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 {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

/* Choice/table helpers */
.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;
  padding: 4px 8px !important;
  white-space: normal !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 5px 0 0 !important;
}

.df-checkbox-list {
  width: 100% !important;
  table-layout: fixed !important;
}

.df-checkbox-list td {
  padding: 4px 6px !important;
  vertical-align: middle !important;
}

.df-checkbox-list td:nth-child(1),
.df-checkbox-list td:nth-child(3) {
  width: 34px !important;
  max-width: 34px !important;
  text-align: center !important;
}

.df-checkbox-list td:nth-child(2),
.df-checkbox-list td:nth-child(4) {
  width: calc((100% - 68px) / 2) !important;
}

.df-checkbox-list input[type="checkbox"],
.df-checkbox-list input[type="radio"] {
  margin: 0 !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;
}

.df-checkbox-three-pairs {
  width: 100% !important;
  table-layout: fixed !important;
}

.df-checkbox-three-pairs td {
  padding: 4px 5px !important;
  vertical-align: middle !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: 34px !important;
  max-width: 34px !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% - 102px) / 3) !important;
}

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

/* Select width helpers */
.df-program-select {
  width: 100% !important;
  max-width: 100% !important;
}

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

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

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

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

/* Select2, if Dynamic Forms uses it for dropdowns */
.select2-container {
  max-width: 100% !important;
}

.select2-container--default .select2-selection--single {
  min-height: 28px;
  border: 1px solid var(--df-input-border);
  border-radius: 2px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 26px;
  color: #111827;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  min-height: 26px;
}

/* Number alignment helpers */
#DynamicFormPanel input.right-align-number,
#DynamicFormPanel .right-align-number input {
  text-align: right !important;
}

#DynamicFormPanel input.left-align-number,
#DynamicFormPanel .left-align-number input {
  text-align: left !important;
}

/* Table stack helper */
#DynamicFormPanel table.df-table-stack {
  width: 100% !important;
  max-width: var(--df-row-max-width);
  margin: 0 auto 6px 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: 3px !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 */
#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: 5px 4px !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

#DynamicFormPanel table.df-expense-grid input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 28px !important;
  padding: 4px 6px !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;
}

/* Recaptcha centering */
.g-recaptcha,
#DynamicFormPanel .g-recaptcha,
#FillingOut .g-recaptcha {
  width: 304px !important;
  max-width: 100% !important;
  margin: 10px auto 8px auto !important;
}

.g-recaptcha > div,
#DynamicFormPanel .g-recaptcha > div,
#FillingOut .g-recaptcha > div,
iframe[src*="recaptcha"],
iframe[title*="reCAPTCHA"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#formnavbuttons {
  max-width: var(--df-panel-max-width);
  margin: 8px auto 20px auto !important;
  padding: 8px 0;
  text-align: center;
}

@media (max-width: 768px) {
  body {
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-text-size-adjust: 100%;
  }

  #DynamicFormPanel {
    width: auto !important;
    max-width: none !important;
    margin: 8px 6px 0 6px !important;
    padding: 10px 8px !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-bottom: 8px !important;
    text-align: center !important;
  }

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

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

  .df-row,
  .df-row-intro,
  .df-row-section,
  .df-row-signature,
  .df-row-intro-gold,
  .df-row-section-gold {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 5px auto !important;
  }

  .df-row td,
  .df-row-intro td,
  .df-row-section td,
  .df-row-signature td,
  .df-row-intro-gold td,
  .df-row-section-gold td {
    display: block !important;
    width: 100% !important;
    padding: 5px 7px !important;
    white-space: normal !important;
  }

  #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 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 34px !important;
    font-size: 16px !important;
  }

  #formnavbuttons {
    width: auto !important;
    max-width: none !important;
    margin: 8px 6px 16px 6px !important;
  }
}

/* Remove the faint outer panel rectangle from PDF/print export only. */
@media print {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  #DynamicFormPanel {
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}