.fnb-barchart {
--fnb-chart-mobile-width: 720px;
--fnb-chart-gap: 44px;
--fnb-chart-text: #303b3d;
--fnb-chart-title: var(--fnb-chart-text);
--fnb-chart-axis: #737b7d;
--fnb-chart-band: #f3f4f2;
--fnb-legend-gap: 32px;
--fnb-legend-width: 220px;
--fnb-legend-font-size: 18px;
--fnb-legend-icon-size: 18px;
--fnb-legend-item-gap: 16px;
--fnb-tooltip-bg: #303b3d;
--fnb-tooltip-color: #fff;
--fnb-tooltip-font-size: 14px;
color: var(--fnb-chart-text);
font-family: Barlow, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
max-width: 100%;
}
.fnb-barchart-block { width: 100%; max-width: 100%; }
.fnb-barchart__heading,.fnb-barchart__source { width:100%;min-width:0;box-sizing:border-box;overflow-wrap:anywhere; }
.fnb-barchart__heading { margin:var(--fnb-heading-margin-top-desktop,0) var(--fnb-heading-margin-right-desktop,0) var(--fnb-heading-margin-bottom-desktop,0) var(--fnb-heading-margin-left-desktop,0);padding:var(--fnb-heading-padding-top-desktop,0) var(--fnb-heading-padding-right-desktop,0) var(--fnb-heading-padding-bottom-desktop,0) var(--fnb-heading-padding-left-desktop,0);font-family:var(--fnb-heading-font-family,inherit);font-size:var(--fnb-heading-font-size-desktop,1.125rem);font-weight:var(--fnb-heading-font-weight,400);line-height:var(--fnb-heading-line-height-desktop,1.35);text-align:var(--fnb-heading-align-desktop,left); }
.fnb-barchart__source { margin:var(--fnb-source-margin-top-desktop,0) var(--fnb-source-margin-right-desktop,0) var(--fnb-source-margin-bottom-desktop,0) var(--fnb-source-margin-left-desktop,0);padding:var(--fnb-source-padding-top-desktop,0) var(--fnb-source-padding-right-desktop,0) var(--fnb-source-padding-bottom-desktop,0) var(--fnb-source-padding-left-desktop,0);font-family:var(--fnb-source-font-family,inherit);font-size:var(--fnb-source-font-size-desktop,.875rem);font-weight:var(--fnb-source-font-weight,400);line-height:var(--fnb-source-line-height-desktop,1.45);text-align:var(--fnb-source-align-desktop,left);color:#6c7475; }
.fnb-barchart__heading a,.fnb-barchart__source a { color:inherit;text-decoration:underline; }
.fnb-mini-editor{margin:.5rem 0 1rem;border:1px solid #949494;border-radius:3px;overflow:hidden;background:#fff}.fnb-mini-editor__toolbar{display:flex;flex-wrap:wrap;gap:.25rem;padding:.4rem;border-bottom:1px solid #ddd}.fnb-mini-editor__settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .5rem;padding:.5rem .5rem 0;background:#f6f7f7}.fnb-mini-editor__field{min-height:5rem;padding:.65rem;outline:none}.fnb-mini-editor__field:empty:before{content:attr(data-placeholder);color:#757575}.fnb-mini-editor__box{padding:.5rem;background:#f6f7f7;border-top:1px solid #ddd}.fnb-mini-editor__box summary{cursor:pointer;font-weight:600}.fnb-mini-editor__box-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .5rem}
@media (max-width:1023px){.fnb-barchart__heading{font-size:var(--fnb-heading-font-size-tablet,var(--fnb-heading-font-size-desktop,1.125rem));line-height:var(--fnb-heading-line-height-tablet,var(--fnb-heading-line-height-desktop,1.35));text-align:var(--fnb-heading-align-tablet,var(--fnb-heading-align-desktop,left));margin:var(--fnb-heading-margin-top-tablet,var(--fnb-heading-margin-top-desktop,0)) var(--fnb-heading-margin-right-tablet,var(--fnb-heading-margin-right-desktop,0)) var(--fnb-heading-margin-bottom-tablet,var(--fnb-heading-margin-bottom-desktop,0)) var(--fnb-heading-margin-left-tablet,var(--fnb-heading-margin-left-desktop,0));padding:var(--fnb-heading-padding-top-tablet,var(--fnb-heading-padding-top-desktop,0)) var(--fnb-heading-padding-right-tablet,var(--fnb-heading-padding-right-desktop,0)) var(--fnb-heading-padding-bottom-tablet,var(--fnb-heading-padding-bottom-desktop,0)) var(--fnb-heading-padding-left-tablet,var(--fnb-heading-padding-left-desktop,0))}.fnb-barchart__source{font-size:var(--fnb-source-font-size-tablet,var(--fnb-source-font-size-desktop,.875rem));line-height:var(--fnb-source-line-height-tablet,var(--fnb-source-line-height-desktop,1.45));text-align:var(--fnb-source-align-tablet,var(--fnb-source-align-desktop,left));margin:var(--fnb-source-margin-top-tablet,var(--fnb-source-margin-top-desktop,0)) var(--fnb-source-margin-right-tablet,var(--fnb-source-margin-right-desktop,0)) var(--fnb-source-margin-bottom-tablet,var(--fnb-source-margin-bottom-desktop,0)) var(--fnb-source-margin-left-tablet,var(--fnb-source-margin-left-desktop,0));padding:var(--fnb-source-padding-top-tablet,var(--fnb-source-padding-top-desktop,0)) var(--fnb-source-padding-right-tablet,var(--fnb-source-padding-right-desktop,0)) var(--fnb-source-padding-bottom-tablet,var(--fnb-source-padding-bottom-desktop,0)) var(--fnb-source-padding-left-tablet,var(--fnb-source-padding-left-desktop,0))}}
@media (max-width:767px){.fnb-barchart__heading{font-size:var(--fnb-heading-font-size-mobile,var(--fnb-heading-font-size-tablet,var(--fnb-heading-font-size-desktop,1.125rem)));line-height:var(--fnb-heading-line-height-mobile,var(--fnb-heading-line-height-tablet,var(--fnb-heading-line-height-desktop,1.35)));text-align:var(--fnb-heading-align-mobile,var(--fnb-heading-align-tablet,var(--fnb-heading-align-desktop,left)));margin-top:var(--fnb-heading-margin-top-mobile,var(--fnb-heading-margin-top-tablet,var(--fnb-heading-margin-top-desktop,0)));margin-right:var(--fnb-heading-margin-right-mobile,var(--fnb-heading-margin-right-tablet,var(--fnb-heading-margin-right-desktop,0)));margin-bottom:var(--fnb-heading-margin-bottom-mobile,var(--fnb-heading-margin-bottom-tablet,var(--fnb-heading-margin-bottom-desktop,0)));margin-left:var(--fnb-heading-margin-left-mobile,var(--fnb-heading-margin-left-tablet,var(--fnb-heading-margin-left-desktop,0)))}.fnb-barchart__source{font-size:var(--fnb-source-font-size-mobile,var(--fnb-source-font-size-tablet,var(--fnb-source-font-size-desktop,.875rem)));line-height:var(--fnb-source-line-height-mobile,var(--fnb-source-line-height-tablet,var(--fnb-source-line-height-desktop,1.45)));text-align:var(--fnb-source-align-mobile,var(--fnb-source-align-tablet,var(--fnb-source-align-desktop,left)));margin-top:var(--fnb-source-margin-top-mobile,var(--fnb-source-margin-top-tablet,var(--fnb-source-margin-top-desktop,0)));margin-right:var(--fnb-source-margin-right-mobile,var(--fnb-source-margin-right-tablet,var(--fnb-source-margin-right-desktop,0)));margin-bottom:var(--fnb-source-margin-bottom-mobile,var(--fnb-source-margin-bottom-tablet,var(--fnb-source-margin-bottom-desktop,0)));margin-left:var(--fnb-source-margin-left-mobile,var(--fnb-source-margin-left-tablet,var(--fnb-source-margin-left-desktop,0)))}}
.fnb-barchart__title {
margin: 0 0 clamp(18px, 2vw, 30px);
font-size: clamp(1.25rem, 2vw, 1.9rem);
line-height: 1.12;
color: var(--fnb-chart-title);
font-weight: 700;
text-align: center;
}
.fnb-barchart__layout {
display: grid;
gap: var(--fnb-legend-gap);
align-items: center;
}
.fnb-barchart--legend-left .fnb-barchart__layout {
grid-template-columns: max-content minmax(0, 1fr);
}
.fnb-barchart--legend-right .fnb-barchart__layout {
grid-template-columns: minmax(0, 1fr) max-content;
}
.fnb-barchart--legend-right .fnb-barchart__charts {
order: -1;
}
.fnb-barchart--legend-top .fnb-barchart__layout,
.fnb-barchart--legend-bottom .fnb-barchart__layout,
.fnb-barchart--legend-top-stacked .fnb-barchart__layout,
.fnb-barchart--legend-bottom-stacked .fnb-barchart__layout {
grid-template-columns: minmax(0, 1fr);
}
.fnb-barchart__legend {
display: flex;
flex-direction: column;
gap: var(--fnb-legend-item-gap);
font-size: var(--fnb-legend-font-size);
line-height: 1.22;
min-width: 0;
max-width: var(--fnb-legend-width);
}
.fnb-barchart--legend-top .fnb-barchart__legend,
.fnb-barchart--legend-bottom .fnb-barchart__legend {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
column-gap: max(16px, var(--fnb-legend-item-gap));
row-gap: calc(var(--fnb-legend-item-gap) * .75);
max-width: none;
}
.fnb-barchart--legend-top-stacked .fnb-barchart__legend,
.fnb-barchart--legend-bottom-stacked .fnb-barchart__legend {
max-width: none;
}
.fnb-barchart__legend-heading {
margin: 12px 0 0;
font-size: var(--fnb-legend-heading-font-size, 20px);
font-weight: 700;
white-space: pre-line;
}
.fnb-barchart__legend-heading:first-child {
margin-top: 0;
}
.fnb-barchart__legend-item {
appearance: none;
border: 0;
background: transparent;
color: inherit;
display: grid;
grid-template-columns: var(--fnb-legend-icon-size) minmax(0, max-content);
gap: 14px;
align-items: start;
padding: 0;
font: inherit;
font-weight: 700;
text-align: left;
max-width: var(--fnb-legend-width);
}
.fnb-barchart.has-legend-wrap .fnb-barchart__legend-item {
grid-template-columns: var(--fnb-legend-icon-size) minmax(0, var(--fnb-legend-width));
align-items: start;
}
.fnb-barchart.has-legend-wrap .fnb-barchart__legend-label {
white-space: pre-line;
overflow-wrap: anywhere;
display: block;
overflow: visible;
}
.fnb-barchart__legend-label {
white-space: pre-line;
overflow-wrap: anywhere;
}
.fnb-barchart--legend-top .fnb-barchart__legend-heading,
.fnb-barchart--legend-bottom .fnb-barchart__legend-heading {
flex-basis: 100%;
}
button.fnb-barchart__legend-item {
cursor: pointer;
}
.fnb-barchart__legend-item.is-off {
opacity: .28;
}
.fnb-barchart__marker {
width: var(--fnb-legend-icon-size);
height: var(--fnb-legend-icon-size);
display: block;
transform: rotate(45deg);
border: max(1px, calc(var(--fnb-legend-icon-size) / 9)) solid currentColor;
}
.fnb-barchart__charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
gap: var(--fnb-chart-gap);
min-width: 0;
}
.fnb-barchart__panel {
min-width: 0;
}
.fnb-barchart__chart-title {
margin: 0 0 14px;
margin-block: 0 14px;
text-align: center;
font-size: clamp(1rem, 1.4vw, 1.35rem);
line-height: 1.16;
font-weight: 400;
}
.fnb-barchart .fnb-barchart__chart-title:empty,
.fnb-barchart .fnb-barchart__title:empty {
display: none !important;
margin: 0 !important;
}
.fnb-barchart__chart-title strong {
font-weight: 700;
}
.fnb-barchart__scroller {
max-width: 100%;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.fnb-barchart__svg {
display: block;
width: 100%;
min-width: 0;
max-width: 100%;
height: auto;
overflow: visible;
}
.fnb-barchart__band {
fill: var(--fnb-chart-band);
}
.fnb-barchart__vertical-grid {
fill: #fff;
pointer-events: none;
}
.fnb-barchart__zero,
.fnb-barchart__axis {
stroke: var(--fnb-chart-axis);
stroke-width: 1.5;
}
.fnb-barchart__axis-arrow {
fill: var(--fnb-chart-axis);
stroke: none;
}
.fnb-barchart__tick,
.fnb-barchart__category,
.fnb-barchart__axis-title {
fill: var(--fnb-chart-text);
font-size: 15px;
}
.fnb-barchart__area-line {
stroke-width: 1.6;
}
.fnb-barchart__area,
.fnb-barchart__area-line,
.fnb-barchart__point-dot {
pointer-events: none;
}
.fnb-barchart__axis-layer {
pointer-events: none;
}
.fnb-barchart__axis-title {
font-weight: 600;
}
.fnb-barchart__bar {
transition: fill .16s ease, opacity .16s ease;
}
.fnb-barchart.has-hover .fnb-barchart__bar:hover {
fill: var(--fnb-hover-color);
}
.fnb-barchart__point {
cursor: pointer;
opacity: 0;
transition: opacity .16s ease, fill .16s ease;
}
.fnb-barchart.has-hover .fnb-barchart__point:hover {
opacity: 0;
}
.fnb-barchart__tooltip {
position: fixed;
z-index: 999999;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
background: var(--fnb-tooltip-bg);
color: var(--fnb-tooltip-color);
border-radius: 5px;
padding: 8px 11px 9px;
font-size: var(--fnb-tooltip-font-size);
line-height: 1.25;
box-shadow: 0 10px 24px rgba(25, 35, 36, .18);
min-width: max-content;
max-width: min(280px, calc(100vw - 24px));
transition: opacity .12s ease, transform .12s ease;
}
.fnb-barchart__tooltip::after {
content: "";
position: absolute;
left: var(--fnb-tooltip-arrow-x, 50%);
bottom: -7px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid var(--fnb-tooltip-bg);
}
.fnb-barchart__tooltip.is-below::after {
top: -7px;
bottom: auto;
border-top: 0;
border-bottom: 7px solid var(--fnb-tooltip-bg);
}
.fnb-barchart__tooltip.is-visible {
opacity: 1;
transform: translateY(0);
}
.fnb-barchart__tooltip-title {
display: block;
font-weight: 800;
margin: 0 0 4px;
}
.fnb-barchart__tooltip-row {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.fnb-barchart__tooltip-marker {
width: .85em;
height: .85em;
flex: 0 0 auto;
background: var(--fnb-tip-series-color);
background: color-mix(in srgb, var(--fnb-tip-series-color), white 42%);
border: 2px solid var(--fnb-tip-series-color);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .65);
}
.fnb-barchart__empty {
border: 1px solid #dbe3df;
padding: 16px;
background: #fff;
}
.fnb-barchart-editor__preview {
border: 1px solid #dbe3df;
padding: 16px;
background: #fff;
}
.fnb-barchart-editor__preview .fnb-barchart {
margin-top: 12px;
}
.fnb-barchart-editor__meta {
color: #6f7779;
font-size: 13px;
line-height: 1.4;
}
.fnb-barchart-editor__upload {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
}
.fnb-barchart-editor__file {
display: none;
}
.fnb-barchart-editor__imported,
.fnb-barchart-editor__status {
flex-basis: 100%;
font-size: 12px;
line-height: 1.35;
}
.fnb-barchart-editor__imported {
color: #6f7779;
}
.fnb-barchart-editor__status {
color: #303b3d;
}
.fnb-barchart-editor__manual {
border-top: 1px solid #e3e8e5;
border-bottom: 1px solid #e3e8e5;
display: grid;
gap: 10px;
margin: 12px 0 14px;
padding: 14px 0;
}
.fnb-barchart-editor__dataset {
background: #fff;
border: 1px solid #dbe3df;
display: grid;
gap: 10px;
padding: 10px;
}
.fnb-barchart-editor__dataset-head {
align-items: end;
display: grid;
gap: 8px;
grid-template-columns: minmax(0, 1fr) auto;
}
.fnb-barchart-editor__dataset-controls {
display: grid;
gap: 10px;
}
.fnb-barchart-editor__manual-rows {
display: grid;
gap: 6px;
}
.fnb-barchart-editor__manual-row {
align-items: end;
display: grid;
gap: 6px;
grid-template-columns: 32px minmax(0, 1fr) 92px 32px;
}
.fnb-barchart-editor__manual-sort {
display: grid;
gap: 4px;
}
.fnb-barchart-editor__manual-sort .components-button {
height: 24px;
min-width: 32px;
padding: 0;
}
.fnb-barchart-editor__manual-row .components-base-control {
margin-bottom: 0;
}
.fnb-barchart-editor__manual-row .components-button {
justify-content: center;
min-width: 32px;
}
.fnb-barchart-editor__series-color {
border-top: 1px solid #e3e8e5;
padding-top: 14px;
margin-top: 14px;
}
.fnb-barchart-editor__series-title {
color: #303b3d;
font-weight: 700;
margin-bottom: 10px;
}
.fnb-barchart-editor__legend-manager {
border-top: 1px solid #e3e8e5;
display: grid;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
}
.fnb-barchart-editor__legend-entry {
background: #fff;
border: 1px solid #dbe3df;
display: grid;
gap: 8px;
padding: 8px;
}
.fnb-barchart-editor__legend-entry.is-heading {
background: #f7faf8;
}
.fnb-barchart-editor__legend-entry-name {
color: #6f7779;
font-size: 12px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 4px;
overflow-wrap: anywhere;
}
.fnb-barchart-editor__legend-actions {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.fnb-barchart-editor__legend-entry .components-base-control {
margin-bottom: 0;
}
.fnb-barchart-editor__legend-entry textarea {
min-height: 54px;
}
.fnb-mini-editor__device-switcher { grid-column:1 / -1; }
.fnb-device-switcher { display:inline-flex;gap:.35rem;margin:0 0 .75rem; }
.fnb-device-switcher__button { display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid transparent;border-radius:50%;background:#edeff2;color:#50575e;font:600 .8rem/1 sans-serif;cursor:pointer; }
.fnb-device-switcher__button:hover { background:#e2e4e7;color:#1e1e1e; }
.fnb-device-switcher__button:focus-visible { outline:2px solid #3858e9;outline-offset:2px; }
.fnb-device-switcher__button.is-active { border-color:#3858e9;background:#3858e9;color:#fff; }
.fnb-responsive-legend-control { margin-bottom:.25rem; }
.fnb-responsive-legend-control > .components-button.is-link { margin-top:-1rem;margin-bottom:.75rem; }
.fnb-format-actions { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem; }
@media (max-width: 760px) {
.fnb-barchart--legend-left .fnb-barchart__layout,
.fnb-barchart--legend-right .fnb-barchart__layout {
grid-template-columns: minmax(0, 1fr);
}
.fnb-barchart--legend-right .fnb-barchart__charts {
order: 0;
}
.fnb-barchart__legend {
max-width: none;
}
.fnb-barchart__legend-item {
max-width: none;
}
.fnb-barchart.has-mobile-legend-stacked .fnb-barchart__legend {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
max-width: none;
}
.fnb-barchart.has-mobile-legend-stacked .fnb-barchart__legend-item {
width: 100%;
}
.fnb-barchart__svg {
min-width: 0;
}
}
@media (max-width: 780px) {
.fnb-barchart--legend-left .fnb-barchart__layout,
.fnb-barchart--legend-right .fnb-barchart__layout {
grid-template-columns: 1fr;
}
.fnb-barchart--legend-right .fnb-barchart__charts {
order: 0;
}
.fnb-barchart__legend {
flex-direction: row;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 12px;
}
.fnb-barchart--legend-top-stacked .fnb-barchart__legend,
.fnb-barchart--legend-bottom-stacked .fnb-barchart__legend {
flex-direction: column;
}
.fnb-barchart__charts {
grid-template-columns: 1fr;
}
}
@media (max-width: 1023px) {
.fnb-barchart { --fnb-legend-width:var(--fnb-legend-width-tablet);--fnb-legend-gap:var(--fnb-legend-gap-tablet);--fnb-legend-item-gap:var(--fnb-legend-item-gap-tablet);--fnb-legend-font-size:var(--fnb-legend-font-size-tablet);--fnb-legend-heading-font-size:var(--fnb-legend-heading-font-size-tablet);--fnb-legend-icon-size:var(--fnb-legend-icon-size-tablet); }
.fnb-barchart--tablet-legend-left .fnb-barchart__layout { grid-template-columns:max-content minmax(0,1fr); }
.fnb-barchart--tablet-legend-right .fnb-barchart__layout { grid-template-columns:minmax(0,1fr) max-content; }
.fnb-barchart--tablet-legend-top .fnb-barchart__layout,.fnb-barchart--tablet-legend-bottom .fnb-barchart__layout,.fnb-barchart--tablet-legend-top-stacked .fnb-barchart__layout,.fnb-barchart--tablet-legend-bottom-stacked .fnb-barchart__layout { grid-template-columns:minmax(0,1fr); }
.fnb-barchart--tablet-legend-left .fnb-barchart__legend,.fnb-barchart--tablet-legend-top .fnb-barchart__legend,.fnb-barchart--tablet-legend-top-stacked .fnb-barchart__legend { order:0; }
.fnb-barchart--tablet-legend-left .fnb-barchart__charts,.fnb-barchart--tablet-legend-top .fnb-barchart__charts,.fnb-barchart--tablet-legend-top-stacked .fnb-barchart__charts { order:1; }
.fnb-barchart--tablet-legend-right .fnb-barchart__charts,.fnb-barchart--tablet-legend-bottom .fnb-barchart__charts,.fnb-barchart--tablet-legend-bottom-stacked .fnb-barchart__charts { order:0; }
.fnb-barchart--tablet-legend-right .fnb-barchart__legend,.fnb-barchart--tablet-legend-bottom .fnb-barchart__legend,.fnb-barchart--tablet-legend-bottom-stacked .fnb-barchart__legend { order:1; }
.fnb-barchart--tablet-legend-top .fnb-barchart__legend,.fnb-barchart--tablet-legend-bottom .fnb-barchart__legend { flex-direction:row;flex-wrap:wrap;max-width:none; }
.fnb-barchart--tablet-legend-top-stacked .fnb-barchart__legend,.fnb-barchart--tablet-legend-bottom-stacked .fnb-barchart__legend { flex-direction:column;max-width:none; }
}
@media (max-width: 767px) {
.fnb-barchart { --fnb-legend-width:var(--fnb-legend-width-mobile);--fnb-legend-gap:var(--fnb-legend-gap-mobile);--fnb-legend-item-gap:var(--fnb-legend-item-gap-mobile);--fnb-legend-font-size:var(--fnb-legend-font-size-mobile);--fnb-legend-heading-font-size:var(--fnb-legend-heading-font-size-mobile);--fnb-legend-icon-size:var(--fnb-legend-icon-size-mobile); }
.fnb-barchart--mobile-legend-left .fnb-barchart__layout,.fnb-barchart--mobile-legend-right .fnb-barchart__layout,.fnb-barchart--mobile-legend-top .fnb-barchart__layout,.fnb-barchart--mobile-legend-bottom .fnb-barchart__layout,.fnb-barchart--mobile-legend-top-stacked .fnb-barchart__layout,.fnb-barchart--mobile-legend-bottom-stacked .fnb-barchart__layout { grid-template-columns:minmax(0,1fr); }
.fnb-barchart--mobile-legend-left .fnb-barchart__legend,.fnb-barchart--mobile-legend-top .fnb-barchart__legend,.fnb-barchart--mobile-legend-top-stacked .fnb-barchart__legend { order:0; }
.fnb-barchart--mobile-legend-left .fnb-barchart__charts,.fnb-barchart--mobile-legend-top .fnb-barchart__charts,.fnb-barchart--mobile-legend-top-stacked .fnb-barchart__charts { order:1; }
.fnb-barchart--mobile-legend-right .fnb-barchart__charts,.fnb-barchart--mobile-legend-bottom .fnb-barchart__charts,.fnb-barchart--mobile-legend-bottom-stacked .fnb-barchart__charts { order:0; }
.fnb-barchart--mobile-legend-right .fnb-barchart__legend,.fnb-barchart--mobile-legend-bottom .fnb-barchart__legend,.fnb-barchart--mobile-legend-bottom-stacked .fnb-barchart__legend { order:1; }
.fnb-barchart--mobile-legend-left .fnb-barchart__legend,.fnb-barchart--mobile-legend-right .fnb-barchart__legend,.fnb-barchart--mobile-legend-top-stacked .fnb-barchart__legend,.fnb-barchart--mobile-legend-bottom-stacked .fnb-barchart__legend { flex-direction:column;flex-wrap:nowrap;max-width:none; }
.fnb-barchart--mobile-legend-top .fnb-barchart__legend,.fnb-barchart--mobile-legend-bottom .fnb-barchart__legend { flex-direction:row;flex-wrap:wrap;max-width:none; }
}