.header {
    display: flex;
    flex-direction: column; /* Stack items vertically */
}

.header-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 0;
    margin-left: 20px;
    color: #0056b3;
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
}


/* Report Container Styling */
.report-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Container for paragraphs and charts */
.content-container {
    display: flex; /* Flexbox layout to position items side by side */
    gap: 20px; /* Space between the sections */
    padding: 20px;
    max-width: 1200px;
    margin: auto;
    flex-wrap: wrap; /* Allow items to wrap to a new line if needed */
}

/* Paragraph section styling - positioned on the left */
.paragraph-section {
    flex: 1; /* Takes up remaining space on the left */
    max-width: 60%; /* Adjust as needed */
    padding-right: 20px; /* Optional padding for better spacing */
}

/* Report Section Styling */
.report-section {
    margin-bottom: 20px;
}

.report-section h2 {
    font-size: 22px;
    margin-bottom: 10px;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 5px;
}

.heading-with-icon {
    display: flex;
    width: 100%; /* Ensures it spans the full width of the container */
    align-items: center; /* Vertically aligns text and icon */
}

.heading-with-icon i {
    margin-left: auto; /* Pushes the icon to the far right */
    font-size: 1.5em; /* Adjusts icon size */
}

.phases-content h2.sub-section {
    font-size: 20px; 
    font-weight: bold;
    border: none;
    text-decoration: underline; 
}

.resources-content h2.sub-section {
    font-size: 20px; 
    font-weight: bold;
    border: none;
    text-decoration: underline; 
}

.risk-content h2.sub-section {
    font-size: 20px; 
    font-weight: bold;
    border: none;
    text-decoration: underline; 
}

.financial-content h2.sub-section {
    font-size: 20px; 
    font-weight: bold;
    border: none;
    text-decoration: underline; 
}

.overview-content,
.estimates-content,
.complexity-content,
.readiness-content,
.regulatory-content,
.market-content,
.phases-content,
.resources-content,
.risk-content,
.financial-content{
    display: flex;
    flex-direction: column;
    font-size: 1em;
    line-height: 1.6;
}

.phases-content p,
.phases-content ul {
    margin-top: 5px; /* Less space between paragraphs or lists */
    margin-bottom: 5px;
}


/* Chart section styling - positioned on the right */
.chart-section {
    flex: 1; /* Takes up space on the right */
    max-width: 40%; /* Adjust width to fit content */
    display: flex;
    flex-direction: column;
    /* gap: 30px; /* Increased space between charts for better readability */
    /* padding-bottom: 20px; /* Add space at the bottom */
}

.chart-section h2 {
    text-align: right;
    font-size: 18pt;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 5px;
}

/* Set specific dimensions for the charts */
.chart-section canvas {
    width: 100%; /* Full width of the container */
    height: 200px; /* Adjust height as needed */
    margin-bottom: 30px; 
}

#cost-by-phase-chart,
#time-by-phase-chart {
    margin-top: 30px;
}

#score-meter {
    width: 100%;      /* Ensures full width */
    height: 150px;    /* Adjust for a proportional bar height */
    display: block;
    margin-top: 0; /* Center horizontally, if needed */
    padding: 0;
}

/* Style for score explanation */
#score-explanation {
    margin-top: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 2px solid #0056b3; 
    font-size: 14px;
    line-height: 1.6;
    border-radius: 5px; /* Optional: rounded corners */
}

#score-explanation h3 {
    font-size: 16px;
    color: #0056b3;
    margin-bottom: 10px;
}

#score-explanation p {
    margin-bottom: 10px;
}

#score-explanation ul {
    margin: 0 0 10px 20px;
}

#score-explanation li {
    margin-bottom: 8px;
}

#cost-by-category-chart {
    margin-top: 20px;
}

#phaseI-cost-pie-chart,
#phaseI-time-pie-chart,
#phaseII-cost-pie-chart,
#phaseII-time-pie-chart,
#phaseIII-cost-pie-chart,
#phaseIII-time-pie-chart,
#phaseIV-cost-pie-chart,
#phaseIV-time-pie-chart,
#phaseV-cost-pie-chart,
#phaseV-time-pie-chart {
    margin-bottom: 10px; 
}

p#report-version {
    text-align: right; 
    font-size: 12px;
}

.full-width-section h2.sub-section {
    font-size: 20px; 
    font-weight: bold;
    border: none;
    text-decoration: underline; 
}

.canvas-container {
    display: flex;
    gap: 50px; /* Space between the canvases */
    justify-content: left; /* Center the content */
}

.canvas-container canvas {
    flex: 1; /* Each canvas takes up an equal portion */
    max-width: 45%; /* Adjust to control the width of each canvas */
}

.full-width-section canvas.cost-by-phase-chart {
    flex: 1; /* Takes up remaining space on the left */
    max-width: 50%; /* Adjust as needed */
    padding-right: 20px; /* Optional padding for better spacing */
}

ul.phase-list {
    padding: 0;
    margin: 0;
}

ul.phase-list li {
    list-style-type: none;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.fa-square-check,
.fa-square {
    font-size: 1.3em;
    color: #333;
    margin-right: 10px;
}

.cost-time-notes {
    margin-top: 50px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.6;
}


#cost-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    max-width: 800px; /* Adjust as needed */
}

#cost-inputs .cost-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

#cost-inputs label {
    flex: 2;
    text-align: right;
    font-size: 12px;
}

#cost-inputs .original-value {
    flex: 1;
    padding: 5px; 
    font-size: 12px;
    border: 1px solid #ccc; 
    border-radius: 4px; 
    color: #333; /* Match input text color */
    background-color: #f9f9f9; /* Light background for differentiation */
}

#cost-inputs input {
    flex: 1;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Chrome, Safari, Edge, and Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.export-button {
    flex-grow: 0;
    background-color: #000000;
    color: white; 
    border: none;
    border-radius: 4px;
    padding: 10px 20px; /* Padding for the button */
    font-size: 12px;
    font-weight: bold; 
    cursor: pointer;
    margin-top: 10px;
    align-self: flex-end; /* Align button to the right */
    transition: background-color 0.3s ease;
}

.export-button:hover {
    background-color: #0ab9ca;
}


.full-width-section #disclaimer {
    margin-top: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 2px solid #0056b3;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 5px; /* Optional: rounded corners */
}

.full-width-section #disclaimer .disclaimer-heading {
    font-size: 16px;
    color: #0056b3;
}

.disclaimer-content ul li {
    margin-top: 5px; /* Less space between paragraphs or lists */
    margin-bottom: 5px;
}