*,
::before,
::after {
  border-width:0;
}
ol,
ul,
menu {
  list-style:none;
  margin:0;
  padding:0
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin:0
}
fieldset {
  margin:0;
  padding:0
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display:block;
  vertical-align:middle
}
img,
video {
  max-width:100%;
  height:auto
}

[hidden] {
  display:none
}
:root {
  --font-fallback:Arial, Helvetica, sans-serif;
  --font-base:"Asap", var(--font-fallback);
  --header-height:0px;
  --background:#fafffd;
  --black:#0f232e;
  --white:#ffffff;
  --link:#0000ee;
  --outline:rgba(45, 212, 191, 0.3);
  --primary-50:#f0fdfa;
  --primary-100:#ccfbf1;
  --primary-200:#99f6e4;
  --primary-300:#5eead4;
  --primary-400:#2dd4bf;
  --primary-500:#14b8a6;
  --primary-600:#0d9488;
  --primary-700:#0f766e;
  --primary-800:#115e59;
  --primary-900:#134e4a;
  --primary-950:#042f2e;
  --secondary-50:#ecfdf5;
  --secondary-100:#d1fae5;
  --secondary-200:#a7f3d0;
  --secondary-300:#6ee7b7;
  --secondary-400:#34d399;
  --secondary-500:#10b981;
  --secondary-600:#059669;
  --secondary-700:#047857;
  --secondary-800:#065f46;
  --secondary-900:#064e3b;
  --secondary-950:#022c22;
  --accent-50:#fffbeb;
  --accent-100:#fef3c7;
  --accent-200:#fde68a;
  --accent-300:#fcd34d;
  --accent-400:#fbbf24;
  --accent-500:#f59e0b;
  --accent-600:#d97706;
  --accent-700:#b45309;
  --accent-800:#92400e;
  --accent-900:#78350f;
  --accent-950:#52250e;
  --neutral-50:#fafafa;
  --neutral-100:#f4f4f5;
  --neutral-200:#e4e4e7;
  --neutral-300:#d4d4d8;
  --neutral-400:#a1a1aa;
  --neutral-500:#71717a;
  --neutral-600:#52525b;
  --neutral-700:#3f3f46;
  --neutral-800:#27272a;
  --neutral-900:#18181b;
  --neutral-950:#09090b;
  --alert-50:#fff1f2;
  --alert-100:#ffe4e6;
  --alert-200:#fecdd3;
  --alert-300:#fda4af;
  --alert-400:#e11d48;
  --alert-500:#be123c;
  --alert-600:#9f1239;
  --alert-700:#881337;
  --alert-800:#610d27;
  --alert-900:#420a18;
  --alert-950:#1f0d0b
}

