/*Tooltip container*/
.tooltip {
  position:relative;
  display:inline-block;
}

/*Tooltip text*/
.tooltip .tooltiptext {
  color:#fff;
  z-index:99;
  padding:5px;
  font-size:14px;
  font-weight:normal;
  min-width:120px;
  visibility:hidden;
  text-align:center;
  border-radius:6px;
  border:solid 2px var(--accent);
  background-color:#000;

  /*Position the tooltip text*/
  left:50%;
  bottom:125%;
  position:absolute;
  margin-left:-60px;
}

/*Tooltip arrow*/
.tooltip .tooltiptext::after {
  top:100%;
  left:50%;
  content:"";
  margin-left:-5px;
  border-width:5px;
  position:absolute;
  border-style:solid;
  border-color:var(--accent) transparent transparent transparent;
}

/*Show the tooltip text when you mouse over the tooltip container*/
.tooltip:hover .tooltiptext {
  opacity:1;
  visibility:visible;
}