/*FONCTONNEMENT - STYLE*/

/*RECAP*/
/* -- Entete = newFondIconeEntete et newicon 
   -- Radius =  newiconelarge sur a + newiconeradius (div)
   -- Transparant = newFondIconTransp et newicontransp
   -- Bouton partout (en bas, fermer, fp, ...) = fondNewIcon et newicon

ICONE SIMPE
$vtTexte:=$vtTexte+"<div class=\"fondNewIcon\"><div class=\"newicon fermer\"></div></div>"

ICONE BLEU (BAS, HAUT, Info)
$vtTexte:=$vtTexte+"<div class=\"fondNewIconUtils\"><div class=\"newiconutils bas\"><div class=\"infobulle\">"+Traduction (16433)+"</div></div></div>"
<div class="newicon fermer"></div>

ICONE dans SFL (Avec un fond gris)
<div class="element" onclick=""><div class="fondNewIcon gris"><div class="newicon ajouter2"></div></div><div class="libelle">Ajouter</div></div>

ICONE DIALOGUE EN TETE
<div class="fondNewIconGrand"><div class="newicongrand question"></div></div>
*/

/* ENTETE */
.newFondIconeEntete{
   /* background-color: var(--color-fondbtnentete);*/
    width: 28px;
    min-width: 28px;
    height: 30px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.newFondIconeEntete .newicon {
    background-color: var(--color-btnentete);
    width: 20px;
    height: 30px;
    margin: auto;
    transition: 0.3s;
}

/* RADIUS */
.radius.actif .loupe, .radius .loupe, .radius.actif .liste, .radius .liste, .radius .newiconelarge, .enteteform .boutons .liste, .enteteform .boutons .oeil, .enteteform .boutons .crayon,.entete .cloche, .blocconnexion .logUser, .blocconnexion .logPassword {
    background-image: none !important;
}
.radius.actif a {
    background-color: var(--color-boutonradius) !important;
}
.radius.actif .newiconeradius {
    width: 20px;
    height: 30px;
    margin: auto;
    transition: 0.3s;
    background-color: var(--color-boutoniconradius);
}
.radius .newiconeradius {
    width: 20px;
    height: 30px;
    margin: auto;
    transition: 0.3s;
    /*background-color: var(--color-boutonradius);*/
	background-color: var(--color-boutonbas); /*BV : c'est + logique*/
}
.radius .large .newiconeradius, .radius.actif .large .newiconeradius {
    width: 26px;
    height: 30px;
}
.entete .newFondIconeRadius .boutonrond {
    background-color: var(--color-boutonradius);
}
.entete .newFondIconeRadius .newicone {
    background-color: var(--color-boutoniconradius);
    width: 20px;
    height: 30px;
    margin: auto;
    transition: 0.3s;
}

/* SIMPLE */
.fondNewIconGrand { /* FOND ICON pour les dialogues */
    background-color: #f7f7f7;
    width: 58px;
    min-width: 58px;
    height: 63px;
    border-radius: 27px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    margin-left: -79px;
    position: absolute;
}
.element .fondNewIcon { /* FOND ICON */
    background-color: var(--color-boutonbasfond);
    width: 26px;
    min-width: 26px;
    height: 28px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
.element .fondNewIcon.petit { /* FOND ICON */
    background-color: var(--color-boutonbasfond);
    width: 22px;
    min-width: 22px;
    height: 24px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
.element:not(.disabled):hover .fondNewIcon { /* Hover sur fond icone que si non disabled*/
    background-color: var(--color-boutonbasfondhover);
}

.newicon { /* ICONE Simple (Utilisé partout) */
    background-color: var(--color-boutonbas);
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: auto;
    transition: 0.3s;
}
.newicongrand {
    background-color: var(--color-boutonbas);
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: auto;
    transition: 0.3s;
    opacity: 0.8;
}
.element:not(.disabled):hover .newicon { /* Hover sur icone que si non disabled */
    background-color: var(--color-boutonbashover);
}
.newicon.iconproc {
    width: 100%;
    height: 100%;
}
/* SIMPLE */
.element .fondNewIcon.gris { /* FOND ICON */
    background-color: #f4f4f4;
}
.element:not(.disabled):hover .fondNewIcon.gris { /* Hover sur fond icone que si non disabled*/
    background-color: var(--color-boutonbasfondhover);
}

.element .fondNewIcon.gris .newicon { /* */
    background-color: var(--color-boutonbas);
}
.element:not(.disabled):hover .fondNewIcon.gris .newicon { /* Hover sur icone que si non disabled */
    background-color: #f4f4f4;
}
/* ICONE Accueil*/
.newFondIconConnexion {
    background-color: transparent;
    width: 28px;
    min-width: 28px;
    height: 30px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    position: absolute;
}
.newiconconnexion {
    background-color: var(--color-iconconnexion);
    width: 95%;
    height: 95%;
    margin: auto;
    transition: 0.3s;
}

/* ICONE avec transparence*/
.newFondIconTranspNotHov {
    background-color: transparent;
    width: 28px;
    min-width: 28px;
    height: 30px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
}
.newFondIconTransp {
    background-color: transparent;
    width: 28px;
    min-width: 28px;
    height: 30px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
}

.newFondIconTransp:not(.active):hover {
    background-color: var(--color-boutonbasfondhover);
}
.newFondIconTransp.active {
    background-color: white;
}

.newicontransp { /* Changement sur l'icone */
    background-color: white;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: auto;
    transition: 0.3s;
}
.newicontransp.actif {
    background-color: var(--color-icontransparant);
}
/* ICONES Menu de droite*/
.fondNewIconDroite {
    display: flex;
    background-color: var(--color-boutondroitefond);
    width: 32px;
    min-width: 32px;
    height: 35px;
    border-radius: 15px / 17px;
    /* cursor: pointer; */
    background-position: center center;
    background-repeat: no-repeat;
    /* background-size: 50% auto; */
    -moz-transition: background-color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}
.fondNewIconDroite.transparant {
    background-color: transparent;
}

.element:hover .fondNewIconDroite {
    background-color: var(--color-boutondroitefondhover);
}

.element .newicondroite { /* */
    background-color: var(--color-boutondroite);
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: auto;
    transition: 0.3s;
}
.element .newicondroite.transparant {
    background-color: var(--color-boutondroitetransparant);
}
.element:not(.disabled):hover .fondNewIconDroite .newicondroite { /* Hover sur icone que si non disabled */
    background-color: var(--color-boutondroitehover);
}
.element:not(.disabled):hover .fondNewIconDroite .newicondroite.transparant { /* Hover sur icone que si non disabled */
    background-color: var(--color-boutondroitetransparanthover);
}

.newFondIconTrCol {
    background-color: transparent;
    width: 20px;
    min-width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    border: 1px solid transparent;
}
.newFondIconTrCol.actif {
    border: 1px solid var(--color-icontransparant);
    /*background-color: #ababab0f;*/
    -webkit-box-shadow: 0px 0px 3px 1px #0000003b; 
    box-shadow: 0px 0px 3px 1px #0000003b;
}
.newicontrcol {
    background-color: #7d7d7d;
    height: 18px;
    width: 18px;
    margin: auto;
    transition: 0.3s;
}

/* ICONS UTILS */
.fondNewIconUtils {
    background-color: var(--color-fondbtnutils);
    width: 24px;
    min-width: 24px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    margin-right: 4px;
}

.element:hover .fondNewIconUtils {
    background-color: var(--color-fondbtnutilshover);
}
html.rechercheouvert .affichagecolonnes .boutonrond.colrecherche,html.flouvert .affichagecolonnes .boutonrond.colfl,html.fpouvert .affichagecolonnes .boutonrond.colfp {
	background-color:var(--color-boutonbasfondhover);
}
html.rechercheouvert .newFondIconeEntete .newicon.loupe,html.flouvert .newFondIconeEntete .newicon.menu,html.fpouvert .newFondIconeEntete .newicon.document {
	background-color:white;
}																																										

.element .newiconutils { /*  */
    background-color: var(--color-fondbtnutilsicon);
    width: calc(100%);
    height: calc(100%);
    margin: auto;
    transition: 0.3s;
}
.element:hover .newiconutils {
    background-color: var(--color-fondbtnutilshovericon);
}

.form .blocchamp .boutons, .errormessage .champ .boutons,.boutonstoutseul { /* Bouton champ lié*/
    width: 21px !important;
    height: 22px !important;
    background-color: #f4f4f4 !important;
    margin-right: 5px !important;
    border-radius: 10px !important;
    top: 5px !important;
    display: flex !important;
}
.form .blocchamp .boutons div.points,.errormessage div.points,.boutonstoutseul .points { /* Bouton champ lie*/
    -webkit-mask: url(petitspoints.svg) no-repeat center center /100% 100% !important;
    mask: url(petitspoints.svg) no-repeat center center /100% 100% !important;
    background-color: var(--color-boutonbas) !important;
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    margin: auto !important;
    transition: 0.3s !important;
    position: relative;
}

.form .blocchamp .champ input[type=text]:disabled + .boutons, .form .blocchamp .champ input[type=password]:disabled + .boutons, .form .blocchamp .champ textarea:disabled + .boutons{
    display: none !important;
}
.form .blocchamp .champ input[type=text]:disabled.voirboutonquandmeme + .boutons, .form .blocchamp .champ input[type=password]:disabled.voirboutonquandmeme + .boutons, .form .blocchamp .champ textarea:disabled.voirboutonquandmeme + .boutons{
    display: flex !important;
}
.fondNewIconAffichage { /*Icone flèche dans Accordéon*/
    width: 26px;
    height: 26px;
    min-width: 26px;
    right: 25px;
    margin-top: -25px;
    position: absolute;
}
.newfpglobal .fondNewIconAffichage {
	right: calc(15px + 26px + 5px);
}	
.newiconaffichage { /*Icone flèche dans Accordéon*/
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    position: relative;
    background-color: var(--color-fleche);
}
.accordeon.vuehorizontal .newiconaffichage{ /*Icone flèche dans Accordéons*/
    -webkit-mask: url(vuevert2.svg) no-repeat center /100% 100%;
    mask: url(vuevert2.svg) no-repeat center /100% 100%;
}
.accordeon .newiconaffichage{ /*Icone flèche dans Accordéons*/
    -webkit-mask: url(vuehor2.svg) no-repeat center /100% 100%;
    mask: url(vuehor2.svg) no-repeat center /100% 100%;
}
.accordeon .newiconaffichage:hover{
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s;
}

.fondNewIconFleche { /*Icone flèche dans Accordéon*/
    width: 26px;
    height: 26px;
    min-width: 26px;
    right: 25px;
    margin-top: -25px;
    position: absolute;
}


.InfoUtil .fondNewIconFleche {right: 280px;}			   

.newfpglobal .fondNewIconFleche {
	right: 15px;
}			   
.newiconfleche,.iconsuivirel { /*Icone flèche dans Accordéon*/
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    position: relative;
    background-color: var(--color-fleche);
}
.accordeon .newiconfleche, .ssaccordeon .newiconfleche{ /*Icone flèche dans Accordéons*/
    -webkit-mask: url(flechehaut.svg) no-repeat center /100% 100%;
    mask: url(flechehaut.svg) no-repeat center /100% 100%;
}
.accordeon.ferme .newiconfleche, .ssaccordeon.ferme .newiconfleche{ /*Icone flèche dans Accordéons*/
    -webkit-mask: url(flechebas.svg) no-repeat center /100% 100%;
    mask: url(flechebas.svg) no-repeat center /100% 100%;
}

.accordeon .iconsuivirel, .ssaccordeon .iconsuivirel{ /*Icone flèche dans Accordéons*/
    -webkit-mask: url(suivi-relations.svg) no-repeat center /100% 100%;
    mask: url(suivi-relations.svg) no-repeat center /100% 100%;
    margin-top: 0.5px;
}
.ssaccordeon .newiconfleche{ /*Icone flèche dans Accordéons*/
    opacity: 0.7;
    margin-top: 1px;
}
.fondIconExplo {
    right: 60px;
} 

/* ICONES */
/* -- Entete -- */
.newicon.dashboard {
    -webkit-mask: url(vue-grille.svg) no-repeat center;
    mask: url(vue-grille.svg) no-repeat center;
}
.newicon.parametres {
    -webkit-mask: url(parametre.svg) no-repeat center;
    mask: url(parametre.svg) no-repeat center;
}
.newicon.logout {
    -webkit-mask: url(logout.svg) no-repeat center /82%;
    mask: url(logout.svg) no-repeat center /82%;
}
.newicon.palette {
    -webkit-mask: url(palette.svg) no-repeat center /20px;
    mask: url(palette.svg) no-repeat center /20px;
}
.newicon.folder {
    -webkit-mask: url(folder.svg) no-repeat center center;
    mask: url(folder.svg) no-repeat center center;
}
.newicon.cloche {
    -webkit-mask: url(cloche.svg) no-repeat center;
    mask: url(cloche.svg) no-repeat center;
}
.newicon.mesDoc {
    -webkit-mask: url(file.svg) no-repeat center;
    mask: url(file.svg) no-repeat center;
}
.newicon.word {
    -webkit-mask: url(word.svg) no-repeat center;
    mask: url(word.svg) no-repeat center;
}
.newicon.loupe {
    -webkit-mask: url(dialogsearch.svg) no-repeat center;
    mask: url(dialogsearch.svg) no-repeat center;
}

/* -- Entete form*/
.newicon.fermer, .newicontransp.fermer, .newicon.stopexport {
    -webkit-mask: url(close2.svg) no-repeat center /100% 100%;
    mask: url(close2.svg) no-repeat center /100% 100%;
}

/* Radius */
.radius .newiconeradius.modifier2 {
    -webkit-mask: url(modifier2.svg) no-repeat center /20px;
    mask: url(modifier2.svg) no-repeat center /20px;
}
.radius .newiconeradius.rech {
    -webkit-mask: url(dialogsearch.svg) no-repeat center /20px;
    mask: url(dialogsearch.svg) no-repeat center /20px;
}
.radius .newiconeradius.menu {
    -webkit-mask: url(menu.svg) no-repeat center;
    mask: url(menu.svg) no-repeat center;
}
.newicondroite.menu {
    -webkit-mask: url(menu.svg) no-repeat center;
    mask: url(menu.svg) no-repeat center;
}
.radius .newiconeradius.fullscreen, .newicon.fullscreen, .newicontransp.fullscreen {
    -webkit-mask: url(fullscreen.svg) no-repeat center;
    mask: url(fullscreen.svg) no-repeat center;
}
.newicon.fullwidth {
	-webkit-mask: url(arrow-expand-horizontal2.svg) no-repeat center /24px;
    mask: url(arrow-expand-horizontal2.svg) no-repeat center /24px;
}

html.recherchelarge .bloccorpsrecherche .newicon.fullwidth,
html.fpouvert.rechercheferme.flferme .bloccorpsfp .newicon.fullwidth,
html.flouvert.rechercheferme.fpferme .bloccorpsfl .newicon.fullwidth{
	-webkit-mask: url(arrow-collapse-horizontal2.svg) no-repeat center /24px;
    mask: url(arrow-collapse-horizontal2.svg) no-repeat center /24px;
}
/* Fonctions Bas*/

.newicon.ajouter {
    -webkit-mask: url(ajouter.svg) no-repeat center center;
    mask: url(ajouter.svg) no-repeat center center;
}
.newicon.modifier {
    -webkit-mask: url(modifier.svg) no-repeat center center;
    mask: url(modifier.svg) no-repeat center center;
}
.newicon.menu,.newicontransp.menu {
    -webkit-mask: url(menu.svg) no-repeat center /20px;
    mask: url(menu.svg) no-repeat center /20px;
}
.newicon.chercher {
    -webkit-mask: url(dialogsearch.svg) no-repeat center /20px;
    mask: url(dialogsearch.svg) no-repeat center /20px;
}
.newicon.chercher2, .newicon.search {
    -webkit-mask: url(dialogsearch.svg) no-repeat center /100% 100%;
    mask: url(dialogsearch.svg) no-repeat center /100% 100%;
}
.newicon.chercheBtn {
    -webkit-mask: url(dialogsearch.svg) no-repeat center;
    mask: url(dialogsearch.svg) no-repeat center;
}
.newicon.reload {
    -webkit-mask: url(reload.svg) no-repeat center /100% 100%;
    mask: url(reload.svg) no-repeat center /100% 100%;
}
.newicon.dernieres {
    -webkit-mask: url(dernieres.svg) no-repeat center /90% 90%;
    mask: url(dernieres.svg) no-repeat center /90% 90%;
}
.newicon.toutes {
    -webkit-mask: url(toutes.svg) no-repeat center /90% 90%;
    mask: url(toutes.svg) no-repeat center /90% 90%;
}
.newicon.dossiershier {
    -webkit-mask: url(dossiershier.svg) no-repeat center /96% 96%;
    mask: url(dossiershier.svg) no-repeat center /96% 96%;
}
.newicon.toutes2 {
    -webkit-mask: url(toutes.svg) no-repeat center /100% 100%;
    mask: url(toutes.svg) no-repeat center /100% 100%;
}
.newicon.reduire {
    -webkit-mask: url(reduire.svg) no-repeat center /90% 90%;
    mask: url(reduire.svg) no-repeat center /90% 90%;
}
.newicon.reduire2 {
    -webkit-mask: url(reduire.svg) no-repeat center /100% 100%;
    mask: url(reduire.svg) no-repeat center /100% 100%;
}
.newicon.enlever {
    -webkit-mask: url(enlever.svg) no-repeat center /70% 70%;
    mask: url(enlever.svg) no-repeat center /70% 70%;
}
.newicon.enlever2 {
    -webkit-mask: url(enlever.svg) no-repeat center /100% 100%;
    mask: url(enlever.svg) no-repeat center /100% 100%;
}
.newicon.document {
    -webkit-mask: url(document.svg) no-repeat center /100% 100%;
    mask: url(document.svg) no-repeat center /100% 100%;
}
.newicon.revenir {
    -webkit-mask: url(retour.svg) no-repeat center /90% 90%;
    mask: url(retour.svg) no-repeat center /90% 90%;
}
.newicon.hierarchie {
    -webkit-mask: url(hierarchy.svg) no-repeat center /100% 100%;
    mask: url(hierarchy.svg) no-repeat center /100% 100%;
}
.newicon.inverser {
    -webkit-mask: url(inverser.svg) no-repeat center /90% 90%;
    mask: url(inverser.svg) no-repeat center /90% 90%;
}
.newicon.classer {
    -webkit-mask: url(menu.svg) no-repeat center /90% 90%;
    mask: url(menu.svg) no-repeat center /90% 90%;
}
.newicon.deployer {
    -webkit-mask: url(deployer.svg) no-repeat center /90% 90%;
    mask: url(deployer.svg) no-repeat center /90% 90%;
}
.newicon.deployer2 {
    -webkit-mask: url(deployer.svg) no-repeat center /100% 100%;
    mask: url(deployer.svg) no-repeat center /100% 100%;
}
.newicon.ajouter {
    -webkit-mask: url(ajouter.svg) no-repeat center /90% 90%;
    mask: url(ajouter.svg) no-repeat center /90% 90%;
}
.newicon.effacer {
    -webkit-mask: url(eraser.svg) no-repeat center /90% 90%;
    mask: url(eraser.svg) no-repeat center /90% 90%;
}
.newicon.effacer2 {
    -webkit-mask: url(erase2.svg) no-repeat center /90% 90%;
    mask: url(erase2.svg) no-repeat center /90% 90%;
}
.newicon.ajouter2 {
    -webkit-mask: url(ajouter.svg) no-repeat center /100% 100%;
    mask: url(ajouter.svg) no-repeat center /100% 100%;
}
.newicon.imprimer2 {
    -webkit-mask: url(imprimer.svg) no-repeat center /104% 104%;
    mask: url(imprimer.svg) no-repeat center /104% 104%;
}
.newicondroite.ajouter {
    -webkit-mask: url(ajouter.svg) no-repeat center center;
    mask: url(ajouter.svg) no-repeat center center;
}
.newicon.check {
    -webkit-mask: url(dialogcheck.svg) no-repeat center /90% 90%;
    mask: url(dialogcheck.svg) no-repeat center /90% 90%;
}
.newicon.check2 {
    -webkit-mask: url(dialogcheck.svg) no-repeat center /100% 100%;
    mask: url(dialogcheck.svg) no-repeat center /100% 100%;
}
.newicon.facturer {
    -webkit-mask: url(facturer.svg) no-repeat center /100% 100%;
    mask: url(facturer.svg) no-repeat center /100% 100%;
}
.newicon.liste {
    -webkit-mask: url(lister.svg) no-repeat center /90% 90%;
    mask: url(lister.svg) no-repeat center /90% 90%;
}
.newicondroite.explorer {
    -webkit-mask: url(lister.svg) no-repeat center center;
    mask: url(lister.svg) no-repeat center center;
}
.newicontransp.liste {
    -webkit-mask: url(lister.svg) no-repeat center /100% 100%;
    mask: url(lister.svg) no-repeat center /100% 100%;
}
.newicondroite.consulter {
    -webkit-mask: url(consulter.svg) no-repeat center center;
    mask: url(consulter.svg) no-repeat center center;
}
.newicon.oeil, .newicontransp.oeil {
    -webkit-mask: url(consulter.svg) no-repeat center /90% 90%;
    mask: url(consulter.svg) no-repeat center /90% 90%;
}
.newicon.crayon, .newicontransp.crayon {
    -webkit-mask: url(modifier.svg) no-repeat center /90% 90%;
    mask: url(modifier.svg) no-repeat center /90% 90%;
}
.newicongrand.question {
    -webkit-mask: url(question.svg) no-repeat center /100% 100%;
    mask: url(question.svg) no-repeat center /100% 100%;
}
.newicongrand.alert {
    -webkit-mask: url(alert.svg) no-repeat center /100% 100%;
    mask: url(alert.svg) no-repeat center /100% 100%;
    margin-top: 7px;
}
.newicon.modifier2 {
    -webkit-mask: url(modifier.svg) no-repeat center /100% 100%;
    mask: url(modifier.svg) no-repeat center /100% 100%;
}
.newicon.valider2 {
    -webkit-mask: url(dialogcheck.svg) no-repeat center /100% 100%;
    mask: url(dialogcheck.svg) no-repeat center /100% 100%;
}
.newicon.modifier3 {
    -webkit-mask: url(modifier2.svg) no-repeat center /100% 100%;
    mask: url(modifier2.svg) no-repeat center /100% 100%;
}
.newicondroite.modifier {
    -webkit-mask: url(modifier.svg) no-repeat center center;
    mask: url(modifier.svg) no-repeat center center;
}
.newicon.gauche {
    -webkit-mask: url(gauche.svg) no-repeat center /100% 100%;
    mask: url(gauche.svg) no-repeat center /100% 100%;
	width: calc(100% - 0px);
    height: calc(100% - 0px);
}
.newicon.droite {
    -webkit-mask: url(droite.svg) no-repeat center /100% 100%;
    mask: url(droite.svg) no-repeat center /100% 100%;
	width: calc(100% - 0px);
    height: calc(100% - 0px);
}
.newicon.flechebas {
    -webkit-mask: url(flechebas.svg) no-repeat center center /100% 100%;
    mask: url(flechebas.svg) no-repeat center center /100% 100%;
	width: calc(100% - 0px);
    height: calc(100% - 0px);
}
.newicon.flechehaut {
    -webkit-mask: url(flechehaut.svg) no-repeat center center /100% 100%;
    mask: url(flechehaut.svg) no-repeat center center /100% 100%;
	width: calc(100% - 0px);
    height: calc(100% - 0px);
}
.newicon.choisir {
    -webkit-mask: url(choisir.svg) no-repeat center /90% 90%;
    mask: url(choisir.svg) no-repeat center /90% 90%;
}
.newicon.choisir2 {
    -webkit-mask: url(choisir.svg) no-repeat center /100% 100%;
    mask: url(choisir.svg) no-repeat center /100% 100%;
}
.newicon.supprimer, .newicontransp.supprimer {
    -webkit-mask: url(poubelle.svg) no-repeat center /90% 90%;
    mask: url(poubelle.svg) no-repeat center /90% 90%;
}
.newicon.supprimer2 {
    -webkit-mask: url(poubelle.svg) no-repeat center /100% 100%;
    mask: url(poubelle.svg) no-repeat center /100% 100%;
}
.newicondroite.supprimer {
    -webkit-mask: url(poubelle.svg) no-repeat center center;
    mask: url(poubelle.svg) no-repeat center center;
}
.newicon.enregistrer {
    -webkit-mask: url(enregistrer.svg) no-repeat center /100% 100%;
    mask: url(enregistrer.svg) no-repeat center /100% 100%;
}
.newicon.exclure {
    -webkit-mask: url(exporter.svg) no-repeat center /100% 100%;
    mask: url(exporter.svg) no-repeat center /100% 100%;
    transform: rotate(90deg);
}
.newicon.fusion {
    -webkit-mask: url(merge.svg) no-repeat center /100% 100%;
    mask: url(merge.svg) no-repeat center /100% 100%;
}
.newicon.etiqueter {
    -webkit-mask: url(etiqueter.svg) no-repeat center /100% 100%;
    mask: url(etiqueter.svg) no-repeat center /100% 100%;
}
.newicon.close2 {
    -webkit-mask: url(close2.svg) no-repeat center /100% 100%;
    mask: url(close2.svg) no-repeat center /100% 100%;
}
.newicon.close {
    -webkit-mask: url(close2.svg) no-repeat center /100% 100%;
    mask: url(close2.svg) no-repeat center /100% 100%;
}
.newicon.imprimer {
   -webkit-mask: url(imprimer.svg) no-repeat center /100% 100%;
    mask: url(imprimer.svg) no-repeat center /100% 100%;
}
.newicondroite.valider {
    -webkit-mask: url(dialogcheck.svg) no-repeat center center;
    mask: url(dialogcheck.svg) no-repeat center center;
}
.newicondroite.cloturer {
    -webkit-mask: url(cloturer.svg) no-repeat center center;
    mask: url(cloturer.svg) no-repeat center center;
}
.newicondroite.masquer {
    -webkit-mask: url(masquer.svg) no-repeat center center;
    mask: url(masquer.svg) no-repeat center center;
}
.newicondroite.imprimer {
    -webkit-mask: url(imprimer.svg) no-repeat center center;
    mask: url(imprimer.svg) no-repeat center center;
}
.newicondroite.exporter {
    -webkit-mask: url(exporter.svg) no-repeat center center;
    mask: url(exporter.svg) no-repeat center center;
}
.newicondroite.parametres {
    -webkit-mask: url(parametre.svg) no-repeat center;
    mask: url(parametre.svg) no-repeat center center;
}
.newicondroite.points {
    -webkit-mask: url(petitspoints.svg) no-repeat center center;
    mask: url(petitspoints.svg) no-repeat center center;
}
.newicon.points2 {
    -webkit-mask: url(petitspoints.svg) no-repeat center center /100% 100%;;
    mask: url(petitspoints.svg) no-repeat center center /100% 100%;;
}
.newiconutils.info {
    -webkit-mask: url(about.svg) no-repeat center center /100% 100%;
    mask: url(about.svg) no-repeat center center /100% 100%;
}
.newiconutils.haut {
    -webkit-mask: url(haut.svg) no-repeat center center /80% 62%;
    mask: url(haut.svg) no-repeat center center /80% 62%;
}
.newiconutils.bas {
    -webkit-mask: url(bas.svg) no-repeat center center /80% 62%;
    mask: url(bas.svg) no-repeat center center /80% 62%;
}
.newicon.exporter2 {
    -webkit-mask: url(exporter.svg) no-repeat center center /100% 100%;
    mask: url(exporter.svg) no-repeat center center /100% 100%;
}
.newicon.expexcel {
    -webkit-mask: url(excel.svg) no-repeat center center /100% 100%;
    mask: url(excel.svg) no-repeat center center /100% 100%;
}
.newiconconnexion.login {
    -webkit-mask: url(login.svg) no-repeat 3px center /90% 70%;
    mask: url(login.svg) no-repeat 3px center /90% 70%;
}
.newiconconnexion.password {
    -webkit-mask: url(cloturer.svg) no-repeat center center /90% 64%;
    mask: url(cloturer.svg) no-repeat center center /90% 64%;
}
.newicon.projets{
    -webkit-mask: url(projets.svg) no-repeat center /100% 100%;
    mask: url(projets.svg) no-repeat center /100% 100%;
    z-index: 3;
}
.newicon.updates{
    -webkit-mask: url(updates.svg) no-repeat center /100% 100%;
    mask: url(updates.svg) no-repeat center /100% 100%;
    z-index: 3;
}
.newicon.taches{
    -webkit-mask: url(taches.svg) no-repeat center /100% 100%;
    mask: url(taches.svg) no-repeat center /100% 100%;
    z-index: 3;
}
.newicon.envoyer{
    -webkit-mask: url(envoyer.svg) no-repeat 2px center /90% 90%;
    mask: url(envoyer.svg) no-repeat center center /90% 90%;
}
.newicontrcol.formatgauche {
    -webkit-mask: url(formatgauche.svg) no-repeat center center /100% 100%;
    mask: url(formatgauche.svg) no-repeat center center /100% 100%;
}
.newicontrcol.formatcentrer {
    -webkit-mask: url(formatcentrer.svg) no-repeat center center /100% 100%;
    mask: url(formatcentrer.svg) no-repeat center center /100% 100%;
}
.newicontrcol.formatdroite {
    -webkit-mask: url(formatdroite.svg) no-repeat center center /100% 100%;
    mask: url(formatdroite.svg) no-repeat center center /100% 100%;
}
.newicon.dialogna {
    -webkit-mask: url(dialogna.svg) no-repeat center center /100% 100%;
    mask: url(dialogna.svg) no-repeat center center /100% 100%;
}
.newicon.fullscreen {
	-webkit-mask: url(fullscreen.svg) no-repeat center;
	mask: url(fullscreen.svg) no-repeat center center /100% 100%;
}
.newicon.toutSelectionner {
	-webkit-mask: url(selectionner-tout.svg) no-repeat center;
	mask: url(selectionner-tout.svg) no-repeat center center /100% 100%;
}
.newicon.toutDeselectionner {
	-webkit-mask: url(deselectionner-tout.svg) no-repeat center;
	mask: url(deselectionner-tout.svg) no-repeat center center /100% 100%;
}
.newicon.vuehierarchie {
	-webkit-mask: url(menu2.svg) no-repeat center /100% 100%;
	mask: url(menu2.svg) no-repeat center center /100% 100%;
}

.newicon.publipost {
	-webkit-mask: url(publipost.svg) no-repeat center /100% 100%;
	mask: url(publipost.svg) no-repeat center center /100% 100%;
}

.formEnvoyerEmail .ssaccordeon .fondNewIconFleche{ 
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    right: 0px !important;
    margin-top: -3px !important;
    margin-right: 8px !important;
    left: 20px !important;
    float: right !important;
    position: relative !important;
}
.custom-layer .boutons.fr-command {
	top: 26px !important;
}
.newicon.file-folder {
    -webkit-mask: url(file-folder.svg) no-repeat center center /20px 20px;
    mask: url(file-folder.svg) no-repeat center center /20px 20px;
}
.newicon.file-file {
    -webkit-mask: url(file-file.svg) no-repeat center center /20px 20px;
    mask: url(file-file.svg) no-repeat center center /20px 20px;
}
.newicon.file-image {
    -webkit-mask: url(file-image.svg) no-repeat center center /20px 20px;
    mask: url(file-image.svg) no-repeat center center /20px 20px;
}
.newicon.file-music {
    -webkit-mask: url(file-music.svg) no-repeat center center /20px 20px;
    mask: url(file-music.svg) no-repeat center center /20px 20px;
}
.newicon.file-pdf {
    -webkit-mask: url(file-pdf.svg) no-repeat center center /20px 20px;
    mask: url(file-pdf.svg) no-repeat center center /20px 20px;
}
.newicon.file-ppt {
    -webkit-mask: url(file-ppt.svg) no-repeat center center /20px 20px;
    mask: url(file-ppt.svg) no-repeat center center /20px 20px;
}
.newicon.file-text {
    -webkit-mask: url(file-text.svg) no-repeat center center /20px 20px;
    mask: url(file-text.svg) no-repeat center center /20px 20px;
}
.newicon.file-video {
    -webkit-mask: url(file-video.svg) no-repeat center center /20px 20px;
    mask: url(file-video.svg) no-repeat center center /20px 20px;
}
.newicon.file-word {
    -webkit-mask: url(file-word.svg) no-repeat center center /20px 20px;
    mask: url(file-word.svg) no-repeat center center /20px 20px;
}
.newicon.file-xls {
    -webkit-mask: url(file-xls.svg) no-repeat center center /20px 20px;
    mask: url(file-xls.svg) no-repeat center center /20px 20px;
}
.newicon.file-zip {
    -webkit-mask: url(file-zip.svg) no-repeat center center /20px 20px;
    mask: url(file-zip.svg) no-repeat center center /20px 20px;
}
.newicon.Chart {
    -webkit-mask: url(Chart.svg) no-repeat center center/100% 100%;
    mask: url(Chart.svg) no-repeat center center/100% 100%;
}.newicon.Table {
    -webkit-mask: url(Table.svg) no-repeat center center/100% 100%;
    mask: url(Table.svg) no-repeat center center/100% 100%;
}.newicon.Copy {
    -webkit-mask: url(copy.svg) no-repeat center center/100% 100%;
    mask: url(copy.svg) no-repeat center center/80% 80%;
}

.boutoninvisible {
    width: 40px;
    min-width: 40px;
    height: 34px;
    display: flex;
    align-items: center;   
}

.newicon.user-check{
    -webkit-mask: url(user-check.svg) no-repeat center / 100% 100%;
    mask: url(user-check.svg) no-repeat center / 100% 100%;
}

.newicon.user-down{
    -webkit-mask: url(user-down.svg) no-repeat center / 100% 100%;
    mask: url(user-down.svg) no-repeat center / 100% 100%;
}