/***********************************************************************************************************
*
*  Editor Custom Color Palette [REV:3.2] 

*  1.  STYLE BACK OFFICE PLUGIN
*  2.  Table des Matières
*  3.  Scroll avec des ancres de navigation sous une page Gutenberg
*  4.  Bouton retour vers le haut
*  5.  Champ input du slug de le palette de couleurs  
*  6.  Bouton Download 
*  7.  Bouton Démo du plugin    
*  8.  Soulignement du texte  
*  9.  Composant TabPanel pour le Block Espacement & Groupe
*  10. Page d'administration des blocs Réutilisables 
*  11. ÉCRAN PAGE & ARTICLE & CPT & MÉDIATHÈQUE & MODIFICATION RAPIDE .....
*  12. SIDEBAR LATÉRALE PANNEAU DES PARAMÈTRES DU BLOC  
*  13. COMPOSANT IconPicker Dashicon 
* 
***********************************************************************************************************



/*----------------------------------------------------------------------------------------
		                STYLE BACK OFFICE PLUGIN
/*---------------------------------------------------------------------------------------*/

	
/* Style Page de réglages du plugin */

/* Container onglets de paramètres 
 on aurait aussi pu utiliser la classe postbox de WordPress*/
.eccp-tab-content{
	position: relative;
    min-width: 255px;
	border: 1px solid #c3c4c7;
    margin-top:30px;
	margin-bottom:20px;
    padding: 15px;
	background:#FFFFFF;
	box-shadow:0 1px 1px rgb(0 0 0 / 4%);
}

/* titre H1 des pages de réglages du plugin */
.toplevel_page_eccp_settings_page h1 {
		  
		font-size:26px;
		font-weight:600;
		margin-bottom:20px
		
}
	  

/* titre des sections */ 
.toplevel_page_eccp_settings_page h2 {
		  
		color: #135E96!important;
		font-weight:700;
		font-size:1.7em;
		
}

	  
/* titre H3 des pages de réglages du plugin */
.toplevel_page_eccp_settings_page h3 {   
		font-size: 1.5em;	
		margin-top:70px;
}


/* titre H4 des pages de réglages du plugin */
.toplevel_page_eccp_settings_page h4 {   
		font-size: 1.3em;	
		margin-top:30px;
		margin-bottom:0;
		font-weight:500;
}

/* la balise u  a l'intérieur de la balise H3 permet de souligner le titre sans dépassement */
.toplevel_page_eccp_settings_page u {
    text-decoration: none;
    background: linear-gradient(180deg,transparent 75%,rgba(25,133,255,0.3) 0);
}​
  
  
/* pour les formulaires des sections contenant les champs de réglages 
   amélioration du responsive */
.toplevel_page_eccp_settings_page form {
		padding:10px;
}
	
/* pour les textes d'intro des Pages */

.bloc-intro {
	
	background-color: rgba(143, 182, 63, 0.51);
	border-left: 4px solid rgba(143, 182, 63, 0.3);
	border-radius: 4px;
	padding: 10px 10px 10px 10px;
	font-size:16px;
	width:72%;
	line-height: 1.6em;
	
}

/* pour les mobiles en mode portrait */
@media (max-width:480px) {

	.bloc-intro {
		width:90%!important;	
	}
	
}

/* pour les textes d'intro des sections */
.mise-en-avant {
	
	 border-left: 4px solid rgba(243,112,32,0.7);
	 background-color:rgba(243,230,114,0.7)!important;
	 border-radius:4px;
	 padding:1.1em;
	 margin:1.1em;
	 font-size: 14px;
	 width:35%;
	 
}

/* effet ombré inférieur pour les tables qui contiennent les sections de réglages */
/* régle css avec avec WordPress en langue anglaise(3 classes) puis en langue française (2 classes) 
.toplevel_page_eccp_settings_page table { 
	box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.5);
}
*/


/* Règles Pour les mobiles et tablette */ 
@media only screen and (max-width:768px){
	
	.toplevel_page_eccp_settings_page img {
		width: 60%;
		height:auto;
		margin:20px;
	
	}
	
}


