body {
            font-family: Arial;
            background-color: #f4f7f6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .container-main {
            text-align: center;
            background-color: #fff;
            padding: 10px;
            /*
            border-radius: 0px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            width: 95%;
            */
        }
        h1 {
            color: #383838;
            margin-top: 0;
            font-size: 38px;
        }
        h2 {
            color: #333;
            margin-top: 8px;
            font-size: 32px;
        }
        h3 {
            color: #333;
            margin-top: 0;
            font-size: 28px;
        }
        label {
            font-size: 18px;
            color: #555;
            margin-right: 10px;
        }
        input {
            font-size: 18px;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ccc;
            width: 60px;
            height: 14px;
        }
        .input-narrow {
            font-size: 18px;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ccc;
            width: 50px;
        }

        #gaugeSvg {
            width: 90%;
            height: auto;
        }
        #gaugeSvg2 {
            width: 90%;
            height: auto;
        }
        .gauge-text {
            font-size: 24px;
            font-weight: bold;
            fill: #444;
        }
        .gauge-target {
            font-size: 18px;
            font-weight: medium;
            fill: green;
        }
        .gauge-dsr {
            font-size: 22px;
            font-weight: bold;
            fill: #444;
        }
        .gauge-dsr-line2 {
            font-size: 16px;
            font-weight: medium;
            fill: #444;
        }

        #dsrDiv {
            color: #ffe
        }
        .colorOrange {
            color: darkorange;
        }
        .colorOrange14 {
            color: darkorange;
            font-size: 14px;
        }
        #new_debt_service {
            /* width: 800px; */
            color: darkorange;
            font-weight: normal;
        }
        #new_debt_service2 {
            color: darkorange;
            font-size: 14px;
        }
        #new_debt_serviceShare {
            color: darkorange;
            font-weight: bold;
            font-size: 20px;
        }
        #new_debt_service2Share {
            color: darkorange;
            font-weight: bold;
            font-size: 20px;
        }

#debtStackDiv {
    width: 100%;
    background-color: white;
}

        table, td {
            border: 1px solid #bbb;
            border-collapse: collapse;
            padding: 4px;
            text-align: center;
            vertical-align: middle;
            margin: 12px;
        }
        th {
            border: 1px solid #bbb;
            border-collapse: collapse;
            padding: 4px;
            text-align: center;
            vertical-align: middle;
            background-color: #ddd";
        }
        .th-darker {
            background-color: #ddd";
        }
        .no-border {
            border: 0px !important;

        }
        .td-right {
            text-align: right;
        }
        .td-left {
            text-align: left;
        }
        .td-center {
            text-align: center;
        }
        .td-right-pad-30 {
            text-align: right;
            padding-right: 22px;
        }
        .td-right-pad-15 {
            text-align: right;
            padding-right: 10px;
        }
        /*  Target all cells in a specific row class
            <tr class="light-gray-row"> */
        .light-gray-row td,
        .light-gray-row th {
            background-color: #f5f5f5;
        }

        #divAssumptions {
            /* font-size: small; */
            min-width: 640px;
            margin-left: 240px;
            margin-right: 240px;
            border-radius: 0px;
            border: 1px solid #ccc;
        }
        #taxLevyTable {
            font-size: 16px;
            min-width: 640px;
        }


/* ...existing code... */

#budgetChangeDiv {
    display: flex !important;
    flex-direction: row !important;  /* Explicitly set to row */
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;  /* Align items to the left */
    flex-wrap: nowrap;  /* Prevent wrapping */
    /* background-color: pink; Temporary - remove after testing */

}

#budgetComponentTableK {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    /* background-color: lightblue; Temporary - remove after testing */
}

#budgetComponentsDiv {
    flex: 2;
    margin-left: 0;
    margin-right: 200px;
    /* background-color: lightgreen; Temporary - remove after testing */
}

