.star {
  color: #ffb400;
  color: var(--star-color);
}

.text-yellow-300 {
  color: #ffb400;
  color: var(--star-color);
}

.stop-color-star {
  stop-color: #ffb400;
  stop-color: var(--star-color);
}

.fix-star {
  left: 5px;
  position: relative;
}

.ranking_table {
  max-width: 90ch;
  margin: 1.5em auto;
}

.table_list header {
  padding: 0.5em 0.5em 0 0.5em;
  border-bottom: 2px solid hsl(0, 0%, 90%);
}
.table_list header {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas: "logo title score";
  /* border:1px solid red; */
}

.placeholder {
  height: 3em;
}

.table_list .partner_logo {
  display: grid;
  grid-area: logo;
  margin-top: 0.5rem;
}

.table_list .partner_logo a {
  align-self: center;
}

.table_list header img {
  object-fit: contain;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  max-height: 8em;
}

.table_list header .table_title {
  padding: 0 1.5em;
  grid-area: title;
}

.table_title .heading_2 {
  font-size: 1.8em;
  margin-bottom: 0.3em;
  margin-top: 1rem;
}

.table_title .heading_2 a {
  color: #333333;
  text-decoration: none !important;
}

.table_title .heading_2 a:hover {
  color: hsl(156deg 79% 29%);
  color: var(--ribbon-color);
}

.ranking_table {
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 1em;
  background: white;
  box-shadow: 0.2em 0.2em 0.5em 0.3em hsl(0deg 0% 90%);
}

.table_list .score {
  font-size: 2em;
  font-weight: bold;
  margin-right: 0.5em;
  /* margin-top:0.5em; */
  grid-area: score;
}

.table_list .score .right {
  display: flex;
  justify-content: flex-end;
  height: 45px;
}

.table_list .description {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2em;
  margin: 2em;
  justify-items: start;
}

.table_list .description ul {
  /* list inside */
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
  line-height: 1.8em;
  padding: 0;
}

.table_list .description li p {
  display: inline;
}
/* replace list bullet with svg */
.table_list .description li::before {
  content: url("../img/badge-check.svg");
  display: inline-block;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  top: 0.5em;
  right: 0.5em;
  margin-left: 0.5em;
}

.table_list .description ul li {
  margin-bottom: 0.7em;
}

.description ul li {
  list-style: none;
}
.description li {
  margin: 0;
  margin-right: 15px;
}

.icons .item img {
  display: block;
  position: relative;
  margin: 2px auto;
}

.icons .item {
  width: 80px;
}

.icons .item p {
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  text-align: center;
  color: gray;
}
.flex {
  display: flex;
}
.space-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}
.px-4 {
  padding: 0 2em;
}

.button-2xl {
  font-size: 1.5em;
}

.rounded {
  border-radius: 0 0 1em 1em;
}
.round {
  border-radius: 0.5em;
}

.bg-gray-100 {
  background-color: hsl(0deg 0% 94%);
}

.table_list .actions {
  display: flex;
  justify-content: center;
  padding: 0.5em 2em 2em 2em;
}

.table_list .center {
  display: flex;
  justify-content: center;
  padding: 0.4em;
}

.table_list .y-center {
  align-self: center;
}
.mt-4 {
  margin-top: 0.75em;
}

.h-5 {
  height: 1em;
}
.w-5 {
  width: 1em;
}

.h-4 {
  height: 0.9em;
}
.w-4 {
  width: 0.9em;
}

.pointer {
  cursor: pointer;
}

.highlight-link p {
  background: hsl(205deg 100% 97%);
  background: var(--secondary-color-light);
  border-radius: 1em;
  padding: 0 0.3em;
  border: 1px solid hsl(205deg 96% 18%);
  border: 1px solid var(--secondary-color);
  font-weight: bold;
  margin-bottom: 0.3em;
  font-size: 0.83em;
}
.highlight-link {
  color: hsl(205deg 96% 18%);
  color: var(--secondary-color);
  text-decoration: none !important;
}

.primary-color a {
  color: hsl(205deg 96% 18%);
  color: var(--primary-color);
}
.primary-color a:hover {
  text-decoration: none;
}