/* Règles Pour les mobiles en mode portrait*/ 
@media only screen and (max-width:480px){
	
	body.toplevel_page_eccp_settings_page div.container {
		float:none!important;
		width: 100%!important;
		max-width: 320px;
	}
	
	/* Blocs d'introduction */
	.toplevel_page_eccp_settings_page .bloc-intro {
		width: 100%;
	}
	
	/* Blocs mise en avant */
	.toplevel_page_eccp_settings_page div.mise-en-avant {
		width: 85%!important;
		max-width: 290px;
		margin:0px 0px 20px 0px;
	}

	
	/* Images */
	.toplevel_page_eccp_settings_page img:not(#upload_image_src) {
		display:inline-block!important;
		width: 100%;
		max-width: 320px;
		height:auto;
		margin: 0px 0px 0px 10px;
	}
	
	.toplevel_page_eccp_settings_page img#upload_image_src {
		width:10%;
	}
	
	/* Légende */
	.toplevel_page_eccp_settings_page figcaption {
		width: 100%;
		max-width: 320px;
	}
	
	/* titre de la page de réglages */
	.toplevel_page_eccp_settings_page h1 {
		text-align:center;
	}
	
	/* Upload Image Avatar */
	.toplevel_page_eccp_settings_page input#upload_image,
	.toplevel_page_eccp_settings_page input#upload_image_button	{
		display:block;
	}
	
	/* bouton téléchargement bloc réutilisable */
	.toplevel_page_eccp_settings_page div.left-button	{
		float:none!important;
		margin:20px 0px 20px 0px;
	}
	
	/* bouton téléchargement bloc réutilisable */
	.toplevel_page_eccp_settings_page .download-button	{
		padding: 10px 10px 10px 10px!important;
		display: block;
		margin: auto;
		width: 250px
	}
	
}

/*-----------------------------------------------------------------------
		                  Table des Matières            
------------------------------------------------------------------------*/

/* pour la table des matières*/
.table-of-content {
	
    background-color: rgba(143, 182, 63, 0.51);
    border-left: 4px solid rgba(143, 182, 63, 0.3);
    border-radius: 4px;
    padding: 10px 10px 10px 10px;
	margin-top:20px;
	margin-bottom:30px;
	font-size:16px;
	line-height: 1.5em;
	overflow:auto;
}

.table-of-content #block-left {
	float: left;
	width: 48%;
	border-right: 4px solid rgba(143, 182, 63, 0.3);
	
}

/* Rappel: La propriété overflow spécifie s'il faut découper le contenu 
   ou ajouter des barres de défilement lorsque le contenu d'un élément est trop grand 
   pour tenir dans la zone spécifiée.
    overflow:auto similaire à overflow:scroll, mais il ajoute des barres de défilement 
	uniquement lorsque cela est nécessaire.
*/
.table-of-content #block-right {
	text-align: left;
	overflow:auto;
	margin-left: 49%;/* pour laisser une marge par rapport à la bordure droite du bloc de gauche */
 }
 
 
.table-of-content strong {
    font-weight: 700;
}
/* on supprime le soulignement des liens de la table des matières */
.table-of-content a{ 
	text-decoration:none;
	font-weight: 500;
	margin-left:10px;
	line-height: 1.6em;
	color: #2271b1;
}  
  
/* On souligne les Liens de la table des matières au survol avec un dégradé de bleu */
.table-of-content a:hover{
	background: linear-gradient(180deg,transparent 75%,rgba(25,133,255,0.3) 0);
}

/* identation pour les sous titre H3 d'une section */
.table-of-content a.sub-title{ 
	margin-left:1.5em;
	color: #3C434A;
	font-weight:400;
}

/* Règles Pour les mobiles en mode portrait*/ 
@media only screen and (max-width:480px){
	
	.table-of-content { 
		width:100%; 
	}
	
	
	.table-of-content #block-left {
		display:block;
		width: 100%;
		border-right:none;
	}
	
	.table-of-content #block-right {
		display:block;
		width: 100%;
		margin-left:0;
	}
	
}

