.FilterBtn {
  // display: flex;
  // align-items: center;
  // padding: 6px 16px;
  // font-weight: bold;
  // border-radius: 4px;
  // background-color: #6E3AB6;
  // color:white;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  width: 220px;
  height: 40px;
  border: 1px solid #818181;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  background-color: var(--action-primary-default);
  color: #ffffff;
  border: none;
  box-shadow: -1px 2px 2px 0px #00000026;
  font-weight: 600;
}

@media (max-width: 767px) {
  :host ::ng-deep {
    .FormOverView.scrollbar {
      display: flex !important;
      flex-direction: column !important;
      width: 100%;
      overflow-x: hidden;
    }

    .splitdiv {
      display: contents !important;
    }

    .twodiv {
      order: 1;
      width: 100% !important;
      display: block !important;

      gb-newpicklist,
      .mat-form-field,
      .mat-select {
        width: 100% !important;
      }
    }

    gb-newpicklist[formcontrolname='PayPeriodName'] {
      order: 2;
      width: 100% !important;
      display: block !important;
      margin-top: 12px;
    }

    gb-checkbox {
      order: 3;
      display: block !important;
      width: 100% !important;
      margin: 12px 0 8px;
    }

    .FilterBtn {
      order: 4;
      width: 80% !important;
      margin-right: 0 !important;
      margin-top: 4px;
      box-sizing: border-box;
    }

    .sosplit {
      order: 5;
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      width: 100%;
      margin-top: 12px;

      gb-newpicklist,
      gb-checkbox {
        width: 100% !important;
      }

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

    gb-adaddon {
      order: 6;
      display: block;
      width: 80%;
      max-width: 100%;
      margin-top: 12px;
      overflow-x: hidden;

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

      > * {
        width: 100% !important;
      }

      div,
      tr,
      .row,
      td,
      th {
        width: 100% !important;
        display: block !important;
      }

      input,
      select {
        width: 100% !important;
        min-width: 0 !important;
      }

      [style] {
        width: 100% !important;
        max-width: 100% !important;
      }
    }
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  :host ::ng-deep {
    .splitdiv {
      flex-wrap: wrap !important;
      row-gap: 12px;
    }

    .twodiv {
      flex: 1 1 45%;
      min-width: 220px;
    }

    .FilterBtn {
      width: auto !important;
      min-width: 180px;
    }

    .sosplit {
      flex-wrap: wrap !important;
      row-gap: 12px;

      gb-newpicklist {
        flex: 1 1 45%;
        min-width: 200px;
      }
    }

    gb-adaddon {
      max-width: 80%;
      overflow-x: hidden;

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