.estimate_hirepurchase_container 
{
    width: 100%;
}
.estimate_hirepurchase_title {
    text-align: center;
    color: blue;
    font-size: 20px;
    weight:bold;
}

.estimate_hirepurchase_input,
.estimate_hirepurchase_output {
    width: 100%; /* Adjust the width as needed */
    margin: auto; /* Center the container */
    padding: 2%; /* Add some padding */
    border: 1px solid #ddd; /* Add a border */
    border-radius: 5px; /* Round the corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */
    background-color: #f9f9f9; /* Light background color */
    margin-bottom: 2%;
}

.hp_estimation_info_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 4 equal columns */
    gap: 2%; /* Space between grid items */
    width: 100%;
    margin: 1%;
    padding:1%;
}

.hp_estimation_info_row {
    display: contents; /* Makes the container disappear, showing only its children */
    padding: 1%;
}

.hp_estimation_grid_11
{
    grid-column: 1 / 2;
    padding: 0.5%;
    font-size:14px;
    margin:0.3%;
}
.hp_estimation_grid_12 
{
    grid-column: 1 / 3;
    padding: 0.5%;
    font-size:14px;
    margin:0.3%;
}
.hp_estimation_grid_22 
{
    grid-column: 2 / 3;
    padding: 0.5%;
    font-size:14px;
    margin:0.3%;
}
.hp_estimation_grid_center
{
    text-align:center;
}
.hp_estimation_grid_left
{
    text-align:left;
}
.hp_estimation_grid_header
{
    font-size: 18px;
    font-weight:bold;
}
.estimate_button_container {
    text-align: center; /* Center the buttons horizontally */
    margin-top: 20px; /* Add spacing between the form and buttons */
    position: relative; /* Positioning */
    bottom: 0; /* Align to the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
}

/* Styles for the "Submit" button */
.estimate_hirepurchase_amount,
.hirepurchase_get_form_button {
    background-color: #007bff; /* Blue background color */
    color: #fff; /* White text color */
    border: none; /* Remove button border */
    padding: 10px 20px; /* Add padding around the text */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Show pointer cursor on hover */
    margin-right: 10px; /* Add spacing between buttons */
}

.estimate_hirepurchase_amount:hover,
.hirepurchase_get_form_button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}