.charts, .dashboard {
  //.mdl-card {
  //  height: 100%;
  //}
  .chart1__container, .chart2__container, .pie-chart__container, .discrete-bar-chart__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    min-height: $pie-chart-height;
    svg {
      min-height: 200px;
      max-width: 180px;
      .nvd3.nv-pie {
        path {
          fill-opacity: 1;
          stroke-width: 0;
        }
        .nv-pie-title {
          @include typo-piechart-title;
          font-size: 22px !important;
        }
      }
    }
    .legend {
      max-width: 140px;
    }
  }

  .chart1__container .nv-label {
    text {
      fill: white !important;
    }
  }

  .discrete-bar-chart__container {
    height: 100%;
    svg {
      height: 240px;
      max-width: calc(100% - 140px);
      .nv-bar {
        text {
          fill: #ffffff !important;
          opacity: 0.9;
        }
      }
      .nv-axis {
        &.nv-x {
          text {
            display: none;
          }
        }
        &.nv-y {
          .tick:nth-child(2n) {
            text {
              display: none;
            }
          }
        }
      }
    }
  }

  .line-plus-bar-chart__container, .stacked-bar-chart__container {
    svg, svg .nv-linePlusBar {
      height: 250px;
    }
  }

  .discrete-bar-chart__container, .line-plus-bar-chart__container, .stacked-bar-chart__container {
    .nv-controlsWrap .nv-legend-symbol {
      fill: $color-teal !important;
      stroke: $color-teal !important;
    }
    .nv-group {
      fill-opacity: 0.9 !important;
    }
    .nv-axis {
      text {
        fill: #ffffff;
        opacity: 0.5 !important;
      }
      .domain, .nv-zeroLine {
        stroke: #ffffff;
        opacity: 0.5;
      }
      .tick {
        line {
          opacity: 0.1 !important;
        }
      }
    }
    .nv-legend-text {
      opacity: 0.5;
    }
  }

  .nvd3 {
    text {
      font: normal 12px Arial;
      fill: #ffffff !important;
    }
  }
}
