/* Style for the legend box */
.legend {
    background-color: rgba(255, 255, 255, 0.8); /* Light transparent background */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Drop shadow for depth */
}

.legend h4 {
    margin: 0 0 10px;
    font-size: 14px;
}

/* Style each legend item */
.legend div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.legend img {
    margin-right: 8px;
    width: 36px;
    height: auto;
}

/* Style for the checkbox and label */
.legend label {
    display: flex;
    align-items: center;
    cursor: pointer; /* Pointer cursor for better UX */
    font-size: 12px;
    color: #333; /* Slightly darker text for contrast */
    gap: 8px; /* Consistent spacing between elements */
}

.legend input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0078d4; /* Modern color for checkbox, fallback for browsers that support it */
    border: 1px solid #ccc; /* Subtle border for older browsers */
    border-radius: 3px; /* Rounded corners for modern look */
    margin: 0;
}