.tooltip {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

	.tooltip::after {
		font-family: var(--font-icon);
		font-weight: 300;
		content: "\f059";
		padding-left: 5px;
	}

	.tooltip.sync::after {
		content: "\f021";
	}

	.tooltip.lock::after {
		content: "\f023";
		color: var(--color-error);
	}

	.tooltip.check::after {
		content: "\f00c";
	}

.tooltip-bubble {
	position: fixed;
	padding: 8px 10px;
	background: var(--color-info);
	font-size: .9rem;
	line-height: 1.2rem;
	font-weight: 300;
	letter-spacing: normal;
	color: var(--color-info-reverse);
	border-radius: 10px;
	z-index: 999;
}

    .tooltip-bubble::after {
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid var(--color-info);
		content: " ";
		position: absolute;
		bottom: -10px;
		left: 20px;
	}