#shop #pricing {
  padding: 1rem;
}

.content__wrapper h1.box-header {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 130% !important;
  padding: 1rem 0 0 1rem;
}


#shop #pricing h2 {
  font-size: 1.6235rem;
  line-height: 130%;
  font-weight: 400;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

#shop #pricing h3 {
  font-size: 1.25rem;
  line-height: 140%;
  font-weight: 500;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

#shop #pricing h2:first-child,
#shop #pricing h3:first-child {
  margin-top: 0;
}

#shop #pricing p {
  margin-bottom: 1em;
  line-height: 150%;
}

#shop #pricing p:first-child {
  margin-top: 0;
}

#shop #pricing p:last-child {
  margin-bottom: 0;
}


#shop #pricing .bold {
  font-weight: bold;
}


#shop #pricing .green-text {
  color: var(--green-normal) !important;
}

#shop #pricing .orange-text {
  color: var(--orange-dark) !important;
}

#shop #pricing .blue-text {
  color: var(--blue-dark) !important;
}

#shop #pricing .check {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  position: relative;
  padding-left: 1.5rem;
}

#shop #pricing .check::before {
  content: "";
  color: var(--green-normal);
  display: inline-block;
  width: 1rem;
  height: 0.75rem;
  background: url(/img/homepage/CheckMarkGreen.svg) no-repeat left center;
  position: absolute;
  left: 0;
  top: 1rem;
  transform: translateY(-100%);
}

#shop #pricing .border-orange {
  border-color: var(--orange-normal) !important;
}

#shop #pricing .border-blue {
  border-color: var(--blue-normal) !important;
}

#shop #pricing .border-gray {
  border-color: var(--gray-medium) !important;
}

#shop #pricing .button-primary {
  background: var(--blue-bright) !important;
  color: white !important;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  display: block;
  text-align: center;
  text-transform: capitalize;
  max-width: max-content;
}


/* Text element styles end */

#shop #pricing .accordion-header {
  margin-bottom: 0;
  font-weight: 500;
}

#content #shop #pricing h2 {
  padding: initial;
}

#shop #pricing ul {
  margin: revert;
}

#shop #pricing .collapsing {
  height: 0;
  overflow: hidden;
  transition: height .35s ease;
}

/** Price related styles start */

#shop #pricing .price-tag {
  color: var(--green-darkest);
  font-weight: bold;
  border-radius: 4px;
  background: var(--green-light);
  padding: 8px;
}


/* Price related styles end */

/** Pricing page styles start */

#freestyler .tests::after {
  display: inline-block;
  margin-left: 10px;
  content: " ";
  border: solid #000;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-width: 0 3px 3px 0;
  padding: 2px;
  transform: rotate(45deg);
  vertical-align: middle;
  top: 40%;
  position: absolute;
}

#team-price-opt p,
#pricing .plan-features p,
#pricing .plan-features li {
  font-size: 0.875rem;
}

#freestyler .testCount:before {
  content: attr(data-testCount) " ";
}

#freestyler .price-opt {
  position: absolute;
  background: #fff;
  padding: 5px 5px 5px 5px;
  min-width: 200px;
  box-shadow: 1px 1px 10px #999;
}

#freestyler .tests:hover {
  cursor: pointer;
}


#freestyler .price-opt li {
  padding-left: 25px;
  list-style-type: none;
  line-height: 20pt;
}

#freestyler .price-opt li:hover {
  cursor: pointer;
  background: #f3f9f3;
}


.pricing-tooltip {
  position: relative;
  cursor: pointer;
}

.pricing-tooltip::before,
.pricing-tooltip::after {
  --scale: 0;
  --arrow-size: 10px;
  --tooltip-color: var(--green-light);

  position: absolute;
  top: -.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
  transition: 200ms transform;
  transition-delay: 300ms;
  transform-origin: bottom center;
  opacity: var(--scale);
}

