div.multibarchart {
    font: normal 300 0.9rem "Fira Sans";
    display: flex;
    flex-direction: column;
}

div.multibarchart div.caption {
    order: 2;
}

div.multibarchart ul {
    list-style-type: none;
}

div.multibarchart > ul > li {
    display: flex;
    margin: 1rem 0;
}

div.multibarchart > ul > li > span {
    flex: 0 0 2rem;
    border-right: 1px solid rgb(207, 207, 207);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding-right: 0.3rem;
}

div.multibarchart > ul > li > ul {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    flex: 1 0 auto;
}

@media screen and (min-width: 450px) {
    div.multibarchart > ul > li > ul {
        font-size: 0.9rem;
    }
}

div.multibarchart > ul > li > ul li {
    display: flex;
}

div.multibarchart > ul > li > ul li:nth-child(1) {
    margin-bottom: 0.3rem;
}

div.multibarchart > ul > li > ul li > span {
    margin-right: 0.5rem;
}

div.multibarchart > ul > li > ul li > span:nth-child(1) {
    background: #4a5759 url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12"><path fill="hsl(0 0% 100% / .6)" fill-rule="evenodd" d="M9.8 12 0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z"/></svg>');
    width: calc(var(--value) *  var(--y) * 0.15%);
    height: 18px;
    position: relative;
    border-radius: 0.5rem;
}

div.multibarchart > ul > li > ul li:nth-of-type(odd) > span:nth-child(1) {
    background: #264dfd;
    opacity: 0.9;
}

div.multibarchart > ul > li > ul li > span.animChart {
    animation: fillMultiBarChart 2s ease-in-out;
}

@media (prefers-reduced-motion) {
  div.multibarchart > ul > li > ul li > span.animChart {
    animation: none;
  }
}

@keyframes fillMultiBarChart {
    0% {width: 0;}
    100% {width: calc(var(--value) * var(--y) * 0.15%)}
}