/* Main stylesheet, 9 of 9: tooltips and spacing helpers (last, so they win). */

.tooltip-title {
	position: relative;
}

.tooltip-title:before {
	content: attr(data-title);
	position:absolute;
	
	/* vertically center */
	left:50%;
	transform:translateX(-50%);
	
	/* move to right */
	top:-40px;
	
	/* basic styles */
	width:250px;
	padding:10px;
	border-radius:10px;
	background:#000;
	color: #fff;
	text-align:center;
	z-index: 1;
	font-size: 14px;
	line-height: 1.2;
    font-weight: 400;

	opacity:0;
	transition:.4s opacity;
}

.tooltip-title:after {
	content: "";
	position:absolute;
	
	/* position tooltip correctly */
	left:50%;
	margin-left:-11px;

	/* vertically center */
	top:20px;
	transform:translateY(-50%);

	/* the arrow */
	border:10px solid #000;
	border-color: black transparent transparent transparent;
	z-index: 1;
	
	opacity:0;
	transition:.2s opacity; 
}

.tooltip-title:hover:before, .tooltip-title:hover:after, 
.tooltip-title:focus:before, .tooltip-title:focus:after {
	opacity:1;
}

.tooltip-title.left:before {
	/* reset defaults */
	left:initial;
	margin:initial;

	/* set new values */
	right:100%;
	margin-right:15px;
}

.tooltip-title.tooltip-relative:before {
	top: -45px;
}

.tooltip-title.tooltip-relative:after {
	top: 0px;
}

.p-0 {
	padding: 0 !important;
}

.pl-0 {
	padding-left: 0 !important;
}

.pt-0 {
	padding-top: 0 !important;
}

.pr-0 {
	padding-right: 0 !important;
}

.pb-0 {
	padding-bottom: 0 !important;
}

.m-0 {
	margin: 0 !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}