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

.zone_idee{
    max-width:1000px;
    margin:auto;
    text-align: center;
}

.zone_idee .idee {
    background: rgba(23, 23, 23, 0.84);
    padding: 8px;
    min-height:230px;
}

.zone_idee .nom_gamme {
    font-size: 2.5em;
    padding: 20px 20px 20px;
}

.zone_idee .degre {
    font-family: 'Roboto Slab', serif;
    font-size: 3em;
}

.zone_idee .accord {
    padding: 20px 10px;
    border: 1px solid #fff;
    /* display: inline-block; */
    font-size: 1.8em;
    margin: 20px 0px 10px;
    text-overflow: ellipsis;
    resize: horizontal;
    width:100%;
    
}

.zone_idee .int_player_accord {
    font-size: 30px;
}

.zone_idee .inter img {
    width: 60px;
}

.zone_idee .idee_btn .btn{
    margin:4px
}

.changementdemode {
    padding-top: 25px;
}

.changementdemode .btn {
    font-size: 1em;
}

/* Intervalles */

.itr{
    background-image:url(../imgs-intervalles/R.png)
}
.itunisson{
    background-image:url(../imgs-intervalles/R.png)
}
.itb2{
    background-image:url(../imgs-intervalles/b2.png)
}
.itm2{
    background-image:url(../imgs-intervalles/M2.png)
}
.itbb3{
    background-image:url(../imgs-intervalles/bb3R.png)
}
.itb3{
    background-image:url(../imgs-intervalles/b3.png)
}
.itseconde-augmentee-2{
    background-image:url(../imgs-intervalles/2R.png)
}
.itm3{
    background-image:url(../imgs-intervalles/M3.png)
}
.itquarte-diminuee-b4{
    background-image:url(../imgs-intervalles/b4R.png)
}
.itp4{
    background-image:url(../imgs-intervalles/P4.png)
}
.itb5{
    background-image:url(../imgs-intervalles/b5.png)
}
.itd4{
    background-image:url(../imgs-intervalles/4.png)
}
.itp5{
    background-image:url(../imgs-intervalles/P5.png)
}
.itb6{
    background-image:url(../imgs-intervalles/b6.png)
}
.itd5{
    background-image:url(../imgs-intervalles/5.png)
}
.itm6{
    background-image:url(../imgs-intervalles/M6R.png)
}
.itm6-2{
    background-image:url(../imgs-intervalles/bb7R.png)
}
.itsixte-augmentee-6{
    background-image:url(../imgs-intervalles/6R.png)
}
.itbi7{
    background-image:url(../imgs-intervalles/b7.png)
}
.itm7{
    background-image:url(../imgs-intervalles/M7.png)
}
.itp8{
    background-image:url(../imgs-intervalles/P8.png)
}
.itb9{
    background-image:url(../imgs-intervalles/b9.png)
}
.itm9{
    background-image:url(../imgs-intervalles/M9.png)
}
.itneuvieme-augmentee-9{
    background-image:url(../imgs-intervalles/9.png)
}
.itb10{
    background-image:url(../imgs-intervalles/b10.png)
}
.itm10{
    background-image:url(../imgs-intervalles/M10.png)
}
.itp11{
    background-image:url(../imgs-intervalles/P11.png)
}
.itd11{
    background-image:url(../imgs-intervalles/11.png)
}
.itb12{
    background-image:url(../imgs-intervalles/b12.png)
}
.itp12{
    background-image:url(../imgs-intervalles/P12.png)
}
.it12{
    background-image:url(../imgs-intervalles/12.png)
}
.itb13{
    background-image:url(../imgs-intervalles/b13.png)
}
.itm13{
    background-image:url(../imgs-intervalles/M13.png)
}
.itb14{
    background-image:url(../imgs-intervalles/b14.png)
}
.itm14{
    background-image:url(../imgs-intervalles/M14.png)
}
.nnet{
    background-image:url(../imgs-intervalles/NOIR-VIDE.png)
}
.nhg{
    background-image:url(../imgs-intervalles/notehorsgamme.png)
}

/* MANCHES */

.illustration_manche.mode_manche.zone_manche_droitier{
    background-image:url('../imgs/ref_manchesombredroit.png');   
}
.illustration_manche.mode_manche.zone_manche_gaucher{
    background-image:url('../imgs/ref_manchesombregauce.png');   
}
.illustration_manche.mode_manche_claire.zone_manche_droitier{
    background-image:url('../imgs/ref_mancheclaird.png');   
}
.illustration_manche.mode_manche_claire_3.zone_manche_droitier{
    background-image:url('../imgs/ref_mancheclaird_v3.png');   
}
.illustration_manche.mode_manche_claire.zone_manche_gaucher{
    background-image:url('../imgs/ref_mancheclairgauche.png');   
}
.illustration_manche.mode_manche_claire_3.zone_manche_gaucher{
    background-image:url('../imgs/ref_mancheclairgauche_v3.png');   
}
.illustration_manche.mode_grille.zone_manche_droitier{
    background-image:url('../imgs/GRILLE-d.png');   
}
.illustration_manche.mode_grille.zone_manche_gaucher{
    background-image:url('../imgs/GRILLE-g.png');   
}

