:root {
  --bnn-compare-left-column: 220px;
}
body {
  background-color: #fff !important;
}
h1 {
  border-bottom: 1px solid #eee;
}
.compared-products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.compare_left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-color: #fbfbfb;
  -webkit-box-shadow: 1px 0px 9px 1px rgb(0 0 0 / 10%);
  box-shadow: 1px 0px 9px 1px rgb(0 0 0 / 10%);
  border-right: 1px solid #eee;
  font-weight: 600;
    color: #555;
    max-width: var(--bnn-compare-left-column);
}
.compare_right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100% - var(--bnn-compare-left-column));
}
.compare_right > div {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
      min-width: var(--bnn-compare-left-column);
}
.compare_left > div:not(.attr-group), .compare_right > div > div:not(.compare_attributes), .attr-group > div, .compare_attributes > div{
  /* min-width: 200px; */
  padding: 8px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
.compare_left > div:not(:first-child,.attr-group):nth-child(even), .compare_right > div > div:not(:first-child,.compare_attributes):nth-child(even),.attr-group > div:nth-child(odd), .compare_attributes > div:nth-child(odd) {
  background-color: #dbe8f2;
}
.compare_right > div .product-details {
  border-right: 1px solid #eee;
}
.compare_title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: normal;
  color: #333;
}
.product-details > :is(div,a) {
  margin-bottom: 10px;
  width: 100%;
}
.product-details {
  position: relative;
  background-color: #fff;
}
.img-thumbnail {
  width: 100%;
}
.product__name {
  font-size: 13px;
  color: #333;
  text-wrap: auto;
}
.product__stock.stock-status {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}
.rating .fa-stack {
  height: 1em;
}
.rating-score {
  font-size: 12px;
}
.product__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--bnn-color-accent);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.product__price strike {
  font-size: 14px;
  color: var(--bnn-color-grey);
  margin-left: 4px;
}
.special-price {
  color: var(--bnn-color-red);
}
button.btn-cart {
  background: #0259b6;
    background: -o-linear-gradient(left, #0259b6 40%, #5fb6f8 150%);
    background: -webkit-gradient(linear, left top, right top, color-stop(40%, #0259b6), color-stop(150%, #5fb6f8));
    background: linear-gradient(90deg, #0259b6 40%, #5fb6f8 150%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0259b6",endColorstr="#5fb6f8",GradientType=1);
    padding: 10px;
    -webkit-box-shadow: none;
            box-shadow: none;
    border-radius: 5px !important;
    color: #fff !important;
    min-height: 38px;
    width: 100%;
}
.img__wrapper > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.btn-cart.out-of-stock {
  cursor: not-allowed;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
 .matched {
  background-color: #a1e0a9b3 !important;
  border-color: #ccc;
}
.matched2x {
  background-color: #a1a5e0b3 !important;
  border-color: #ccc;
}
.miss_matched {
  border-color: #ccc;
  background-color: #f5d5dab3 !important;
}
.btn-compare-remove {
  position: absolute;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  right: 8px !important;
  top: 8px !important;
  background: no-repeat;
  color: var(--bnn-color-red);
  
}
.empty-comapre-wrapper {
  max-width: 400px;
  text-align: center;
  margin: auto;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .compare_right {
    width: 100%;
    overflow-x: scroll;
  }
  button.btn-cart {
    width: 45px;
  }
  button.btn-cart .btn-text {
    display: none;
  }
}
@media (max-width: 539px) {
  .compare_left {
    max-width: 130px;
    font-size: 13px;
  }
  .compare_right {
    font-size: 13px;
  }
}