:root {
  --icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' width='24' height='24' fill='rgb(162,175,185)'%3E%3Cpath d='M880.1%20154H143.9c-24.5%200-39.8%2026.7-27.5%2048L349%20597.4V838c0%2017.7%2014.2%2032%2031.8%2032h262.4c17.6%200%2031.8-14.3%2031.8-32V597.4L907.7%20202c12.2-21.3-3.1-48-27.6-48zM603.4%20798H420.6V642h182.9v156zm9.6-236.6l-9.5%2016.6h-183l-9.5-16.6L212.7%20226h598.6L613%20561.4z'%3E%3C/path%3E%3C/svg%3E");

  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 8L10 0H0L5 8Z' fill='rgb(30,36,39)'/%3E%3C/svg%3E");

  --icon-tick-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2753 0.430739L18.2353 2.15265C18.6294 2.49957 19.1092 2.64019 19.6286 2.56126L22.2081 2.172C23.0685 2.04194 23.8808 2.56418 24.1208 3.40062L24.8377 5.90878C24.9822 6.4146 25.3089 6.79144 25.7887 7.00629L28.1698 8.07297C28.9637 8.4295 29.3656 9.30734 29.1141 10.1409L28.3615 12.6394C28.2102 13.1424 28.2815 13.6368 28.5686 14.077L29.9948 16.2624C30.4708 16.9909 30.333 17.9468 29.6709 18.5124L27.6869 20.2064C27.287 20.5475 27.0799 21.0023 27.0837 21.5275L27.102 24.1359C27.1078 25.007 26.4758 25.7364 25.6133 25.854L23.0279 26.2066C22.5066 26.2779 22.0875 26.5477 21.8061 26.9919L20.4108 29.1966C19.9455 29.9318 19.0194 30.2045 18.2302 29.8374L15.8646 28.737C15.3886 28.5153 14.8885 28.5153 14.4124 28.737L12.0468 29.8374C11.2576 30.2045 10.3315 29.9327 9.86616 29.1966L8.47087 26.9919C8.18951 26.5477 7.76942 26.2779 7.24906 26.2066L4.66373 25.854C3.80135 25.7364 3.16922 25.006 3.17497 24.1359L3.19327 21.5275C3.19714 21.0014 2.98991 20.5475 2.5901 20.2064L0.606067 18.5124C-0.0558563 17.9468 -0.193675 16.991 0.282252 16.2624L1.70837 14.077C1.99549 13.6367 2.0668 13.1434 1.9155 12.6394L1.16292 10.1409C0.911462 9.30734 1.31327 8.4295 2.10725 8.07297L4.48827 7.00629C4.96819 6.79144 5.29481 6.41367 5.4393 5.90878L6.15622 3.40062C6.39524 2.56324 7.20751 2.04192 8.06895 2.172L10.6484 2.56126C11.1677 2.63936 11.6476 2.49957 12.0417 2.15265L14.0017 0.430739C14.656 -0.14358 15.6205 -0.14358 16.2749 0.430739H16.2753ZM5.37027 15.4039L13.4635 22.6904L24.906 9.97684L23.1214 8.1923L13.2408 16.2874L8.01042 12.2511L5.36926 15.4049L5.37027 15.4039Z' fill='rgb(219,255,0)'/%3E%3C/svg%3E");

  --icon-tick-star-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2753 0.430739L18.2353 2.15265C18.6294 2.49957 19.1092 2.64019 19.6286 2.56126L22.2081 2.172C23.0685 2.04194 23.8808 2.56418 24.1208 3.40062L24.8377 5.90878C24.9822 6.4146 25.3089 6.79144 25.7887 7.00629L28.1698 8.07297C28.9637 8.4295 29.3656 9.30734 29.1141 10.1409L28.3615 12.6394C28.2102 13.1424 28.2815 13.6368 28.5686 14.077L29.9948 16.2624C30.4708 16.9909 30.333 17.9468 29.6709 18.5124L27.6869 20.2064C27.287 20.5475 27.0799 21.0023 27.0837 21.5275L27.102 24.1359C27.1078 25.007 26.4758 25.7364 25.6133 25.854L23.0279 26.2066C22.5066 26.2779 22.0875 26.5477 21.8061 26.9919L20.4108 29.1966C19.9455 29.9318 19.0194 30.2045 18.2302 29.8374L15.8646 28.737C15.3886 28.5153 14.8885 28.5153 14.4124 28.737L12.0468 29.8374C11.2576 30.2045 10.3315 29.9327 9.86616 29.1966L8.47087 26.9919C8.18951 26.5477 7.76942 26.2779 7.24906 26.2066L4.66373 25.854C3.80135 25.7364 3.16922 25.006 3.17497 24.1359L3.19327 21.5275C3.19714 21.0014 2.98991 20.5475 2.5901 20.2064L0.606067 18.5124C-0.0558563 17.9468 -0.193675 16.991 0.282252 16.2624L1.70837 14.077C1.99549 13.6367 2.0668 13.1434 1.9155 12.6394L1.16292 10.1409C0.911462 9.30734 1.31327 8.4295 2.10725 8.07297L4.48827 7.00629C4.96819 6.79144 5.29481 6.41367 5.4393 5.90878L6.15622 3.40062C6.39524 2.56324 7.20751 2.04192 8.06895 2.172L10.6484 2.56126C11.1677 2.63936 11.6476 2.49957 12.0417 2.15265L14.0017 0.430739C14.656 -0.14358 15.6205 -0.14358 16.2749 0.430739H16.2753ZM5.37027 15.4039L13.4635 22.6904L24.906 9.97684L23.1214 8.1923L13.2408 16.2874L8.01042 12.2511L5.36926 15.4049L5.37027 15.4039Z' fill='rgb(255,0,0)'/%3E%3C/svg%3E");

  --icon-up-down: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.6'%3E%3Cpath d='M6.5126 7.82768C6.61482 7.93516 6.75307 7.9967 6.90185 8.00034C7.05042 8.00378 7.19171 7.94953 7.29919 7.84711C7.30283 7.84367 7.30668 7.84023 7.31053 7.83699L9.82129 5.44909C9.89861 5.37562 10.0197 5.3746 10.098 5.44687L12.7063 7.85217C12.9316 8.06005 13.2842 8.04568 13.4925 7.81999C13.7004 7.59531 13.6858 7.2427 13.4601 7.0336L10.3294 4.14695C10.2231 4.04898 10.0877 4 9.95246 4C9.81724 4 9.67596 4.05101 9.56908 4.15303L6.53264 7.04049C6.42071 7.14635 6.35938 7.28946 6.35938 7.4441C6.35938 7.58721 6.41382 7.72344 6.5126 7.82768Z' fill='white'/%3E%3Cpath d='M13.4917 12.1804C13.284 11.9547 12.9314 11.9405 12.7053 12.1484L10.0972 14.5535C10.0188 14.6257 9.8978 14.6249 9.82048 14.5512L7.29939 12.1536C7.19515 12.0542 7.05953 12 6.91602 12C6.91136 12 6.9065 12 6.90185 12C6.75307 12.0036 6.61482 12.065 6.5126 12.1727C6.41382 12.2771 6.35938 12.4133 6.35938 12.5564C6.35938 12.7111 6.42071 12.8542 6.53224 12.9597L9.56888 15.8473C9.77696 16.0459 10.1031 16.052 10.3182 15.8637C10.3215 15.8603 10.3249 15.8568 10.3283 15.8536L13.4595 12.9663C13.6846 12.7578 13.6992 12.405 13.4917 12.1801V12.1804Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");

  --icon-checkbox-2: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2384_6269)'%3E%3Cpath d='M12.3396 0H2.66037C1.18871 0 0 1.18871 0 2.66037V12.3396C0 13.8113 1.18871 15 2.66037 15H12.3396C13.8113 15 15 13.8113 15 12.3396V2.66037C15 1.21694 13.7831 0 12.3396 0ZM5.80195 11.6886L2.37741 8.23583L3.99066 6.65082L5.8304 8.49055L11.0096 3.3114L12.6228 4.92464L5.83231 11.7151' fill='%23706F75'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2384_6269'%3E%3Crect width='15' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");

  --icon-cloud: url("data:image/svg+xml,%3Csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4617 0C12.7563 0 14.624 1.82733 14.6898 4.10617C16.257 4.3468 17.4562 5.7007 17.4562 7.33433C17.4562 9.14367 15.978 10.6093 14.189 10.6007L2.218 10.6014C1.00472 10.6085 0 9.61316 0 8.38428C0 7.03507 1.19375 6.00061 2.529 6.18895C2.24853 3.96711 4.35167 2.22411 6.461 2.85461C7.0321 1.19368 8.607 0.000614421 10.4618 0.000614421L10.4617 0Z' fill='white'/%3E%3C/svg%3E");

  --icon-on-premise: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000584005 4V1.5C0.000584005 0.67188 0.672464 0 1.50058 0H12.5006C13.3287 0 14.0006 0.67188 14.0006 1.5V4H0.000584005ZM2.50058 2.5H3.97552C4.25177 2.5 4.47552 2.27625 4.47552 2C4.47552 1.72375 4.25177 1.5 3.97552 1.5H2.50058C2.22496 1.5 2.00058 1.72375 2.00058 2C2.00058 2.27625 2.22496 2.5 2.50058 2.5ZM11.0006 1C10.4487 1 10.0006 1.44812 10.0006 2C10.0006 2.55188 10.4487 3 11.0006 3C11.5525 3 12.0006 2.55188 12.0006 2C12.0006 1.44812 11.5525 1 11.0006 1ZM14.0006 5V7.5C14.0006 7.675 13.9706 7.84375 13.915 8H0.0856253C0.03 7.84375 0 7.675 0 7.5V5H14.0006ZM11.0006 5.5C10.4487 5.5 10.0006 5.94812 10.0006 6.5C10.0006 7.05188 10.4487 7.5 11.0006 7.5C11.5525 7.5 12.0006 7.05188 12.0006 6.5C12.0006 5.94812 11.5525 5.5 11.0006 5.5ZM2.50058 7H3.97552C4.25177 7 4.47552 6.77625 4.47552 6.5C4.47552 6.22375 4.25177 6 3.97552 6H2.50058C2.22496 6 2.00058 6.22375 2.00058 6.5C2.00058 6.77625 2.22496 7 2.50058 7ZM13.915 9C13.9706 9.15625 14.0006 9.325 14.0006 9.5V12.5C14.0006 13.3281 13.3287 14 12.5006 14H1.50061C0.672489 14 0.000609334 13.3281 0.000609334 12.5V9.5C0.000609334 9.325 0.0306093 9.15625 0.0862346 9H13.915ZM11.0006 10C10.4487 10 10.0006 10.4481 10.0006 11C10.0006 11.5519 10.4487 12 11.0006 12C11.5525 12 12.0006 11.5519 12.0006 11C12.0006 10.4481 11.5525 10 11.0006 10ZM2.50058 11.5H3.97552C4.25177 11.5 4.47552 11.2763 4.47552 11C4.47552 10.7237 4.25177 10.5 3.97552 10.5H2.50058C2.22496 10.5 2.00058 10.7237 2.00058 11C2.00058 11.2763 2.22496 11.5 2.50058 11.5Z' fill='white'/%3E%3C/svg%3E");


  --asv-color-darkviolet: #6a52a9;
  --asv-color-hover-darkviolet: #8a75bd;

}

