body {
	font-family: "Twemoji Country Flags", var(--bs-body-font-family);
}

.network-map {
	position: relative;
	height: min-content;
}

.network-map ul {
	margin: 0 !important;
	list-style-type: none;
}

.network-map ul li {
	position: absolute;
	z-index: 1;
	width: 10px;
	height: 10px;
	margin: -6px;
	background-color: #0d6efd;
	border-radius: 100%;
}

.network-map ul li span.label-top-left,
.network-map ul li span.label-top-right,
.network-map ul li span.label-bottom-left,
.network-map ul li span.label-bottom-right {
	position: absolute;
	color: #fff;
	padding: 4px 8px;
	margin-top: -8px;
	line-height: 20px;
	font-size: 14px;
	white-space: nowrap;
	font-family: Montserrat, sans-serif;
	background-color: #0d6efd;
	border-radius: 4px;
	transition: color 0.2s;
}

.network-map ul li span.label-top-left {
	top: -32px;
	right: 24px;
}

.network-map ul li span.label-top-right {
	top: -32px;
	left: 24px;
}

.network-map ul li span.label-bottom-left {
	bottom: -40px;
	right: 24px;
}

.network-map ul li span.label-bottom-right {
	bottom: -40px;
	left: 24px;
}

.network-map ul li span.label-top-left::before,
.network-map ul li span.label-top-right::before,
.network-map ul li span.label-bottom-left::before,
.network-map ul li span.label-bottom-right::before {
	content: "";
	position: absolute;
	width: 24px;
	height: 1px;
	background-color: #0d6efd;
}

.network-map ul li span.label-top-left::before,
.network-map ul li span.label-bottom-right::before {
	transform: rotate(45deg);
}

.network-map ul li span.label-top-right::before,
.network-map ul li span.label-bottom-left::before {
	transform: rotate(-45deg);
}

.network-map ul li span.label-top-left::before {
	top: 34px;
	right: -18px;
}

.network-map ul li span.label-top-right::before {
	top: 34px;
	left: -18px;
}

.network-map ul li span.label-bottom-left::before {
	top: -6px;
	right: -18px;
}

.network-map ul li span.label-bottom-right::before {
	top: -6px;
	left: -18px;
}

.network-map img {
	display: block;
	width: 100%;
	opacity: 0.16;
}