angular2: style md-dialog - html

Question

i am trying to style md-dialog to be as in image1
Image 1
image 1 css class :
.mat-dialog-container {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
display: block;
padding: 24px;
border-radius: 2px;
box-sizing: border-box;
overflow: hidden;
background: white;
width: 500px;
height: 162px;
}
but the browser overrides my style i always find that the browser apply this css class to the component and override my style
.mat-dialog-container {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
display: block;
padding: 24px;
border-radius: 2px;
box-sizing: border-box;
overflow: auto;
max-width: 80vw;
width: 100%;
height: 100%;
}
so the dialog be like image 2 :
Image 2
i added my style to the css file as mat-dialog-container and also i named it as host like this
host:{
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
display: block;
padding: 24px;
border-radius: 2px;
box-sizing: border-box;
overflow: hidden;
background: white;
width: 500px;
height: 162px;
}
but it is always get overridden
the name of my dialog is discard-pop-up and the code is as following :
discard-pop-up.component.html :
<h1 md-dialog-title>Discard Changes</h1>
<div md-dialog-content>Are you sure you want to discard changes ?</div>
<div md-dialog-actions>
<button md-button (click)="dialogRef.close('Option 1')">Yes</button>
<button md-button (click)="dialogRef.close('Option 2')">No</button>
</div>
discard-pop-up.component.ts :
import { Component, OnInit } from '#angular/core';
import {MdDialog, MdDialogRef} from '#angular/material';
#Component({
selector: 'app-discard-pop-up',
templateUrl: './discard-pop-up.component.html',
styleUrls: ['./discard-pop-up.component.css']
})
export class DiscardPopUpComponent implements OnInit {
popUpContent:string;
popUpTitle:string;
constructor(public dialogRef: MdDialogRef<DiscardPopUpComponent>) {}
ngOnInit() {
}
}
discard-pop-up.component.css :
.mat-dialog-container {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
display: block;
padding: 24px;
border-radius: 2px;
box-sizing: border-box;
overflow: hidden;
background: white;
width: 500px;
height: 162px;
}
and i am oppining it inside another component by calling this function :
openDialog() {
let dialogRef = this.dialog.open(DiscardPopUpComponent, {
// padding: '24px',
// border-radius: '2px',
// box-sizing: 'border-box',
// overflow: 'hidden',
// width: '542px',
// height: '160px',
// background: 'white',
});
dialogRef.afterClosed().subscribe(result => {
this.selectedPopUpOption = result;
});
}
}