.black[role=button] {
  --border-color: #121212;
  --background-color: #121212;
}

.black[role=button]:hover {
  --background-color: #12121299;
}

.flat-primary[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 1.25rem;
  border: none;
  padding: 0 1rem;
  transition: 300ms;
}

.flat-black[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 1.25rem;
  border: none;
  padding: 0 1rem;
  transition: 300ms;
  color: white;
  background: black;
}

.flat-black[role=button]:hover {
  background: #222;
}

.flat-white[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 1.25rem;
  border: none;
  padding: 0 1rem;
  transition: 300ms;
  background: var(--asv-color-silver);
  color: black;
}

.flat-white[role=button]:hover {
  background: white;
}

.flat-gray[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border: none;
  border-radius: 1.25rem;
  padding: 0 1rem;
  transition: 300ms;
  background: var(--background-3-t);
  backdrop-filter: blur(2rem);
  color: white;
}

.flat-gray[role=button]:hover {
  background: var(--primary-focus);
  border-color: var(--primary-focus);
}

.flat-plain[role=button] {
  --line-height: 2.5;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  border: 1pt solid var(--border);
  border-radius: 1.25rem;
  padding: 0 1rem;
  transition: 300ms;
  background: transparent;
  backdrop-filter: blur(2rem);
  color: white;
}

