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

.has-popover, .has-tooltip {
	.link-style();
	cursor: help;
	border-bottom: 1px solid @third-site-light-color;
}
.has-tooltip{
  border-bottom-style: dotted;
}

  // Base class
.tooltip {
  position: absolute;
  z-index: 10;
  display: block;
  .reset-text();
  font-family: @subtitles-font-family;
  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;
  //font-family: @subtitles-font-family;
  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;
  .reset-text();
  font-family: @subtitles-font-family;
  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;
  }
}
.popover-content {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  &.hidden{
    display: none;
  }
  img {
    margin-bottom: 8px;
  }
}

// Arrows
//
// .arrow is outer, .arrow:after is inner

.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: -3px;
    &:after {
      content: " ";
      border-width: @tooltip-arrow-width @tooltip-arrow-width 0 0;
      border-top-color: @tooltip-arrow-color;
    }
  }
  &.right > .arrow {
    top: 50%;
    left: -10px;
    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: -3px;
      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: -3px;
    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;
    }
  }
}