/* Content Styles */

/* Form Styles */
#question-form {
    margin-top: 20px;
    display: block; /* Fixed: This was previously set to 'none', causing the form to hide */
    height: 40%;
    overflow: auto;
    background-color: #f2f2f2;
    padding: 20px; /* Added breathing room */
    border-radius: 8px; /* Added slightly rounded corners for a modern look */
}

/* Replaced rigid 'li' targeting with flexible class targeting */
.form-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

#question-form label {
    font-weight: bold;
    margin-right: 10px;
    width: 200px;
}

#question-form .number {
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

#question-form input,
#question-form select {
    padding: 6px; /* Increased padding makes inputs easier to click */
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: 1; /* Forces the input to take up the remaining horizontal space cleanly */
}

/* Conclusion Section Styles */
#conclusion {
    margin-top: 15px;
    height: 40%;
    overflow: auto;
    padding: 20px;
    background-color: #f2f2f2;
    border-radius: 8px;
}

#conclusion h2 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
}

#conclusion-table {
    border-collapse: collapse;
    width: 100%;
    border: 2px solid #313131; 
    font-size: 16px;
    text-align: center;
}

#conclusion-table tr {
    margin-bottom: 10px;
}

#conclusion-table th {
    font-weight: bold;
    border: 2px solid #313131; 
    padding: 8px;
    text-align: left;
    background-color: #e6e6e6; /* Slightly darker grey to contrast with the table body */
    color: #1a1a1a;
}

#conclusion-table td {
    border: 1px solid #313131; 
    padding: 8px;
    background-color: #f2f2f2;
    color: #1a1a1a;
}

/* Button Styles for the form */
button.button, .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #96ab9a;
    color: #000000;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
}

button.button:hover, .btn:hover {
    background-color: #7a8f7e;
}