/* tooltip */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 3px 9px;
  position: absolute;
  z-index: 1;
  bottom: 120%;
  min-width: 80px;
  /* Align center calc */
  left: 0;

  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* cta button */
.table_list .cta_button {
  background: #ea0020;
  background: var(--primary-color);
  padding: 0.5em 4em;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  text-decoration: none !important;
  border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important;
  margin-right: 1rem;
}
.table_list .cta_button:hover {
  background: #b30018;
  background: var(--primary-color-dark);
  box-shadow: 0.09em 0.09em 0 0.1em hsl(0deg 0% 90%);
}

.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0.1em;
}
.relative {
  position: relative;
}

.ribbon {
  position: absolute;
  top: -1.4em;
  left: 0;
  z-index: 1;
  background: hsl(156deg 79% 29%);
  background: var(--ribbon-color);
  color: white;
  font-weight: bold;
  padding: 0.2em 1em;
  border-radius: 1em 0em 0em 0em;
}

.hidden {
  display: none !important;
}

.open {
  display: block;
}
.status .open {
  display: none;
}
.closed {
  display: none;
}
.status .closed {
  display: block;
}

.subtitle_pricing p {
  margin-bottom: 0.3em;
}

.more_space {
  margin-top: 1.8em;
}

/* mobile */
@media screen and (max-width: 990px) {
  .icons .item {
    width: 65px;
  }
  .tooltip .tooltiptext {
    min-width: 65px;
  }
}

@media screen and (max-width: 767px) {
  .table_list header {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "logo score" "title title";
  }
  .table_title h2 {
    margin-top: 1em;
  }
  .icon-wrapper {
    max-width: 50%;
  }

  .table_list .description {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "list";
  }
  .table_list .description ul {
    grid-area: list;
  }
  .table_list .description img {
    margin: 0 auto;
    grid-area: image;
  }

  .icons .item {
    width: 50px;
  }
  .tooltip .tooltiptext {
    min-width: 50px;
  }

  .plus {
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    font-size: 17px;
    border: 1px solid #17c37d;
    border-radius: 50%;
    color: #17c37d;
    position: relative;
    margin: 0 auto;
  }

  .md\:block {
    display: block !important;
  }

  .button-2xl {
    font-size: 1.2em;
  }

  .table_list header img {
    max-height: 100px;
  }
}

/* desktop */
@media screen and (min-width: 991px) {
  .lg\:space-between {
    justify-content: space-between !important;
  }
  .lg\:flex-end {
    justify-content: flex-end !important;
  }
}

.lorenrow {
  margin-bottom: 80px;
}

.lorencolumn .table_list header,
.col-sm-5 .table_list header {
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "logo score" "title title";
}
.lorencolumn .table_title h2,
.col-sm-5 .table_title h2 {
  margin-top: 1em;
}
.lorencolumn .icon-wrapper,
.col-sm-5 .icon-wrapper {
  max-width: 50%;
}

.lorencolumn .table_list .description,
.col-sm-5 .table_list .description {
  grid-template-columns: 1fr;
  grid-template-areas: "image" "list";
}
.lorencolumn .table_list .description ul,
.col-sm-5 .table_list .description ul {
  grid-area: list;
}
.lorencolumn .table_list .description img,
.col-sm-5 .table_list .description img {
  margin: 0 auto;
  grid-area: image;
}

.lorencolumn .icons .item,
.col-sm-5 .icons .item {
  width: 50px;
}
.lorencolumn .tooltip .tooltiptext,
.col-sm-5 .tooltip .tooltiptext {
  min-width: 50px;
}

.lorencolumn .plus,
.col-sm-5 .plus {
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  font-size: 17px;
  border: 1px solid #17c37d;
  border-radius: 50%;
  color: #17c37d;
  position: relative;
  margin: 0 auto;
}

.lorencolumn .md\:block,
.col-sm-5 .md\:block {
  display: block !important;
}

.lorencolumn .button-2xl,
.col-sm-5 .button-2xl {
  font-size: 1.2em;
}

.lorencolumn .table_list header img,
.col-sm-5 .table_list header img {
  max-height: 100px;
}