tree-root /deep/ {
  height: 38%;
  tree-viewport {
    height: 38%;
  }
}

.header {
  width: 100%;
  height: 65px;
  background-color: #417690;
  color: white;
  margin-top: -21px;
  padding-left: 10px;
}

h3 {
  font-size: 20px;
  letter-spacing: 0.005em;
  box-sizing: border-box;
  font-weight: 300;
  padding-left: 10px;
  padding-top: 20px;
}

.close-icon {
  float: right;
  position: relative;
  padding-top: 5px;
  padding-right: 25px;
}

.fields {
  padding: 10px;
}

.mat-header-row,
.mat-row {
  border-bottom: 0;
}

.example-container {
  display: flex;
  flex-direction: column;
  min-width: 300px;
}

.example-header {
  min-height: 64px;
  padding: 8px 24px 0;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}

.mat-cell {
  font-size: 16px;
}
.mat-table {
  overflow: auto;
  max-height: 500px;
}

.add-button {
  float: right;
  background: white;
  border: none;
  cursor: pointer;
}

.add-button:focus {
  outline: none;
}

.content {
  font-size: 14px;
  color: #79aec8;
  font-weight: bold;
}

.selected-field {
  padding: 20px;
}

.add-icon {
  float: left;
  color: #79aec8;
  padding-right: 5px;
}

.example-no-results {
  display: flex;
  justify-content: center;
  padding: 24px;
  font-size: 12px;
  font-style: italic;
}

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
}

.material-icons.mat-icon {
  @include md-icon-size(18px);
}

@media screen and (max-width: 620px) {
  .header {
    height: 63px;
  }
}

@media screen and (max-width: 375px) {
  .mat-sidenav {
    width: 100%;
  }
}
