CSS не применяется к диалогу угловых материалов

Question

У меня есть диалоговое окно в моем угловом приложении, которое не выполняет команды CSS, работающие в других частях приложения.На моем главном экране у меня есть панель матов, определенная следующим образом (для краткости sidenav не показан):

<div style="height: 100vh;">

  <mat-toolbar color="primary">

    <span class="lg-view" fxHide.lt-md>
      <b class="cawg">CAWG</b>&nbsp;&nbsp;
      <b class="cawg-header">T</b><span class="cawg-text">racking and </span>
      <b class="cawg-header">R</b><span class="cawg-text">emote&nbsp;</span>
      <b class="cawg-header">A</b><span class="cawg-text">ircraft&nbsp;    </span> 
      <b class="cawg-header">C</b><span class="cawg-text">ommunication&nbsp;    </span>
      <b class="cawg-header">S</b><span class="cawg-text">ystem (TRACS)     </span>
      <span class="cawg-text">3.0</span>

            <b class="cawg-text">TRACS3</b>
      </span>

    <span class="flex-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item (click)="realTimeTracking()">
          <mat-icon>airplanemode_active</mat-icon>
          <span>Real-time Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
          <span>Historical Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_on</mat-icon>
          <span>Display Grids</span>
        </button>
        <button mat-menu-item>
          <mat-icon>airplanemode_inactive</mat-icon>
          <span>Stop Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_off</mat-icon>
          <span>Grids Off</span>
        </button>
    </mat-menu>
    <button mat-icon-button  class="d-none d-sm-inline">
        <a [routerLink]="'/settings'"><mat-icon>settings</mat-icon></a>
    </button>
    <button mat-icon-button routerLink="chat" class="d-none d-sm-inline">
      <mat-icon>chat_bubble_outline</mat-icon>
    </button>
    <button mat-icon-button routerLink="reportIssue" class="d-none d-sm-inline">
      <mat-icon>bug_report</mat-icon>
    </button>
    <button mat-icon-button routerLink="about" class="d-none d-sm-inline">
      <mat-icon>info</mat-icon>
    </button>
    <button mat-button routerLink="login" class="nav-button">
      Sign In
    </button>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()"><mat-icon aria-label="Side nav toggle icon" >menu</mat-icon></a>

    </div>

  </mat-toolbar>
... 

Затем появляется диалоговое окно

<mat-toolbar  color="primary" class="dialog-toolbar">
  <span align="center">Real-time Tracking</span>
  <span class="flex-spacer"></span>
  <button mat-button mat-dialog-close>&times;</button>
</mat-toolbar>

<mat-dialog-content >

  <mat-form-field>
    <label>Date/Time Range
      <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
         [selectMode]="'range'" style="width: 70%">
      <owl-date-time #dt10></owl-date-time>
    </label>
  </mat-form-field>
</mat-dialog-content>

<mat-dialog-actions align="center">
  <button class="mat-raised-button"(click)="close()">Close</button>
  <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>

Диалог открывается в навигационной панели:

  constructor(
    private breakpointObserver: BreakpointObserver, 
    private dialog: MatDialog){}


  realTimeTracking() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.hasBackdrop = true;
    dialogConfig.width = '60%';
    dialogConfig.panelClass = "dialog-toolbar";
    dialogConfig.data = {
      title: "Real-time Tracking"
    };

    console.log('real-time tracking, dialogConfig.data:', dialogConfig);

    this.dialog.open(DialogsComponent, dialogConfig );

  };

И пытается применить к нему следующую CSS:

.dialog-toolbar {
  mat-toolbar {
    flex: 1 1 auto;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 10px;
    border: 1px solid red;
  }
}

.flex-spacer {
  flex: 1 1 auto;
}

А вот скриншот того, как он выглядит:

По какой-то причине применяется красная граница, но я не могу получить панель заголовка равной 100% ширины диалога.Я попробовал 100%, 600px, flex.100% прекрасно работает в основном заголовке, но не здесь.Ничто не вставит пробел между строкой «Отслеживание в реальном времени» и кнопкой «x», чтобы закрыть диалоговое окно.«Flex 1 1 auto» прекрасно работает для отделения кнопок от «3.0» в главном заголовке, но не работает в заголовке диалога.Почему?

Answer 1

:: ng-deep .mat-dialog-container {

вставить сюда css