/* SAFARI
 To work in Safari touch screen, the element (or its ancestor) must have an onclick.
 this can even be on the body
*/

/* see https://www.w3schools.com/css/css_tooltip.asp
// to change the colors
// add the following AFTER including this file 
// <style>
//   :root {
//     --maf_tooltip-background: blue;
//     --maf_tooltip-text: yellow;
//	   --maf_tooltip-zindex: var(--maf_Z_MAX, 16777271);
//   }
// </style>
// 
// to make the tooltip hold indefinitely, use maf_tooltip-hold
// left and right = maf_tooltip-left, maf_tooltip-right (can combine with maf_tooltip-hold)
*/
:root {
  --maf_tooltip-background: red;
  --maf_tooltip-text: white;
  --maf_tooltip-zindex: var(--maf_Z_MAX, 16777271);

}

@-webkit-keyframes maf_fadeInHold {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes maf_fadeInHold {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes maf_fadeIn {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
   100% { opacity: 0; }
}

@-webkit-keyframes maf_fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

@keyframes maf_fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}


/* Tooltip containers */
[class*="maf_tooltip"] {

	position: relative;
	display: inline;
	pointer-events:auto;
/*  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}



[class*="maf_tooltip"] span:first-of-type {

 	display:none;
	pointer-events:none!important;
		  
  	width:auto;
  	min-width:150px;
	max-width:300px;
	height:auto;
	margin:0 0!important;
	
	white-space:normal;

	text-align: center;
	padding: 5px 10px 5px 10px;
	border-radius: 6px;
  
    color: var(--maf_tooltip-text);
  	background-color: var(--maf_tooltip-background);

	position: absolute;
	/*	center the text beneath */
	top: 100%;
	left:50%; 
	transform: translateX(-50%);
	right: auto;

	z-index: 16777271;
	z-index: var(--maf_tooltip-zindex);
}

/* clear the location settings for sub classes */

/* :not([class~="maf_tooltip-hold"]) */
[class*="maf_tooltip-"] span:first-of-type {

/*	left: auto;
	right: auto;
	transform: none; 
*/
}

/* Show the tooltip text when you mouse over the tooltip container */
@media (hover: hover) {
[class*="maf_tooltip"]:hover span:first-of-type {
	
	display:inline;
    
    animation-name:maf_fadeIn;
    animation-duration: 5s;
    animation-iteration-count: 1;
 /*   animation-fill-mode: forwards; */
    
}

[class~='maf_tooltip-hold']:hover span:first-of-type {
	
	display:inline;

    animation-name:maf_fadeInHold;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
   /* background-color:blue; */
}




[class~='maf_tooltip-hold']:active span:first-of-type {
	
	display:inline;

    animation-name:maf_fadeInHold;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  
   /* background-color:blue; */

}
}


.maf_tooltip-left span:first-of-type {

	left: auto;
	right: auto;
	transform: none; 

	top:50%;
	transform: translateY(-50%);
	right: 105%;  /* left */
}

.maf_tooltip-right span:first-of-type {

	left: auto;
	right: auto;
	transform: none; 

	top:50%;
	transform: translateY(-50%);
	left: 105%; /* right */

}

.maf_class-fade-in {

	display:inline!important;
    
    animation-name:maf_fadeIn;
    animation-duration: 5s;
    animation-iteration-count: 1;
    background-color:green!important;
    animation-fill-mode: forwards;

}

/* Show the tooltip text when tooltip container becomes active */
@media (hover: none) {
	[class*="maf_tooltip"]:active span:first-of-type {
	
		display:inline!important;
    
  	  	animation-name:maf_fadeIn!important;
  	  	animation-duration: 5s!important;
   	 	animation-iteration-count: 1!important;
    	animation-fill-mode: forwards!important;
    
  /*  	background-color:yellow!important; */
    
	}
}

.maf_tooltiptext::after {
  content: " ";
  position: absolute;
  top:1em;
  right: 100%; /* To the left of the tooltip */
  border-left: 50px;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;

  border-top-color: transparent;
  border-right-color: var(--maf_tooltip-background);
  border-bottom-color: transparent;
  border-left-color: transparent;
}