/* PARAMETRES GENERAUX */

@import url('https://fonts.googleapis.com/css?family=Poppins');
/* Police GREE */
@import url('https://fonts.googleapis.com/css?family=Raleway');

            TD 					{ font-family: 'Nunito', arial; }
			A 					{ color:inherit; text-decoration:none; border: none; }
			A img               { border: none}
			A:hover,A:active	{ color:#F35712; text-decoration:none;}
			
			TD.spectitle		{ border-bottom : 1px solid #9F9F9F; }
			TD.speccontent		{ border-left : 1px solid #9F9F9F; border-bottom : 1px solid #9F9F9F; }

input:focus, select:focus, textarea:focus {outline:0;border-color:#63D1CC;}

div, input,select { font-family: 'Poppins', arial;}

textarea {font-family: 'Poppins', arial;}

img {
    max-width: 100%;
}
 
p {
    margin-top : 2px; 
    margin-bottom : 2px; 
    line-height: 1.4; 
 }

ul 
{
    
    line-height: 1.2;
    margin-top:5px;
    margin-left:-24px
}

hr 
{   height:1px;
    line-height:1px;
    color:#999999;
    background-color:#999999;
    border-color:#999999;
    
      }
    
.paragraphe {
    line-height: 1.6;
}

/* DESIGN SYSTEM */

:root { --grey1: #FBFCFF;--grey2: #F2F4FB;--grey3: #E6EAF7;--grey4: #DFE1EC;--grey5: #BFC3D9;--grey6: #9FA5C6;--grey7: #7F87B3;--grey8: #505887;--grey9: #4C5480;--grey10: #1C295D;
        --primary1: #63D1CC;--green1: #C1EDEB;
        --black: #000000;--white: #FFFFFF;
        --error:#F8446F;--success: #00D455;--warning: #F9896B;--info: #4C6FB7;
        --orange1:#FEF3F0;
        --red: #F8446F;--blue: #4E4DB0;--blue_action_map: #0093FD;--purple_info_map: #AD37E4;
}

/* LOADING PAGE */

#loader  {
    position:fixed;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    left:45%;
    top:30%;
    width:200px;
    height:200px;
    opacity:0.9;
    z-index:299;
    background:var(--primary1);
    border-radius:8px;
           }
#loader #image {
    position:relative;
    width:150px;
    height:150px;
    }
#loader #texte {
    position:relative;
    width:150px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.4em;
    color:var(--white);
}

/* FEEDBACK*/
#feedback  {
    position:fixed;
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    left:45%;
    top:30%;
    width:200px;
    height:200px;
    opacity:0.9;
    z-index:399;
    background:var(--primary1);
    border-radius:8px;
          }
#feedback #image {
    position:relative;
    margin-top:20px;
    width:100px;
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
    }
#feedback #texte {
    position:relative;
    width:200px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.5em;
    color:var(--white);
}

/* TOOLTIP */
    #tooltip {
        position: fixed;
        display: none;
        z-index: 500;
            }
    #tooltip_arrow_left {
        position: relative;
        width:6px;
        height:50px;
        background-image: url(/img/arrow.svg);
        background-position: center;
        background-repeat: no-repeat;
    }
     #tooltip_arrow_up {
        position: relative;
        width:190px;
        height:6px;
        background-image: url(/img/arrow_up.svg);
        background-position: center;
        background-repeat: no-repeat;
       
    }
#tooltip_arrow_down {
    position: relative;
    width: 190px;
    height: 6px;
    background-image: url(/img/Arrow_down.svg);
    background-position: center;
    background-repeat: no-repeat;
}
#tooltip_arrow_rightdown {
    position: relative;
    width: 185px;
    height: 6px;
    background-image: url(/img/Arrow_down.svg);
    background-position: right;
    background-repeat: no-repeat;
}
#tooltip_arrow_switch_rightdown {
    position: relative;
    width: 90px;
    height: 6px;
    background-image: url(/img/Arrow_down.svg);
    background-position: right;
    background-repeat: no-repeat;
}

#tooltip_arrow_switch_leftdown {
    position: relative;
    width: 90px;
    height: 6px;
    margin: 0px 60px;
    background-image: url(/img/Arrow_down.svg);
    background-position: left;
    background-repeat: no-repeat;
}

    #tooltip_arrow_right {
        position: relative;
         width:6px;
        height:50px;
        background-image: url(/img/arrow_right.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size:6px;
    }

   #tooltip_label {
        position: relative;
        display:flex;
        justify-content:center;
        align-items:center;
        border-radius: 4px;
        padding:10px;
        background: var(--grey10);
        color:#ffffff;
        font-size:1.2em;
        width: 190px;
        min-height:28px;
          }


/* BODY*/
body {
    background-color: var(--grey2);
    font-size: 10px;
    line-height:1.4;
	margin-left: 2px;
	margin-top: 0px;
	background-position: top;
    background-position-y:-20px;
	background-repeat:repeat-x; 
    
}


/* TOP BAR */
#top-bar {
    position:fixed;
    z-index:91;
    top:1px;
    left:0px;
    width:100%;
    height:55px;
    background-color:var(--white);
    border-bottom: 1px solid var(--grey3);
    box-shadow: 0px 8px 16px rgba(88, 92, 229, 0.1);

    display:flex;
}

#top-bar #logo {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:200px;
    height:100%;
    border-right: 1px solid #E6EAF7;
  }
#top-bar #logo #image1 {
    width:34px;
    height:34px;
    padding:4px;
    background-image: url(/img/logo1.svg);
    background-repeat:no-repeat;
    background-position:center;
  }

#top-bar #logo #image2 {
    /* taille pour version calixta de logo 2
    width:118px;
    height:20px;
    */
    /* taille pour version noel de logo 2 */
    width:130px;
    height:30px;
    background-image: url(/img/logo2.svg);
    background-repeat: no-repeat;
    background-position: center;
}

#top-bar #logo .logo_aquarea {
    width:75%;
    height:95%;
}
#top-bar #logo .logo_nibe {
    width:60%;
    height:auto;
}

#top-bar #logo .logo_domusa {
    width: 70%;
    height: auto;
}

#top-bar #logo .logo_teddington {
    width: 70%;
    height: auto;
}

#top-bar #netude {
    position:relative;
    width:260px;
    height:100%;
    padding:5px 10px 5px 15px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content:flex-start;
    }
#top-bar #netude #client {
    position:relative;
    height:26px;
    width:100%;
    font-size:1.6em;
    color:var(--grey10);
    font-weight:600;
}
#top-bar #netude #reference {
    position:relative;
    height:22px;
    width:100%;
    font-size:1.4em;
    color:var(--grey7);
    font-weight:400;
    overflow:hidden;
}

#top-bar #parametre {
    position:relative;
    width:70px;
    height:100%;
    border-right: 1px solid #E6EAF7;

    display: flex;
    align-items: center;
    justify-content:center;
    }
#top-bar #parametre .item {
    position:relative;
    width: 22px;
    height: 22px;
    background-image: url(/img/settings.svg);
    background-repeat:no-repeat;
    background-position:center;
    }
#top-bar #parametre .item:hover {
    cursor:pointer;
}

#top-bar #navbar {
    position:relative;
    width:auto;
    height:100%;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    column-gap: 20px;
}

#top-bar .navbar_listeetude {
    margin-left:150px;
}

#top-bar #navbar .item {
    position:relative;
    width: 130px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    }
