/* Table Styling */
#productTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2vh;
    table-layout: fixed;
}

    #productTable tbody {
        height: 30vh;
        overflow-y: scroll;
        display: block;
        border-collapse: collapse;
        table-layout: fixed;
    }
    #productTable input{
        width:100%;
    }
    #productTable tr td,
    #productTable tr th {
        width: 10vw; /* Set the width of your cells */
    }

    #productTable th,
    #productTable td {
        padding: 8px;
        text-align: center;
        border: 1px solid #ddd;
    }

    /* Header and Body Alignment */
    #productTable thead,
    #productTable tbody tr {
        display: table;
        width: 100%;
    }

/* Even Row Background Color */
tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Header Styling */
#productTable thead {
    background-color: #f2f2f2;
}

/* Row Hover Effect */
#productTable tbody tr:hover {
    background-color: #f5f5f5;
}

/* Delete Button Styling */
.deleteBtn {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
}

    .deleteBtn:hover {
        background-color: #d32f2f;
    }

/* Ensure alignment of header and body */
#productTable th {
    /* Add the same width as td */
    width: 22vh; /* Set this to match your desired width */
}