@media print {
  @page {
    size: 8.5in 11in;
    margin: 0;
  }
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

}

body.InfographicV1 {
  zoom: unset !important;

  .RightContentWell {
    width: unset;
  }

  .container {
    max-width: unset;
  }

  .navbar-custom {
    position: unset;
  }

  .intro.tei {
    height: 200px;
    min-height: unset;
    margin-bottom: 20px;
    position: unset;
  }
  .contentPanel {
    justify-content: center;
  }

  .sectionContainer {
    top: unset;
  }

  section {
    margin-bottom: 20px;
  }

  section .col-xl-6 {
    width: 50%;
  }

  section .col-xl-4 {
    width: 33%;
  }

  section .col-xl-8 {
    width: 66%;
  }

  .three-pie-card img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 1) Let the outer grid fragment instead of being a flex row */
  .infoCard .row.justify-content-between {
    display: block !important;
  }

  /* 2) Keep the three pies horizontal without flex */
  /* Targets the immediate pie items inside the inner row */
  .infoCard .col-12.col-xl-8 > .row > .threePieItem {
    display: inline-block !important;
    vertical-align: top;
    width: 32% !important; /* 3-up with a bit of gap */
    margin-right: 2% !important;
    break-inside: avoid;
  }

  .infoCard .col-12.col-xl-8 > .row > .threePieItem:nth-child(3) {
    margin-right: 0 !important;
  }

  /* 4) Avoid flex in print inside the pies (e.g., .d-flex wrappers) */
  .infoCard .threePieItem .d-flex {
    display: block !important;
    height: 80px;
  }

  /* 5) Images should shrink, not force a break */
  .infoCard img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;
    vertical-align: bottom;
  }

  .threePieGraphic > div > .microtoolchart {
    display: inline-block;
    width: fit-content;
  }

  .threePieGraphic {
    width: 176px;
  }

  .threePieCard > .row .col-12 {
    display: inline-block;
  }

  .threePieCard > .row .col-xl-4 {
    width: 32%;
    vertical-align: top;
  }

  /* Single Pie Card */

  .singlePieCard > .row {
    display: block;
  }

  .singlePieCard .col-xl-6 {
    display: inline-block !important;
  }

  .singlePieCard > .row > :nth-child(2) {
    width: 49%;
    vertical-align: top;
    margin-top: 10%;
  }

  .left50, .right50 .d-flex {
    display: block !important;
  }

  .right50 .col-10{
    display: inline-block;
    width: 82%;
  }

  .right50 .col-1{
    display: inline-block;
    width: 7%;
    vertical-align: top;
  }

  .right50 {
    margin-left: auto;
  }
}