#sidebarFilters {
    position: fixed;
    top: 56px; /* height of navbar */
    bottom: 0;
    left: 0;
    width: 16.6667%; /* col-md-3 width */
    overflow-y: auto;
    padding-top: 1rem;
    background-color: #f8f9fa;
    z-index: 1020; /* above main content */
}

@media (max-width: 767.98px) {
    #sidebarFilters {
        position: static;
        width: 100%;
        height: auto;
        overflow-y: visible;
        padding-top: 0;
        background-color: transparent;
        z-index: auto;
    }

    main.col-md-9, main.col-lg-10 {
        margin-left: 0;
        height: auto;
        overflow-y: visible;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Animation for horizontal sliding cards */
@keyframes slideHorizontal {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.card-slide-horizontal {
    animation: slideHorizontal 0.5s ease forwards;
}