/* Map full height and width */
    #map {
        height: 100vh;
        width: 100%;
    }

    /* Side panel styles */
    #side-panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 100%;
        background-color: rgba(255, 110, 110, 0.9);
        border-right: 3px solid #000;
        padding: 20px;
        overflow-y: auto;
        z-index: 10000;
    }

    /* Hidden block for map popup when clicking on a marker */
    .mapblock {
        width: 100px;
        height: 100px;
        position: absolute;
        background: #ccccccad;
        display: none;
        z-index: 10000;
    }


#geocoderInput{
	color:#000;
}




    /* Style for search suggestions */
    .suggestions {
        border: none;
        line-height: 23px;
        font-size: 15px;
        max-width: 326px;
		color:#000;
    }

	.iconSVG{
	width:20px;
	height:20px;
	cursor:pointer; 
	margin:2px;
	padding:2px; 
	z-index:10000; 
	}



#sidepanel_icon img {
width:20px; 
	position:relative; 
	float:right; 
	margin-top:10px;
}




#side-panel {
    display: flex; /* Makes child elements flex items */
    flex-direction: column; /* Stacks children vertically */
    align-items: flex-start; /* Aligns child items to the left */
}

.icon-container {
    display: flex; /* Makes inner content flex items */
    align-items: center; /* Vertically aligns content inside */
    justify-content: flex-start; /* Aligns inner content to the left */
    width: 100%; /* Makes the container span the full width */
    margin-bottom: 10px; /* Optional: Adds spacing between items */
}
.icon-label {
  display: flex; /* Use flex to place checkbox and icon side by side */
  align-items: center; /* Center checkbox and icon vertically */
}

.icon-checkbox {
  margin-right: 5px; /* Space between checkbox and icon */
}

.icon-image {
  width: 20px; /* Width of the icon */
  height: 20px; /* Height of the icon */
}