fieldset legend {
  float:left;
  width:100%
}
fieldset legend+* {
  clear:left
}
input[type="number"].form-control {
  font-size:1.125rem;
  line-height:1.875rem;
  border-radius:.625rem;
  box-shadow:inset 0 0 0 1px var(--primary-500);
  height:3.125rem;
  padding:.625rem .9375rem;
  border: none;
}
.form-control--number {
  -moz-appearance:textfield
}
.form-control--number::-webkit-outer-spin-button,
.form-control--number::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0
}
.form-control:focus {
  outline:none;
  box-shadow:inset 0 0 0 1px var(--primary-500),0 0 0 .3125rem rgba(153,246,228,.3)
}
.form-switch {
  align-items:center;
  display:inline-flex;
  gap:.9375rem
}
.form-switch-input {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:var(--white);
  border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--primary-500);
  height:1.5625rem;
  width:3.125rem;
  transition:background-color .15s ease-out
}
.form-switch-input:focus,
.form-switch-input:active {
  box-shadow:inset 0 0 0 1px var(--primary-500),0 0 0 .3125rem rgba(153,246,228,.3);
  outline:none
}
.form-switch-input:checked {
  background-color:var(--primary-500)
}
.form-switch-input:checked:before {
  transform:translateX(1.5625rem)
}
.form-switch-input:before {
  background-color:var(--white);
  box-shadow:inset 0 0 0 1px var(--primary-500);
  border-radius:999px;
  content:"";
  display:block;
  height:1.5625rem;
  width:1.5625rem;
  transition:transform .15s ease-out
}
.form-switch-label {
  font-size:1rem;
  line-height:1.5625rem
}
@media screen and (min-width:992px) {
  .form-switch-label {
    font-size:1.125rem;
    line-height:1.875rem
  }
}
.form-range {
  -webkit-appearance:none;
  appearance:none;
  background-color:var(--neutral-200);
  border-radius:.9375rem;
  cursor:pointer;
  display:block;
  height:.625rem;
  outline:none;
  touch-action:pan-y;
  width:100%
}
.form-range:active::-webkit-slider-thumb,
.form-range:focus::-webkit-slider-thumb {
  box-shadow:0 0 0 .625rem rgba(153,246,228,.3)
}
.form-range:active::-moz-range-thumb,
.form-range:focus::-moz-range-thumb {
  box-shadow:0 0 0 .625rem rgba(153,246,228,.3)
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  background-color:var(--primary-500);
  border-radius:50%;
  border:none;
  height:1.25rem;
  width:1.25rem;
  transition:box-shadow .15s
}
.form-range::-webkit-slider-thumb:hover {
  box-shadow:0 0 0 .625rem rgba(153,246,228,.3)
}
.form-range::-moz-range-thumb {
  background-color:var(--primary-500);
  border-radius:50%;
  border:none;
  height:1.25rem;
  width:1.25rem;
  transition:box-shadow .15s
}
.form-range::-moz-range-thumb:hover {
  box-shadow:0 0 0 .625rem rgba(153,246,228,.3)
}
.form-unit {
  position:relative
}
.form-unit:after {
  content:attr(data-unit);
  color:var(--primary-500);
  font-weight:700;
  position:absolute;
  pointer-events:none;
  right:.9375rem;
  top:.625rem
}
.form-unit .form-control {
  padding-right:2.5rem
}
.toplist-filters {
  border-radius:1.25rem;
  margin-bottom: 1.875rem;
}
[data-filters-collapsing=true] .toplist-filters-header {
  max-height:var(--filters-header-height);
  overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1)
}
[data-filters-collapsed=false] .toplist-filters-header {
  max-height:0;
  overflow:hidden
}
@media screen and (min-width:992px) {
  [data-filters-collapsed=true] .toplist-filters-header {
    max-height:none;
    overflow:visible
  }
}
@media screen and (min-width:992px) {
  .toplist-filters-header {
    display:none
  }
}
button.toplist-filters-toggle {
  font-size:1.25rem;
  line-height:1.875rem;
  align-items:center;
  border-radius:1.125rem;
  display:flex;
  font-weight:700;
  padding:.9375rem 1.5625rem .9375rem 1.25rem;
  width:100%;
  border: none;
  color: #000;
  background-color: transparent;
}
button.toplist-filters-toggle:focus,
button.toplist-filters-toggle:hover{
  background-color: transparent;
  color: #000;
}
.toplist-filters-toggle:active {
  background-color:var(--primary-50)
}
.toplist-filters-toggle>* {
  pointer-events:none
}
.toplist-filters-toggle .icon {
  display:block;
  height:1.5625rem;
  margin-right:.625rem;
  width:1.5625rem
}
[data-filters-collapsing=true] .toplist-filters-collapse {
  max-height:var(--filters-collapse-height);
  overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1)
}
@media screen and (min-width:992px) {
  [data-filters-collapsing=true] .toplist-filters-collapse {
    max-height:none;
    overflow:visible;
    transition:none
  }
}
[data-filters-collapsed=true] .toplist-filters-collapse {
  max-height:0;
  overflow:hidden
}
@media screen and (min-width:992px) {
  [data-filters-collapsed=true] .toplist-filters-collapse {
    max-height:none;
    overflow:visible
  }
}
button.toplist-filters-close {
  align-items:center;
  border-radius:.3125rem;
  display:flex;
  flex-shrink:0;
  height:1.875rem;
  justify-content:center;
  width:1.875rem;
  transform:scale(.65);
  transition:transform .1s ease-out;
  border: none;
}
button.toplist-filters-close:hover{
  background-color: transparent;
}
[data-filters-collapsed=false] .toplist-filters-close {
  opacity:1;
  transform:scale(1)
}
[data-filters-collapsing=true] .toplist-filters-close {
  opacity:0
}
.toplist-filters-close:active {
  background-color:var(--neutral-100)
}
.toplist-filters-close img {
  height:1.5625rem!important;
  width:1.5625rem;
  max-width: unset !important;
}
@media screen and (min-width:992px) {
  button.toplist-filters-close {
    display:none
  }
}
@media screen and (min-width:992px) {
  .toplist-filters-form {
    display:grid;
    grid-template-columns:1fr 32.25%
  }
}
.toplist-filters-preferences {
  padding:1.5625rem 1.25rem 1.25rem
}
@media screen and (min-width:992px) {
  .toplist-filters-preferences {
    padding:1.875rem 2.5rem 2.5rem
  }
}
.toplist-filters-preferences-header {
  align-items:center;
  display:flex;
  margin-bottom:1.25rem;
  overflow:hidden
}
@media screen and (min-width:992px) {
  .toplist-filters-preferences-header {
    display:block;
    margin-bottom:.9375rem
  }
}
.toplist-filters-preferences-title {
  font-size:1.5rem;
  line-height:1.875rem;
  color:var(--secondary-700);
  font-weight:700
}
.toplist-filters-benefits {
  background-color:var(--primary-50);
  border:1px solid rgba(13,148,136,.2);
  border-radius:0 0 1.125rem 1.125rem;
  border-width:1px 0 0;
  display:block;
  padding:.9375rem 1.25rem 1.25rem
}
@media screen and (min-width:992px) {
  .toplist-filters-benefits {
    border-radius:0 1.125rem 1.125rem 0;
    border-width:0 0 0 1px;
    padding:1.875rem 2.5rem
  }
}
.toplist-filters-benefits-title {
  font-weight:700;
  margin-bottom:.625rem
}
.toplist-filters-benefits-group {
  align-items:center;
  display:flex;
  justify-content:space-between
}
.toplist-filters-benefits-group+.toplist-filters-benefits-group {
  margin-top:1.25rem
}
@media screen and (min-width:992px) {
  .toplist-filters-row {
    display:grid;
    gap:1.875rem;
    grid-template-columns:10.75rem 1fr
  }
}
.toplist-filters-row+.toplist-filters-row {
  margin-top:1.875rem
}
.toplist-filters-group {
  display:grid;
  gap:.625rem;
  grid-template-columns:repeat(1,1fr)
}
.toplist-filters-label {
  font-size:1.125rem;
  line-height:1.875rem;
  color:var(--neutral-900);
  font-weight:700
}
.toplist-filters-range {
  margin-top:1.25rem
}
@media screen and (min-width:992px) {
  .toplist-filters-range {
    align-self:self-end;
    margin-top:0
  }
}
.toplist-filters-range__legends {
  font-size:.875rem;
  line-height:1.25rem;
  color:var(--neutral-600);
  display:flex;
  justify-content:space-between;
  margin-top:.625rem
}
@media screen and (min-width:992px) {
  .toplist-filters-range__legends {
    margin-top:.3125rem
  }
}
.toplist-filters .form-control {
  width:100%
}
.toplist-card {
  background-color:#fff;
  border-radius:.9375rem;
  cursor:default;
  padding:1.875rem;
}
.toplist-card[hidden] {
  display:none
}

