/* n10-site-code: [Imported] Map Filtering [Nine10 CSS] · last edited by unknown on 2026-11-09 17:33:11 UTC · Nine10 entries are maintained by Nine10; use the Client entries for site changes. */
/* Container for the filters */
.n10-filters {
    border: 2px solid #CCC; /* Solid border for the legend box */
    padding: 0; /* Padding inside the box */
    margin: 20px 0; /* Margin around the box */
    background-color: #000; /* Light background color */
    border-radius: 5px; /* Rounded corners */
	color: #000;
	display:inline-flex;
	flex-direction:column;
}
.n10-filters  h3.n10-filters-heading{
	color: #FFF;
	background:#000;
	margin:0;
	padding: 10px;
}
.n10-filters  h3.n10-filters-heading span{
	font-size: 13px;
	padding-left:10px;
	color: #888;
	text-transform: none;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* Style for each filter label */
.n10-filters label {
    display: inline-block; /* Display labels inline */
    padding: 8px 10px 10px; /* Space between labels */
    cursor: pointer; /* Cursor indicates interactiveness */
	background: #000;
	color: #FFF;
	font-size: 12px;
	text-transform: uppercase;
	margin:0;
}

/* Style for the checkboxes */
.n10-filters .filter {
    margin-right: 5px; /* Space between checkbox and label text */
}

/* Optional: Add a hover effect to each label to indicate interactivity */
.n10-filters label:hover {
    color: #FFF; /* Change color on hover */
}

/* Style for label when its checkbox is unchecked */
.n10-filters label.unchecked {
    color: #000; /* Light grey color */
	background: #CCC;
}
/* Enlarge and shake animation */
@keyframes enlargeAndShake {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.5) rotate(-5deg);
    }
    20% {
        transform: scale(1.5) rotate(5deg);
    }
    30% {
        transform: scale(1.5) rotate(-5deg);
    }
    40% {
        transform: scale(1.5) rotate(5deg);
    }
    50% {
        transform: scale(1.5) rotate(0deg);
    }
    100% {
        transform: scale(1);
    }
}

/* Class to apply the animation */
.animate-highlight {
    animation: enlargeAndShake 1s ease forwards;
}