div#compare-now {
  color: #121346;
  font-weight: 800;
  cursor: pointer;
  font-size: 17px;
  margin-right: 0;
}

.compare-selector {
  display: none;
  margin-top: 30px;
}

  .compare-selector label {
    position: relative;
    cursor: pointer;
  }

    .compare-selector label:before {
      content: '';
      -webkit-appearance: none;
      background-color: transparent;
      border: 2px solid #5FCAE5;
      padding: 10px;
      display: inline-block;
      position: relative;
      vertical-align: middle;
      cursor: pointer;
      margin-right: 10px;
      border-radius: 5px;
    }

  .compare-selector input:checked ~ label:after {
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    left: 9px;
    width: 7px;
    height: 14px;
    border: solid #5FCAE5;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

.compare-products-container {
  position: fixed;
  top: 0;
  left: -330px;
  width: 320px;
  height: 100%;
  background: rgba(0%, 0%, 0%, 50%);
  z-index: 100;
  padding: 16px;
  transition: left 0.3s ease-in;
}

  .compare-products-container.open {
    left: 0;
  }

  .compare-products-container .title {
    font-size: 20px;
    color: #5FCAE5;
    font-weight: 900;
    margin-bottom: 20px;
  }

  .compare-products-container .action-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

    .compare-products-container .action-buttons button {
      position: relative;
      border: none;
      margin: 5px 10px;
      padding: 7px 20px;
      background: #121346;
      color: #fff;
      font-weight: 500;
      border-radius: 0.5rem;
      padding-right: 30px;
      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

      .compare-products-container .action-buttons button::after {
        content: "\f054";
        font-family: "FontAwesome";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
      }

    .compare-products-container .action-buttons .cancel-button {
      background: #a9a9a9;
    }

    .compare-products-container .action-buttons .delete-all-button {
      background: #ff5d63;
    }

.compare-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
  padding: 0 5px 10px;
  border-bottom: 1px solid #fff;
}

.compare-products {
  max-height: 80%;
  overflow: auto;
}

.compare-wrapper img {
  width: 80px;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.compare-wrapper .product-title {
  width: calc(100% - 110px);
  color: #fff;
  font-size: 16px;
}

.compare-cancel {
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.compare-half-close::before {
  content: "\f053";
  font-family: "FontAwesome";
  color: #121346;
}

.compare-half-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  padding: 20px 3px;
  border-radius: 3px 0 0 3px;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

  .compare-half-close.half-close::before {
    content: "\f054";
  }

.compare-products-container.half-close {
  left: -250px;
}

  .compare-products-container.half-close:not(.open) {
    left: -330px;
  }

/**Product Grid**/

.product-grid .item-box .product-item {
  position: relative;
}

.product-grid .compare-selector {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 10px;
  background: rgba(117, 117, 117, 83%);
  left: 10px;
  top: 10px;
  border-radius: 0.5rem;
}

  .product-grid .compare-selector label:before {
    margin-right: 0;
  }

/**Mobile View**/

@media(min-width: 1025px) {
  .html-category-page .master-wrapper-content {
    z-index: 10001;
  }
}

@media(max-width: 1024px) {
  .html-category-page .footer-middle {
    position: initial;
  }

  .compare-products-container {
    left: 0;
    top: initial;
    width: 100%;
    height: 400px;
    transition: bottom 0.3s ease-in;
    bottom: -410px;
  }

    .compare-products-container.open {
      bottom: 0px;
    }

  .compare-half-close {
    position: absolute;
    right: 50%;
    top: 0;
    transform: translateX(50%);
    padding: 3px 25px;
    border-radius: 0 0 3px 3px;
  }

    .compare-half-close::before {
      content: "\f078";
    }

  .compare-products-container .title {
    margin: 20px 0px;
  }

  .compare-products-container.half-close {
    left: 0;
    bottom: -300px;
  }

  .compare-half-close.half-close::before {
    content: "\f077";
  }

  .compare-products {
    max-height: 240px;
  }

  .compare-products-container.half-close:not(.open) {
    left: 0;
    bottom: -410px;
  }
}