#country_planets {
  font-size: 11pt;
}

#country_planets #overshoot-day-result {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lebensbereich-section {
  max-width: calc(210mm - 8mm);
  margin: 2mm auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.lebensbereich-section > *:nth-child(1) {
  flex: 0 0 25mm;
  position: relative;
}

.lebensbereich-section > *:nth-child(2) {
  flex: 1 1 200px;
}

.lebensbereich-section > *:nth-child(3) {
  flex: 0 0 44mm;
  min-height: 120px;
}

.lebensbereich-section > *:nth-child(1) > img {
  width: 30mm;
  position: absolute;
  left: -5mm;
  max-width: unset !important;
}

/*
  image
  position: absolute; transform: translate(-29mm, 7mm); width: 30mm; z-index: -1
  */

.bar-chart-wrapper {
  max-width: 120px;
  height: 180px;
  /* fixed size, damit alle charts gleich sind und damit auch die skalierung vergleichbar*/
  position: relative;
  /* align-self: flex-end; */
}

.bar-chart-sprechblase {
  position: absolute;
  background: #e9eff7;
  padding: 8px;
  width: 135px;
  right: -10px;
  z-index: 9;
  display: none;
}

.bar-chart-sprechblase::before {
  content: "";
  display: block;
  background: #e9eff7;
  position: absolute;
  bottom: -10px;
  right: 1px;
  height: 30px;
  width: 30px;
  transform: rotate(-10deg) skew(-17deg, -44deg);
  z-index: -1;
}

#country_planets .planet_icon {
  background-repeat: no-repeat;
  background-image: url("./img/results/earth_blue.png");
  background-size: 30px;
  height: 30px;
  width: 30px;
  margin-right: 2mm;
}

#country_planets .planet_icon.grey {
  background-image: url("./img/results/earth_grey.png");
  background-position: right;
}

#country_planets .planets-row .flag {
  /* width: 9mm; */
  box-shadow: 0px 1px 0.5px #00000040;
}

/* OvershootDay */
div.months {
  border-left: 1px solid #c1d1d8;
  position: relative;
}

div.months > div.bg {
  position: absolute;
  width: 100%;
  height: 10mm;
  top: 5mm;
  z-index: 5;
  background: linear-gradient(to right, #d71c4f, #f5a623, #03a167);
}

div.months > div.month {
  float: left;
  height: 100%;
  border-right: 1px solid #c1d1d8;
  text-align: center;
  font-size: 0.8rem;
  position: relative;
  z-index: 10;
}

div.months > div.myOverShootDayChart {
  position: absolute;
  width: calc(100% * (97 / 365));
  top: 50%;
  z-index: 7;
  border-bottom: 3px solid #005ca9;
}

div.months > div.osc > img {
  border: 1px solid black;
  position: absolute;
  right: -2.5mm;
  bottom: 0;
  width: 5mm;
}

div.months > div.osc {
  position: absolute;
  height: 5mm;
  top: 15mm;
  z-index: 7;
  border-right: 1px solid #536372;
}

div.months > div.os1 {
  width: calc(100% * (45 / 365));
}

div.months > div.os2 {
  width: calc(100% * (72 / 365));
}

div.months > div.os3 {
  width: calc(100% * (96 / 365));
}

div.months > div.os4 {
  width: calc(100% * (124 / 365));
}

div.months > div.os5 {
  width: calc(100% * (154 / 365));
}

div.months > div.os6 {
  width: calc(100% * (365 / 365));
}

#third_page_title {
  font-weight: bold;
  color: #005ca9;
  margin: auto;
  max-width: calc(210mm - 2 * 17mm);
  text-align: center;
}

#third_page_title span {
  color: black;
  font-weight: 400;
}

@media only screen and (max-width: 767px) {
  #country_planets #overshoot-day-result {
    flex-direction: column;
  }

  div.months {
    width: 100%;
    margin: 0px auto;
  }

  .lebensbereich-section {
    flex-direction: column;
  }

  .lebensbereich-section > *:nth-child(1),
  .lebensbereich-section .bar-chart-sprechblase {
    display: none !important;
  }

  #third_page_title {
    margin: 2.5mm auto !important;
  }

  #print-btn {
    display: none;
  }
}

@media print {
  #third_page_title {
    margin: 2.5mm auto !important;
  }
}

.uniqa_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 30px 10px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 2px 5px #00000021;
  padding: 20px 40px;
}

.uniqa_grid > :first-child {
  grid-column: span 3;
}
.uniqa_grid > :nth-child(2) {
  grid-column: span 2;
}

@media (max-width: 767px) {
  .uniqa_grid {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
}

#help_center {
  display: flex;
  padding: 40px;
  justify-content: space-evenly;
  align-items: center;
}

#help_center > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

#help_center > a > .img {
  height: 43px;
  width: 43px;
}

.help-center-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 17px;
}

.help-center-subtitle {
  font-size: 13px;
  line-height: 13px;
}

@media (max-width: 767px) {
  #help_center {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
  }
  .analysis-row {
    flex-direction: column;
  }
}

.planets-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: nowrap;
}

.flag {
  width: 30px;
  height: auto;
}

/* progress alternative for FF */
.my-progress-container {
  min-width: 100px;
  max-width: 300px;
  width: 100%;
  height: 20px;
  position: relative;
  border-radius: 8px;
  background-color: #ef4444;
}
.my-progress-container > .progressbar {
  max-width: 100%;
  flex: 1;
  height: 100%;
  background-color: #57e18a;
  border-radius: 8px;
  transition: width 0.3s ease-in-out;
}
progress {
  min-width: 100px;
  max-width: 200px;
  height: 10px;
  flex: 1;
}
.progress-description {
  flex: 2;
  text-align: left;
}