.flat-plain[role=button]:hover {
  background: var(--primary-focus);
  border-color: var(--primary-focus);
}

body {
  min-height: 100vh;
  background: var(--background);
  display: flex;
}

body>div {
  flex: 1;
  display: flex;
}

.page {
  flex: 1;
  width: 100%;
  height: 100%;
}

.page-header .live::before {
  display: inline-block;
  vertical-align: middle;
  content: ' ';
  width: 0.5rem;
  height: 0.5rem;
  background: #7ACF12;
  border-radius: 50%;
  margin: 0 0.5rem 0 0;
}

form {
  margin-bottom: 0;
}

/*
 * Home Page
 *
 */


.home-page {
  display: flex;
  flex-direction: column;
}

.home-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
}

.home-background .shadow {
  flex: 1;
  background: linear-gradient(180deg, #000, #0001 70%, var(--background-1));
}

.home-header,
.home-body {
  position: relative;
  display: flex;
  flex-direction: column;
}


/* Top Features */

/* .top-features { */
/*   display: flex; */
/*   flex-wrap: wrap; */
/*   justify-content: space-between; */
/*   width: 46rem; */
/*   margin: 0 auto; */
/* } */

/* @media (max-width:920px) { */
/*   .top-features { */
/*     width: 19rem; */
/*   } */
/* } */

/* .top-features .feature { */
/*   height: 9.5rem; */
/*   width: 7.5rem; */
/*   display: flex; */
/*   flex-direction: column; */
/*   justify-content: space-between; */
/*   margin-bottom: 2rem; */
/* } */

/* .top-features .feature .box { */
/*   width: 7.5rem; */
/*   height: 7.5rem; */
/*   border: 1pt solid var(--border); */
/*   border-radius: 1rem; */
/* } */

/* .top-features .feature .box img { */
/*   margin: auto; */
/*   transform: translateY(-50%); */
/*   margin-top: 50%; */
/* } */

/* .top-features .feature span { */
/*   font-weight: 900; */
/*   color: white; */
/* } */

/* Headlines */

.headline-1 {
  color: white;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.2;
  max-width: 40rem;
  margin: 2rem auto 1rem auto;
}

.headline-2 {
  color: white;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 auto;
}

@media (max-width:1000px) {
  .headline-1 {
    max-width: 36rem;
  }
  .headline-2 {
    max-width: 36rem;
  }
}

@media (max-width:720px) {
  .headline-1 {
    font-size: 2.1rem;
    max-width: 18rem;
  }
  .headline-2 {
    font-size: 1.1rem;
    max-width: 18rem;
  }
}

/* Search box */

.search-box {
  max-width: 34rem;
  --line-height: 2.4;
  margin: 1rem auto;
}

@media (max-width:680px) {
  .search-box {
    max-width: 18rem;
  }
}

.search-box input[type=search] {
  margin-top: 2rem;
  font-size: 1.2rem;
  color: white;
  background-size: 1.2rem;
  background-color: transparent;
  background-image: var(--icon-search);
  background-repeat: no-repeat;
  background-position: center right 0.6rem;
  border: 1pt solid var(--border);
  border-radius: 0.25rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 2.25rem;
}

.search-box input:focus {
  border-color: var(--primary-focus);
}

/* Filters */

.tag-selectors {
  display: flex;
  flex-wrap: wrap;
  width: 60rem;
  margin: 1.5rem auto;
  justify-content: center;
}

.tag-selectors .select-tag {
  width: 10rem;
  height: 2rem;
  --line-height: 1;
  color: var(--asv-color-green);
  background-color: var(--background-3);
  background-size: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  margin: 0.5rem 1rem;
}

.tag-selectors .select-tag:has(option:checked[value=all]) {
  color: white;
}

.tag-selectors .select-tag option {
  color: white;
}

.tag-selectors .select-tag option:checked {
  color: silver;
}

@media (max-width:1200px) {
  .tag-selectors {
    width: 36rem;
  }
}

@media (max-width:720px) {
  .tag-selectors {
    width: 24rem;
  }
}

@media (max-width:480px) {
  .tag-selectors {
    width: 18rem;
  }

  .tag-selectors .select-tag {
    width: 16rem;
  }
}

.tag-selectors .select-tag optgroup,
.tag-selectors .select-tag option {
  background: var(--background);
}

/* grid */

.rich-items {
  display: flex;
  flex-wrap: wrap;
  width: 72rem;
  margin: 0 auto;
  /* justify-content: space-around; */
}

@media (max-width:1440px) {
  .rich-items {
    width: 54rem;
  }
}

@media (max-width:1080px) {
  .rich-items {
    width: 36rem;
  }
}

@media (max-width:720px) {
  .rich-items {
    width: 18rem;
  }
}

.rich-items .item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 16rem;
  height: 25rem;
  border-radius: 1rem;
  background: linear-gradient(181.44deg, #2B3034 1.22%, #1A1922 98.78%);
  overflow: hidden;
  margin: 0 1rem 2rem 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: unset;
}

.rich-items .item:hover {
  background: black;
}

.rich-items .item .image {
  background: black;
  height: 10rem;
}

.rich-items .item .image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* .rich-items .item .type { */
/*   position: absolute; */
/*   top: 1.5rem; */
/*   left: 1.5rem; */
/*   font-size: 0.8rem; */
/*   font-weight: 500; */
/*   padding: 0.2rem 1rem; */
/*   border-radius: 0.2rem; */
/*   background: #ffffff99; */
/*   color: black; */
/*   transition: 500ms; */
/* } */

/* .rich-items .item:hover .type { */
/*   background: black; */
/*   color: white; */
/* } */

.rich-items .item .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
  color: white;
}

.rich-items .item .body .title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  max-height: 3.2rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.rich-items .item .body .summary {
  flex: 1;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--color-3);
  margin-bottom: 1rem;
  overflow: hidden;
}