/*-----------------------------------------------------------------------
		Scroll avec des ancres de navigation sous une page Gutenberg            
------------------------------------------------------------------------*/
	/*La propriété scroll-behavior permet d’activer le smooth scrolling dans votre page 
	sans utiliser Javascript. La propriété scroll-margin-top, 
	appliquée au titre, permet de laisser un peu d’espace lorsque le scroll est terminé : 
	au lieu que le titre soit collé tout en haut de l’écran, il y aura 100px d’espace */

	html {
	  scroll-behavior: smooth;
	}

	p, div, h2  {
	  scroll-margin-top: 100px;
	}
	
	h3, h4 {
	  scroll-margin-top: 55px;
	}
	
/*-----------------------------------------------------------------------
		Bouton retour vers le haut            
------------------------------------------------------------------------*/
.scroll-top {

  background-color: #2271B1;/* couleur par défaut bouton WordPress */
  width: 40px;
  height: 40px;
  text-align: center;
  text-decoration: none; /* évite le soulignement bouton actif */
  border-radius: 4px;
  position: fixed;/*La position fixe permet toujours à notre bouton de rester au même endroit lorsque nous faisons défiler la page*/
  bottom: 20px;
  right: 20px;
  z-index: 1000;/*z-index d'un nombre très élevé fait en sorte que le bouton chevauche toujours d'autres éléments du site*/
  opacity:0.5;
  
}

.scroll-top:hover {
  cursor: pointer;
  opacity:0.7;
}

.scroll-top:active {
  opacity:1;
}


.scroll-top:after {
  content: "\f343";
  font-family: 'dashicons';
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 40px;/* on ajuste la hauteur de la ligne a celle du container pour un centrage vertical de l'icône */
  color: #FFFFFF;
}

/*-----------------------------------------------------------------------
		Champ input du slug de le palette de couleurs           
------------------------------------------------------------------------*/

/* Apparence d'un input readonly a celui d'un disabled */
input.readonly, input[readonly] {
    background: rgba(255,255,255,.5);
    border-color: rgba(220,220,222,.75);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 4%);
    color: rgba(44,51,56,.5);
}

/*-----------------------------------------------------------------------
		Bouton Download          
------------------------------------------------------------------------*/

.left-button{
float: left;
margin-top:20px;
}


.right-button{
margin: 20px 0px 20px 0px;
}


.download-button  {
	
	background: #2271B1;
	border-color: #2271B1;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none; /* évite le soulignement bouton actif */
	border-radius: 4px;
	font-size:18px;
	padding: 10px 20px 10px 20px;
	margin-right:10px
	
}

.download-button:hover,
.download-button:active, 
.download-button:focus{
	color: #FFFFFF;
	cursor:pointer;
}

.download-button:before  {
	
  content: "\f316";
  font-family: 'dashicons';
  position: relative;
  top: 5px;
  font-weight: normal;
  color: #FFFFFF;
  margin-right:15px;
  font-size:18px;
  
}

/*-----------------------------------------------------------------------
		               Bouton Démo du plugin          
------------------------------------------------------------------------*/

.demo-button-container{
	padding:0px 0px 20px 0px;
}


.demo-button  {
	
	background: #2271B1;
	border-color: #2271B1;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none; /* évite le soulignement bouton actif */
	border-radius: 4px;
	font-size:18px;
	padding: 10px 20px 10px 20px;
	margin:30px 0px!important;
	display:block!important;
	margin:auto!important;
	width:150px;
}

.demo-button:hover,
.demo-button:active, 
.demo-button:focus{
	color: #FFFFFF;
}

/*-----------------------------------------------------------------------
		Soulignement du texte        
------------------------------------------------------------------------*/
.souligne-texte {background: linear-gradient(180deg,transparent 75%,rgba(25,133,255,0.3) 0);}