/* Ensure the parent container doesn't interfere
Override center alignment for this section
.container-main {
    text-align: left;
}
*/


        .whatIfCIPinput {
                font-size: 16px;
                padding: 4px;
                border-radius: 1px;
                border: 1px solid #ccc;
                width: 50px;
        }
        .whatIfCIPsubtotal {
                    font-size: 16px;
                    padding: 4px;
                    font-weight: bold;
                    color: darkorange;
        }
        .whatIfCIPtotals {
            font-size: 18px;
            padding-top: 8px;
            border-radius: 0px;
            border: 0px solid #ccc;
            vertical-align: middle;
            font-weight: bold;
            color: darkorange;
        }
        #whatIfLongCalc {
            width: 250px;
            font-size: 14px;
            padding: 2px;
            border-radius: 0px;
            border: 0px solid #ccc;
            vertical-align: middle;
            font-weight: bold;
        }
        button {
            width: 92px;
            height:44px;
        }
        .button-400 {
            width: 400px;
        }

        .button-blue {
            color: blue;
            /* border: none;
            border-radius: 0px;
            padding: 8px 1px;
            box-shadow: 0 2px 6px rgba(25, 118, 210, 0.15);
            font-size: 16px; */
            cursor: pointer;
            transition: background 0.2s;
        }
        .button-red {
            color: red;
            cursor: pointer;
            transition: background 0.2s;
        }
        .button-purple {
            color: purple;
            cursor: pointer;
            transition: background 0.2s;
        }
        .button-green {
            color: green;
            cursor: pointer;
            transition: background 0.2s;
        }
        .button-orange {
            color: darkorange;
            cursor: pointer;
            transition: background 0.2s;
        }

        .button-orange:hover {
            background-color: darkorange;
            color: white;
        }

        .text-blue {
            color: blue;
        }
        .text-red {
            color: red;
        }
        .text-purple {
            color: purple;
        }
        .text-orange {
            color: darkorange;
        }
        .text-green {
            color: green;
        }
        .text-bold {
            font-weight: bold;
        }
        .text-10dot5 {
            font-size: 10.5px;
        }

        .futureTaxes {
            font-weight: 800;  /* 700 is bold */
            background-color: #fff;
            font-size: 17px;
        }
        .border-more {
            border: 1px solid black;
        }

        #yourImpactNewDebtShareAnnualDollars{
            color: darkorange;
            font-weight: bold;
        }
        #yourImpactNewDebtShareTenYearDollars{
            color: darkorange;
            font-weight: bold;
        }
        #yourImpactNewDebtShareTermDollars{
            color: darkorange;
            font-weight: bold;
        }
        .redBold{
            color: red;
            font-weight: bold;
        }
        .orangeBold {
            color: darkorange;
            font-weight: bold;
        }
        .blueBold {
            color: blue;
            font-weight: bold;
        }

        #bondParameters {
            color: blue;
            padding-bottom: 5px;
            margin-top: 10px;
            border: 1px solid orange;
            background-color: #dadada;
        }

        #yourPropertyImpact {
            margin-top: 6px;
            padding-top: 4px;
            padding-bottom: 8px;
            min-height: 60px;
        }
        #yourTaxesInputNow {
                width: 88px;
        }
        .yourTaxesNow {
            font-weight: bold;
            font-size: 24px;
            color: #5a9bd8;


        }
        #yourAgeInput {
            width: 40px;
        }



        #dsrTextSpan {
            padding-top: 32px;
            /*font-size: 20px; */
        }


        #existingBudget {
            margin-top: 6px;
            padding-top: 4px;
            padding-bottom: 6px;
            /*
            background-color: #ff190025;
            background-color: #FFE0B2;

            */
            background-color: #FF8888;
            min-height: 60px;
        }
        #yourPropertyDiv {
            margin-top: 6px;
            padding-top: 4px;
            padding-bottom: 20px;
            background-color: #ffebc6;
            min-height: 60px;
        }
        #new-spending-div {
            margin-top: 6px;
            padding-top: 2px;
            padding-bottom: 4px;
            /*
            background-color: #f8f6db;
 */
            background-color: #fb7ee8;


        }

#spendingGrowthRateDiv {
  /* keep equal-height layout */
  display: flex;
  gap: 10px;
  align-items: stretch;
  /* cap total width and center */
  max-width: 990px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  justify-content: space-between; /* distribute three columns across available width */
}
#spendingGrowthRateDiv > div:not(#rateToast) {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  height: 100%;
  min-width: 0; /* prevent overflow from long content */
  align-self: stretch;
}
#spendingGrowthRateDiv > div:not(#rateToast) > :last-child {
  margin-top: auto;
}




        #new-debt-impact-div {
            margin-top: 6px;
            padding-top: 2px;
            padding-bottom: 4px;
            /*
            background-color: #f8f6db;
 */
            background-color: #7efbcb;


        }


        #new-debt-div {
            margin-top: 6px;
            padding-top: 2px;
            padding-bottom: 0px;
            /* background-color: #e0e0e0; */
        }

        #deep-dive-debt-div {
            margin-top: 6px;
            padding-top: 2px;
            padding-bottom: 10px;
            padding-left: 4px;
