/*
NOTE: when you reference one of these vars, comment underneath the element you've used it for. Mandem organised
*/
/*
USED FOR:
plan inputs
dashboard-panel
dashboard panel buttons
modal-body.report-options-modal > span.glyphicon
*/
/*
USED FOR:
dashboard panel header
dashboard panel buttons
typeahead
editable table > page header
*/
/*
USED FOR:
.modal-body.report-options-modal > .Select-menu-outer
*/
/*
USED FOR:
menu
dashboard panel
charts > drillup
.dashboard-filter-sentence-container > #fixed-version
superbutton overlay content
*/
/*
context menu
USED FOR:
header
pinned nav
dashboard panel
simple sidebar
spark chart

*/
/*
USED FOR:
modals
tooltip box
c tooltip

*/
/*
USED FOR:
error messages

*/
.highcharts-root {
  font-family: var(--font-regular-font-family) !important; }

.highcharts-axis-title {
  font-family: var(--font-regular-font-family) !important; }

img#img-prerender {
  display: none; }

div.highchartsFooter {
  display: flex;
  align-content: center;
  justify-content: center;
  text-align: center;
  font-size: 1.6em;
  flex-wrap: wrap;
  min-height: 30px; }
  div.highchartsFooter div.grouped-serie {
    border-bottom: 1px solid #ddd;
    margin-right: 12px;
    height: 100%; }
    div.highchartsFooter div.grouped-serie div.seriesMetricName {
      padding-right: 6px; }
  div.highchartsFooter div.footerSquare {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 5px; }
  div.highchartsFooter div.seriesGroup {
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    height: 20px; }
    div.highchartsFooter div.seriesGroup i {
      padding: 0 3px; }
  div.highchartsFooter div.seriesGroup.showall {
    margin-left: 10px; }
  div.highchartsFooter span.footerCopy {
    font-size: 13px;
    font-family: ProximaNovaA-Regular; }
  div.highchartsFooter i {
    color: #666;
    font-size: 15px; }
    div.highchartsFooter i.dormant {
      color: #ccc; }
  div.highchartsFooter > span {
    white-space: nowrap;
    padding: 1px 3px; }
    div.highchartsFooter > span > span:first-child {
      display: inline-block;
      margin: 0 3px 0;
      width: 10px;
      height: 10px;
      border-radius: 1px; }
    div.highchartsFooter > span > span:hover, div.highchartsFooter > span div.highchartsFooter i:hover:not(.dormant) {
      cursor: pointer;
      color: #1155aa; }

.drillup {
  float: right;
  top: 32px;
  position: absolute;
  right: 10px;
  z-index: 999;
  list-style-type: none;
  padding-right: 0; }
  .drillup > li:first-child {
    padding-left: 5px; }
  .drillup > li {
    float: left;
    border-right: 1px solid lightgray;
    padding-left: 12px;
    padding-right: 16px; }
  .drillup > li:last-child {
    border-right: none; }

.monoreport-page .drillup {
  top: 0; }

.highchartsChart {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center; }
  .highchartsChart > .container {
    flex-grow: 1;
    width: 100%;
    overflow: hidden; }
  .highchartsChart.funnel .highcharts-series-group, .highchartsChart.funnel .highchartsFooter {
    transform: translateX(-60px); }
  .highchartsChart.funnel .highcharts-data-labels {
    transform: translate(-50px, 10px); }

/* Funnel and Pie Footer (series selector) */
.highcharts-footer {
  /* we get a dropup menu if container width isn't enough for buttons... */ }
  .highcharts-footer .btn-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: center; }
    .highcharts-footer .btn-toolbar .dropup btn-group {
      flex: 1; }
  .highcharts-footer .buttons-ui-canvas {
    visibility: hidden;
    pointer-events: none; }