/* Tooltip container */
	.tooltip {
		position: relative;
		display: inline-block;
		border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	}
	
	/* Tooltip text */
	.tooltip .tooltiptext {
		visibility: hidden;
		width: 300px;
		background-color: #f8ffc6;
		color: black;
		text-align: left;
		padding: 9px;
		border: 2px solid #1C57BF;
		border-radius: 10px;
		margin-left: auto;
		margin-right: auto;
		align-self: auto;
		position: fixed;
		z-index: 1;
	    left: 50%;
	    top: 50%;
			-moz-transform:translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
	}
	
	/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
		visibility: visible;
	}