/*
            background-color: #fee1e1;  */
        }

        .btnSectionShowHide {
            width: 211px;
            height: 32px;
            margin-top: 6px;
            padding: 2px;
            padding-left: 5px;
            border: 1px solid purple;
            background-color: #ddf;
            border-radius: 0px;
            align-items: left
        }

        #btnDiveCIP {
            width: 220px;
            height: 32px;
            margin-top: 6px;
            padding: 2px;
            border: 1px solid purple;
            background-color: #ddf;
            border-radius: 0px;
            align-items: left
        }
        #btnDiveCIPlong {
            width: 220px;
            height: 32px;
            margin-top: 6px;
            padding: 2px;
            border: 1px solid purple;
            background-color: #ddf;
            border-radius: 0px;
            align-items: left;
        }

        #btnBondParameters {
            width: 216px;
            height: 32px;
            margin-top: 26px;
            padding: 2px;
            border: 1px solid purple;
            background-color: #ddd;
            border-radius: 0px;
            align-items: left
        }

        #btnReset {
            width: 40px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid purple;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }
        /*
        #btnResetNewDebt {
            width: 60px;
            height: 20px;
            margin-top: 2px;
            margin-left: 15px;
            padding: 2px;
            border: 1px solid purple;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }
            */
        .btnNewDebtUseCIP {
            width: 58px;
            height: 30px;
            margin-top: 4px;
            margin-left: 12px;
            margin-left: 2px;
            padding: 2px;
            border: 1px solid purple;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }

        #btnResetSpendingGrowth{
            width: 75px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }
        #btnResetSpendingGrowth5{
            width: 75px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }
        .btnSpendingGrowth{
            width: 82px;
            height: 34px;
            margin-top: 2px;
            margin-left: 12px;
            padding: 1px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 11px;
        }

        #btnProp2half {
            width: 40px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }


        .btnToggle {
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }
        .btnToggle30h {
            height: 30px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }


        #btnToggleDetails {
            width: 70px;
        }
        #btnToggleDataTable {
            width: 70px;
        }
        #btnToggleAssumptions {
            width: 70px;
        }
        #btnToggleLevyHistory {
            width: 70px;
        }

        #btnToggleStacked {
            width: 90px;
            height: 30px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 12px;
        }

        #btnToggleDetails {
            width: 90px;
            height: 30px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 12px;
        }



        .btnViewYears {
            width: 333;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 3px solid #f00;
            background-color: #f00;
            border-radius: 5px;
            align-items: left;
            font-size: 12px;
        }
        #btnView10:hover {
            background-color: #5a9bd8;
            color: white;
        }
        #btnView25:hover {
            background-color: #5a9bd8;
            color: white;
        }

        #btnView10 {
            width: 85px;
            height: 24px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 12px;
        }
        #btnView10b {
            width: 75px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
            margin-left: 20px;
        }

        #btnView15 {
            width: 75px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }
        #btnView20 {
            width: 85px;
            height: 24px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 12px;
        }
        #btnView20b {
            width: 75px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }

        #btnView25 {
            width: 75px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }

        #btnView30 {
            width: 85px;
            height: 24px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 12px;
        }

        #btnView20b {
            width: 75px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }

        #btnView25b {
            width: 75px;
            height: 20px;
            margin-top: 2px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
        }

        #btnNewDebtGrantPercent {
            width: 128px;
            margin-left: 15px;
        }


        #btnToggleTaxLevy {
            width: 32px;
            height: 14px;
            margin-top: 4px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 8px;
        }

        .historyText {
            font-size: 24px;
            margin-left: 25px;
            margin-right: 25px;
            padding-left: 25px;
            padding-right: 25px;
            text-align: center;
        }

        .debtDiv {
            margin-top: 0px;
            padding: 6px;
            background-color: #eef;
        }

        #cipDiv {
            margin-top: 0px;
            padding: 6px;
            background-color: #eef;
        }
        #cipLongDiv {
            margin-top: 0px;
            padding: 6px;
            background-color: #eef;
        }
        #helpCutsAdds {
            line-height: 1.4; /* Adjusted line spacing */
        }

        .instruction {
            font-size: 14px;
            color: #888;
            margin-top: 6px;
            margin-bottom: 6px;
            margin-right: 12px;
            font-style: italic;
        }

        .instruction.hidden {
            display: none;
        }

        #btnToggleInstructions {
            width: 100px;
            height: 20px;
            margin-top: 2px;
            margin-left: 8px;
            padding: 2px;
            border: 1px solid gray;
            background-color: #fff;
            border-radius: 5px;
            align-items: left;
            font-size: 10px;
            cursor: pointer;
        }

        #btnToggleInstructions:hover {
            background-color: #f0f0f0;
        }

        #btnToggleInstructions.active {
            background-color: #fff;
            color: #888;
            border-color: #5a9bd8;
        }

        .dsrSVG {
            margin-top: 0px;
            margin-bottom: 6px;
            padding-top: 0px;
            padding-bottom: 2px;
            background-color: #ffe;
        }

        /* 1. Style the container */
        .container-svg {
            width: 100%;      /* Make the container responsive */
            max-width: 700px; /* Set the maximum width */
            margin: 0 auto;   /* Optional: center the container
            background-color: rgb(88, 71, 200);  */


        }

        /* 2. Style the SVG itself */
        .responsive-svg {
            width: 100%;    /* Make the SVG fill its container */
            height: auto;   /* Maintain the aspect ratio */
            display: block; /* Removes any extra space below the svg
            background-color: rgb(88, 71, 200);  */


        }

        .chart-toggle-controls {
            margin-top: 2px;
            margin-bottom: 10px;
            padding: 6px;
        }

        #chart-container {
            position: relative;
            width: 100%;
            height: 300px; /* Set a specific height for the chart */
            overflow: hidden;
        }

        .text-left {
            text-align: left;
        }
        .margin-left-20 {
            margin-left: 20px;
        }
        .assumptions {
            margin-left: 20px;
            text-align: left;
            font-size: 14px;
            line-height: 1.5;
        }




        .smaller {
            font-size: 10px;
        }
        .bigger {
            font-size: 22px;
        }
        .bold {
            font-weight: bold;
        }
        .sameColor {
            color: #5a9bd8;
        }
        .futureColor {
            color: #4178a8;
        }
        .pastColor {
            color: #a3c9eb;
        }
        .pastColorDarker {
            color: #7fb2e2;
        }

        #spendingDiv {
            height: 800px;
            background-color: #5bdd20;
        }
        #spendingLeftDiv {
            flex: 3;
            /* background-color: #f8f6db; */
            padding-right: 12px;
        }
        #spendingRightDiv {
            flex: 2.4;
            /* background-color: #f8f6db; */
            padding-left: 12px;
        }

