popup.css

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&family=IBM+Plex+Sans:wght@500&family=Karla:wght@400;700&display=swap');

:root {
	--background-color: black;
	--header-color: #131313;
	--popup-height: 200px; /* <--- adjust as needed */
	--popup-width: 278px;

	--title-and-number-padding-bottom: 8px;

	--dark-text: #808080;
}

/*INTERNAL POPUP ITSELF*/

/* general popup */

.popup-fixed-container {

	background-color: var(--background-color);

	min-height: var(--popup-height);
	max-height: var(--popup-height);
	min-width: var(--popup-width);
	max-width: var(--popup-width);

	overflow-y: scroll;
}

.popup-padding-wrapper {
	padding: 16px;
	background-color: var(--background-color);
	color: white;
}

.location-header {
	font-family: IBM Plex Mono, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 32px;
	/*   background-color: var(--header-color); */
}

/* rating containers */

.overall-rating-container,
.pillar-rating-container {
	padding-top: 24px;
}

/* title and number */

.title-and-number-container {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: var(--title-and-number-padding-bottom);
}

.title-and-number-container.overall {
	padding-bottom: calc(var(--title-and-number-padding-bottom) + 12px);
}

.bolder {
	font-weight: 700;
}

.rating-title {
	font-family: Karla;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 16px;
	/* identical to box height, or 133% */

	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dark-text);
}

.rating-title.overall {
	text-transform: lowercase;
	color: white; /* TODO: use JS to make color match gradient?*/
}

.rating-number {
	font-family: IBM Plex Sans, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;

	text-align: right;
	letter-spacing: 1px;

	color: #ffffff;
}

/* bars and gradients: */

.gradient-container {
	height: 12px;
	border-radius: 4px;
	background-color: rgba(10, 10, 10, 0.1);
	position: relative;
	background: linear-gradient(270deg, #77FF02 0%, #1EADB6 50%, #FF6B00 75%, #DC0202 100%);
	animation: slidein 500ms;
}

.gradient-triangle-marker {
	border-radius: 0px;
	height: 0px;
	width: 0px;
	position: absolute;
	left: 0; /* Property dynamically overwritten by data in JS */
	top: -8px;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 16px solid white;
}

@keyframes slidein {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

.bar-container {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background-color: #404040;
}

.bar {
	border-radius: 4px;
	height: 100%;
	width: 0;
	transition: width 0.8s;
	background-color: rgba(255, 255, 255, 0.5);;
}


/*SCROLLBAR*/

/* width */
::-webkit-scrollbar {
	width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
	background: var(--background-color);
	width: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}



/*LEAEFLET*/

.leaflet-popup-content-wrapper {
	padding: 0;
	background-color: var(--background-color);
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
	margin: 0;
}

.leaflet-container a.leaflet-popup-close-button {
	height: 24px;
	width: 24px;
	padding: 4px;
	top: -10px;
	right: -10px;

	background-color: white;
	border-radius: 50%;
}

.leaflet-popup-tip-container {
	margin-left: -24px;
}

.leaflet-popup-tip-container .leaflet-popup-tip {
	background: #000;
}