.legend-container {
  position: relative;
}
.bar-legend, .line-legend {
  list-style: none;
  position: absolute;
  top: 0;
  li {
    display: block;
    position: relative;
    margin-bottom: 4px;
    border-radius: 5px;
    padding: 0px 8px 2px 18px;
    font-size: 11px;
    cursor: default;
    -webkit-transition: background-color 200ms ease-in-out;
    -moz-transition: background-color 200ms ease-in-out;
    -o-transition: background-color 200ms ease-in-out;
    transition: background-color 200ms ease-in-out;
    &:hover {
      background-color: #fafafa;
    }
    span {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 15px;
      height: 15px;
      border-radius: 5px;
    }
  }
}
ul.line-legend {
  margin: 0;
  padding: 0;
  position: relative;
  li {
    display: inline;
  }
}