#top .single-product-main-image .thumbnails a {
    width: auto!important;
}


#top .product div.images img {
    width: 200px!important;
}


/*-----------------------------------------------------------------------
		   Composant TabPanel pour le Block Espacement & Groupe      
------------------------------------------------------------------------*/

/* .eccp-tab-wrapper classe pour le container
   du composant TabPanel définit en react JS
   on établit une barre horizontale bleu de 3px
   en dessous des onglets   */
.eccp-tab-wrapper div.components-tab-panel__tabs{
	padding-bottom: 8px!important;
	border-style:solid;
    border-width: 0px 0px 3px 0px!important;
    border-color: #14a0b2!important;
}


/* on supprime le soulignement haut de l'onglet actif
   établit par défaut de Gutenberg */
.eccp-tab1:focus:not(:disabled) ,
.eccp-tab2:focus:not(:disabled),
.eccp-shape-divider-tab1:focus:not(:disabled) ,
.eccp-shape-divider-tab1:focus:not(:disabled) {
	box-shadow:unset!important;
}


/* Classes pour les onglets 
   définit en react JS pour le composant TabPanel*/
.eccp-tab1,
.eccp-tab2,
.eccp-shape-divider-tab1,
.eccp-shape-divider-tab2 {
	border-style: solid;
	border-width: 1px 1px 0 1px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding: 0px 10px 0px 10px;
	border-color: #bbbbbb;
	color: #313131;
	font-weight: 500;
	font-size: 16px;
	background: #ffffff;
	margin-right:4px;
}


/* Classes pour un onglet Actif
   définit en react JS pour le composant TabPanel du bloc espacement */
.eccp-active-tab{
	border-color: #14a0b2;
    color: #ffffff;
    /*background: #14a0b2;*/
}

/* Classes pour un onglet Actif
   définit en react JS pour le composant TabPanel du bloc groupe */
.eccp-active-tab-shape-divider{
	border-color: #14a0b2;
    color: #14a0b2;
    /*background: #14a0b2;*/
}



/* Couleur du texte onglet actif au survol */
.eccp-active-tab:hover{
    color: #ffffff;
}

/* Régles pour les icône SVG 
   icone: https://iconmonstr.com/ */
.eccp-tab1::after,
.eccp-tab2::after{
   background-size: cover!important; 
   height:25px;
   width:25px;	                  
   mask-repeat: no-repeat;	                 
  -webkit-mask-repeat: no-repeat;
  /*transform: scale( calc(11 / 10));*/
}


/* Couleur bleu des icônes au survol */
.eccp-tab1:hover::after,
.eccp-tab2:hover::after{
   background-color: #14a0b2;; 
}
					
	
/*lorsqu'on affiche un icone avec la régle pseudo :after
il faut appliquer la régle content: "" pour que cela fonctionne
on applique une couleur de fond au svg avec la régle background-color
visibility: visible; permet de rendre l'icône svg visible car par defaut:hidden */			 
.eccp-tab1::after,					
.eccp-tab2::after{
	content: "";
	background-color: #333333;
	visibility: visible;  
}

/* Régles pour l'icône Tablette
la régle mask-image permettra d'appliquer une couleur au SVG */
.eccp-tab1::after{
	-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 24c1.104 0 2-.896 2-2v-20c0-1.104-.896-2-2-2h-14c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h14zm-14-3v-18h14v18h-14zm6.5 1.5c0-.276.224-.5.5-.5s.5.224.5.5-.224.5-.5.5-.5-.224-.5-.5z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 24c1.104 0 2-.896 2-2v-20c0-1.104-.896-2-2-2h-14c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h14zm-14-3v-18h14v18h-14zm6.5 1.5c0-.276.224-.5.5-.5s.5.224.5.5-.224.5-.5.5-.5-.224-.5-.5z'/%3E%3C/svg%3E");
}

