/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 
 
 /*************************/
 /*   TWELVE ASSISTANT    */ 
 /*************************/

#outilsgamme.creative .hide_in_creative,
#outilsgamme.opentuning .hide_in_opentuning,
#outilsgamme.mode_accords .hide_in_mode_accords,
#outilsgamme.mode-accords .hide_in_mode_accords,
#outilsgamme.search_mode .hide_in_search_mode,
#outilsgamme.search_mode.search_mode_no_tonalite .hide_in_search_mode_mnt,
.connect_accord .hide_to_connect_accord,
#chordslibrarycontent .hide_in_bibliaccord,
.show_in_superpose,.show_in_superpose_ib,
.hide{
     display: none !important;
 }
 
 #outilsgamme.mode_superpose .show_in_superpose{
     display: block !important;
 }
 #outilsgamme.mode_superpose .show_in_superpose_ib{
      display: inline-block !important;
  }
 
 #outilsgamme .show-mode-accord{
     display:none !important;
 }
 #outilsgamme.mode_accords .show-mode-accord,
#outilsgamme.mode-accord .show-mode-accord{
     display: inline-block !important;
 }
 
 body.page-template-tpl-gammes table{
     color:#fff;
 }
 
 body.page-template-tpl-gammes table .case0,
 body.page-template-tpl-gammes table .case85,
 body.page-template-tpl-gammes table .case68,
 body.page-template-tpl-gammes table .case52,
 body.page-template-tpl-gammes table .case35,
 body.page-template-tpl-gammes table .case18,
 body.page-template-tpl-gammes table .case1{
     border:none;
     border-collapse: collapse;
 }
 
 #gamme{
     text-align: center;
     max-width:1200px;
     margin: auto
 }
 
 #gamme .case {
     width: 40px;
     height: 40px;
     background-position: center;
     background-size: 180%;
     margin: auto;
     position: relative;
     top: 26px;
 }
 
 /* V2 */
 
 .enteteinterface{
     position: relative;
     margin-top:30px;
     text-align: center;
 }
    .enteteinterface img{
        width:240px;   
    }
 
 #outilsgamme{
     position: relative;
     width:100%;
     /* height: 850px; */
     min-width: 1280px;
     top:42px;
     
 }
 @media (max-width: 768px) {
        
    .responsive-manche{
        min-width: auto !important;
        max-width: 100%;
    }
    
    .responsive-manche .zone_manche{
        min-width: auto !important;
        max-width: 100%;
        overflow-x: auto;
    }

}
 
 #outilsgamme #loader-om{
     transition: all 800ms;
     width:100%;
     height:600px;
     position: absolute;
     top:0px;
     left:0px;
     background-position: center;
     background-repeat: no-repeat;
     z-index: 1;
     
 }

#outilsgamme .zone_bibliaccords {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 155;
    transition: 750ms all;
    border-top: 3px solid #fff;
}

#outilsgamme .zone_bibliaccords.range{
    top:-1500px;
}
     
    #outilsgamme .zone_bibliaccords .closebibliaccord {
        position: absolute;
          z-index: 105;
          font-size: 20px;
          right: 20px;
          top: 10px;
          cursor: pointer;
    }
    
    #outilsgamme .zone_bibliaccords .agrandirzoneaccords {
        position: absolute;
        z-index: 105;
        font-size: 20px;
        right: 43px;
        top: 10px;
        cursor: pointer;
        opacity: 0.6;
    }
        #outilsgamme .zone_bibliaccords .agrandirzoneaccords.active {
            opacity: 1;   
        }
    
    #outilsgamme .zone_bibliaccords #showaccords{
        width:100%;        
        height: 306px;
        min-height: auto !important;
        margin: auto;
        position: absolute;
        padding:10px;
        overflow: hidden;
        border-radius: 0px;
        border-bottom: 2px solid #fff;
        transition: 500ms all;
    }
    #outilsgamme .zone_bibliaccords #showaccords .grille_accords {
        height: 250px;
        overflow: auto;
    }
    
    #outilsgamme.v1_5 .zone_bibliaccords #showaccords{
        height:416px;   
    }
    #outilsgamme.v1_5 .zone_bibliaccords #showaccords .grille_accords{
        height:341px;
    }
    #outilsgamme.v1_5 .interface_active{
        transition: 500ms all;
    }
    #outilsgamme.v1_5.bibliopen .interface_active{
        margin-top:200px;
    }
    #outilsgamme #showaccords {
        background: url("../img/teinture.jpg");
    }
    
    #outilsgamme .zone_bibliaccords #pupitre_zone{
        max-width: 1100px;
        margin: auto;
    }
    
    #outilsgamme .zone_bibliaccords #showaccords #loader-om{
        height:100% !important;   
    }
    
    #outilsgamme .zone_bibliaccords.large #showaccords{
        height:80vh;
    }
    
        #outilsgamme .zone_bibliaccords.large #showaccords .grille_accords{
            height: 75vh;   
        }
    
    #outilsgamme .zone_bibliaccords #showaccords h1{    
        font-size: 1.6em;
        margin: 0px;
    }
    #outilsgamme .zone_bibliaccords #showaccords hr{
        margin: 15px 0px 10px !important;
    }
    
    
    #outilsgamme .zone_bibliaccords #showaccords #show_iframe_gamme{
        display: none;
    }
    #outilsgamme .zone_bibliaccords #showaccords .zone_options_accords {
        position: absolute;
        right: 70px;
        top: 13px;
    }
    
    #outilsgamme .zone_bibliaccords #showaccords .showaccords{
        display:block;
    }
    
        
    
 
 #outilsgamme .container_outils{
     transition: all 800ms;
     opacity: 0;
     width:100%;
     position: relative;
     z-index: 15;
 }
 
 #outilsgamme .zone_reampli {
     position: relative;
     padding-top: 42px;
 }
 
 #outilsgamme.v1_5 .zone_reampli{
     padding-top:0px;
     top:-35px;
 }
 
 #outilsgamme .preampli{
     width:800px;
     height:285px;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
     margin: auto;
     background-size: contain;
 }
 

 #outilsgamme .menu .putter1,
 #outilsgamme .menu .putter2,
 #outilsgamme .menu .putter3,
 #outilsgamme .menu .putter4,
 #outilsgamme  .menu .putter5,
 #outilsgamme  .menu .putter6,
 #outilsgamme  .menu .putter7,
 #outilsgamme  .menu .putter8,
 #outilsgamme  .menu .putter9,
 #outilsgamme  .menu .putter10,
 #outilsgamme .puttercreative,
 #outilsgamme  .menu .putter11,
 #outilsgamme  .menu .putter12,
 #outilsgamme  .menu .putter14{
     position: absolute;
     width: 56px;
     height: 95px;
     display: block;
     top: 81px;
     
 }
 
#outilsgamme .btn_parametre {
     position: absolute;
     top: 59px;
     left: 42px;
     opacity: 0.6;
     transition:500ms all;
}
#outilsgamme .btn_parametre:hover {
    opacity: 0.8;
}
 
 #outilsgamme .putter1 {
     left: 79px;
     
 }
 #outilsgamme .putter2 {
     left: 141px;
 }
 #outilsgamme .putter3 {
     left: 200px;
 }
 #outilsgamme .putter4 {
     left: 313px;
 }
 #outilsgamme .putter5 {
     left: 372px;
 }
 #outilsgamme .putter6 {
     left: 431px;
 }
 #outilsgamme .putter7 {
     left: 545px;
 }
 #outilsgamme .putter8 {
     left: 606px;
 }
 #outilsgamme .putter9 {
     left: 665px;
 }

 #outilsgamme .puttercreative
 {
     top: 185px !important;
     height: 59px !important;
     left: 412px;
     width: 93px !important;
 }
 #outilsgamme .puttercreative .dropdown-custom{
     top:58px !important;
     background: #000000de !important;
 }

#outilsgamme .puttercreative .gamme_user{
    position: relative;
}
#outilsgamme .puttercreative .share {
    position: absolute;
    top: 0px;
    right: 12px;
    font-size: 12px;
    opacity: 0.8;
    transition: 200ms all; 
    cursor: pointer;
}
#outilsgamme .puttercreative .share:hover {
opacity: 1;
}

#outilsgamme .puttercreative .corbeille {
     position: absolute;
     top:12px;
     right:4px;
     opacity: 0.4;
     font-size: 11px;
     transition: 200ms all; 
     cursor: pointer;
}
#outilsgamme .puttercreative .gamme_user:hover .corbeille {
    opacity: 1;
}
 #outilsgamme .putter10{
     height: 59px !important;
     width: 93px !important;
     top: 0px !important;
 }
 #outilsgamme .putter11 {
     top: 185px !important;
     height: 60px !important;
     left: 543px;
 }
 
 #outilsgamme .putter12 {
     top: 185px !important;
     height: 60px !important;
     left: 119px;
     width: 100px !important;
 }
 
 #outilsgamme .putter13 {
     position: absolute;
     top: 208px !important;
     left: 744px;
     opacity: .7;
     z-index: 50;
     transition: opacity 1500ms;
 }
    #outilsgamme .putter13 a {
        color: rgba(255, 85, 0, 0.951) !important;
        font-size: 16px;   
    }

#outilsgamme .putter13:hover {
    opacity: 1;   
}
 
 #outilsgamme .putter14 {
      top: 185px !important;
      height: 60px !important;
      left: 602px;
 }
 
 .smbientot {
     position: absolute;
     top: 227.9px;
     left: 617px;
 }
 
#outilsgamme .zone_reampli .diode {
     position: absolute;
     top: 171.8px;
     left: 313px;
     opacity: 0;
     transition: 300ms all;
     background-position: center;
     /* height: 60px; */
     background-size: 62px;
     z-index: 55;
     width: 60px;
     height: 60px;
 }
 
  
 #outilsgamme.putter_hover .zone_reampli .diode {
     display: block;
     opacity: 1;
 }
 
 #outilsgamme .zone_reampli .encarts{
     position: absolute;
     top:00px;
     left:50%;
 }
 
     #outilsgamme .zone_reampli .encarts .encart{
         position: absolute;
         top:10px;
     }
     
     #outilsgamme .zone_reampli .encarts .encart img{
         height:255px;	
     }
     
         #outilsgamme .zone_reampli .encarts .encart1{
             left:-597px;
         }
         #outilsgamme .zone_reampli .encarts .encart2{
             left:397px;
         }
 
 #outilsgamme .putter .dropdown-custom {
     position: absolute;
     width: 250px;
     background: #000000de;
     padding: 10px;
     top: -9999px;
     left: -9999px;
     border-radius: 5px;
     z-index: 999;
     
 }
 
 #outilsgamme .putter .dropdown-custom .deroulant{
     max-height: 300px;
     overflow: auto
 }
 
 #outilsgamme .putter .dropdown-custom .header{
     font-family: 'Roboto Slab', serif;
     font-size:0.8em;
     padding:8px;
     letter-spacing: 0.2em;
     text-align: center;
     border-bottom:1px dashed #555
 }
 
 #outilsgamme .putter .dropdown-custom a{
     color:#fff;
     display: block;
     padding:8px;
     font-family: 'Roboto Slab', serif;
     opacity: 0.7;
     transform: all 200ms
 }
 
 #outilsgamme .putter .dropdown-custom a:hover{
     opacity: 1	
 }
 
 #outilsgamme .putter:hover .dropdown-custom{
     transition-delay: 280ms;
     transition-property: left,top;
     top: 93px;
     left: -94px;
 }
 
 #outilsgamme .puttertuto .dropdown-custom {
     top: -9999px;
     background: rgba(255, 85, 0, 0.94);
     left: auto;
     color: #000 !important;
     width:380px !important;
 }
 
 #outilsgamme .puttertuto:hover .dropdown-custom {
    transition-delay: 280ms;
     transition-property: right,top;
    top: 18px;
     right: -69px;
 }
 
    #outilsgamme .puttertuto .dropdown-custom a {
        color: #000 !important;
        font-family: 'Roboto', serif;
         font-weight: normal;
         font-size:1em;
         padding: 2px 0px
    }
    #outilsgamme .puttertuto .header{
        font-size: 0.9em !important;
        padding: 4px !important;
        margin-bottom: 4px !important;
    }
 
#outilsgamme .puttertuto .dropdown-custom .header{
    text-align: left;
}
 
