/***BEGIN Chart.css***/
.chart-component {
  /* There are absolutely positioned elements within the chart component (the hidden accessibility table and highcharts
     * screen reader info divs). So we need to position the outermost element so these elements don't "leak" outside the chart
     * area causing issues like scrollbars when there shouldn't be any. */
  position: relative; }

/** Accessibility content container class for SDK Charts*/
.hidden-accessible-chart-text-container {
  /*  This class is intended for visual concealment of accessible html table of related chart content, while retaining visibility in screen reader.
        See the following page for suggestions.
        https://webaim.org/techniques/css/invisiblecontent/
    */
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }

/** Highcharts Modern Pie-Center Style*/
.pie-chart-center-value {
  fill: WindowText;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis; }

/** Highcharts layout Engine doesn't honor cases of long labels with no spaces. */
.limited-label-chart .highcharts-legend-item > span {
  white-space: pre;
  max-width: 72px; }

/** High Contrast styles for Common SDK charts*/
.highcharts-tooltip > span {
  background: white;
  /**Note: this portion is HTML such that browser high contrast will invert it.*/ }

.highcharts-tooltip .header-block {
  margin-bottom: 3px; }

.highcharts-tooltip .category-text {
  vertical-align: middle;
  margin-left: 5px; }

.highcharts-tooltip .category-color {
  vertical-align: middle;
  display: inline-block;
  height: 12px;
  width: 12px; }

.highcharts-tooltip .tooltip-color {
  shape-rendering: crispEdges;
  stroke: black;
  stroke-width: 1px; }

.highcharts-tooltip-container {
  /* Compensate for tooltip rendering under AzDev Modal Dialogs (e.g. Lightbox). */
  z-index: 1000001 !important; }
/***END Chart.css***/