/* =========================================================
   SOLAR DASHBOARD
   ========================================================= */

.flow {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.6s ease;
    stroke-dasharray: 2 16;
}


/* FLUJO ACTIVO */

.flow.active {
    opacity: 0.95;
}


/* COLORES */

.flow-pv {
    stroke: #F5A623;
}

.flow-ac {
    stroke: #E5E9F0;
}

.flow-batt {
    stroke: #34D399;
}

.flow-grid {
    stroke: #60A5FA;
}

.flow-load {
    stroke: #F87171;
}


/* ANIMACIÓN HACIA ADELANTE */

@keyframes flowForward {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -180;
    }

}


/* ANIMACIÓN HACIA ATRÁS */

@keyframes flowReverse {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 180;
    }

}


/* DIRECCIÓN NORMAL */

.flow.dir-fwd {

    animation-name: flowForward;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}


/* DIRECCIÓN INVERSA */

.flow.dir-rev {

    animation-name: flowReverse;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}


/* CONTENEDOR */

#solar-dash-root {

    width: 100%;
    max-width: 1920px;
    margin: 0 auto;

}


/* SVG */

#solar-svg {

    width: 100%;
    height: auto;
    display: block;

}