.baloon--top .baloon__triangle:after {
  z-index: -10;
}
.baloon-wrapper .baloon {
  z-index: 20;
}
.baloon--black .baloon__header {
  background-color: #4a4a4a;
  color: #f4f5f5;
}
.baloon__header {
  background-color: #388cbf;
  color: #f4f5f5;
}
.baloon--gray .baloon__header {
  background-color: #e2e8ec;
  color: #4a4a4a;
}
.baloon--green .baloon__header {
  background-color: #5ee6a5;
  color: #408665;
}
.baloon--orange .baloon__header {
  background-color: #ffbc89;
  color: #b5792b;
}
.baloon--purple .baloon__header {
  background-color: #d08bfa;
  color: #3f0658;
}
.baloon--red .baloon__header {
  background-color: #e32d2d;
  color: #ffe3e3;
}
.baloon--yellow .baloon__header {
  background-color: #fffba4;
  color: #7d7945;
}
.baloon__content {
  background-color: #fff;
  color: #949494;
}
.baloon-wrapper {
  position: relative;
}
.baloon__triangle {
  text-align: center;
}
.baloon__triangle,
.baloon__content,
.baloon__header {
  display: block;
}
.baloon__triangle:before,
.baloon--top .baloon__triangle:after {
  display: inline-block;
}
.baloon {
  visibility: hidden;
}
.baloon--visible,
.baloon-wrapper.baloon-wrapper--on-over:hover .baloon {
  visibility: visible;
}
.baloon {
  min-width: 380px;
  max-width: 380px;
  opacity: 0;
  transition: all 0.21s ease-out;
  transform: translateY(35%);
}
.baloon-wrapper .baloon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(35%);
  width: 100%;
}
.baloon__triangle {
  line-height: 0;
}
.baloon__triangle:before,
.baloon--top .baloon__triangle:after {
  border: 14px solid transparent;
  content: '';
}
.baloon--bottom .baloon__triangle:before {
  border-bottom-color: #388cbf;
}
.baloon--bottom.baloon--black .baloon__triangle:before {
  border-bottom-color: #4a4a4a;
}
.baloon--bottom.baloon--green .baloon__triangle:before {
  border-bottom-color: #5ee6a5;
}
.baloon--bottom.baloon--gray .baloon__triangle:before {
  border-bottom-color: #e2e8ec;
}
.baloon--bottom.baloon--orange .baloon__triangle:before {
  border-bottom-color: #ffbc89;
}
.baloon--bottom.baloon--purple .baloon__triangle:before {
  border-bottom-color: #d08bfa;
}
.baloon--bottom.baloon--red .baloon__triangle:before {
  border-bottom-color: #e32d2d;
}
.baloon--bottom.baloon--yellow .baloon__triangle:before {
  border-bottom-color: #fffba4;
}
.baloon__content {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 10px 10px -5px rgba(0,0,0,0.1);
  border: 1px solid #dfdfdf;
  border-top-width: 0;
  padding: 1em;
}
.baloon__header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 1em;
}
.baloon--top {
  bottom: 100%;
}
.baloon--top .baloon__triangle:before,
.baloon--top .baloon__triangle:after {
  margin-top: -1px;
}
.baloon--top .baloon__triangle:before {
  border-top-color: #fff;
}
.baloon--top .baloon__triangle:after {
  position: absolute;
  left: 50%;
  border-width: 16.8px;
  border-top-color: rgba(0,0,0,0.05);
  transform: translateX(-50%);
}
.baloon--top.baloon--black .baloon__triangle:before {
  border-top-color: #4a4a4a;
}
.baloon--top.baloon--gray .baloon__triangle:before {
  border-top-color: #e2e8ec;
}
.baloon--top.baloon--green .baloon__triangle:before {
  border-top-color: #5ee6a5;
}
.baloon--top.baloon--orange .baloon__triangle:before {
  border-top-color: #ffbc89;
}
.baloon--top.baloon--purple .baloon__triangle:before {
  border-top-color: #d08bfa;
}
.baloon--top.baloon--red .baloon__triangle:before {
  border-top-color: #e32d2d;
}
.baloon--top.baloon--yellow .baloon__triangle:before {
  border-top-color: #fffba4;
}
.baloon--visible,
.baloon-wrapper.baloon-wrapper--on-over:hover .baloon {
  opacity: 1;
  transform: translateY(0);
}
.baloon-wrapper .baloon--visible,
.baloon-wrapper .baloon-wrapper.baloon-wrapper--on-over:hover .baloon,
.baloon-wrapper.baloon-wrapper--on-over:hover .baloon {
  transform: translateX(-50%) translateY(0);
}