.rich-items .item .actions-menu {
  background: cyan;
  height: 1.5rem;
  width: 1.5rem;
  position: absolute;
  left: 1.5rem;
  top: 4rem;
  padding: 0 0.2rem;
  border-radius: 0.2rem;
  background: #f63;
}

.rich-items .item .actions-menu .icon {
  color: white;
}

.rich-items .item .actions-menu:not(:hover) .popover {
  display: none;
}

.rich-items .item .actions-menu:hover .popover {
  position: absolute;
  top: 0;
  left: 0;
  width: 14rem;
  background: #3339;
  display: flex;
  flex-direction: column;
}

.product-body .header .date,
.rich-items .item .body .date {
  color: var(--color-2);
  font-size: 0.7rem;
  position: relative;
}

.product-body .header .date .actual,
.rich-items .item .body .date .actual {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  transition: 500ms;
  background: var(--background-2);
  padding: 0.2rem 1rem;
  border-radius: 0.2rem;
  color: white;
}

.product-body .header .date:hover .actual,
.rich-items .item .body .date:hover .actual {
  opacity: 1;
}



.product-info .subscribed,
.rich-items .item .subscribed {
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--icon-tick-star) no-repeat center/1.5rem;
}
.product-info .subscribed.expired,
.rich-items .item .subscribed.expired {
  background: var(--icon-tick-star-red) no-repeat center/1.5rem;
}

