/* Container to position the info icon and popup */
.info-container {
	position: relative;
	display: inline-block;
}

/* Info icon styling */
.info-icon {
	font-size: 20px;
	color: #3498db;
	cursor: pointer;
	margin: 0 5px;
}

/* Hidden by default */
.info-popup {
	position: fixed;
	display: none;
	max-width: 300px;
	background: #333;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 999999;
	overflow-wrap: anywhere;
	white-space: normal;
}

/* Arrow styles optional */
.info-popup.above::before {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 10px;
	border-width: 8px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}