.tooltip, .arrow:after {
  
  opacity:0.9;
}

.tooltip {
  pointer-events: none;
  opacity: 0;
  display: inline-block;
  position: absolute;
  padding: 10px 20px;
  color: white; 
  margin-top: 20px;
  text-align: center;  
  font-family:Arial;
  text-decoration: none;
  font-size:16px;
  width:140px;
}
.arrow {
    bottom: 20px;
    height: 16px;
    left: -8%;
    overflow: hidden;
    position: absolute;
    width: 13px;
}

.arrow:after {
    box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
    content: "";
    height: 25px;
    position: absolute;
    right: -26px;
    top: -7px;
    transform: rotate(45deg);
    width: 25px;
}
.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;
}


.tooltip {
 
  background: rgba(213, 139, 81, 0.9);
  border: 4px solid #b66d31;
}
.tooltip:after, .tooltip:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.tooltip:after {
  border-color: rgba(213, 139, 81, 0);
  border-right-color: rgba(213, 139, 81, 0.9);;
  border-width: 10px;
  margin-top: -20px;
}
.tooltip:before {
  border-color: rgba(182, 109, 49, 0);
  border-right-color: #b66d31;
  border-width: 16px;
  margin-top: -26px;
}

.tooltip.a-purple{
 background: rgba(147,48,193,0.9) !important;
  border: 3px solid #5f207d ;
}
.tooltip.a-purple:before
{
    border-color:rgba(147,48,193,0) !important;
  border-right-color: #5f207d !important;
}
.tooltip.a-purple:after{
 background: rgba(147,48,193,0) !important;
   border-right-color: #9e44c7 !important;
}

.tooltip.a-green{
 background: rgba(170,196,47,0.9) !important;
  border: 3px solid #6a7a1d ;
}
.tooltip.a-green:before
{
    border-color:rgba(170,196,47,0) !important;
  border-right-color: #6a7a1d !important;
}
.tooltip.a-green:after{
 background: rgba(170,196,47,0) !important;
   border-right-color: rgba(170,196,47,0.9) !important;
}

.tooltip.a-blue{
 background: rgba(47,133,194,0.9) !important;
  border: 3px solid #215b87 ;
}
.tooltip.a-blue:before
{
    border-color:rgba(47,133,194,0) !important;
  border-right-color: #215b87 !important;
}
.tooltip.a-blue:after{
 background: rgba(47,133,194,0) !important;
   border-right-color: rgba(47,133,194,0.9) !important;
}