.top_filters {
  position: relative;
  width: 100%;
  max-width: 230px;

  @media screen and (width <= 990px) {
    position: fixed;
    bottom: 10px;
    z-index: 20;
    left: 50px;
    max-width: 50px;
  }
  @media screen and (width <= 430px) {
    left: 80px;
  }
  @media screen and (width <= 414px) {
    left: 70px;
  }
  @media screen and (width <= 390px) {
    left: 60px;
  }
  @media screen and (width <= 375px) {
    left: 50px;
  }
  @media screen and (width <= 360px) {
    left: 40px;
  }
  @media screen and (width <= 340px) {
    left:30px;
  }
  @media screen and (width <= 320px) {
    left:20px;
  }
}

.bx-filter-parameters-box-title {
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--black);
  border-radius: 12px;
  padding: 0 16px;
  height: 64px;
  background:var(--red-7E);
  position:relative;
  &:before{
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13.47 7.53a.75.75 0 0 0 1.06 0l.72-.72V17a.75.75 0 0 0 1.5 0V6.81l.72.72a.75.75 0 1 0 1.06-1.06l-2-2a.75.75 0 0 0-1.06 0l-2 2a.75.75 0 0 0 0 1.06m-4.72 9.66l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l.72.72V7a.75.75 0 0 1 1.5 0z'/%3E%3C/svg%3E");
  }
  @media screen and (width <= 980px) {
    max-width: 156px;
    height: 50px;
  }
  @media screen and (width <= 430px) {
    max-width: 195px;
  }
  @media screen and (width <= 412px) {
    max-width: 186px;
  }
  @media screen and (width <= 390px) {
    max-width: 175px;
  }
  @media screen and (width <= 375px) {
    max-width: 167px;
  }
  @media screen and (width <= 360px) {
    max-width: 160px;
  }
  @media screen and (width <= 353px) {
    max-width: 156px;
  }
}

.bx-filter-parameters-box-hint {
  text-decoration: none;
  border-bottom: none;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  height: 100%;
  @media screen and (width <= 990px) {
    max-width: 50px;
    height: 50px;
    opacity: 0;
    position: absolute;
  }

  .hint-right {
    display: flex;
    align-items: center;
    pointer-events: none;
    gap: 4px;
  }

  .sortSelected_count {
    &.checked_qty {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      min-width: 24px;
      min-height: 24px;
      background: var(--red-7E);
      color: var(--white);
      font-size: 16px;
      line-height: 1;
      flex-shrink: 0;
      opacity: 1;
    }
  }
}

.bx-filter-block_sorting {
  position: absolute;
  background-color: #fff;
  z-index: 4;
  width: 100%;
  min-width: 220px;
  top: calc(100% + 26px);
  border-radius: 24px;
  box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.08);
  @media screen and (width <= 990px) {
    left: 0;
    bottom: calc(100% + 26px);
    top:unset;
  }
}

.select-items.bx-filter-parameters-box-container.cbx_wr {
  > li {
    .bx-filter-param-text {
      display: flex;
      gap: 12px;
      position: relative;

      &:before {
        content: '';
        -webkit-appearance: none;
        background-color: #F5F5F5;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        border-radius: 8px;
        width: 24px;
        height: 24px;
      }
    }

    &.selected {
      .bx-filter-param-text {
        &:before {
          background-color: var(--red-7E);
        }

        &:after {
          content: '';
          display: block;
          position: absolute;
          top: 4px;
          left: 9px;
          width: 4px;
          height: 12px;
          border: solid var(--white);
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
        }
      }
    }
  }
}