.popup {
	position : fixed ;
	z-index : 200000 ;
	width:35vw ;
	background-color: #f0f0f0;
	top: 8em;
}

.popup.onRight {
	right : 1em ;
}

.foregroundPopup {
	position : fixed !important ;
	background-color: #EFEFEF;
	padding: 1em;
	border: 1px solid var(--basic-blue);
	top: 50vh;
	left: 50vw;
	transform: translate(-50%,-50%);
}

.shadowedPopup {
	box-shadow: 7px 7px 3px 3px #40404060 ;
}

.popup .popupTitle {
	height:1em; 
	padding-bottom:0.5em; 
	border-bottom:1px solid var(--basic-blue); 
	color : var(--basic-blue);  
}

.popup > .content {
	max-height : 40vh ;
	overflow-x : hidden ;
	overflow-y : auto ;
	white-space: nowrap;
}

.popup.reduced > ul, .popup.reduced > .content, .popup.reduced .btnReduce {
	display : none ;
} 

.popup:not(.reduced) .btnEnlarge {
	display : none ;
} 


.borderedArea {
	white-space : normal !important ;
	border : 1px solid #606060 ;
	border-radius : 1em ;
	padding : 1em ;
}

.centeredArea {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.popup ul {
	margin : 0 ;
	padding : 0 ;
	font-size : 12px;
}

.popup ul:not(.noSize) {
	max-height: calc(100vh - 20em) ;
	overflow: hidden auto;
}

.popup li {
	cursor : pointer ;
	white-space: nowrap;
	padding : 0.25em 0 ;
}

.popup li:hover {
	background-color : #0090C066 ;
}

.popup .rootsList {
  max-height: 80vh;
  overflow-x: hidden;
  overflow-y: auto;
}

#listVirtualRoots {
	width:auto ;
	max-width : 35em ;
	padding-top: 0.3em ;
}

#listVirtualRoots ul {
	padding : revert !important ;
	font-size:unset;
}

.popup .blason {
	height : 2em ;
}

.popup:not(.blasons) .blason:hover {
	transform : scale(4) ;
}
.popup .famille {
	font-weight: 900;
}
.popup .localisation {
	font-weight: 200;
}

.popup .devise {
	font-variant: small-caps;
	font-size: 80%;
}
.popup .source {
	font-size: 10px;
}
.popup tr:nth-child(2n) {
	background-color : #E0E0E0 ;
}

.popup td {
	vertical-align:top ;
	padding-top : 4px ;
}

.popup.blasons {
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%,-45%);
}

.popup td.blason {
	text-align : center ;
}
.popup td.nb {
	text-align : right ;
	padding-right : 0.5em ;
	cursor : pointer ;
	text-decoration:underline;
	color : blue ;
}

.blasons img.blason:hover {
  transform: scale(6);
  transform-origin: top left;
}