#top-bar #navbar .item_nodispo {
    position:relative;
    width: 130px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    }
#top-bar #navbar .item:hover {
    cursor:pointer;
}


#top-bar #navbar .item .nouveau {
    position: absolute;
    top: 5px;
    width: 60px;
    height: 18px;
    background: var(--purple_info_map);
    border-radius: 8px;
    font-size: 1.1em;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
} 

#top-bar #navbar .item .texte {
    position:relative;
    padding-top:25px;
    width:130px;
    height:16px;
    font-size:1.5em;
    color:var(--grey8);
    text-align:center;
 }
#top-bar #navbar .item .texte_select {
    position:relative;
    padding-top:25px;
    width:130px;
    height:16px;
    font-size:1.5em;
    color:var(--grey10);
    font-weight:bold;
    text-align:center;
 }
#top-bar #navbar .item_nodispo .texte_nodispo {
    position:relative;
    padding-top:25px;
    width:130px;
    height:16px;
    font-size:1.5em;
    color:var(--grey5);
    text-align:center;
 }
#toto .item .texte_select {
    position:relative;
    padding-top:34px;
    width:130px;
    height:16px;
    font-size:2.5em;
    color:var(--grey10);
    font-weight:bold;
    text-align:center;
 }

#top-bar #navbar .item .activebar_on {
    position:absolute;
    bottom:0px;
    width:100%;
    height:4px;
    background-color:var(--primary1);
    border-radius: 4px 4px 0px 0px;
 }


#top-bar #navbar .item .activebar_off {
    position:absolute;
    bottom:0px;
    width:100%;
    height:4px;
    background-color:var(--white);
    border-radius: 4px 4px 0px 0px;
 }
#top-bar #navbar .item:hover > .activebar_off {
    background-color:var(--primary1);
    transition: all 0.3s;
}


#top-bar #help {
    position:absolute;
    top:2px;
    right:5px;
    width:170px;
    height:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    column-gap:8px;
    }
#top-bar #help #image {
    width:16px;
    height:16px;
    background-image: url(/img/help.svg);
    background-repeat:no-repeat;
    background-position:center;
}
#top-bar #help #texte {
    width:120px;
    height:16px;
    font-size:1.2em;
    color:var(--blue);
    cursor:pointer;
    }

#top-bar #help #dropdownhelp {
    position:absolute;
    z-index:10;
    display:none;
    top:25px;
    right:0px;
    width:420px;
    height:auto;
    background: #FFFFFF;
    border: 1px solid var(--grey5);
    box-shadow: 0px 4px 8px rgba(78, 77, 176, 0.16);
    border-radius: 6px;
}
#top-bar #help #dropdownhelp .ligne {
    width:calc(100% - 20px);
    min-height:40px;
    padding:10px 10px;
    display:flex;
    }
#top-bar #help #dropdownhelp .ligne .picto {
    width:70px;
    height:30px;
    display:flex;
    justify-content:center;
    color:var(--primary1);
    }
#top-bar #help #dropdownhelp .ligne .texte {
    width:calc(100% - 100px);
    height:auto;
    color:var(--grey10);
    font-size:1.4em;
    cursor:pointer;
}

#dropdownhelp a:hover {
    color: var(--primary1);
}

#top-bar #help #dropdownhelp #footer {
    width:calc(100% - 80px);
    padding:20px 0px 10px 80px;
    min-height:50px;
    background:var(--grey2);
}

#top-bar #help #dropdownhelp #footer .item {
    width:calc(100% - 80px);
    height:40px;
    font-size:1.3em;
    color:var(--grey9);
    font-weight:bold;
    cursor:pointer;
}

#top-bar #topbarblur {
    position:fixed;
    z-index:5;
    left:0px;
    top:0px;
    height: 100%;
    width:100%;
    background:#777777;
    opacity:0.01;
    display:none;
    }

#top-bar #useraccount {
    position:absolute;
    z-index:10;
    top:25px;
    right:20px;
    width:160px;
    height:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    column-gap:8px;
    cursor:pointer;
}
#top-bar #useraccount #texte {
    width:140px;
    height:16px;
    font-size:1.2em;
    color:var(--grey10);
    font-weight:bold;
    text-align:right;
    }
#top-bar #useraccount #image {
    width:8px;
    height:6px;
    background-image: url(/img/chevron.svg);
    background-repeat:no-repeat;
    background-position:center;
    cursor:default;
}

#top-bar #useraccount #dropdown {
    position:absolute;
    display:none;
    top:25px;
    right:0px;
    width:224px;
    height:auto;
    background: #FFFFFF;
    border: 1px solid var(--grey5);
    box-shadow: 0px 4px 8px rgba(78, 77, 176, 0.16);
    border-radius: 6px;
}
#top-bar #useraccount #dropdown .ligne {
    width:calc(100% - 20px);
    height:48px;
    padding:0px 10px;
    border-bottom: 1px solid  var(--grey3);
    display:flex;
    }
#top-bar #useraccount #dropdown .ligne:hover {
    cursor:pointer;
    background:var(--grey2);
    transition: all 0.3s;
}
#top-bar #useraccount #dropdown .ligne .image {
    width:50px;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
#top-bar #useraccount #dropdown .ligne .texte {
    width:170px;
    height:100%;
    font-size:1.3em;
    color:var(--grey10);
    display:flex;
    align-items:center;
}



/* SIDE BAR  */
#sidebar1 {
    position:fixed;
    z-index:11;
    width:85px;
    top:55px;
    height:calc(100% - 55px);
    background:#FFFFFF;
      }
#sidebar2 {
    position:fixed;
    z-index:10;
    left:85px;
    width:80px;
    top:55px;
    height:calc(100% - 55px);
    background:var(--grey4);
      }

#sidebar1 #content, #sidebar2 #content {
    position:relative;
    margin-top:40px;
    width:100%;
    height:auto;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    column-gap:30px;
    }

#sidebar1 #content .item {
    width:100%;
    height:100px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    column-gap:5px;
}
#sidebar2 #content .item {
    position:relative;
    width:100%;
    height:70px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    column-gap:5px;
}