/* .product-info .subscribed:hover::before, */
/* .rich-items .item .subscribed:hover::before { */
/*   position: absolute; */
/*   content: "Subscribed"; */
/*   top: -0.5rem; */
/*   right: -1rem; */
/*   transform: translateY(-100%); */
/*   padding: 0.2rem 1rem; */
/*   background: #DBFF27; */
/*   color: black; */
/*   border-radius: 0.5rem; */
/*   z-index: 1; */
/* } */

/* .product-info .subscribed.expired:hover::before, */
/* .rich-items .item .subscribed.expired:hover::before { */
/*   content: "Expired"; */
/*   background: var(--asv-color-red); */
/*   color: white; */
/* } */

/* .product-info .sustainability, */
/* .rich-items .item .sustainability { */
/*   position: absolute; */
/*   right: 1rem; */
/*   top: 1rem; */
/*   width: 2rem; */
/*   height: 2rem; */
/*   background-image: url('/images/green-leaf.png'); */
/*   background-size: 1.5rem; */
/*   background-position: center; */
/*   border-radius: 50%; */
/*   background-color: #ffffff99; */
/*   box-shadow: #fff 0 0 1rem 0.2rem; */
/* } */

/* .product-info .sustainability:hover::before, */
/* .rich-items .item .sustainability:hover::before { */
/*   content: "Sustainability"; */
/*   position: absolute; */
/*   bottom: -0.5rem; */
/*   right: -0.5rem; */
/*   transform: translateY(100%); */
/*   padding: 0.2rem 1rem; */
/*   background: #0c6a0c; */
/*   color: white; */
/*   border-radius: 0.5rem; */
/*   z-index: 1; */
/* } */

/* .product-info .popular, */
/* .rich-items .item .popular { */
/*   position: absolute; */
/*   right: 1rem; */
/*   top: 9rem; */
/* } */

/* .product-info .popular::before, */
/* .rich-items .item .popular::before { */
/*   display: block; */
/*   height: 1.5rem; */
/*   width: 1.5rem; */
/*   border-radius: 50%; */
/*   font-size: 1.1rem; */
/*   content: '⭐'; */
/*   text-align: center; */
/*   line-height: 1.5rem; */
/*   /\* box-shadow: orange 0 0 0.6rem 0.2rem, inset orange 0 0 0.4rem 0.2rem; *\/ */
/*   box-shadow: #ff5900 0 0 1rem 0.2rem; */
/*   background-color: #ff590099; */
/* } */

/* .product-info .popular:hover::after, */
/* .rich-items .item .popular:hover::after { */
/*   content: "Popular"; */
/*   position: absolute; */
/*   bottom: -0.5rem; */
/*   right: -0.5rem; */
/*   transform: translateY(100%); */
/*   padding: 0.2rem 1rem; */
/*   background: orange; */
/*   color: black; */
/*   border-radius: 0.5rem; */
/*   z-index: 1; */
/* } */

/* upsell */

.upsell {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 70rem;
  padding: 0;
  margin: 4rem auto 1rem auto;
  background: none;
  border-radius: 1rem;
}

.upsell span {
  display: block;
  width: 32rem;
  margin-bottom: 2rem;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 2.4rem;
  text-align: center;
  color: white;
}