#outilsgamme .puttertuto .dropdown-custom ul{
    list-style: none !important;
    padding:0px !important;
} 
#outilsgamme .puttertuto .dropdown-custom li{
    list-style: none !important;
    padding:0px !important;
} 

#outilsgamme  .menu .zone_toolbox{
    position: absolute;
    top: 55px;
    right: 40px;
}

    #outilsgamme  .menu .zone_toolbox .options-toolbox{
        display: none;
    }

    #outilsgamme  .menu .zone_toolbox .fa-toolbox{
        opacity:0.5;   
    }
    
    #outilsgamme.modetoolbox  .menu .zone_toolbox .options-toolbox{
        display:inline;   
    }
    
    .zone_toolbox .option {
        display: inline-block;
        margin-left: 8px;
        opacity: 0.6;
    }
    
    .zone_toolbox .option.active{
        opacity:0.8 !important;
        color:#7d82c8;
        
    }
    
    .tb-entourer .note.selectnote .selecteur_search,
    .toolbox_lock .note.selectnote .selecteur_search {
        position: absolute;
        width: 40px;
        height: 40px;
        top: -18px;
        border: 2px solid #FFF;
        left: -20px;
        border-radius: 100%;
    }
    
    .tb-entourer .note.selectnote.selectnote2 .selecteur_search,
    .toolbox_lock .note.selectnote.selectnote2 .selecteur_search {
        border: 7px solid #FFF;
    }
    
    /* <div class="nmark"><i class="fas fa-bookmark"></i></div> */
    .nmark {
        position: absolute;
        z-index: 10;
        color: #ff0;
        top: -4px;
        left: 1px;
        font-size: 20px;
        opacity: 0.95;
    }
    
    .tb-cursor {
        cursor: crosshair;
    }
    
    .tb-transparence .note,
    .tb-transparence .note.active_position,
    .toolbox_lock_transpa .note,
    .toolbox_lock_transpa .note.active_position{
        opacity: 0.15 !important;
    }
    
    .tb-transparence .note.transparence,
    .tb-transparence .note.transparence .nhg,
    .tb-transparence .note.active_position.transparence,
    .toolbox_lock_transpa .note.transparence,
    .toolbox_lock_transpa .note.active_position.transparence{
        opacity: 1 !important;
    }
    
    .tb-pointer .zone_manche .note:hover{
        opacity: 1 !important;
    }
    
    .tb-pointer .zone_manche .note .anime{
        content:" " ;
        display: block;
        position: absolute;
        background: #ff0000;
        border-radius: 100%;
        z-index: 55;
       
    }
    
    .tb-nor .inter-R .intervalle{
        display: none
    }
    .tb-nor .inter-R .neutre, .tb-nor .inter-R .neutre .tonalite{
        display: block !important;
    }
    
    .html_hook_after_manche #outilsgamme{
        top:0px;
    }
    
    #tacopie .titregamme{
        text-align: center;    
    }
    #tacopie .titregamme .gammeparentname{
        font-size:0.8em;   
    }
    
    .noteCss.inter{
        display: inline-block;
          width: 30px;
          height: 30px;
          background-position: 50% 55%;
          background-size: 190%;
          font-size: 0px;
    }
    
    display: inline-block;
      width: 30px;
      height: 30px;
      background-position: 50% 55%;
      background-size: 190%;
      font-size: 15px;
      position: relative;
      padding-top: 4px;

.options_after_manche {
    text-align: center;
    position: relative;
    top: -26px;
    height: 1px;
    z-index: 55
}
    
    .options_after_manche .option {
        display: inline-block;
        margin: 0px 8px;
        font-size: 1.4em;
        color: #666;
        transition: all 500ms;
    }
    
    .options_after_manche .option:hover {
        color:#9f9f9f;
    }



 #outilsgamme .preampli.preampli1-5{
     height:174px !important;
     background-image:url("../img/T_A_amp-2-v3.png") !important;
 }
 #outilsgamme .preampli.preampli1-5 .diode {
    background-image: url("../img/diodealume.png") !important;
      width: 34px !important;
      height: 30px !important;
      background-size: 80% !important;
      background-repeat: no-repeat;
      left: 499px;
      top: 45px;
 }
 #outilsgamme .preampli1-5 .menu .putter1,
 #outilsgamme .preampli1-5 .menu .putter2,
 #outilsgamme .preampli1-5 .menu .putter3,
 #outilsgamme .preampli1-5 .menu .putter4,
 #outilsgamme .preampli1-5 .menu .putter5,
 #outilsgamme .preampli1-5 .menu .putter6,
 #outilsgamme .preampli1-5 .menu .putter7,
 #outilsgamme .preampli1-5 .menu .putter8,
 #outilsgamme .preampli1-5 .menu .putter9{
    top: 39px !important;
 }
 #outilsgamme .preampli1-5 .putter1{ left:57px; }
 #outilsgamme .preampli1-5 .putter2{ left:119px; }
 #outilsgamme .preampli1-5 .putter3{ left:180px; }
 #outilsgamme .preampli1-5 .putter4{ left:276px; }
 #outilsgamme .preampli1-5 .putter5{ left:337px; }
 #outilsgamme .preampli1-5 .putter6{ left:400px; }
 #outilsgamme .preampli1-5 .putter7{ left:569px; }
 #outilsgamme .preampli1-5 .putter8{ left:632px; }
 #outilsgamme .preampli1-5 .putter9{ left:698px; }
 #outilsgamme .preampli1-5 .putter10{ 
     left: 460px;
   width: 112px !important;
   height: 115px !important;
   top: 33px !important;
 }

 


/* Grilles */

#grilles .grille{
    position: relative;
}
#grilles .options_grille {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 20px;
}

#grilles .options_grille .option {
    display: inline-block;
    margin: 0px 4px;
    opacity: 0.8;
    cursor: pointer;
}
#grilles .options_grille .option:hover {
    opacity: 1;   
}

#grilles .options_grille .option[data-option="optgr_lock"].lock{
    opacity: 1;
    color:#fff;
}

#grilles .options_grille .option[data-option="optgr_lock"].lock .fa-lock-open-alt{
    display: none;
}
#grilles .options_grille .option[data-option="optgr_lock"].unlock .fa-lock{
    display: none;
}

#grilles .grille:first-child .option[data-option="optgr_moveup"]{
    display: none;
}
#grilles .grille:last-child .option[data-option="optgr_movedown"]{
    display: none;
}


/* Tool box memobox */

#ouvrirmemo {
    text-align: center;
    font-size: 50px;
    color: #404040;
    cursor: pointer;
    opacity: 0.5;
    transition: all 800ms;
}
    #ouvrirmemo:hover{
        opacity:1;
    }


#memobox{
    
    max-width: 1200px;
    margin: auto;
    margin-top:10px;
    position: relative;
    text-align: center;
    transition: 1500ms all; 
}

#memoboxoptions {
    background: #2d2d2d;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    margin-bottom:20px;
 
}

    #memoboxoptions .title-opt {
        font-size: 12px;
        letter-spacing: 4px;
        text-transform: uppercase;
        opacity: 0.2;
        margin-bottom:2px;
    }

    #memoboxoptions .option{
        display: inline-block;
    }
    #memoboxoptions .option{
        opacity: 0.5;
        transition:all 200ms;
        cursor: pointer;
        margin:0px 5px;
        font-size:16px;   
    }
    
    #memoboxoptions .option:hover{
        opacity: 0.9;
    }
    
    #memoboxoptions .option.active{
        opacity: 1;
    }

#memobox .rack {
    display: inline-block;
    margin:20px;
    position: relative;
}
    
    #memobox .name {
        background: #444;
        padding: 9px 20px;
        border-radius: 5px 5px 0px 0px;
    }
    
    #memobox .memo {
        border: 1px solid #444;
        border-radius: 0px 0px 10px 10px;
    }
    
    #memobox .title {
        width: 100%;
        background: none;
        border: none;
        color: #fff;
    }    
    #memobox .entre2{
        display:inline-block;
        width:7px;
        cursor: pointer;
    }
    #memobox .entre2{
        display:inline-block;
        width:10px;
        transition:all 800ms;
        height:140px;
        border-radius:5px;
    }
        #memobox .entre2:hover{
            background: #444;
            
        }
    
    
    #memobox .curseur{
        display:none;
    }
    .tb-modememo #memobox .curseur{
        display: inline-block;
    }
    #memobox .curseur{
        cursor: default !important;
        width:20px;
        height:150px;
        background-image: url("../img/curseur4.gif");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px;
        margin-right:10px;
        opacity:0.25
    }
    #memobox .curseur:hover{
        background-color: transparent !important;
    }
    #memobox .mnote{
         position: relative;
         display: inline-block;
         margin:5px 0px;
         width:35px;
         height:140px
     }
     #memobox .mnote .note{
         position: relative;
     }
    #memobox .nhg,
    #memobox .neutre,
    #memobox .intervalle{
         width:35px;
         height:35px;
         background-size:160%;
         background-position: center;
         background-repeat: no-repeat;
     }
    
    #memobox .mnote .vm{
        position: absolute;
        top:50px;
        height:88px;
        width:22px;
        left:6.5px;
        color:#fff;
    }
    
    #memobox .mnote .vm .c1,
    #memobox .mnote .vm .c2,
    #memobox .mnote .vm .c3,
    #memobox .mnote .vm .c4,
    #memobox .mnote .vm .c5,
    #memobox .mnote .vm .c6,
    #memobox .mnote .vm .frete{
        position: absolute;
        text-align: center;
        opacity: 0.5;
        height: 2px;
        background: #888;
        width: 75%;
        margin: auto;
        left: 7.5%;
    }
    #memobox .mnote .vm .frete{
        font-size:16px;
        opacity: 1;
        background: none;
        line-height: 0px;
        width: 100%;
        left: 0px;
        
    }
    
    #memobox .mnote .vm .c1{top:0%;}
    #memobox .mnote .vm.c1 .c1{display:none;}
    #memobox .mnote .vm .frete.fc1{top:0%;}
    #memobox .mnote .vm .c2{top:20%;}
    #memobox .mnote .vm.c2 .c2{display:none;}
    #memobox .mnote .vm .frete.fc2{top:20%;}
    #memobox .mnote .vm .c3{top:40%;}
    #memobox .mnote .vm.c3 .c3{display:none;}
    #memobox .mnote .vm .frete.fc3{top:40%;}
    #memobox .mnote .vm .c4{top:60%;}
    #memobox .mnote .vm.c4 .c4{display:none;}
    #memobox .mnote .vm .frete.fc4{top:60%;}
    #memobox .mnote .vm .c5{top:80%;}
    #memobox .mnote .vm.c5 .c5{display:none;}
    #memobox .mnote .vm .frete.fc5{top:80%;}
    #memobox .mnote .vm .c6{top:100%;}
    #memobox .mnote .vm.c6 .c6{display:none;}
    #memobox .mnote .vm .frete.fc6{top:100%;}
    
    #memobox .mnote .txt-inter,
    #memobox .mnote .tonalite {
            position: absolute;
            top: 9px;
            left: 0px;
            width: 100%;
        }
    #memobox .neutre, #memobox .intervalle {
        position: relative;
    }
    
    #memobox .ac2 .neutre, #memobox .ac2 .intervalle, #memobox .ac2 .nhg {
        width: 16px;
        height: 16px;
        margin: auto;
    }
    #memobox .ac2 .txt-inter, #memobox .ac2 .tonalite,
    #memobox .ac3 .txt-inter, #memobox .ac3 .tonalite,
    #memobox .ac4 .txt-inter, #memobox .ac4 .tonalite {
        top: 4px;
        font-size: 7px;
    }
    
    #memobox .ac3 .neutre, #memobox .ac3 .intervalle,
    #memobox .ac4 .neutre, #memobox .ac4 .intervalle,
    #memobox .ac3 .nhg, #memobox .ac4 .nhg {
        width: 16px;
        height: 16px;
        float: left;
    }
    
    #memobox .ac5 .txt-inter, #memobox .ac5 .tonalite,
    #memobox .ac6 .txt-inter, #memobox .ac6 .tonalite {
        top: 3px;
        font-size: 5px;
    }
    #memobox .ac5 .neutre, #memobox .ac5 .intervalle, #memobox .ac5 .nhg,
    #memobox .ac6 .neutre, #memobox .ac6 .intervalle, #memobox .ac6 .nhg
     {
        width: 11px;
        height: 11px;
        float: left;
    }
    
    .linkaccord .groupe_notes {
        background: #3e3e3e;
        width: 100%;
        height: 36px;
        border-radius: 5px;
        padding: 1px;
    }
    
    #memobox .mnote .delnote {
        opacity: 0;
        transition:all 500ms;
        position: absolute;
        top: -11px;
        right: -3px;
    }
    
    #memobox .mnote:hover .delnote {
        opacity: 0.5;
    }
    
    #memobox .mnote .delnote:hover {
        opacity: 1;
        cursor:pointer;   
    }
    
    #memobox .rack .options{
        position: absolute;
        top: -31px;
        right: -5px;
    }
    
    #memobox .rack .options .option {
        opacity: 0.5;
        transition: all 200ms;
        display: inline-block;
        margin: 0px 5px;
        font-size: 20px;
    }
    #memobox .rack .options .option:hover{
        opacity: 1;
        cursor: pointer;   
    }
    
    _#memobox .rack .memo .mnote.t1:nth-child(8n)::after{ /* pas bon */
        height:140px;
        border-right:1px solid #eee;
        display: block;
        content:" ";
        position: relative;
        top:-30px;
        left:5px
    }
    
    
    .notations {
        display: inline-block;
        border-left: 1px solid #ffffff4f;
    }
        .notations .option.oimg{
            width: 16px;
            height: 16px;
            background-size: 98%;
            position: relative;
            top: 1px;
            margin:0px !important;
        }
        #memobox .option[data-add="soupir"] {
            background-image: url("../img/iconsoupir2.png");
            background-size: 80%;
        }
        #memobox .option[data-add="slide"] {
            background-image: url("../img/iconslidetoaigue.png");
        }
        #memobox .option[data-add="bend"] {
            background-image: url("../img/iconbend3.png");
            background-size: 97%;
        }
        #memobox .option[data-add="vibrato"] {
            background-image: url("../img/iconvibrato.png");
        }
        #memobox .option[data-add="2bars"] {
            margin-right: 1px;
        }
        #memobox .option[data-add="espace"] {
            margin: 0px;
        }
        
    #memobox .memo .adds.soupir{
        background: url("../img/soupir.png");
        background-repeat: no-repeat;
        background-position: center;
        width:10px;
    }
    #memobox .memo .adds.slide{
        width:0px;
    }
        #memobox .memo .adds.slide .img {
            background: url(../img/picto-slidetoaigue.png);
            background-repeat: no-repeat;
            background-position: center;
            width: 10px;
            width: 18px;
            height: 12px;
            background-size: 100%;
            position: absolute;
            top: 11px;
            left: -10px;
        }
        
        #memobox .mnote.adds.slide .delnote {
            top: -26px;
            right: -22px;
        }
    
    #memobox .memo .adds.bend{
        width:0px;
    }
        #memobox .memo .adds.bend .img {
            background: url("../img/pictobend.png");
            background-repeat: no-repeat;
            background-position: center;
            width: 10px;
            width: 20px;
            height: 22px;
            background-size: 100%;
            position: absolute;
            top: 2px;
            left: -16px;
        }
    #memobox .memo .adds.vibrato{
        width:20px;
    }
        #memobox .memo .adds.vibrato .img {
            background: url("../img/pictovibrato.png");
            background-repeat: no-repeat;
            background-position: center;
            width: 10px;
            width: 30px;
            height: 10px;
            background-size: 100%;
            position: absolute;
            top: 2px;
            left: -10px;
        }
    
    #memobox .memo .adds.a2bars{
        width:7px;
    }
        
        #memobox .memo .adds.a2bars .img{
            border: 2px solid #fff;
            height: 145px;
            width: 8px;
            border-top: none;
            border-bottom: none;
            opacity: 0.6;
        }
    
    #memobox .memo .mnote.diagramme .titlediag {
        position: absolute;
        top: 9px;
        width: 100%;
        font-size: 10px;
        opacity: 0.8;
    }
    
    #memobox .memo .mnote.diagramme{
        width:100px;
    }
    #memobox .memo .mnote.diagramme .container_accords {
        position: relative;
        top: 35px;
    }
    