.toplist-card+.toplist-card {
  margin-top:1.875rem
}

.toplist-card-top{
  display: flex;
  gap: 50px;
}

.toplist-card-main{
  display: flex;
  flex-grow: 2;
  justify-content: space-between;
}
.toplist-card-body {
  width: 100%;
}
.main-content-section .toplist-card-promo img {
  width: 250px;
  height: auto;
  min-width: 250px;
}

.main-content-section h2.toplist-card-title {
  font-size:28px;
  line-height:1;
  font-weight:700;
  margin-bottom: 15px;
  margin-top: 0;
}
h2.toplist-card-title a{
  color: #26292A;
}
.toplist-card-title a:hover{
  text-decoration: underline;
}

.toplist-card-badge {
  background-color:#f0fdfa;
  border-radius:.3125rem;
  color:#036642;
  font-size:16px;
  font-weight:400;
  line-height:1.1;
  margin-left:auto;
  margin-right:auto;
  margin-top: 15px;
  padding:.625rem .9375rem;
  text-align:center;
  max-width: 250px;
}
.main-content-section .toplist-card-badge p{
  margin: 0;
}
.toplist-card-features {
  font-size:.875rem;
  line-height:1.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:.3125rem
}
.toplist-card-features li {
  align-items:center;
  background-color:#f4f4f5;
  border-radius:5px;
  display:inline-flex;
  gap:.3125rem;
  padding:.3125rem .9375rem .3125rem .625rem;
  font-size: 14px;
}
.toplist-card-features  img{
  width: 20px;
  height: auto;
  margin-right: 3px;
}

