.wrapper-tooltip {
	cursor: help;
	position: relative;
}

	.wrapper-tooltip .tooltip {
		background: #ed145b;
		bottom: 190%;
		color: #000;
		display: block;
		left: 12px;
		opacity: 0;
		padding: 10px;
		pointer-events: none;
		position: absolute;
		top: inherit;
		width: calc(100% + 25px);
		-webkit-transform: translateY(10px);
		-moz-transform: translateY(10px);
		-ms-transform: translateY(10px);
		-o-transform: translateY(10px);
		transform: translateY(10px);
		-webkit-transition: all .25s ease-out;
		-moz-transition: all .25s ease-out;
		-ms-transition: all .25s ease-out;
		-o-transition: all .25s ease-out;
		transition: all .25s ease-out;
		-webkit-box-shadow: 2px 2px 6px rgb(0 0 0 / 28%);
		-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
		-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
		-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
		box-shadow: 2px 2px 6px rgb(0 0 0 / 28%);
	}

		/* This bridges the gap so you can mouse into the tooltip without it disappearing */
		.wrapper-tooltip .tooltip:before {
			bottom: -20px;
			content: " ";
			display: block;
			height: 20px;
			left: 0;
			position: absolute;
			width: 100%;
		}

		/* CSS Triangles - see Trevor's post */
		.wrapper-tooltip .tooltip:after {
			border-left: solid transparent 10px;
			border-right: solid transparent 10px;
			border-top: solid #ed145b 10px;
			bottom: -8px;
			content: " ";
			height: 0;
			left: 106px;
			margin-left: -13px;
			position: absolute;
			width: 0;
		}

#btn-nome-social {
	border: 1px solid #ed145b;
	background: transparent;
	color: #ed145b;
	padding: 0 9px;
	height: 28px;
	font-size: 12px;
	text-transform: uppercase;
	flex-grow: 1;
	margin-left: 15px;
}

#show-field-nome-social {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 50%;
	padding-right: 13px;
}

#field-nome-social {
	width: 100%;
}

#info-nome-social {
	position: absolute;
	z-index: 100000000;
	width: 40px;
	height: 40px;
	left: 100px;
	top: 5px;
	margin-left: 5px;
}

	#info-nome-social:after {
		content: '?';
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		font-family: 'Gotham HTF Medium';
		padding: 3px 7px;
		border-radius: 50%;
		color: #ed145b;
		border: 1px solid #ed145b;
		cursor: pointer;
		font-family: 'Gotham HTF Medium';
	}

	.label-nome-social {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

.tooltip-nome-social-mobile-active {
	opacity: 1 !important;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
}

@media (max-width: 414px) {
	#show-field-nome-social {
		width: 100%;
	}

	.wrapper-tooltip .tooltip {
		bottom: 215%;
	}
}