#sidebar1 #content .item .dessiner {
    width:48px;
    height:48px;
    background-color:var(--grey3);
    border-radius:8px;
    background-image: url(/img/sidebar_dessiner.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#sidebar1 #content .item .ouverture {
    width:48px;
    height:48px;
    background-color:var(--grey3);
    border-radius:8px;
    background-image: url(/img/sidebar_ouverture.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#sidebar1 #content .item .mobilier {
    width:48px;
    height:48px;
    background-color:var(--grey3);
    border-radius:8px;
    background-image: url(/img/sidebar_mobilier.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#sidebar1 #content .item .editer {
    width: 48px;
    height: 48px;
    background-color: var(--grey3);
    border-radius: 8px;
    background-image: url(/img/sidebar_editer.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#sidebar1 #content .item .chiffrer {
    width: 48px;
    height: 48px;
    background-color: var(--grey3);
    border-radius: 8px;
    background-image: url(/img/sidebar_chiffrer.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#sidebar1 #content .item .comparer {
    width: 48px;
    height: 48px;
    background-color: var(--grey3);
    border-radius: 8px;
    background-image: url(/img/sidebar_comparer.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#sidebar1 #content .item .devis {
    width: 48px;
    height: 48px;
    background-color: var(--grey3);
    border-radius: 8px;
    background-image: url(/img/sidebar_devis.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#sidebar1 #content .item .piece {
    width:48px;
    height:48px;
    background-color:var(--grey3);
    border-radius:8px;
    background-image: url(/img/sidebar_piece.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#sidebar1 #content .item .detail {
    width:48px;
    height:48px;
    background-color:var(--grey3);
    border-radius:8px;
    background-image: url(/img/sidebar_detail.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#sidebar1 #content .item .graphique {
    width:48px;
    height:48px;
    background-color:var(--grey3);
    border-radius:8px;
    background-image: url(/img/sidebar_graphique.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#sidebar1 #content .item .texte {
    margin-top:5px;
    font-size:1.2em;
    color:var(--grey8);
}

#sidebar1 #content .item .select {
    background-color:var(--primary2);
    }

#tutobar {
    position:fixed;
    z-index:20;
    width:300px;
    top:0px;
    height:auto;
          }

#tutobar .closetutobar {
    position:absolute;
    z-index:21;
    left:305px;
    top:8px;
    width:30px;
    height:30px;
    border-radius:18px;
    border:2px solid var(--grey7);
    opacity:0.8;
    color:var(--grey7);
    font-size:1.6em;
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
          }

#tutobar .devtutobar {
    position:absolute;
    z-index:21;
    left:50px;
    top:8px;
    width:30px;
    height:30px;
    border-radius:18px;
    border:2px solid var(--grey7);
    opacity:0.8;
    color:var(--grey7);
    font-size:1.6em;
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
          }

#tutobar .closetutobar:hover, #tutobar .devtutobar:hover {
    cursor:pointer;
    opacity:0.5;
}

#tutobar .tutobox {
    position:relative;
    width:100%;
    min-height:40px;
    max-height:80px;
    padding:5px 0px;
    border-radius:20px;
    margin-bottom:10px;
    background:var(--grey9);
    display:flex;
    align-items:center;
    color:#ffffff;
        }
#tutobar .tutobox .numberbox {
    width:30px;
    height:30px;
    margin-left:5px;
    background:#ffffff;
    color:var(--grey10);
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.3em;
    font-weight:bold;
       
}
#tutobar .tutobox .textbox {
    width:calc(100% - 45px);
    margin:0px 10px;
    height:100%;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    font-size:1.2em;
        }

.decaltuto {
    margin-top:270px;
}

#sidebar2 #content .item .cloison {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_cloison.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .murext {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_murext.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .ajoutnode {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_ajoutnode.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .supprnode {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_supprnode.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .majmur {
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    border-radius: 8px;
    background-image: url(/img/sidebar_murextreg.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#sidebar2 #content .item .porte {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_porte.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .doubleporte {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_doubleporte.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .baie {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_baie.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .fenetre {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_fenetre.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .ouverturemur {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_ouverturemur.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}
#sidebar2 #content .item .velux {
    width:48px;
    height:48px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img/sidebar_velux.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#sidebar2 #content .item .mobilier {
    width:48px;
    height:42px;
    background-color:#ffffff;
    border-radius:8px;
    background-image: url(/img_mobilier/icone_placard.png);
    background-size:80%;
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
}


#sidebar2 #content .item .select {
    background-color:var(--primary2);
    }

    #sidebar1 #content .item .dessiner:hover, #sidebar1 #content .item .ouverture:hover, #sidebar1 #content .item .mobilier:hover, #sidebar1 #content .item .editer:hover, #sidebar1 #content .item .chiffrer:hover, #sidebar1 #content .item .comparer:hover, #sidebar1 #content .item .devis:hover, #sidebar1 #content .item .piece:hover, #sidebar1 #content .item .detail:hover, #sidebar1 #content .item .graphique:hover {
        background-color: var(--green1);
        transition: all 0.3s;
    }
#sidebar2 #content .item .cloison:hover, #sidebar2 #content .item .murext:hover,#sidebar2 #content .item .ajoutnode:hover,#sidebar2 #content .item .supprnode:hover,,#sidebar2 #content .item .majmur:hover {
     background-color:var(--green1);
     transition: all 0.3s;
}
#sidebar2 #content .item .porte:hover, #sidebar2 #content .item .doubleporte:hover,#sidebar2 #content .item .baie:hover,#sidebar2 #content .item .ouverturemur:hover,#sidebar2 #content .item .fenetre:hover,#sidebar2 #content .item .velux:hover,#sidebar2 #content .item .mobilier:hover {
     background-color:var(--green1);
     transition: all 0.3s;
}


/* FORMS */

.form_select, .form_input, .form_inputicon {
    position:relative;
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 10px 0px 8px;
   
    width: 180px;
    height: 32px;

    /* Neutral/White */
    background: #FFFFFF;

    /* Grey 5 */
    border: 1px solid var(--grey5);
    color:var(--grey10);
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 0;
}

.form_input_warning {
    border: 2px solid var(--error);
}

.form_inputicon:after {
    position:absolute;
    z-index:5;
    content:"w";
    left:100px;
    top:5px;
    width:15px;
    height:15px;
    background-image: url(/img/login_icon.svg);
    background-repeat:no-repeat;
    background-position:center;

}

.form_select_icon {
    position:absolute;
    top:12px;
    right:10px;
    width:8px;
    height:6px;
    background-image: url(/img/chevron.svg);
    background-repeat:no-repeat;
    background-position:center;
}
.form_outselect {
    position:relative;
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    padding: 0px 10px 0px 8px;
   
    width: 180px;
    height: 32px;

    /* Neutral/White */
    background-color: var(--green1);

    /* Grey 5 */
    border: 1px solid var(--grey7);
    color:var(--grey10);
    border-radius: 8px;
    cursor:pointer;

    color:var(--grey10);
    font-size:1.3em;
    
}


[type="checkbox"] {
	position: absolute;
	left: -10px;
	top: -10px;
	opacity: 0.01;
}
[type="checkbox"] + label {
	position: relative;
	padding-left: 0em;
	font-size: 0.05em;
	line-height: 0;
	cursor: pointer; 
}

/* Aspect de la case */
/* Aspect de la case */
[type="checkbox"]:not(:checked) + label::before {
	content: '';
	position: absolute;
	left: -10px;
	top: -10px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--grey5);
	background: #FFF;
	border-radius: 4px;
	}
[type="checkbox"]:checked + label::before {
	content: '';
	position: absolute;
	left: -10px;
	top: -10px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--primary1);
	background: var(--primary1);
	border-radius: 4px;
	}

/* Aspect de la coche */
[type="checkbox"]:not(:checked) + label::after,
[type="checkbox"]:checked + label::after {
	content: url(/img/checkbox.svg);
	position: absolute;
	top: -4px;
	left: -4px;
    width: 20px;
	height: 20px;
	font-size: 1.6em;
    color: var(--grey8);
	line-height: 0;
	transition: all .2s; /* Petite transition */
}

/* Aspect non cochée */
[type="checkbox"]:not(:checked) + label::after {
	opacity: 0;
	transform: scale(0) rotate(45deg);
}

/* Aspect cochée */
[type="checkbox"]:checked + label::after {
	opacity: 1;
	transform: scale(1) rotate(0);
}

.graphcaptage {
    width: calc(100% - 40px);
    padding: 20px;
    height: 250px;
    display: flex;
}

.graphcaptage .texte {
   width: 45%;
   display: flex;
   align-items: center;
   font-size: 1.6em;
   color: var(--grey10);
}

