.dash {
        margin: 10px;
    }
    .dash.active {
        display: block;
    }
    .top-panels {
        display: flex;
        flex-direction: column;
    }
    .left-panel, .right-panel {
        display: flex;
    }
    .right-panel {
        flex: 3;
        padding: 0px;
        height: 100%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 0px;
    }
    .left-panel {
        display: flex;
        flex-direction: column;
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        width: auto;
        height: auto;

    }

    .tabs {
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        overflow: hidden;
        flex: 1;
    }
    .tab-content {
        display: none;
        padding: 20px;
        border-top: 1px solid #ccc;
    }
    .tab-content.active {
        display: block;
    }
    .tab-buttons {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #ccc;
        background-color: #f8f8f8;
    }
    .tab-buttons button {
        padding: 10px 20px;
        cursor: pointer;
        border: none;
        background: #f0f0f0;
        font-size: 16px;
        outline: none;
        flex: 1;
    }
    .tab-buttons button.active {
        border-bottom: 3px solid #001f3f;
        font-weight: bold;
        background-color: #fff;
    }
    .tab-buttons button:first-child {
        border-top-left-radius: 10px; /* Rounded top-left corner of the first tab */
        border-right: 1px solid #ccc;
    }
    .tab-buttons button:last-child {
        border-top-right-radius: 10px; /* Rounded top-right corner of the last tab */
        border-left: 1px solid #ccc;
    }


.full-width-panel {
        display: flex;
        justify-content: center;
        background-color: #fff; /* You can change this to your preferred color */
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 5px;
        margin: 10px 0; /* Adds spacing above and below the panel */
}

.progress-container {
    display: flex;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-top: 0px;
    margin-left: 0px;
    padding: 10px;
}

/* Table container styles for scrolling */
.table-container {
    max-width: 100%;
    overflow: auto;
    margin-top: 10px;

}

/* Table styles */
.result-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-size: 0.9em; /* Reduced font size */
    margin-left: 0px;
    margin-right: 0px;
}

/* Table header styles */
.result-table th {
    background-color: #001f3f; /* Distinct color for header row */
    color: #fff; /* White text color for header row */
    font-weight: bold; /* Bold text for header row */
    border-bottom: 2px solid #ccc; /* Thicker bottom border for header row */
    border-top: 2px solid #ccc; /* Thicker bottom border for header row */
    position: sticky; /* Make header row sticky */
    top: 0; /* Stick the header to the top of the container */
    z-index: 3; /* Ensure the header is above other content */
}

/* Table cell styles */
.result-table th,
.result-table td {
    padding: 2px;
    text-align: center;
    border-right: 1px solid #ccc; /* Vertical line separators */
}

/* Sticky first column cells */
.result-table td:first-child {
    position: sticky; /* Make first column cells sticky */
    left: 0; /* Stick the first column to the left of the container */
    background-color: #fff; /* Ensure background color for visibility */
    z-index: 2; /* Ensure the first column is above other content */
    background-clip: padding-box; /* Prevent overlap issues */
}

/* Make the intersection of the first row and first column sticky */
.result-table th:first-child {
    position: sticky; /* Ensure sticky positioning for the intersection cell */
    left: 0; /* Stick the first header cell to the left of the container */
    z-index: 4; /* Higher z-index to be above other cells */
    background-color: #001f3f; /* Ensure background color matches the header */
}

/* Alternate row coloring */
.result-table tr:nth-child(even) td {
    background-color: #e0e0e0; /* Alternate row color */
}

/* Alignments */
.result-table th:first-child,
.result-table td:first-child {
    text-align: left;
}

.result-table th:last-child,
.result-table td:last-child {
    font-weight: bold;
}

/* Border adjustments */
.result-table tr:last-child td {
    border-bottom: none; /* Remove bottom border from last row */
}

.result-table th:last-child,
.result-table td:last-child {
    border-right: none; /* Remove right border from last column */
}




.progress-table {
    flex: 2;
    margin-left: 20px; /* Space between the chart and the table */
}
.progress-table table {
    width: 100%;
    border-collapse: collapse;
}
.progress-table th, td {
    text-align: right;
    padding: 8px;
}
.progress-table th {
    background-color: #f4f4f4;
}


input[type="number"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

.scenarios label {
    display: inline-block;
    margin-right: 10px;
    width: 180px;
    text-align: right;
    font-weight: bold;
}

.cta-button {
    background-color: #001f3f; /* Gunmetal Grey */
    color: #f9f9f9; 
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 18px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    margin: 10px 0 20px;
    display: inline-block;
}

.cta-button:hover {
    background-color: #005f8a; /* Darker blue for hover effect */
}