:root {
  --animate-duration: 1s;
}

:host {
  display: block;
}

.b2b-filter-b-flex {
  margin-left: 0px !important;
  margin-right: 0px !important;
  position: fixed;
  z-index: 50;
  bottom: 0;
  width: 100%;
  background-color: var(--sdx-color-sc-white);
  height: 81px;
  display: flex !important;
  border-top: 1px solid var(--sdx-color-aluminum);
}

sl-filter [slot=close-filter] {
  color: var(--sdx-color-azure--active);
}

.b2b-filter-title {
  display: flex;
}
.b2b-filter-title .sl-filter-name h4 {
  font-weight: 520;
}

.b2b-filter-h6 {
  padding-top: 23px !important;
}

.b2b-sl-filter-bgColor > sl-filter-item .b2b-item-size-color {
  color: var(--sdx-color-azure--active);
}
.b2b-sl-filter-bgColor > sl-filter-item {
  color: var(--sdx-color-azure--active);
  background-color: var(--sdx-color-blue-tint-2);
}

@media screen and (min-width: 0px) and (max-width: 480px) {
  .b2b-filter-h6 {
    padding-top: 33px !important;
  }
  sl-filter [slot=close-filter] {
    padding-left: 25px;
    padding-right: 12px;
  }
  .b2b-filter-b-title {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  .b2b-sl-filter-padding {
    margin-bottom: 103px;
  }
  .b2b-filter-flex {
    display: flex;
    align-items: center;
    margin-left: -8px;
    margin-right: -8px;
    height: 82px;
    border-bottom: 1px solid var(--sdx-color-aluminum);
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  sl-filter [slot=close-filter] {
    padding-left: 25px;
    padding-right: 12px;
  }
  .b2b-filter-b-title {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .b2b-sl-filter-padding {
    margin-bottom: 103px;
  }
  .b2b-filter-flex {
    display: flex;
    align-items: center;
    margin-left: -8px;
    margin-right: -8px;
    height: 82px;
    border-bottom: 1px solid var(--sdx-color-aluminum);
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  sl-filter [slot=close-filter] {
    padding-left: 38px;
    padding-right: 47px;
  }
  .b2b-filter-b-title {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .b2b-sl-filter-padding {
    margin-bottom: 103px;
  }
  .b2b-filter-flex {
    display: flex;
    align-items: center;
    margin-left: -8px;
    margin-right: -8px;
    height: 119px;
    border-bottom: 1px solid var(--sdx-color-aluminum);
  }
}
@media screen and (min-width: 1024px) {
  sl-filter [slot=close-filter] {
    padding-left: 25px;
    padding-right: 15px;
  }
  .b2b-filter-flex {
    display: none;
  }
  .b2b-filter-b-flex {
    display: none !important;
  }
  .b2b-sl-filter-padding {
    padding-top: 0px;
    margin-bottom: 0px !important;
  }
  .b2b-sl-filter-padding .b2b-sl-filter-bgColor {
    padding: 0px 0 0 12px !important;
  }
}
.sl-filter-button {
  display: flex;
  align-items: center;
}

.b2b-filter-b-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sl-filter-button {
  flex-grow: 1;
}
.sl-filter-button sdx-button {
  flex-grow: 1;
}