$chart-height: 400px;

.chart {

  width: 100%;
  min-width: 250px;
  margin: 0; padding: 0 0 40px 0;

  .chart-title {
    text-align: center;
  }

  .chart-main {
    width: 100%;
    clear: both;
  }

  .chart-content {
    width: 100%; height: $chart-height;
    margin: 0; padding: 0;
    position: relative;

    .chart-viz {

      width: 100%; height: 100%;
      margin: 0; padding: 0;
      position: relative;

      .chart-viz-group {

        width: 100%; height: 100%;
        margin: 0; padding: 0;
        position: relative;

        canvas {
          width: 100%; height: 100%;
          position: absolute;
        }

        svg {
          width: 100%; height: 100%;
          position: absolute;
        }
      }
    }
  }
}

.chart-reponsive {

  .chart-viz {

    overflow-x: auto;

    .chart-viz-group {
      min-width: 410px;
    }
  }
}

.chart-small {

  .chart-legends {
    .chart-legend-structure {
      .chart-legend-container {
        .chart-legend {
          ul {
            li.legend-item {
              width: 33.3%;
            }
          }
        }
      }
    }
  }
}

.chart-medium {

  .chart-legends {
    .chart-legend-structure {
      .chart-legend-container {
        .chart-legend {
          ul {
            li.legend-item {
              width: 25%;
            }
          }
        }
      }
    }
  }
}

.chart-large {
  .chart-legends {
    .chart-legend-structure {
      .chart-legend-container {
        .chart-legend {
          ul {
            li.legend-item {
              width: 20%;
            }
          }
        }
      }
    }
  }
}

.chart-wide {

  .chart-main {

    .content-legend {
      width: 80%;
      float: left;
    }

    .chart-legends {

      width: 20%;
      height: $chart-height;
      float: right;

      .chart-legend-structure {

        width: 100%; margin: 0;

        .chart-legend-container{

          margin: 0;
          width: 100%;

          .chart-legend {
            ul {
              li.legend-item {
                float: none;
                clear: both;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}