.graphcaptage .image {
   width: 55%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.form_lignetitre {
    position:relative;
    margin-top:10px;
    height:32px;
    width:calc(100% - 30px);
    padding: 4px 15px;
    border-top: 1px solid var(--grey3);

    display: flex;
    align-items:center;
    color:var(--primary1);
    font-size:1.7em;
    font-weight:bold;
}

.form_lignetitresup {
    position: relative;
    margin-top: 10px;
    height: 32px;
    width: calc(100% - 30px);
    padding: 4px 15px;
    display: flex;
    align-items: center;
    color: var(--primary1);
    font-size: 1.7em;
    font-weight: bold;
}

.form_lignetitre_vert {
    position:relative;
    margin-top:10px;
    height:32px;
    width:calc(100% - 30px);
    padding: 4px 15px;
    border-top: 1px solid var(--grey3);

    display: flex;
    align-items:center;
    color:#ffffff;
    background:var(--primary1);
    font-size:1.7em;
    font-weight:bold;
}

.form_lignetitre .blocbutton, .form_lignetitre_vert .blocbutton {
    width:30px;
    cursor:pointer;
}
.form_lignetitre .titre, .form_lignetitre_vert .titre {
    width:calc(100% - 40px);
    margin-left:10px;
}

.form_lignesoustitre {
    position:relative;
    margin-top:10px;
    margin-left:20px;
    height:32px;
    width:calc(100% - 30px);
    
    display: flex;
    align-items:center;
    color:var(--grey8);
    font-size:1.6em;
    font-weight:bold;
}

.form_lignecommentaire {
    position:relative;
    margin-top:10px;
    margin-left:20px;
    height:32px;
    width:calc(100% - 30px);
    
    display: flex;
    align-items:center;
    color:var(--grey8);
    font-size:1.5em;
    }

.form_barreligne {
    position:relative;
    margin-top:20px;
    height:12px;
    width:100%;
    background-color:var(--grey3);
  }
.form_barrelignemin {
    position:relative;
    margin-top:10px;
    height:6px;
    width:100%;
    background-color:var(--grey3);
  }

.form_ligne {
    position:relative;
    min-height:38px;
    padding: 2px 24px;
    border-top: 1px solid var(--grey3);
    display: flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
       }

.form_ligne .custom_container {
    display: flex;
    gap: 100px;
    justify-content: flex-start;
      
}

.form_lignesmall {
    height: 32px;
    display: flex;
    align-items: flex-end;
    color: var(--grey7);
    font-size: 1em;
    padding: 4px 24px;
    border-top: 1px solid var(--grey3);
}

    .form_lignebold {
        position: relative;
        min-height: 38px;
        padding: 2px 24px;
        border-top: 2px solid var(--grey5);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .form_lignemin {
        position: relative;
        width: calc(100% - 48px);
        height: 25px;
        padding: 4px 24px;
        border-top: 1px solid var(--grey3);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .form_lignecaract {
        position: relative;
        width: calc(100% - 48px);
        height: 25px;
        padding: 4px 24px;
        border-top: 1px solid var(--grey3);
        display: flex;
        justify-content:: flex-start;
        align-items: center;
    }

    .form_lignesup {
        position: relative;
        height: 36px;
        padding: 4px 24px;
        display: flex;
        justify-content: space-between;
    }

    .form_ligneend {
        position: relative;
        height: 2px;
        border-top: 1px solid var(--grey3);
    }


    .form_block {
        position: relative;
        height: 38px;
        margin: 2px 0px;
        width: auto;
        display: flex;
        justify-content: space-between;
    }

    .form_label {
        height: 100%;
        min-width: 140px;
        width: auto;
        padding: 0px 10px 0px 10px;
        color: var(--grey10);
        font-size: 1.3em;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .form_control {
        height: 100%;
        width: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .form_control_suffixe {
        height: 100%;
        margin-left: 5px;
        display: flex;
        align-items: center;
        color: var(--grey7);
        font-size: 1.2em;
    }

    .form_caractlabel {
        height: 100%;
        width: 65%;
        width: auto;
        padding: 0px 10px 0px 10px;
        color: var(--grey10);
        font-size: 1.4em;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .form_caractvalue {
        height: 100%;
        color: var(--grey10);
        font-size: 1.4em;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .form_caractsuffixe {
        height: 100%;
        display: flex;
        align-items: center;
        color: var(--grey7);
        font-size: 1.3em;
    }

    .form_barreboutons {
        position: relative;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 20px;
    }

    .form_radiocontrol {
        height: 100%;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .form_radiolabel {
        height: 100%;
        width: calc(100% - 60px);
        margin-left: 10px;
        display: flex;
        align-items: center;
        color: var(--grey10);
        font-size: 1.3em;
    }

    .messageinfo {
        position: relative;
        margin: 10px;
        padding: 10px;
        width: calc(100% - 20px);
        height: auto;
        border: 2px solid var(--warning);
        border-radius: 6px;
        font-size: 1.4em;
        font-weight: bold;
        color: var(--grey8);
    }

.messageWarning_body {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    background: #FEF3F0;
}

.messageWarning_icone {
    position: relative;
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.messageWarning_message {
    display: flex;
    width: 90%;
    height: 100%;
    min-height: 80px;
    align-items: center;
    font-size: 1.5em;
    color: #333333;
}

    /* BOUTONS */
    .bouton {
        position: relative;
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.6em;
        font-weight: bold;
        cursor: pointer;
    }

    .boutonsmall {
        position: relative;
        width: 24px;
        height: 24px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.3em;
        font-weight: bold;
        cursor: pointer;
    }

    .boutonimage {
        position: relative;
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.6em;
        font-weight: bold;
        cursor: pointer;
    }

    .bouton:hover, .boutonsmall:hover, .boutonimage:hover {
        opacity:0.8;
        transition:all 0.3s;
    }

    .bouton_noaccess {
        cursor:default;
        opacity:0.6;
    }

    .rouge {
        background-color: var(--warning);
        border: 1px solid var(--grey3);
        color: #ffffff;
    }

    .vert {
        background-color: var(--primary1);
        border: 1px solid #FFFFFF;
        color: #ffffff;
    }

    .vert_clair {
        background-color: var(--green1);
        border: 1px solid #FFFFFF;
        color: #ffffff;
    }

    .gris {
        background-color: var(--grey3);
        color: var(--grey7);
    }

    .transparent_vert {
        z-index: 10;
        border: 1px solid var(--primary1);
        color: var(--primary1);
    }

    .copie_icon {
        color: var(--primary1);
    }

    .transparent_blanc {
        z-index: 10;
        border: 1px solid #FFFFFF;
        color: #FFFFFF;
    }

    .transparent_rouge {
        z-index: 10;
        border: 1px solid var(--error);
        color: var(--error);
    }

    .purple {
        z-index: 10;
        background-color: var(--purple_info_map);
        border: 1px solid #FFFFFF;
        color: #ffffff;
    }

    /* MESSAGE  */
    .message {
        position: relative;
        width: 500px;
        height: auto;
        padding: 10px;
        background-color: var(--grey3);
        border-radius: 8px;
        display: flex;
        align-items: flex-start;
    }

        .message .icone {
            width: 60px;
            height: 20px;
            background-image: url(/img/info.svg);
            background-repeat: no-repeat;
            background-position: center;
        }

        .message .content {
            width: calc(100% - 80px);
            height: auto;
            display: flex;
            flex-direction: column;
        }

            .message .content .titre {
                position: relative;
                width: 100%;
                height: 30px;
                font-size: 1.5em;
                font-weight: 600;
                color: var(--info);
            }

            .message .content .corps {
                position: relative;
                width: 100%;
                height: auto;
                margin-top: 10px;
                font-size: 1.3em;
                color: var(--info);
            }

    /* TOOGLE BAR */
    #togglebar {
        width: 240px;
        height: 32px;
        background: var(--primary1);
        border-radius: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 2px 0px 2px;
    }

        #togglebar .element {
            height: 28px;
            width: 110px;
            z-index: 1;
            border-radius: 14px;
            font-size: 1.3em;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        #togglebar .activeelement {
            height: 28px;
            width: 110px;
            z-index: 2;
            background: #ffffff;
            border-radius: 14px;
            font-size: 1.3em;
            color: var(--grey10);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }


    /* CARTOUCHE ENTETE */
    #cartouche_entete {
        position: relative;
        width: calc(100% - 20px);
        padding: 10px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        #cartouche_entete #logo {
            width: 20%;
            height: 42px;
            display: flex;
            justify-content:flex-start;
            align-items: center;
        }

        #cartouche_entete .colonne {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        #cartouche_entete .label {
            width: 100%;
            height: 50%;
            font-size: 1.4em;
            color: var(--grey7);
        }

        #cartouche_entete .valeur {
            width: 100%;
            height: 50%;
            font-size: 1.4em;
            font-weight: bold;
            color: var(--grey10);
        }


    #cartouche_entete_reference {
        position: relative;
        width: calc(100% - 10px);
        height: 8px;
        background: #ffffff;
        display: flex;
    }

        #cartouche_entete_reference .label {
            width: 200px;
            height: 100%;
            background: var(--primary2);
            font-size: 1.4em;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #cartouche_entete_reference .valeur {
            width: calc(100% - 200px);
            height: 100%;
            background: var(--grey3);
            font-size: 1.6em;
            font-weight: bold;
            color: #var(--grey10);
            display: flex;
            align-items: center;
        }


    /* PARAMETRE ETUDE */
    #onglet {
        width: 100%;
        height: 33px;
        margin-top: 00px;
        border-bottom: 1px solid var(--grey5);
        display: flex;
        justify-content: flex-start
    }

        #onglet .element {
            width: 240px;
            height: 32px;
            margin-right: 3px;
            background: var(--grey5);
            border-radius: 6px 6px 0px 0px;
            color: #ffffff;
            font-size: 1.5em;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #onglet .select {
            background: var(--primary1);
            color: var(--grey8);
        }

        #onglet .element:hover {
            cursor: pointer;
            background: var(--primary1);
            color: var(--grey8);
            transition: all 0.3s;
        }

    /* USER NAVIGATION */
    #user_nav {
        position: fixed;
        z-index: 200;
        top: 0px;
        left: 250px;
        width: calc(100% - 250px);
        height: 100%;
        background: var(--grey1);
        border: 1px solid var(--grey3);
        transition: width 0.4s ease-in-out;
        display: flex;
        flex-direction: column;
    }

        #user_nav #userheader {
            position: relative;
            width: 100%;
            height: 65px;
            background: var(--grey1);
            border-bottom: 1px solid var(--grey3);
            display: flex;
        }

            #user_nav #userheader #bouton {
                width: 70px;
                height: 100%;
                background-image: url(/img/modal_close.svg);
                background-repeat: no-repeat;
                background-position: center;
            }

                #user_nav #userheader #bouton:hover {
                    cursor: pointer;
                    background-color: var(--primary1);
                    transition: all 0.3s;
                }

            #user_nav #userheader #texte {
                height: 100%;
                margin-left: 10px;
                color: var(--grey10);
                font-size: 2.4em;
                font-weight: bold;
                display: flex;
                align-items: center;
            }

        #user_nav #usersidebar {
            position: absolute;
            top: 66px;
            left: 0px;
            width: 100px;
            height: calc(100% - 66px);
            background: #ffffff;
            overflow-y: scroll;
        }

            #user_nav #usersidebar #content {
                position: relative;
                margin-top: 40px;
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                column-gap: 30px;
            }

                #user_nav #usersidebar #content .item {
                    width: 100%;
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    column-gap: 5px;
                }


                    #user_nav #usersidebar #content .item .infos {
                        width: 48px;
                        height: 48px;
                        background-color: var(--grey3);
                        border-radius: 8px;
                        background-image: url(/img/user.svg);
                        background-position: center;
                        background-repeat: no-repeat;
                        cursor: pointer;
                    }

                    #user_nav #usersidebar #content .item .equipe {
                        width: 48px;
                        height: 48px;
                        background-color: var(--grey3);
                        border-radius: 8px;
                        background-image: url(/img/equipe.svg);
                        background-position: center;
                        background-repeat: no-repeat;
                        cursor: pointer;
                    }

                    #user_nav #usersidebar #content .item .marque {
                        width: 48px;
                        height: 48px;
                        background-color: var(--grey3);
                        border-radius: 8px;
                        background-image: url(/img/sidebar_detail.svg);
                        background-position: center;
                        background-repeat: no-repeat;
                        cursor: pointer;
                    }

                    #user_nav #usersidebar #content .item .abonnement {
                        width: 48px;
                        height: 48px;
                        background-color: var(--grey3);
                        border-radius: 8px;
                        background-image: url(/img/abonnement.svg);
                        background-position: center;
                        background-repeat: no-repeat;
                        cursor: pointer;
                    }

                     #user_nav #usersidebar #content .item .parametre {
                        width: 48px;
                        height: 48px;
                        background-color: var(--grey3);
                        border-radius: 8px;
                        background-image: url(/img/settings.svg);
                        background-position: center;
                        background-repeat: no-repeat;
                        cursor: pointer;
                    }

                    #user_nav #usersidebar #content .item .texte {
                        margin-top: 5px;
                        font-size: 1.2em;
                        color: var(--grey8);
                    }

                    #user_nav #usersidebar #content .item .select {
                        background-color: var(--primary1);
                    }

                    #user_nav #usersidebar #content .item .infos:hover, #user_nav #usersidebar #content .item .equipe:hover, #user_nav #usersidebar #content .item .marque:hover, #user_nav #usersidebar #content .item .abonnement:hover {
                        background-color: var(--primary1);
                        transition: all 0.3s;
                    }

    .userbody_container {
        position: absolute;
        top: 66px;
        left: 100px;
        width: calc(100% - 100px);
        height: calc(100% - 65px - 20px);
        background: var(--grey3);
        overflow-x: hidden;
        overflow-y: scroll;
    }

    #userbody {
        position: relative;
        padding: 10px 20px;
        width: calc(100% - 40px);
        height: auto;
        display: flex;
        flex-direction: column;
    }

        #userbody .username {
            position: relative;
            width: 100%;
            height: 45px;
            background: #ffffff;
            border-bottom: 1px solid var(--grey3);
            display: flex;
            align-items: center;
        }

            #userbody .username .texte {
                margin-left: 20px;
                font-size: 1.8em;
                font-weight: bold;
                color: var(--grey10);
            }

            #userbody .username .statut {
                margin-left: 20px;
                width: 90px;
                height: 22px;
                font-size: 1.3em;
                color: #ffffff;
                background: var(--warning);
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        #userbody .titre {
            position: relative;
            width: 100%;
            margin-top: 10px;
            padding-top: 10px;
            height: 45px;
            background: #ffffff;
            border-bottom: 1px solid var(--grey3);
            display: flex;
            align-items: center;
        }

            #userbody .titre .texte {
                margin-left: 20px;
                font-size: 1.6em;
                font-weight: bold;
                color: var(--grey10);
            }

        #userbody .action {
            margin-left: 20px;
            width: 90px;
            height: 24px;
            border: 1px solid var(--primary1);
            border-radius: 8px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
        }

