.popup {
   cursor: pointer;
}

.popup:hover {
  border-radius: 6px;
  animation-name: round-boarder;
  animation-duration: 0.2s;
  border: 1px solid #555;
  cursor: pointer;
}

.popup .popuptext {
    visibility: hidden;
    width: 130px;
    background-color: #555;
    color: #fff;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
   
}

 .pop-right{
    top: -40%;
    left: 94%;
}

 .pop-left{
    top: -40%;
    left: -105%;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  width: 0; 
  height: 0; 
}

.pop-right::after {
  top: 40%;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid #555; 
}

.pop-left::after {
  top: 40%;
  left: 130px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-left:10px solid #555; 
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  opacity: 0.8;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 0.8;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:0.8 ;}
}


/* stats list */
.stats-list {
    list-style-type: solid; 
    margin:auto;
    padding:0px 10px 0px 20px; 
    text-align: left; 
    font-size: 12px;
}