/* THIS FILE IS COPIED FROM THE COMMON LIBRARY AS OF 2025-08-04 16:45:32 GMT. DO NOT EDIT THIS FILE. EDIT THE ORIGINAL IN THE COMMON LIBRARY INSTEAD. */
.agile-chart {
    
    --line-width: 2px;
    --line-color: gray;
    
    position: relative;
    display: grid;
    grid-template-areas:
        "title     title                title          title"
        "subtitle  subtitle             subtitle       subtitle"
        ".         .                    .              units"
        ".         .                    .              group-titles"
        "legend    vertical-axis-title  vertical-axis  body"
        "legend    .                    corner         horizontal-axis"
        "legend    .                    .              horizontal-axis-title";
    grid-gap: 0;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 50px;
    grid-template-rows: min-content min-content min-content min-content 1fr min-content min-content;
    grid-template-columns: min-content min-content min-content 1fr;
}

.agile-chart > * {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    box-sizing: border-box;
}

.agile-chart-title {
    grid-area: title;
    text-align: center;
    padding: 0;
}
.agile-chart-subtitle {
    grid-area: subtitle;
    text-align: center;
    padding: 0 0 16px 0;
    font-size: 75%;
}
.agile-chart-units {
    grid-area: units;
    text-align: right;
    font-size: 50%;
}
.agile-chart-vertical-axis {
    grid-area: vertical-axis;
    text-align: right;
    font-size: 75%;
}
.agile-chart-vertical-axis-spacer {
    opacity: 0;
    visibility: hidden;
    position: relative;
    padding-left: calc(var(--line-width) + 6px);
}
.agile-chart-vertical-axis-label {
    position: absolute;
    right: 0px;
    transform: translate(0, 50%);
}
.agile-chart-vertical-axis-label-text {
    position: relative;
    top: 50%;
    right: calc(var(--line-width) + 6px);
    white-space: nowrap;
}
.agile-chart-vertical-axis-label-tick {
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--line-width));
    transform: translate(0, -50%);
    width: calc(var(--line-width) + var(--line-width) + 4px);
    height: var(--line-width);
    background: var(--line-color);
}
.agile-chart-vertical-axis-title {
    grid-area: vertical-axis-title;
    text-align: center;
    font-size: 75%;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding-left: 8px;
}
.agile-chart-vertical-axis-title:empty {
    padding: 0;
    border: none;
}

.agile-chart-horizontal-axis {
    grid-area: horizontal-axis;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
    text-align: center;
    font-size: 75%;
}

.agile-chart-horizontal-axis-category {
    text-align: center;
    flex-grow: 1;
}
.agile-chart-horizontal-axis-title {
    grid-area: horizontal-axis-title;
    text-align: center;
    font-size: 75%;
    text-transform: uppercase;
}
.agile-chart-group-titles {
    grid-area: group-titles;
    text-align: center;
    font-size: 50%;
    display: flex;
    justify-content: space-between;
}
.agile-chart-group-title {
    text-align: center;
    flex-grow: 1;
    text-decoration: underline;
}
.agile-chart-body {
    grid-area: body;
    text-align: center;
    display: flex;
    justify-content: space-between;
    font-size: 75%;
}
.agile-chart-body-category {
    text-align: center;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
.agile-chart-body-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
}
.agile-chart-body-series {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    border: none;
    background: var(--primary-color);
    color: white;
}
.agile-chart-body-label {
    text-align: center;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-color);
    padding: 4px;
    border-radius: 8px;
    border: solid calc(var(--line-width) / 2) white;
    box-sizing: border-box;
}
.agile-chart-body-label:empty {
    padding: 0;
}
/*
.agile-chart.single-series .agile-chart-body-label {
    top: 0;
    transform: translate(-50%, -100%);
    color: black;
    background: transparent;
}
*/

