/*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

IONE 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>"

*/

/* 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;
}
.newFondIconeEntete {
    margin-right: 12px;
}

/* 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);
}
.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 */
.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);
}

.element .newicon { /* ICONE Simple (Utilisé partout) */
    background-color: var(--color-boutonbas);
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: auto;
    transition: 0.3s;
}
.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: var(--color-fondbtnfp);
}
.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: var(--color-fondbtnfp);
}
/* 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-boutonbasfondhover);
}
/* ICONES Menu de droite*/
.fondNewIconDroite {
    display: flex;
    background-color: var(--color-boutondroitefond);
    width: 32px;
    min-width: 32px;
    height: 35px;
    border-radius: 13px;
    /* 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);
}

/* 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);
}

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

/* ICONES */
/* -- Entete */
.newicon.parametres {
    -webkit-mask: url(parametre.svg) no-repeat center /100% 100%;
    mask: url(parametre.svg) no-repeat center /100% 100%;
}
.newicon.cloche {
    -webkit-mask: url(cloche.svg) no-repeat center /100% 100%;
    mask: url(cloche.svg) no-repeat center /100% 100%;
}
.newicon.mesDoc {
    -webkit-mask: url(file.svg) no-repeat center /100% 100%;
    mask: url(file.svg) no-repeat center /100% 100%;
}
.newicon.word {
    -webkit-mask: url(word.svg) no-repeat center /100% 100%;
    mask: url(word.svg) no-repeat center /100% 100%;
}
.newicon.loupe {
    -webkit-mask: url(dialogsearch.svg) no-repeat center /100% 100%;
    mask: url(dialogsearch.svg) no-repeat center /100% 100%;
}

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

/* Radius */
.radius .newiconeradius.rech {
    -webkit-mask: url(dialogsearch.svg) no-repeat center /90% 90%;
    mask: url(dialogsearch.svg) no-repeat center /90% 90%;
}
.radius .newiconeradius.menu {
    -webkit-mask: url(menu.svg) no-repeat center /100% 100%;
    mask: url(menu.svg) no-repeat center /100% 100%;
}
.newicondroite.menu {
    -webkit-mask: url(menu.svg) no-repeat center /90% 90%;
    mask: url(menu.svg) no-repeat center /90% 90%;
}
.radius .newiconeradius.fullscreen {
    -webkit-mask: url(fullscreen.svg) no-repeat center /90% 90%;
    mask: url(fullscreen.svg) no-repeat center /90% 90%;
}

/* Fonctions Bas*/
.newicon.chercher {
    -webkit-mask: url(dialogsearch.svg) no-repeat center /90% 90%;
    mask: url(dialogsearch.svg) no-repeat center /90% 90%;
}
.newicon.chercher2 {
    -webkit-mask: url(dialogsearch.svg) no-repeat center /100% 100%;
    mask: url(dialogsearch.svg) no-repeat center /100% 100%;
}
.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.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.revenir {
    -webkit-mask: url(retour.svg) no-repeat center /90% 90%;
    mask: url(retour.svg) no-repeat center /90% 90%;
}
.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.ajouter2 {
    -webkit-mask: url(ajouter.svg) no-repeat center /100% 100%;
    mask: url(ajouter.svg) no-repeat center /100% 100%;
}
.newicondroite.ajouter {
    -webkit-mask: url(ajouter.svg) no-repeat center center /90% 90%;
    mask: url(ajouter.svg) no-repeat center center /90% 90%;
}
.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.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 /90% 90%;
    mask: url(lister.svg) no-repeat center center /90% 90%;
}
.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 /90% 90%;
    mask: url(consulter.svg) no-repeat center center /90% 90%;
}
.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%;
}
.newicon.modifier2 {
    -webkit-mask: url(modifier.svg) no-repeat center /100% 100%;
    mask: url(modifier.svg) no-repeat center /100% 100%;
}
.newicondroite.modifier {
    -webkit-mask: url(modifier.svg) no-repeat center center /90% 90%;
    mask: url(modifier.svg) no-repeat center center /90% 90%;
}
.newicon.gauche {
    -webkit-mask: url(gauche.svg) no-repeat center /90% 90%;
    mask: url(gauche.svg) no-repeat center /90% 90%;
}
.newicon.droite {
    -webkit-mask: url(droite.svg) no-repeat center /90% 90%;
    mask: url(droite.svg) no-repeat center /90% 90%;
}
.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 /90% 90%;
    mask: url(poubelle.svg) no-repeat center center /90% 90%;
}
.newicon.enregistrer {
    -webkit-mask: url(enregistrer.svg) no-repeat center /100% 100%;
    mask: url(enregistrer.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%;
}
.newicondroite.valider {
    -webkit-mask: url(dialogcheck.svg) no-repeat center center /90% 90%;
    mask: url(dialogcheck.svg) no-repeat center center /90% 90%;
}
.newicondroite.cloturer {
    -webkit-mask: url(cloturer.svg) no-repeat center center /90% 90%;
    mask: url(cloturer.svg) no-repeat center center /90% 90%;
}
.newicondroite.masquer {
    -webkit-mask: url(masquer.svg) no-repeat center center /90% 90%;
    mask: url(masquer.svg) no-repeat center center /90% 90%;
}
.newicondroite.imprimer {
    -webkit-mask: url(imprimer.svg) no-repeat center center /90% 90%;
    mask: url(imprimer.svg) no-repeat center center /90% 90%;
}
.newicondroite.exporter {
    -webkit-mask: url(exporter.svg) no-repeat center center /90% 90%;
    mask: url(exporter.svg) no-repeat center center /90% 90%;
}
.newicondroite.points {
    -webkit-mask: url(petitspoints.svg) no-repeat center center /90% 90%;
    mask: url(petitspoints.svg) no-repeat center center /90% 90%;
}
.newiconutils.info {
    -webkit-mask: url(about.svg) no-repeat center center /80% 62%;
    mask: url(about.svg) no-repeat center center /80% 62%;
}
.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(excel.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.envoyer{
    -webkit-mask: url(envoyer.svg) no-repeat center center /90% 90%;
    mask: url(envoyer.svg) no-repeat center center /90% 90%;
}
.newicon.flechebas {
    -webkit-mask: url(flechebas.svg) no-repeat center center /100% 100%;
    mask: url(flechebas.svg) no-repeat center center /100% 100%;
}
.newicon.flechehaut {
    -webkit-mask: url(flechehaut.svg) no-repeat center center /100% 100%;
    mask: url(flechehaut.svg) no-repeat center center /100% 100%;
}