/* Régles pour l'icône Mobile
la régle mask-image permettra d'appliquer une couleur au SVG */
.eccp-tab2::after{
	-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 2c0-1.104-.896-2-2-2h-10c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h10c1.104 0 2-.896 2-2v-20zm-8.5 0h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5zm1.5 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm5-3h-10v-14.024h10v14.024z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 2c0-1.104-.896-2-2-2h-10c-1.104 0-2 .896-2 2v20c0 1.104.896 2 2 2h10c1.104 0 2-.896 2-2v-20zm-8.5 0h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5zm1.5 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm5-3h-10v-14.024h10v14.024z'/%3E%3C/svg%3E");
}

/* Couleur de l'icône pour un onglet actif */
.eccp-active-tab::after{
    background-color: #14a0b2!important;
}


/*-----------------------------------------------------------------------
         Page d'administration des blocs Réutilisables       
------------------------------------------------------------------------*/

/* colonne intégration */
.column-reusable-block-display{
	width:300px;
}

/* Bouton aperçu du block réutilisable */
.wp-core-ui .button.button-small.eccp-button-preview {
	font-size:13px;
}


/* ------- Fenêtre Modale d'apperçu du bloc réutilisable -------*/

/* Titre */
#TB_ajaxWindowTitle{
	text-align:center;
	font-size:18px;
}

/* header du titre */
#TB_title {
    background: #85B1AC;
    border-bottom: 1px solid #85B1AC;
    color: #FFFFFF;
	padding:5px 0 5px 0;
}

/* bouton fermeture fenêtre modale */
.tb-close-icon:before{
	color: #FFFFFF;
}


/*-----------------------------------------------------------------------
  ÉCRAN PAGE & ARTICLE & CPT & MÉDIATHÈQUE & MODIFICATION RAPIDE .....     
------------------------------------------------------------------------*/

/* ----- Style Page & Article & CPT --------------*/

th#elementor_library_type{width:75px;} /* Pour la page admin modèles Elementor */
th#instances{width:75px;} /* Pour la page admin modèles Elementor */
body.wp-admin th#title{width:300px;}
th#page_post_id{width:50px;}
th#categories{width:120px;}
th#tags{width:100px;}
body.wp-admin th#date{width:95px;}
th#page_post_views{width:60px;}
th#remove_blocks_before_content{width:125px;}/* métas de publication pour l'insertion de bloc avant le contenu */
th#remove_blocks_after_content{width:125px;}/* métas de publication pour l'insertion de bloc aprés le contenu */
td.remove_blocks_before_content{text-align:center;}/* métas de publication pour l'insertion de bloc avant le contenu */
td.remove_blocks_after_content{text-align:center;}/* métas de publication pour l'insertion de bloc aprés le contenu */
th#wpmem_product{width:100px;}/* WP MEMBERS */
th#tickets{width:100px;}/* The Events Calendar */
th#events-cats{width:190px;}/* The Events Calendar */
body.post-type-tribe_events th#start-date{width:100px;} 
body.post-type-tribe_events th#end-date{width:100px;} 

/* Pour la page admin modèles Elementor */
th#shortcode{width:220px;}

/* Pour la page admin order de Stripe Checkout */
th#title{width:140px;} 
th#txn_id{width:140px;} 
th#name{width:100px;} 
th#email{width:140px;} 
th#amount{width:60px;} 
th#date{width:140px;} 


/* ----- Style Modification Rapide Articles & Pages & CPT pour l'édition de l'image mise en avant ---*/

 #wpbody-content #featured_image{margin:15px 0px;}
 #wpbody-content #featured_image .title{font-weight: 600;}
 #wpbody-content #featured_image img{margin-top:10px;}
 #wpbody-content #featured_image img,
 #wpbody-content #featured_image .upload-img.button{ margin-top:10px;}
 
 #wpbody-content #before_after_content{margin:15px 0px;}
 #wpbody-content #before_after_content .inline-edit-tags-wrap{margin-bottom:20px;}
 #wpbody-content #before_after_content .title{font-weight: 600;}
 
/* ---- Style The Events Calendar ------------------*/
th#series{width:170px;}
th#start_date{width:130px;}
th#events{width:80px;}

