styles-local.html

<style>

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

.wrapper {
    min-width: 1000px;
}

.container {
    display: flex;
    flex-direction: column; /* Arrange rows vertically */
    width: 100%;
    height: auto; /* Allow height to adjust based on content */
}

.row {
    display: flex;
    flex-direction: row; /* Arrange map and sidebar horizontally */
    width: 100%;
    height: auto; /* Adjust height to fit the content */
}

#map-container {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    width: 75%; /* Adjust the width to balance with the sidebar */
    margin-right: 10px; /* Add some space between the map and sidebar */
}

#map {
    flex: 3; /* Map takes up 75% of the row */
    height: 450px;
    border: 1px solid #ccc;
}

#sidebar {
    flex: 1; /* Sidebar takes up 25% of the row */
    height: 450px; /* Same height as the map */
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    overflow-y: auto; /* Allow scrolling if content exceeds height */
}

.histogram-container {
    width: 100%; /* Span the full width below the row */
    margin-top: 20px; /* Add some spacing */
}

.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%;
}

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

#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: 20px; /* 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 */
}

#active-markers-table {
    width: 100%;
    table-layout: fixed; /* Ensures consistent column widths */
    border-collapse: collapse;
}

#active-markers-table th {
    text-align: center; /* Center the text horizontally */
    font-size: 12px; /* Set the font size */
    font-weight: bold; /* Optional: Make the header text bold */
    padding: 5px; /* Add some padding for better spacing */
    background-color: #f4f4f4; /* Optional: Add a light background color */
    border-bottom: 1px solid #ccc; /* Optional: Add a border under the header */
}

#active-markers-table td {
    text-align: left;
    word-wrap: break-word; /* Break long text into new lines */
    overflow-wrap: anywhere; /* Ensure words don't overflow their cells */
    font-size: 12px; /* Set the desired font size */
    padding: 2px 10px; /* Reduce padding: 2px top/bottom, 10px left/right */
    white-space: pre-wrap; /* Preserve whitespace and line breaks */
    text-indent: -0.5em; /* Pull the first line to the left */
    padding-left: 1em; /* Add space to push all lines, including the first line, back to the desired position */
}

#active-markers-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

</style>