/*************************************** Bilans panel *****************************************/
.bilans_panel {
    display: flex;
    flex-wrap: wrap;
    margin: 0 1rem 1rem;
    gap: 1rem;
    min-height: 40rem;
    justify-content: space-between;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/*************************************** Element panelu *****************************************/
.bilans_panel .element {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem #999;
    background-color: white;
    box-sizing: border-box;

    color: #333;
    align-self: flex-start;
}

.bilans_panel .element.podsumowanie {
    grid-column: 1 / -1;
    /* grid-column: 1 / span 2; */

    font-size: 1.1rem;
    letter-spacing: 0.05rem;
}

.bilans_panel .element .flex_row {
    gap: 1rem;
}

.bilans_panel .element .nazwa {
    font-size: 1.75rem;
    color: #444;
}

.bilans_panel .element .komentarz {
    color: var(--redcolor);
}

/************************************************* Wynik ******************************************/
.bilans_panel .element .wynik {
    --kolor: #999;
    border: 0.1em solid var(--kolor);
    border-radius: 50%;
    color: var(--kolor);
 
    display: flex;
    justify-content: center;
    align-items: center;
    align-self:center;
 
    aspect-ratio: 1 / 1;
    margin-left: auto;

    font-size: 2em;
    min-width: 2.5em;
}

.bilans_panel .element.podsumowanie .wynik {
    margin-left: 0;
    
    font-size: 4em;
    min-width: 3em;
}

.bilans_panel .element .wynik.pozytywny {
    --kolor: var(--secondcolor);
}

.bilans_panel .element .wynik.negatywny {
    --kolor: var(--redcolor);
}

/************************************************* Ikona ******************************************/
.bilans_panel .element .ikona {
    height: 5rem;
}

.bilans_panel .element .ikona img {
    height: 100%;
}

/************************************************* Wykres ******************************************/
.bilans_panel .wykresy {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;

    background-color: #eee;

    position: relative;
    transition: 0.25s;
    width: 100%;
    height: var(--wys);
}

.bilans_panel .wykresy.typ-2 {
    height: 12.5em;
}

.bilans_panel .chart-elem {
    transition: 0.25s;
    position: absolute;
    top: var(--ypos);
    left: 0;
}

.bilans_panel .chart-label:before {
    content: "█";
    color: transparent;
    margin-right: -0.75em;
    transition: 0.25s;
}

.bilans_panel .typ-2 .chart-label:before {
    color: var(--kolor);
    margin-right: 0.25em;
}

.bilans_panel .chart-bar {
    height: 1.5em;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    background-color: var(--kolor);
    width: var(--szer);
}

.bilans_panel .typ-2 .chart-bar {
    top: var(--ypos);
    height: 2em;
}

/* Energia wyprodukowana */
.bilans_panel .typ-2 .chart-bar.energyProd {            
    top: 3.5em;
}

/* Energia oddana do sieci */
.bilans_panel .typ-2 .chart-label.energyFedGrid {
    top: 1.5em;
}

.bilans_panel .typ-2 .chart-bar.energyFedGrid {
    top: 3.5em;
}

/* Całkowity pobór energii */
.bilans_panel .typ-2 .chart-label.totalEnergyConsumption {
    top: 8em;
}

.bilans_panel .typ-2 .chart-bar.totalEnergyConsumption {
    top: 5.5em;
}

/* Pobór energii z sieci */
.bilans_panel .typ-2 .chart-label.gridEnergyConsumption {
    top: 9.5em;
}

.bilans_panel .typ-2 .chart-bar.gridEnergyConsumption {
    top: 5.5em;
}

/* Autokonsumpcja energii */
.bilans_panel .typ-2 .chart-label.autoEnergyConsumption {
    top: 11em;
}

.bilans_panel .typ-2 .chart-bar.autoEnergyConsumption {
    left: var(--xpos);
    top: 5.5em;
}

/********************************************** Kreska do średniej *********************************************/
.bilans_panel .chart-line {
    z-index: 101;
    position: absolute;
    left: var(--xpos);
    width: 6px;
    margin-left: -3px;
    height: 1.5rem;
    background-color: #33333399;
    border-radius: 3px;
    transition: 0.25s;
}

.bilans_panel .typ-2 .chart-line {
    margin-top: -2rem;
    height: 4rem;
}

/************************************************* Liczniki ******************************************/
.bilans_panel .element .liczniki button.pokaz {
    font-size: 1rem;
    padding: 0.1rem;
    text-transform: uppercase;
}

.bilans_panel .element .liczniki .lista {
    display: none;
}

.bilans_panel .element .liczniki .lista .licznik-elem {
    border: 1px solid #444;
    border-radius: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0.5rem 0;
    padding: 0.5rem;
}

.bilans_panel .element .liczniki .ikona {
    height: 3rem;
}

.bilans_panel .element .liczniki .nazwa {
    font-size: 1.25rem;
}

.bilans_panel .element .liczniki .wykresy {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}