.chart {
  display: block;
}

button.close {
    align-items: center;
    background-color: white;
    border: none;
    display: flex;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0;
}

button.close:hover {
    cursor: pointer;
}

button.close > .material-icons {
  font-size: 14px;
}

.feature-info {
    display: flex;
    border-bottom: 1px solid #cecece;
    padding-bottom: 10px;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

.regional-feature > .feature-selected {
  fill: yellow;
  stroke: black;
}

.feature-affinity-tag {
  fill: red;
  stroke: red;
}

.feature-fp-green {
  fill: #0f0;
  stroke: #0f0;
}

.feature-antibiotic {
  fill: orange;
  stroke: orange;
}

.feature-protease {
  fill: blue;
  stroke: blue;
}

.feature-point-group {
  fill: black;
  stroke: black;
}

.feature-point-feature {
  stroke: black;

  .feature-selected {
    fill: yellow;
    stroke: black;
  }
}