styles-local.html

<style>

main.page-content {
    padding: 0px;}

.wrapper {
    min-width: 1000px;
}

#map {
		flex: 1;
		height: 450px;
}

.search-bar input[type="text"] {
    flex-grow: 1; /* Allow input to take available space */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    font-size: 16px; /* Increase font-size */
    background-image: url('../images/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    box-sizing: border-box; /* Ensure padding and border are included in width and height calculations */
    width: 100%;
}


#search-count {
	font-size: 16px; /* Increase font-size */
	margin-left: 10px;
	padding: 12px; /* Add some padding */
	width: 100%; /* Full-width */
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust the spacing between elements as needed */
}

.checkbox-container {
    display: flex;
    flex-direction: column; /* Make checkboxes stack vertically */
    gap: 1px; /* Adjust the spacing between checkboxes */
}

.checkbox-item {
    display: flex;
    align-items: center;
}

.checkbox-item label {
    margin-left: 5px; /* Adjust the space between checkbox and label */
    white-space: nowrap; /* Prevent label text from breaking onto two lines */
}

.small-space {
    height: 25px; /* Adjust the height as needed */
}

.slider-container {
    position: relative;
    width: 100%;
    padding: 20px 0;
    margin-top: -50px;
}

.slider-wrapper {
    position: relative;
    width: 100%;
}

input[type="range"] {
    position: absolute;
    pointer-events: none;
    width: 100%;
    -webkit-appearance: none;
    background: transparent; /* Track background is transparent */
    z-index: 1; /* Below thumbs */
}

/* Thumb Styling */
input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    position: relative;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    top: -6px;
    background: #333;
    border-radius: 50%;
    z-index: 2000; /* Ensure thumbs are above tracks */
}

input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    position: relative;
    height: 20px;
    width: 20px;
    background: #333;
    border-radius: 50%;
    z-index: 2; /* Ensure thumbs are above tracks */
}

input[type="range"]::-ms-thumb {
    pointer-events: auto;
    position: relative;
    height: 20px;
    width: 20px;
    background: #333;
    border-radius: 50%;
    z-index: 2; /* Ensure thumbs are above tracks */
}

/* Track Styling */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: transparent; /* Track itself is transparent */
    border-radius: 5px;
    z-index: 1; /* Below thumbs */
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: transparent;
    border-radius: 5px;
    z-index: 1;
}

input[type="range"]::-ms-track {
    width: 100%;
    height: 8px;
    background: transparent;
    border-color: transparent;
    color: transparent;
    z-index: 1;
}

.slider-active-label-container {
    position: relative;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 1;
}

.slider-active-label-start {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    background-color: white;
    top: 25px;
    z-index: 1; /* Labels are above everything */
}

.slider-active-label-end {  
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    background-color: white;
    top: 25px;
    z-index: 1; /* Labels are above everything */
}

.color-sample {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

table.histogram {
  width: 100%; /* Make the table take the full width of the container */
  border-collapse: collapse;
  table-layout: fixed; /* Ensure that each <td> is equally wide */
}

table.histogram td {
  width: auto; /* Let the <td> auto-adjust to fill the space */
  padding: 0; /* Remove any padding */
  vertical-align: bottom; /* Align bars to the bottom */
}

table.histogram div.count {
    width: 100%;
    vertical-align: bottom;
    background-color: #eee;
    color: black;
    display: top;
    border: 1px solid #aaa;
    position: relative; /* Added to position the label correctly */
}

</style>