/* ZONE GAMME */
 #outilsgamme .zone_gamme{
     max-width:1169px;
     margin-top:20px;
     margin: auto;
     text-align: center;
     position: relative;
     margin-bottom: 0px;
 }
 #outilsgamme.v1_5 .zone_gamme{
    margin-top:0px !important;   
 }
 
 #outilsgamme .zone_gamme.mode_accords .intervalles_liste .separateur,
 #outilsgamme .zone_gamme.creative_mode .intervalles_liste .separateur{
     display: none;
 }
 
     
 
 #outilsgamme .zone_gamme .titregamme{
     font-size: 1.4em;
     text-align: center;
     font-family: 'Roboto Slab', serif;
     margin-bottom: 15px;
     padding-top:22px;
     display: inline;
     position: relative;
 }
 
 #outilsgamme .zone_gamme .titregamme .btn-group {
     position: absolute;
     top: 19px;
     left: -37px;
 }
 
 #outilsgamme .zone_gamme .titregamme .btn.show {
     border-color: transparent;
     background: transparent;
 }
 
 #outilsgamme .zone_gamme .titregamme .btn {
     color: #fff;
     background: transparent;
     border-color: transparent;
 }
 
 #outilsgamme .zone_gamme .titregamme .dropdown-menu.show {
     background: #000000e5;
 }
 #outilsgamme .zone_gamme .titregamme .dropdown-divider{
     border-color: #626262;
 }
 
 #outilsgamme .zone_gamme .titregamme .dropdown-item{
     color:#fff;
     min-width: 320px;
 }
 
 #outilsgamme .zone_gamme .titregamme  .dropdown-item:hover {
     background-color: #444;
     color: #FFF;
 }
 
 #outilsgamme .zone_gamme .titregamme .dropdown-item.active{
     background-color: #917a5c;
 }
 
 #grilles .modesrelatifdropdown{
     display: none !important;
 }
 
 #outilsgamme .titregamme,
 #outilsgamme .titregamme .toniquegamme,
 #outilsgamme .titregamme .toniquegamme .tonaname{
     display: inline;
 }
 
 #outilsgamme .zone_gamme .titregamme .gammeparentname {
     font-size: 0.6em;
     opacity: 0.5;
 }
 
 
 #outilsgamme .zone_gamme.creative_mode .titregamme{
     margin-bottom:40px;	
 }
 
 #outilsgamme .titregamme .nameaccordssurgamme .note{
     display: none;
 }
 #outilsgamme .titregamme .nameaccordssurgamme .notes,
 #outilsgamme .titregamme .nameaccordssurgamme .note.active{
    display: inline   
 }
 
 #outilsgamme .zone_gamme .bloc_intervalle{
     width:60px;
     height:60px;
     display: inline-block;
     cursor: pointer;
     position: relative;
 }
 
 
  #outilsgamme .zone_gamme .optioncog{
        position: relative;
        top: 2px;
        margin-right: 10px;
        cursor: pointer;   
        display: inline-block;
        z-index: 99
  }
  
  #outilsgamme .zone_gamme .optioncog i.fa-cog{
      font-size: 25px;
      opacity: 0.5;
  }
  
  
 #outilsgamme .zone_gamme .optioncog .dropdown-optioncog{
       display: none;
       position: absolute;
         left: -110px;
         top: 25px;
         background: #202020f2;
         min-width: 250px;
         border-radius: 10px;
         padding: 10px;
         list-style: none;
         text-align: left;
 }
 
 #outilsgamme .zone_gamme .optioncog .dropdown-optioncog label{
     opacity: 0.6;
 }
 
 #outilsgamme .zone_gamme .optioncog:hover .dropdown-optioncog{
    display: block;   
    
 }
     
 #outilsgamme .zone_gamme .picto_intervalle{
     
     width:60px;
     height:60px;
     position: absolute;
     top:0px;
     left:0px;
     width:100%;
     transition: all 800ms;
 }
 
 #outilsgamme .zone_gamme .picto_intervalle .option-lowvision{
     position: absolute;
     top: -13px;
     left: -1px;
     z-index: 10;
     opacity: 0.3;
     cursor: pointer;
     transition: all 500ms;
 }
 #outilsgamme .zone_gamme .picto_intervalle .option-lowvision:hover{
     opacity: 0.8;
 }
 #outilsgamme .zone_gamme .picto_intervalle .option-lowvision.active{
     opacity: 1;
 }
 

 
 #outilsgamme .zone_gamme.creative_mode .bloc_intervalle.active .picto_intervalle{
     top:-20px;
 }
 #outilsgamme .bloc_intervalle.active .dots{
     top:-32px
 }
 
     #outilsgamme .zone_gamme .bloc_intervalle .picto_intervalle{
         display: none;
     }
     #outilsgamme .zone_gamme .bloc_intervalle .picto_intervalle.dot-active{
         display: block;
     }
 
     #outilsgamme .zone_gamme .picto{
         background-size: 140%;
         width: 100%;
         height: 100%;
         background-position: center;
         opacity: 0.25;
         transition:all 500ms
     }
     #outilsgamme .zone_gamme .bloc_intervalle.active .picto{
        opacity: 1;
     }
     #outilsgamme .zone_gamme .picto:hover{
         /* opacity: 0.5 */
     }
     
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv1 .picto_intervalle .picto,
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv1t .picto_intervalle .picto{
             /* opacity: 0.70;	 */
             /* filter: grayscale(1); */
         }
         
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv1 .picto_intervalle .picto:hover,
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv1t .picto_intervalle .picto:hover{
             /* opacity: 0.90;	 */
             /* filter: grayscale(1); */
         }
         
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv2 .picto_intervalle .picto,
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv2t .picto_intervalle .picto{
             /* opacity: 1;	 */
         }
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv2t .picto_intervalle .picto{
             /* filter: grayscale(1); */
         }
         
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv2 .picto_intervalle .picto:hover,
         #outilsgamme .zone_gamme  .bloc_intervalle.active.nv2t .picto_intervalle .picto:hover{
             /* opacity: 0.6;	 */
         }
         
         #outilsgamme .zone_gamme  .bloc_intervalle.root.active .picto_intervalle .picto{
             /* opacity: 1 !important; */
             
         }
         
         #outilsgamme .zone_gamme  .bloc_intervalle .picto_intervalle .notes .note{
             display: none;
             position: absolute;
             width: 100%;
             text-align: center;
             opacity: 0.2;
         }
         
         #outilsgamme .zone_manche .position .nhg .tonalite,
         #outilsgamme .zone_manche .position .neutre .tonalite,
         #outilsgamme .zone_manche .position .neutre .txt-inter {
             width: 100%;
             text-align: center;
             display: block;
             padding-top: 9px;
             font-weight:bold;
         }
         
         #outilsgamme .zone_gamme  .bloc_intervalle.active .picto_intervalle .notes .note,
         #outilsgamme .zone_gamme  .bloc_intervalle.root .picto_intervalle .notes .note{
             opacity: 0.6
         }
         
         #outilsgamme .zone_gamme .intervalles_liste .picto_intervalle .notes .note.active{display: block;}
         
         #outilsgamme .zone_gamme .separateur{
             width:25px;
             position: relative;
             top: -23px;
             display: inline-block;
             text-align: center;
         }
         #outilsgamme .zone_gamme .separateur img{
             max-width:80%;
             height:auto
         }
     
     
     #outilsgamme .bloc_intervalle .dots {
         position: absolute;
         width: 100%;
         top: -12px;
         transition: all 800ms;
     }
     #outilsgamme .bloc_intervalle .dots .dot{
         width: 8px;
         height: 8px;
         display: inline-block;
         background: #fff;
         opacity: 0.3;
         margin:2px;
         border-radius:100%;
         transition:all 500ms
     }
     
     #outilsgamme .bloc_intervalle .dots .dot:hover{
         opacity: 0.6;
     }
     
     #outilsgamme .bloc_intervalle .dots .dot.active{
         opacity: 0.8
     }
     
    
    
    #outilsgamme .zone_gamme .degres_liste .degre{
        display: inline-block;
        padding:10px;
        z-index: 75;
        position:relative;
    }
    #outilsgamme .zone_gamme .degres_liste .degre:hover{
       z-index: 80; 
    }
    #outilsgamme .zone_gamme .degres_liste .degre.active .degre_illu{
        color:#000;
        background:#fff;
    }
    
        #outilsgamme .zone_gamme .degres_liste .degre .degre_illu{
            background: color(srgb 0 0 0 / 0.60);
            width:60px;
            height:60px;
            border:1px solid #fff;
            text-align: center;
            font-family: 'Roboto Slab', serif;
            font-size:1.4em;
            padding-top:13px;
            color:#fff;
            transition: 300ms all;    
            position: relative;
            top:0px;
        }  
        #outilsgamme .zone_gamme .degres_liste .degre:hover .degre_illu{
            top: 6px;
        }
        
        #outilsgamme.opentuning .zone_gamme .degres_liste .degre .degre_illu{
            cursor: default !important;
        }
        
        #outilsgamme .zone_gamme .degres_liste .degre:hover .degre_illu{
            background: rgba(255, 255, 255, 0.4)   
        }
        
        #outilsgamme .zone_gamme .entente_liste {
            opacity: 0.5;
        }
        
        #outilsgamme .zone_gamme .degres_liste .degre .liste_accords {
            position: absolute;
            top: -9999px;
            left: -9999px;
            z-index: 55;
            width: 220px;
            background: rgba(0, 0, 0, 0.95);
            font-family: 'Roboto', serif;
            box-shadow: 0px 20px 22px #000000e8;
            border-top: 1px solid #fff;
        }
            #outilsgamme .zone_gamme .degres_liste .degre .liste_accords li{
                padding: 7px 15px;
                font-size: 1em;
                text-align: left;
            }
            #outilsgamme .zone_gamme .degres_liste .degre .liste_accords li .option{
                cursor: pointer;   
                display: inline-block;
                margin:0px 2px;
                opacity: 0.2;
                transition: all 250ms;
            }
            #outilsgamme .zone_gamme .degres_liste .degre .liste_accords li:hover .option{
                opacity: 1;   
            }
            #outilsgamme .zone_gamme .degres_liste .degre .liste_accords li:hover{
                background: rgba(60, 59, 59, 0.85);
            }
        #outilsgamme .zone_gamme .degres_liste .degre:hover .liste_accords{
            top: 75px;
            left: -70px;
            transition-property: top,left;
            transition-delay: 380ms;
            max-height:295px;
            overflow: auto;
        }
        
        #outilsgamme .zone_gamme .degres_liste .degre:hover .liste_accords .entente_liste {
            padding: 5px;
            font-weight: bold;
        }
        #outilsgamme .zone_gamme .degres_liste .degre .liste_accords  ul{
            padding:0px
            
        }
        #outilsgamme .zone_gamme .degres_liste .degre .liste_accords  ul li {
            list-style:none;
            
        }
        
        #outilsgamme .zone_gamme .degres_liste .degre .liste_accords .notes,
        #outilsgamme .zone_gamme .degres_liste .degre .liste_accords .note.active{
            display: inline !important;
        }
        #outilsgamme .zone_gamme .degres_liste .degre .liste_accords .notes .note{
            position: relative !important;
            font-weight: 100 !important;
            top:0px !important;
        }
        
        
    #outilsgamme .zone_gamme .degres_liste .degre .notes .note{
        display: none;
        position: absolute;
        width:60px;
        text-align: center;
        top:73px;
        font-size: 1em;
        font-family: 'Roboto', serif;
        opacity: 0.7;
        transition:300ms all;
    }
    
    #outilsgamme .zone_gamme .degres_liste .degre:hover .notes .note{
        top:79px;
    }
    
    #outilsgamme .zone_gamme .degres_liste .degre .notes .note.active{
        display: block;   
    }
    #outilsgamme .zone_gamme .degres_liste .degre:hover .notes .note.active{
        font-weight: bold;
        opacity: 1;    
    }
 #outilsgamme.v1_5 .zone_gamme .degres_liste .degre{
     padding:7px !important;
 }
 
 #outilsgamme.v1_5 .zone_gamme .degres_liste .degre .degre_illu{
     border-radius:10px !important;
 }
 
 .tonalite_dropdow{
     position: absolute;
     left:0px;
     top:50px;
     z-index: 100;
     width:70px;
 }
 
 .tonalite_dropdow .select {
     width: 70px;
     height: 70px;
     border: 5px solid #fff;
     color: #fff;
     font-weight: bold;
     font-size: 2em;
     text-align: center;
     padding: 9px;
 }
 
     .tonalite_dropdow .select .fas.fa-caret-down {
         font-size: 16px;
         position: absolute;
         top: 47px;
         left: 30px;
     }
 
 .tonalite_dropdow .option {
     box-sizing: border-box;
     margin: -3px;
 }
 
