.tooltip-container {
  position: relative;
}
.tooltip-container:hover .tooltip {
  opacity: 1;
  margin-top: calc(0.4em + 6px);
  visibility: visible;
}
.tooltip-container .tooltip {
  padding: 0 .5em;
  position: absolute;
  top: 100%;
  margin-top: -.7em;
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: 0.25s ease-in-out all;
  color: #414b60;
  background: #ced4da;
  white-space: nowrap;
  line-height: 2em;
  text-transform: none;
  font-weight: normal;
  font-family: inherit;
}
.tooltip-container .tooltip:not(.left) {
  left: 50%;
  margin-left: calc(-1.2em - 4px);
}
.tooltip-container .tooltip:not(.left)::after {
  left: 1em;
}
.tooltip-container .tooltip.left {
  right: 50%;
  margin-right: calc(-1.2em - 4px);
}
.tooltip-container .tooltip.left::after {
  right: 1em;
}
.tooltip-container .tooltip::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: calc(-.2em - 4px);
  border-left: calc(.2em + 4px) solid transparent;
  border-right: calc(.2em + 4px) solid transparent;
  border-bottom: calc(.2em + 4px) solid #ced4da;
}