@media screen and (max-width: 1024px) {
  :host ::ng-deep {
    .FormOverView.scrollbar {
      // No width override here on purpose. The global .FormOverView (styles.scss) carries
      // `margin: 8px 12px 12px 12px`, so `width: 100%` makes the box 24px WIDER than its
      // parent - margins sit outside the box and box-sizing cannot absorb them. Leaving
      // width at auto makes a block element fill the parent minus its own margins, which
      // is what is wanted, and keeps the form free of horizontal overflow.
      max-width: 100% !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }

    gb-newpicklist {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .adjacentField {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      // .adjacentField carries `margin-right: 20px` (gbcommonstyle.scss) to gutter fields
      // that sit side by side. Once the fields are stacked at width: 100% that gutter has
      // nothing to separate, and 100% + 20px makes every field overflow .FormOverView.
      margin-right: 0 !important;
    }

    app-gb-formgrid,
    gb-formgrid {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      box-sizing: border-box !important;
    }
  }
}

@media screen and (max-width: 599px) {
  :host ::ng-deep {
    .FormOverView.scrollbar {
      // See the note in the 1024px block: no width override, the 12px side margins from
      // the global rule already inset it correctly.
      max-width: 100% !important;
      box-sizing: border-box !important;
      padding: 0 12px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    .FormOverView > div,
    .FormOverView > div[style*='flex'],
    .FormOverView > div[style*='display: flex'] {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      box-sizing: border-box !important;
    }

    gb-newpicklist {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      margin-bottom: 8px !important;
    }

    gb-newpicklist input,
    gb-newpicklist select,
    gb-newpicklist .mat-select,
    gb-newpicklist .form-control,
    gb-newpicklist > div,
    gb-newpicklist * {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .adjacentField {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      // See the note in the 1024px block - 100% + the 20px desktop gutter overflows.
      margin-right: 0 !important;
    }
    app-gb-formgrid,
    gb-formgrid {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box !important;
    }

    app-gb-formgrid table,
    gb-formgrid table {
      min-width: 100%;
    }

    .modal .modal-content {
      width: 95vw !important;
      max-width: 95vw !important;
      margin: 0 auto;
    }

    .modal .gridOver {
      overflow-x: auto;
    }
  }
}

:host {
  display: block;
  max-width: 100%;
  overflow-x: hidden;
}