.tonalite_dropdow .dropdown-custom {
    display: none;
    position: absolute;
    top: -5px;
    left: 70px;
    width: 1100px;
    text-align: left;
}
 
.tonalite_dropdow:hover .dropdown-custom {
    display: block;
    background: rgba(0, 0, 0, 0.95);
    font-size: 1.8em;
    font-weight: bold;
    height: 82px;
    padding-top: 9px;
}
 
 .tonalite_dropdow:hover .dropdown-custom .option {
     padding: 2px 29px 8px;
     display: inline-block;
 }
 
 .tonalite_dropdow:hover .dropdown-custom .option .notefr {
     font-weight: 100;
     font-size: 0.5em;
     opacity: 0.5;
     line-height:7px;
 }
 
 .tonalite_dropdow:hover .dropdown-custom .option .notefr i{
     display: inline-block;
     padding:0px 2px;   
 }
 
 
 .tonalite_dropdow:hover .dropdown-custom .option.active,
 .tonalite_dropdow:hover .dropdown-custom .option.active:hover{
     background: rgba(39, 250, 253, 0.812);
 }
 
 .tonalite_dropdow:hover .dropdown-custom .option:hover {
     background: rgba(39, 250, 253, 0.357);
     cursor: pointer;
 }
 
 .tonalite_dropdow .augbem {
     display: inline-block;
     position: relative;
     top: 2px;
 }
 
 .tonalite_dropdow .augbem .option {
     font-size:0.8em;
     display: block !important;
     padding: 0px 20px 0px 20px !important;
     margin-bottom: 2px !important;
     line-height: 28px;
 }
 
 .tonalite_dropdow .augbem .notefr {
     display: none;
 }
 
 
#outilsgamme .zone_manche,
#outilsgamme .zone_manche .illustration_manche,
#outilsgamme .zone_manche .position{
    width:1200px;
    height:265px;
}

#outilsgamme .zone_manche.mode_grille,
#outilsgamme .zone_manche.mode_grille .illustration_manche,
#outilsgamme .zone_manche.mode_grille .position{
    width:1088px;
}

#outilsgamme .zone_manche.mode_manche_claire,
#outilsgamme .zone_manche.mode_manche_claire .illustration_manche,
#outilsgamme .zone_manche.mode_manche_claire .position{
    width:1168px;
}
 

 #outilsgamme .zone_manche.manche_entier, 
 #outilsgamme .zone_manche.manche_entier .illustration_manche, 
 #outilsgamme .zone_manche.manche_entier .position {
     width: 1390px !important;
 }
 
 
 
 
 #outilsgamme .zone_manche{
     position: relative;
     margin: auto;
     z-index: 0;
 }
 
 
 #outilsgamme .zone_manche .illustration_manche {
     position: absolute;
     left: 0px;
     top: 0px;
     background-position: left -4px;
     background-repeat: no-repeat;
     background-size: 1392px 266px;
 }
#outilsgamme .zone_manche .illustration_manche.zone_manche_gaucher {
    background-position: right -3px !important;
} 

 #outilsgamme .zone_manche .illustration_manche.mode_manche {
    top: 13px;
 }
 #outilsgamme .zone_manche .illustration_manche.mode_manche_claire {
     top: 8px;
 }
 
 #outilsgamme .zone_manche .position,
 #outilsgamme .zone_manche.mode_reperage_2 .zone_reperage{
     position: absolute;
     top:0px;
     left:0px;
     width:1px;
     height:1px;
     z-index: 10;
     display: none;
     width:100%;
 }
 
 #outilsgamme .zone_manche .position.active{
     display: block;	
 }
 
 /* MODE SUPERPOSITION */
 
 #outilsgamme .zone_manche .superposition{
      position: absolute;
      top:0px;
      left:0px;
      width:1px;
      height:1px;
      z-index: 10;
      display: none;
      width:100%;
 }
 
 #outilsgamme .zone_manche.hassuperposition .superposition{
    display: block;
 }
 
 #outilsgamme .zone_manche.hassuperposition .superposition,
 #outilsgamme .zone_manche.hassuperposition .superposition .position{
     z-index: 10
 }
 #outilsgamme .zone_manche.hassuperposition .position .intervalle,
 #outilsgamme .zone_manche.hassuperposition .position .neutre .tonalite,
 #outilsgamme .zone_manche.hassuperposition .position .note.inter-R .intervalle,
 #outilsgamme .zone_manche.hassuperposition .superposition .position .neutre{
     display: none !important;
 }
 #outilsgamme .zone_manche.hassuperposition .superposition,
 #outilsgamme .zone_manche.hassuperposition .position .neutre,
 #outilsgamme .zone_manche.hassuperposition .superposition .position .intervalle,
 #outilsgamme .zone_manche.hassuperposition .superposition .position .intervalle.hide,
 #outilsgamme .zone_manche.hassuperposition .superposition .position .note.inter-R .intervalle{
     display: block !important;
 }
 
 #outilsgamme .zone_manche.mode_reperage_2 .note.reperage .intervalle,
 #outilsgamme .zone_manche.mode_reperage_2 .note.reperage .neutre{
     opacity:0;
 }
     
     #outilsgamme .zone_manche.mode_reperage_2 .zone_reperage .manches{
         display: none !important;    
     }
 
 /* preview mode */
 
 #outilsgamme .zone_manche.previewmode .position.preview{
     display: block;	
 }
 
 /* ! previex mode */
 
 
/* REPERAGE MODE */
/*nv1*/

#outilsgamme .zone_manche.mode_reperage .note{
    opacity:0.1;
}
    #outilsgamme .zone_manche.mode_reperage .note.reperage{
        opacity: 1;
    }

/*nv2*/
#outilsgamme .zone_manche.mode_reperage_2 .zone_reperage,
#outilsgamme .zone_manche.mode_reperage_2 .zone_reperage .position{
    z-index: 10
}
#outilsgamme .zone_manche.mode_reperage_2 .position .intervalle,
#outilsgamme .zone_manche.mode_reperage_2 .position .neutre .tonalite,
#outilsgamme .zone_manche.mode_reperage_2 .position .note.inter-R .intervalle,
#outilsgamme .zone_manche.mode_reperage_2 .zone_reperage .position .neutre{
    display: none !important;
}
#outilsgamme .zone_manche.mode_reperage_2 .zone_reperage,
#outilsgamme .zone_manche.mode_reperage_2 .position .neutre,
#outilsgamme .zone_manche.mode_reperage_2 .zone_reperage .position .intervalle,
#outilsgamme .zone_manche.mode_reperage_2 .zone_reperage .position .intervalle.hide,
#outilsgamme .zone_manche.mode_reperage_2 .zone_reperage .position .note.inter-R .intervalle{
    display: block !important;
}

#outilsgamme .zone_manche.mode_reperage_2 .note.reperage .intervalle,
#outilsgamme .zone_manche.mode_reperage_2 .note.reperage .neutre{
    opacity:0;
}
    
    #outilsgamme .zone_manche.mode_reperage_2 .zone_reperage .manches{
        display: none !important;    
    }
    
/* !!REPERAGE MODE */

/* FORCE INTERVALLES */

.ta_force_intervalles .note .intervalle,
.ta_force_intervalles .note .intervalle.hide{
    display: block !important;
    opacity: 1 !important;  
}
.ta_force_intervalles .zone_manche.option-lowvision .note.lowvision,
.zone_manche.option-lowvision .ta_force_intervalles .note.lowvision{
    opacity: 1 !important;  
}
.ta_force_intervalles .note .neutre{
    display: none !important;
}

