:root {
    --cor-1: #7E6742;
    --cor-2: #B3B3B3;
    --cor-3: #ffffff;
    --cor-4: #594125;
    --cor-erro: #e83c2c;
}

.div-tabela-relatorios{
    overflow-x: auto;
}

.div-tabela-relatorios table{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid var(--cor-2);
}

.div-tabela-relatorios table th, .div-tabela-relatorios table td{
    padding: 8px;
    border: 1px solid var(--cor-2);
}

.div-tabela-relatorios th.center, .div-tabela-relatorios td.center{
    text-align: center;
}

.relatorio-item-pedido{
    display: flex;
    flex-wrap: wrap;
}

.relatorio-item-img {
    flex-basis: 80px;
    padding: 5px;
}

.relatorio-item-det{    
    padding: 0px 10px 10px;
    display: flex;
    flex-direction: column;  
    color: var(--cor-2);      
}

.relatorio-item-det > div{ 
    padding: 2px 0;
}

@media (max-width: 767px) and (orientation:portrait){

    .relatorio-item-pedido{
        flex-wrap: wrap;
    }

    .relatorio-item-img{
        flex-basis: 100px;        
    }

    .relatorio-item-det{
        width: 200px;
    }

    .relatorio-item-det h4{
        font-size: 2vh;
    }
}

.relatorio-item-pedido-cor{
    display: flex;
    padding: 10px;    
    margin-left: 80px;
}

@media (max-width: 767px) and (orientation:portrait){
    .relatorio-item-pedido-cor{   
        margin-left: 0px;
    }
}

.relatorio-item-cor-img{
    padding: 10px;
}

.img-relatorio-item-cor{
    width: 50px; 
}

.relatorio-item-cor-det{
    color: var(--cor-4); 
    font-size: 14px;    
}

@media (min-width: 768px) and (orientation: landscape){
    .relatorio-item-cor-det{
        width: 500px;
    }
}

.relatorio-item-tamanhos{
    display: flex;
}

.relatorio-item-tamanho-item{
    padding-right: 15px;
}

@media (max-width: 767px) {
    .relatorio-item-tamanho-item{
        padding-right: 7px;
    }
}

.relatorio-item-btn{
    align-self: center; 
    margin-left: auto;
    padding: 0px 10px;
}