/* Combined CSS for all charts */
    /************************************************
     * General Body Style
     ************************************************/
    body {
      margin: 20px;
      font-family: "Raleway", sans-serif;
      /*background: #f5f5f5;*/
    }

    /************************************************
     * Container + Scroll
     ************************************************/
    .chart-wrapper {
      overflow-x: visible;
      margin-bottom: 40px;
    }
    @media (max-width: 991px) {
      .chart-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      .chart-container {
        min-width: 1200px;
      }
    }

    /************************************************
     * Common style for each chart container
       Make sure we have "overflow: hidden" so
       mini charts/labels do not appear outside.
     ************************************************/
    .chart-nd-container,
    .chart2-container,
    .chart3-container {
      position: relative;
      overflow: hidden;  /* ensures popups remain inside */
      /* width: 1200px; */ /* width for pop-ups */
      width: 1180px;
      margin: 40px auto;
	  margin-bottom: 15px; /* reduce space between chart and bottom lines  */
      background: #fff;
	  /*padding: 20px 20px 60px 10px;*/ /* use when having the pop-up years and the lines below the chart  */
	  padding: 20px 20px 20px 10px; /* use when no pop-up years and no lines below the chart  */
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(0,0,0,0.15);
    }

    /************************************************
     * Outlook Labels (common)
       - Always on the LEFT side
       - Hidden by default; appear on .show
       - The little arrow points to the left
     ************************************************/
    .outlook-labels {
      position: absolute;
      top: 120px;      /* adjust as needed */
      left: 20px;      /* on the left side */
      width: 220px;
      background: #fff;
      border: 2px solid #ED7D31;
      border-radius: 4px;
      box-shadow: 0 0 6px rgba(0,0,0,0.3);
      padding: 10px;
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
      z-index: 999;
    }
    .outlook-labels::after {
      content: "";
      position: absolute;
      top: 50%;
      left: -10px;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 10px solid #ED7D31;  /* arrow pointing right */
      transform: translateY(-50%);
    }
    .outlook-labels.show {
      display: block;
      opacity: 1;
    }
    .label-group {
      margin-bottom: 12px;
    }
    .label-year {
      font-weight: bold;
      margin-bottom: 5px;
      border-bottom: 1px solid #eee;
      padding-bottom: 3px;
      font-size: 13px;
    }
    .label-item {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }
    .label-color {
      width: 12px;
      height: 12px;
      margin-right: 8px;
      border-radius: 2px;
    }
    .label-text {
      font-size: 12px;
      line-height: 1.2;
    }
	.planning-label-color {
		background-color: #4472C4;
	}
	.faster-label-color {
		background-color: #ED7D31;
	}
	.slower-label-color {
		background-color: #7F7F7F;
	}

    /************************************************
     * ND mini chart - place inside container
     ************************************************/
    #miniChartND {
      position: absolute;
      top: 300px;    /* Adjust as needed inside container */
      right: 20px;
      width: 380px;
      height: 240px;
      background: #fff;
      border: 2px solid #ED7D31;
      border-radius: 4px;
      box-shadow: 0 0 6px rgba(0,0,0,0.3);
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
      z-index: 999;
      pointer-events: auto;
    }
    #miniChartND.show {
      display: block;
      opacity: 1;
    }
	  
	/************************************************
     * IODR mini chart - place inside container
     ************************************************/
    #miniChartIODR {
      position: absolute;
      top: 130px;    /* Adjust as needed inside container */
      right: 20px;
      width: 380px;
      height: 240px;
      background: #fff;
      border: 2px solid #ED7D31;
      border-radius: 4px;
      box-shadow: 0 0 6px rgba(0,0,0,0.3);
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
      z-index: 999;
      pointer-events: auto;
    }
    #miniChartIODR.show {
      display: block;
      opacity: 1;
    }

    /************************************************
     * ND bottom line / divider
     ************************************************/
    .chart-nd-bottom-line {
      position: relative;
      width: 1016px;
      margin: 0px 0px 0px 52px;
	  top: 0;
      height: 24px;
      border-bottom: 2px solid #003366;
	  display: inline-block;
    }
	.chart-nd-vertical-divider {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #003366;
      right: calc(100% * (1 / 1.002));
    }
	.chart-nd-vertical-dividerb {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #003366;
      left: calc(100% * (32.99 / 33));
    }
	  
	.chart-nd-bottom-line2 {
      position: relative;
      width: 60px;
      margin: 0px 0px 0px 26px;
      height: 24px;
      border-bottom: 2px solid #33BAE3;
	  display: inline-block;
    }
	.chart-nd-vertical-divider2 {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #33BAE3;
      right: calc(100% * (1 / 1.035));
    }
	.chart-nd-vertical-divider2b {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #33BAE3;
      left: calc(100% * (36.91 / 36.99));
    }
	  
    .chart-nd-label {
      position: absolute;
      bottom: -2.2em;
	  margin-left: 480px;
      font-size: 12px;
      font-weight: bold;
      color: #003366;
      white-space: nowrap;
    }
    .chart-nd-label-actuals {
      left: 10px;
      text-align: left;
    }
	  
	.chart-nd-label2 {
      position: absolute;
      bottom: -2.2em;
	  margin-left: 550px;
      font-size: 12px;
      font-weight: bold;
      color: #33BAE3;
      white-space: nowrap;
    }
    .chart-nd-label-outlook {
      right: -18px;
      text-align: center;
	  bottom: -5.2em;
    }

    /************************************************
     * Chart2 mini chart
     ************************************************/
    #miniChart2 {
      position: absolute;
      top: 300px;    /* Keep inside container */
      right: 20px;
      width: 380px;
      height: 240px;
      background: #fff;
      border: 2px solid #ED7D31;
      border-radius: 4px;
      box-shadow: 0 0 6px rgba(0,0,0,0.3);
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
      z-index: 999;
      pointer-events: auto;
    }
    #miniChart2.show {
      display: block;
      opacity: 1;
    }
	  
	/************************************************
     * NDTR bottom line / divider
     ************************************************/
    .chart2-bottom-line {
      position: relative;
      width: 1016px;
      margin: 0px 0 0 52px;
      top: 0;
      height: 24px;
      border-bottom: 2px solid #003366;
      display: inline-block;
    }
    .chart2-vertical-divider {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #003366;
      right: calc(100% * (1 / 1.002));
    }
	.chart2-vertical-dividerb {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #003366;
      left: calc(100% * (32.99 / 33));
    }
	  
	 .chart2-bottom-line2 {
      position: relative;
      width: 62px;
      margin: 0px 0 0 26px;
      height: 24px;
      border-bottom: 2px solid #33BAE3;
      display: inline-block;
    }
    .chart2-vertical-divider2 {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #33BAE3;
      right: calc(100% * (1 / 1.035));
    }
	.chart2-vertical-divider2b {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #33BAE3;
      left: calc(100% * (36.91 / 36.99));
    } 
	  
    .chart2-label {
      position: absolute;
      bottom: -2.2em;
      margin-left: 480px;
      font-size: 12px;
      font-weight: bold;
      color: #003366;
      white-space: nowrap;
    }
    .chart2-label-actuals {
      left: 10px;
      text-align: left;
    }
	  
	.chart2-label2 {
      position: absolute;
      bottom: -2.2em;
      margin-left: 550px;
      font-size: 12px;
      font-weight: bold;
      color: #33BAE3;
      white-space: nowrap;
    }
    .chart2-label-outlook {
      right: -20px;
      text-align: center;
      bottom: -5.2em;
    }

    /************************************************
     * Chart3 mini chart
     ************************************************/
    #miniChart3 {
      position: absolute;
      top: 300px;
      right: 20px;
      width: 380px;
      height: 240px;
      background: #fff;
      border: 2px solid #ED7D31;
      border-radius: 4px;
      box-shadow: 0 0 6px rgba(0,0,0,0.3);
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
      z-index: 999;
      pointer-events: auto;
    }
    #miniChart3.show {
      display: block;
      opacity: 1;
    }
    .chart3-bottom-line {
      position: relative;
      width: 1200px;
      margin: 20px auto 0;
      height: 40px;
      border-bottom: 2px solid #003366;
    }
    .chart3-vertical-divider {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #003366;
      left: calc(100% * (35 / 37));
    }
    .chart3-label {
      position: absolute;
      bottom: -2.2em;
      font-size: 12px;
      font-weight: bold;
      color: #003366;
      white-space: nowrap;
    }
    .chart3-label-actuals {
      left: 10px;
      text-align: left;
    }
    .chart3-label-outlook {
      right: 10px;
      text-align: right;
    }

