.gb-instrument-form {

  .FormOverView {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px 12px;
    gap: 32px;
    width: 100%; /* Fixes scrollbar by allowing container to fill screen width */
    min-height: 620px;
    background: #F9FAFB;
    border-radius: 0px;
  }

  .gb-instrument-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    align-self: flex-start; /* Align to left */
    width: 100%;
    max-width: 960px; /* Constrain grid width so it doesn't fill the whole container */
    column-gap: 28px;
    row-gap: 20px;
    align-items: end;

    grid-template-areas:
      "name        type       account"
      "posting     validity   bank"
      "postdated   postdated  counter"
      "status      .          ."
      "ou          .          ."
      "ougroup     .          .";
  }

  .area-name      { grid-area: name; }
  .area-type      { grid-area: type; }
  .area-account   { grid-area: account; }
  .area-posting   { grid-area: posting; }
  .area-validity  { grid-area: validity; max-width: 160px; }
  .area-bank      { grid-area: bank; }
  .area-postdated { grid-area: postdated; }
  .area-counter   { grid-area: counter; }
  .area-status    { grid-area: status; }
  .area-ou        { grid-area: ou; }
  .area-ougroup   { grid-area: ougroup; }

  .gb-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  // Checkbox/radio rows without their own label need to nudge down
  // to sit level with the labeled field beside them
  .area-bank, .area-counter {
    padding-top: 20px;
  }

  @media (max-width: 1100px) {
    .gb-instrument-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "name        type"
        "account     validity"
        "posting     bank"
        "postdated   postdated"
        "counter     status"
        "ou          ougroup";
    }
    .area-bank, .area-counter {
      padding-top: 0;
    }
  }

  @media (max-width: 700px) {
    .gb-instrument-grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "name"
        "type"
        "account"
        "posting"
        "validity"
        "bank"
        "postdated"
        "counter"
        "status"
        "ou"
        "ougroup";
    }
  }

  ::ng-deep {
    gb-newpicklist, gb-combobox, gb-input, gb-radiobutton, gb-checkbox {
      display: block !important;
      width: 100% !important;
    }
    label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 6px;
    }
    .mat-radio-group, .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }
  }
}