[role="tooltip"], .tooltip, [data-tooltip], [class*="tippy"], .echarts-tooltip {
      max-width: 90vw !important;
      overflow-wrap: break-word !important;
      word-wrap: break-word !important;
      white-space: normal !important;
    }

    svg { max-width: 100%; overflow: visible; }



    canvas { max-width: 100%; }

    @media (max-width: 768px) {
      .calc-wrap { font-size: 16px; }
      .calc-wrap h1 { font-size: 1.5rem !important; }
      .calc-wrap h2 { font-size: 1.3rem !important; }
      .calc-wrap h3 { font-size: 1.15rem !important; }
      [style*="max-width"]:not(img):not(svg):not(canvas):not(.budget-tt),
      [style*="width:"]:not(img):not(svg):not(canvas):not(.budget-tt) { max-width: 100% !important; width: 100% !important; }
      .calc-wrap {
    max-width: calc(100% - 50px);
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
    }

    @page { margin: 0; }

    @media print {
      .calc-wrap { background: #fff !important; color: #000 !important; padding: 12mm !important; margin: 0 !important; }
      * { color-adjust: exact !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
       .calc-wrap h1,  .calc-wrap h2,  .calc-wrap h3,  .calc-wrap h4, .calc-wrap  h5,  .calc-wrap h6 { color: #000 !important; }
      img, svg, canvas { max-width: 100% !important; page-break-inside: avoid; }
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    .calc-wrap {
      max-width: calc(100% - 90px);
      margin: 0 auto;
      background: #fff;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    }

    .header-bar {
      background: #16478E;
      color: #fff;
      text-align: center;
      padding: 14px 16px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .5px;
    }

    .inputs-section { padding: 20px 24px 12px; overflow: visible; }

    .input-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 14px;
      overflow: visible;
    }

    .input-group { flex: 1 1 200px; min-width: 140px; overflow: visible; }
    .input-group.third { flex: 1 1 140px; min-width: 120px; }

    .input-group label {
      display: block;
      font-weight: 700;
      font-size: 12px;
      color: #333;
      margin-bottom: 4px;
    }

    .input-group select,
    .input-group input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #c5c9ce;
      border-radius: 4px;
      font-size: 13px;
      color: #333;
      background: #fff;
    }

    .input-group select:focus,
    .input-group input:focus {
      outline: 2px solid #16478E;
      outline-offset: 1px;
      border-color: #16478E;
      box-shadow: 0 0 0 2px rgba(22, 71, 142, .15);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #16478E;
      color: #fff;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      z-index: 10000;
    }
    .skip-link:focus { top: 0; }

    fieldset { border: none; padding: 0; margin: 0; }
    legend { display: block; font-weight: 700; font-size: 12px; color: #333; margin-bottom: 4px; }

    .input-desc {
      font-size: 10px;
      color: #777;
      margin-top: 3px;
      line-height: 1.3;
    }

    .info-bar {
      background: #1AB8CE;
      color: #000;
      text-align: center;
      padding: 10px 20px;
      font-size: 12px;
      line-height: 1.5;
      font-weight: 500;
    }

    .budget-bar { display: none; }

    .charts-section { padding: 16px 8px 12px; }

    .charts-stack {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .chart-block {
      width: 100%;
    }

    .chart-pair-row {
      display: flex;
      align-items: stretch;
      gap: 0;
    }

    .chart-group {
      flex: 1 1 0;
      min-width: 0;
    }

    .chart-group--pair {
      flex: 2 1 0;
    }

    .chart-pair-inner {
      display: flex;
      gap: 4px;
    }

    .chart-pair-inner > .chart-block {
      flex: 1 1 0;
      min-width: 0;
    }

    .chart-separator {
      width: 1px;
      background: #d8dde3;
      margin: 0 10px;
      align-self: stretch;
    }
   @media (max-width: 991.98px) {
      .chart-pair-row { flex-direction: column; }
      .chart-pair-inner { flex-direction: column; }
      .chart-separator {
        width: auto;
        height: 1px;
        margin: 12px 0;
      }
      .charts-section {
    padding: 20px 0 0 !important;
}
    }
    @media (max-width: 520px) {
      .chart-pair-row { flex-direction: column; }
      .chart-pair-inner { flex-direction: column; }
      .chart-separator {
        width: auto;
        height: 1px;
        margin: 12px 0;
      }
          .bill-table td {
        padding: 5px 6px !important;
    }
    .bill-table thead tr th {
    font-size: 10px;
}
    }

    .charts-half-title {
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #16478E;
      margin-bottom: 6px;
    }

    .chart-lbl {
      font-size: 12px;
      font-weight: 700;
      color: #444;
      text-align: center;
      margin-top: 4px;
    }

    .footer-bar {
      background: #f8f8f8;
      border-top: 1px solid #e0e0e0;
      padding: 14px 20px;
      text-align: center;
      font-size: 12px;
      color: #333;
      line-height: 1.6;
    }

    .footer-bar a {
      color: #16478E;
      font-weight: 700;
      text-decoration: none;
    }

    .footer-bar a:hover { text-decoration: underline; }

    #chartAlloc, #chartBilled, #chartCurrent {
      width: 100%;
      height: 240px;
    }

    @media (max-width: 700px) {
      .input-group { flex: 1 1 100%; }
    }
@media (max-width: 767.98px) {
  .calc-wrap {
      max-width: calc(100% - 50px);
  }
}