/* ------------------ */
/* Styling bar charts */
/* ------------------ */

:root {
    --bm-bar-chart-internal-standard-size: var(--bm-bar-chart-standard-size, var(--bm-standard-size, 0.5rem));
    --bm-bar-chart-internal-column-gap: var(--bm-bar-chart-column-gap, var(--bm-column-gap, 15px));
    --bm-bar-chart-internal-dimmed-color: var(--bm-bar-chart-dimmed-color, var(--bm-dimmed-color, #999999));
}

/* Super groups */
/* .bm-bar-chart,
.bm-radar-root {} */

.bm-bar-chart {
    display: grid;
    grid-template-columns: auto;
    /* row-gap: var(--bm-bar-chart-internal-standard-size); */
}

.bm-title {
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin-bottom: var(--bm-bar-chart-internal-standard-size);
}

.bm-subtitle {
    color: var(--bm-bar-chart-internal-dimmed-color);
    text-align: center;
    /* margin-bottom: var(--bm-bar-chart-internal-standard-size); */
    margin-top: calc(-1 * var(--bm-bar-chart-internal-standard-size));
    font-size: 90%;
    margin-bottom: var(--bm-bar-chart-internal-standard-size);
}

.bm-axis {
    margin-bottom: var(--bm-bar-chart-internal-standard-size) !important;
}

.bm-row,
.bm-legend {
    display: grid;
    grid-template-columns: minmax(200px, 30%) auto;
    grid-template-areas: "name bar";
    column-gap: var(--bm-bar-chart-internal-column-gap);
    margin-bottom: calc(var(--bm-bar-chart-internal-standard-size) / 2);
}

.bm-legend {
    grid-template-areas: "title items";
    margin-top: var(--bm-bar-chart-internal-column-gap);
}

.bm-legend-title {
    grid-area: title;
    text-align: right;
}

.bm-legend-item {
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    display: inline-block;
    border: 1px solid #fff;
    text-shadow: 2px 0px 1px #000, 0px 2px 1px #000, -1px 0px 0px #000, 0px -1px 0px #000;
}


.bm-key-title,
.bm-bar-title,
.bm-tooltip-key-title,
.bm-tooltip-value-title {
    color: var(--bm-bar-chart-internal-dimmed-color);
    text-align: center;
    font-size: 90%;
}

.bm-key-title {
    grid-area: name;
}

.bm-bar-title {
    grid-area: bar;
    border-bottom: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    position: relative;
}

.bm-bar-min {
    position: absolute;
    left: 0px;
    bottom: 0px;
    transform: translate(-25%, 50%);
    background-color: #343a40;
    padding-right: 5px;
}

.bm-bar-max {
    position: absolute;
    right: 0px;
    bottom: 0px;
    transform: translate(25%, 50%);
    background-color: #343a40;
    padding-left: 5px;
}

.bm-bar-final-value {
    position: absolute;
    right: 0px;
    bottom: 50%;
    transform: translate(120%, 50%);
}

.bm-width-marker-top {
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 7px;
}

.bm-width-marker-top:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0px;
    height: 8px;
    width: calc(100% + 8px);
    transform: translate(-50%, 100%);
    border-left: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-right: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-top: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-radius: 5px 5px 0 0;
}

.bm-width-marker-bottom {
    position: relative;
    border-bottom: 1px solid var(--bm-bar-chart-internal-dimmed-color);
}

.bm-width-marker-bottom:after,
.bm-width-marker-bottom:before {
    content: '';
    position: absolute;
    bottom: 0px;
    height: 33%;
    border-left: 1px solid var(--bm-bar-chart-internal-dimmed-color);
}

.bm-width-marker-bottom:after {
    right: 0px;
}

.bm-width-marker-bottom:before {
    left: 0px;
}

.bm-key {
    grid-area: name;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.bm-bar {
    grid-area: bar;
    display: grid;
}

.bm-bar-element {
    border: 1px solid #fff;
    border-left-width: 0px;
    /* overflow: hidden; */
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 60%;
    max-height: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.bm-bar:hover>.bm-bar-element,
.bm-legend-item:hover {
    box-shadow: 0 0 5px 1px white;
}

.bm-bar-element:first-of-type {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-left-width: 1px;
}

.bm-bar-empty-space {
    border: 1px solid red;
    background-color: grey;
}

.bm-bar-element:nth-last-of-type(1) {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


.bm-bar-group-1 {
    background-color: #7cb5ec;
}

.bm-bar-group-2 {
    background-color: #434348;
}

.bm-bar-group-3 {
    background-color: #90ed7d;
}

.bm-bar-group-4 {
    background-color: #f7a35c;
}

.bm-bar-group-5 {
    background-color: #8085e9;
}

.bm-bar-group-6 {
    background-color: #f15c80;
}

.bm-bar-group-7 {
    background-color: #e4d354;
}

.bm-bar-group-8 {
    background-color: #2b908f;
}

.bm-bar-group-9 {
    background-color: #f45b5b;
}

.bm-bar-group-10 {
    background-color: #91e8e1;
}

.bm-bar-group-11 {
    background-color: #c41f3b;
}

.bm-bar-group-12 {
    background-color: #a330c9;
}

.bm-bar-group-13 {
    background-color: #ff7d0a;
}

.bm-bar-group-14 {
    background-color: #33937F;
}

.bm-bar-group-15 {
    background-color: #abd473;
}

.bm-bar-group-16 {
    background-color: #69ccf0;
}

.bm-bar-group-17 {
    background-color: #00ff96;
}

.bm-bar-group-18 {
    background-color: #f58cba;
}

.bm-bar-group-19 {
    background-color: #ffffff;
}

.bm-bar-group-20 {
    background-color: #fff569;
}

.bm-bar-group-20 {
    background-color: #0070de;
}

.bm-bar-group-20 {
    background-color: #9482c9;
}

.bm-bar-group-20 {
    background-color: #c79c6e;
}



.bm-tooltip-container {
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.1rem;
    padding: 10px;
}

.bm-tooltip-title {
    font-size: 120%;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 10px;
}

.bm-tooltip-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "key value";
    column-gap: 15px;
}

.bm-tooltip-key-title {
    grid-area: key;
}

.bm-tooltip-value-title {
    grid-area: value;
}

.bm-tooltip-key,
.bm-tooltip-value {
    text-align: center;
}

.bm-tooltip-key {
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    display: inline-block;
    border: 1px solid #fff;
    text-shadow: 2px 0px 1px #000, 0px 2px 1px #000, -1px 0px 0px #000, 0px -1px 0px #000;
}

.bm-tooltip-width-marker-bottom {
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 7px;
}

.bm-tooltip-width-marker-bottom:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0px;
    height: 8px;
    width: calc(100% + 8px);
    transform: translate(-50%, 100%);
    border-left: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-right: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-top: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-radius: 5px 5px 0 0;
}

.bm-tooltip-width-marker-top {
    position: relative;
    padding-top: 5px;
    margin-top: 7px;
}

.bm-tooltip-width-marker-top:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0px;
    height: 8px;
    width: calc(100% + 8px);
    transform: translate(-50%, -100%);
    border-left: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-right: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-bottom: 1px solid var(--bm-bar-chart-internal-dimmed-color);
    border-radius: 0 0 5px 5px;
}

.bm-unit {
    font-size: 80%;
    color: var(--bm-bar-chart-internal-dimmed-color);
}


/* ---------- */
/* Stat table */
/* ---------- */
.bm-stat-table {
    /* display: table; */
    /* I expected 45px but for some reason 2 additional pixels appear... */
    line-height: 43px;
    text-align: left;
}

.bm-stat-floater {
    float: right;
}

.bm-stat-header {
    display: table-header-group;
}

.bm-stat-row {
    display: table-row;
}

.bm-stat-cell {
    display: table-cell;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: middle;
}

.bm-stat-cell-stat {
    text-align: right;
}

/* ------------------- */
/* Styling radar chart */
/* ------------------- */

/* ---------------------------------- */
/* | bm-radar-root                  | */
/* | ------------------------------ | */
/* | | bm-radar-top               | | */
/* | ------------------------------ | */
/* | ------------------------------ | */
/* | | bm-radar-center            | | */
/* | | -------------------------- | | */
/* | | | Ratio | Radar | Maxima | | | */
/* | | -------------------------- | | */
/* | ------------------------------ | */
/* ---------------------------------- */
.bm-radar-root {
    justify-content: center;
}

.bm-radar-top {
    display: grid;
    grid-template-columns: auto;
    row-gap: var(--bm-bar-chart-internal-standard-size);
}

.bm-radar-center {
    /* might ned to be a grid to enable mobile devices */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "a b c";
    gap: 1.1rem;
    justify-content: center;
    /* align-items: center;
    align-self: center;
    align-content: center; */
}

@media (width <=850px) {
    .bm-radar-center {
        grid-template-columns: 2fr 3fr;
        grid-template-rows: auto;
        grid-template-areas:
            "a b"
            "c c";
    }
}

.bm-radar-main-radar {
    display: flex;
    align-items: center;
}

.bm-radar-background {
    fill: none;
    stroke: white;
    stroke-width: 1;
    stroke-opacity: 0.7;
    text-anchor: middle;
}

.bm-radar-legend {
    fill: white;
    fill-opacity: 0.7;
    text-anchor: middle;
}

.bm-radar-object {
    fill: aqua;
    stroke: aqua;
    stroke-width: 3;
    fill-opacity: 0.2;
    stroke-opacity: 0.9;
}

.bm-radar-object-value {
    paint-order: stroke;
    stroke: black;
    stroke-width: 2px;
    text-anchor: middle;
    fill: white;
}

.bm-radar-mini-table-value {
    display: table-cell;
    padding-left: 5px;
    vertical-align: middle;
    text-align: right;
}