.ta_force_intervalles .zone_manche.previewmode .position.preview,
.zone_manche.previewmode .ta_force_intervalles .position.preview {
     display: inherit !important;	
 }

 
     #outilsgamme .zone_manche .position .note{
         position: absolute;
         /* transition: 250ms all; */
     }
 
     #outilsgamme .zone_manche .position .nhg,
     #outilsgamme .zone_manche .position .neutre,
     #outilsgamme .zone_manche .position .intervalle{
         width:35px;
         height:35px;
         background-size:160%;
         background-position: center;
         background-repeat: no-repeat;
         position: absolute;
         left:-17.5px;
         top:-17.5px;
     }
     
     #outilsgamme .zone_manche .position .nhg{
        opacity:0;
     }
     
    #outilsgamme.show-nhg .zone_manche .position .nhg{
        opacity:0.3;
    }
     
     
     
     
     #outilsgamme .zone_manche .position .note.corde1{ top:34px;	}
     #outilsgamme .zone_manche .position .note.corde2{ top:65px;	}
     #outilsgamme .zone_manche .position .note.corde3{ top:98px;	}
     #outilsgamme .zone_manche .position .note.corde4{ top:132px;	}
     #outilsgamme .zone_manche .position .note.corde5{ top:165px;	}
     #outilsgamme .zone_manche .position .note.corde6{ top:201px;}
     
     /* MODE MANCHE */
     #outilsgamme .zone_manche.mode_manche .position .note.frete1{ left:-16px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete2{ left:91px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete3{ left:218px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete4{ left:333px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete5{ left:450px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete6{ left:545px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete7{ left:634px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete8{ left:715px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete9{ left:786px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete10{ left:855px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete11{ left:915px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete12{ left:979px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete13{ left:1033px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete14{ left:1086px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete15{ left:1133px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete16{ left:1178px;}
     #outilsgamme .zone_manche.mode_manche .position .note.frete17{ left:1219px;display:none}
     #outilsgamme .zone_manche.mode_manche .position .note.frete18{ left:1255px;display:none}
     #outilsgamme .zone_manche.mode_manche .position .note.frete19{ left:1289px;display:none}
     #outilsgamme .zone_manche.mode_manche .position .note.frete20{ left:1321px;display:none}
     #outilsgamme .zone_manche.mode_manche .position .note.frete21{ left:1360px;display:none}
     #outilsgamme .zone_manche.mode_manche .position .note.frete22{ display:none}
     
     /* MODE GAUCHER */
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete1{ left:auto; right:-16px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete2{ left:auto; right:91px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete3{ left:auto; right:218px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete4{ left:auto; right:333px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete5{ left:auto; right:450px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete6{ left:auto; right:545px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete7{ left:auto; right:634px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete8{ left:auto; right:715px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete9{ left:auto; right:786px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete10{ left:auto; right:855px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete11{ left:auto; right:915px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete12{ left:auto; right:979px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete13{ left:auto; right:1033px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete14{ left:auto; right:1086px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete15{ left:auto; right:1133px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete16{ left:auto; right:1178px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete17{ left:auto; right:1219px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete18{ left:auto; right:1255px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete19{ left:auto; right:1289px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete20{ left:auto; right:1321px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_manche .position .note.frete21{ left:auto; right:1360px !important;}
      
     
     #outilsgamme .zone_manche.mode_manche.manche_entier .position .note.frete17,
     #outilsgamme .zone_manche.mode_manche.manche_entier .position .note.frete18,
     #outilsgamme .zone_manche.mode_manche.manche_entier .position .note.frete19,
     #outilsgamme .zone_manche.mode_manche.manche_entier .position .note.frete20,
     #outilsgamme .zone_manche.mode_manche.manche_entier .position .note.frete21{
        display: block;
     }
     
     /* MODE MANCHE CLAIRE */
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete1{ left:-16px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete2{ left:81px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete3{ left:209px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete4{ left:321px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete5{ left:425px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete6{ left:522px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete7{ left:610px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete8{ left:690px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete9{ left:762px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete10{ left:829px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete11{ left:891px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete12{ left:950px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete13{ left:1005px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete14{ left:1055px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete15{ left:1102px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete16{ left:1145px;}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete17{ left:1185px;display:none}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete18{ left:1220px;display:none}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete19{ left:1255px;display:none}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete20{ left:1288px;display:none}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete21{ left:1318px;display:none}
      #outilsgamme .zone_manche.mode_manche_claire .position .note.frete22{ left:1349px;display:none}
      
      /* MODE GAUCHER */
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete1{ left:auto; right:-16px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete2{ left:auto; right:81px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete3{ left:auto; right:209px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete4{ left:auto; right:321px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete5{ left:auto; right:425px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete6{ left:auto; right:522px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete7{ left:auto; right:610px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete8{ left:auto; right:690px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete9{ left:auto; right:762px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete10{ left:auto; right:829px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete11{ left:auto; right:891px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete12{ left:auto; right:950px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete13{ left:auto; right:1005px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete14{ left:auto; right:1055px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete15{ left:auto; right:1102px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete16{ left:auto; right:1145px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete17{ left:auto; right:1185px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete18{ left:auto; right:1220px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete19{ left:auto; right:1255px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete20{ left:auto; right:1288px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete21{ left:auto; right:1318px !important;}
       #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire .position .note.frete21{ left:auto; right:1349px !important;}
       
      
      #outilsgamme .zone_manche.mode_manche_claire.manche_entier .position .note.frete17,
      #outilsgamme .zone_manche.mode_manche_claire.manche_entier .position .note.frete18,
      #outilsgamme .zone_manche.mode_manche_claire.manche_entier .position .note.frete19,
      #outilsgamme .zone_manche.mode_manche_claire.manche_entier .position .note.frete20,
      #outilsgamme .zone_manche.mode_manche_claire.manche_entier .position .note.frete21,
      #outilsgamme .zone_manche.mode_manche_claire.manche_entier .position .note.frete22{
         display: block;
      }
     
     /* MODE MANCHE CLAIRE 2  */
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete1{ left:-16px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete2{ left:81px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete3{ left:219px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete4{ left:339px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete5{ left:444px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete6{ left:542px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete7{ left:630px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete8{ left:708px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete9{ left:783px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete10{ left:849px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete11{ left:910px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete12{ left:967px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete13{ left:1018px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete14{ left:1066px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete15{ left:1109px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete16{ left:1151px;}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete17{ left:1188px;display:none}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete18{ left:1223px;display:none}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete19{ left:1255px;display:none}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete20{ left:1286px;display:none}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete21{ left:1312px;display:none}
       #outilsgamme .zone_manche.mode_manche_claire_3 .position .note.frete22{ left:1337px;display:none}
       
       /* MODE GAUCHER */
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete1{ left:auto; right:-16px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete2{ left:auto; right:81px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete3{ left:auto; right:219px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete4{ left:auto; right:339px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete5{ left:auto; right:444px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete6{ left:auto; right:542px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete7{ left:auto; right:630px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete8{ left:auto; right:708px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete9{ left:auto; right:783px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete10{ left:auto; right:849px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete11{ left:auto; right:910px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete12{ left:auto; right:967px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete13{ left:auto; right:1018px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete14{ left:auto; right:1066px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete15{ left:auto; right:1109px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete16{ left:auto; right:1151px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete17{ left:auto; right:1188px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete18{ left:auto; right:1223px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete19{ left:auto; right:1255px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete20{ left:auto; right:1286px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete21{ left:auto; right:1312px !important;}
        #outilsgamme .zone_manche.zone_manche_gauche.mode_manche_claire_3 .position .note.frete21{ left:auto; right:1337px !important;}
        
       
       #outilsgamme .zone_manche.mode_manche_claire_3.manche_entier .position .note.frete17,
       #outilsgamme .zone_manche.mode_manche_claire_3.manche_entier .position .note.frete18,
       #outilsgamme .zone_manche.mode_manche_claire_3.manche_entier .position .note.frete19,
       #outilsgamme .zone_manche.mode_manche_claire_3.manche_entier .position .note.frete20,
       #outilsgamme .zone_manche.mode_manche_claire_3.manche_entier .position .note.frete21,
       #outilsgamme .zone_manche.mode_manche_claire_3.manche_entier .position .note.frete22{
          display: block;
       }
     
     /* MODE GRILLE */
     #outilsgamme .zone_manche.mode_grille .position .note.frete1{ right:auto; left:-5px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete2{ right:auto; left:57px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete3{ right:auto; left:133px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete4{ right:auto; left:200px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete5{ right:auto; left:271px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete6{ right:auto; left:341px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete7{ right:auto; left:413px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete8{ right:auto; left:484px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete9{ right:auto; left:556px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete10{ right:auto; left:626px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete11{ right:auto; left:698px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete12{ right:auto; left:769px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete13{ right:auto; left:840px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete14{ right:auto; left:910px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete15{ right:auto; left:983px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete16{ right:auto; left:1053px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete17{ right:auto; left:1124px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete18{ right:auto; left:1194px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete19{ right:auto; left:1266px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete20{ right:auto; left:1336px }
     #outilsgamme .zone_manche.mode_grille .position .note.frete21{ display: none; }
     #outilsgamme .zone_manche.mode_grille .position .note.frete22{ display: none; }
     
     /* MODE GRILLE GAUCHER */
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete1{ left:auto; right:-5px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete2{ left:auto; right:57px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete3{ left:auto; right:133px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete4{ left:auto; right:200px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete5{ left:auto; right:271px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete6{ left:auto; right:341px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete7{ left:auto; right:413px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete8{ left:auto; right:484px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete9{ left:auto; right:556px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete10{ left:auto; right:626px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete11{ left:auto; right:698px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete12{ left:auto; right:769px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete13{ left:auto; right:840px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete14{ left:auto; right:910px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete15{ left:auto; right:983px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete16{ left:auto; right:1053px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete17{ left:auto; right:1124px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete18{ left:auto; right:1194px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete19{ left:auto; right:1266px !important;}
      #outilsgamme .zone_manche.zone_manche_gauche.mode_grille .position .note.frete20{ left:auto; right:1336px !important;}
     
     #outilsgamme .zone_manche.mode_grille .position .note.frete17,
     #outilsgamme .zone_manche.mode_grille .position .note.frete18,
     #outilsgamme .zone_manche.mode_grille .position .note.frete19,
     #outilsgamme .zone_manche.mode_grille .position .note.frete20{
         display: none;
     }
    #outilsgamme .zone_manche.mode_grille.manche_entier .position .note.frete17,
    #outilsgamme .zone_manche.mode_grille.manche_entier .position .note.frete18,
    #outilsgamme .zone_manche.mode_grille.manche_entier .position .note.frete19,
    #outilsgamme .zone_manche.mode_grille.manche_entier .position .note.frete20{
        display: block;
    }
     
    
 
     
     
    
    
    #outilsgamme .zone_manche.mode_manche .illustration_manche.mode_grille,
    #outilsgamme .zone_manche.mode_manche .illustration_manche.mode_manche_claire,
    #outilsgamme .zone_manche.mode_manche .illustration_manche.mode_manche_claire_3{display:none !important;}
    #outilsgamme .zone_manche.mode_grille .illustration_manche.mode_manche,
    #outilsgamme .zone_manche.mode_grille .illustration_manche.mode_manche_claire,
    #outilsgamme .zone_manche.mode_grille .illustration_manche.mode_manche_claire_3{display:none !important;}
    #outilsgamme .zone_manche.mode_manche_claire .illustration_manche.mode_manche,
    #outilsgamme .zone_manche.mode_manche_claire .illustration_manche.mode_grille,
    #outilsgamme .zone_manche.mode_manche_claire .illustration_manche.mode_manche_claire_3{display:none !important;}
    
    #outilsgamme .zone_manche.mode_manche_claire_3 .illustration_manche.mode_manche,
    #outilsgamme .zone_manche.mode_manche_claire_3 .illustration_manche.mode_grille,
    #outilsgamme .zone_manche.mode_manche_claire_3 .illustration_manche.mode_manche_claire{display:none !important;}
    
 
     /*//MODE AUDIO*/
     
     
     #outilsgamme .zone_manche .position .note.playmp3{
         cursor:pointer;
     }
     #outilsgamme .zone_manche.mode-accord .note.select .selecteur {
         position: absolute;
         width: 40px;
         height: 40px;
         top: -18px;
         border: 2px dashed #FFF;
         left: -20px;
         border-radius: 100%;
     }
     
    #outilsgamme .playaccord {
        position: absolute;
        right: 4px;
        top: 39px;
        cursor: pointer;
        color: #a0a7bb;
    }
        #outilsgamme .playaccord i{
            font-size:30px !important;
        } 
        
    #outilsgamme .saveaccord {
        position: absolute;
        right: 40px;
        top: 39px;
        cursor: pointer;
        color: #a0a7bb;
    }
        #outilsgamme .saveaccord i{
            font-size:30px !important;
        } 
     

    #outilsgamme .search_gamme_button{
        position: relative
        
    }
        #outilsgamme .search_gamme_button .help{
            position: absolute;
            right: -7px;
            top: 0px;   
        }
   #outilsgamme .search_gamme {
       
       cursor: pointer;
       font-size: 18px;
   }
      
      #outilsgamme .search_gamme .fas{
          
      }
    .manche_ref .zone_manche.mode-search .intervalle{
        display: none  !important;
    }
    .zone_manche.mode-search .neutre,
    .zone_manche.mode-search .neutre.hide{
        display: block !important;
        opacity: 0.3;
        transition: 500ms all;
    }
    .zone_manche.mode-search .neutre:hover{
        opacity: 0.6;
    }
    
    
    
     /* bourdon */
     #bourdons{
         position: absolute;
         left:85px;
         top:65px;
     }
     #bourdons .on{ display:none; }
     #bourdons .off{ opacity: 0.6; }
     #bourdons .off:hover{ opacity: 0.9; cursor: pointer; }
     #bourdons.active .on{ display:block;cursor: pointer;}
     #bourdons.active .off{ display:none;}
     
     #bourdons .fas{
         font-size:40px;
     }
     .lesbourdonscaches{
         display: none;
     }
 
 
 
    #outilsgamme .accords_voir_grille img{
        width:80px;   
    }
 
 /* mode ecouter */ 
 
 #outilsgamme .options_bot_right {
     position: absolute;
     right: 10px;
     font-size: 48px;
     opacity: 0.5;
     transition:350ms all;
 }
 
    #outilsgamme .options_bot_right:hover,
    #outilsgamme .options_bot_right.active{
        opacity: 1;     
    }
 
#outilsgamme #mode_ecouter{
    margin-top:20px
}
    #outilsgamme #mode_ecouter .ta_slide_morceaux .slide{
        margin:10px;   
    }

#outilsgamme #mode_ecouter .zone_riffs {
    text-align: center;
    margin-bottom: 60px;
}
    #outilsgamme #mode_ecouter .zone_riffs .playriff i{
        font-size: 35px;
        /* animation: levitation 10s ease 0s infinite; */
        position: relative;

    }
    
    @keyframes levitation{
    from,11%,to {   top:15px;}
    12%{        top:7px;}
    27%{        top:11px;}
    42%{        top:8px;}
    57%{        top:16px;}
    77%{        top:7px;}
    99.99%{         top:19px;}
    }
    
    #outilsgamme #mode_ecouter .zone_riffs .ecouter_ce_riff {
        text-align: center;
        border: 1px solid #fff;
        margin: auto;
        width: 450px;
        padding: 25px 30px;
        margin-bottom: 60px;
        border-radius: 2px;
        cursor: pointer;
    }
    
    #outilsgamme #mode_ecouter .zone_riffs .slick-next, #outilsgamme #mode_ecouter .zone_riffs .slick-prev{
        top:25%;
        z-index: 5;
    }
    #outilsgamme #mode_ecouter .zone_riffs .slick-next::before, #outilsgamme #mode_ecouter .zone_riffs .slick-prev::before {
        font-size:30px;
    }
    #outilsgamme #mode_ecouter .zone_riffs .slick-prev{
        left:75px   
    }
    #outilsgamme #mode_ecouter .zone_riffs .slick-next{
        right:90px;
    }
    
    .les_intervalles {
        margin: 25px 0px 0px;
    }
    
    #outilsgamme #mode_ecouter .zone_riffs .riff_details .intervalle,
    #outilsgamme #mode_ecouter .zone_riffs .riff_details .separateur{
        display:inline-block;
    }
    
    #outilsgamme #mode_ecouter .zone_riffs .riff_details .separateur {
        padding: 10px;
        position: relative;
        top: -9px;
        font-size: 30px;
    }
    
    #outilsgamme #mode_ecouter .zone_riffs .riff_details .controllers {
        font-size: 25px;
        cursor: pointer;
    }
        #outilsgamme #mode_ecouter .zone_riffs .riff_details .controllers .controller{
            
            display: inline-block;
            margin:0px 15px;
            
        }
        
    
    #outilsgamme #mode_ecouter .zone_riffs .illu {
        background-position: center;
        background-size: 150%;
        width: 40px;
        height: 40px;
    }

#outilsgamme #mode_ecouter .slick-dots li button::before {
    font-family: slick;
    font-size: 26px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#outilsgamme #mode_ecouter .slick-dots li.slick-active button::before {
    opacity: .75;
    color: #fff;
}
 #outilsgamme .accords_voir_grille{
      opacity:0.8;
      top:20px;
      cursor:pointer;
  }
 
 #outilsgamme .g7credit {
     text-align: right;
     position: absolute;
     right: 15px;
     top: 233px;
     width: 120px;
     z-index: 999;
 }
 
 #outilsgamme .g7credit img{
     width:80px;
 }
 
 
 
/* OPTIONS */
 
#outilsgamme .zone_options {
    position: absolute;
    height: 30px;
    margin: auto;
    width: 800px;
    left: 186px;
    top: -39px;
    text-align: left;
    z-index: 99;
}
    
    #outilsgamme .option_inline.sep_vertical{
        opacity:0.4;
    }
    
    #outilsgamme .zone_options i.fa,
    #outilsgamme .zone_options i.fas{
        font-size: 20px;
        position: relative;
        top: 4px;
    }
    
    #outilsgamme .zone_options .option_inline{
        display: inline-block;
        padding:5px 6px;
    }
    
    #outilsgamme .zone_options .option{
        opacity: 0.3;
        transition: all 500ms;
        cursor: pointer;
         
    }
    #outilsgamme  .zone_options .option:hover{
        opacity: 0.6;
    }
    #outilsgamme  .zone_options .option.active{
        opacity: 1;
    }
    #outilsgamme  .zone_options .option.active:hover{
        opacity: 0.8;
    }
    
    /* Low Livision */
    #outilsgamme  .zone_options .mode_lowvision{
        
    }
    
    /* Exit mode reperage */
    #outilsgamme .exit_reperage_mode {
        position: absolute;
        font-size: 47px;
        left: 9px;
        opacity: 0.8;
        transition: 250ms all;
        cursor: pointer;
    }
    
    #outilsgamme .exit_reperage_mode:hover {
        opacity: 1;   
    }
    
    /* open tuning */
    #outilsgamme .zone_options .mode_opentuning .dropdown-toggle::after {
        vertical-align: 0.085em;
    }
    #outilsgamme .zone_options .mode_opentuning img{
        width:20px;
    }
    
        #outilsgamme .zone_options .mode_opentuning_dd{
            
        }
        
        #outilsgamme .zone_options .mode_opentuning_dd .dropdown-menu{
            background: rgba(0, 0, 0, 0.8);
            height: 250px;
            overflow: auto;
        }
        
        #outilsgamme .zone_options .mode_opentuning_dd .dropdown-item:focus, #outilsgamme .zone_options .mode_opentuning_dd .dropdown-item:hover {
            color: #fff;
            background-color: #202020;
        }
        #outilsgamme .zone_options .mode_opentuning_dd .dropdown-item.active, #outilsgamme .zone_options .mode_opentuning_dd .dropdown-item:active {
            text-decoration: none;
            background-color: #a0a7bb;
            color:#000
        }
        #outilsgamme .zone_options .mode_opentuning_dd .dropdown-menu a{
            
        }
    
    .title-tuning{
        font-size:0.8em;
    }
    
    #grilles .title-tuning{
        display: inline
    }
    
    /* Affichage Manche */
    #outilsgamme .zone_options .mode_affichage_connect {
        
        cursor: pointer;
    }
        #outilsgamme .zone_options .mode_affichage_connect img {
            width:20px;
        }
    /* Affichage Connect */
    #outilsgamme  .zone_options .mode_affichage_connect .option{
        display: none;   
    }
        #outilsgamme  .zone_options .mode_affichage_connect .option.active{
            display: block;  
            opacity: 0.6
        }
        
        #outilsgamme  .zone_options .mode_affichage_connect .option.active:hover{
            opacity: 0.8;
        }
        
    /* Affichage Notes */
    #outilsgamme .zone_options .aff_notes {
        
        cursor: pointer;
    }
        #outilsgamme  .zone_options .aff_notes img{
            width:20px;   
        }
    #outilsgamme  .zone_options .aff_notes .option{
        display: none;   
    }
        #outilsgamme  .zone_options .aff_notes .option.active{
            display: block;  
            opacity: 0.6
        }
        
        #outilsgamme  .zone_options .aff_notes .option.active:hover{
            opacity: 0.8;
        }
     
     #outilsgamme #modeaudio i{
         font-size: 18px;
         position: relative;
         top: 2px;
     }
         
     #outilsgamme #modeaudio .btn-outline-light.active{
         background-color: #a0a7bb;
         border-color: #8d919c;
         color: #000;
     }
     
     #outilsgamme #modeaudio .btn-outline-light {
         color: #c7c7c7;
         border-color: #8d919c;
     }
     
     #outilsgamme #modeaudio  .btn-outline-light:hover {
         color: #000;
         background-color: #8d919c;
         border-color: #8d919c;
     }
    
    
    #outilsgamme .zone_options .mode_degint {
        opacity: 0.3;
        transition: all 500ms;
        cursor: pointer;
    }
        #outilsgamme .zone_options .mode_degint .option{
            display: none;
        }
            #outilsgamme .zone_options .mode_degint .option img{
                width:18px;   
            }
        #outilsgamme .zone_options .mode_degint .option.active{
            display: block;
        }
    .aff_notes_options li{
        cursor: pointer;
    }
    
    .aff_notes_options img{
        width: 25px;
          margin-right: 8px;
    }
    
    #outilsgamme .zone_options1-5{
        
        height: 40px;
        margin: auto;
        text-align: left;
        z-index: 99;
        position: relative;
        text-align: center;
        margin-top:10px;
        opacity: 0.55;
        transition: all 250ms;
    }
    #outilsgamme .zone_options1-5:hover{
        opacity: 1;   
    }
    
    #outilsgamme .zone_options1-5 .cursor_actions {
      padding: 0px 8px;
      background: #232323;
      border-radius: 10px;   
      margin:0px 4px;
      display:inline-block;
      position: relative;
    }
    
    #outilsgamme .zone_options1-5 .cursor_actions .legend {
        position: absolute;
        width: 100%;
        top: -18px;
        font-size: 0.8em;
        opacity: 0.5;
        text-align: center;
        left:0px;
    }
    
    #outilsgamme .zone_options1-5 .option,  
    #outilsgamme .zone_options1-5 .option_inline  {
        display: inline-block;
        font-size: 20px;
        padding: 4px 8px;
        opacity: 0.35;
        cursor: pointer;
        
    }
    #outilsgamme .zone_options1-5 .option:hover{
        opacity: 0.85
    }
    #outilsgamme .zone_options1-5 .option.active {
        opacity: 1;   
    }
    
    #outilsgamme .zone_options1-5 .sep{
        display: inline-block;
        width: 2px;
        background: #515151;
        height: 16px;
        margin: 0px 8px;
    
    }
    
    #outilsgamme .zone_options1-5  .groupe {
        position: relative;
        display: inline-block;
        margin: 0px 10px;
    }
    #outilsgamme .zone_options1-5  .groupe_name {
        position: absolute;
        width: 100%;
        top: -18px;
        font-size: 0.8em;
        opacity: 0.5;
    }
    #outilsgamme .zone_options1-5  .position {
        display: inline-block;
        padding: 4px;
        font-weight: bold;
        opacity: 0.3;
        font-size: 20px;
        cursor: pointer;
    }
    
    #outilsgamme .zone_options1-5  .position.active {
        opacity: 1;   
    }
    
    #outilsgamme .option-dropdown{
        position: relative;
        display: inline-block;
    }
    
    #outilsgamme .option-dropdown .option-dropdown-menu{
        
        display: none;
        position: absolute;
        top:36px;
        left:-40px;
        min-width:180px;
        background: rgba(0, 0, 0, 0.889);
        color:#fff;
        border-radius: 10px;
        padding:10px;
        text-align: left;
        
    }
    
    #outilsgamme .option-dropdown .option-dropdown-menu label.btn{
        color:#999  ;
    }
    #outilsgamme .option-dropdown .option-dropdown-menu label.btn.active{
        color:#fff  ;
    }
    
    #outilsgamme .option-dropdown:hover .option-dropdown-menu{
        display: block;   
    }
    
    .mode_manche_entier.option {
        
    }
     
     .zone_manche.option-lowvision .note.lowvision,
     .zone_manche.option-lowvision .note.lowvision.active_position{
         opacity: 0.45 !important;
     }
     
     
    .zone_options .mode_lateralite {
        
        cursor: pointer;
    }
         .zone_options .mode_lateralite img{
             width:22px;
         }
     
    .zone_options .mode_lateralite.moded .g,
    .zone_options .mode_lateralite.modeg .d {
        position: relative;
    }
    
    .zone_options .mode_lateralite.moded .g {display: none}
    .zone_options .mode_lateralite.moded .d {display: inline}
    .zone_options .mode_lateralite.modeg .d {display: none}
    .zone_options .mode_lateralite.modeg .g {display: inline}
    
    
    .zone_options .mode_manche{
        transition:all 500ms;
    }
    
    .zone_options .mode_manche:hover{
        opacity: 1
    }
    
        .zone_options .mode_manche img {
            width: 45px;
            height: 18px;
        }
        
        .zone_options .mode_manche .option{display: none;}
        .zone_options .mode_manche .option.active{display: block;}
    
    .zone_options .print {
        opacity: 0.3;
        transition: all 500ms;
        cursor: pointer;
    }
        .zone_options .print a{
            color:#fff;
        }
    
    .zone_options .print:hover{
        opacity: 0.6
    }
    
    .sauvegarde.option {
    }
 
 
    .afficher_les_accords img{
        width:23px;
    }
    
    .afficher_les_accords_position img{
        width:23px;
    }
     
/* MODAL */
 
 .modal{
     background: #0000008a;
 }
 .modal-dialog {
     margin: 120px auto !important;
 }
 .modal-content {
     background-color: #000000fc !important;
     color: #d5d5d5 !important;
 }
 
 #HarmoDetailModal .header-fixed {
   position: sticky;
   top: 70px;
   background-color: #343a40; /* Pour garder la couleur de fond */
   z-index: 2; /* Pour s'assurer que la ligne reste au-dessus des autres */
 }
 
 #HarmoDetailModal .notegamme{
    padding: 4px;
    color: #a8a8a8;
 }
 
 #HarmoDetailModal .noteselect {
   width: 100%;
   hieght: 100%;
   display: block;
   border-radius: 10px;
   cursor: pointer;
   transition: 300ms all;
}

#HarmoDetailModal .noteselect:hover {
   background: #00000057;
}

#HarmoDetailModal .noteselect.active{
    background: #131212cf;
}

#HarmoDetailModal .degre-row {
    top: 160px;
    position: sticky;
    z-index: 2;
}

#HarmoDetailModal .degre-row th {
    background-color: #191919 !important;
    font-family: 'Roboto Slab', serif;
}
#HarmoDetailModal thead th{
    
}

 
 
 .intervalles_liste, .degres_liste {
     height: 100px;
 }
 
 /* End > Gamme */
 
 
.zone_positions_gammes{
    max-width:1200px;
    margin:auto;
    position: relative;  
    opacity: 0.4;
    transition:1500ms all;
}

.zone_positions_gammes:hover{
    opacity: 1;
}

    .zone_positions_gammes .groupe{
        max-width:450px;
        margin: auto;   
    }
    .zone_positions_gammes .groupe .groupe_name {
        font-size: 1.2em;
        text-align: center;
        letter-spacing: 0.2em;
        border-bottom: 1px solid #fff;
        padding: 4px;
    }
    
    .zone_positions_gammes .position {
        text-align: center;
        border: 1px solid #fff;
        padding: 1px;
        border-radius: 3px;
        font-size: 1.1em;
        margin: 10px 0px;
        transition: 500ms all;
        background-color: rgba(255, 255, 255, 0.05);
        cursor: pointer;
    }
    
    .zone_positions_gammes .position:hover{
        background-color:rgba(255, 255, 255, 0.5);
    }
    .zone_positions_gammes .position.active{
        background-color:rgba(255, 255, 255, 1);
        color:#000
    }
    .zone_manche.mode_positions_gamme .note,
    .zone_manche.mode_positions_gamme .note.lowvision{
        opacity: 0.1 !important;
    }
    .zone_manche.mode_positions_gamme .note.active_position{
         opacity: 1 !important;   
    }
    
     
 
 .html_hook_after_manche .titregamme .title-tuning{
    display: none;
 }
 
 /*
 
     MODE CONNECT
 
 */
 
 .zone_form_connect{
     margin:auto;
     width:780px;
 }
 
 
 .mancheconnect {
     position: relative;
     width: 1200px;
     margin: auto;
     z-index: 1
 }
 .mancheconnect .zone_manche{
     position: absolute !important;
     top:0px;
     left:0px;
 }
 
 .mancheconnect .zone_manche[data-ref="gamme2"]{
     z-index: 10 !important;
 }
 
 .mancheconnect .zone_manche[data-ref="gamme2"] .illustration_manche{
     display: none !important;
 }
 
 .mancheconnect .zone_manche .position .note .intervalle,
 .mancheconnect .zone_manche .position .note .neutre{
     display: none !important;
 }
 
 .mancheconnect .zone_manche[data-ref="gamme1"] .position .note .selecteur,
 .mancheconnect .zone_manche[data-ref="gamme2"] .position .note .selecteur,
 .zone_options .demo .selecteur{
     position: absolute;
     background-color: #000;
     border:1px solid #fff;
     width: 30px;
     height: 30px;
     left: -15px;
     top: -15px;
 }
 
 .mancheconnect .zone_manche[data-ref="gamme2"] .position .note .selecteur,
 .zone_options .demo.gamme2 .selecteur{
     border-radius:100%;
     width: 26px;
     height: 26px;
     left: -13px;
     top: -13px;
 }
 
 .zone_manche .note[data-inter="R"] .selecteur{
     background-position: center;
 }
 
.zone_options.option_connect{
    position: relative !important;
    left:auto !important;
    top:-17px !important;
}
 
 .zone_options.option_connect .demo.gamme1, .zone_options.option_connect .demo.gamme2 {
     position: absolute;
     top: 64px;
     left: -23px;
     opacity: 0.3;
     cursor: pointer;
 }
 
 .zone_options.option_connect .demo.gamme1.active,
 .zone_options.option_connect .demo.gamme2.active{
     opacity: 1;
 }
 
 .zone_options.option_connect .demo.gamme2 {
     right: -17px;
     left: auto;
     top: 66px;
 }
 
 
 
 .intervalles_connect{
     width: 800px;
     margin: 20px auto 20px;
 }
 
 .intervalles_connect .connect_liste_intervalle .intervalle{
     cursor: pointer;
 }
 
 .intervalles_connect .connect_liste_intervalle .intervalle .picto{
     max-width:40px;
     margin: auto;
     height: 40px;
     background-position: center;
     background-size: 150%;
     opacity: 0.3;
 }
 
 .intervalles_connect .connect_liste_intervalle .intervalle.active.nv1 .picto{
     opacity: 0.8;
 }
 
 .intervalles_connect .connect_liste_intervalle .intervalle.active.nv2 .picto{
     opacity: 1;
 }
 
 #outilsgamme.iframeconnect{
     height:auto;
 }
 
    #outilsgamme .zone_manches_connect{
        width: 1125px;
        height: 850px;
        position: relative; 
        margin: auto;    
    }
         
 
 
     #outilsgamme .iframe_connect {
         width: 1225px;
         position: relative;
         height: 261px;
         position: absolute;
         left: -16px;
         z-index: 10;
         display: none;
         
     }
     
    
    #outilsgamme .zone_manches_connect.pos2 #iframe_connect1 {
        top: 255px;
        display: block;
    }
    #outilsgamme .zone_manches_connect.pos2 #iframe_connect2 {
        top: 510px !important;
        display: block;
    }
    
    #outilsgamme .zone_manches_connect.pos3 #iframe_connect1 {
        top: 0px;
        display: block;
    }
    #outilsgamme .zone_manches_connect.pos3 .mancheconnect {
        top: 255px;
    }
    #outilsgamme .zone_manches_connect.pos3 #iframe_connect2 {
        top: 510px !important;
        display: block;
    }
    