/*            #userbody .action .logoedit {
                width: 25px;
                height: 100%;
                background-image: url(/img/editpen.svg);
                background-position: center;
                background-repeat: no-repeat;
            }*/

            #userbody .action .logoedit {
                width: 25px;
                height: 80%;
                background-color: var(--primary1);
                /*-webkit-mask: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'> <path fill-rule='evenodd' clip-rule='evenodd' d='M5.66648 11.7934C5.25981 11.7934 4.88648 11.6467 4.61314 11.38C4.28648 11.0534 4.14648 10.58 4.21981 10.08L4.50648 8.07337C4.55981 7.68671 4.81314 7.18671 5.08648 6.91337L9.54122 2.45863C9.57059 2.41909 9.60587 2.3836 9.64625 2.3536L10.3398 1.66004C11.6665 0.333372 13.0131 0.333372 14.3398 1.66004C15.0665 2.38671 15.3931 3.12671 15.3265 3.86671C15.2665 4.46671 14.9465 5.05337 14.3398 5.65337L13.6132 6.37994C13.596 6.40031 13.5772 6.41908 13.5571 6.43613L9.08648 10.9067C8.81314 11.18 8.31314 11.4334 7.92648 11.4867L5.91981 11.7734C5.83314 11.7934 5.74648 11.7934 5.66648 11.7934ZM13.0936 5.4796L13.6265 4.94671C14.0598 4.51337 14.2865 4.12671 14.3198 3.76671C14.3598 3.33337 14.1331 2.87337 13.6265 2.36004C12.5598 1.29337 11.8265 1.59337 11.0465 2.36671L10.5105 2.90269C10.9408 4.09883 11.8961 5.05216 13.0936 5.4796ZM9.74596 3.66722C10.2709 4.80168 11.1915 5.72225 12.3259 6.24727L8.37314 10.2C8.25314 10.3267 7.95314 10.4734 7.77981 10.5L5.77314 10.7867C5.57981 10.8134 5.41981 10.7734 5.31981 10.6734C5.21981 10.5734 5.17981 10.4134 5.20648 10.22L5.49314 8.21337C5.51981 8.04004 5.66648 7.74671 5.79314 7.62004L9.74596 3.66722Z'/> <path d='M9.99992 15.1667H5.99992C2.37992 15.1667 0.833252 13.62 0.833252 10V6C0.833252 2.38 2.37992 0.833333 5.99992 0.833333H7.33325C7.60659 0.833333 7.83325 1.06 7.83325 1.33333C7.83325 1.60667 7.60659 1.83333 7.33325 1.83333H5.99992C2.92659 1.83333 1.83325 2.92667 1.83325 6V10C1.83325 13.0733 2.92659 14.1667 5.99992 14.1667H9.99992C13.0733 14.1667 14.1666 13.0733 14.1666 10V8.66667C14.1666 8.39333 14.3933 8.16667 14.6666 8.16667C14.9399 8.16667 15.1666 8.39333 15.1666 8.66667V10C15.1666 13.62 13.6199 15.1667 9.99992 15.1667Z'/> </svg>") no-repeat center;
                -webkit-mask-size: contain;*/
                mask: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'> <path fill-rule='evenodd' clip-rule='evenodd' d='M5.66648 11.7934C5.25981 11.7934 4.88648 11.6467 4.61314 11.38C4.28648 11.0534 4.14648 10.58 4.21981 10.08L4.50648 8.07337C4.55981 7.68671 4.81314 7.18671 5.08648 6.91337L9.54122 2.45863C9.57059 2.41909 9.60587 2.3836 9.64625 2.3536L10.3398 1.66004C11.6665 0.333372 13.0131 0.333372 14.3398 1.66004C15.0665 2.38671 15.3931 3.12671 15.3265 3.86671C15.2665 4.46671 14.9465 5.05337 14.3398 5.65337L13.6132 6.37994C13.596 6.40031 13.5772 6.41908 13.5571 6.43613L9.08648 10.9067C8.81314 11.18 8.31314 11.4334 7.92648 11.4867L5.91981 11.7734C5.83314 11.7934 5.74648 11.7934 5.66648 11.7934ZM13.0936 5.4796L13.6265 4.94671C14.0598 4.51337 14.2865 4.12671 14.3198 3.76671C14.3598 3.33337 14.1331 2.87337 13.6265 2.36004C12.5598 1.29337 11.8265 1.59337 11.0465 2.36671L10.5105 2.90269C10.9408 4.09883 11.8961 5.05216 13.0936 5.4796ZM9.74596 3.66722C10.2709 4.80168 11.1915 5.72225 12.3259 6.24727L8.37314 10.2C8.25314 10.3267 7.95314 10.4734 7.77981 10.5L5.77314 10.7867C5.57981 10.8134 5.41981 10.7734 5.31981 10.6734C5.21981 10.5734 5.17981 10.4134 5.20648 10.22L5.49314 8.21337C5.51981 8.04004 5.66648 7.74671 5.79314 7.62004L9.74596 3.66722Z'/> <path d='M9.99992 15.1667H5.99992C2.37992 15.1667 0.833252 13.62 0.833252 10V6C0.833252 2.38 2.37992 0.833333 5.99992 0.833333H7.33325C7.60659 0.833333 7.83325 1.06 7.83325 1.33333C7.83325 1.60667 7.60659 1.83333 7.33325 1.83333H5.99992C2.92659 1.83333 1.83325 2.92667 1.83325 6V10C1.83325 13.0733 2.92659 14.1667 5.99992 14.1667H9.99992C13.0733 14.1667 14.1666 13.0733 14.1666 10V8.66667C14.1666 8.39333 14.3933 8.16667 14.6666 8.16667C14.9399 8.16667 15.1666 8.39333 15.1666 8.66667V10C15.1666 13.62 13.6199 15.1667 9.99992 15.1667Z'/> </svg>") no-repeat center;
                mask-size: contain;
            }

            #userbody .action .texte {
                font-size: 1.2em;
                font-weight: bold;
                margin-left: 10px;
                color: var(--primary1);
            }

        #userbody .titre .valider {
            margin-left: 20px;
            width: 120px;
            height: 26px;
            border: 1px solid var(--grey3);
            background: var(--primary1);
            border-radius: 8px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
        }

            #userbody .titre .valider .logo {
                width: 30px;
                height: 100%;
                background-image: url(/img/tick-circle_white.svg);
                background-position: center;
                background-repeat: no-repeat;
            }

            #userbody .titre .valider .texte {
                font-size: 1.3em;
                color: #ffffff;
            }


        #userbody .titre .annuler {
            margin-left: 20px;
            width: 100px;
            height: 26px;
            background: var(--grey3);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--grey6);
            font-size: 1.3em;
            cursor: pointer;
        }

        #userbody .content {
            width: 100%;
            background: #ffffff;
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #userbody .bloc {
            width: 49%;
            height: auto;
            display: flex;
            flex-direction: column;
        }


        #userbody #equipe {
            width: 100%;
            background: #ffffff;
            height: auto;
            display: flex;
            flex-direction: column;
        }

        #userbody .lignetitre {
            position: relative;
            width: calc(100% - 20px);
            padding: 0px 10px;
            height: 45px;
            color: var(--grey8);
            font-size: 1.3em;
            font-weight: bold;
            background: var(--grey1);
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        #userbody .ligne {
            position: relative;
            width: calc(100% - 20px);
            height: auto;
            min-height: 40px;
            background: #ffffff;
            padding: 2px 10px;
            border-top: 2px solid var(--grey3);
            border-left: 1px solid var(--grey3);
            border-right: 1px solid var(--grey3);
            color: var(--grey10);
            font-size: 1.3em;
            display: flex;
            align-items: center;
        }

        #userbody .colonne {
            width: 19%;
            padding: 0px 0.25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #userbody #marque {
            width: 100%;
            background: #ffffff;
            height: auto;
            display: flex;
            flex-direction: column;
        }

            #userbody #marque #selection {
                position: relative;
                width: calc(100% - 25px);
                padding: 0px 10px;
                min-height: 45px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;
                column-gap: 10px;
            }

        #userbody .cartcontainer {
            width: calc(100% - 20px);
            padding: 0px 10px;
            background: var(--grey2);
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            column-gap: 20px;
            overflow-x: scroll;
        }

            #userbody .cartcontainer .cartcontent {
                height: auto;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                column-gap: 20px;
            }

        #userbody .cartouche {
            position: relative;
            width: 250px;
            margin: 10px 0px;
            padding: 10px;
            height: 600px;
            border-radius: 6px;
            border: 1px solid var(--grey3);
            background: #ffffff;
            display: flex;
            flex-direction: column;
        }

            #userbody .cartouche .carttitre {
                width: 100%;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2.4em;
                font-weight: bold;
                color: var(--grey10);
            }

            #userbody .cartouche .cartprix {
                width: 100%;
                margin-top: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2.4em;
                font-weight: bold;
                color: var(--primary1);
            }

            #userbody .cartouche .cartprixcomm {
                width: 100%;
                margin-top: 05px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.4em;
                color: var(--grey8);
            }

            #userbody .cartouche .cartselect {
                width: 100%;
                margin-top: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #userbody .cartouche .cartliste {
                width: 100%;
                margin-top: 5px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

                #userbody .cartouche .cartliste .cartlisteitem, #userbody .cartouche .cartliste .cartlisteligne {
                    position: relative;
                    margin-top: 10px;
                    margin-left: 30px;
                    width: calc(100% - 30px);
                    display: flex;
                    font-size: 1.2em;
                    color: var(--grey10);
                }

                #userbody .cartouche .cartliste .plus {
                    color: var(--primary1);
                    font-weight: bold;
                }

                #userbody .cartouche .cartliste .cartlisteitem::before {
                    position: absolute;
                    left: -20px;
                    content: url(/img/chevron_right.svg);
                }

    .bouton_delete {
        width: 90%;
        height: 28px;
        background-color: #F35712;
        border-radius: 6px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .bouton_delete:hover {
            cursor: pointer;
            background-color: #f59469;
            transition: all 0.3s;
        }

    /* ONBOARDING */

    #onboarding_blur {
        position: fixed;
        z-index: 5;
        left: 167px;
        top: 57px;
        height: calc(100% - 62px);
        width: calc(100% - 170px);
        background-color: #6f789c;
        opacity: 0.75;
    }


    .onboarding {
        position: fixed;
        z-index: 100;
        top: calc(50% - 200px);
        left: calc(50% - 300px);
        padding: 20px;
        width: 600px;
        height: auto;
        background: #ffffff;
        box-shadow: 0px 8px 16px rgba(88, 92, 229, 0.1);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
    }

        .onboarding .titre {
            width: 100%;
            height: 50px;
            font-size: 2.4em;
            font-weight: bold;
            color: var(--grey10);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .onboarding .stitre {
            width: 100%;
            height: 40px;
            font-size: 1.6em;
            color: var(--grey8);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .onboarding .container {
            width: 100%;
            height: auto;
            background: var(--grey2);
            display: flex;
        }

            .onboarding .container .etape {
                width: 80px;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .onboarding .container .etape .numero {
                    width: 40px;
                    height: 40px;
                    margin-top: 20px;
                    border-radius: 20px;
                    background: var(--primary1);
                    color: #ffffff;
                    font-size: 1.5em;
                    font-weight: bold;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

            .onboarding .container .texte {
                width: calc(100% - 30px);
                padding: 15px;
                height: auto;
                color: var(--grey8);
                font-size: 1.4em;
                display: flex;
                flex-direction: column;
            }

                .onboarding .container .texte .sstitre {
                    color: var(--grey10);
                    font-weight: bold;
                    margin-bottom: 10px;
                }

        .onboarding .navigation {
            margin-top: 20px;
            margin-bottom: 20px;
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
        }

        .onboarding .fleche_haut {
            position: fixed;
            z-index: 100;
            top: 70px;
            left: 520px;
        }

        .onboarding .fleche_gauche {
            position: fixed;
            z-index: 100;
            top: 100px;
            left: 180px;
        }

        .onboarding .fleche_floating {
            position: fixed;
            z-index: 100;
            top: 125px;
            left: 950px;
        }

        .onboarding .fleche_droite {
            position: fixed;
            z-index: 100;
            top: 300px;
            right: 270px;
        }

        .onboarding .footer {
            position: absolute;
            bottom: -50px;
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
        }

    /* TABLEAU PUISSANCE */
    #graph_container {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #tabpuissance {
        width: calc(100% - 20px);
        padding: 10px;
        height: 500px;
        background: #ffffff;
        box-shadow: 0px 8px 16px rgba(88, 92, 229, 0.1);
        border-radius: 8px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
    }

        #tabpuissance #legende {
            width: calc(100% - 40px);
            padding: 0px 00px 0px 40px;
            margin-top: 0px;
            display: flex;
            align-items: center;
        }

            #tabpuissance #legende #lignepuissance {
                width: 50px;
                height: 4px;
                background: #4E4DB0;
            }

            #tabpuissance #legende #lignedeper {
                width: 50px;
                height: 4px;
                background: #326C1B;
            }

            #tabpuissance #legende #lignebivalence {
                width: 4px;
                height: 30px;
                background: #F9896B;
            }

            #tabpuissance #legende .texte {
                margin-left: 10px;
                width: 180px;
                font-size: 1.3em;
                font-weight: bold;
                color: var(--grey8);
            }

        #tabpuissance #commentaires {
            width: calc(100% - 40px);
            padding: 0px 00px 0px 40px;
            margin-top: 10px;
            font-size: 1.2em;
            color: var(--grey7);
        }


    /* FICHE PRODUIT */
    #fiche_produit {
        width: calc(100% - 20px);
        padding: 10px;
        display: flex;
        flex-direction: column;
    }

        #fiche_produit #headerprod {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
             }


        #fiche_produit .blocimage {
            width: 42%;
            padding-top: 20px;
            border: 1px solid var(--grey4);
            border-radius: 6px;
            display: flex;
            justify-content: center;
        }

        #fiche_produit .blocdetail {
            width: 56%;
            display: flex;
            flex-direction: column;
        }

        #fiche_produit .blocdetail .libelle {
                width: 100%;
                font-size: 1.8em;
                font-weight: bold;
                color: var(--grey10);
                border-bottom: 1px solid var(--grey4);
            }

        #fiche_produit .blocdetail .ligne {
                width: 100%;
                margin-top: 15px;
                height: 30px;
                display: flex;
                align-items: center;
            }

         #fiche_produit .blocdetail .ligne .titre {
                    width: 250px;
                    font-size: 1.5em;
                    font-weight: bold;
                    color: var(--grey7);
                }

         #fiche_produit .blocdetail .ligne .valeur {
                 width: calc(100% - 250px);
                 font-size: 1.4em;
                 font-weight: bold;
                 color: var(--grey10);
                }

        #fiche_produit .titresectionprod {
            width: calc(100% - 10px);
            margin-top: 25px;
            padding-left: 10px;
            height: 40px;
            font-size: 1.6em;
            font-weight: bold;
            color: #ffffff;
            background: var(--primary1);
            display: flex;
            align-items: center;
        }

      #fiche_produit .descriptif {
            width: 100%;
            margin-top: 10px;
            font-size: 1.3em;
            color: var(--grey8);
            display: flex;
            flex-wrap:wrap;
        }

      #fiche_produit .descriptif .item {
            width: 50%;
      }


      #fiche_produit .caracteristique {
            width: 100%;
            max-width: 800px;
            display: flex;
            flex-direction: column;
      }

    #fiche_produit .caracteristique .ligne {
         height: 30px;
         border-bottom: 1px solid var(--grey4);
         display: flex;
         align-items: center;
         break-inside:avoid;
    }

    #fiche_produit .caracteristique .ligne .label {
          width: 50%;
          font-size: 1.4em;
          font-weight: bold;
          color: var(--grey7);
     }

     #fiche_produit .caracteristique .ligne .valeur {
          width: 50%;
          font-size: 1.4em;
          font-weight: bold;
          color: var(--grey10);
     }

