.htc-styled {
  align-self: auto;
  background-color: var(--compareButtonBgColor);
  border: none;
  border-radius: var(--compareButtonBorderRadius);
  color: var(--compareButtonColor);
  font-size: 14px;
  margin-left: 0.5em;
  width: auto;
  height: 90%;
  font-weight: 700;
  margin: 0;
  padding: 8px 22px;
  cursor: pointer;
}
.htc-a-price {
  color: var(--priceColor);
}
.htc-discount-percent {
  color: var(--discountColor);
}
.htc-cmp-tbl-btn {
  padding: 12px;
  min-width: 50%;
  background-color: var(--compareTableBtnBgColor);
  border: var(--compareTableBtnBorder);
  border-radius: var(--compareTableButtonBorderRadius);
  border-width: var(--compareTableButtonBorderWidth);
  border-color: var(--compareTableBtnBorderColor);
  color: var(--compareTableBtnTxtColor);
  cursor: pointer;
}
.htc-styled:hover {
  background: linear-gradient(134deg, #3c59fc, #7600e0);
}

.htc-styled:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.htc-addToCompare {
  word-break: break-word;
  z-index: 1;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--compareBtnBgColor);
  color: var(--compareBtnTxtColor);
  border: var(--compareBtnBorder);
  border-width: var(--compareButtonBorderWidth);
  border-color: var(--compareBtnBorderColor);
  border-radius: var(--compareButtonBorderRadius);
  padding: var(--compareButtonPaddingY) var(--compareButtonPaddingX) !important;
  font-weight: 500;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: var(--compareButtonAlign);
  gap: 0.5rem;
}
.htc-addToCompare:hover {
  background: var(--compareBtnBgHoverColor);
  color: var(--compareBtnTxtHoverColor);
}
.htc-addToCompare input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.htc-checkmark {
  outline: 1px solid rgb(186, 191, 195);
  top: 50%;
  height: 20px;
  width: 20px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On mouse-over, add a grey background color */
.htc-addToCompare:hover input ~ .htc-checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.htc-addToCompare input:checked ~ .htc-checkmark {
  background-color: var(--compareBtnCheckedBgColor);
}

/* Create the checkmark/indicator (hidden when not checked) */
.htc-checkmark:after {
  content: "";
  display: none;
}

/* Show the checkmark when checked */
.htc-addToCompare input:checked ~ .htc-checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.htc-addToCompare .htc-checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--compareBtnTickColor);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .htc-checkmark {
    height: 15px;
    width: 15px;
  }
}