/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.css-default-table {
    width: 100%;
    border-collapse: collapse; /* Combine borders for a cleaner look */
    margin: 20px 0; /* Add some margin for spacing */
    font-family: Arial, sans-serif; /* Use a clean, sans-serif font */
    font-size: 14px; /* Set a comfortable font size */
}

.css-default-table th, 
.css-default-table td {
    padding: 10px; /* Add padding for readability */
    text-align: left; /* Align text to the left */
    border: 1px solid #ddd; /* Add a light border */
}

.css-default-table th {
    background-color: #f4f4f4; /* Light background for headers */
    font-weight: bold; /* Bold font for headers */
}

.css-default-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Alternate row colors for readability */
}

.css-default-table tr:hover {
    background-color: #f1f1f1; /* Highlight row on hover */
}

/* Category checkbox hover effects */
.css-checkbox-item {
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
}

.css-checkbox-item:hover {
    background-color: #f0f7ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.css-checkbox-item:hover label {
    color: #0073aa;
}

.css-checkbox-item input[type="checkbox"]:hover {
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.3);
}