.charts__cards-wrapper{background-size: contain;background-position: center;padding: 29px 0px 114px 0px;background-repeat: no-repeat;position: relative;}

.card__container{gap: var(--sm-1);}

.charts__cards{padding: 0 0 32px 0;width:33.33%;position: relative;z-index:1;max-width: 25%;margin-bottom: 20px;}

/* Connector lines between cards, revealed by the .active class. */
.charts__cards::after{content:"";position:absolute;border-left:2px dashed #896C4C;   height:100%;    right: -17px;    top: 51px;transform-origin: top center;transform: scaleY(0);transition: transform 1.2s 0.7s ease;}
.charts__cards.active::after {transform: scaleX(1);}
.charts__cards:last-child::after{content:none;}
.charts__cards::before {content: "";position: absolute;border: 1px solid black;left: 50%;top: 50px;width: 100%; z-index: 0; transform-origin: left center; transform: scaleX(0); transition: transform 1.2s 0.7s ease;}
.charts__cards.active::before {transform: scaleX(1);}
.charts__cards:last-child::before {opacity: 0;}

/* Staggered reveal of the card parts, driven by the .fade-in class. */
.charts__cards-icon{opacity: 0; transition: opacity 0.9s 0.4s ease;}
.charts__cards-title{opacity: 0; transition: opacity 0.9s 1.4s ease;}
.charts__cards-description{opacity: 0; transition: opacity 0.9s 1.8s ease;}
.charts__cards-sub-title{opacity: 0; transition: opacity 0.9s 1.8s ease;}
.charts__cards.fade-in .charts__cards-title, .charts__cards.fade-in .charts__cards-icon, .charts__cards.fade-in .charts__cards-description, .charts__cards.fade-in .charts__cards-sub-title{opacity: 1;}

.charts__cards-icon{position: inherit; background-color: rgba(214, 208, 194, 1);height: 94px;width:94px;border-radius: 50px;display: flex;    align-items: center;    justify-content: center;    margin: 0 auto;     padding: 15px;}
.charts__cards-icon .card__icon img{
  min-height: 100px;
}

.charts__cards-title{text-align: center;padding: 32px 22px 24px 22px;  height: auto;  min-height: 180px;}

.charts__cards-sub-title {
  height: auto;
  min-height: 90px;
  text-decoration: underline;
  padding: 0 0 0 24px;
}

.charts__cards-description{text-align: left; padding: 0px 5px 24px 15px;}
.charts__cards-description ul{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 21px;
}
.charts__cards-description ul li {
  margin-bottom: var(--sm-4);
  text-align: left;
}
.charts__cards-description ul li::marker {
  color: var(--copper);
}
.charts__cards-description ul li span{
  position: relative;
}
.charts__cards-description ul li span::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--copper);
  position: absolute;
  top: 10px;
  left: -10px;
}
.charts__cards-description i, .charts__cards-description em{
  font-size:  var(--sm-4);
}

/* Pie chart container inside a card (rendered when "Show Pie Charts" is set). */
#comm-floatcommit-vintageYearCutoff2012 {
  padding-bottom: 32px;
}

/* Highcharts renders the range selector group inside the comparative chart. */
.comprative-charts-wrapper g.highcharts-range-selector-group text{color: var(--bs-black) !important;  font-size: 1.25rem !important;  font-weight: 600 !important;  fill: var(--bs-black) !important;}

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait){
    .card__container {
      flex-wrap: wrap;
      justify-content: center;
    }
    .charts__cards:nth-child(2)::after {
      display: none;
    }
    .charts__cards:nth-child(2)::before {
      display: none;
    }
    .charts__cards:nth-child(-n+2) {
      margin-bottom: 50px;
    }
    .charts__cards {
      flex: 38% 0 0;
      max-width: 50%
    }
  }
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape){
    .card__container {
      flex-wrap: wrap;
      justify-content: center;
    }
    .charts__cards:nth-child(2)::after {
      display: none;
    }
    .charts__cards:nth-child(2)::before {
      display: none;
    }
    .charts__cards:nth-child(-n+2) {
      margin-bottom: 50px;
    }
    .charts__cards {
      flex: 48% 0 0;
      max-width: 50%;
    }
  }
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (orientation: portrait){
  @supports (-webkit-touch-callout: none) {
    .card__container {
      flex-wrap: wrap;
      justify-content: center;
    }
    .charts__cards:nth-child(2)::after {
      display: none;
    }
    .charts__cards:nth-child(2)::before {
      display: none;
    }
    .charts__cards:nth-child(-n+2) {
      margin-bottom: 50px;
    }
    .charts__cards {
      flex: 48% 0 0;
      max-width: 50%;
    }
  }
}
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (orientation: landscape){
  @supports (-webkit-touch-callout: none) {
    .card__container {
      flex-wrap: wrap;
      justify-content: center;
    }
    .charts__cards:nth-child(2)::after {
      display: none;
    }
    .charts__cards:nth-child(2)::before {
      display: none;
    }
    .charts__cards:nth-child(-n+2) {
      margin-bottom: 50px;
    }
    .charts__cards {
      flex: 33% 0 0;
      max-width: 50%;
    }
  }
}

@media (max-width: 767.91px){
  .card__container{flex-direction:column;}
  .charts__cards-wrapper {background-image: none !important; padding-bottom: 64px;}
  .charts__cards::before{content:none;}
  .charts__cards{width:100%;border-bottom:1px solid #C4C6C1;max-width:100%;}
  .charts__cards::after{display:none;}
  .charts__cards-title {min-height: auto;}
  .charts__cards-sub-title {padding-left: 25px; min-height: 40px;}
  .charts__cards-description {padding: 0px 5px 24px 20px;}
}