.upsell .btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.upsell .btns a {
  margin: 0 0.5rem;
}

@media (max-width:1440px) {
  .upsell {
    max-width: 52rem;
  }

  .upsell span {
    max-width: 35rem;
  }
}

@media (max-width:1080px) {
  .upsell {
    max-width: 34rem;
  }

  .upsell span {
    max-width: 22rem;
    font-size: 1.2rem;
    line-height: 1.3rem;
  }
}

@media (max-width:720px) {
  .upsell {
    max-width: 90vw;
  }

  .upsell span {
    max-width: 15rem;
    font-size: 1.2rem;
    line-height: 1.3rem;
  }
}


/*
 * Product Page
 *
 */

.product-page {
  display: flex;
  flex-direction: column;
  max-width: 62rem;
  padding: 0;
  margin: 0 auto;
  --product-content-header-min-height: 24rem;
}

.product-header,
.product-footer {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 99;
}

.product-body {
  display: flex;
  flex-direction: column;
  min-height: 38rem;
  margin: 0;
  padding: 0;
  background: var(--background-2);
  border-radius: 1rem;
}

.product-body .product-body-row {
  display: flex;
  margin: 0;
  padding: 0;
}

.product-body .product-left-column {
  position: relative;
  flex: 1;
  padding: 0;
}

.product-body .product-right-column {
  position: relative;
  width: 20rem;
  padding: 0;
}

@media (max-width:1440px) {
  .product-page {
    max-width: calc(100% - 2rem);
  }
}

@media (max-width:960px) {
  .product-body .product-right-column {
    width: 18rem;
  }
}

@media (max-width:720px) {
  .product-body .product-body-row {
    flex-direction: column;
  }

  .product-body .product-right-column {
    width: unset;
  }
}

.product-body .product-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.product-body .product-background .product-image {
  display: block;
  width: 70rem;
  height: 38rem;
  margin: 2rem auto;
  border-radius: 1rem;
  object-fit: cover;
  background: black;
  /* filter: grayscale(0.5) brightness(0.5); */
}

@media (max-width:1440px) {
  .product-page .product-background .product-image {
    margin: 1rem auto;
    max-width: calc(100% - 2rem);
  }
}

.home-link[role=button] {
  font-size: 0.9rem;
  width: fit-content;
  margin: 0 auto 0 2rem;
}

.home-link[role=button]::before {
  content: '◀';
  margin: 0 0.5rem 0 0;
}

@media (max-width:960px) {
  .home-link[role=button] {
    margin-left: 0.5rem;
  }
}

.product-left-column .header {
  min-height: calc(var(--product-content-header-min-height) - 4rem);
  margin: 2rem;
}

.product-left-column .header .title {
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

@media (max-width:960px) {
  .product-left-column .header {
    margin: 2rem 0.5rem;
  }

  .product-left-column .header .title {
    font-size: 2.8rem;
  }
}

.product-left-column .header .title span {
  background: #0003;
}

.product-left-column .header .summary {
  flex: 1;
  overflow: hidden;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 400;
  color: var(--color-6);
  margin-bottom: 1rem;
}

.product-left-column .header .summary span {
  background: #0003;
}

.product-left-column .product-subscription-notes {
  border: 1px dashed green;
  margin-top: 7px;
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
}

.product-left-column .product-content {
  padding: 0 2rem;
}

@media (max-width:960px) {
  .product-left-column .product-subscription-notes {
    margin: 0.5rem;
    padding: 0.5rem;
  }

  .product-left-column .product-content {
    padding: 0 1rem;
  }
}



.product-right-column .header {
  min-height: calc(var(--product-content-header-min-height) - 4rem);
  margin: 2rem 0;
}

@media (max-width:720px) {
  .product-right-column .header {
    min-height: unset;
  }
}


.product-info {
  display: flex;
  flex-direction: column;
  width: 16rem;
  min-height: 16rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #2F363BCC, #1C2023CC);
  backdrop-filter: blur(2rem);
  color: white;
  margin: 0 auto;
  overflow: hidden;
}

.product-info .price {
  font-weight: 500;
  font-size: 1.4rem;
  margin: 1rem auto 1rem 1rem;
}

.product-info .benefits {
  overflow: hidden;
  margin: 1rem;
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.1rem;
  padding: 0;
}

.product-info .benefits li {
  list-style-type: none;
  color: white;
  border-bottom: 1pt solid #606060;
  padding: 0.75rem 0;
  margin: 0;
}

.product-info .action {
  height: 2rem;
  font-size: 1rem;
  line-height: 1;
  padding-top: 0.35rem;
  margin-top: 0.5rem;
  border-radius: 0;
}

.product-info .action:last-child {
  height: 3rem;
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 500;
  overflow: hidden;
}

.product-info .owned {
  text-align: center;
  padding: 0.5rem;
  background: green;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.2rem 1rem;
  margin: 0.5rem auto;
  border-radius: 1rem;
}

.product-info .owned.expired {
  background: var(--asv-color-red);
}

.product-info .subscribed {
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background-size: 2rem;
}

/* .product-info .popular { */
/*   top: 0.75rem; */
/*   right: 4rem; */
/* } */

/* .product-info .sustainability { */
/*   top: 0.5rem; */
/*   right: 0.5rem; */
/* } */


.product-right-column #unsubscribe-button {
  display: block;
  width: fit-content;
  background: none;
  backdrop-filter: blur(2rem);
  color: white;
  border: none;
  height: unset;
  font-size: 0.7rem;
  font-weight: 400;
  padding: 0.2rem 0.5rem;
  margin: 1rem auto;
  transition: 500ms;
}

