div gb-date
{
    margin-right: 25px;
}


@media screen and (max-width: 1024px) {

  .FormOverView {
    padding: 0 8px;
  }

  .FormOverView > div[style*="display: flex"]:first-of-type {
    flex-wrap: nowrap !important;
  }

  // .automanual {
  //   padding: 8px 0px 0px 0px !important;
  //   margin-right: 0 !important;
  //   margin-left: 0 !important;
  // }

  .FormOverView > div[style*="display: flex"]:nth-of-type(2) {
    flex-wrap: wrap !important;
    gap: 16px;
  }

  .FormOverView > div[style*="display: flex"]:nth-of-type(2) > div[style*="width: 340px"] {
    width: 100% !important;
    max-width: 480px;
    margin-right: 0 !important;
  }

  .FormOverView > div[style*="display: flex"]:nth-of-type(2) > div:last-child {
    width: 100%;
    max-width: 480px;
  }

  ::ng-deep {
    gb-input,
    gb-date,
    gb-textarea,
    gb-radiobutton {
      display: block;
      width: 100%;
    }
    gb-newpicklist
    {
      display: inline !important; // make the picklist not push the auto or manual span to end
    }
  }
}

@media screen and (max-width: 600px) {

  .FormOverView {
    padding: 0 4px;
  }

  .FormOverView > div[style*="display: flex"]:first-of-type {
    flex-direction: row !important;
  }

  // .automanual {
  //   padding: 4px 0px 12px 0px !important;
  //   margin-right: 0 !important;
  // }

  .FormOverView > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 0;
  }

  .FormOverView > div[style*="display: flex"]:nth-of-type(2) > div[style*="width: 340px"] {
    width: 100% !important;
    max-width: 100%;
    margin-right: 0 !important;
    margin-bottom: 8px;
  }

  .FormOverView > div[style*="display: flex"]:nth-of-type(2) > div:last-child {
    width: 100%;
    max-width: 100%;
  }

  ::ng-deep {
    .adjacentField {
      margin-top: 8px !important;
    }

   
    gb-input,
    gb-date,
    gb-textarea,
    gb-radiobutton {
      display: block;
      width: 100% !important;
      margin-bottom: 4px;
    }

     gb-newpicklist
     {
      display: inline !important;
     }



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

  gb-formaction {
    display: block;
    width: 100%;
  }
}

@media screen and (max-width: 360px) {
  .FormOverView {
    padding: 0 2px;
    overflow-x: hidden !important;
  }

  ::ng-deep {
    gb-newpicklist,
    gb-input,
    gb-date,
    gb-textarea {
      font-size: 13px;
    }

    // .mat-mdc-form-field
    // {
    //     min-width: 330px !important;
    // }

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

    gb-textarea textarea {
      width: 100% !important;
      max-width: 330px !important;
      box-sizing: border-box !important;
      resize: vertical;
    }
  }  
}