.formatage_models_quickly_edit {
	display: flex;
	position: absolute;
	top: 0;
	left: 10px;
	color: #fff;
	background: rgb(255 255 255 / 10%);
	z-index: -9999;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	font-size: 2rem;
	transition: all 1s;
	opacity: 0;
}

.formatage_models_quickly_edit svg {
	width: 2.8rem;
	height: 2.8rem;
	fill: #0a4575;
}

 /**
  * On masque les sous elements.
  */
.contextual-region.edit-vuejs-hbk:hover .contextual-region.edit-vuejs-hbk  .formatage_models_quickly_edit{
	opacity: 0;	
}  

/**
 * On affiche uniquement le premier niveau, on masque les sous elements.
 * Pour tenir compte des differents cas, il nous faudra un marker specifique au niveau de la class .contextual-region
 * -
 * On affiche les sous elements si on est au hover.
 */
.contextual-region.edit-vuejs-hbk:hover> .formatage_models_quickly_edit, 
.contextual-region.edit-vuejs-hbk:hover> * > .formatage_models_quickly_edit,
.contextual-region.edit-vuejs-hbk .contextual-region.edit-vuejs-hbk:hover> .formatage_models_quickly_edit,
.contextual-region.edit-vuejs-hbk .contextual-region.edit-vuejs-hbk:hover> * > .formatage_models_quickly_edit
 {
	color: #4369a3;
	background: rgb(255 255 255 / 92%);
	z-index: 9999;
	cursor: pointer;
	opacity: 1;
	border: 1px solid rgb(239, 241, 247);
}

.contextual-region.edit-vuejs-hbk .contextual-region.edit-vuejs-hbk:hover> .formatage_models_quickly_edit,
.contextual-region.edit-vuejs-hbk .contextual-region.edit-vuejs-hbk:hover> * > .formatage_models_quickly_edit{
	top: 5rem;	
	z-index: 10001;
}

/**
 * Pour les elements inclues ont decalle.
 */
.contextual-region.edit-vuejs-hbk .contextual-region.edit-vuejs-hbk:hover >.formatage_models_quickly_edit {
	 top: 3rem;	 
	 background:rgb(243 243 243 / 92%);
	 z-index: 10000;
 }