.conteudo-principal {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.linha-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.campo {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.campo label {
    font-weight: 500;
    margin-bottom: 10px;
}

.campo input {
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    transition: border 0.3s;
}

.campo input:focus {
    border-color: #007aff;
    outline: none;
}

.campo input[readonly] {
    background-color: #f8f8f8;
    cursor: not-allowed;
}

.conteudo-principal label[for="infocliente"] {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
}

.linha-inferior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}


.campo select {
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    transition: border 0.3s;
}

.campo select:focus {
    border-color: #007aff;
    outline: none;
}
.table-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow-x: auto;
}

#productTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#productTable thead th {
    background-color: #f8f8f8;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #e0e0e0;
}

#productTable tbody td {
    padding: 10px;
    border: 1px solid #e0e0e0;
    font-size: 14px;
}

#productTable tbody th {
    border: 1px solid #e0e0e0;
    padding: 10px;
}

#productTable tbody tr {
    border-bottom: 1px solid #e0e0e0;
}

#productTable tbody tr:hover {
    background-color: #f0f0f0;
}

/* Flex layout for campos */
.campo {
    flex: 1;
    margin-right: 20px;
}

/* Last campo in a row should not have margin-right */
.linha-superior .campo:last-child,
.linha-inferior .campo:last-child {
    margin-right: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .linha-superior, .linha-inferior {
        flex-direction: column;
    }

    .campo {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .campo:last-child {
        margin-bottom: 0;
    }
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header img {
    max-width: 120px;
    height: auto;
    align-self: center;
    margin-bottom: 15px;
}

/* Flex container for buttons */
.buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

button {
    padding: 10px 20px;
    font-size: 14px;
    border: 1px solid #d1d1d6;  /* subtle border */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    background-color: #ffffff;  /* default white background */
    color: #000000;             /* default black text color */
}

button:hover {
    background-color: #f1f1f6;  /* subtle gray on hover */
}

/* Button styles */
button.salvar, button.enviar {
    background-color: #4B8BF4;  
    color: #ffffff;
}

button.salvar:hover, button.enviar:hover {
    background-color: #005ecb;
}

button.voltar, button.sair {
    color: #000000;  
}

button.voltar:hover, button.sair:hover {
    background-color: #f1f1f6;  /* subtle gray on hover */
}

.user-section {
    display: flex;
    flex-direction: column;  /* Organizes child elements vertically */
    gap: 8px;  /* Provides spacing between child elements */
    align-items: flex-start;  /* Aligns child elements to the start (left) */
}

.user-info {
    font-size: 14px;  /* Sets a standard font size */
    color: #333;     /* A slightly dark color for better readability */
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Zebra striping for table rows */
table tr:nth-child(odd) {
    background-color: #f7f7f7;
}

/* Light gray background for buttons */
button {
    background-color: #e0e0e0;
    border: 1px solid #b0b0b0;
    color: #333;
}

button:hover {
    background-color: #d0d0d0;
}


footer .buttons-container .voltar {
    background-color: #f2f2f2 !important;
    color: #333 !important;
    padding: 10px 20px !important;
    border: 1px solid #e0e0e0 !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
    border-radius: 5px !important; 
    margin-left: 10px !important;  
    margin-right: 10px !important; 
}

footer .buttons-container .voltar:hover {
    background-color: #e0e0e0 !important;
}



.header {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);  /* Slight shadow for header */
    padding: 0 20px;  /* Padding on left and right sides of the header */
}

.header img {
    margin-right: 20px;  /* Margin on the right side of the logo image */
}

.header {
    background-color: #ffffff;  /* White background for header */
    margin-bottom: 20px;  /* Margin at the bottom of the header to separate it from the content below */
}