/* Tutorials */
div.tutorial {
	position:relative;
	left:var(--margin-xs);
	top:-1px;
	height:15px;
	width:15px;
	display:inline-block;
	font-family: var(--font-logo);
	font-weight:900;
	font-size:11px;
	background-color:var(--dark);
	color:var(--white);
	border-radius:var(--radius-round);
	opacity:.6;
	cursor:pointer;
	transition:.5s;
	border:1px solid var(--white);
	outline:2px solid var(--light);
	line-height:15px;
	text-align:center;
	z-index:8000;
	}
	
	div.tutorial:hover {
		opacity:1;
		background-color:var(--color-support);
		}
	
	div.tutorial:after {
		content:"?";
		}
	
	div.tutorial_bubble {
		position: absolute;
		background-color:var(--color-support);
		color:var(--white);
		padding:var(--margin-m);
		padding-top:var(--margin-l);
		font-size:14px;
		border-radius:var(--radius-tight);
		border:none !important;
		box-shadow:var(--shadow);
		max-width:40vw;
		opacity: 0; /* Start hidden */
		transition: opacity 0.75s ease; /* Add transition for opacity */
		pointer-events: none; /* <-- Prevents tutorial from interfering with hover */
		z-index:22000; /* above everything */
		white-space:wrap;
		}
		
		div.tutorial_bubble:before { 
			content:"Tutorial" !important; 
			color:var(--white) !important; 
			content:" ";
			text-transform:uppercase;
			color:var(--darker);
			font-size:11px;
			position:absolute;
			top:var(--margin-m);
			left:var(--margin-m);
			line-height:0px;
			opacity:70%;
		}