body {
    font-family: 'Arial', sans-serif;
}
.navbar-custom {
    background-color: #23be96 !important;/* Green */
    border-bottom: 2px solid #ddd;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
    color: #ffffff;
}
.hero-section {
    background: url('https://via.placeholder.com/1200x800') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
    color: white;
}
.feature {
    margin-top: 30px;
}

html, body {
    height: 100%;
    margin: 0;
}
.footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #e7e7e7;
}
.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
}
.main-content {
    flex-grow: 0; /* Prevents content area from growing */
    text-align: center; /* Center content horizontally */
    padding: 15px; /* Optional spacing */
}
.dish-list {
    max-height: 400px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

.footer {
    text-align: center;
    padding: 10px 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content {
    flex: 1;
}
.footer {
    margin-top: auto;
}
.input-group {
    margin-bottom: 15px;
}
.editable:focus {
    background-color: lightyellow;
    border: 1px solid #ddd;
    padding: 0;
    margin: -1px; /* Adjust to match your table's cell padding and border */
}
.table th, .table td {
    padding: 8px; /* Adjust padding as needed */
}
.table {
    margin-top: 20px; /* Space above the table */
}
.custom-table {
    margin: 20px 0; /* Add margin around the table */
}
.custom-table td, .custom-table th {
    min-height: 50px; /* Ensure each cell has a minimum height */
    word-wrap: break-word; /* Break long words to prevent horizontal scrolling */
    padding: 10px; /* Add some padding for better readability */
}
.custom-table td span {
    display: inline-block;
    max-width: 200px; /* Limit supplier name width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevent supplier names from breaking into multiple lines */
}
#ingredientsTable {
    width: 100%; /* Adjust based on your layout needs */
    /* max-width: 960px; /* Prevents the table from being too wide */
    margin: auto; /* Centers the table on the page */
    table-layout: fixed; /* Keeps columns from stretching */
    border-collapse: collapse; /* Cleaner look */
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
#ingredientsTable th, #ingredientsTable td {
    border: 1px solid #ddd; /* Adds border to cells */
    text-align: left; /* Aligns text to the left, adjust as needed */
    padding: 8px; /* Adds padding inside cells for better readability */
}
#ingredientsTable th {
    background-color: #f2f2f2; /* Light gray background for headers */
    font-weight: bold; /* Makes header text bold */
}
#ingredientsTable tr:nth-child(even){background-color: #f9f9f9;} /* Zebra striping for rows */
#ingredientsTable tr:hover {background-color: #ddd;} /* Highlight row on hover */

#DishesTable {
    width: 100%; /* Adjust based on your layout needs */
    /* max-width: 960px; /* Prevents the table from being too wide */
    margin: auto; /* Centers the table on the page */
    table-layout: fixed; /* Keeps columns from stretching */
    border-collapse: collapse; /* Cleaner look */
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
#DishesTable th, #DishesTable td {
    border: 1px solid #ddd; /* Adds border to cells */
    text-align: left; /* Aligns text to the left, adjust as needed */
    padding: 8px; /* Adds padding inside cells for better readability */
}
#DishesTable th {
    background-color: #f2f2f2; /* Light gray background for headers */
    font-weight: bold; /* Makes header text bold */
}
#DishesTable tr:nth-child(even){background-color: #f9f9f9;} /* Zebra striping for rows */
#DishesTable tr:hover {background-color: #ddd;} /* Highlight row on hover */

#suppliersTable {
    width: 100%; /* Adjust based on your layout needs */
    /* max-width: 960px; /* Prevents the table from being too wide */
    margin: auto; /* Centers the table on the page */
    table-layout: fixed; /* Keeps columns from stretching */
    border-collapse: collapse; /* Cleaner look */
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
#suppliersTable th, #suppliersTable td {
    border: 1px solid #ddd; /* Adds border to cells */
    text-align: left; /* Aligns text to the left, adjust as needed */
    padding: 8px; /* Adds padding inside cells for better readability */
}
#suppliersTable th {
    background-color: #f2f2f2; /* Light gray background for headers */
    font-weight: bold; /* Makes header text bold */
}


#usersTable {
    width: 100%; /* Adjust based on your layout needs */
    /* max-width: 960px; /* Prevents the table from being too wide */
    margin: auto; /* Centers the table on the page */
    table-layout: fixed; /* Keeps columns from stretching */
    border-collapse: collapse; /* Cleaner look */
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
#usersTable th, #suppliersTable td {
    border: 1px solid #ddd; /* Adds border to cells */
    text-align: left; /* Aligns text to the left, adjust as needed */
    padding: 8px; /* Adds padding inside cells for better readability */
}
#usersTable th {
    background-color: #f2f2f2; /* Light gray background for headers */
    font-weight: bold; /* Makes header text bold */
}


.btn-primary {
    background: #e0a800 !important;
    border-color: #e0a800 !important;
}

.btn-primary:hover {
    background: #ba8d05 !important;
    border-color: #ba8d05 !important;
}

.btn-outline-primary {
    color: #e0a800 !important;
    border-color: #e0a800 !important;
}

.btn-outline-primary:hover {
    color: #ffffff !important;
    background-color: #e0a800 !important;
}



.btn-success {
    background: #23be96 !important;
    border-color: #23be96 !important;
}

.btn-success:hover {
    background: #146e58 !important;
    border-color: #146e58 !important;
}

.btn-outline-success {
    color: #23be96 !important;
    border-color: #23be96 !important;
}

.btn-outline-success:hover {
    color: #ffffff !important;
    background-color: #146e58 !important;
}



.btn-info {
    background: #35a6de !important;
    border-color: #35a6de !important;
}

.btn-info:hover {
    background: #2a81ad !important;
    border-color: #2a81ad !important;
}

.btn-outline-info {
    color: #35a6de !important;
    border-color: #35a6de !important;
}

.btn-outline-info:hover {
    color: #ffffff !important;
    background-color: #2a81ad !important;
}



.btn-warning {
    background: #ffdf7a !important;
    border-color: #ffdf7a !important;
}

.btn-warning:hover {
    background: #b69b42 !important;
    border-color: #b69b42 !important;
}

.btn-outline-warning {
    color: #b69b42 !important;
    border-color: #b69b42 !important;
}

.btn-outline-warning:hover {
    color: #ffffff !important;
    background-color: #b69b42 !important;
}



.active .page-link {
    background-color: #b03a63 !important;
    border-color: #b03a63 !important;
    color: white !important;
}

.page-link {
    color: #b03a63 !important;
}

.page-link:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #b03a63;

}