.agile-chart-legend {
    grid-area: legend;
    text-align: left;
    display: block;
    font-size: 75%;
    padding: 4px;
    height: auto;
    margin-right: 16px;
    overflow: auto;
    direction: rtl;
    
}
.agile-chart-legend:empty {
    padding: 0;
    border: none;
    margin: 0;
}
.agile-chart-legend-item {
    display: block;
    white-space: nowrap;
    border: solid var(--line-width) transparent;
    padding: 2px;
    direction: ltr;
}
.agile-chart-legend-item:not(.series-has-value) {
    display: none;
}
.agile-chart-legend-item-block {
    width: 1em;
    height: 1em;
    margin-right: 0.2em;
    display: inline-block;
    transition: 0.3s;
    vertical-align: middle;
}
.agile-chart-legend-item-text {
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
}
.agile-chart.highlightseries1 .agile-chart-legend-item.series1,
.agile-chart.highlightseries2 .agile-chart-legend-item.series2,
.agile-chart.highlightseries3 .agile-chart-legend-item.series3,
.agile-chart.highlightseries4 .agile-chart-legend-item.series4,
.agile-chart.highlightseries5 .agile-chart-legend-item.series5,
.agile-chart.highlightseries6 .agile-chart-legend-item.series6,
.agile-chart.highlightseries7 .agile-chart-legend-item.series7,
.agile-chart.highlightseries8 .agile-chart-legend-item.series8,
.agile-chart.highlightseries9 .agile-chart-legend-item.series9,
.agile-chart.highlightseries10 .agile-chart-legend-item.series10,
.agile-chart.highlightseries11 .agile-chart-legend-item.series11,
.agile-chart.highlightseries12 .agile-chart-legend-item.series12,
.agile-chart.highlightseries13 .agile-chart-legend-item.series13,
.agile-chart.highlightseries14 .agile-chart-legend-item.series14,
.agile-chart.highlightseries15 .agile-chart-legend-item.series15,
.agile-chart.highlightseries16 .agile-chart-legend-item.series16,
.agile-chart.highlightseries17 .agile-chart-legend-item.series17,
.agile-chart.highlightseries18 .agile-chart-legend-item.series18,
.agile-chart.highlightseries19 .agile-chart-legend-item.series19,
.agile-chart.highlightseries20 .agile-chart-legend-item.series20 {
    border-color: var(--primary-color);
}
.agile-chart.highlightseries1 .agile-chart-body-series.paletteseries1,
.agile-chart.highlightseries2 .agile-chart-body-series.paletteseries2,
.agile-chart.highlightseries3 .agile-chart-body-series.paletteseries3,
.agile-chart.highlightseries4 .agile-chart-body-series.paletteseries4,
.agile-chart.highlightseries5 .agile-chart-body-series.paletteseries5,
.agile-chart.highlightseries6 .agile-chart-body-series.paletteseries6,
.agile-chart.highlightseries7 .agile-chart-body-series.paletteseries7,
.agile-chart.highlightseries8 .agile-chart-body-series.paletteseries8,
.agile-chart.highlightseries9 .agile-chart-body-series.paletteseries9,
.agile-chart.highlightseries10 .agile-chart-body-series.paletteseries10,
.agile-chart.highlightseries11 .agile-chart-body-series.paletteseries11,
.agile-chart.highlightseries12 .agile-chart-body-series.paletteseries12,
.agile-chart.highlightseries13 .agile-chart-body-series.paletteseries13,
.agile-chart.highlightseries14 .agile-chart-body-series.paletteseries14,
.agile-chart.highlightseries15 .agile-chart-body-series.paletteseries15,
.agile-chart.highlightseries16 .agile-chart-body-series.paletteseries16,
.agile-chart.highlightseries17 .agile-chart-body-series.paletteseries17,
.agile-chart.highlightseries18 .agile-chart-body-series.paletteseries18,
.agile-chart.highlightseries19 .agile-chart-body-series.paletteseries19,
.agile-chart.highlightseries20 .agile-chart-body-series.paletteseries20 {
    outline: solid var(--line-width) var(--primary-color);
}



/*
    PALETTES
*/

