.mfl-side-filters {
    user-select: none;
    /* this doesn't need to be "aligned" to anything; however "the user's attention should be drawn to the
     * main filters first" */
    margin-top: 100px; 
    display: flex;
    flex-direction: column;
    gap: var(--large-gap);
}

.mfl-side-filters-header {
    font-weight: bold;
    font-size: 20px;
}

.mfl-side-filter-groups {
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
}

.side-filter-checkbox-items {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.side-filter-checkbox-item {
    text-wrap: nowrap;
    max-width: 200px;
    display: flex;
    gap: var(--small-gap);
    align-items: center;
}

.side-filter-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-filter-count {
    color: var(--secondary-text-color);
    font-size: 0.85rem;
}

.side-filter-group {
}

.side-filter-header {
    font-weight: bold;
    cursor: pointer;
    text-wrap: nowrap;
    display: flex;
    gap: var(--small-gap);
    align-items: center;
}

/* the paddings in HiACommon are much too large for this */
.side-filter-content[data-this-is-collapsed] {
    padding-top: var(--small-gap);
    padding-bottom: var(--small-gap);
}

.side-filter-content .mfl-wide {
    width: 100%;
}