.energy{
    --w: 300;
    --h: 200;
    --p: 5px;

    --bw: 780;
    --bh: 474;

    --sw: calc(var(--w) / var(--bw));
    --sh: calc(var(--h) / var(--bh));
    --s: calc((var(--sw) + var(--sh)) / 2);

    --tip-overlap: 0px;
    --tag-overlap: 1px;
    --bar-left-pad: 5px;

    box-sizing: border-box;
    width: calc(var(--w) * 1px);
    height: calc(var(--h) * 1px);
    padding: var(--p);
    overflow: hidden;
    background: #d9d9d9;
    font-family: Arial, Helvetica, sans-serif;

    --gap-x: max(4px, calc(10px * var(--sw)));
    --gap-y: max(2px, calc(6px * var(--sh)));
    --radius: max(2px, calc(3px * var(--s)));

    --pad-left-title: max(4px, calc(10px * var(--sw)));
    --header-h: max(20px, calc(20px * var(--sh)));
    --header-mb: max(3px, calc(6px * var(--sh)));

    --col-values: calc(var(--w) * 0.19px);

    /* subtract top+bottom padding */
    --inner-h: calc((var(--h) * 1px) - (var(--p) * 2));

    --row-h: calc(
        (var(--inner-h) - var(--header-h) - var(--header-mb) - (6 * var(--gap-y)))
        / 7
    );

    --tip-w: round(nearest, max(8px, calc(32px * var(--sw))), 1px);

    --title-size: max(6px, calc(13px * var(--s)));
    --head-size: max(6px, calc(10px * var(--s)));
    --head-sub-size: max(5px, calc(9px * var(--s)));
    --grade-size: max(12px, calc(26px * var(--s)));
    --label-size: max(6px, calc(10px * var(--s)));
    --value-size: max(9px, calc(18px * var(--s)));

    --bar-pad-left: max(4px, calc(10px * var(--sw)));
    --grade-gap: max(3px, calc(7px * var(--sw)));

    --tag-h: max(12px, calc(var(--row-h) * 0.58));
    --tag-pad-x: max(4px, calc(10px * var(--sw)));
    --tag-tip: max(3px, calc(6px * var(--sw)));
    --tag-min-w: max(28px, calc(50px * var(--sw)));

    --bar-start: 180px;

    --a: calc((var(--bar-start) +   0px) * var(--sw));
    --b: calc((var(--bar-start) +  44px) * var(--sw));
    --c: calc((var(--bar-start) +  82px) * var(--sw));
    --d: calc((var(--bar-start) + 120px) * var(--sw));
    --e: calc((var(--bar-start) + 157px) * var(--sw));
    --f: calc((var(--bar-start) + 196px) * var(--sw));
    --g: calc((var(--bar-start) + 224px) * var(--sw));

    --cell-bg: #fff;
    --tag-bg: #111;
    --ca: #179846;
    --cb: #2cb63d;
    --cc: #9bc62b;
    --cd: #e1df08;
    --ce: #efb115;
    --cf: #e56f1d;
    --cg: #ff1f1f;
}

.energy *{
    box-sizing:border-box;
}
.energy{
    box-sizing: border-box;
    width: calc((var(--w) * 1px));
    height: calc(var(--h) - 15px);
    padding: var(--p, 0px);
}

.energy .header{
    display:grid;
    grid-template-columns: minmax(0, 1fr) var(--col-values) var(--col-values);
    column-gap:var(--gap-x);
    align-items:end;
    /*height:var(--header-h);*/
    margin-bottom:var(--header-mb);
}

.energy .row{
    display:grid;
    grid-template-columns: minmax(0, 1fr) var(--col-values) var(--col-values);
    column-gap:var(--gap-x);
    align-items:center;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.energy .title{
    font-size:var(--title-size);
    font-weight:800;
    color:#111;
    padding-left:var(--pad-left-title);
    line-height:2.2;
    text-transform:uppercase;
}

.energy .hcol{
    text-align:center;
    color:#222;
    line-height:1.05;
    min-width:0;
}

.energy .hcol strong{
    display:block;
    font-size:var(--head-size);
    font-weight:600;
    margin-bottom:max(1px, calc(2px * var(--sh)));
}

.energy .hcol span{
    display:block;
    font-size:var(--head-sub-size);
    font-weight:500;
}

.energy .rows{
    display:grid;
    row-gap:var(--gap-y);
}

.energy .bar-cell,
.energy .value-cell{
    height: round(nearest, var(--row-h), 1px);
    background:var(--cell-bg);
    border-radius:var(--radius);
    position:relative;
    min-width:0;
}

.energy .bar{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:var(--bar-w);
    max-width:calc(100% - var(--tip-w));
    background:var(--bar-c);
    border-radius:var(--radius) 0 0 var(--radius);
    display:flex;
    align-items:center;
    padding-left:var(--bar-pad-left);
    color:#fff;
    min-width:0;
    overflow:visible;
}

.energy .bar::after{
    content:"";
    position:absolute;
    top:0;
    right:calc(-1 * var(--tip-w) + var(--tip-overlap));
    width:0;
    height:0;
    border-top:calc(var(--row-h) / 2) solid transparent;
    border-bottom:calc(var(--row-h) / 2) solid transparent;
    border-left:calc(var(--tip-w) + var(--tip-overlap)) solid var(--bar-c);
}
.energy .grade{
    font-size:var(--grade-size);
    font-weight:800;
    line-height:1;
    margin-right:var(--grade-gap);
    color:#fff;
    flex:0 0 auto;
}

.energy .label{
    font-size:var(--label-size);
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    color:#fff;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
    margin-top: 5px;
}

.energy .value-cell{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.energy .tag{
    display:none;
    position:relative;
    height:var(--tag-h);
    min-width:var(--tag-min-w);
    max-width:100%;
    padding:0 var(--tag-pad-x);
    background:var(--tag-bg);
    color:#fff;
    border-radius:max(2px, calc(2px * var(--s)));
    font-size:var(--value-size);
    font-weight:800;
    line-height:1;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
}

.energy .active .tag{
    display:flex;
}

.energy .tag::before{
    content:"";
    position:absolute;
    left:calc(-1 * var(--tag-tip) + var(--tag-overlap));
    top:0;
    width:0;
    height:0;
    border-top:calc(var(--tag-h) / 2) solid transparent;
    border-bottom:calc(var(--tag-h) / 2) solid transparent;
    border-right:calc(var(--tag-tip) + var(--tag-overlap)) solid var(--tag-bg);
}



.energy .a .bar{ --bar-w: var(--a); --bar-c: var(--ca); }
.energy .b .bar{ --bar-w: var(--b); --bar-c: var(--cb); }
.energy .c .bar{ --bar-w: var(--c); --bar-c: var(--cc); }
.energy .d .bar{ --bar-w: var(--d); --bar-c: var(--cd); }
.energy .e .bar{ --bar-w: var(--e); --bar-c: var(--ce); }
.energy .f .bar{ --bar-w: var(--f); --bar-c: var(--cf); }
.energy .g .bar{ --bar-w: var(--g); --bar-c: var(--cg); }