header img  {
    display: block;
    margin: 0 auto;
}
header span{
    position: absolute;
    top: 36%;
    left: 18%;
    font-size: 28px;
    color: #fff;
}

/* Ensure the main element fits the viewport */
.login-main {
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove any extra padding */
}

.para{
    margin-left: 13%;
    width: 75%;
}
.btn-success{
    margin-left: 42%;
    margin-top: 2%;
    cursor: pointer;
}

#beschrijving {
    font-size: 16px;
}

#type {
    font-size: 14px;
}

#bijvoegsel {
    font-size: 12px;
}

.card-text {
    margin-top: 0; /* Remove top whitespace */
    margin-bottom: 0;
}

.card-text small {
    font-size: 12px; /* Make the text smaller */
}

/*H titles css */
h5{
    color: var(--title-text-color);
}

h4{
    color: var(--title-text-color);
}

h3{
    color: var(--title-text-color);
}
h2{
    color: var(--title-text-color);
}
h1{
    color: var(--title-text-color);
}
section{
    margin-top:20px;
}

.bootstrap-timepicker-widget .fa-chevron-up, 
.bootstrap-timepicker-widget .fa-chevron-down {
    color: #000; /* Change to a visible color, e.g., black */
    font-size: 16px; /* Adjust the icon size if necessary */
}

.main-container {
    margin-top: 150px; /* Adjust as needed */
    width: 700px;
}

/*Submit button css */
button[type="submit"]:not(.btn.btn-link, .btn-success, .btn-warning, .btn-info){
    border: none; /* Removes the border */
    background-color: var(--submit-button-color); 
}


/*Submit button css */
button[type="filterButton"]:not(.btn.btn-link, .btn-success, .btn-warning, .btn-info){
    border: none; /* Removes the border */
    background-color: var(--nav-button-color); 
}

/* Style for the select button */
.select-btn {
    background-color: var(--submit-button-color);
    color: white; /* Set the text color to white */
    border: none; /* Remove the border */
    transition: background-color 0.3s ease, color 0.3s ease; /* Add a smooth hover effect */
}

/* Hover effect for the button */
.select-btn:hover {
    background-color: var(--select-button-color); /* Darker blue on hover */
    color: white; /* Ensure text remains white */
}

.custom-select:focus {
    border-color: var(--select-button-color); /* Highlight border on focus */
    outline: none; /* Remove default outline */
}

.nav-buttons {
    border: none; /* Removes the border */
    background-color: var(--nav-button-color);
}

.nav-buttons-collapse {
    border: none; /* Removes the border */
    background-color: var(--nav-collapse-button-color);
}

.accordion-collapse {
    margin-top: 1rem; /* Adjust the value as needed */
}

/*Table css */
table {
    background-color: var(--tableBody-default-backgroundColor);
    margin: 0;
    border-radius: 15px; /* Apply rounding to all corners */
    }
/* Change the background color of the table header */
.table thead {
    background-color: var(--tableHead-backgroundColor);
    color: white;
    border-top-left-radius: 15px; /* Apply rounding to top-left */
    border-top-right-radius: 15px; /* Apply rounding to top-right */
    overflow: hidden; /* Clip corners if needed */
}

/* Change the background color of the table body */
.table tbody {
    background-color: var(--tableBody-default-backgroundColor); /* Replace with your desired color */
}

/* Optional: Style the rows inside the body */
.table tbody tr {
    background-color: var(--tableBody-default-backgroundColor); /* Default row color */
}

/* Default styling for the table container */
.table-container {
    border-radius: 15px; /* Rounded corners */
    overflow: auto; /* Hide overflow by default */
}
/* Optional: Add a hover effect on rows 
.table tbody tr:hover {
    background-color: #e9ecef; 
}
*/
/* Logo Nav */
.logo-image-nav {
    max-width: 200px; /* Maximum width */
    max-height: 200px; /* Maximum height */
    width: auto; /* Adjust width automatically */
    height: auto; /* Adjust height automatically */
    object-fit: contain; /* Ensures the image scales without distortion */
}

/* Logo Nav */
.logo-image-login {
    max-width: 250px; /* Maximum width */
    max-height: 250px; /* Maximum height */
    width: auto; /* Adjust width automatically */
    height: auto; /* Adjust height automatically */
    object-fit: contain; /* Ensures the image scales without distortion */
}

/* Admin table */
    .table-row-past {
        background-color: var(--past-backgroundColor); /* Light gray */
    }

    .table-row-future {
        background-color: var(--current-backgroundColor); /* Light green */
    }

    .table-row-future-other-day {
        background-color: var(--futher-backgroundColor); /* Light blue */
    }

    .color-legend, 
    .color-legend-notDone,
    .color-legend-done {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border: 1px solid #3d3d3d; /* Default border for color-legend */
}

    .color-legend-notDone {
        background-color: var(--notDone-backgroundColor); /* Specific background color */
    }

    .color-legend-done {
        background-color: var(--done-backgroundColor); /* Specific background color */
    }



    /* Styles for active and inactive rows in product, cat and ingredients */
    .table-row-active {
        background-color: var(--tableBody-default-backgroundColor); /* Active color */
    }

    .table-row-inactive {
        background-color: var(--tableBody-notActive-backgroundColor); /* Inactive color */
    }

/* Styles for orders done or not done */
    .table-row-afgewerkt {
        background-color: var(--done-backgroundColor); /* Light gray for Afgewerkt */
    }

    .table-row-onafgewerkt {
        background-color: var(--notDone-backgroundColor); /* Light red for Onafgewerkt */
    }


/* Styles for the legend */    /* General styling for the legend and search filters */
    .legend-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.8em;
        margin-bottom: 1em; /* Add spacing between legend and search fields */
    }
    
    .search-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }

    /* Center the container and cards */
    .product-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Center the cards horizontally */
        align-items: center; /* Center the cards vertically if needed */
    }
    /* Custom styles for product cards */
    .product-card {
        min-width: 300px; /* Prevent the card from shrinking too much */
        max-width: 600px; /* Optional: Limit the maximum width */
        margin: 10px; /* Add spacing between cards */
        flex: 1 1 auto; /* Allow the card to grow and shrink */
    }

    .label-large {
        font-size: 1.2rem; /* Larger font size for the label */
    }
    
    .text-small {
        font-size: 0.9rem; /* Smaller font size for the paragraph */
        color: #6c757d; /* Optional: Muted text color */
    }

    .price-container {
        display: inline-flex;
        align-items: center;
        white-space: nowrap; /* Prevent wrapping */
    }
    
    .price {
        margin-left: 0.2em; /* Add a small space between € and the price */
    }