p {
    color: var(--action-primary-default);
    /* Icon and text color */
    font-family: Helvetica !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;

}

.field-description {
    font-size: 12px;
    color: #1A1A1ADE;
    /* Bootstrap gray */
    margin-bottom: 12px;
    margin-top: 4px;
}

// ── Tab group base ────────────────────────────────────────────────────────────
.FormsTabGroup {
  margin-bottom: 20px;
}

// ── DESKTOP > 768px: tighten the two-column layout ───────────────────────────
@media (min-width: 769px) {

  // Target every direct flex div inside each tab content
  .FormsTab,
  mat-tab-body {

    // The outer flex container (two columns side by side)
    > div[style*="display: flex"],
    div[style*="display: flex"] {
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-start !important;
      gap: 24px !important;
      flex-wrap: wrap;

      // Each column div
      > div[style] {
        flex: 1 1 0 !important;
        min-width: 280px !important; // override inline min-width
        max-width: 100% !important;
        margin-right: 0 !important;  // override inline margin-right
        margin-top: 0 !important;    // override inline margin-top

        // All fields inside column fill full column width
        > gb-input,
        > gb-newpicklist,
        > gb-combobox,
        > gb-radiobutton,
        > gb-checkbox,
        > gb-textarea,
        > gb-date,
        > gb-time {
          display: block;
          width: 100% !important;
        }
      }
    }
  }
}

// ── MOBILE ≤ 768px: stack columns, full width fields ─────────────────────────
@media (max-width: 768px) {

  .FormOverView {
    padding: 8px !important;
  }

  // Mat tab labels scroll horizontally on small screens
  ::ng-deep .mat-mdc-tab-header {
    overflow-x: auto !important;
  }

  ::ng-deep .mat-mdc-tab-label-container {
    overflow-x: auto !important;
  }

  // Stack the two columns vertically
  div[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    // Each inner column div: full width, reset inline styles
    > div[style] {
      flex: unset !important;
      width: 100% !important;
      min-width: unset !important;   // kill inline min-width: 450px / 420px
      max-width: 100% !important;
      margin-right: 0 !important;    // kill inline margin-right: 36px
      margin-top: 0 !important;      // kill inline margin-top: 22px

      // All fields inside column: full width
      > gb-input,
      > gb-newpicklist,
      > gb-combobox,
      > gb-radiobutton,
      > gb-checkbox,
      > gb-textarea,
      > gb-date,
      > gb-time {
        display: block;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }
  }

  // Delivery & Logistics tabs have 3 columns — same treatment
  div[style*="display: flex"] > div[style]:nth-child(3) {
    margin-top: 0 !important;
  }
}

// ── Extra small ≤ 480px ───────────────────────────────────────────────────────
@media (max-width: 480px) {

  .FormOverView {
    padding: 4px !important;
  }

  p {
    font-size: 13px;
  }
}