.chart-legends {

  display: none;
  width: 100%;

  .chart-legend-structure {

    display: table;
    margin: 0 auto;
    width: 100%;

    .chart-legend-container {

      display: table-cell;
      vertical-align: middle;

      .chart-legend {

        clear: both;


        .legend-title {
          font-weight: 900;
          margin: 20px 0 0 0;
        }

        ul {
          list-style: none;
          margin: 0; padding: 0;

          display: flex;
          flex-wrap: wrap;

          li.legend-item {

            width: 50%;
            margin: 20px 0 0 0;
            position: relative;

            .key {
              margin: 0 10px 0 20px;
              display: block;
              font-size: 12px; line-height: 14px;
              text-transform: capitalize;
            }

            svg {
              position: absolute; top: 1px;
            }
          }

          li.item-togglable {
            cursor: pointer;
          }

          li.legend-item-off {
            opacity: 0.5;
          }
        }
      }
    }
  }
}

.legends-open {
  display: block;
}

.chart-wide {

  .chart-legends {

    .chart-legend-structure {

      width: 80%; height: 100%;
    }
  }
}