@tooltip-arrow-width:7px;
@tooltip-bg: #404040;
@tooltip-arrow-color: @tooltip-bg;

.has-popover, .has-tooltip {
	cursor: help;
	.transition(~"color .3s ease, border-color .3s ease");
}
.has-tooltip{
	border-bottom: 1px dashed;
	word-spacing: -2px;
}
.popover-bg{
    padding-left: 7px;
    padding-top: 3px;
    padding-bottom: 5px;
    padding-right: 7px;
    word-spacing: 0px;
	border-radius: 0px;
}

// Base class
.tooltip {
	position: absolute;
	z-index: 10;
	display: block;
	background: @tooltip-bg;
	.opacity(0);

	&.fade {
		opacity: 0;
		-webkit-transition: opacity .25s linear;
		-o-transition: opacity .25s linear;
		transition: opacity .25s linear;
	}

	&.in     { .opacity(1); }
	&.top    { margin-top:  -3px; }
	&.right  { margin-left:  3px; }
	&.bottom { margin-top:   3px; }
	&.left   { margin-left: -3px; }
	
}

// Wrapper for the tooltip content
.tooltip-inner {
	max-width: 600px;
	padding: 4px 15px;
	font-size: 12px;
	line-height: 1.5;
	color: #fff;
	text-align: center;
	background-color: @tooltip-bg;
}

// Arrows
.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}


.tooltip {
	&.top .tooltip-arrow {
		bottom: -@tooltip-arrow-width;
		left: 50%;
		margin-left: -@tooltip-arrow-width;
		border-width: @tooltip-arrow-width @tooltip-arrow-width 0 0;
		border-color: @tooltip-arrow-color transparent transparent transparent;
	}
	&.right .tooltip-arrow {
		top: 50%;
		left: -@tooltip-arrow-width;
		margin-top: -@tooltip-arrow-width;
		border-width: 0 0 @tooltip-arrow-width @tooltip-arrow-width;
		border-color: transparent transparent @tooltip-arrow-color transparent;
	}
	&.left .tooltip-arrow {
		top: 50%;
		right: -@tooltip-arrow-width;
		margin-top: -@tooltip-arrow-width;
		border-width: @tooltip-arrow-width 0 0 @tooltip-arrow-width;
		border-color: transparent transparent transparent @tooltip-arrow-color;
	}
	&.bottom .tooltip-arrow {
		top: -@tooltip-arrow-width;
		left: 50%;
		margin-left: -@tooltip-arrow-width;
		border-width: @tooltip-arrow-width 0 0 @tooltip-arrow-width;
		border-color: transparent transparent transparent @tooltip-arrow-color;
	}
}

//
// Popovers
// --------------------------------------------------


.popover {
	position: absolute;
	padding: 11px;
	z-index: 10;
	top: 0;
	left: 0;
	display: none;
	max-width: 650px;
	background-color: @tooltip-bg;
	background-clip: padding-box;

	// Offset the popover to account for the popover arrow
	&.top     { margin-top: -@tooltip-arrow-width; }
	&.right   { margin-left: @tooltip-arrow-width; }
	&.bottom  { margin-top: @tooltip-arrow-width; }
	&.left    { margin-left: -@tooltip-arrow-width; }

	&.fade {
		opacity: 0;
		-webkit-transition: opacity .25s linear;
		-o-transition: opacity .25s linear;
		transition: opacity .25s linear;
	}
	&.fade.in{
		opacity: 1;
	}
	&.fadeOut{
		opacity: 0 !important;
	}
}
.popover-content {
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: #fff;
	&.hidden{
		display: none;
	}
	img {
		margin-bottom: 8px;
	}
}

// Arrows
//

.popover > .arrow {
	&,
	&:after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
	}
}

.popover {
	&.top > .arrow {
		left: 50%;
		margin-left: -@tooltip-arrow-width;
		bottom: 0px;
		&:after {
			content: " ";
			border-width: @tooltip-arrow-width @tooltip-arrow-width 0 0;
			border-top-color: @tooltip-arrow-color;
		}
	}
	&.right > .arrow {
		top: 50%;
		left: -7px;
		margin-top: -@tooltip-arrow-width;
		&:after {
			content: " ";
			border-width: 0 0 @tooltip-arrow-width @tooltip-arrow-width;
			border-color: transparent transparent @tooltip-arrow-color transparent;
		}
	}
	&.bottom > .arrow {
		left: 50%;
		margin-left: -@tooltip-arrow-width;
		top: -@tooltip-arrow-width;
		&:after {
			content: " ";
			top: 0px;
			margin-left: -@tooltip-arrow-width;
			border-width: @tooltip-arrow-width 0 0 @tooltip-arrow-width;
			border-color: transparent transparent transparent @tooltip-arrow-color;
		}
	}

	&.left > .arrow {
		top: 50%;
		right: -0px;
		margin-top: -@tooltip-arrow-width;
		&:after {
			content: " ";
			border-width: @tooltip-arrow-width 0 0 @tooltip-arrow-width;
			border-color: transparent transparent transparent @tooltip-arrow-color;
			bottom: -@tooltip-arrow-width;
		}
	}
}