#outilsgamme.iframeconnect .zone_gamme,
#outilsgamme.iframeconnect #loader-om,
#outilsgamme.iframeconnect .overlay_bkg,
#outilsgamme.iframeconnect .zone_contenu_cms{
    display: none !important;
}
#outilsgamme.iframeconnect .zone_gamme{
     position: absolute;
     top:0px;
     left:0px;
     background: rgba(0, 0, 0, 0.8);
     
 }

#outilsgamme.iframeconnect .zone_gamme.open{
    display: block;
}

.onglets_options{
    font-size:0.9em;
}

.onglets_options .sep,
.onglets_options .onglet{
    opacity: 0.5;   
    transition: all 500ms;
    cursor: pointer
}

.onglets_options .onglet:hover{
    opacity: 0.85;   
}

.onglets_options .onglet.active{
    opacity: 1;   
    text-decoration: underline;
}

/* xiiswchem */

.init_schema #outilsgamme{
    top:0px;
}

 .zone_gamme_xiiswchem{
    font-size: 1em;
    text-align: center;
    font-family: 'Roboto Slab', serif;

}
     .zone_gamme_xiiswchem .gammeparentname{
        display: none;   
    }
    
    .zone_gamme_xiiswchem .option{
        position: relative;
        z-index: 55;
    }
    
