.info_tooltip {
	position: relative;
	display: inline-block;
}
div.info_tooltip {
	display: block;
}

.info_tooltip .content {
	position: absolute;
	max-width: 280px;
	width: max-content;
	z-index: 10;
	background-color: #272e2b;
	padding: 15px 20px;
	color: white;
	line-height: 1.5em;
	font-size: 14px;
	border-radius: 5px;
	right: 0;
	bottom: 27px;
	display: none;
}

.info_tooltip .content.left_pos {
	right: auto;
	left: 0;
}

.info_tooltip .content::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 30px;
	bottom: -30px;
	right: 0;
}

.info_tooltip .fa {
	font-size: 1.3em;
    margin-left: 5px;
    cursor: pointer;
}

.info_tooltip:hover .content,
.info_tooltip.active .content {
	display: block;
}

.disabled .info_tooltip .content {
	display: none;
}

.info_tooltip .content ul {
	margin-left: 20px;
}
.info_tooltip .content ul li {
	padding: 5px 0px;
    line-height: 1.3em;
}
.info_tooltip .content ul li::before {
	margin-left: -19px;
}

.info_tooltip.pos_top_left .content {
	top: 5px;
	left: 0;
	right: auto;
	bottom: auto;
}

.info_tooltip .content a:hover {
	color: inherit;
	text-decoration: underline;
}


@media( max-width: 500px ){
	.info_tooltip {
		position: static;
	}
	.info_tooltip .content {
		right: 20px!important;
		left: auto!important;
		bottom: auto;
		margin-top: 28px;
		max-width: calc( 100% - 40px );
	}
}