.tile {
border: 1px solid silver;


}
.filter-section {
    height: 15vmax;
    width: 15vmax;
    overflow: scroll;
}

.mb-0 li label{
    font-size: 12px;
}
html {
    height: 100%;
    width:100%;
}

body {
    height: 100%;
    margin: 0;
    font-family: Ubuntu;
    background: linear-gradient(#36782A, #39ff00);
    background-color: #808080;
}

a {
    color: #bbbbbb;
}


/*
button {
    background-color: lightyellow;
    border: solid 1px darkgreen;
    border-radius: 12px;
}
*/

#page {
    display: flex;
    height: 90vmax;
    /* calculate the height. Header is 30px */
}

#sideBar {
    width: 10vw;
    background: red;
}

#content {
    flex: 1 0 auto;
    /* enable grow, disable shrink */
}

header {
    height: 55px;
    padding: 0 0 0 0;
    text-align: center;
    align-items: center;
    background: linear-gradient(#444444, #333333);
    color: #bbbbbb;
}

h1 {
    margin: 0;
}

.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
    background-color: #f8f9fa;
}

.category-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
    background-color: #f8f9fa;
    flex-wrap: nowrap;
}

.main-content {
    vertical-align: top;
    display: grid;
    height: calc( 100vh - 5px);
    width: 75vw;
    flex-direction: row;
    flex: 1 0 auto;
}


.sidebar {
    width: 20vw;
    width: 20vmax;
    padding: 5px;
    background-color: #f8f9fa;
}

.product-list {
    flex-grow: 1;
    padding: 5px 0;
    width: 75vw;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
}

.product-card {
    border: 1px solid #ddd;
    padding: 2px;
    text-align: center;
}

.product-card img {
    max-width: 100%;
    height: auto;
}

.product-name {
    font-weight: bold;
    margin: 10px 0;
}

.product-price {
    color: #007bff;
    font-weight: bold;
}

.filter-section {
    margin-bottom: 20px;
}

    .filter-section h5 {
        margin-bottom: 10px;
    }

.filter-option {
    margin-bottom: 5px;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

    .pagination button {
        margin: 0 5px;
    }

#loading {
    display: none;
    text-align: center;
    margin-top: 20px;
}

.error-message {
    color: red;
    text-align: center;
    margin-top: 20px;
}

@media (min-width: 768px) {
/*    .main-content {
        flex-direction: row;
    }
*/
}