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

/* Tooltip text right*/
.tooltip .tooltiptext {
	visibility: hidden;
	width: max-content;
	background-color: var(--grey-theme-color);
	color: #fff;
	text-align: center;
	padding: 0.6em 1em;
	border-radius: var(--border-radius);

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	top: -2%;
	left: 0%;
	margin-left: 3em;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.4s;
}

/* Tooltip arrow when tooltip is right*/
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 35%;
	right: 100%;
	margin-right: 5px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent var(--grey-theme-color) transparent transparent;
}

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

/* Tooltip text left*/
.tooltip .tooltiptextleft {
	visibility: hidden;
	width: max-content;
	max-width: 50vw;
	background-color: var(--grey-theme-color);
	color: #fff;
	text-align: center;
	padding: 1em;
	border-radius: var(--border-radius);

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	top: -25%;
	right: 50%;
	margin-right: 3.1rem;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.4s;
}

/* Tooltip arrow when tooltip is left*/
.tooltip .tooltiptextleft::before {
	content: "";
	position: absolute;
	top: 40%;
	left: 100%;
	margin-left: 5px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent transparent var(--grey-theme-color)  ;
}