.balloon
{
  position: absolute;
  margin-top: 6px;
  padding: 8px 16px 8px 10px;
  min-height: 1em;
  min-width: 300px;
  background-color: white;
  background-color: rgba(255, 255, 255, .95);
  border: 1px solid #e6e9ed;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(46, 53, 62, .11);
  /*pointer-events: none;*/
  font-family: Tahoma, Verdana, Arial, sans-serif;
}
.tail
{
  position: absolute;
  width: 15px;
  height: 6px;
  overflow: hidden;
}
.tail:after
{
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  -webkit-transform: translateX(5px) rotate(45deg);
  transform: translateX(5px) rotate(45deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  background-color: white;
  border: 1px solid #e6e9ed;
  box-shadow: 1px 1px 6px rgba(46, 53, 62, .11);
}
.tail_v-left-bottom:after,
.tail_v-center-bottom:after,
.tail_v-right-bottom:after
{
  position: absolute;
  bottom: 7px;
  -webkit-transform: translateX(8px) rotate(45deg);
  transform: translateX(8px) rotate(45deg);
}

.balloon_v-left-top,
.balloon_v-left-bottom
{
  margin-left: -38px;
}
.balloon_v-left-bottom
{
  margin-bottom: 5px;
}
.balloon_v-right-top,
.balloon_v-right-bottom
{
  margin-right: -13px;
}
.balloon_v-center-top,
.balloon_v-center-bottom
{
  /* todo? */
}

.tail_v-center-top,
.tail_v-center-bottom
{
  left: 50%;
  margin-left: -7px;
}
.tail_v-left-top,
.tail_v-left-bottom
{
  left: 36px;
}
.tail_v-right-top,
.tail_v-right-bottom
{
  right: 12px;
  margin-right: -7px;
}

.tail_v-left-top,
.tail_v-center-top,
.tail_v-right-top
{
  top: -6px;
}
.tail_v-left-bottom,
.tail_v-center-bottom,
.tail_v-right-bottom
{
  bottom: -8px;
  width: 20px;
  height: 8px;
}
.flow
{
  max-height: 500px;
  max-width: 800px;
  overflow: scroll;
  padding: 8px;
  box-sizing: border-box;
}
