/* Hide on unsupported browsers */
.charts {
display: none;
--fs: 1.8rem;
font-size: var(--fs);
}
.charts + .hr-gap, .anchor-navigation-contentarea .linklist-anchors .link-item > a[href="#ranges"] {
display: none;
}
@supports (--foo: green) {
.charts, .anchor-navigation-contentarea .linklist-anchors .link-item > a[href="#ranges"] {
display: block;
}
}
.charts .wrapper {
display: flex;
gap: 2rem;
}
@media (max-width: 768px) {
.charts .wrapper {
flex-wrap: wrap;
}
}
.charts .wrapper table {
position: relative;
width: 100%;
text-align: right;
}
.charts .wrapper table td {
--p: calc(var(--fs) / 3);
height: calc(var(--fs) + 2 * var(--p));
line-height: calc(var(--fs) + 2 * var(--p));
white-space: nowrap;
padding: 0 !important;
}
.charts .wrapper .chart {
flex: 1 1 100%;
margin-top: 2rem;
display: flex;
align-items: flex-start;
gap: 2rem;
}
@media (min-width: 768px) {
.charts .wrapper .chart {
flex-basis: 20%;
}
.charts .wrapper .chart:first-child {
flex-basis: calc(20% + 200px);
}
.charts .wrapper .chart:first-child table.legend {
flex: 1 1 200px;
}
.charts .wrapper .chart:not(:first-child) table.legend {
display: none;
}
}
.charts .wrapper .chart table.legend {
flex: 1 1 20%;
}
@media (max-width: 400px) {
.charts .wrapper .chart table.legend {
font-size: 3vw;
}
}
.charts .wrapper .chart table.values {
flex: 3 1 auto;
caption-side: bottom;
--rangemin: 0;
--rangemax: 100;
--min: 0;
--max: 100;
--color: #0046ad;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
}
.charts .wrapper .chart table.values:before {
content: attr(data-min);
position: absolute;
left: 0;
bottom: 0em;
}
.charts .wrapper .chart table.values:after {
content: attr(data-max);
position: absolute;
right: 0;
bottom: 0em;
}
.charts .wrapper .chart caption {
font-weight: bold;
text-align: center;
color: inherit;
padding: 0;
/* @media (max-width: 500px) {
opacity: 0;
} */
}
.charts .wrapper .chart td.bar {
position: relative;
}
.charts .wrapper .chart td.bar:before {
content: '';
position: absolute;
top: var(--p);
bottom: var(--p);
left: calc(100% / var(--rangemax) * (var(--min) - var(--rangemin)) + var(--p));
right: calc(100% / var(--rangemax) * (var(--rangemax) - var(--max)) + var(--p));
background-color: var(--color);
border-radius: 2px;
}
.charts .wrapper .chart:hover td.bar:before {
opacity: 0.25;
}
.charts .wrapper .chart:hover td.bar:after {
content: attr(data-legend) " " attr(data-val);
position: absolute;
top: 0;
left: 0;
display: block;
font-size: 0.8em;
text-align: center;
width: 100%;
height: 100%;
}