.help-tip {
	z-index: 100;

	display: inline-block;
	position: relative;
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;

	width: 24px;
	height: 24px;

	font-size: 14px;
	line-height: 26px;

	cursor: default;

	&:before {
		content:'?';
		font-weight: bold;
		color:#fff;
	}

	&:hover {
		p {
			display:block;
			transform-origin: 100% 0%;

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

	p {
		display: none;
		text-align: left;
		background-color: #1E2021;
		padding: 20px;

		width: 400px; /* fallback */
		width: max-content;

		position: absolute;
		border-radius: 3px;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
		color: #FFF;
		font-size: 13px;
		line-height: 1.4;


		&:before {
			position: absolute;
			content: '';
			width:0;
			height: 0;
			border:6px solid transparent;
			border-bottom-color:#1E2021;
			top:-12px;
		}

		&:after {
			width:100%;
			height:40px;
			content:'';
			position: absolute;
			top:-40px;
			left:0;
		}
	}

	&.tip-left {
		p {
			right: -4px;

			&:before {
				right: 10px;
			}
		}
	}
	&.tip-right {
		p {
			left: -4px;

			&:before {
				left: 10px;
			}
		}
	}

	&.tip-center {
		p {
			left: 50%;
			transform: translate(-50%, 0);

			&:before {
				right: calc(50% - 5px);
			}
		}
	}

	&.tip-small {
		width: 16px;
		height: 16px;

		font-size: 12px;
		line-height: 18px;
	}
}

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

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

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