/* SEARCH MODE */


.search_mode_tonalite_switch img {
    height: 19px;
    
}

.search_mode_tonalite_switch:hover img {
    
}

#outilsgamme.search_mode .search_mode_tonalite_switch .mt{
    display: none;
}

/* init interface en note simple */
#outilsgamme.search_mode.search_mode_no_tonalite .mode_lowvision,
#outilsgamme.search_mode.search_mode_no_tonalite .tonalite_dropdow,
#outilsgamme.search_mode.search_mode_no_tonalite .intervalles_liste,
#outilsgamme.search_mode.search_mode_no_tonalite .search_mode_tonalite_switch .mst,
#outilsgamme.search_mode.search_mode_no_tonalite .manche_ref .note .intervalle.itr,
#outilsgamme.search_mode.search_mode_no_tonalite .search_mode_switch_tonalite_by_note{
    display: none !important;
}
#outilsgamme.search_mode.search_mode_no_tonalite .manche_ref .note .neutre.hide,
#outilsgamme.search_mode.search_mode_no_tonalite .search_mode_tonalite_switch .mt{
    display: block !important;   
}


.search_mode_switch_tonalite_by_note.option img {
    height: 19px;
}
#outilsgamme.search_mode_switch_tonalite_by_note  .option.search_mode_switch_tonalite_by_note{
    opacity: 1;
}

.zone_manche.mode-search .select2search .neutre{
    opacity: 1;
}
#outilsgamme .zone_manche.mode-search .note .selecteur{
    display: none;
}
#outilsgamme .zone_manche.mode-search .note.select2search .selecteur_search {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -18px;
    border: 2px solid #FFF;
    left: -20px;
    border-radius: 100%;
}



 
#outilsgamme select{
     background-image: url(../img/sort-down-solid.svg);
     background-position: 97% 18%;
     background-repeat: no-repeat;
     background-size: 14px;
}
 

#modalSearchGameContent .illu{
    opacity: 0.4;
    transition: 250ms all;
    cursor: pointer;
    display: inline-block;
}
    #modalSearchGameContent .illu .illu_c{
         width:44px;
         height:44px;
         background-position: center;
         background-size:150%;   
    }
#modalSearchGameContent .illu:hover{
     opacity: 0.8;   
}
#modalSearchGameContent .illu.active{
     opacity: 1;   
}

    #modalSearchGameContent .illu img {
        max-width: 55px;
    }
