div.watu-question, div.show-question {
margin-top: 15px !important;
}
.question-choices, .show-question-choices {
margin-top: 5px !important;
}

/* Style individual paginator squares */
ul.watupro-paginator li {
    font-size: 12px !important; /* Adjust font size for smaller screens */
    width: 30px !important; /* Reduce square size */
    height: 30px !important; /* Match height to width */
    line-height: 30px !important; /* Vertically center the numbers */
    text-align: center !important; /* Center-align text */
    display: inline-flex !important; /* Flex alignment */
    align-items: center; /* Vertically align text */
    justify-content: center; /* Horizontally align text */
    box-sizing: border-box; /* Prevent padding/margin issues */
}

/* Ensure the paginator stays in a single line */
ul.watupro-paginator {
    display: flex !important; /* Flexbox layout */
    flex-wrap: nowrap !important; /* Prevent wrapping */
    justify-content: center !important; /* Center paginator */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    gap: 5px; /* Add spacing between squares */
    margin-bottom: 20px !important; /* Keep spacing below paginator */
    padding: 0 10px; /* Add padding to avoid content touching the edges */
}

/* Hide arrow buttons */
ul.watupro-paginator li:first-child,
ul.watupro-paginator li:last-child {
    display: none !important; /* Remove arrow buttons */
}



/* Style the answer options */
.question-choices label {
    display: block; /* Ensure each option is on a new line */
    text-align: center; /* Center-align the text for uniformity */
    padding: 15px 20px !important; /* Add padding for better spacing */
    margin-top: 10px !important; /* Space above each choice */
    margin-bottom: 10px !important; /* Space below each choice */
    border: 1px solid #ccc; /* Add a subtle border for structure */
    border-radius: 5px; /* Add rounded corners for a modern look */
    background-color: #f9f9f9; /* Light background for better readability */
    width: 100%; /* Ensure consistent width across all options */
    max-width: 400px; /* Limit width for larger screens */
    margin-left: auto; /* Center the options horizontally */
    margin-right: auto; /* Center the options horizontally */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

/* Adjust hover effects for interactivity */
.question-choices label:hover {
    background-color: #e6f7ff; /* Change background on hover */
    border-color: #007bff; /* Highlight the border on hover */
    cursor: pointer; /* Add pointer cursor for clarity */
}
ul.watupro-paginator {
    display: flex !important; /* Flexbox layout */
    flex-wrap: nowrap !important; /* Prevent wrapping */
    justify-content: flex-start !important; /* Align paginator to the left */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    gap: 5px; /* Space between squares */
    margin-bottom: 20px !important; /* Keep spacing below paginator */
    padding: 0; /* Remove extra padding */
}
.watupro_buttons.flex {
    display: flex !important; /* Use flexbox */
    flex-wrap: nowrap !important; /* Ensure buttons stay in one row */
    justify-content: flex-start !important; /* Align to the left */
    align-items: center !important; /* Align vertically */
    gap: 10px; /* Add spacing between buttons */
    margin: 20px 0 !important; /* Add some space above and below */
    padding: 0 !important; /* Remove any extra padding */
}


.watupro-question-choice span {
		  display: inline !important; /* added in WatuPRO 6.1.0.4 */
		}
@media 
			only screen and (max-width: 600px) {
}