body { 
   
        margin:0; 
        font-family: KievitWeb, Helvetica Neue, Helvetica, Arial, sans-serif; 
    }
    .charts-wrap{ padding: 20px; }
    .charts{ display:flex; gap:16px; }
    .chart-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; }
    .chart{ width:100%; height:260px; background:transparent; }
    .pie-bottom-title{
      font-family: KievitWeb, Helvetica Neue, Helvetica, Arial, sans-serif;
      width: 85%;
      margin-top: 5px;
      text-align:center;
      color:#fff;
      font-size:20px;
      line-height:1.2;
      min-height: 32px;
      display:flex;
      align-items: start;
      justify-content:center;
    }
      .legend {
        margin-top: 14px;
        display: flex;
        gap: 24px;
        align-items: center;
      }

      .legend-item {
        color:#fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }

      .legend-swatch {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }

      .legend-item:hover {
        font-weight:600;
      }
    /* .swatch{ width:12px; height:12px; border-radius:3px; display:inline-block; } */
    .non-interactive-slice {
    pointer-events: none !important;
}

  #pieA_title {  /*prevent widow*/
    width: 250px;
  }
    @media (max-width: 760px){
   
      .charts{ flex-direction:column; }
      .chart{ height:250px; }
      .pie-bottom-title{
         width: 95%;
         max-width: 380px;
         margin-bottom: 10px;
         margin-top: 0px;       
      }
      #pieA_title {  /*prevent widow*/
        width: 95%;
      }
    }