.toplist-card-text{}
.toplist-card-text ul{
  list-style: disc;
  font-size: 16px;
  line-height: 1.5;
  margin: 15px 0 15px 20px;
}

.toplist-card-details{
  display: flex;
  max-width: 470px;
}
.toplist-card-details-group{
  width: 25%;
  text-align: center;
}
.toplist-card-details-group:not(:last-child){
  border-right: 1px solid #e1e1e1;
}
.toplist-card-details-group dd{
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #e1e1e1;
}
.toplist-card-details-group dt{
  font-size: 14px;
  color: #9a9a9a;
}

.toplist-card-more{
  margin-top: 20px;
}
.toplist-card-more-title{
  background: #f4f4f5;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  color: #26292A;
  width: 100%;
  border-radius: 5px;
  padding: 10px 15px;
  padding-left: 45px;
  position: relative;
  cursor: pointer;
}
.toplist-card-more-title::before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(./img/plus.svg) no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
.toplist-card-more.open .toplist-card-more-title::before{
  background: url(./img/minus.svg) no-repeat;
}
.toplist-card-more.open{
  border: 1px solid #f4f4f5;
  border-radius: 5px; 
}
.toplist-card-more .toplist-card-more-content h3{
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 10px;
}
.toplist-card-more p,
.toplist-card-more ul{
  font-size: 16px;
  line-height: 1.5;
}
.toplist-card-global{
  margin-top: 25px;
}
.toplist-card-global ul{
  list-style: disc;
  margin: 15px 0 15px 20px;
}
.toplist-card-more .toplist-card-global p{
  margin-bottom: 16px;
}
.toplist-card-more-inner{
  max-height: 0;
  transform: scale(1,0);
  transform-origin: top;
  overflow-y: hidden;
  transition: all .5s ease-in-out;
}
.toplist-card-more.open .toplist-card-more-inner{
  transform: scale(1,1);
  max-height: 1000px;
}
.toplist-card-more-content{
  transform: translateY(-20px);
  transition: all .3s .5s;
  opacity: 0;
  padding: 10px;
}
.toplist-card-more.open .toplist-card-more-content{
  transform: translateY(0);
  opacity: 1;
}
.toplist-card-brief{
  display: flex;
}
.toplist-card-brief > div{
  width: 50%;
}
.toplist-card-brief li{
  position: relative;
  padding-left: 25px;
}
.toplist-card-brief li::before{
  position: absolute;
  top: 0;
  left: 0;
}
.toplist-card-benefits li::before{
  content: url(./img/plus-circle.svg);
}
.toplist-card-dis li::before{
  content: url(./img/minus-circle.svg);
}

