Reusable modal component: styles.css

styles.css

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: #3a3a3a;
}

/* Overwrite the styles of the mat-dialog-container element globally, but only for those
that have an id of `modal-component` */
/* https://stackoverflow.com/a/48689004/9263761 */
mat-dialog-container#modal-component {
    border: 3px solid #262626;
    border-radius: 11px;
    background-color: #1a1a1a;
}