How to style Angular Material select drop down overlay

I have an angular component called currency-selector which has its own css file that looks like this:

.currency-select {
    position: absolute;
    top: 5px;
    right: 80px;
    z-index: 1000000;
    color: #DD642A;
    font-size: 17px;
    padding-right: 16px;
    width: 130px;
}

.mat-form-field {
    display: block;
}

This works exactly as expected for the selector until it is clicked and the drop down happens. The html is as follows:

<div class="currency-select">
  <mat-form-field *ngIf=loaded>
    <mat-select [formControl]="currencyForm" placeholder="Select Currency">
      <select-search (search)="filterCurrencyOptions($event)" #selectSearch (keydown)="$event.stopPropagation()">
      </select-search>
      <mat-option *ngFor="let currency of filteredCurrencies" [value]="currency.counter_currency_code" (click)="updateCurrency()">
          <flag-icon country="{{ (currency.counter_currency_iso_2 || '').toLowerCase() }}"></flag-icon>  {{currency.counter_currency_code}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

When I click on the currency select, the drop down doesn't appear how I want it to appear and I can't seem to add anything in the currency-select.component.html file to alter it, instead it seems to take the styling from a different div tag, "cdk-overlay-container".

Can anyone advise as to how I can write the css for this in the currency-select css file? I've tried using !important but this isn't working eithher.