.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

body {
    margin:0;
    padding:0;
}

.flex-row {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}

.flex {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
}

.header {
    background: #FFFFFF;
}

span {
    font-family: Source Sans Pro;
}

span.header {
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 24px;
    color: #354052;
}

span.username {
    line-height: normal;
    font-size: 16px;
    color: #1A91EB;
}

span.userrole {
    line-height: normal;
    font-size: 14px;
    color: #7F8FA4;
}

span.checkbox {
    line-height: 20px;
    font-style: Regular;
    font-size: 16px;
    color: #354052;
}

span.user.row.data {
    line-height: 19px;
    font-style: Semibold;
    font-size: 16px;
    color: #354052;
}

span.user.row.description {
    line-height: 16px;
    font-style: Semibold;
    font-size: 14px;
    color: #7F8FA4;
}

h4 {
    font-family: Source Sans Pro;
    line-height: normal;
    font-size: 12px;
    color: #7F8FA4;
}