@media (max-width: 900px) {
    #fiche_produit .blocimage {width:100%;}
    #fiche_produit .blocdetail {width:100%;}
}
@media (max-width: 800px) {
     #fiche_produit .descriptif .item {width:100%;}
}

@media print {
     #fiche_produit .blocimage {width:42%;}
     #fiche_produit .blocdetail {width:56%;}
     #fiche_produit .descriptif .item {width:50%;}
}



/* TABLEAU GAINABLE */

#tabgainable {
    position:relative;
    width:calc(100% - 20px);
    padding:10px 10px 20px 10px;
}

#tabgainable .headtab {
    width:100%;
    height:50px;
    background:var(--grey3);
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

#tabgainable .messagetab {
    width:calc(100% - 24px);
    margin-top:20px;
    padding:10px;
    border:2px solid #F35712;
    border-radius:6px;
    font-size:1.4em;
    color:var(--grey10);
}
#tabgainable .headtab .boutontab {
    width:270px;
    font-size:0.9em;
       }

#tabgainable .lignetitre {
    position:relative;
    width:calc(100% - 20px);
    padding: 0px 10px;
    margin:0px;
    height:55px;
    background:var(--grey3);
    color:var(--grey8);
    font-size:1.3em;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
}
#tabgainable .lignetab {
    position:relative;
    width:calc(100% - 20px);
    height:44px;
    background:#ffffff;
    padding: 0px 10px;
    margin:0px;
    border-bottom: 1px solid var(--grey3);
    border-left: 1px solid var(--grey3);
    border-right: 1px solid var(--grey3);
    color:var(--grey10);
    font-size:1.3em;
        
    display:flex;
    align-items:center;
    
}
#tabgainable .select {
    background:var(--green1);
}