/* Chart container and wrapper styles */
    .chart-wrapper {
      overflow-x: auto !important;
      margin-bottom: 20px;
    }
    .chart-container {
      width: 100%;
      max-width: 1200px;
      height: 700px;
      position: relative;
      margin: 0 auto;
    }
    /* example overrides so the main chart is fully used */
    #mainChart, #revenueChart, #iodChart {
      width: 100% !important;
      height: 100% !important;
    }
	
/* Net Debt Table styles */
	#ARTable2 {
		width: 100%;
		max-width: 1200px;
	}
	  
	#ARTable2 td {
	  text-align: center;
	}
	
	.table-container #ARTable2 thead tr:nth-child(2) th:nth-child(1) {
		background-color: transparent;
		z-index: 0;
	}

	.table-container #ARTable2 thead tr:nth-child(1) th:nth-child(1) {
		position: sticky;
		left: 0;
		background-color: #f0f7ff;
		z-index: 5;
		/*width: 38%;*/
		width: 40%;
	}

.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(1), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(2), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(3), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(4), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(5), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(6), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(7), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(8), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(9), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(10)/*, 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(11), 
.table-container #ARTable2 thead tr:nth-child(3) th:nth-child(12)*/
{
		/*width: 5%;*/
		width: 6%;
}

	.table-container #ARTable2 tbody tr th:nth-child(1) {
		position: sticky;
		left: 0;
		z-index: 10;
	}

	.table-container #ARTable2 tbody tr:nth-child(odd) th {
   		background-color: white !important;
		z-index: 20;
	}

	.table-container #ARTable2 tbody tr:nth-child(even) th {
   		background-color: #fafafa !important;
		z-index: 20;
	}