@import 'babyfox__default.css';
@import 'direction-rtl.css';

.filter-menu ul {
  width: 100%;
  min-width: 200px;
  max-width: 250px;
  background-color: #fff;
  z-index: 6;
  box-shadow: 3px 5px 10px 4px rgba(0, 0, 0, 0.16);
  padding-bottom: var(--s2);
  display: none;
  font-size: var(--s15);
  position: absolute;
}

.filter-menu ul ul {
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  box-shadow: none;
}

.filter-menu ul .header,
.filter_by {
  padding: var(--s1);
  display: flex;
  justify-content: space-between;
}

.filter-menu ul .header button {
  background-color: transparent;
  outline: none;
  border: 0;
  text-decoration: underline;
}

.filter-menu ul .header button:hover {
  text-decoration: none;
}

.filter_by.is-open {
  display: flex;
}

.filter_by {
  display: none;
  padding: var(--s);
  margin-bottom: var(--s);
  justify-content: flex-start;
  align-items: center;
  transition: all 0s 0.1s, opacity 0.4s 0.1s ease-in-out;
}

/**3-11*/
.filter_by > span {
  margin-right: var(--s1);
}

[dir='rtl'] .filter-box ul.filter-menu > li:first-child {
  margin-right: 0;
}

[dir='rtl'] .filter_by > span {
  margin-right: 0;
  margin-left: var(--s1);
}

[dir='rtl'] .filter-box ul.filter-menu > li > a > span {
  margin-right: 0;
  margin-left: var(--s1);
}

.filter_by .results_box {
  display: flex; /**3-11*/
  gap: 5px; /**3-11*/
}

.filter_by .results_box button {
  border: 1px #f2f2f2 solid;
  background-color: transparent;
  outline: none;
  text-align: center;
  border-radius: 20px;
  padding: var(--s) var(--s4) var(--s) var(--s1);
  position: relative;
  font-weight: normal;
  display: flex;
  align-items: center;
  color: black;
}

.filter_by .results_box button::after {
  content: 'X';
  font-weight: bold;
  display: flex;
  padding-right: 20px;
  position: absolute;
  align-items: center;
  right: 0;
  width: 13px;
  height: 13px;
  font-size: var(--s12);
  color: black;
}

.filter_by .results_box button:hover {
  background-color: #e6ebed;
}

.filter-menu ul > li > a {
  text-transform: capitalize;
}

.filter-menu ul li {
  display: block;
  flex: 1;
}

.filter-menu ul li a,
.filter-menu .form__group {
  position: relative;
  display: block;
  font-size: 1em;
  padding: var(--s1) var(--s2);
  text-decoration: none;
  color: #2e2e2e;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #eee;
  transition: all 0.3s linear;
}

.filter-menu ul li:last-child {
  border-bottom: 0;
}

.filter-menu .form__group {
  padding: 0;
}

.filter-menu .form__group input {
  margin-left: var(--s1);
  cursor: pointer;
}

[dir='rtl'] .filter-menu .form__group input {
  margin-left: 0;
  margin-right: var(--s1);
}

.filter-menu .form__group label {
  padding: var(--s1) var(--s2);
}

.filter-menu ul li a i {
  font-size: 1em;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  border-radius: 50%;
}

[dir='rtl'] .filter-menu ul li a i {
  right: inherit;
  left: 20px;
}

.filter-menu ul > li.selected > a {
  background-color: #ecf0f1;
  color: #495d62;
  border-color: rgba(255, 255, 255, 0.1);
}

@media (hover: hover) and (pointer: fine) {
  .filter-menu ul > li:hover > a {
    background-color: #ecf0f1;
  }
}

.filter-menu ul ul {
  display: none;
}
.filter-menu ul li ul.open {
  display: block;
}

.filter-menu ul li ul li a {
  color: #495d62;
  padding-left: var(--s4);
  border-color: rgba(255, 255, 255, 0.1);
}
.filter-menu ul li ul li:hover > a,
.filter-menu ul li ul li.selected > a,
.filter-menu ul > li:hover > a,
.filter-menu ul li.form__group:hover {
  background-color: #e6ebed;
}
.filter-menu ul li ul li:hover > a:before,
.filter-menu ul li ul li.selected > a:before {
  margin-right: 10px;
}
.filter-menu ul li ul li.selected--last > a {
  background-color: #94aab0;
  color: #fff;
}
.filter-menu ul li ul li.selected--last > a:before {
  background-color: #fff;
}

li:last-child {
  border-bottom: 0;
}

.filter-menu ul > li:last-child a {
  border: 0;
}

.filter-menu .form__group {
  display: flex;
}

.filter-menu .form__group label {
  padding-left: var(--s1);
  font-family: 'SegoeUI Semilight';
  flex: 1;
  cursor: pointer;
}

li.flex-end select {
  border: 0;
  padding: var(--s) var(--s1);
  outline: none;
  font-size: var(--s14);
}

ul.filter-menu > ul {
  display: none;
}

ul.filter-menu li.active > .filter-menu ul {
  display: block;
}

@media (max-width: 767px) {
  .filter-box ul.filter-menu {
    flex-direction: column;
  }

  .select2-container--border-less .select2-selection--single {
    justify-content: end;
  }
}