.preampli{
    background-image:url('../imgs/TA-amp-v2.png');   
}
.preampli .diode{
    background-image:url('../imgs/diode12.png');   
}

.save_meno_diode{
    background-image:url('../imgs/diodememosave.gif');   
    width: 48px;
    height: 31px;
    background-size: contain;
    display: none;
    cursor: pointer;
}

#outilsgamme.tb-modememo .save_meno_diode{
    display: inline-block;
}

.manchecache{
    width: 95%;
    max-width: 1400px;
    margin: auto;
    overflow: hidden;
}
    .manchecache svg.manche_svg{
        width:116%;   
    }
    .manchecache.manche_entier svg.manche_svg{
        width:100%;   
    }

/* MANCHE SVG */
.manche_svg .img_manche,
.manche_svg .gamme{display:none;}
.manche_svg .gamme.active{display:inherit;}

.manche_svg.manche_svg_claire .img_manche.img_manche_claire{display:inherit}
.manche_svg.manche_svg_sombre .img_manche.img_manche_sombre{display:inherit}

.manche_svg.manche_svg_claire .nt{transform:translateX(150px)}

.manche_svg.manche_svg_claire .corde1{transform:translateY(18px)}
.manche_svg.manche_svg_claire .corde2{transform:translateY(49px)}
.manche_svg.manche_svg_claire .corde3{transform:translateY(85px)}
.manche_svg.manche_svg_claire .corde4{transform:translateY(118px)}
.manche_svg.manche_svg_claire .corde5{transform:translateY(151px)}
.manche_svg.manche_svg_claire .corde6{transform:translateY(185px)}

.manche_svg.manche_svg_claire .nt.f1{transform: translateX(4px);}
.manche_svg.manche_svg_claire .nt.f2{transform: translateX(102px);}
.manche_svg.manche_svg_claire .nt.f3{transform: translateX(229px);}
.manche_svg.manche_svg_claire .nt.f4{transform: translateX(345px);}
.manche_svg.manche_svg_claire .nt.f5{transform: translateX(448px);}
.manche_svg.manche_svg_claire .nt.f6{transform: translateX(545px);}
.manche_svg.manche_svg_claire .nt.f7{transform: translateX(634px);}
.manche_svg.manche_svg_claire .nt.f8{transform: translateX(714px);}
.manche_svg.manche_svg_claire .nt.f9{transform: translateX(787px);}
.manche_svg.manche_svg_claire .nt.f10{transform: translateX(853px);}
.manche_svg.manche_svg_claire .nt.f11{transform: translateX(918px);}
.manche_svg.manche_svg_claire .nt.f12{transform: translateX(976px);}
.manche_svg.manche_svg_claire .nt.f13{transform: translateX(1031px);}
.manche_svg.manche_svg_claire .nt.f14{transform: translateX(1082px);}
.manche_svg.manche_svg_claire .nt.f15{transform: translateX(1128px);}
.manche_svg.manche_svg_claire .nt.f16{transform: translateX(1172px);}
.manche_svg.manche_svg_claire .nt.f17{transform: translateX(1212px);}
.manche_svg.manche_svg_claire .nt.f18{transform: translateX(1249px);}
.manche_svg.manche_svg_claire .nt.f19{transform: translateX(1284px);}
.manche_svg.manche_svg_claire .nt.f20{transform: translateX(1315px);}
.manche_svg.manche_svg_claire .nt.f21{transform: translateX(1348px);}
.manche_svg.manche_svg_claire .nt.f22{transform: translateX(1379px);}


.manche_svg .nt.st-int .sq,
.manche_svg .nt.st-int .font{
    display: none
}

/* la root */
.manche_svg .nt.st-int.itR .sq{
    display: inherit;
}
.manche_svg .nt.st-int.itR .rd{
    display: none
}

.manche_svg .int{fill:#FFF;}

.manche_svg .font{font-family:roboto;font-size:16px;fill:#FFF;font-weight: Bold;transform: translate(15px,20px);}
.manche_svg .white{fill:#FFF;}
.manche_svg .black{fill:#000;}
.manche_svg .greylight{fill:#F4F3F4;}
.manche_svg .fillsecondes{fill:#E8C402;}
.manche_svg .filltierces{fill:#FE0303;}
.manche_svg .fillquartes{fill:#27FAFD;}
.manche_svg .fillquinte{fill:#49FD02;}
.manche_svg .fillsixte{fill:#8E22EE;}
.manche_svg .fillseptieme{fill:#278AFD;}


/* Metronome options */

.large_metronome{
    text-align: center;
    cursor: pointer;
    font-size:1em;
}

.large_metronome .etat_on{
    display: none;
}
.large_metronome.active .etat_on{
    display: inline-block;
}
.large_metronome.active .etat_off{
    display: none;
}
#ks-metronome.largeview svg{
    max-height: none !important
}