/* Style the form container */
#frmPizzaBuilder {
    max-width: 85%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



/* Style form elements */
input[type="text"],
select,
textarea {
    width: 98%;
    padding-bottom: 7.5px;
    padding-top: 7.5px;
    padding-left: 7.5px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: left;
    font-size: medium;
}

/* Style for the "topping" and "extraToppings" divs */
#familyMeal, #userInfo, #pizzaSelection {
    border: 1px solid #000000; /* Add a border to the div */
    padding: 10px; /* Add some padding to the div */
    margin-bottom: 20px; /* Add some space below the div */
    background-color: #f9f9f9; /* Background color for the div */
    color: #333; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
}

#toppings, #extraToppings{
    padding: 10px; /* Add some padding to the div */
    margin-bottom: 20px; /* Add some space below the div */
    background-color: #f9f9f9; /* Background color for the div */
    color: #333; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
}

    /* Style for the checkboxes and labels within the divs */
    #toppings input[type="checkbox"],
    #extraToppings input[type="checkbox"] {
        margin-right: 5px; /* Add some space between checkboxes and labels */
    }

    /* Style for the labels within the divs */
    #toppings label,
    #extraToppings label {
        font-weight: bold; /* Make labels bold */
        font-size: 16px; /* Adjust font size for labels */
        display: inline-block; /* Display labels in a line */
        margin-right: 10px;
    }