/* CUSTOM FONT */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans');

/* Colors  */
:root {
  --white: #ffffff;
  --off-white: #acacac;
  --grey: #8f8f8f;
  --almost-black: #1e1e20;
}

/* REPORT */
/* Background color */
body,
body.mode-embed.embed-preview {
  background-color: var(--white);
  background: linear-gradient(to top, var(--white), var(--white));
  background-attachment: fixed;
  color: var(--white);
}


/* Gutters */
.mode-embed .mode-grid.container .row {
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .mode-embed .mode-grid.container .row {
    margin-left: -2px;
    margin-right: -2px;
    margin-bottom: 8px;
  }
}

.mode-embed .mode-grid.container [class^="col-"] {
  padding: 0 8px;
  border: 0;
}

@media (max-width: 768px) {
  .mode-embed .mode-grid.container [class^="col-"] {
    padding: 0 2px;
  }
}

.editor-module.editor-chart.mode-object.editor-multi.big-number.ng-scope.is-report-mode,
.editor-module.editor-chart.mode-object.editor-multi {
  border: 0;
}

@media (max-width: 768px) {
  .editor-module.editor-chart.mode-object.editor-multi.big-number.ng-scope.is-report-mode,
  .editor-module.editor-chart.mode-object.editor-multi {
    border: 0;
    margin: 0;
  }
}

.row .mode-object:first-of-type {
  margin-left: 0;
}

.row .mode-object:last-of-type {
  margin-right: 0;
}

/* Grey top Bar */
.mode-object, .mode-placeholder {
  border-top: 4px solid var(--grey) !important;
}

.mode-object:hover, .mode-placeholder:hover {
  border-top-color: var(--almost-black) !important;
}

/* Placeholder header */
.mode-placeholder::before {
  border-bottom: transparent;
}

span.chart-title,
in-place-edit {
  line-height: 40px;
}

.row {
  margin-top: 16px;
}

/* TEXT */
/* Use custom font for all charting */
.mode-embed .mode-header,
.mode-object.big-number .chart-title .in-place-edit-text,
.embed-preview .mode-object.big-number .chart-title .in-place-edit-text,
.editor-table .chart-header,
.editor-chart .chart-header,
.mode-placeholder .placeholder-title,
.mode-object .chart-title.chart-description .in-place-edit-text,
.mode-embed .mode-object .chart-title.chart-description .in-place-edit-text,
span.fb-content.ng-binding,
span.trend-value.ng-binding,
.highcharts-axis-labels tspan,
.highcharts-legend-item tspan,
.nvd3 text {
  font-family: "Open+Sans", sans-serif;
}

/* Report title */
.mode-embed .mode-header h1 {
  color: var(--almost-black);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 0;
}

/* Report description */
.mode-header p,
.mode-embed .mode-header p {
  color: var(--off-white);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 32px;
}

/* Chart titles */
.mode-object.big-number .chart-title .in-place-edit-text,
.embed-preview .mode-object.big-number .chart-title .in-place-edit-text,
.editor-table .chart-header,
.editor-chart .chart-header,
.mode-placeholder .placeholder-title {
  color: var(--almost-black);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
}

.mode-object.big-number .chart-title .in-place-edit-text,
.embed-preview .mode-object.big-number .chart-title .in-place-edit-text,
.embed-preview .in-place-edit .in-place-edit-text {
  line-height: 21px;
}

.chart-header {
  padding-top: 10px;
}