#tabgainable .tabpiece {
    width:20%;
    height:100%;
       
    display:flex;
    align-items:center;
}
#tabgainable .valeur1W {
    width:6.7%;
    padding:0px 0.25%;
    height:100%;
    display:flex;
    align-items:center;
}
#tabgainable .valeur1 {
    width:7.4%;
    padding:0px 0.25%;
    height:100%;
    display:flex;
    align-items:center;
}

#tabgainable .valbrassage {
    width:50%;
    height:100%;
    display:flex;
    align-items:center;
    }
#tabgainable .conformitebrassage {
    width:50%;
    height:100%;
    display:flex;
    align-items:center;
    }
#tabgainable .conformitecharge {color:#F35712;font-weight:bold;}
#tabgainable .red {width:14px;height:14px;border-radius:7px;background:#F35712;}
#tabgainable .yellow {width:14px;height:14px;border-radius:7px;background:#c4c109;}
#tabgainable .green {width:14px;height:14px;border-radius:7px;background:#63D1CC;}
#tabgainable .tabpieceP {
    width:25%;
    height:100%;
       
    display:flex;
    align-items:center;
}
#tabgainable .valeur2 {
    width:18%;
    padding:0px 0.25%;
    height:100%;
    font-weight:bold;    
    display:flex;
    align-items:center;
}
#tabgainable .valeur3 {
    width:14%;
    padding:0px 0.25%;
    height:100%;
    font-weight:bold;    
    display:flex;
    align-items:center;
}
#tabgainable .center {
    justify-content:center;
}



