/* gen.css
pour les images : https://iconarchive.com/show/windows-8-icons-by-icons8/Data-List-icon.html
https://iconarchive.com/search?q=center
*/
body {
	background-color:#DDD;
	font-size:1.5em;
}
h3 {
	margin-bottom: 0.7rem;
	margin-top: 1rem;
}
p {
	font-style: italic;
}
div.pframe {
	display:inline-block;
	border:solid black 1px;
	margin:0.2em;
	padding:0.2em;
	text-align: center;
	font-size:0.6em;
	width:32;
	background-color:#b7b7b7;
	/*overflow: hidden;*/
}
div.pframeF {
	background-color:#FAA;
}
div.pframeM {
	background-color:#AAF;
}
div.pframeNULL {
	border:solid transparent 1px;
	background-color:transparent;
}
div.pframeWed {
	display:inline-block;
	margin: 0 -0.2em;
	z-index:5;
	width:10px;
	position:relative;
	font-size:0.6em;
}
div.pframes {
	text-align: center;
}
div.pframesOut {
	text-align: left;
	padding: 3em 0.1em;
}
div.pframesRow {
	/*width:3000px;*/
	white-space: nowrap;
	/*width:auto;/*overflow: scroll;*/
}
div.pNmPnm {
	width: 100%;
}
div.suppl {
	white-space: normal;
}
div.pselect {
	background-color:white;
}
canvas.pcanvas {
	/*border:1px solid #c3c3c3;*/
}
div.footer {
	padding:1em;
	text-align: center;
}
img.menuicon {
	margin:5%;
	width:5em;
	max-width:20%;
}
img.inlineicon {
	height: 1.5em;
}
.error {
	color:red;
}


/* stooltip = simple tooltip  
https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden
<div class="container">
  
  <a class="has-tooltip" href="#">Hover me for Tooltip
      <span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla. Vestibulum quis porta tellus. Curabitur non blandit metus. Vestibulum nec nisi quis urna tempor pharetra. Phasellus volutpat, arcu ac malesuada porttitor, erat diam facilisis ligula, eget aliquet nibh augue.
    </div>
  <div>
*/
 .xcontainer {
  overflow: hidden;
  /*position: relative;*/
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
}
.xhas-tooltip {
  /*position: relative;*/
  display: inline;
}
.xtooltip-wrapper {
  position: absolute;
  visibility: hidden;
}
.xhas-tooltip:hover .tooltip-wrapper {
  visibility: visible;
  opacity: 0.7;
  /*top: 30px;*/
  /*left: 50%;*/
  /*margin-left: -76px;*/
  /* z-index: 999; defined above with value of 5 */
}

.xtooltip {
  display: block;
  position: relative;
    top: 2em;
    right: 100%;
  width: 140px;
  height: 96px;
  /*margin-left: -76px;*/
  color: #FFFFFF;
  background: #000000;
  line-height: 96px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 4px 3px 10px #800000;
}
.xtooltip:after {
  content: '';
  position: absolute;
    bottom: 100%;
    left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}


.stooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.stooltip .stooltiptext {
  visibility: hidden;
  min-width: 250px;
  max-width: 500px;
  background-color: #cdd;
  color: #222;
  text-align: left;
  font-size: 0.9em;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 10;
  bottom: 115%;
  left: 50%;
  margin-left: -34px;
  margin-bottom: -5px;
  opacity: 0;
  transition: opacity 0.3s;
}

.stooltip .stooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 34px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.stooltip:hover .stooltiptext {
  visibility: visible;
  opacity: 1;
}