
.filter {
  background: #fff;
  min-width: 19.625rem;
  position: absolute;
  top: 0;
  z-index: 98;
}

@media (max-width: 375px) {  .filter {
    min-width: unset;
  }
}

.filterContainer {
  display: inline-block;
  position: relative;
}

.filterButton {
  display: inline-block;
  padding: 0.4375rem 0.375rem;
}

.filterButton button {
  padding: 0.5rem 0.5rem;
}

.filterButton button:focus {
  outline-offset: 0 !important;
}

.filter.positionStaticMdUp .filterHeader {
  padding-left: 0.625rem !important;
  padding-right: 0.375rem !important;
}

.filter .filterHeader {
  line-height: 1.75rem;
  padding: 0.4375rem 0.375rem;
}

.filter .filterHeader button[data-close] {
  padding: 0.5rem;
}

.filter .filterHeader button[data-close]:focus {
  outline-offset: 0 !important;
}

.filter .filterHeader button[data-reset] {
  padding: 0.5rem;
}

.filter .filterHeader button[data-reset]:focus {
  outline-offset: 0 !important;
}

.filter .filterHeader button[data-back] {
  padding: 0.5rem;
}

.filter .filterHeader button[data-back]:focus {
  outline-offset: 0 !important;
}

.filter .pad {
  padding-top: 1.125rem !important;
  padding-bottom: 1.125rem !important;
}

.filter ul {
  list-style: none;
  padding-left: 0;
}

.filter .filterMenu {
  height: 100%;
  max-height: 26.25rem;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

.filter .filterMenu li button.filterItem {
  padding: 0.6875rem 1.25rem !important;
}

.filter .filterMenu .filterItem {
  position: relative;
  display: flex;
  padding: 0 !important;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.filter .filterMenu .filterItem span {
  padding-top: 0.6875rem;
  padding-bottom: 0.6875rem;
}

.filter .filterMenu .filterItem button {
  padding: 0 1.25rem;
}

.filter .filterMenu .filterItem button:focus {
  outline-offset: -0.125rem;
}

.filter .filterMenu .filterItem:hover {
  background: #f7f8f9;
}

.filter .filterMenu .filterItem:active {
  background-color: #ecedee;
}

.filter .filterMenu .filterItem:focus {
  outline-offset: -0.125rem;
  outline: 1px dashed #53565a !important;
}

.filter .filterMenu .filterItem[aria-selected=true] {
  background-color: #ecedee;
}

.filter .filterMenu .filterItem[aria-selected=true]::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23008767" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.978 10.52l-3.25-3.442a1 1 0 10-1.455 1.373l4 4.236a1 1 0 001.475-.023l8-9a1 1 0 00-1.495-1.328L5.978 10.52z"/></svg>');
  line-height: 1rem;
  position: absolute;
  top: 14px;
  right: 14px;
  height: 14px;
  width: 14px;
}

.filter .filterMenu .filterItem .checkbox {
  width: 100%;
  padding-left: 1.25rem;
}

.filter .filterMenu .filterItem .checkbox label {
  width: 100%;
}

.filter .filterMenu .filterItem .checkbox input[type=checkbox]:focus + label {
  outline-offset: -0.125rem;
}

.filter .filterMenu .filterChecklist {
  display: block;
}

.filter .filterMenu .filterChecklist .checkbox {
  padding-left: 2.5rem;
}

.filter .filterMenu .subFilter {
  background: #fff;
  position: absolute;
  top: 0;
  width: 100%;
  transition: right 0.75S ease-out;
}

@media (prefers-reduced-motion) {  .filter .filterMenu .subFilter {
    transition: right 0s;
  }
}

.filter .filterHide {
  right: -100%;
}

.filter .filterShow {
  right: 0;
}

@media (max-width: 767px) {  .filterContainer {
    display: block;
  }

  .filter {
    left: 0;
    right: 0;
    width: 100%;
  }
}