Коврик datePicker появляется за NgbModal

Question

Я создал модал, который анализирует данные одного из моих компонентов, он позволяет пользователю редактировать цену и дату, я использовал средство выбора даты мата для поля даты, но ошибка, с которой я, похоже, сталкиваюсь, когда я пытаюсь выбрать дату, средство выбора даты появляется за модальным, и я не могу фактически выбрать дату.

Вот мой модал. html:

    <div class="modal-header">
<h3 class="modal-title">Update Supplier Order:</h3>
</div>

<div class="modal-body">


<div class="container">
  <form [formGroup]="form" (ngSubmit)="UpdateQuote()">
    <div class="mat-form-field">
      <input class="invisible" placeholder="quoteId" formControlName="quoteId" value="{{supplierQuote.quoteId}}">

      <input class="invisible" placeholder="supplierId"  formControlName="supplierId" value="{{supplierQuote.supplierId}}" >

      <input class="invisible" placeholder="stockReferenceId"  formControlName="stockReferenceId"  value="{{supplierQuote.stockReferenceId}}" >

      <input class="form-control" placeholder="Price" formControlName="price" [ngClass]="{ 'is-invalid': submitted && f.price.errors }">
    </div>
      <br>
      <div class="form-group">
        <mat-form-field class="mat-form-field">
          <mat-label>Choose an effective date</mat-label>
          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" formControlName="effectiveDate"
                 [ngClass]="{ 'is-invalid': submitted && f.expiryDate.errors }" style="z-index: 99999 !important;"/>
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>


    <div class="form-group">
      <button mat-raised-button id="modal-cancel-button" (click)="activeModal.close(false)"> Cancel </button>
      <button class="btn btn-primary"> Update Supplier Order </button>
    </div>
  </form>
</div>
</div>

<div class="modal-footer">
  <p>This is a footer</p>
</div>

и вот мой modal.ts

    export class ModalOrderComponent implements OnInit {

  supplierQuote: SupplierQuotes;
  dataSource: any[];
  form: FormGroup;

  minDate: Date;
  maxDate: Date;
  submitted = false;

  constructor(public activeModal: NgbActiveModal,  public fb: FormBuilder,private _supplierQuotes: SupplierQuotesService) {

    this.initDates();

    this.form = this.fb.group({
      quoteId: [''],
      supplierId: [''],
      stockReferenceId: [''],
      price: ['', Validators.required],
      effectiveDate: ['', Validators.required]
  })
  }


  initDates() {
    this.minDate = new Date();
    this.maxDate = new Date();


    this.minDate.setDate(this.minDate.getDate() + 1);
    this.maxDate.setDate(this.minDate.getDate() + (365 * 3));


  }

  get f() {
    return this.form.controls;
  }
  ngOnInit() {
    console.log("IN MODAL: " + this.supplierQuote);
  }


  UpdateQuote(){
    this._supplierQuotes.UpdateSupplerQuotes(this.supplierQuote.quoteId,new SupplierQuotes(this.form, this.supplierQuote.quoteId ,this.supplierQuote.supplierId,this.supplierQuote.stockReferenceId)).subscribe(
      (response) => alert(JSON.stringify(response))
    );

  }

Я попробовал следующее CSS, но, похоже, оно не работает:

    .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

::ng-deep .cdk-overlay-container mat-datepicker-content{
  z-index:2000;
}

В данный момент я работаю Angular 8