diff --git a/src/modules/advanced/components/AdvancedFilter/index.js b/src/modules/advanced/components/AdvancedFilter/index.js
index 1a823d79..3551b63c 100644
--- a/src/modules/advanced/components/AdvancedFilter/index.js
+++ b/src/modules/advanced/components/AdvancedFilter/index.js
@@ -5,93 +5,48 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const getIsCheckboxFilterChecked = ({ advancedFilter }) => {
-  const hasActiveFilter = advancedFilter.activeFilters?.length > 0;
+  const { activeFilters, conditions } = advancedFilter;
+  const hasActiveFilters = activeFilters?.length > 0;
 
-  if (!hasActiveFilter && advancedFilter.conditions.default === 'checked') {
-    return true;
-  }
-
-  if (hasActiveFilter && advancedFilter.activeFilters[0] === advancedFilter.conditions.checked) {
-    return true;
-  }
-
-  return false;
+  return (!hasActiveFilters && conditions.default === 'checked')
+    || (hasActiveFilters && activeFilters[0] === conditions.checked);
 };
 
 const getDateRangeValue = ({ beginDateQuery, endDateQuery, selectedRange }) => {
-  switch (selectedRange) {
-    case 'Before':
-      if (endDateQuery) {
-        return `before ${endDateQuery}`;
-      }
-      return null;
-    case 'After':
-      if (beginDateQuery) {
-        return `after ${beginDateQuery}`;
-      }
-      return null;
-    case 'Between':
-      if (beginDateQuery && endDateQuery) {
-        return `${beginDateQuery} to ${endDateQuery}`;
-      }
-      return null;
-    case 'In':
-      if (beginDateQuery) {
-        return beginDateQuery;
-      }
-      return null;
-    default:
-      return null;
-  }
+  const dateRanges = {
+    After: beginDateQuery && `after ${beginDateQuery}`,
+    Before: endDateQuery && `before ${endDateQuery}`,
+    Between: (beginDateQuery && endDateQuery) && `${beginDateQuery} to ${endDateQuery}`,
+    In: beginDateQuery
+  };
+
+  return dateRanges[selectedRange] || null;
 };
 
 const getStateDateRangeValues = ({ advancedFilter }) => {
-  if (advancedFilter.activeFilters?.length > 0) {
-    const [filterValue] = advancedFilter.activeFilters;
-
-    // Before
-    if (filterValue.indexOf('before') !== -1) {
-      const values = filterValue.split('before');
-
-      return {
-        stateEndQuery: values[1],
-        stateSelectedRangeOption: 0
-      };
-    }
-
-    // After
-    if (filterValue.indexOf('after') !== -1) {
-      const values = filterValue.split('after');
-
-      return {
-        stateBeginQuery: values[1],
-        stateSelectedRangeOption: 1
-      };
-    }
-
-    // Between
-    if (filterValue.indexOf('to') !== -1) {
-      const values = filterValue.split('to');
-
-      return {
-        stateBeginQuery: values[0],
-        stateEndQuery: values[1],
-        stateSelectedRangeOption: 2
-      };
-    }
+  const rangeValues = {
+    stateSelectedRangeOption: 0
+  };
+  const dates = [null, null];
 
-    // In or other
-    return {
-      stateBeginQuery: filterValue,
-      stateSelectedRangeOption: 3
-    };
+  if (advancedFilter?.activeFilters?.length) {
+    const ranges = ['before', 'after', 'to'];
+    rangeValues.stateSelectedRangeOption = ranges.length;
+    const [filterValue] = advancedFilter.activeFilters;
+    dates.unshift(...filterValue.match(/\d+/gu));
+    ranges.forEach((range, index) => {
+      if (filterValue.includes(range)) {
+        rangeValues.stateSelectedRangeOption = index;
+        if (range === ranges[0]) {
+          dates.unshift(null);
+        }
+      }
+    });
   }
 
-  return {
-    stateBeginQuery: '',
-    stateEndQuery: '',
-    stateSelectedRangeOption: 0
-  };
+  [rangeValues.stateBeginQuery, rangeValues.stateEndQuery] = dates;
+
+  return rangeValues;
 };
 
 const AdvancedFilter = ({ advancedFilter, changeAdvancedFilter }) => {
diff --git a/src/modules/advanced/components/AdvancedSearchForm/index.js b/src/modules/advanced/components/AdvancedSearchForm/index.js
index e2d1bec0..7382ea46 100644
--- a/src/modules/advanced/components/AdvancedSearchForm/index.js
+++ b/src/modules/advanced/components/AdvancedSearchForm/index.js
@@ -18,27 +18,24 @@ const AdvancedSearchForm = ({ datastore }) => {
   const [errors, setErrors] = useState([]);
   const dispatch = useDispatch();
 
-  const fields = useSelector((state) => {
-    return state.advanced[datastore.uid].fields;
+  const { activeFilters: advancedFilters = {}, fieldedSearches, fields } = useSelector((state) => {
+    return state.advanced[datastore.uid] || {};
   });
-  const booleanTypes = useSelector((state) => {
-    return state.advanced.booleanTypes;
-  });
-  const fieldedSearches = useSelector((state) => {
-    return state.advanced[datastore.uid].fieldedSearches;
+  const { booleanTypes } = useSelector((state) => {
+    return state.advanced;
   });
   const institution = useSelector((state) => {
     return state.institution;
   });
-  const activeFilters = useSelector((state) => {
-    const currentFilters = state.advanced[datastore.uid].activeFilters || {};
+  const activeFilters = () => {
+    const currentFilters = advancedFilters;
     Object.keys(currentFilters).forEach((filter) => {
       if (!currentFilters[filter]) {
         delete currentFilters[filter];
       }
     });
     return currentFilters;
-  });
+  };
 
   // Functions wrapped with useCallback to prevent unnecessary re-creation
   const changeFieldedSearch = useCallback(({ booleanType, fieldedSearchIndex, query, selectedFieldUid }) => {
@@ -87,9 +84,9 @@ const AdvancedSearchForm = ({ datastore }) => {
       }, [])
       .join(' ');
 
-    if (query.length > 0 || (Object.keys(activeFilters).length > 0)) {
+    if (query.length > 0 || (Object.keys(activeFilters()).length > 0)) {
       const search = {
-        filter: { ...activeFilters },
+        filter: { ...activeFilters() },
         query
       };
 
@@ -110,7 +107,7 @@ const AdvancedSearchForm = ({ datastore }) => {
       ]);
       window.scrollTo(0, 0);
     }
-  }, [navigate, institution, booleanTypes, fieldedSearches, activeFilters, datastore]);
+  }, [navigate, institution, booleanTypes, fieldedSearches, activeFilters(), datastore]);
 
   return (
     <form className='y-spacing' onSubmit={handleSubmit}>
@@ -132,6 +129,7 @@ const AdvancedSearchForm = ({ datastore }) => {
         return (
           <FieldInput
             key={index}
+            booleanTypes={booleanTypes}
             fieldedSearchIndex={index}
             fieldedSearch={fs}
             fields={fields}
@@ -158,7 +156,7 @@ const AdvancedSearchForm = ({ datastore }) => {
         <Icon icon='search' size={24} /> Advanced Search
       </button>
 
-      <FiltersContainer datastore={datastore} />
+      <FiltersContainer datastoreUid={datastore.uid} />
     </form>
   );
 };
diff --git a/src/modules/advanced/components/FieldInput/index.js b/src/modules/advanced/components/FieldInput/index.js
index dd4dba3d..91ba5c65 100644
--- a/src/modules/advanced/components/FieldInput/index.js
+++ b/src/modules/advanced/components/FieldInput/index.js
@@ -5,6 +5,7 @@ import SearchByOptions from '../../../search/components/SearchByOptions';
 
 const FieldInput = ({
   activeDatastore,
+  booleanTypes,
   changeFieldedSearch,
   fieldedSearch,
   fieldedSearchIndex,
@@ -19,7 +20,7 @@ const FieldInput = ({
       {notFirst && (
         <fieldset className='flex__responsive'>
           <legend className='visually-hidden'>Boolean operator for field {fieldedSearchIndex} and field {fieldedSearchIndex + 1}</legend>
-          {['AND', 'OR', 'NOT'].map((option, index) => {
+          {booleanTypes.map((option, index) => {
             return (
               <label key={index}>
                 <input
@@ -89,6 +90,7 @@ const FieldInput = ({
 
 FieldInput.propTypes = {
   activeDatastore: PropTypes.object,
+  booleanTypes: PropTypes.array,
   changeFieldedSearch: PropTypes.func,
   fieldedSearch: PropTypes.object,
   fieldedSearchIndex: PropTypes.number,
diff --git a/src/modules/advanced/components/FilterList/index.js b/src/modules/advanced/components/FilterList/index.js
new file mode 100644
index 00000000..73cb4e30
--- /dev/null
+++ b/src/modules/advanced/components/FilterList/index.js
@@ -0,0 +1,115 @@
+import './styles.css';
+import '../../../filters/components/Filters/styles.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { Icon } from '../../../reusable';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { setAdvancedFilter } from '../../../advanced';
+
+const FilterList = ({ datastoreUid }) => {
+  const dispatch = useDispatch();
+  const { activeFilters = {}, filters: filterGroup } = useSelector((state) => {
+    return state.advanced[datastoreUid] || {};
+  });
+
+  const filterList = Object.entries(activeFilters).flatMap(([groupUid, filters]) => {
+    const {
+      name = groupUid === 'institution' ? 'Library' : groupUid.charAt(0).toUpperCase() + groupUid.slice(1).replaceAll('_', ' '),
+      type = 'scope_down'
+    } = filterGroup.find((group) => {
+      return group.uid === groupUid;
+    }) || {};
+    return type === 'checkbox'
+      ? []
+      : filters.map((value) => {
+        return { groupUid, name, type, value };
+      });
+  });
+
+  const handleRemoveFilter = ({ groupUid, type, value }) => {
+    const createAction = (overrides = {}) => {
+      dispatch(setAdvancedFilter({
+        ...{
+          datastoreUid,
+          filterGroupUid: groupUid,
+          filterType: type,
+          filterValue: type === 'multiple_select' ? value : null,
+          onlyOneFilterValue: type !== 'multiple_select'
+        },
+        ...overrides
+      }));
+    };
+
+    if (['institution', 'location'].includes(groupUid)) {
+      createAction({ filterGroupUid: 'collection' });
+    }
+
+    if (groupUid === 'institution') {
+      createAction({ filterGroupUid: 'location' });
+    }
+
+    createAction();
+  };
+
+  const handleClearFilters = () => {
+    Object.entries(activeFilters).forEach(([groupUid, filters]) => {
+      filters.forEach(() => {
+        dispatch(setAdvancedFilter({
+          datastoreUid,
+          filterGroupUid: groupUid,
+          filterValue: null,
+          onlyOneFilterValue: true
+        }));
+      });
+    });
+  };
+
+  if (!filterList.length) {
+    return null;
+  }
+
+  return (
+    <section aria-label='active-filters'>
+      <div className='flex margin-bottom__m active-filters-header'>
+        <h2 id='active-filters' className='margin__none h4'>
+          Active filters <span className='text-grey__light'>({filterList.length})</span>
+        </h2>
+        {filterList.length > 1 && (
+          <button
+            className='button-link-light'
+            onClick={(event) => {
+              event.preventDefault();
+              handleClearFilters();
+            }}
+          >
+            Clear all active filters
+          </button>
+        )}
+      </div>
+      <ul className='list__unstyled active-filter-list'>
+        {filterList.map(({ groupUid, name, type, value }) => {
+          return (
+            <li key={`${groupUid}-${value}`}>
+              <button
+                className='padding-y__xs padding-x__s remove-filter underline__hover'
+                onClick={(event) => {
+                  event.preventDefault();
+                  handleRemoveFilter({ groupUid, type, value });
+                }}
+              >
+                {`${name}: ${value}`}
+                <Icon icon='close' />
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+};
+
+FilterList.propTypes = {
+  datastoreUid: PropTypes.string
+};
+
+export default FilterList;
diff --git a/src/modules/advanced/components/FilterList/styles.css b/src/modules/advanced/components/FilterList/styles.css
new file mode 100644
index 00000000..bb8e40fa
--- /dev/null
+++ b/src/modules/advanced/components/FilterList/styles.css
@@ -0,0 +1,33 @@
+.active-filters-header {
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.active-filters-header > .text-grey__light {
+  font-weight: 400;
+}
+
+.active-filter-list {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media screen and (min-width: 640px) {
+  .active-filter-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 820px) {
+  .active-filter-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+
+.active-filter-list > li > button {
+  height: 100%;
+  text-align: left;
+  width: 100%;
+}
diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
index 650867ec..512eb96b 100644
--- a/src/modules/advanced/components/FiltersContainer/index.js
+++ b/src/modules/advanced/components/FiltersContainer/index.js
@@ -1,142 +1,48 @@
-import './styles.css';
 import { useDispatch, useSelector } from 'react-redux';
 import AdvancedFilter from '../AdvancedFilter';
+import FilterList from '../FilterList';
 import getFilters from './getFilters';
 import { Icon } from '../../../reusable';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { setAdvancedFilter } from '../../../advanced';
 
-const ActiveAdvancedFilters = (datastore) => {
-  const currentDatastore = datastore.datastore.uid;
-  const { advanced } = useSelector((state) => {
-    return state;
-  });
-  const activeAdditionalSearchOptions = advanced[currentDatastore].activeFilters;
-  // Check if object exists
-  if (!activeAdditionalSearchOptions) {
-    return null;
-  }
-  // Remove properties that have undefined values
-  Object.keys(activeAdditionalSearchOptions).forEach((option) => {
-    if (!activeAdditionalSearchOptions[option]) {
-      delete activeAdditionalSearchOptions[option];
-    }
+const FiltersContainer = ({ datastoreUid }) => {
+  const dispatch = useDispatch();
+  const { activeFilters, filters: filterGroups } = useSelector((state) => {
+    return state.advanced[datastoreUid] || {};
   });
+  const filters = getFilters({ activeFilters, filterGroups });
 
-  const filterGroups = {};
-  advanced[currentDatastore].filters.forEach((filterGroup) => {
-    filterGroups[filterGroup.uid] = { ...filterGroup };
-  });
+  const changeAdvancedFilter = ({ filterGroupUid, filterType, filterValue }) => {
+    const baseFilter = {
+      datastoreUid,
+      filterGroupUid,
+      filterType,
+      filterValue,
+      onlyOneFilterValue: true
+    };
+    const actions = [];
+    const createAction = (overrides = {}) => {
+      actions.push(setAdvancedFilter({ ...baseFilter, ...overrides }));
+    };
 
-  const items = Object.keys(activeAdditionalSearchOptions).reduce((acc, group) => {
-    // Just don't show the checkbox filters as active filter items.
-    if (!filterGroups[group] || filterGroups[group].type !== 'checkbox') {
-      const activeFiltersToAdd = activeAdditionalSearchOptions[group].map((value) => {
-        return { group, value };
-      });
-      return [...acc, ...activeFiltersToAdd];
+    if (filterType === 'scope_down' && ['institution', 'location'].includes(filterGroupUid) && filterValue) {
+      createAction({ filterGroupUid: 'collection', filterValue: null });
+      if (filterGroupUid === 'institution') {
+        createAction({ filterGroupUid: 'location', filterValue: null });
+      }
     }
-    return acc;
-  }, []);
-
-  if (!items.length) {
-    return null;
-  }
-
-  const titleCase = (string) => {
-    return string.toLowerCase().split('_').map((word) => {
-      return word.replace(word[0], word[0].toUpperCase());
-    }).join(' ');
-  };
-
-  return (
-    <section aria-label='active-filters'>
-      <h2
-        id='active-filters'
-        className='u-margin-top-none margin-bottom__xs h4'
-      >
-        Active filters
-        {' '}
-        <span className='text-grey__light padding-right__xs'>
-          ({items.length})
-        </span>
-      </h2>
-
-      <p className='font-small u-margin-top-none'>
-        Unselect active filters through the options below.
-      </p>
-
-      <ul className='margin-top__none active-filter-list'>
-        {items.map((item, index) => {
-          return (
-            <li key={index + item.group + item.value}>
-              <span className='strong'>{filterGroups[item.group]?.name || titleCase(item.group)}:</span> {item.value}
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-};
 
-const FiltersContainer = ({ datastore }) => {
-  const dispatch = useDispatch();
-  const filterGroups = useSelector((state) => {
-    return state.advanced[datastore.uid]?.filters;
-  });
-  const activeFilters = useSelector((state) => {
-    return state.advanced[datastore.uid]?.activeFilters;
-  });
-  const filters = getFilters({ activeFilters, filterGroups });
+    if (['checkbox', 'date_range_input', 'scope_down'].includes(filterType)) {
+      createAction();
+    }
 
-  const changeAdvancedFilter = ({ filterGroupUid, filterType, filterValue }) => {
-    switch (filterType) {
-      case 'scope_down':
-        // Clear active filters
-        if (['institution', 'location'].includes(filterGroupUid) && filterValue) {
-          dispatch(setAdvancedFilter({
-            datastoreUid: datastore.uid,
-            filterGroupUid: 'collection',
-            filterType,
-            onlyOneFilterValue: true
-          }));
-          if (filterGroupUid === 'institution') {
-            dispatch(setAdvancedFilter({
-              datastoreUid: datastore.uid,
-              filterGroupUid: 'location',
-              filterType,
-              onlyOneFilterValue: true
-            }));
-          }
-        }
-        dispatch(setAdvancedFilter({
-          datastoreUid: datastore.uid,
-          filterGroupUid,
-          filterType,
-          filterValue,
-          onlyOneFilterValue: true
-        }));
-        break;
-      case 'checkbox':
-      case 'date_range_input':
-        dispatch(setAdvancedFilter({
-          datastoreUid: datastore.uid,
-          filterGroupUid,
-          filterValue,
-          onlyOneFilterValue: true
-        }));
-        break;
-      case 'multiple_select':
-        dispatch(setAdvancedFilter({
-          datastoreUid: datastore.uid,
-          filterGroupUid,
-          filterValue
-        }));
-        break;
-      default:
-        break;
+    if (filterType === 'multiple_select') {
+      createAction({ onlyOneFilterValue: false });
     }
+
+    actions.forEach(dispatch);
   };
 
   if (filters?.length === 0) {
@@ -147,7 +53,7 @@ const FiltersContainer = ({ datastore }) => {
 
   return (
     <>
-      <ActiveAdvancedFilters datastore={datastore} />
+      <FilterList datastoreUid={datastoreUid} />
       <h2 className='heading-large'>Additional search options</h2>
       <div className='advanced-filters-inner-container'>
         {filterGroupings.map((filterGroup, groupIndex) => {
@@ -198,7 +104,7 @@ const FiltersContainer = ({ datastore }) => {
 };
 
 FiltersContainer.propTypes = {
-  datastore: PropTypes.object
+  datastoreUid: PropTypes.string
 };
 
 export default FiltersContainer;
diff --git a/src/modules/advanced/components/FiltersContainer/styles.css b/src/modules/advanced/components/FiltersContainer/styles.css
deleted file mode 100644
index cf379c8d..00000000
--- a/src/modules/advanced/components/FiltersContainer/styles.css
+++ /dev/null
@@ -1,8 +0,0 @@
-#active-filters > .text-grey__light {
-  font-weight: 400;
-}
-
-.active-filter-list {
-  font-size: 0.9rem;
-  margin-left: 2.5rem;
-}
diff --git a/src/modules/advanced/components/NarrowSearchTo/index.js b/src/modules/advanced/components/NarrowSearchTo/index.js
index 0a32bd28..fac82fb3 100644
--- a/src/modules/advanced/components/NarrowSearchTo/index.js
+++ b/src/modules/advanced/components/NarrowSearchTo/index.js
@@ -2,45 +2,35 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const NarrowSearchTo = ({ handleChange, options }) => {
-  return (
-    <>
-      {options.map((option) => {
-        const { activeFilter, filters, label } = option;
-
-        if (filters.length <= 1) {
-          return null;
-        }
-
-        const slug = `narrow-search-to-${label.toLowerCase().replaceAll(' ', '-')}`;
-
-        return (
-          <fieldset className='narrow-search-to-dropdown-container' key={slug}>
-            <legend className='visually-hidden'>Narrow Search Options</legend>
-            <label htmlFor={slug}>
-              {label}
-            </label>
-            <select
-              className='narrow-search-to-dropdown'
-              id={slug}
-              onChange={(event) => {
-                return handleChange({ uid: option.uid, value: event.target.value });
-              }}
-              value={activeFilter}
-              autoComplete='off'
-            >
-              {filters.map((opt, index) => {
-                return (
-                  <option key={`${slug}-${index}`} value={opt}>
-                    {opt}
-                  </option>
-                );
-              })}
-            </select>
-          </fieldset>
-        );
-      })}
-    </>
-  );
+  return options
+    .filter(({ filters }) => {
+      return filters.length > 1;
+    })
+    .map(({ activeFilter, filters, label, uid }, index) => {
+      const slug = `narrow-search-to-${label.toLowerCase().replaceAll(' ', '-')}`;
+      return (
+        <fieldset className={`advanced-filter-fieldset ${index > 0 ? 'margin-top__xs' : ''}`} key={slug}>
+          <legend className='visually-hidden'>Narrow Search Options</legend>
+          <label htmlFor={slug}>{label}</label>
+          <select
+            id={slug}
+            onChange={(event) => {
+              return handleChange({ uid, value: event.target.value });
+            }}
+            value={activeFilter}
+            autoComplete='off'
+          >
+            {filters.map((opt, index) => {
+              return (
+                <option key={`${slug}-${index}`} value={opt}>
+                  {opt}
+                </option>
+              );
+            })}
+          </select>
+        </fieldset>
+      );
+    });
 };
 
 NarrowSearchTo.propTypes = {
diff --git a/src/modules/core/components/Multiselect/index.js b/src/modules/core/components/Multiselect/index.js
index 3c16e8e8..b69377cd 100644
--- a/src/modules/core/components/Multiselect/index.js
+++ b/src/modules/core/components/Multiselect/index.js
@@ -55,11 +55,12 @@ const Multiselect = ({ descriptionText, filterGroupUid, handleSelection, options
             if (!showOnlySelectedOptions || (showOnlySelectedOptions && option.checked)) {
               return (
                 <li className='multiselect-options-list-item' key={index}>
-                  <MultiselectOption
+                  <Checkbox
+                    isChecked={option.checked}
+                    label={option.name}
                     handleClick={() => {
                       return handleOptionSelection(option, index);
                     }}
-                    option={option}
                   />
                 </li>
               );
@@ -95,18 +96,3 @@ Multiselect.propTypes = {
 };
 
 export default Multiselect;
-
-const MultiselectOption = ({ option, handleClick }) => {
-  return (
-    <Checkbox
-      isChecked={option.checked}
-      label={option.name}
-      handleClick={handleClick}
-    />
-  );
-};
-
-MultiselectOption.propTypes = {
-  handleClick: PropTypes.func,
-  option: PropTypes.object
-};
diff --git a/src/modules/filters/components/Filters/styles.css b/src/modules/filters/components/Filters/styles.css
index bc142c33..b2e6082e 100644
--- a/src/modules/filters/components/Filters/styles.css
+++ b/src/modules/filters/components/Filters/styles.css
@@ -14,6 +14,7 @@
   border: solid 1px var(--ds-color-green-200);
   border-radius: 4px;
   color: var(--ds-color-green-500);
+  cursor: pointer;
   display: flex;
   gap: 0.5rem;
   justify-content: space-between;
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index f0da8811..9a7553b4 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -1918,14 +1918,6 @@ body {
   width: 100%;
 }
 
-.narrow-search-to-dropdown-container + .narrow-search-to-dropdown-container {
-  margin-top: 0.5rem;
-}
-
-.narrow-search-to-dropdown {
-  width: 100%;
-}
-
 .advanced-fields-container {
   padding: 1.5rem;
   border-radius: 4px;