.margin-bottom12 {
    margin-bottom: 12px;
}

/* keep RTE label and checkbox close together */
.rte-toggle { display: inline-flex; align-items: center; gap: 4px; }
.rte-toggle .rte-label { margin: 0; }


    .scalable-text {
      /*transform-origin: left top;
      transition: transform 0.2s ease;*/
      transform: scale(2); /* Example scaling factor */
    }

    /* Robo target overlay - highlights the element about to be acted upon */
.robo-target-overlay {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    border: 3px solid #ff0000 !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

/* Modal overlay for click-to-close */
#histogram-modal-overlay {
    cursor: pointer !important;
}

/* Animation timer display in upper right corner */
.animation-timer {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 99998 !important;
    background-color: #2196F3 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #1976D2 !important;
    min-width: 100px !important;
    text-align: center !important;
}

.animation-timer.paused {
    background-color: #FF9800 !important;
    border-color: #F57C00 !important;
}

.animation-timer.completed {
    background-color: #9E9E9E !important;
    border-color: #757575 !important;
    color: white !important;
    cursor: pointer !important;
}

.animation-timer.completed:hover {
    background-color: #757575 !important;
    border-color: #616161 !important;
}

/* Element focus indicator below timer */
.element-focus-indicator {
    position: fixed !important;
    top: 50px !important;
    right: 10px !important;
    z-index: 99997 !important;
    background-color: #FFF9C4 !important;
    color: #F57F17 !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important; /* 111 */
    font-weight: normal !important;
    border: 1px solid #FBC02D !important;
    max-width: 200px !important;
    text-align: center !important;
    word-wrap: break-word !important;
}

.sectionHeading
{
    text-align: left !important;
    padding-left: 15px;
}

.svgChart {
    width: 100%;
    max-width: 900px;
    margin-top: 8px;
    margin-bottom: 8px;
text-align: center;
}