table {
    width: 100%;
  }
  
  .mat-form-field {
    font-size: 14px;
    width: 100%;
  }
  
  td, th {
    width: 25%;
  }


  .mat-accordion .mat-header-row {
    padding-left: 1.5rem;
    padding-right: 2rem;
    border-bottom: none;
  }
  
  
  //copied from https://github.com/angular/material2/blob/master/src/lib/table/table.scss
  $mat-header-row-height: 56px;
  $mat-row-height: 48px;
  $mat-row-horizontal-padding: 24px;
  
  
  .mat-header-row {
    min-height: $mat-header-row-height;
  }
  
  .mat-row {
    min-height: $mat-row-height;
  }
  
  .mat-row, .mat-header-row {
    display: flex;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    align-items: center;
    padding: 0 $mat-row-horizontal-padding;
    box-sizing: border-box;
  
    // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
    // element that will stretch the row the correct height. See:
    // https://connect.microsoft.com/IE/feedback/details/802625
    &::after {
      display: inline-block;
      min-height: inherit;
      content: '';
    }
  }
  
  .mat-cell, .mat-header-cell {
    flex: 1;
    overflow: hidden;
    word-wrap: break-word;
  }
  
  .mat-expansion-panel {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    transition: margin 225ms cubic-bezier(.4,0,.2,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
  }