.ToolTip {
  cursor: help;
  white-space: nowrap;
  position: relative;
}

  .ToolTip img {
    vertical-align: middle;
  }

.ToolTipWrapper {
  width: 227px;
  position: absolute;
  top: 20px;
  display: none;
  color: #FFF;
}

.ToolTipTop {
  height: 32px;
  /*background: url(/imagenes/bubbleTop.png) no-repeat bottom;*/
  background-image: url(/imagenes/bubbleTop.png);
  background-repeat: no-repeat;
  background-position: bottom;
}

.ToolTipMid {
  padding: 0 12px;
  font: 13px Verdana,Helvetica,Arial,sans-serif;
  text-align: justify;
  background: url(/imagenes/bubbleMid.png);
}

.ToolTipBtm {
  height: 32px;
  background: url(/imagenes/bubbleBtm.png) no-repeat;
}

.ToolTipLista {
  margin: 0;
  list-style-type: none;
  padding-left: 1.5em;
}



.ToolTipTailTop {
  height: 21px;
  background-image: url(/imagenes/bubbleTailTopL.png);
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: bottom;
}

.ToolTipCornerLeftTop {
  height: 10px;
  width: 10px;
  display: table-cell;
  background-image: url(/imagenes/bubbleCorner.png);
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: top;
}

.ToolTipSide {
  height: 10px;
  width: 207px;
  display: table-cell;
  background-image: url(/imagenes/bubbleSide.png);
  background-repeat: repeat;
  background-position: center;
  /*background-size: cover*/
}

.ToolTipCornerRightTop {
  height: 10px;
  width: 10px;
  display: table-cell;
  background-image: url(/imagenes/bubbleCorner.png);
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: top;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.ToolTipCornerLeftBtm {
  height: 10px;
  width: 10px;
  display: table-cell;
  background-image: url(/imagenes/bubbleCorner.png);
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: bottom;
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.ToolTipCornerRightBtm {
  height: 10px;
  width: 10px;
  display: table-cell;
  background-image: url(/imagenes/bubbleCorner.png);
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: bottom;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.ToolTipTailBtm {
  height: 21px;
  background-image: url(/imagenes/bubbleTailBtmL.png);
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: top;
}



.ToolTipWrapper2 {
  max-width: 227px;
  position: absolute;
  border-radius: 10px;
  top: 20px;
  display: none;
  color: #FFF;
}

.ToolTipWrapper2.Top {
  box-shadow: 3px 3px 4px 0px #808080;
}

.ToolTipWrapper2.Btm {
  box-shadow: -3px 3px 4px 0px #808080;
}

  .ToolTipWrapper2 .Tail {
    position: absolute;
    height: 22px;
    width: 30px;
    background: #1870AD;
    box-shadow: inherit;
    /*transition: all 0.8s;*/
    z-index: -1;
  }

    .ToolTipWrapper2 .Tail.TailBtmR {
      bottom: 15px;
      left: 12px;
      transform: rotate(100deg) translate(18px) skewX(55deg);
    }

/*    .ToolTipWrapper2 .Tail.TailBtmR {
      top: 100%;
      left: 3%;
      transform: rotate(100deg) translate(-18px) skewX(55deg);
    }
*/
    .ToolTipWrapper2 .Tail.TailBtmL {
      bottom: 15px;
      right: 12px;
      transform: rotate(45deg) translate(18px) skewX(55deg);
    }

/*    .ToolTipWrapper2 .Tail.TailBtmL {
      top: 100%;
      left: 90%;
      transform: rotate(45deg) translate(-27px) skewX(55deg);
    }
*/
    .ToolTipWrapper2 .Tail.TailTopR {
      top: 15px;
      left: 15px;
      transform: rotate(45deg) translate(-18px) skewX(55deg);
    }

    .ToolTipWrapper2 .Tail.TailTopL {
      top: 15px;
      right: 10px;
      transform: rotate(100deg) translate(-18px) skewX(55deg);
    }

    .ToolTipWrapper2 .Tail.Center {
      left: 55%;
    }

.ToolTipMid2 {
  border-radius: 9px;
  padding: 12px 12px;
  font: 13px Verdana,Helvetica,Arial,sans-serif;
  text-align: justify;
  background: #1870AD;
  /*background: url(/imagenes/bubbleMid.png);*/
  z-index: 1;
}

.ToolTipMidError {
  color: #FF0011;
  border: 1px solid;
  border-color: #FF0011;
  /*border-radius: 9px;*/
  padding: 12px 12px;
  font: 13px Verdana,Helvetica,Arial,sans-serif;
  text-align: justify;
  background: #FECD2C;
  /*background: url(/imagenes/bubbleMid.png);*/
  z-index: 1;
}