.FormSection {
    overflow: auto;
    background-color: #FFFFFF;
    margin: 0px 8px;
    padding: 10px;
    border-radius: 8px;
}


@media (max-width: 767px) {

  :host ::ng-deep {

    .FormOverView {
      max-width: 100vw !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }

    .FormSection {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 4px 12px 4px !important;
      padding: 8px !important;
    }

    .FormSection[style*="overflow"] {
      height: auto !important;
      max-height: none !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

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

    gb-combobox .ExpandedViewContainer > div[style*="display: flex"],
    gb-combobox .ExpandedViewContainer > div[style*="display:flex"],
    gb-input > div > div[style*="display: flex"],
    gb-input > div > div[style*="display:flex"],
    gb-newpicklist > div > div[style*="display: flex"],
    gb-newpicklist > div > div[style*="display:flex"] {
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
    }

    .ExpandedViewWrapper,
    gb-combobox .ExpandedViewContainer > div > div:first-child,
    gb-input > div > div > div:first-child {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
      margin-bottom: 8px !important;
    }

    .ExpandedViewDescription {
      width: 100% !important;
      max-width: 100% !important;
    }

    gb-newpicklist .Mat_Form_Field,
    gb-combobox .Mat_Form_Field,
    gb-input .Mat_Form_Field {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    gb-newpicklist .Mat_Form_Field input,
    gb-newpicklist .Mat_Form_Field .mat-mdc-select,
    gb-newpicklist .Mat_Form_Field span,
    gb-combobox .Mat_Form_Field .mat-mdc-select,
    gb-input .Mat_Form_Field input {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    gb-newpicklist .mat-mdc-text-field-wrapper,
    gb-combobox .mat-mdc-text-field-wrapper,
    gb-input .mat-mdc-text-field-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    gb-newpicklist > div > div > div[style*="position: relative"],
    gb-input > div > div > div[style*="position: relative"] {
      display: block !important;
      width: 100% !important;
    }

    .formlabel {
      width: 100% !important;
      white-space: normal !important;
      word-break: break-word !important;
    }

    gb-newpicklist mat-icon,
    gb-combobox mat-icon,
    gb-input mat-icon {
      width: auto !important;
      flex-shrink: 0 !important;
    }

    gb-newpicklist span[style*="display: inline-flex"],
    gb-newpicklist span[style*="display:inline-flex"] {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      width: 100% !important;
    }

    .adjacentField {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

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


@media (min-width: 768px) and (max-width: 991px) {

  :host ::ng-deep {

    .FormOverView {
      max-width: 100vw !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }

    .FormSection {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .FormSection[style*="overflow"] {
      height: auto !important;
      max-height: none !important;
      overflow-x: hidden !important;
    }

    gb-combobox .ExpandedViewContainer > div[style*="display: flex"],
    gb-combobox .ExpandedViewContainer > div[style*="display:flex"],
    gb-input > div > div[style*="display: flex"],
    gb-input > div > div[style*="display:flex"],
    gb-newpicklist > div > div[style*="display: flex"],
    gb-newpicklist > div > div[style*="display:flex"] {
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
    }

    .ExpandedViewWrapper,
    gb-combobox .ExpandedViewContainer > div > div:first-child,
    gb-input > div > div > div:first-child {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
      margin-bottom: 8px !important;
    }

    .ExpandedViewDescription {
      width: 100% !important;
      max-width: 100% !important;
    }

    gb-newpicklist .Mat_Form_Field,
    gb-combobox .Mat_Form_Field,
    gb-input .Mat_Form_Field {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    gb-newpicklist .mat-mdc-text-field-wrapper,
    gb-combobox .mat-mdc-text-field-wrapper,
    gb-input .mat-mdc-text-field-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

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

    .adjacentField {
      max-width: 48% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
  }
}