.toplist-card-info {
  font-size:16px;
  color:#26292A;
  text-align: center;
  margin-top: 15px;
}
.toplist-card-actions {
  display:flex;
  flex-direction:column;
  gap:.625rem;
  text-align:center;
  justify-content: center;
}
.toplist-card-actions .toplist-card-actions__btn{
  background: #018254;
  color: #fff;
  font-weight: 900;
  font-size: 30px;
  line-height: 60px;
  padding: 0 80px;
  border-radius: 45px;
  white-space: nowrap;
  transition: all .5s ease-in-out;
}
.toplist-card-actions .toplist-card-actions__info {
  font-size:16px;
  line-height:1;
  color: #26292A;
  order: 999;
}
.toplist-card-start .toplist-card-title{
  display: none;
}

@media screen and (max-width:992px) {
  .toplist-card-main{
    flex-direction: column;
  }
  .toplist-card-actions{
    margin-top: 25px;
  }
  .toplist-card-actions .toplist-card-actions__btn{
    line-height: 50px;
  }
  .toplist-card-details{
    max-width: unset;
  }
  .toplist-card-main .toplist-card-title{
    display: none;
  }
  .main-content-section .toplist-card-start h2.toplist-card-title{
    display: block;
    margin-top: 15px;
    max-width: 250px;
  }
  .toplist-card-top{
    gap: 30px;
  }
}
@media screen and (max-width:768px) {
  .toplist-card-top{
    flex-direction: column;
  }
  .toplist-card-actions .toplist-card-actions__btn{
    line-height: 40px;
    font-size: 26px;
  }
  .toplist-card-start{
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  .toplist-card-promo{
    margin: auto!important;
  }
  .toplist-card-badge{
    margin-top: 0;
    max-width: unset;
  }
  .main-content-section .toplist-card-start h2.toplist-card-title{
    max-width: unset;
  }
  .toplist-card-details-group{
    width: 50%;
  }
  .toplist-card-details{
    flex-wrap: wrap;
  }
  .toplist-card-details-group:not(:last-child){
    border-right: none;
  }
  .toplist-card-details-group dd{
    border-bottom: none;
  }
  .toplist-card{
    padding: 15px;
  }
  .toplist-card-top{
    gap: 10px;
  }
  .toplist-card-features{
    margin-top: 10px;
  }
}


.toplist-no-result {
  font-size:1rem;
  line-height:1.5625rem;
  background-color:var(--primary-50);
  border-radius:.9375rem;
  padding:1.5625rem 1.5625rem;
  text-align:center
}
.toplist-filters-benefits .tooltip {
  display:block;
  border-bottom: none;
  position: static;
}
.tooltip:hover .tooltip-dialog {
  animation:tooltipFadeInMobile .15s forwards;
  display:block
}
@media screen and (min-width:992px) {
  .tooltip:hover .tooltip-dialog {
    animation:tooltipFadeInDesktop .15s forwards;
    display:block
  }
}
.tooltip-dialog {
  font-size:1rem;
  line-height:1.5625rem;
  background-color:var(--white);
  border-radius:.625rem;
  border:1px solid var(--primary-500);
  display:none;
  max-width:calc(100vw - 3.125rem);
  padding:.625rem .9375rem;
  pointer-events:none;
  position:absolute;
  right:1.5625rem
}
.tooltip-dialog:after {
  background-color:var(--white);
  border:1px solid var(--primary-500);
  border-width:0 1px 1px 0;
  content:"";
  display:block;
  position:absolute;
  height:.625rem;
  right:1.25rem;
  top:100%;
  width:.625rem;
  transform:rotate(45deg) translateY(calc(-50% - 1px))
}
@media screen and (min-width:992px) {
  .tooltip-dialog {
    max-width:none;
    right:auto;
    width:20rem
  }
  .tooltip-dialog:after {
    right:1.75rem
  }
}
.tooltip img {
  height:1.25rem;
  width:1.25rem
}
@keyframes tooltipFadeInMobile {
  0% {
    transform:translateY(calc(-100% - 3.125rem))
  }
  100% {
    transform:translateY(calc(-100% - 2.1875rem))
  }
}
@keyframes tooltipFadeInDesktop {
  0% {
    transform:translate(calc(-100% + 2.5rem),calc(-100% - 3.125rem))
  }
  100% {
    transform:translate(calc(-100% + 2.5rem),calc(-100% - 2.1875rem))
  }
}