/* ---- Style Médiathèque ------------------*/

th#title{width:350px;}
th#author{width:115px;}
th#taxonomy-media_category{width:175px;}
th#parent{width:115px;}
th#mediaID{width:70px;}
th#mediaDimensions{width:135px;}
th#fileSize{width:100px;}

/* ---- Style Comptes Utilisateurs ------------------*/
th#username{width:275px;}
th#email{width:160px;}
th#role{width:160px;}
th#last_login{width:160px;}
th#registration_date{width:160px;}


/*---------- Suppression notifications dans la bibiothèque de médias -----*/

.imagify-notice { display: none!important;}
.elementor-message {display:none;}


/*------------ Style des icônes Cadenas extension WP MEMBERS  ------------*/

.wpmem_block .dashicons-unlock,
#wpmem_post_icon_0	{
		color: green!important;
}
		
.wpmem_block .dashicons-lock,
#wpmem_post_icon_1   {
	color: red!important;
}

/*-----------------------------------------------------------------------
           SIDEBAR LATÉRALE PANNEAU DES PARAMÈTRES DU BLOC   
------------------------------------------------------------------------*/

/*
Composant Panel avec le titre:
Editor Custom Color Palette
*/
.eccp-composant-panel{
	border-top: 1px solid #e0e0e0;
	background:#1E5A99;
}

.eccp-composant-panel h2{
	color:#FFFFFF;
	font-size:15px;
	display:block;
	margin:auto;
}


/*
	Bordure supérieure composant PanelBody & PanelColorSettings 
*/
.block-editor-block-inspector .eccp-composant-panel-body.components-panel__body,
.block-editor-block-inspector .eccp-composant-panel-color-settings {
    border-top: 2px solid #FFFFFF;
}


/* 
Couleur titre composant PanelBody
Couleur Icône ^  composant PanelBody
couleur de fond composant PanelColorSettings
*/
.eccp-composant-panel-body .components-panel__body-toggle.components-button,
.eccp-composant-panel-body .components-panel__body-toggle.components-button .components-panel__arrow {
	color: #FFFFFF!important;
	background: #85B1AC;
}


/* 
couleur titre composant PanelColorSettings
*/
.eccp-composant-panel-color-settings h2{
	color: #1E5A99!important;
}

/*
 trait séparateur des réglages
 la classe eccp-hr a été ajouté a la balise hr en React js
*/
.interface-complementary-area hr.eccp-hr{
	border-bottom: 1px solid #85B1AC;
}


/* composant PlaceHolder */
.eccp-composant-panel-body .components-placeholder{
	outline:none;
	box-shadow:none;
	border: 1px dashed #85B1AC;
	min-height: 100px;
	margin-top:15px;
}

/* Label du composant PlaceHolder */
.eccp-composant-panel-body .components-placeholder .components-placeholder__label{
	display: block;
    margin: auto;
}

/* Saisie valeur hexadécimale du composant color picker */
.eccp-composant-panel-body  [data-wp-component="Flex"].components-flex{
	height:unset!important;
}


/*-----------------------------------------------------------------------
                  COMPOSANT IconPicker Dashicon  
------------------------------------------------------------------------*/

/* largeur du container des icônes */
.eccp-icon-picker{
	width:400px;
	height:250px;
}

/* taille des icônes */
.eccp-icon-picker span:before{
	font-size:30px;
}

/* marge des icônes */
.eccp-icon-picker span{
	margin:10px;
}

/* Style d'une icone sélectionnée */
.eccp-icon-picker span.icon-picker-selected:before{
	background: #1E5A99;
	color:#FFFFFF;
	padding:2px;
}


/* Style DIV container des boutons & ToogleControl */
.icon-picker-panel{
	padding: 15px; 
	display: flex; 
	flex-direction: column; 
	justify-content: flex-end;
}

/* ToogleControl  */
.icon-picker-panel .components-toggle-control{
	margin-top:5px;
}