/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/04-components/compare-products.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
#compare-products-modal {
  top: 0px;
  max-width: 1080px;
  overflow: auto;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
@media (min-width: 1024px) {
  #compare-products-modal {
    width: 80%;
  }
}
#compare-products-modal .close-compare {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
#compare-products-modal .close-compare:hover {
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
#compare-products-modal table {
  border-collapse: collapse;
}
#compare-products-modal th,
#compare-products-modal td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  min-width: 180px;
  max-width: 300px;
  vertical-align: middle;
}
#compare-products-modal th {
  background-color: #f2f2f2;
}
#compare-products-modal tr td:first-child {
  background-color: #f2f2f2;
  min-width: 80px !important;
}
#compare-products-modal .s-rating-stars-reviews {
  line-height: 1.2rem;
  margin-right: 4px;
}
#compare-products-modal .s-button-primary:hover {
  background-color: var(--color-primary);
}
#compare-products-modal .s-social-list li {
  position: relative;
  z-index: 10;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--color-primary);
  transition-duration: 150ms;
}
#compare-products-modal .s-social-list li a {
  height: 100%;
  width: 100%;
}
#compare-products-modal .s-social-list li a:hover {
  opacity: 1;
}
#compare-products-modal .s-social-list li::before {
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  background-color: var(--color-primary);
  opacity: 0.3;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}
#compare-products-modal .s-social-list li svg {
  height: 1rem;
  width: 1rem;
  fill: var(--color-primary);
}
#compare-products-modal .s-social-list li:hover {
  --tw-scale-x: 1.2;
  --tw-scale-y: 1.2;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.2) scaleY(1.2);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
#compare-products-modal salla-add-product-button > div {
  display: flex;
  justify-content: center;
}
#compare-products-modal salla-add-product-button salla-button {
  display: flex;
  height: 2.25rem;
  width: 75%;
}