/* Palette: Patterns (default, no class name required) */
/* Series 1: Solid fill */
.agile-chart .agile-chart-body-label {
    background: var(--primary-color);
}
.agile-chart .paletteseries1 {
    background-color: var(--primary-color);
}
/* Series 2: Diagonal stripes at 45 degrees */
.agile-chart .paletteseries2 {
    background: repeating-linear-gradient(
        45deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    );
}
/* Series 3: Enlarged dots in a radial pattern */
.agile-chart .paletteseries3 {
    background: radial-gradient(circle, var(--primary-color) 40%, transparent 41%);
    background-size: calc(var(--line-width) * 2) calc(var(--line-width) * 2);
}
/* Series 4: Vertical stripes */
.agile-chart .paletteseries4 {
    background: repeating-linear-gradient(
        90deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    );
}
/* Series 5: Diagonal stripes at -45 degrees */
.agile-chart .paletteseries5 {
    background: repeating-linear-gradient(
        -45deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    );
}
/* Series 6: True Checkerboard Pattern */
.agile-chart .paletteseries6 {
    background: repeating-conic-gradient(var(--primary-color) 0 25%, #0000 0 50%) 50% / calc(5 * var(--line-width)) calc(5 * var(--line-width));
}
/* Series 7: Horizontal stripes */
.agile-chart .paletteseries7 {
    background: repeating-linear-gradient(
        0deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    );
}
/* Series 8: Checkerboard pattern 45deg rotated*/
.agile-chart .paletteseries8 {
    background: repeating-linear-gradient(
        45deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    ),
    repeating-linear-gradient(
        -45deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    );
}
/* Series 9: Tiny hollow circles */
.agile-chart .paletteseries9 {
    background: radial-gradient(circle, 
        transparent 0%, 
        transparent calc(1.2 * var(--line-width)), 
        var(--primary-color) calc(1.6 * var(--line-width)), 
        transparent calc(2 * var(--line-width))
    );
    background-size: calc(4 * var(--line-width)) calc(4 * var(--line-width));
}
/* Series 10: Conic gradient creating a circular sector pattern */
.agile-chart .paletteseries10 {
    background: repeating-conic-gradient(
        var(--primary-color) 0deg 15deg,
        transparent 15deg 30deg
    );
    background-size: calc(var(--line-width) * 3) calc(var(--line-width) * 3);
}
/* Series 11: Further scaled-down weave pattern (75% smaller) */
.agile-chart .paletteseries11 {
    background:
        linear-gradient(135deg, var(--primary-color) 3.94px, white 4.13px, white 4.5px, transparent 4.5px, transparent 12.56px, white 12.56px, white 12.94px, transparent 12.94px),
        linear-gradient(225deg, var(--primary-color) 3.94px, white 4.13px, white 4.5px, transparent 4.5px, transparent 12.56px, white 12.56px, white 12.94px, transparent 12.94px) 0 12px;
    background-color: var(--primary-color);
    background-size: 12px 24px;
}
/* Series 12: Waves */
.agile-chart .paletteseries12 {
    background:
        radial-gradient(circle at 100% 50%, transparent 20%, var(--primary-color) 21%,
            var(--primary-color) 34%, transparent 35%, transparent),
        radial-gradient(circle at 0% 50%, transparent 20%, var(--primary-color) 21%, var(--primary-color) 34%, transparent 35%, transparent) 0 -4px;
        background-color: #F8F8F9;
        background-size: 6px 8px;
}
/* Series 13: Zig zag */
.agile-chart .paletteseries13 {
    background:
        linear-gradient(135deg, #F8F8F9 25%, transparent 25%) -4px 0,
        linear-gradient(225deg, #F8F8F9 25%, transparent 25%) -4px 0,
        linear-gradient(315deg, #F8F8F9 25%, transparent 25%),
        linear-gradient(45deg, #F8F8F9 25%, transparent 25%);
        background-size: 8px 8px;
        background-color: var(--primary-color);
}
/* Series 14: Large spaced radial dots */
.agile-chart .paletteseries14 {
    background: repeating-radial-gradient(
        var(--primary-color) 40%, transparent 41%
    );
    background-size: calc(var(--line-width) * 3) calc(var(--line-width) * 3);
}
/* Series 15: Slightly angled stripes at 30 degrees */
.agile-chart .paletteseries15 {
    background: repeating-linear-gradient(
        30deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    );
}
/* Series 16: Reverse diagonal stripes at -60 degrees */
.agile-chart .paletteseries16 {
    background: repeating-linear-gradient(
        -60deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    );
}
/* Series 17: Conic pattern with sectors */
.agile-chart .paletteseries17 {
    background: repeating-conic-gradient(
        var(--primary-color) 0deg 25deg,
        transparent 25deg 50deg
    );
    background-size: calc(var(--line-width) * 3) calc(var(--line-width) * 3);
}
/* Series 18: High-angle diagonal stripes at 150 degrees */
.agile-chart .paletteseries18 {
    background: repeating-linear-gradient(
        150deg,
        var(--primary-color),
        var(--primary-color) var(--line-width),
        transparent var(--line-width),
        transparent calc(var(--line-width) * 2)
    );
}
/* Series 19: Largest radial dots */
.agile-chart .paletteseries19 {
    background: repeating-radial-gradient(
        var(--primary-color) 50%, transparent 51%
    );
    background-size: calc(var(--line-width) * 4) calc(var(--line-width) * 4);
}
/* Series 20: Conic gradient forming fine circular sectors */
.agile-chart .paletteseries20 {
    background: repeating-conic-gradient(
        var(--primary-color) 0deg 10deg,
        transparent 10deg 20deg
    );
    background-size: calc(var(--line-width) * 4) calc(var(--line-width) * 4);
}
/* Palette: Solids */
.agile-chart.solids .agile-chart-body-label {
    background: inherit;
    border: none;
}
.agile-chart.solids .paletteseries1 {
    background: #355269; /* Slate blue */
}
.agile-chart.solids .paletteseries2 {
    background: #3B6A75; /* Deep teal blue */
}
.agile-chart.solids .paletteseries3 {
    background: #4F7F74; /* Muted green teal */
}
.agile-chart.solids .paletteseries4 {
    background: #5A755F; /* Desaturated olive */
}
.agile-chart.solids .paletteseries5 {
    background: #7D7F6A; /* Warm gray olive */
}
.agile-chart.solids .paletteseries6 {
    background: #9E8E71; /* Earthy clay */
}
.agile-chart.solids .paletteseries7 {
    background: #B9A693; /* Desaturated taupe */
}
.agile-chart.solids .paletteseries8 {
    background: #A29C85; /* Soft sand */
}
.agile-chart.solids .paletteseries9 {
    background: #C7B79C; /* Pale khaki beige */
}
.agile-chart.solids .paletteseries10 {
    background: #D1C1A6; /* Faded ivory */
}
.agile-chart.solids .paletteseries11 {
    background: #E1D8CA; /* Porcelain gray */
}
.agile-chart.solids .paletteseries12 {
    background: #C5CED1; /* Slate mist blue */
}
.agile-chart.solids .paletteseries13 {
    background: #B0BFC4; /* Frosted graphite */
}
.agile-chart.solids .paletteseries14 {
    background: #94A3AE; /* Stone blue-gray */
}
.agile-chart.solids .paletteseries15 {
    background: #83929C; /* Muted steel */
}
.agile-chart.solids .paletteseries16 {
    background: #6E7B86; /* Industrial blue */
}
.agile-chart.solids .paletteseries17 {
    background: #5D6A75; /* Graphite navy */
}
.agile-chart.solids .paletteseries18 {
    background: #4D5A65; /* Deepened slate */
}
.agile-chart.solids .paletteseries19 {
    background: #3C4954; /* Charcoal teal */
}
.agile-chart.solids .paletteseries20 {
    background: #2F3B43; /* Smoky ink */
}




/* Classes */
.agile-chart.vertical-axis-border .agile-chart-vertical-axis {
    border-color: var(--line-color);
    border-width: var(--line-width);
    border-style: none solid none none;
}
.agile-chart.horizontal-axis-border .agile-chart-horizontal-axis {
    border-color: var(--line-color);
    border-width: var(--line-width);
    border-style: solid none none none;
    transform: translate(0, calc(var(--line-width) / -2)); /* width of half border */
    z-index: 1;
}