.mortgage-calculator-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.form-section, .results-section {
    display: flex;
    flex-direction: column;
}

#mortgage-calculator label {
    margin-top: 10px;
}

#mortgage-calculator input[type="text"] {
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px !important; /* Ensuring rounded corners */
    border: 1px solid #ccc;
    width: 250px; /* Fixed width for input fields */
}

#mortgage-calculator input[type="email"] {
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px !important; /* Ensuring rounded corners */
    border: 1px solid #ccc;
    width: 250px; /* Fixed width for input fields */
}

#calculate-button, #toggle-applicants-btn {
    margin-top: 20px;
    padding: 10px;
    background-color: #0073AA;
    color: white;
    border: none;
	width: 250px;
    cursor: pointer;
    border-radius: 10px !important; /* Ensuring rounded corners for buttons */
}

#email-results-button, #email-results-button {
    margin-top: 20px;
    padding: 10px;
    background-color: #0073AA;
    color: white;
    border: none;
	width: 250px;
    cursor: pointer;
    border-radius: 10px !important; /* Ensuring rounded corners for buttons */
}

#calculate-button:hover, #toggle-applicants-btn:hover {
    background-color: #005A8C;
}

/* Ensure the chart is properly contained */
#mortgage-chart {
    margin-top: 20px;
    width: 100%;  /* Ensure chart takes full container width */
    height: 400px; /* Fixed height to prevent growing beyond limits */
    max-height: 400px; /* Limit the height */
    overflow: hidden;  /* Prevent overflow */
}

#applicant2-fields {
    display: flex;
    flex-direction: column;
}

#applicant2-fields label,
#applicant2-fields input[type="text"] {
    margin-top: 10px;
    width: 250px; /* Fixed width for second applicant input fields */
}