.filter-bar {
    margin-bottom: 1.5em;
    padding-left: 0;
}

.filter-bar li, .box-filter-search-pill {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    margin: 2.5px;
    padding: calc(var(--default-space) / 2) var(--default-space);   
    background-color: var(--cms-accent-color);
    border-radius: 5px;
}

.filter-bar.multiselect-enabled li, .multiselect-enabled .filter-bar li, .multiselect-enabled .box-filter-search-pill {
    padding-left: calc(var(--default-space) + 7px);
    padding-right: calc(var(--default-space) + 7px);
}

.filter-bar li.current, .filter-bar li:hover, .box-filter-search-pill.current, .box-filter-search-pill:hover {
    background-color: var(--theme-color1);
    color: white;
}

.filter-bar.multiselect-enabled li.current, .multiselect-enabled .filter-bar li.current, .multiselect-enabled .box-filter-search-pill.current {
    padding-left: var(--default-space);
    padding-right: var(--default-space);
}

.filter-bar.multiselect-enabled li .remove-filter, .multiselect-enabled .filter-bar li .remove-filter, .multiselect-enabled .box-filter-search-pill .remove-filter {
    display: inline-block;
    width: 14px;
    text-align: right;
}

/* The "All" button doesn't get an 'x', so we shouldn't reserve space for it */
.filter-bar.multiselect-enabled li[data-filter=""], .multiselect-enabled .filter-bar li[data-filter=""] {
    padding-left: var(--default-space) !important;
    padding-right: var(--default-space) !important;
}

.box-filter-search-container {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.box-filter-search-input {
    width: 17em !important;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 10px;
}