.before-image-text {
  color: var(--color-text-base, #1a1a1a);
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.arrow-container {
    height: 0px;
}

.image-text-1 {
  color: var(--color-text-base, #1a1a1a);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}

.image-title {
  margin-bottom: 8px;
  color: var(--color-text-base, #1a1a1a);
  font-family: Inter;
  font-size: 24px;
  background-color: white;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
}

.image-text-open-data {
  color: var(--color-text-base, #1a1a1a);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  background-color: white;
  line-height: 24px;
}

.centered-container {
  gap: 10px;
}

@media (min-width: 768px) {
  .left-text {
    padding-right: 50px;
  }

  .right-text {
    padding-left: 50px;
  }

  .gap-responsive {
    gap: 25px;
  }
}

@media (max-width: 767px) {
  .dataDiPubblicazione {
    border-left: none;
    margin-left: 0;
  }
  .reverse-content {
    flex-direction: column-reverse;
  }

  .centered-container {
    text-align: -webkit-center;
    gap: 0px;
  }

  .arrow-container {
    width: 100%;
    height: 0px;
    margin-left: 180px;
  }
  .gap-responsive {
    gap: 120px;
  }
}

@media (min-width: 601px) and (max-width: 767px) {
  .arrow-responsive-2 {
    height: 2100px;
    margin-top: 50px;
    width: 100%;
  }

  .arrow-container {
    width: 100%;
    height: 0px;
    margin-left: 30px;
  }
}
@media (min-width: 768px) and (max-width: 779px) {
  .arrow-responsive-2 {
    height: 1510px;
    margin-top: 50px;
    width: 95%;
  }
}
@media (min-width: 780px) and (max-width: 991px) {
  .arrow-responsive-2 {
    height: 1446px;
    margin-top: 50px;
    width: 95%;
  }
}

@media (min-width: 991px) and (max-width: 1053px) {
  .arrow-responsive-2 {
    height: 2105px;
    margin-top: 50px;
    width: 70%;
  }
}

@media (min-width: 1054px) {
  .arrow-responsive-2 {
    height: 2145px;
    width: 80%;
  }
}

@media (min-width: 100px) and (max-width: 299px) {
  .arrow-responsive-2 {
    height: 3090px;
    width: 100%;
  }
}
@media (min-width: 300px) and (max-width: 319px) {
  .arrow-responsive-2 {
    height: 3015px;
    width: 100%;
  }
}
@media (min-width: 320px) and (max-width: 322px) {
  .arrow-responsive-2 {
    height: 2881px;
    width: 100%;
  }
}
@media (min-width: 323px) and (max-width: 328px) {
  .arrow-responsive-2 {
    height: 2826px;
    width: 100%;
  }
}
@media (min-width: 329px) and (max-width: 339px) {
  .arrow-responsive-2 {
    height: 2778px;
    width: 100%;
  }
}
@media (min-width: 340px) and (max-width: 345px) {
  .arrow-responsive-2 {
    height: 2728px;
    width: 100%;
  }
}
@media (min-width: 346px) and (max-width: 359px) {
  .arrow-responsive-2 {
    height: 2672px;
    width: 100%;
  }
}
@media (min-width: 360px) and (max-width: 395px) {
  .arrow-responsive-2 {
    height: 2603px;
    width: 100%;
  }
}
@media (width: 396px) {
  .arrow-responsive-2 {
    height: 2600px;
    width: 100%;
  }
}
@media (width: 397px) {
  .arrow-responsive-2 {
    height: 2576px;
    width: 100%;
  }
}
@media (width: 398px) {
  .arrow-responsive-2 {
    height: 2552px;
    width: 100%;
  }
}
@media (width: 399px) {
  .arrow-responsive-2 {
    height: 2515px;
    width: 100%;
  }
}
@media (min-width: 400px) and (max-width: 421px) {
  .arrow-responsive-2 {
    height: 2500px;
    width: 100%;
  }
}
@media (min-width: 422px) and (max-width: 437px) {
  .arrow-responsive-2 {
    height: 2500px;
    width: 100%;
  }
}
@media (min-width: 438px) and (max-width: 449px) {
  .arrow-responsive-2 {
    height: 2477px;
    width: 100%;
  }
}
@media (min-width: 450px) and (max-width: 478px) {
  .arrow-responsive-2 {
    height: 2435px;
    width: 100%;
  }
}
@media (min-width: 479px) and (max-width: 480px) {
  .arrow-responsive-2 {
    height: 2407px;
    width: 100%;
  }
}
@media (min-width: 481px) and (max-width: 511px) {
  .arrow-responsive-2 {
    height: 2327px;
    width: 100%;
  }
}
@media (min-width: 512px) and (max-width: 556px) {
  .arrow-responsive-2 {
    height: 2263px;
    width: 100%;
  }
}
@media (min-width: 557px) and (max-width: 600px) {
  .arrow-responsive-2 {
    height: 2207px;
    width: 100%;
  }
}


@media (min-width: 992px) {
  .arrow-container {
    width: 100%;
    height: 0px;
    margin-left: 180px;
  }
}

/* .arrow-container {
  width: 100%;
  height: 0px;
  margin-left: 180px;
} */

#card-list-percorsi-tematici .card.no-after {
  background-color: #f2f7fc;
}

.typologia {
  color: #000;

  /* lead */
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  /* 160% */
}

.chart-container .inside-text {
  fill: red;
  dominant-baseline: middle;
  text-anchor: middle;
  font: 14px Arial;
}

.text-1-chart {
  margin-bottom: 24px;
  color: var(--color-text-base, #1a1a1a);
  text-align: justify;
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 48px */
}

.text-2-chart {
  color: var(--color-text-base, #1a1a1a);
  text-align: center;

  /* lead-lg */
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  /* 133.333% */
}

.text-3-chart {
  color: var(--color-text-base, #1a1a1a);
  text-align: center;

  /* label */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 150% */
}

.card-chart {
  border-radius: 16px;
  border: 1px solid var(--color-blue-87, #bfdfff);
  background: var(--color-white, #fff);

  /* shadow-l */
  box-shadow: 0px 16px 48px 0px rgba(0, 0, 0, 0.15);
}

@media (min-width: 600px) {
  .img-1 {
    width: 442px;
    height: 225.927px;
  }

  .img-2 {
    width: 442px;
    height: 431.582px;
  }

  .img-3 {
    width: 442px;
    height: 486.992px;
  }

  .img-4 {
    width: 442px;
    height: 279.327px;
  }

  .img-5 {
    width: 442px;
    height: 387.237px;
  }
}

@media (min-width: 601px) and (max-width: 991px) {
  .img-1 {
    width: 300px;
    height: 150px;
  }

  .img-2 {
    width: 230px;
    height: 230px;
  }

  .img-3 {
    width: 300px;
    height: 170px;
  }

  .img-4 {
    width: 300px;
    height: 200px;
  }

  .img-5 {
    width: 300px;
    height: 200px;
  }
}

@media (max-width: 600px) {
  .img-1 {
    width: 219.044px;
    height: 111.964px;
  }

  .img-2 {
    width: 219.044px;
    height: 213.88px;
  }

  .img-3 {
    width: 219.044px;
    height: 241.341px;
  }

  .img-4 {
    width: 219.044px;
    height: 138.427px;
  }

  .img-5 {
    width: 219.044px;
    height: 191.905px;
  }
}
.dataDiPubblicazione {
  border-left: 1px solid #BFDFFF;
  margin-left: 15px;
}