/* Container */
.tooltip-frame {
	position: absolute;
	z-index: 500;
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
	padding: 10px 15px;
	box-sizing: border-box;
	background: #fff;
	max-width: 300px;
	border-radius: 3px;
}

/* Pointer */
.tooltip-frame .tip {
	position: absolute;
	overflow: hidden;
}

.tooltip-frame .tip {
	margin-left: -14px;
}

.tooltip-frame.tooltip-bottom .tip {  top: -14px; }
.tooltip-frame.tooltip-top .tip { bottom: -14px; }

.tooltip-frame.tooltip-top .tip,
.tooltip-frame.tooltip-bottom .tip {
	width: 30px;
	height: 14px;
}

.tooltip-frame .tip:before {
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	background: #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.tooltip-frame.tooltip-top .tip:before {
	left: 5px;
	bottom: 8px;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);
}

.tooltip-frame.tooltip-bottom .tip:before {
	left: 5px;
	top: 8px;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);
}