/* REFERENCE ELEMENT ETUDE */

    #reference_element_etude .couche {
        width: 10%;
        font-size: 1.4em;
    }

    #reference_element_etude .designation {
        width: 42%;
        font-size: 1.4em;
    }

    #reference_element_etude .valeur {
        width: 14%;
        font-size: 1.4em;
        display: flex;
        align-items: center;
    }

    #reference_element_etude .action {
        width: 6%;
        font-size: 1.4em;
    }

    #reference_element_etude .valeur2 {
        width: 28%;
        font-size: 1.4em;
        font-weight: bold;
    }


    /*  RESPONSIVE  */
    #menumin_blur {
        position: fixed;
        display: none;
        z-index: 19;
        width: 100%;
        height: 100%;
        background-color: #6f789c;
        opacity: 0.75;
    }

    #top-bar #menumin {
        position: relative;
        display: none;
        margin: 10px 0px 0px 10px;
        width: 36px;
        height: 36px;
        background-image: url(/img/bars.svg);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }


    @media (max-width: 1350px) {
        #top-bar .navbar_listeetude {
            margin-left: 30px
        }
    }

    @media (max-width: 1150px) {
        #top-bar #navbar {
            display: none
        }

        #top-bar #menumin {
            display: block
        }

        #top-bar #help, #top-bar #netude {
            display: none
        }

        #user_nav {
            left: 0px;
            width: 100%;
        }
    }

    @media (max-width: 1000px) {
        #top-bar #cxlogo {
            width: 80px;
        }

            #top-bar #cxlogo #image2 {
                display: none
            }

        #top-bar #navbar {
            display: none
        }

        #top-bar #navbar {
            position: fixed;
            z-index: 999;
            background: #ffffff;
            margin-left: 0px;
            top: 56px;
            padding: 0px;
            left: 0px;
            width: 100%;
            height: 360px;
            flex-direction: column;
            justify-content: flex-start;
        }

            #top-bar #navbar .item {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #dddddd;
            }

        #user_nav #usersidebar {
            top: 66px;
            width: 100%;
            height: 70px;
        }

            #user_nav #usersidebar #content {
                flex-direction: row;
                margin-top: 5px;
            }

        #user_nav .userbody_container {
            top: 126px;
            left: 0px;
            width: 100%
        }

        #user_nav #userbody {
            padding: 10px;
            width: calc(100% - 20px);
        }
    }

    @media screen and (max-width: 800px) {
        .form_block {
            flex-direction: column;
            height: 65px;
        }

        .form_ligne {
            height: auto
        }
    }