.product-right-column #unsubscribe-button:hover {
  background: var(--asv-color-red);
  color: white;
}

.product-right-column .product-side-content {
  font-size: 1rem;
  width: 16rem;
  margin: auto;
}

@media (max-width:720px) {

  .product-right-column .product-side-content {
    width: unset;
    padding: 0.5rem;
    margin: 0;
  }
}

.product-right-column .related-products {
  margin: 2rem 0;
}

.product-right-column .related-products > label {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: var(--primary);
}

.product-right-column .related-products .rich-items {
  width: 16rem;
  margin: auto;
}

.product-right-column .related-products .rich-items .item {
  margin: 1rem 0;
}


/*
 * Pricing Page
 */

.pricing-page {
  display: flex;
  flex-direction: column;
  max-width: 74rem;
  margin: auto;

  --pricing-color-1: white;
  --pricing-color-2: #8D9397;

  --pricing-background-1: #1B1A23;
  --pricing-background-2: #281A78;
  --pricing-background-2-t: #281A7880;
  --pricing-background-2-h: #301F90;
  --pricing-background-3: #121212;
  --pricing-background-4: #323139;
  --pricing-background-4-h: #4B4A55;

  --pricing-border-1: #52515f;
  --pricing-border-2: #2B3034;
}

.pricing-page .pricing-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.pricing-page .pricing-background .pricing-image {
  display: block;
  width: 100%;
  height: 30rem;
  object-fit: cover;
  filter: grayscale(1) brightness(1);
}

.pricing-page .pricing-background .pricing-shadow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #000f, #0000);
}

.pricing-page .pricing-header {
  position: relative;
  max-width: 34rem;
  margin: 3rem auto 1rem auto;
  text-align: center;
}

.pricing-page .pricing-body {
  position: relative;
}

.pricing-body .current-plan {
  padding: 0.5rem;
  margin: 1rem auto;
  max-width: 35rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 1rem;
  color: var(--pricing-color-1);
  background: #5B656B;
  font-size: 1rem;
  font-weight: 400;
}

.pricing-body .current-plan .title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0.5rem;
}

.pricing-body .current-plan .message {
  width: fit-content;
  margin: 0.5rem auto;
}

.pricing-body .current-plan .description {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0.5rem auto;
}

.pricing-body .current-plan .btns a {
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0.5rem;
  outline: none;
}

.pricing-body .toggle-period {
  display: flex;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background: var(--pricing-background-1);
  margin: 0.5rem auto;
  width: fit-content;
}

.pricing-body .toggle-period .period {
  display: flex;
  margin: 0.25rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  color: var(--pricing-color-1);
}

.pricing-body.monthly .toggle-period .period.monthly,
.pricing-body.yearly .toggle-period .period.yearly {
  background: white;
  color: var(--pricing-background-1);
}

.pricing-body.monthly .toggle-period .period.yearly:hover,
.pricing-body.yearly .toggle-period .period.monthly:hover {
  background: var(--secondary-hover);
  cursor: pointer;
}

.pricing-body .toggle-period .discount {
  background: var(--primary);
  color: var(--pricing-background-1);
  font-size: 0.6rem;
  line-height: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  margin: 0 0 0 0.5rem;
}


.pricing-body .pricing-tiers {
  display: flex;
  flex-wrap: wrap;
}

