.grid-locator {
  display: grid; 
  grid-template-columns: 0.5fr 1.5fr; 
  grid-template-rows: 1fr; 
  gap: 0rem 0rem; 
  grid-template-areas: 
    "grid-location grid-map"; 
}
.grid-location { grid-area: grid-location; }
.grid-map { grid-area: grid-map; }

.grid-location {
	overflow-y: auto;
	height: 800px;
	padding: 1rem;
}
.grid-map { 
	height: 800px;
	padding: 1rem;
}
#locations-container {
	overflow: auto;
}
	.loc-info {
		display: block;
		padding: 1rem 2rem 1rem 2rem;
		color: #000;
		background-color: #E9E9E9;
		text-decoration: none !important;
		border-radius: var(--img-radius);
		margin-bottom: 0.2rem;
		border-left: 0.5rem solid #EEE;
		transition: background-color 0.3s linear;
		font-size: var(--tiny-font-size);
	}
	.loc-info:hover {
		background-color: #EFEFEF;
	}

	
/*	
		.loc-info.priority-1 {
			background-color: #e8f6e8;
			border-left: 0.5rem solid #c1f1ca;
		}
		.loc-info.priority-1:hover {
			background-color: #c1f1ca;
		}
*/		
		.loc-cust-rating-2, .loc-cust-rating-1 {
			background-color: #ffe75a;
		}
		.loc-cust-rating-2:hover, .loc-cust-rating-1:hover {
			background-color: #fff19f;
		}
		.loc-cust-rating-2 .fa-star, .loc-cust-rating-1 .fa-star {
			color: #ffa500;
		}
		
		/*
		.loc-cust-rating-1 {
			background-color: #dbdbdb;
		}
		.loc-cust-rating-1:hover {
			background-color: #efefef;
		}
		.loc-cust-rating-1 .fa-star {
			color: #D33D3D;
		}
		*/
		
		.loc-cust-rating-0 {
			background-color: #f1f1f1;
		}
		.loc-cust-rating-0:hover {
			background-color: #fdfdfd;
		}

		.loc-info-hover {
			border-left: 0.5rem solid #333333;
		}
		
		
	.loc-badge-container {
		line-height: 1.5rem;
	}
	.loc-badge {
		padding: 0.1rem 0.4rem 0.2rem 0.4rem;
		border-radius: var(--img-radius);
		font-size: var(--tiny-font-size);
		color: #FFF;
		margin-right: 0.2rem;
		margin-bottom: 0.2rem;
		white-space: nowrap;
		display: inline-block;
		font-family: Roboto;
	}

	
#google-map {
	width: 100%;
	height: 800px;
	border-radius: 0.3rem;
}



/* SEMI-MOB Between this width */
@media (min-width: 992px) and (max-width: 1280px) {
	.grid-locator {
	  grid-template-columns: 0.8fr 1.2fr; 
	}
}
/* MOBILE - Over this width */
@media all and (max-width: 991px) {  
	.grid-map, .grid-location {
		height: 100vh;
	}
	.grid-locator {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto;
		gap: 2rem 2rem;
		grid-template-areas:
			"grid-map"
			"grid-location";
	}
	#google-map {
		width: 100%;
		height: 100%;
	}
	.loc-words {
		display: none;
	}
}