.pricing-tooltip::before {
  --translate-y: calc(-100% - var(--arrow-size));

  content: attr(data-tooltip);
  color: var(--green-darkest);
  padding: .5rem;
  border-radius: .3rem;
  text-align: center;
  width: max-content;
  max-width: 100%;
  background: var(--tooltip-color);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04), 0px 0px 16px rgba(0, 0, 0, 0.08);
}

.pricing-tooltip:hover::before,
.pricing-tooltip:hover::after {
  --scale: 1;
}

.pricing-tooltip::after {
  --translate-y: calc(-1 * var(--arrow-size));

  content: '';
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--tooltip-color);
  transform-origin: top center;
}

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.princing-plans .plan {
  width: 100%;
}

.plan-top {
  height: 24rem;
}

.plan-bottom {
  height: 22rem;
}


#pricing .plan .label {
  display: flex;
  padding: 1rem;
  background: #fff;
  gap: 1rem;
  border-radius: 0.25rem;
  flex-direction: column;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04), 0px 0px 16px rgba(0, 0, 0, 0.08);
  border-top: 0.375rem solid var(--green-normal);
  height: 100%;
}

#pricing .plan .label h2 {
  font-weight: normal;
  margin-bottom: 1rem;
}

#pricing .plan .price {
  font-size: 1.375rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  min-height: 2em;
}

#pricing .plan .price:before {
  display: inline-block;
  content: "€";
  vertical-align: top;
  margin-right: 5px;
  font-size: 1.375rem;
  font-weight: bold;
}

#pricing .plan .price>span.tests {
  margin-left: 15px;
  line-height: 28pt;
  vertical-align: bottom;
  font-size: 12pt;
  font-weight: normal;
}

#pricing .billing {
  text-transform: capitalize;
}

#pricing .plan .start {
  display: block;
  line-height: 36px;
  text-align: center;
  font-weight: bold;
  background: var(--blue-bright);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  margin-top: auto;
}

#pricing .plan .demo {
  height: 1rem;
  text-align: center;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

#pricing .plan .demo a {
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: bold;
  color: var(--blue-bright);
}

#total-price {
  color: var(--green-darkest);
  font-weight: bold;
  border-radius: 4px;
  background: var(--green-light);
  padding: 8px;
}

#coupon-price {
  color: #999;
  font-size: 90%;
  padding-left: 6px;
}

#total-price:after {
  content: "€"
}

table.coupons {
  text-align: center;
  font-size: 11pt;
  border-spacing: 5px;
}

table.coupons tr>* {
  padding: 10px 0;
}

table.coupons tr>th:first-child {
  width: 84px;
}

table.coupons tr td {
  border: 4px solid #fff;
  color: var(--green-darkest);
  font-weight: bold;
  border-radius: 2px;
  background: var(--green-light);
  border-radius: 8px;
  padding: 12px;
}

table.coupons tr td span {
  display: block;
  padding-top: 4px;
  font-weight: normal;
  font-size: 85%;
}

table.coupons tr td:hover {
  background: var(--green-normal);
  color: #fff;
}

table.coupons tr:first-child th:not(:first-child)::after {
  content: "coupons";
  display: block;
  color: #777;
  font-weight: normal;
}

table.coupons tr:not(:first-child) th:first-child::after {
  content: "days";
  display: block;
  color: #777;
  font-weight: normal;
}

/** Pricing page styles end */

@media screen and (max-width: 1360px) {

  #shop #pricing .pricing-plans {
    padding-inline: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }

  #shop #pricing .plan-top {
    height: 19rem;
  }
}


@media screen and (max-width: 1120px) {
  /** Pricing page styles start */

  .pricing-plans {
    padding-inline: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-top {
    height: 19rem;
  }

  /** Pricing page styles end */
}

@media screen and (max-width: 980px) {
  /** Pricing page styles start */

  #pricing .plan .billing {
    min-height: auto;
  }

  #pricing .plan .desc {
    min-height: auto;
  }

  /** Pricing page styles end */

}

@media screen and (max-width: 690px) {
  /** Pricing page styles start */

  .pricing-plans {
    padding-inline: 0;
    grid-template-columns: 1fr;
  }

  /** Pricing page styles end */

}