.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
      font-weight:bold; 
    cursor:crosshair;
}

.tooltip .tooltiptext {



    visibility: hidden;
    width: 280px;
    color:white;
    text-align:justify;
   
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 200%;
    left: 80%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
   -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
     border-radius: 0.5em;
     background-color: rgba(6, 33, 60, 0.9);

}



.tooltip .tooltiptext:after, .tooltip .tooltiptext:before {
   bottom: 100%;
	left: 17%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;



}



.tooltip .tooltiptext:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: rgba(6, 33, 60, 0.9);
	border-width: 20px;
	margin-left: -20px;

}

.tooltip .tooltiptext:before {
	border-color: rgba(194, 225, 245, 0);
	/*border-bottom-color: #c2e1f5;*/
	border-width: 26px;
	margin-left: -26px;

}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.tooltip .tooltiptext  a {
 color:white;
}

.tooltip .tooltiptext  .eventTitle {
    height:auto;
    font-weight:600;
    font-size:12px;
    line-height:14px;
    padding-bottom:3px;
    border-bottom:1px solid white;
    margin-bottom:3px;
}

.tooltip .tooltiptext  .eventName {
    height:auto;
    font-weight:300;
    font-size:12px;
    line-height:12px;
    list-style-type:decimal;
    padding-left:8px;
  
}

.tooltip .tooltiptext  .eventName a{
    padding-bottom:5px;
     display:block;
}
.tooltip .tooltiptext  .eventName li:hover *{
     color:rgb(255, 204, 0);
    }
.tooltip .tooltiptext div.content h1 {
  font-size: 16px;
  border-bottom: 1px solid #C4C4C4;
  padding-bottom: 5px;
}