/* wykres 1 */

.chart1-container{ position:relative; height:460px; padding-left:80px; padding-top: 30px; }

#chart1 .y-axis{ position:absolute; left:0; bottom:60px; height:400px; width:68px; border-right:2px solid #333; display:flex; flex-direction:column;
justify-content:space-between; text-align:right; padding-right:10px; font-size:12px; }

#chart1 .grid{ position:absolute; left:80px; right:0; bottom:60px; height:400px; display:flex; flex-direction:column; justify-content:space-between; }
#chart1 .grid div{ border-top:1px dashed #ccc; }
#chart1 .chart{ position:absolute; left:80px; right:0; bottom:60px; height:400px; display:flex; align-items:stretch; gap:4px; }
#chart1 .bar-wrapper { flex:1; position:relative; }
#chart1 .bar{ flex:1; background:linear-gradient(to top,#1e90ff,#63b3ff); border-radius:4px 4px 0 0; position:absolute;left:0;right:0;height:0;
    height:0; transition:height 1s ease; }

#chart1 .bar span{ position:absolute; top: -50px; right:0; background:#333; color:#fff; padding:6px 10px;
    border-radius:6px; font-size:12px; opacity:0; transition:.3s; white-space:nowrap; z-index:1; }

#chart1 .bar:hover {background:linear-gradient(to top,#c9282e,#d8464c);}
#chart1 .bar:hover span{opacity:1;}
#chart1 .x-axis{ position:absolute; left:80px; right:0; bottom:0; height:60px; border-top:2px solid #333; display:flex; }
#chart1 .x-label{ flex:12; text-align:center; font-size:12px; margin-top:15px; }

/* wykres 2 */

.chart2-container{ position:relative; height:510px; padding-left:80px; padding-top: 30px; }

#chart2 .y-axis{position:absolute;left:0;bottom:60px;height:450px;width:68px;border-right:2px solid #333;display:flex;flex-direction:column;justify-content:space-between;text-align:right;padding-right:10px;font-size:12px;}
#chart2 .grid{position:absolute;left:80px;right:0;bottom:60px;height:450px;display:flex;flex-direction:column;justify-content:space-between;}
#chart2 .grid div{border-top:1px dashed #ccc;}
#chart2 .zero-line{position:absolute;left:80px;right:0;height:2px;background:#000;}
#chart2 .chart{position:absolute;left:80px;right:0;bottom:60px;height:450px;display:flex;align-items:stretch;gap:4px;}
#chart2 .bar-wrapper{flex:1;position:relative;}
#chart2 .bar{position:absolute;left:0;right:0;height:0;transition:height 1s ease,bottom 1s ease;border-radius:4px 4px 0 0;background:linear-gradient(to top,#1e90ff,#63b3ff);}
#chart2 .bar.negative{background:linear-gradient(to bottom,#e74c3c,#ff7675);border-radius:0 0 4px 4px;}
#chart2 .bar span{position:absolute; top: -50px; right:0;background:#333;color:#fff;padding:6px 10px;border-radius:6px;font-size:12px;opacity:0;transition:.3s;white-space:nowrap; z-index:1; }
#chart2 .bar.negative span{ bottom: -50px; top: auto; }
#chart2 .bar:hover {background:linear-gradient(to top,#c9282e,#d8464c);}
#chart2 .bar.negative:hover {background:linear-gradient(to top,#d8464c,#c9282e);}
#chart2 .bar:hover span{opacity:1;}
#chart2 .x-axis{position:absolute;left:80px;right:0;bottom:0;height:60px;border-top:2px solid #333;display:flex;}
#chart2 .x-label{flex:12;text-align:center;font-size:12px;margin-top:10px;} /* transform:rotate(-90deg);transform-origin:top center; */