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

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

  :host ::ng-deep {

    .FormOverView.scrollbar {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
      padding-right: 12px;
    }

    .FormOverView > div {
      display: flex;
      flex-wrap: wrap;            
      width: 100%;
      max-width: 100%;
      gap: 16px;                   
      box-sizing: border-box;
    }

    .FormOverView > div > div:first-child {
      margin-right: 0 !important;
      flex: 1 1 45%;
      min-width: 260px;
      max-width: 100%;
      box-sizing: border-box;
    }
    .FormOverView > div > div:last-child {
      flex: 1 1 45%;
      min-width: 260px;
      max-width: 100%;
      box-sizing: border-box;
    }
    gb-newpicklist,
    gb-combobox,
    gb-date,
    gb-radiobutton {
      display: block;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;

      input,
      select,
      textarea,
      .mat-select,
      .mat-form-field,
      .mat-select-trigger {
        width: 100% !important;    
        max-width: 100% !important;
        box-sizing: border-box;
      }
    }

    gb-textarea {
      display: block;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;

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

    gb-formaction {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      max-width: 100%;
      row-gap: 8px;

      button {
        flex: 0 1 auto;
        font-size: 13px;
        padding: 6px 10px;
        white-space: nowrap;
      }
    }
  }
}

@media (max-width: 767px) {

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

  :host ::ng-deep {

    .FormOverView.scrollbar {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
      padding: 0 8px;
    }

    .FormOverView > div {
      display: flex;
      flex-direction: column;      
      flex-wrap: nowrap;
      width: 100%;
      max-width: 100%;
      gap: 0;
      box-sizing: border-box;
    }

    .FormOverView > div > div:first-child {
      margin-right: 0 !important; 
      margin-bottom: 12px;
      width: 100%;
      max-width: 100%;
      flex: 1 1 100%;
      box-sizing: border-box;
    }

    .FormOverView > div > div:last-child {
      width: 100%;
      max-width: 100%;
      flex: 1 1 100%;
      box-sizing: border-box;
    }

    gb-newpicklist,
    gb-combobox,
    gb-date,
    gb-radiobutton {
      display: block;
      width: 100%;
      max-width: 100%;
      margin-bottom: 10px;
      box-sizing: border-box;

      label {
        white-space: normal;
        word-break: break-word;
      }

      input,
      select,
      textarea,
      .mat-select,
      .mat-form-field,
      .mat-select-trigger {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14px;
        box-sizing: border-box;
      }
    }

    gb-radiobutton {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    gb-textarea {
      display: block;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;

      textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 90px;
        box-sizing: border-box;
      }
    }

    gb-formaction {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      max-width: 100%;
      row-gap: 6px;
      column-gap: 6px;

      button {
        flex: 1 1 auto;
        min-width: 40px;
        font-size: 12px;
        padding: 6px 8px;
        white-space: nowrap;
      }
    }
  }
}