.help-tip2{
	position: relative;
    display: inline-block;
	text-align: center;
	background-color: var(--bg-help-tip, rgba(188, 219, 234, 0.7));
	border-radius: 50%;
	width: 18px;
	height: 18px;
	font-size: 14px;
	line-height: 20px;
	cursor: default;
}

.help-tip2:before{
	content:'?';
	font-weight: bold;
	color:var(--text-help, #fff);
}

.help-tip2:hover{
	background-color: var(--bg-help-tip-hover, rgb(188, 219, 234));
}

.help-tip2:hover p{
	display:block;
	transform-origin: 100% 0%;

	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;

}

.help-tip2 p{
	display: none;
	text-align: center;
	background-color: var(--bg-tooltip, #f8f8ff);
	padding: 8px;
	position: absolute;
	min-width: 515px ;
	border-radius: 5px;
	box-shadow: 3px 3px 3px var(--shadow-tooltip, rgba(0,0,0,0.1));
	left: -150px;
	color: var(--text-tooltip, black);
	font-size: 14px;
	line-height: 1.4;
	opacity: 1;
	z-index: 10001;
}

.help-tip2 p:before{
	position: absolute;
	content: '';
	width:0;
	height: 0;
	border:6px solid transparent;
	border-bottom-color:var(--bg-tooltip, #f8f8ff);
	right:10px;
	top:-12px;
	opacity: 0;
}

.help-tip2 p:after{
	width:100%;
	height:40px;
	content:'';
	position: absolute;
	top:-40px;
	left:0;
}

@-webkit-keyframes fadeIn {
	0% {
		opacity:0;
		transform: scale(0.6);
	}

	100% {
		opacity:100%;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:100%; }
}