@tooltip_background_color:rgba(69, 77, 85, 0.86);
@tooltip_border_color:rgba(0,0,0,0);
@tooltip_font_color:@white;
@tooltip_font_size:13px;
@tooltip_title_font_size:1.1em;

.tooltipped
{
  background-color: #ffffc0;
}
.simple_tooltip
{
  position: absolute;
  width: 150px;
  z-index: 10000;
  font-size: @tooltip_font_size;
  padding: 5px 10px;
  &_observer {
    cursor: help;
  }
  &_title{
    padding-top: 2px;
    padding-bottom: 1px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: @tooltip_title_font_size;
  }
}


.down_arrow_tip,
.top_arrow_tip {
  background: @tooltip_background_color;
  color: @tooltip_font_color;
  border: 0;
  border-radius: 2px;
}
.down_arrow_tip:after {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: @tooltip_border_color;
  border-top-color: @tooltip_background_color;
  border-width: 5px;
  left: 50%;
  margin-left: -5px;
}

.top_arrow_tip{
  width: 100px;
}
.top_arrow_tip:after {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.top_arrow_tip:after {
  border-color: rgba(111, 123, 136, 0);
  border-bottom-color: @tooltip_background_color;
  border-width: 5px;
  left: 50%;
  margin-left: -5px;
}

.arrow_tip_arrow_left:after{
  left: 8%;
}

.right_arrow_tip {
  color: @tooltip_font_color;
  border-radius: 4px;
  background-color: @tooltip_background_color;
  border: 0;
}
.right_arrow_tip:after, .right_arrow_tip:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.right_arrow_tip:after {
  border-color: @tooltip_border_color;
  border-left-color: @tooltip_background_color;
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
}
.right_arrow_tip:before {
  border-color: @tooltip_border_color;
  border-left-color: @tooltip_background_color;
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
}

.left_arrow_tip {
  color: @tooltip_font_color;
  border-radius: 4px;
  background-color: @tooltip_background_color;
  border: 0;
}
.left_arrow_tip:after, .left_arrow_tip:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.left_arrow_tip:before {
  border-color: @tooltip_border_color;
  border-right-color: @tooltip_background_color;
  border-width: 5px;
  top: 50%;
  left:-10px;
  margin-top: -5px;
}
