primeng p-toast css not working - angular 14

I am working on an angular app and want to include p-toast. the version of primeNg I am using are "primeicons": "^5.0.0", "primeng": "^14.0.2",

My code is setup the following way: app.module.ts

import {ToastModule} from 'primeng/toast';
import { MessageModule } from 'primeng/message';
import { MessagesModule } from 'primeng/messages';
...other stuff

@NgModule({
  declarations: [           
    AppComponent
   ],
  imports: [
    ...
    ToastModule,
    MessageModule,
    MessageModule
  ],
  providers: [MessageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

in my app.component.html

<ng-container *ngIf="appSettings">
  <!-- body -->
  <div id="container-main">
    <div class="container-fluid app-body">
      <router-outlet></router-outlet>
    </div>
    <!-- footer -->
    <div class="app-footer">
      <span>{{appSettings.environment}} - Release {{appSettings.releaseVersion}} - {{appSettings.releaseDate}}</span>
    </div>

  </div>

</ng-container>

<p-toast class="toast-custom" [baseZIndex]="200000"></p-toast>

Now in my various components, I put the following message to show toast

this.messageService.add({severity:'error', summary:'Login failed', detail:'Please check username or password'});

this works but the problem is I do not see css. What am I missing? I expected a red background and a close button or something to the left of Login failed message