.tooltip, .arrow:after {
    background: rgb(136, 135, 133);
    border: 2px solid white;
  }
  
  .tooltip {
    pointer-events: none;
    opacity: 0;
    display: inline-block;
    position: absolute;
    padding: 10px 20px;
    color: black;
    border-radius: 20px;
    margin-top: 20px;
    text-align: center;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    font-stretch: condensed;
    text-decoration: none;
    box-shadow: 0 0 7px rgb(136, 135, 133);
    z-index: 999;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    -webkit-box-shadow: 6px 5px 9px -9px rgb(136, 135, 133),
                        5px 6px 9px -9px rgb(136, 135, 133);
    -moz-box-shadow: 6px 5px 9px -9px rgb(136, 135, 133),
                     5px 6px 9px -9px rgb(136, 135, 133);
    box-shadow: 6px 5px 9px -9px rgb(136, 135, 133),
                5px 6px 9px -9px rgb(136, 135, 133);
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
  }
  .tooltip.active {
    opacity: 1;
    margin-top: 5px;
    -webkit-transition: all 0.2s ease;
    -moz-transition:    all 0.2s ease;
    -ms-transition:     all 0.2s ease;
    -o-transition:      all 0.2s ease;
  }
  .tooltip.out {
    opacity: 0;
    margin-top: -20px;
  }