.pricing-body .pricing-tier {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 16rem;
  min-height: 37rem;
  margin: 1rem;
  padding: 1rem;
  background: linear-gradient(180deg, #222129 1.22%, #1A1922 98.78%);
  border-radius: 1rem;
}

.pricing-body.monthly .pricing-tier .yearly,
.pricing-body.yearly .pricing-tier .monthly {
  display: none;
}

.pricing-tier .header {
  min-height: 8rem;
}

.pricing-tier .header .title {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  color: var(--pricing-color-1);
}

.pricing-tier .header .description {
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 0 0.5rem;
  margin: 0.25rem 0;
  color: var(--pricing-color-2);
}

.pricing-tier .plan-box {
  display: flex;
  flex-direction: column;
}

.pricing-tier .plan-box .plan {
  display: flex;
  padding: 0.5rem;
}

.pricing-tier .plan-box .plan .value {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--pricing-color-1);
}

.pricing-tier .plan-box .plan .suffix {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-2);
  padding: 0.75rem 0 0 1rem;
}

.pricing-tier .plan-box .credits {
  display: flex;
  border: 1px dashed var(--pricing-border-1);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.pricing-tier .plan-box .popup-anchor .credits {
  background-image: var(--icon-up-down);
  background-position: right 0.25rem top 50%;
  cursor: pointer;
}

.pricing-tier .plan-box .popup-anchor .credits:hover {
  background-color: var(--secondary-hover);
}

.pricing-tier .plan-box .credits .value {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--pricing-color-1);
}

.pricing-tier .plan-box .credits .suffix {
  font-weight: 400;
  font-size: 0.6rem;
  color: var(--pricing-color-1);
  padding: 0.5rem 0 0 1rem;
}

.pricing-tier .plan-box .credits.custom .suffix {
  padding: 5px 0 0 1rem;
  line-height: 1.1;
}

.pricing-tier .plan-box .credits > svg {
  margin: 0.25rem 0;
  color: var(--pricing-color-1);
}

.pricing-tier .plan-box .popup-anchor {
  position: relative;
}

.pricing-tier .plan-box .popup {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 20rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: var(--pricing-background-3);
  overflow: auto;
}

.pricing-tier .plan-box .popup-anchor:not(.active) .popup {
  display: none;
}

.pricing-tier .plan-box .popup-item {
  background: var(--pricing-background-4);
  border-radius: 0.25rem;
  margin: 0.05rem;
  padding: 0.5rem;
  cursor: pointer;
}

.pricing-tier .plan-box .popup-item:hover {
  background: var(--pricing-background-4-h);
}

.pricing-tier .plan-box .popup-item.active {
  background: none;
}

.pricing-tier .plan-box .popup-item .line-1 {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-1);
}

.pricing-tier .plan-box .popup-item .line-2 {
  font-weight: 400;
  font-size: 0.6rem;
  color: var(--pricing-color-2);
}

.pricing-tier .plan-box [role=button] {
  margin: 1rem 0;
}

.pricing-tier .plan-box [role=button] + [role=button] {
  margin-top: 0;
}

.pricing-tier .plan-box .custom[role=button] {
  background: var(--pricing-background-2);
  border-color: var(--pricing-background-2);
}

.pricing-tier .plan-box .custom[role=button]:hover {
  background: var(--pricing-background-2-h);
}

.pricing-tier .benefits .title {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-1);
  border-bottom: 1px solid var(--pricing-border-2);
  padding: 0.5rem;
  margin: 0.5rem 0;
}

.pricing-tier .benefits .benefit {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-2);
  background-position: left 0.5rem top 50%;
  background-image: var(--icon-checkbox-2);
  padding: 0.2rem 0.2rem 0.2rem 1.8rem;
}

.pricing-tier .footer {
  display: flex;
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--pricing-color-1);
  padding: 0;
  margin-top: 1.5rem;
}

.pricing-tier .footer svg {
  margin: auto 0.5rem auto 0;
}

.pricing-page .pricing-footer {
  position: relative;
}

.pricing-page .pricing-footer .promo-code {
  display: flex;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: transparent;
  padding-left: 0.5rem;
}

.pricing-page .pricing-footer .promo-code input {
  width: 12rem;
  margin: auto;
  color: white;
  background: none;
  border: none;
  box-shadow: none;
  --form-element-active-border-color: transparent;
  --form-element-active-background-color: transparent;
}

.pricing-page .pricing-footer .promo-code .flat-plain {
  width: 2.5rem;
  padding: 0;
  border: none;
  margin: 0;
}

/*
 * User Page
 */

.usage {
  background: var(--asv-color-bg);
  padding: 1rem;
}

.usage th {
  font-weight: 900;
  color: var(--asv-color-darkviolet);
}

/*,.markdown-content li,.markdown-content h1, .markdown-content h2, .markdown-content h3*/
.markdown-content p{
  font-size:1.1rem;
  margin-bottom: 0.7rem;

}
.markdown-content h1 {

  font-size:1.6rem;
}
.markdown-content h2 {

  font-size:1.4rem;
}
.markdown-content h3 {

  font-size:1.3rem;
}