@media (max-width: 1023px) and (min-width: 600px) {
  .FormOverView {
    padding: 12px;

    & > div[style*="display: flex"] {
      flex-wrap: wrap;
      gap: 10px;

      & > gb-newpicklist:first-child,
      & > div[style*="margin-left"] {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
        max-width: calc(50% - 10px);
      }
    }

    ::ng-deep {
      gb-newpicklist {
        display: block;
        width: 100%;

        .mat-mdc-text-field-wrapper,
        .mdc-text-field,
        .mat-mdc-form-field,
        .mat-form-field {
          width: 100% !important;
          min-width: unset !important;
          max-width: 100% !important;
        }

        .mat-mdc-form-field-infix,
        .mat-form-field-infix {
          width: 100% !important;
          min-width: 0 !important;
        }

        input.mat-mdc-input-element,
        input.mdc-text-field__input,
        input[id^="mat-input"] {
          width: 100% !important;
          min-width: 0 !important;
          box-sizing: border-box !important;
        }

        .mat-mdc-form-field-icon-suffix,
        .mat-form-field-suffix {
          display: flex !important;
          align-items: center !important;
          flex-shrink: 0 !important;
          width: auto !important;
        }
      }
    }
  }
}

@media (max-width: 599px) {
  .FormOverView {
    padding: 8px;

    & > div[style*="display: flex"] {
      flex-direction: column;
      gap: 8px;

      & > gb-newpicklist:first-child,
      & > div[style*="margin-left"] {
        margin-left: 0 !important;
      }
    }

    & > gb-newpicklist:last-child {
      margin-top: 8px;
    }

    ::ng-deep {
      gb-newpicklist {
        display: block;

        .mat-mdc-form-field,
        .mat-form-field {
          width: 65vw !important;
          min-width: unset !important;
          max-width: 65vw !important;
        }

        .mat-mdc-text-field-wrapper,
        .mdc-text-field {
          width: 100% !important;
          min-width: unset !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }

        .mat-mdc-form-field-infix,
        .mat-form-field-infix {
          width: 100% !important;
          min-width: 0 !important;
          flex: 1 1 auto !important;
          overflow: hidden !important;
        }

        input.mat-mdc-input-element,
        input.mdc-text-field__input,
        input[id^="mat-input"] {
          width: 100% !important;
          min-width: 0 !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }

        .mat-mdc-form-field-icon-suffix,
        .mat-form-field-suffix {
          display: flex !important;
          visibility: visible !important;
          opacity: 1 !important;
          align-items: center !important;
          flex-shrink: 0 !important;
          width: auto !important;
          overflow: visible !important;
        }
      }

      gb-formaction {
        .form-action-bar,
        .action-bar,
        .gb-action-bar {
          flex-wrap: wrap;
          gap: 6px;

          button {
            flex: 1 1 auto;
            min-width: 80px;
          }
        }
      }
    }
  }
}