.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  float: left;
  padding: 10px;
  margin: 10px;
/*  height: 300px; Should be removed. Only for demonstration */
}
.myInput{
	width: 20px;
}
.results {
	display: flex;
	flex-direction: column; /* or row, depending on your layout */
	max-height: 100vh;       /* don't go beyond the first fold */
	overflow-y: auto;
	background-color:lightgray;      
	border: 1px solid white;  /* scroll vertically if needed */
	width:30%;
	padding-left: 20 px;
  }
.left {
  width: 50%;
}

.right {
  width: 50%;
  border: 1px solid black;
}
.results li {
	list-style: none;              /* remove default bullet */
	margin: 8px 0;                 /* vertical spacing between items */
	padding: 12px 16px;            /* space inside the box */
	border: 1px solid #ddd;        /* light border */
	border-radius: 6px;            /* slightly rounded corners */
	background-color: #f9f9f9;     /* light background for clarity */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* subtle shadow */
	margin-left: 12px;             /* gap from left */
  }
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.diagonal-text {
    display: inline-block; /* Allows transform to work properly */
    transform: rotate(-45deg); /* Rotate text */
    font-size: 15px; /* Font size */
    color: #333; /* Text color */
    margin: 1px; /* Spacing around the text */
}

.search-box-container {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    margin: 10px; /* Add some margin around the container */
}


.circle-button {
    width: 30px; /* Button width */
    height: 30px; /* Button height */
    border-radius: 50%; /* Make it circular */
    color: white; /* Text color */
    font-size: 8px; /* Font size */
    border: none; /* No border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Initial shadow */
    cursor: pointer; /* Change cursor to pointer */
    transition: all 0.2s ease; /* Smooth transition for effects */
}

.circle-button:active {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Shadow when pressed */
    transform: translateY(4px); /* Move down slightly when pressed */
}

#map {
    height: 80vh; /* 80% height */
    width: 80%; /* 80% width */
}

:root {
    --main-color: gray;
}

.inverted-triangle {
    width: 20px;
    height: 30px;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%); 
	/* Inverted triangle shape */
    position: relative;
}

.triangle {
    width: 20px;
    height: 30px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%); /* triangle */
    position: relative;
}

.active-partner		{ opacity: 1; }
.inactive-partner	{ opacity: .3; }

.bhkt	{ background-color: blue;	/* Pin color */ }
.chandu	{ background-color: PaleGreen;	/* Pin color */ }
.bsnt	{ background-color: red;	/* Pin color */ }
.kilkir	{ background-color: green;	/* Pin color */ }
.llt	{ background-color: DarkKhaki;	/* Pin color */ }
.chbl	{ background-color: purple;	/* Pin color */ }
.somu	{ background-color: BlueViolet;	/* Pin color */ }
.kotban	{ background-color: orange;	/* Pin color */ }
.cpg	{ background-color: grey;	/* Pin color */ }
.htd	{ background-color: brown;	/* Pin color */ }
.highlight	{ 
	background-color: black;	/* Pin color */ 
	foreground-color: white;	/* Pin color */ 
	opacity: 1;
}

.hidden {
            display: none; /* Hides the element without occupying space */
}

#org-list a {
	text-decoration: none;
	padding-left: 20 px;
}

.inactive { 
	opacity: .3; 
}


@media (max-width: 767px) { /* Mobile view */
	
    .row {
        flex-direction: column; /* Stack columns vertically on mobile */
    }

    .left {
        width: 80%; /* Full width for the map on mobile */
        
		order: 1; /* Map on top */
    }

    .right {
        width: 100%; /* Full width for search/list on mobile */
        order: 2; /* Search/list below */
    }

    #map {
        height: 50vh; /* Adjust height as needed on mobile */
    }

    #org-list {
        max-height: 50vh; /* Adjust height as needed on mobile */
    }
	.results {
		width: 100%; /* Full width for the results on mobile */
	order: 2;
	}
}