:root{--bar-colour: #0079c1;--border-image: linear-gradient(
        45deg,
        #0079c1 9.38%,
        #fff 9.38%,
        #fff 50%,
        #0079c1 50%,
        #0079c1 59.38%,
        #fff 59.38%,
        #fff 100%
    );--background-image: repeating-linear-gradient(
        45deg,
        #0072b6 0,
        #0072b6 2px,
        transparent 0,
        transparent 50%
    );background-color:#fff;background-size:12px 12px;--bar-width: 1px;--delay: 0.1s;--duration: 0.3s;--width-formula: 0;--border-formula: 0;--usage: 0;--base-rate: 0}.heating-chart h3{grid-area:header;grid-column:1 / span 1}ul.options{border-left:1px solid #0079c1;padding:10px 0}.heating-chart ul li{column-gap:10px;display:flex;flex-wrap:wrap;position:relative;width:fit-content}li div.hidden,.detail{display:none}.amount{background-image:linear-gradient-repeat(45deg, #0079c1 9.38%, #fff 9.38%, #fff 50%, #0079c1 50%, #0079c1 59.38%, #fff 59.38%, #fff 100%);border-left-width:calc((var(--base-rate) / 4500) * 500px) solid #0079c1;color:#004369;font-weight:bolder;order:1}.amount::before{background-color:var(--bar-colour);border:1px solid #0079c1;content:'';display:inline-block;height:1.5rem;margin-bottom:-5px;margin-right:5px;width:calc((var(--bar-width) / 4500) * 500px)}.label{order:2}.detail{grid-column:1 / span 2}.details{column-gap:0.5rem;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr 1fr;order:3;padding:10px;right:0;width:100%}.details span{display:grid;grid-auto-flow:column;justify-self:start;order:unset}.details .label::before,#chart-legend span.option::before{background-color:#e7f2f8;border:1px solid #0079c1;border-radius:50%;content:'';display:inline-block;height:1rem;margin-right:4px;margin-top:3px;width:1rem}div.details .label.base-charge::before{background-color:#0079c1}.pumps .amount::before{background-color:#fff;background-image:repeating-linear-gradient(45deg, #0072b6 0, #0072b6 2px, transparent 0, transparent 50%);background-size:12px 12px}.gas .amount::before{background-image:none;border-left:calc((var(--base-rate) * 500px) / 4500) solid #0079c1;width:calc((var(--usage) * 500px) / 4500);--bar-colour: #e7f2f8}.oil{--background-image: none;--bar-colour: #0079c1}.propane .amount::before{--bar-colour: #004369;background-image:none;border-left:calc((var(--base-rate) / 4500) * 500px) solid #0079c1;width:calc((var(--usage) / 4500) * 500px)}.propane .details .label::before{background-color:#004369}div.electricity .amount::before{--bar-colour: #fff;background-color:#fff;background-image:radial-gradient(#0072b6 2px, transparent 2px),radial-gradient(#0072b6 2px, transparent 2px);background-position:0 0, 6px 6px;background-repeat:repeat;background-size:12px 12px;grid-row:auto / span 2}.line-chart-container{display:grid;grid-template-columns:60px auto;overflow-x:hidden}div#chart{overflow-x:scroll;position:relative}div#chart-legend{grid-column:1 / span 2}div#chart-legend ul{list-style:none;padding:0}div#chart-legend ul li{display:grid;grid-template-areas:'option cost' 'stats stats'}div#chart-legend ul li .option{grid-area:option;justify-self:start}div#chart-legend ul li .cost{justify-self:end}div#chart-legend ul li .stats{font-size:smaller;grid-area:stats;grid-column:1 / span 2}#guide{left:0;position:absolute;top:0}#nat-gas span.option::before{background-color:#0072b6}#electricity span.option::before{background-color:#48a841}#ground-source span.option::before{background-color:#004369}#air-source span.option::before{background-color:#00aeef}#fuel span.option::before{background-color:#f59421}#propane span.option::before{background-color:#c9252c}