/* container com informações do KPI
BEGIN imagem, texto e porcentagem */
.container-info-movimentacao {
    padding: 1.6rem;
}

.section-container {
    position: relative;
    border-bottom: 1px solid var(--color-text);
    border-top: 1px solid var(--color-text);
}



.container-main-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5%;
}

.container-main-info, .div-percentage p, .transporte-porcentagem p {
    text-align: right;
}

.container-main-info > div {
    flex: 1;
}

.container-main-info img {
    width: 20%;
    max-width: 15rem;
    height: auto;
}

.section-title {
    font-size: 1.8rem;
    background-color: var(--bg-panel);
    width: 100%;
    padding: 1rem;
    text-align: center;
}

.container-info-title {
    font-size: 1.6rem;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-text);
    width: 100%;
    margin: 1.6rem 0;
}


.kpi-number, .kpi-percentage {
    /* font-size: 2rem; */
    color: var(--azul-texto);
    font-weight: 900;
}

.pos-number {
    color: var(--verde-texto);
}

.neg-number {
    color: var(--vermelho-texto);
}




/* BEGIN config da lista de movimentacao  */
#carga-produto-header, #produto-lista {
    font-size: 1.2rem;
    width: 80%;
    margin: 0rem auto;
}

#carga-produto-header {
    display: flex;
}

#carga-produto-header > div {
    display: flex;
}


/* .empty-div-header, .lista-header-title, 
.lista-header-title {
    width: 50%;
    display: flex;
} */

.lista-header-title p {
    width: 50%;
}


.produto-valores p, .lista-header-title p {
    text-align: end;
}

#produto-lista li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-list-boundries);
    font-size: 1.4rem;
    padding: 0.2rem 0;

}

.produto-nome, .produto-valores {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.produto-nome, .empty-div-header {
    width: 45%;
    font-weight: bold;
}

.produto-valores, .lista-header-title {
    width: 65%;
}

.produto-valores p {
    width: 50%;
    /* text-align: end; */
}
/* END config da lista de movimentacao */






/* BEGIN kpi container */
.div-percentage, .transporte-porcentagem  {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
/* END kpi container*/

/* BEGIN Transporte */
.container-info-transporte {
    display: flex;
    gap: 1%;
    padding: 1rem;
    border-bottom: 1px solid var(--color-text);
}

.container-info-transporte > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-info-transporte > div:not(.transporte-info-container) {
    flex-direction: column;
}

.container-info-transporte p {
    text-align: center;
}

.container-info-transporte .transporte-valor {
    flex: 2;
    font-weight: bold;
}

/* first and second p elements */
.transporte-valor:nth-child(1), 
.transporte-valor:nth-child(2) {
    font-size: 1.6rem;
}

.transporte-info-container {
    width: 45%;
}


.transporte-info-container > div {
    width: 50%;
}

.container-info-transporte img {
    object-fit: contain;
    width: 15%;
    max-width: 12rem;
    height: auto;
}


/* END Transporte */