progress::-webkit-progress-bar {
  background-color: #ef4444;
  border-radius: 8px;
  height: 20px;
}
progress::-moz-progress-bar {
  background-color: #ef4444;
  border-radius: 8px;
  height: 20px;
}
progress::-webkit-progress-value {
  background-color: #57e18a;
  border-radius: 8px;
  height: 20px;
}
progress {
  color: #57e18a;
  border-radius: 8px;
  height: 20px;
}

.progress-container > progress {
  width: 100%;
}

.progress-container.analysis {
  flex-direction: column;
  gap: 8px;
  height: 15%;
}

.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  width: 100%;
}
.progress-analysis {
  max-width: 100%;
}

.progress-wrapper:hover .progress-tooltip {
  visibility: visible;
  opacity: 1;
}

.progress-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 100%;
  margin-left: 8px;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
}

.results-main-img {
  height: 150px;
  width: auto;
}
.results-main-img > .foot-planet,
.footprint-main-img > .foot-planet {
  height: 100%;
  margin: auto;
  aspect-ratio: 1 / 1;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.footprint-main-img > .foot-planet {
  height: 120px;
}
.footprint-main-img > .foot-planet > img,
.results-main-img > .foot-planet > img {
  height: 100%;
}

.results-main-img > .foot-planet > img,
.results-main-img > .foot-planet > svg,
.footprint-main-img > .foot-planet > img,
.footprint-main-img > .foot-planet > svg {
  position: absolute;
  margin: auto;
}
.myFP {
  background-color: rgb(
    127,
    127,
    0
  ); /* defines the background color of the image */
  mask: url(/img/results/foot.svg) no-repeat center / contain;
  -webkit-mask: url(/img/results/foot.svg) no-repeat center / contain;
  margin: 0 0 0 50% !important;
}

.analysis-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  padding: 20px 10px 0px 10px;
}

.card {
  background: #ecf0fa;
  border-radius: 14px;
  padding: 15px;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 220px;
  justify-content: space-between;
}
.analysis-row .card h3 {
  margin: 1rem 0;
}
.analysis-row .card > div:first-child {
  height: 85%;
  display: flex;
  flex: initial;
  flex-direction: column;
  justify-content: space-between;
}
.analysis-row .card > div:first-child > img + div {
  height: 70%;
  display: flex;
  flex-direction: column;
}
.card img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.progress-container {
  margin-top: 10px;
}
.swiper-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 20px;
}
.swiper-pagination {
  bottom: 0 !important;
}

.swiper-slide ul {
  list-style: none;
  padding: 0px;

  line-height: 2.4rem;
  font-weight: 400;
  font-size: 1.33rem;
  font-family: Open Sans;
  letter-spacing: 0em;
  text-decoration: none;
  text-transform: none;
}

.swiper-slide ul > li {
  margin-bottom: 5px;
  color: #3a3939;
  line-height: 24px;
}

.uniqa_products {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px 20px;
}

.products_row {
  display: flex;
  gap: 20px;
}

.product_card {
  background: #ecf0fa;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.product_main {
  flex: 1;
}

.product_stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product_full {
  width: 100%;
}

.product_card .img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.product_card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product_content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

#result_second_page_bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#result_second_page_bottom > section:last-child {
  background: #e5ebf8;
  font-size: 11pt;
  line-height: 1.4;
  border-radius: 8px;
  padding: 8mm;
  margin: 0px 10px;
}

.info-button {
  color: #738090;
  text-decoration: underline;
  cursor: pointer;
  border-radius: 12px;
  margin-bottom: 10px;
}

.info-section.active .info-button {
  color: #005caa;
}
.info-section,
#info-content {
  display: none;
}
/* .info-section.active,
.info-section.active #info-content  {
  display: block;
} */

.info-content > .description {
  display: none;
  background: #e5ebf8;
  color: #738090;
  font-size: 12px;
  padding: 15px;
  border-radius: 8px;
  text-align: left;
  margin-bottom: 5px;
}

.info-content.active > .description {
  display: block;
}

.uniqa_grid > :nth-child(3) {
  grid-column: span 5;
}

.hidden {
  display: none;
}

@media (min-width: 1025px) {
  .product_card.product_main {
    flex-direction: column;
  }
  .product_card {
    flex-direction: row;
    align-items: center;
  }

  .product_main .img {
    width: 100%;
    height: 160px;
  }

  .product_main .img img {
    border-radius: 22px 22px 0 0;
  }

  .product_card:not(.product_main) .img {
    flex: 0 0 190px;
    height: 100%;
  }

  .product_card:not(.product_main) .img img {
    border-radius: 22px 0 0 22px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .products_row {
    flex-direction: column;
  }

  .product_card {
    flex-direction: row;
    align-items: center;
  }

  .product_card .img {
    flex: 0 0 190px;
    height: 12em;
  }

  .product_card .img img {
    border-radius: 22px 0 0 22px;
  }
}

@media (max-width: 767px) {
  .products_row {
    flex-direction: column;
  }

  .product_card {
    flex-direction: column;
  }

  .product_card .img {
    width: 100%;
    height: 160px;
  }

  .product_card .img img {
    border-radius: 22px 22px 0 0;
  }
  .card > img {
    display: none;
  }
  .analysis-row {
    padding: 0px;
  }
  #result_second_page_bottom > section:last-child {
    margin: 0px;
  }
}
.product_stack .product_card {
  flex: 1; /* Allows the cards inside product_stack to evenly fill space */
  display: flex;
}