/* Big number descriptions */
.mode-object .chart-title.chart-description .in-place-edit-text,
.mode-embed .mode-object .chart-title.chart-description .in-place-edit-text {
  color: var(--off-white);
  font-size: 16px;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

/* Big number */
span.fb-content.ng-binding,
.chart-big-number span.fb-content {
  color: var(--almost-black);
}

/* Text editor text */
.mode-embed .mode-object h1,
.mode-embed .mode-object h2,
.mode-embed .mode-object h3,
.mode-embed .mode-object h4,
.editor-chart.mode-object.text-block-container .ql-editor h5,
.mode-embed .mode-object h6,
.mode-embed .mode-object p,
.mode-embed .mode-object li,
.mode-embed .mode-object .error-message .message,
.mode-embed .centered-content {
  color: var(--almost-black);
}

/* CHARTS */
/* Chart Placeholders */
.ph-color-light {
  fill: #53535C;
}

.ph-color-medium {
  fill: #393945;
}

.ph-color-dark {
  fill: #2B2B39;
}

.loading-message {
  color: #D6D9DE;
}

/* Chart background */
.editor-module.editor-chart.mode-object.editor-multi, .mode-placeholder {
  transition: all 0.2s ease;
  background-color: rgba(255, 255, 255, 1);
}

.mode-embed .editor-table {
  background: transparent;
}

/* Chart hover */
.editor-module.editor-chart.mode-object.editor-multi:hover {
  background-color: rgba(172, 172, 172, 0.2);
}

.mode-embed .mode-object.editor-chart,
.mode-embed .mode-object.editor-table,
.mode-placeholder {
  border: transparent;
}

/* Pies */
.nvd3.nv-pie path {
  fill-opacity: 1;
  stroke: transparent;
}

/* Text background */
.editor-module.editor-chart.editor-multi.mode-object.text-block-container.report-view,
.chart-content.text-block-content {
  background: transparent;
}

/* Chart text */
.nvd3 text {
  fill: rgba(30, 30, 32, 0.45);
}

.highcharts-root {
  font-family: "Open+Sans", sans-serif;
}

.highcharts-root tspan {
  fill: var(--almost-black);
}

.highcharts-text-outline {
  stroke: transparent;
}

/* Chart tick text, Chart legend */
.nvd3 .tick text,
.nvd3 .nv-legend .nv-legend-text,
.highcharts-axis-labels text,
.highcharts-axis-labels tspan,
.highcharts-legend-item tspan,
.highcharts-legend-item text tspan {
  fill: var(--almost-black) !important;
  color: var(--almost-black) !important; 
  font-size: 13px;
  font-weight: 300;
}

.highcharts-legend .highcharts-legend-title text {
  fill: var(--almost-black);
  font-style: italic;
  font-weight: 500 !important;
}

/* Axis labels */
.mode-object .chart .xlabel,
.mode-object .chart .ylabel {
  background: none;
}

.mode-object .chart .xlabel h4,
.mode-object .chart .ylabel h4 {
  font-style: italic;
}

.highcharts-axis-title tspan {
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  fill: var(--almost-black);
}

/* Y Ticks */
.chart-svg .nv-y line,
.highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-xaxis .highcharts-axis-line,
.highcharts-xaxis .highcharts-tick {
  stroke: var(--off-white);
}

/* Bars */
.nvd3 .nv-multibar .nv-groups rect,
.nvd3 .nv-multibarHorizontal .nv-groups rect,
.nvd3 .nv-candlestickBar .nv-ticks rect,
.nvd3 .nv-discretebar .nv-groups rect,
.highcharts-root .highcharts-series-group .highcharts-series:not(.highcharts-bubble-series) .highcharts-point {
  fill-opacity: 1;
  stroke: transparent;
}

.nvd3 .nv-multibar .nv-groups rect.highcharts-point-select,
.nvd3 .nv-multibarHorizontal .nv-groups rect.highcharts-point-select,
.nvd3 .nv-candlestickBar .nv-ticks rect.highcharts-point-select,
.nvd3 .nv-discretebar .nv-groups rect.highcharts-point-select,
.highcharts-root .highcharts-series-group .highcharts-series:not(.highcharts-bubble-series) .highcharts-point.highcharts-point-select {
  stroke:var(--white);
}

.nvd3 .nv-multibar .nv-groups rect:hover,
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
.nvd3 .nv-discretebar .nv-groups rect:hover,
.highcharts-root .highcharts-series-group .highcharts-series:not(.highcharts-bubble-series) .highcharts-point:hover {
  stroke:var(--white);
}

.highcharts-root .highcharts-series-group .highcharts-series:not(.highcharts-bubble-series) .highcharts-point:hover {
  stroke:var(--white);
}

.highcharts-series-hover .highcharts-markers:not(.highcharts-line-series) path.highcharts-graph {
  stroke:var(--white);
  stroke-width: 1px;
}

.highcharts-series-hover.highcharts-scatter-series path.highcharts-point-hover {
  stroke:var(--white);
}

rect.updated-column-mark {
  stroke:var(--white);
}

.highcharts-markers.highcharts-tracker.highcharts-area-series > path:nth-child(2) {
  stroke:var(--white);
}

.highcharts-markers.highcharts-tracker.highcharts-scatter-series path.highcharts-point-hover {
  stroke:var(--white);
}

.highcharts-area-series.highcharts-series-hover .highcharts-graph {
  stroke:var(--white);
}

.highcharts-markers.highcharts-tracker.highcharts-line-series > .highcharts-point.highcharts-point-hover, .highcharts-markers.highcharts-tracker.highcharts-line-series .highcharts-point-select, .highcharts-markers.highcharts-tracker.highcharts-area-series > .highcharts-point.highcharts-point-hover, .highcharts-markers.highcharts-tracker.highcharts-area-series .highcharts-point-select {
  stroke:var(--white);
}

.highcharts-series .highcharts-scatter-series .highcharts-point-hover, .highcharts-series .highcharts-scatter-series .highcharts-point-select, .highcharts-series.highcharts-bubble-series .highcharts-point-hover, .highcharts-series.highcharts-bubble-series .highcharts-point-select, .highcharts-series-group .highcharts-scatter-series .highcharts-point-hover, .highcharts-series-group .highcharts-scatter-series .highcharts-point-select, .highcharts-series-group.highcharts-bubble-series .highcharts-point-hover, .highcharts-series-group.highcharts-bubble-series .highcharts-point-select {
  stroke:var(--white);
}

/* Tooltips */
div.nvtooltip.xy-tooltip {
  border: none;
  background-color: var(--white);
  color: var(--almost-black);
}

.highcharts-tooltip,
.highcharts-tooltip-box {
  stroke: transparent;
  fill: transparent;
}

.highcharts-tooltip .tooltip-container,
.highcharts-tooltip-box .tooltip-container {
  background-color: var(--white);
  border-color: var(--off-white);
  color: var(--almost-black);
  box-shadow: 0px 3px 4px var(--grey);
}

.highcharts-tooltip .tooltip-container .tooltip-header,
.highcharts-tooltip-box .tooltip-container .tooltip-header {
  background-color: var(--white);
  border-color: var(--off-white);
  color: var(--almost-black);
}

.highcharts-tooltip .tooltip-container .tooltip-body,
.highcharts-tooltip-box .tooltip-container .tooltip-body {
  color: var(--almost-black);
}

.highcharts-tooltip .tooltip-container .tooltip-body .tooltip-row > .tooltip-label > .percent-label,
.highcharts-tooltip-box .tooltip-container .tooltip-body .tooltip-row > .tooltip-label > .percent-label {
  color: var(--almost-black);
}

.highcharts-tooltip .tooltip-container .tooltip-body tr.highlight,
.highcharts-tooltip-box .tooltip-container .tooltip-body tr.highlight {
  background-color: var(--white);
}

.highcharts-tooltip .tooltip-container div.total-segment-divider,
.highcharts-tooltip-box .tooltip-container div.total-segment-divider {
  background-color: var(--white);
}

.chart-context-menu {
  color: var(--almost-black);
  background-color: var(--white);
  border-color: var(--off-white);
  box-shadow: 0px 3px 4px var(--grey);
}

.chart-context-menu .section-descriptor {
  background-color: var(--white);
  border-color: var(--off-white);
}

.chart-context-menu .section-descriptor .value.label-section-name {
  color: var(--off-white);
}

.chart-context-menu .context-menu-link:hover .context-menu-label-wrapper {
  background-color: var(--white);
}

.chart-context-menu .section-divider {
  border-color: var(--off-white);
}

.chart-context-menu.has-explorer-icon .viz-action-icon .svg-icon-stroke {
  stroke: var(--off-white);
}

.chart-context-menu.has-explorer-icon .viz-action-icon .svg-icon-fill {
  fill: var(--almost-black);
}

/* Legend color */
td div {
  border: none !important;
  border-radius: 50%;
}

.nvtooltip table tr.highlight {
  background-color: rgba(255, 255, 255, 1);
}

/* TABLES */
.mode-table-grid,
.mode-table-grid th {
  background: transparent;
  color: rgba(30, 30, 32, 0.65) !important;
}

.mode-table-grid:not(.pivot-table-container),
.mode-table-grid:not(.pivot-table-container) td,
.mode-table-grid:not(.pivot-table-container) thead th,
.mode-table-grid:not(.pivot-table-container) tbody th {
  border-right: 1px solid rgba(30, 30, 32, 0.2);
  border-bottom: 1px solid rgba(30, 30, 32, 0.2);
}

.mode-table-grid thead {
  background-color: rgba(30, 30, 32, 0.2);
}

.mode-table-grid thead tr th .table-header-label,
.mode-table-grid thead tr th .axel-table-header-label {
  color: var(--almost-black) !important;
}

.mode-table-grid thead th {
  background: rgba(255, 255, 255, 1);
}

/* Table filter */
.filter-module.with-lightbox {
  background: transparent;
  border: transparent;
}

.filter-module.with-lightbox.with-focus {
  border: 1px solid var(--off-white);
}

/* Table filter text */
input.filter-field {
  color: rgba(30, 30, 32, 0.65);
}

/* Sort toggle */
.axel-dropdown:hover .axel-dropdown-toggle {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Selected table header */
.mode-table-grid th.is-selected-col {
  color: #fff;
}

/* Selected table rows */
.mode-table-grid td.is-selected-col {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
}

.axel-text-highlight .highlight {
  background: #f1b320;
}

/* PIVOT TABLES */
/* Table container, Column head bottom divider */
.pivot-table-container,
.pivot-table .pvtMainHeaderWrapper {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pivot-table .pvtMainHeaderWrapper {
  border-left: 0;
  border-top: 0;
}

/* Table base color */
.pivot-table .mode-table-grid td,
.pivot-table .mode-table-grid th {
  background-color: var(--almost-black);
}

/* Pivot table row and column header panels */
.pivot-table .pvtFixedHeaderPanel {
  background: var(--white);
}

/* Coarse dividers */
/* Row header divider */
tbody tr th:last-of-type .pvtFixedHeader {
  border-right: 1px solid rgba(30, 30, 32, 0.4);
}

/* Column section divider */
.pivot-table-container .pvtDividerVertical.pvtVal,
.pivot-table-container .pvtDividerVertical.pvtTotal,
.pivot-table-container .pvtDividerVertical .pvtFixedHeader,
thead tr:last-child th:last-child .pvtFixedHeader {
  border-right: 1px solid rgba(30, 30, 32, 0.4) !important;
}

/* Row header row section divider */
.pivot-table-container .pvtDivider.pvtVal,
.pivot-table-container .pvtDivider.pvtTotal,
.pivot-table-container .pvtDivider .pvtFixedHeader {
  border-bottom: 1px solid rgba(30, 30, 32, 0.4) !important;
}

/* Cell dividers */
/* Column header row dividers, Row header column dividers */
.pvtFixedHeader {
  border-bottom: 1px solid rgba(30, 30, 32, 0.4);
  border-right: 1px solid rgba(30, 30, 32, 0.4);
}

.pvtFixedHeader .table-header-label {
  color: var(--off-white) !important;
}

/* Column section subdivider */
.pivot-table .pivot-table-container td {
  border-color: rgba(30, 30, 32, 0.2);
}

/* Row header subdivider zebra striping, Table row zebra striping */
.pivot-table-container tbody > tr:nth-child(even) td,
.pivot-table-container tbody > tr:nth-child(even) th,
.pivot-table-container tbody > tr:nth-child(even) .pvtRowLabel:last-of-type .pvtFixedHeader,
.pivot-table-container tbody > tr:nth-child(even) .pvtTotalFillerLabel .pvtFixedHeader,
.pivot-table-container tbody > tr:nth-child(even) .pvtTotalLabel .pvtFixedHeader {
  background: rgba(30, 30, 32, 0.05);
}

/* Sort hovers */
.pvtAxisLabel:not(.pvtNoSort) .pvtFixedHeader:not(.pvtMainHeaderWrapper):hover,
.pvtAxisLabel:not(.pvtNoSort) .pvtFixedHeader:not(.pvtMainHeaderWrapper).dropdown-open {
  background: rgba(30, 30, 32, 0.8);
}

.pvtAxisLabel:not(.pvtNoSort) .pvtFixedHeader:not(.pvtMainHeaderWrapper):hover .table-header-label,
.pvtAxisLabel:not(.pvtNoSort) .pvtFixedHeader:not(.pvtMainHeaderWrapper).dropdown-open .table-header-label {
  color: rgba(0, 0, 0, 0.8);
}

/* Sort toggles */
.pvtFixedHeader .axel-dropdown-toggle {
  border-radius: 0;
}

/* New Report Viz Toolbar */
.new-viz-actions .tooltip {
  color: var(--off-white);
}

.new-viz-actions .table-filter-module {
  border: 1px solid transparent;
}

.new-viz-actions .table-filter-module.with-focus {
  background-color: var(--white);
  border: 1px solid var(--off-white);
}

.new-viz-actions .table-filter-module.with-focus .filter-apply-btn {
  background-color: inherit;
}

.new-viz-actions .table-filter-module .filter-apply-btn {
  border: 1px solid var(--off-white);
  background-color: var(--white);
}

.new-viz-actions .table-filter-module .filter-apply-btn .viz-action-icon .svg-icon-stroke {
  stroke: var(--off-white);
}

.new-viz-actions .table-filter-module .filter-apply-btn .viz-action-icon .svg-icon-fill {
  fill: var(--almost-black);
}

.new-viz-actions .table-filter-module .filter-apply-btn:hover:not(.disabled) .viz-action-icon .svg-icon-fill {
  fill: var(--almost-black);
}

.new-viz-actions .table-filter-module .filter-apply-btn:hover:not(.disabled) .viz-action-icon .svg-icon-stroke {
  stroke: var(--off-white);
}

.new-viz-actions .filter-apply-btn .viz-action-icon .svg-icon-stroke, .new-viz-actions .new-viz-action .viz-action-icon .svg-icon-stroke {
  stroke: var(--off-white);
}

.new-viz-actions .filter-apply-btn .viz-action-icon .svg-icon-fill, .new-viz-actions .new-viz-action .viz-action-icon .svg-icon-fill {
  fill: var(--almost-black);
}

.new-viz-actions .filter-apply-btn:active:not(.disabled), .new-viz-actions .new-viz-action:active:not(.disabled) {
  background-color: var(--white);
  border: 1px solid var(--off-white);
}

.new-viz-actions .filter-apply-btn:hover:not(.disabled), .new-viz-actions .new-viz-action:hover:not(.disabled) {
  box-shadow: 0 3px 4px var(--grey);
}

.new-viz-actions .filter-apply-btn:hover:not(.disabled) .viz-action-icon .svg-icon-fill, .new-viz-actions .new-viz-action:hover:not(.disabled) .viz-action-icon .svg-icon-fill {
  fill: var(--almost-black);
}

.new-viz-actions .filter-apply-btn:hover:not(.disabled) .viz-action-icon .svg-icon-stroke, .new-viz-actions .new-viz-action:hover:not(.disabled) .viz-action-icon .svg-icon-stroke {
  stroke: var(--off-white);
}

.new-viz-actions .new-viz-action {
  background-color: var(--white);
  border: 1px solid var(--off-white);
}

.new-viz-actions span.divider {
  border-left-color: var(--off-white);
}

/* Hierarchy Buttons */
.drill-actions .drill-action-btn {
  background-color: var(--white);
  border: 1px solid var(--off-white);
}

.drill-actions .drill-action-btn .icon-hierarchy-down rect, .drill-actions .drill-action-btn .icon-hierarchy-down path, .drill-actions .drill-action-btn .icon-hierarchy-up rect, .drill-actions .drill-action-btn .icon-hierarchy-up path {
  stroke: #C9CAD1;
}

.drill-actions .drill-action-btn:hover {
  box-shadow: 0px 3px 4px var(--grey);
}

.drill-actions .drill-action-btn:active {
  background-color: var(--white);
}

.tooltip.hierarchy-tooltip.top .tooltip-inner {
  background-color: var(--white);
}

.tooltip.hierarchy-tooltip.top .tooltip-arrow {
  border-top-color: var(--off-white);
}