Fix design.

src/app.component.ts

@@ -6,8 +6,6 @@ import { Component } from '@angular/core';
   selector: 'accountant',
   styles: [ require('./main.scss').toString() ],
   template: `
-<md-sidenav-container>
-  <div>
     <md-toolbar class="mat-elevation-z6" color="primary">
       <div class="acc-toolbar">
         <a md-button style="text-transform: uppercase"
@@ -20,8 +18,6 @@ import { Component } from '@angular/core';
     <div class="acc-content">
       <router-outlet></router-outlet>
     </div>
-  </div>
-</md-sidenav-container>
   `
 })
 export class AppComponent { }

src/main.scss

@@ -9,6 +9,7 @@ $fa-font-path: '~font-awesome/fonts';
 @import '~ngx-toastr/toastr';
 
 $roboto-font-path: '~roboto-fontface/fonts/roboto/';
+@import '~@angular/material/_theming';
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
 @import '~material-design-icons/iconfont/material-icons.css';
@@ -50,16 +51,18 @@ body {
   }
 }
 
+md-dialog > form {
+    overflow: visible;
+}*/
+
+/*
 // stretch to screen size in fullscreen mode
-.demo-content {
+.acc-content {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
 }
-
-md-dialog > form {
-    overflow: visible;
-}*/
+*/
 
 .italic {
   font-style: italic;
@@ -76,3 +79,19 @@ md-dialog > form {
 .c3-ygrid-line.overdraft line {
   stroke: #FF0000;
 }
+
+span.warning {
+  color: mat-color($mat-amber, A700);
+}
+
+.mat-row.warning {
+  background-color: mat-color($mat-amber, 100);
+}
+
+span.error {
+  color: mat-color($mat-red, A700);
+}
+
+.mat-row.error {
+  background-color: mat-color($mat-red, 100);
+}