#modalSearchGameContent .result {
    padding: 2px;
}
#modalSearchGameContent .result sup{
    float:right;
}
#modalSearchGameContent .result sup,
#modalSearchGameContent .result .parent{
    display: none;
}
#modalSearchGameContent .result:hover sup,
#modalSearchGameContent .result:hover .parent{
    display: block;
}

#modalSearchGameContent .result:hover {
    background: #2d2d2d;
}

#modalSearchGameContent .parent{
    font-weight: bold;
}

#modalSearchGameContent label{
    font-weight: bold;
    padding:8px 0px;
}

#modalSearchGameContent.zone_search_mode .zone_filtre{
    border-radius: 10px;
    padding: 40px;
    background: #171717d6;
    width: 90%;
    margin: auto;
}


#modalSearchGameContent.zone_search_mode .liste_results{
    max-height:none;
    width:99%;
    text-align: center;
}

#modalSearchGameContent.zone_search_mode .result{
    display: inline-block;
    background: #222;
    border-radius: 5px;
    margin: 4px;
    text-align: left;
    min-width: 160px;
}

#modalSearchGameContent.zone_search_mode .result a{
    display: block;
    padding: 7px 10px;
    text-align: center;
    font-size: 1.4em;
}

#modalSearchGameContent.zone_search_mode .options_results{
    padding:2px;
    transition: all 250ms;
    opacity: 0.4;
}

#modalSearchGameContent.zone_search_mode .result:hover .options_results {
    opacity:1;   
}

#modalSearchGameContent.zone_search_mode .result .apercu_searchmode{
    font-size:20px;
    cursor: pointer;
    
}


#modalSearchGameContent.zone_search_mode  .show_accord_search_mode {
    position: relative;
    top: -4px;
    cursor: pointer;
}

#modalSearchGameContent.zone_search_mode .show_accord_search_mode img{
    height:18px;
}

#modalSearchGameContent.zone_search_mode .result .intervalles {
    padding-top: 4px;
}

#modalSearchGameContent.zone_search_mode .result .illu_c {
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: 160%;
    display: inline-block;
    margin: 1px;
    transition: all 250ms;
    opacity: 0.4;
}

#modalSearchGameContent.zone_search_mode .result:hover .illu_c {
    opacity:1;   
}

#modalSearchGameContent.zone_search_mode .result .parent{
    display: block;
    font-weight: normal;
    background: #171717;
    padding: 2px;
    font-size: 0.7em;
    color: #606060;
    letter-spacing: 0.08em;   
}

#modalSearchGameContent.zone_search_mode .result:hover sup{
    display:none !important;
}

#modalSearchGameContent.zone_search_mode .liste_allmatch {
    padding: 40px;
}

#modalSearchGameContent.zone_search_mode .all_match{
    background: #0f0d0d !important;
}

#modalSearchGameContent.zone_search_mode .liste_allmatch .result a {
    font-size: 2.5em;
}

#modalSearchGameContent.zone_search_mode .liste_allmatch .result .parent {
    font-size: 1em;
}

#modalSearchGameContent.zone_search_mode .liste_allmatch .result .illu_c {
    width: 30px;
    height: 30px;
}

#modalSearchGameContent.zone_search_mode .liste_allmatch .result {
    min-width: 350px;
}




.zone_manche.searchmode .intervalle{
    opacity: 0.3;
}
.zone_manche.searchmode .neutre,
.zone_manche.searchmode .neutre.hide{
    opacity: 0.5;
    transition: 500ms all;
}
.zone_manche.searchmode .neutre:hover{
    opacity: 0.6;
}

.html_hook_after_manche .zone_manche.searchmode .neutre{
    display: none !important;
}

.zone_manche.searchmode .select2search .neutre,
.zone_manche.searchmode .select2search .intervalle{
    opacity: 1;
}
#outilsgamme .zone_manche.searchmode .note .selecteur{
    display: none;
}
#outilsgamme .zone_manche.searchmode .note.select2search .selecteur_search {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -18px;
    border: 2px solid #FFF;
    left: -20px;
    border-radius: 100%;
}




/* MODE CONNECT ACCORD */


.liste_gamme_connect_accord{
    margin-top:40px;    
    max-height:250px;
    overflow: auto;
}

.liste_gamme_connect_accord .gamme_name{
    font-size:1.2em;
    padding:7px 15px;
    background: #222;   
    cursor: pointer;
    display: inline-block;
    border-radius:3px;
    margin-bottom:5px;
}

.liste_gamme_connect_accord .gamme_name::after{
    
}

.liste_gamme_connect_accord .liste_gamme a {
    display: inline-block;
    margin-left:15px;
}
.liste_gamme_connect_accord .liste_gamme a i{
    font-size:25px;
    position: relative;    top:3px;   
}

.connect_accord .position_accord .repere_accord_manche {
    width: 40px;
    height: 40px;
    background: #7d82c8;
    border-radius: 100%;
    left: -20px;
    position: relative;
    top: -18px;
}

.connect_accord .position_accord .note.hide,
.connect_accord .position_accord .intervalle.hide{
    display: block !important;
}
.connect_accord .position_accord .intervalle{
    opacity:1 !important;
}

.connect_accord .zone_manche .position_accord{
    display: block !important;
    z-index: 999 !important;
    opacity: 0.6
}


.liste_gamme_connect_accord .gamme_name.active{
    background:#fff;   
    color:#000
}

.accord2gamme_view_caged {
    font-size: 1.6em;
    text-align: center;
    letter-spacing: 0.2em;
    border: 2px solid #fff;
    padding: 7px;
    max-width: 500px;
    margin: auto;
    cursor: pointer;
}

.accord2gamme_view_caged.active{
    background:#fff;
    color:#000
}

.titreaccord_connect{
    font-size:2.5em;
}

.connect_accord .zone_manche .position{
    opacity:0.6;
}
.connect_accord .zone_manche .position .note .intervalle{
    opacity:0.5;
}

.connect_accord .zone_manche .position.position_accord{
    opacity: 1;
}

 .video-accueil{
     width:970px;
     margin:auto;
     margin-top:20px;
 }
 
 
 /** OFFCANVAS **/
 
.putter_cahier {
    cursor: pointer;
    position: absolute;
    top: 59px;
    right: 115px;
    font-size: 1.2em;
    font-family: roboto slab;
    color: #2d2d2d !important;
}
 
#ClasseurZone{
  width:500px;
  padding-left:80px;
  color:#222227;
  background:url("../img/cahiertitre.png"),url("../img/fondclasseur.png");
  background-size: 500px;
  background-position: right top,left top;
  background-repeat:no-repeat,repeat-y;  
}

.offcanvas-header {
    margin-top: 40px;
    text-align: right;
    height: 172px;
    display: block !important;
}

    .offcanvas-header .btn-close{
        margin-right:10px;
        display: inline-block;
    }
    .offcanvas-header .cahierinfo {
        text-align: left;
        padding-top: 60px;
    }

.form-control#search-input-cahier{
    background-color: #ffffffe3;
}

#ClasseurZoneLabel {
  font-family: roboto Slab;
  font-size: 2em;
} 

#ClasseurZone h2,#ClasseurZone h3,#ClasseurZone h4, #ClasseurZone h5, #ClasseurZone h6{
  font-family: roboto Slab;
}

#ClasseurZone a{
    color:#232323;
}

#ClasseurZone .liste{
    position: relative;
}

#ClasseurZone .liste .liste-link{
    max-width: 280px;
    display: inline-block;    
    font-weight: normal;       
}

    #ClasseurZone .liste .liste-options{
        position:absolute;
        top:5px;
        right:5px;
    }
    
    #ClasseurZone .liste .liste-options .dropdown-toggle{
        cursor: pointer;
    }
    
        #ClasseurZone .liste .liste-options .dropdown-menu li {
            padding: 0px 5px;
            cursor: pointer;
        }
    
        #ClasseurZone .liste .liste-options .liste-option{
            cursor: pointer;
            display: inline-block;
            margin-left: 6px;
            font-size: 15px;
            position: relative;
            top: -2px;  
        }

#ClasseurZone .haveresult .no-result{
    display: none;
}

#ClasseurZone .dropdown-header{
    padding:0px;
    cursor:default;
}

.liste_taug{
    padding-left:0px;
}

    .liste_taug li.taug_item {
        list-style: none !important;
        border-left: 1px solid #d5d5d5;
        padding-left: 10px;
        border-bottom: 1px solid #d5d5d5;
        padding-bottom: 5px;
    }
    .liste_taug li.taug_item:hover {
        background: #cacaca52;
    }
    
    .liste_taug li.taug_item .labelpublic{
        display: none;   
    }
    .liste_taug li.taug_item.is_public .labelpublic{
        display: inline;   
    }

.liste_taug li.taug_item .g7like{
    display:none;   
}
.liste_taug li.taug_item.is_public .g7like{
    display:inline;   
}

.liste-details {
    display: block;
    font-size: 0.8em;
}

.liste-details .gamme_name {
    display: block;
    font-weight: 300;
}
.liste-details .accord {
    display: inline-block;
    padding: 2px;
    margin: 2px;
    border: 1px solid #a6a6a6;
}

[data-option="add_bookmark"]{
    cursor: pointer;
}

[data-option="add_bookmark"] .isbook{
    display: none;
}
[data-option="add_bookmark"].isbook .nobook{
    display:none;
}
[data-option="add_bookmark"].isbook .isbook{
    display: block;
}

 /********* MODE GRATUIT *********/
 
 .putter .fas.fa-lock-alt{
     position: absolute;
     top: 31px;
     color: #23191d;
 }
 
 .putter.putter10 .fas.fa-lock-alt{
     left:-15px;
 }
 
 .putter.putter11 .fas.fa-lock-alt{
     left:-15px;
 }
 
 .putter.putter12 .fas.fa-lock-alt{
     left:-5px;
 }
 
 
 .putter .dropdown-custom .accesverrouille{
     opacity: 0.2 !important;
 }
 
 .putter .dropdown-custom .accesverrouille:hover{
     opacity: 0.4 !important;
 }
 
 .putter .dropdown-custom .fas.fa-lock-alt {
     position: relative;
     color: #fff;
     top: -6px;
     font-size: 8px;
 }
 
 .grille_accords .accord_verouille {
     position: absolute;
     z-index: 50;
     width: 100%;
     height: 100%;
     background: #00000082;
     padding-top: 126px;
 }
 
 
 /****** MODE GRATUIT **********/
 /********* MODE GRATUIT *********/
 
 .putter .fas.fa-lock-alt{
      position: absolute;
      top: 31px;
      color: #23191d;
 }
 
 .putter.putter10 .fas.fa-lock-alt{
      left:-15px;
 }
 
 .putter.putter11 .fas.fa-lock-alt{
      left:-15px;
 }
 
 .putter.putter12 .fas.fa-lock-alt{
      left:-5px;
 }
 
 /* PARTAGE */
 
 .mode_progress_shared #outilsgamme{
     top:0px;
 }
 
 /* BIBLIACCORD EN MODAL */
 #BibliAccordsModal .lienbiblidebutant{
     display: none;
 }
 #BibliAccordsModal .tonalite_select .option {
     background: #444;
     border-radius: 4px;
     margin-bottom: 2px;
     padding: 4px;
     text-align: center;
     cursor: pointer;
 }
 #BibliAccordsModal .tonalite_select .option .notefr{
    display: none;
 }
 #BibliAccordsModal .tonalite_select .option.active {
      background: rgba(39, 250, 253, 0.812);
      color:#000;
  }
  
 #BibliAccordsModal .zone_accordeon {
      height: 529px;
      overflow: auto;
      border-bottom: 4px solid #444;
      border-top: 4px solid #444;
  }
  
  #BibliAccordsModal .zone_accordeon li{
        cursor: pointer;        
        padding: 4px;
        border-radius: 2px;  
  }
  #BibliAccordsModal .zone_accordeon li:hover{
    background: #444; 
  }
  #BibliAccordsModal .zone_accordeon li.active{
    background: transparent;  
  }
 
 
 /* ALERTE  */
 
 .opentuningalerte {
     margin: auto;
     /* display: inline-block; */
     width: 650px;
     background: #2b2b2b;
     padding: 12px;
     font-size: 1.2em;
     color: #736363;
     text-align: center;
     border-radius: 20px;
     opacity: 0.5;
     transition: all 500ms;
 }
 
 .opentuningalerte:hover{
     opacity: 1
 }