.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  visibility: visible;
  font-size: 12px;
  line-height: 1.4;
  
}
.tooltip.in {
  
}
.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}
.tooltip.right {
  margin-left: 7px;
  padding: 0 5px;
  width: 195px;
}
.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}
.tooltip.left {
  margin-left: -7px;
  padding: 0 5px;
}
.tooltip-inner {
  max-width: 190px;
  padding: 12px 10px 12px 12px;
  text-decoration: none;
  font-weight:normal; 
  background-color: #fff;
  border-radius: 0px;
  border: 1px solid #888888;
  color:  #1F1F1F;
  font-size: 11px;
  -webkit-box-shadow: 0 5px 12px rgba(85, 85, 85, 0.52);
     -moz-box-shadow: 0 5px 12px rgba(85, 85, 85, 0.52);
          box-shadow: 0 5px 12px rgba(85, 85, 85, 0.52);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
  
  
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: -9px;
  margin-top: -7px;
  border: 7px solid transparent;
  border-right: 7px solid #888888;

}
.tooltip.right .tooltip-arrow::after {
    content: ''; 
    position: absolute;
    left: -5px; bottom: -7px;
    border: 7px solid transparent;
    border-right: 6px solid #fff;
   
   }
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: -9px;
  margin-top: -7px;
  
  border: 7px solid transparent;
  border-left: 7px solid #888888;
}
.tooltip.left .tooltip-arrow::after {
    content: ''; 
    position: absolute;
    right: -5px; bottom: -7px;
    border: 7px solid transparent;
    border-left: 6px solid #fff;
   
   }
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}