.detalhesPedido-header-pagina {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.detalhes-pedido-container {
    /* width: 75%; */
    /* margin: auto; */
}

.detalhesPedido-header-pagina-right {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: flex-end;
    flex: 1;
}

.detalhesPedido-produto {
    margin-top:10px;
    margin-left:10px;
    background:#fff;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e3e3;
}

.detalhesPedido-produto-imagem {
    width:130px;
    height:130px;
    object-fit:contain;
    border-radius:8px;
    margin-right:10px;
    cursor: pointer;
    border: 1px solid #eee;
}

.detalhesPedido-produto-referencia {
    font-size:17px;
    font-weight:600;
    color:#666;
}

.detalhesPedido-produto-descricao {
    color:#777;
}

.detalhesPedido-produto-linha-valores {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}

.detalhesPedido-produto-valor {
    display: flex;
    flex-direction: column;
    min-width: 100px;
    flex: 1 1 auto;
}

.detalhesPedido-produto-valor label {
    /* font-size: 0.75rem; */
    margin-bottom: 2px; 
}

.detalhesPedido-produto-valor span {
    /* font-size: 0.95rem; */
    font-weight: 500;
}

.detalhesPedido-produto-header,
.detalhesPedido-cor-header {
    display:flex;
    position: relative;
}

.detalhesPedido-cor-header::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 20px;
    width: 20px;
    height: 4px;
    background: #ececec;
}

.detalhesPedido-cor {
    position: relative;
    margin-left: 28px;
    padding-left: 22px;
    margin-top: 18px;
}

.detalhesPedido-cor::before {
    content: "";
    position: absolute;
    left: 0;
    top: -12px;
    bottom: -12px;
    width: 3px;
    background: #ececec;
}

.detalhesPedido-cor:last-child::before {
    bottom: calc(100% - 20px);
}

.detalhesPedido-cor-imagem {
    width:90px;
    height:90px;
    object-fit:contain;
    border-radius:6px;
    margin-right:15px;
    cursor: pointer;
}

.detalhesPedido-cor-valores {
    margin-top:5px;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.detalhesPedido-cor-nome {
    color:#777;
    font-weight:600;
}

.detalhesPedido-total {
    font-size:18px;
    font-weight:600;
}

.detalhesPedido-input-pesquisa {
    width:100%;
    margin-top: 10px;
}

.detalhesPedido-nota-fiscal {
    margin-bottom:15px;
    border-bottom:1px solid #eee;
    padding-bottom:15px;
}

.detalhesPedido-nota-fiscal-header {
    display:grid;
    grid-template-columns:40px repeat(7,1fr);
    gap:15px;
    align-items:center;
    cursor: pointer;
    background-color: white;
}

.detalhesPedido-nota-fiscal-header:hover {
    background-color: #9999991a;
}

.detalhesPedido-nota-produtos {
    margin-left:35px;
    margin-right:35px;
    border-left:2px solid #999;
    padding-left:15px;
    padding-right:15px;
}

.detalhesPedido-nota-produtos-header,
.detalhesPedido-nota-produto {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    gap:5px;
    padding:4px 0;
}

.detalhesPedido-nota-produto {
    border-bottom:1px solid #eee;
}

.btn-abrir-nota-desktop {
    margin-left: 28px;
    display: inline-block;
}

.btn-abrir-nota-mobile {
    display: none;
    width: 100%;
}

.detalhesPedido-observacao {
    margin-left: 10px;
}

@media(max-width:991px) {

    .detalhesPedido-nota-fiscal-header {
        grid-template-columns:150px repeat(2,1fr);
    }

    .detalhesPedido-nota-produtos {
        margin-left:0;
        margin-right: 0;
        overflow-x:auto;
    }

    .detalhesPedido-nota-produtos-header,
    .detalhesPedido-nota-produto {
        min-width:600px;
    }

    .btn-abrir-nota-desktop {
        display: none;
    }
    
    .btn-abrir-nota-mobile {
        display: inline-block;
    }

}

@media (max-width: 767px) {

    .detalhesPedido-cor-imagem {
        width: 65px;
        height: 65px;
    }

    .detalhesPedido-header-pagina {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .detalhesPedido-header-pagina-right {
        width: 100%;
        justify-content: flex-start;
    }

    .detalhesPedido-produto-linha-valores {
        flex-direction: column;
        gap: 8px;
    }
    
    .detalhesPedido-produto-valor{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

}