/* Styles for the overall calculator container */
#lumpsum-calculator {
    max-width: 900px; /* Set a maximum width for the calculator */
    margin: 0 auto; /* Center the calculator */
    padding: 20px;
    background-color: #f7f7f7; /* Light background for the form */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    
}

#main-heading{
    text-align: center;
}

/* Styles for the Investment Summary */
#lumpsum-results {
    background-color: #0a2e60; /* Blue background */
    color: white; /* White text */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

#lumpsum-results h3 {
    color: white;
}

.result-item span {
    color: #ffc107; /* Yellow color for amounts */
}

/* Divider below the Investment Summary heading */
.custom-divider {
    width: 60px;
    border-top: 3px solid white;
    margin: 10px auto 20px;
}

/* General chart container styling */
#lumpsum-charts {
    margin-top: 20px; /* Space above the chart section */
    padding: 20px;
    background-color: #f7f7f7; /* Light background color */
    border-radius: 8px;
}

/* Specific styling for Pie Chart and Line Chart containers */
#investmentPieChart {
    margin: 0 auto; /* Center align */
    height: 400px; /* Set fixed height to avoid resizing issues */
}

#investmentLineChart {
    margin: 40px auto 0 auto; /* Extra space between Pie Chart and Line Chart */
    height: 400px; /* Set fixed height for consistent appearance */
}

/* Ensure charts are responsive */
canvas {
    width: 100% !important;
    height: 400px !important; /* Fixed height for stability */
}

/* Form styling */
#lumpsum-calculator-form {
    margin-bottom: 20px; /* Space below the form */
}

.form-group {
    margin-bottom: 15px; /* Space below each form input */
}

label {
    font-weight: bold; /* Bold labels */
}

/* Existing input styling */
input[type="number"] {
    width: 100%; /* Full-width input fields */
    padding: 10px; /* Padding for better touch targets */
    border: 1px solid #ccc; /* Border for input fields */
    border-radius: 5px; /* Rounded corners */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover/focus effects */
    outline: none; /* Remove default focus outline */
}

/* Glowing effect when input is clicked or focused */
input[type="number"]:focus {
    border-color: #4CAF50; /* Change border color when focused */
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.8); /* Glowing green shadow effect */
    background-color: #f1fff0; /* Light green background when focused */
}

/* Optionally, apply the same glowing effect for the button */
.calculate-btn:focus {
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.8); /* Green glow on focus */
}

/* Styles for the calculate button */
.calculate-btn {
    margin-top: 20px; /* Adds space between the button and last input field */
    padding: 10px 20px; /* Makes the button look nicer with some padding */
    background-color: #0a2e60; /* Button color */
    color: white; /* White text */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Font size for the button */
}

.calculate-btn:hover {
    background-color: #082147; /* Darker shade on hover */
}