/* Customized Table Styles -- Customized Table Styles -- Customized Table Styles */

/* Customized Table Styles -- Customized Table Styles -- Customized Table Styles */

.menu-table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 24px;

    display: table; /* Ensure table is displayed by default */

}



.menu-table th, .menu-table td {

    padding: 12px;

    border: 1px solid #e2e8f0;

}



.menu-table th {

    background-color: #f0f4f8;

    color: #2d3748;

    font-size: 16px;

}



.menu-table td {

    font-size: 14px;

    color: #4a5568;

}



@media (max-width: 768px) {

    .menu-table th, .menu-table td {

        padding: 8px;

        font-size: 12px;

    }



    .menu-table {

        display: table; /* Display table on smaller screens */

        width: 100%;

        border-collapse: collapse;

        margin-bottom: 24px;

    }



    .menu-table th, .menu-table td {

        padding: 12px;

        border: 1px solid #e2e8f0;

    }



    .menu-table th {

        background-color: #f0f4f8;

        color: #2d3748;

        font-size: 16px;

    }



    .menu-table td {

        font-size: 14px;

        color: #4a5568;

    }



    /* Show only specific columns on small screens */

    .menu-table td:nth-child(1), .menu-table th:nth-child(1), /* Meal Name */

    .menu-table td:nth-child(3), .menu-table th:nth-child(3), /* Type */

    .menu-table td:nth-child(4), .menu-table th:nth-child(4), /* Quantity Available */

    .menu-table td:nth-child(7), .menu-table th:nth-child(7)  /* Actions (Edit Button) */

    {

        display: table-cell; /* Ensure these columns are displayed */

    }



    .menu-table td:nth-child(2), .menu-table th:nth-child(2), /* Description */

    .menu-table td:nth-child(5), .menu-table th:nth-child(5), /* Price */

    .menu-table td:nth-child(6), .menu-table th:nth-child(6)  /* Status */

    {

        display: none; /* Hide these columns */

    }





}





/* This is used to control Admin Menu Image list */

.image-responsive {

    width: 50%; /* or any percentage you prefer */

    height: auto;

    /* border-radius: 8px; */

    min-width: 50px;

    min-height: 50px;

    max-width: 100%; /* or any percentage you prefer */

    max-height: 150px;

}

/* This is used to control Admin Menu Image list */





/* This is used to control Admin Menu Image list */

.admenu-image-responsive {

    width: 50%; /* or any percentage you prefer */

    height: auto;

    /* border-radius: 8px; */

    min-width: 50px;

    min-height: 50px;

    max-width: 100%; /* or any percentage you prefer */

    max-height: 150px;

}

/* This is used to control Admin Menu Image list */



.owner-image-responsive {

    width: 60%; /* or any percentage you prefer */

    height: auto;

    border-radius: 8px;

    min-width: 100px;

    min-height: 100px;

    max-width: 100%; /* or any percentage you prefer */

    max-height: 250px;

}