.tooltip {
  position: relative;
}

.tooltip > .tooltip-text {
  display: none;
  font-size: 14px;
  background-color: rgba(76, 175, 80, 80%); /* #4caf50 */
  color: white;
  padding: 7px;
  border-radius: 3px;
  position: absolute;
  white-space: pre;
  font-weight: normal;
  line-height: initial;

  /* point the tooltip to its target */
  left: 50%;

  /* float the tooltip above its target */
  z-index: 10;
  bottom: calc(100% + 8px);

  /* shorten the text when it is too much
     do not clip, as it also clips the arrow
     overflow: hidden; */
  max-width: 500px;
  text-overflow: ellipsis;
}

.tooltip > .tooltip-text-bottom-left {
  text-align: left;
  transform: translate(-5%, 0);
}

.tooltip > .tooltip-text-error-bottom-left {
  text-align: left;
  transform: translate(-5%, 0);
  background-color: red;
  font-weight: bold;
}

.tooltip > .tooltip-text-bottom-center {
  text-align: center;
  transform: translate(-50%, 0);
}

.tooltip > .tooltip-text-bottom-right {
  text-align: right;
  transform: translate(-95%, 0);
}

.tooltip > .tooltip-text-fab {
  text-align: right;
  transform: translate(-163px, 52px);
}

.tooltip:hover {
  /* only slightly darker than 'whitesmoke(#f5f5f5)' */
  background-color: #e0e0e0;
}

.tooltip:hover > .tooltip-text {
  display: initial;
}

pre.output .tooltip > .tooltip-text {
  background-color: rgba(76, 175, 80, 80%); /* #4caf50 */
}

pre.output .tooltip:hover {
  /* only slightly lighter than '#272727' */
  background-color: #484848;
}

/* The arrow/triangle of the tooltip */

.tooltip > .tooltip-text::after {
  font-size: 8px;
  content: " ";
  position: absolute;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  top: 100%;
  border-color: rgba(76, 175, 80, 80%) transparent transparent transparent;
}

.tooltip > .tooltip-text-logo {
  left: 110px;
  top: -5px;
  height: calc(150% - 5px);
}

.tooltip > .tooltip-text-logo::after {
  /* hide the tooltip pointer */
  display: none;
}

.tooltip > .tooltip-text-fab::after {
  /* hide the tooltip pointer */
  display: none;
}

.tooltip > .tooltip-text-bottom-left::after {
  left: calc(5% - 2.5px);
}

.tooltip > .tooltip-text-error-bottom-left::after {
  left: calc(5% - 2.5px);
  border-color: red transparent transparent;
}

.tooltip > .tooltip-text-bottom-center::after {
  left: calc(50% - 2.5px);
}

.tooltip > .tooltip-text-bottom-right::after {
  left: calc(95% - 2.5px);
}

pre.output .tooltip > .tooltip-text::after {
  border-color: rgba(76, 175, 80, 80%) transparent transparent transparent; /* #4caf50 */
}