#tools_tuner{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}
#diatonic-tuner-block{background:url(/img/metronome/manche.png) center 0 no-repeat;height:445px;width:100%}
#diatonic-tuner-block table{-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);left:50%;position:absolute;text-align:center;transform:translateX(-50%)}
#diatonic-tuner-block table tr th{color:transparent}
#diatonic-tuner-block #string-img-container{display:table;margin:auto}
#diatonic-tuner-block #string-container{clear:both;display:block;float:none;margin:0 auto;position:relative;top:-350px;width:190px}
#string-container td{background-color:transparent}
#diatonic-tuner-block .string button{background:url(/img/metronome/hexagone_gris.png) no-repeat rgba(0,0,0,0);border:none;color:#1f1f1e;font-size:1.5em;height:58px;line-height:58px;padding:0;position:absolute;text-align:center;width:51px;cursor:pointer;outline:0}
#diatonic-tuner-block .string.active>button{background-image:url(/img/metronome/hexagone_jaune.png)}
#diatonic-tuner-block .string button:before{content:"";display:block;height:69px;width:49px}
#string-img-container th,.tuner_button{display:inline-block}
#diatonic-tuner-block .string-1 button:before,#diatonic-tuner-block .string-2 button:before,#diatonic-tuner-block .string-3 button:before{background:url(/img/metronome/cle_droite_gris.png) no-repeat;position:absolute;left:-51px;top:13px}
#diatonic-tuner-block .string-4 button:before,#diatonic-tuner-block .string-5 button:before,#diatonic-tuner-block .string-6 button:before{background:url(/img/metronome/cle_gauche_gris.png) no-repeat;position:absolute;right:-51px;top:13px}
#diatonic-tuner-block .string-1 button{right:-62px;top:170px}#diatonic-tuner-block .string-2 button{right:-65px;top:105px}
#diatonic-tuner-block .string-3 button{right:-70px;top:40px}
#diatonic-tuner-block .string-4 button{left:-70px;top:40px}
#diatonic-tuner-block .string-5 button{left:-65px;top:105px}
#diatonic-tuner-block .string-6 button{left:-62px;top:170px}


#diatonic-tuner-block .string-1-img{background:url(/img/metronome/1er_corde_droite_gris.png) no-repeat rgba(133, 90, 90, 0);height:215px;left:-44px;position:relative;top:134px;width:9px}
#diatonic-tuner-block .string-1-img.active{background-image:url(/img/metronome/1er_corde_droite_jaune.png)}
#diatonic-tuner-block .string-2-img{background:url(/img/metronome/2eme_corde_droite_gris.png) no-repeat;height:277px;left:-37px;position:relative;top:102px;width:20px}
#diatonic-tuner-block .string-2-img.active{background-image:url(/img/metronome/2eme_corde_droite_jaune.png)}
#diatonic-tuner-block .string-3-img{background:url(/img/metronome/3eme_corde_droite_gris.png) no-repeat;height:340px;left:-13px;position:relative;top:71px;width:40px}
#diatonic-tuner-block .string-3-img.active{background-image:url(/img/metronome/3eme_corde_droite_jaune.png)}
#diatonic-tuner-block .string-6-img{background:url(/img/metronome/1er_corde_gauche_gris.png) no-repeat;height:214px;left:45px;position:relative;top:134px;width:40px}
#diatonic-tuner-block .string-6-img.active{background-image:url(/img/metronome/1er_corde_gauche_jaune.png)}
#diatonic-tuner-block .string-5-img{background:url(/img/metronome/2eme_corde_gauche_gris.png) no-repeat;height:277px;left:5px;position:relative;top:102px;width:21px}
#diatonic-tuner-block .string-5-img.active{background-image:url(/img/metronome/2eme_corde_gauche_jaune.png)}
#diatonic-tuner-block .string-4-img{background:url(/img/metronome/3eme_corde_gauche_gris.png) no-repeat;height:340px;left:-20px;position:relative;top:72px;width:40px}
#diatonic-tuner-block .string-4-img.active{background-image:url(/img/metronome/3eme_corde_gauche_jaune.png)}.tuner_container{width:100%;white-space:nowrap}.tuner_button{border-radius:2px;background-color:#EEE;color:#000;cursor:pointer;font-size:1.4vw;line-height:2.5vw;height:2.5vw;margin-left:10%;width:35%;text-align:center}.tuner_button.active{background-color:#F29400}.tuner_button:active{background-color:#BBB}.tuner_button.active[disabled]{background-color:#F29400}
#diatonic-tuner-block .dropdown{left:calc(50% - 70px);display:inline-block;position:relative;overflow:hidden;height:28px;width:140px;background:#f2f2f2;border:1px solid;border-color:#fff #f7f7f7 #f5f5f5;border-radius:3px;background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,.06));background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,.06));background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,.06));background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.06));-webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);box-shadow:0 1px 1px rgba(0,0,0,.08)}
#diatonic-tuner-block .dropdown:after,#diatonic-tuner-block .dropdown:before{content:'';position:absolute;z-index:2;top:9px;right:10px;width:0;height:0;border:4px dashed;border-color:#888 transparent;}
#diatonic-tuner-block .dropdown:before{border-bottom-style:solid;border-top:none}
#diatonic-tuner-block .dropdown:after{margin-top:7px;border-top-style:solid;border-bottom:none}
#diatonic-tuner-block .dropdown-select{position:relative;width:130%;margin:0;padding:6px 8px 6px 10px;height:28px;line-height:14px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
#diatonic-tuner-block .dropdown-select:focus{z-index:3;width:100%;color:#394349;outline:#49aff2 solid 2px;outline:-webkit-focus-ring-color solid 2px;outline-offset:-2px}#diatonic-tuner-block .dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f2f2f2;border-radius:3px;cursor:pointer}
#tuner_chromatic{padding-top:20px}.tuner_error{text-align: center;font-size: 12px;width: 100%;float: left;font-weight: bold;height: 150px;margin-top: 50px;color: #ff2e29;text-transform: uppercase;}


#tuner-block{
  position:relative;
  height:506px;
  padding:17px;
}
#error-tuner {
  text-align:center;
  color:red;
  font-size:16px;
}

#select-tuning {
  height:34px;
}
@media(max-width:991px) {
    .tuner_button {
        padding: 2% 0 2%;
        font-size: 3vw;
    }
}

  .notes {
    margin: auto;
    width: 400px;
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    text-align: center;
  }
  
  .note {
    font-size: 90px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding-right: 30px;
    padding-left: 10px;
  }
  
  .note.active {
    color: var(--orange);
  }
  
  .notes-list {
    overflow: auto;
    overflow: -moz-scrollbars-none;
    white-space: nowrap;
    -ms-overflow-style: none;
    -webkit-mask-image: -webkit-linear-gradient(
      left,
      rgba(255, 255, 255, 0),
      #fff,
      rgba(255, 255, 255, 0)
    );
  }
  
  .notes-list::-webkit-scrollbar {
    display: none;
  }
  
  .note {
    -webkit-tap-highlight-color: transparent;
  }
  
  .note span {
    position: absolute;
    right: 0.25em;
    font-size: 40%;
    font-weight: normal;
  }
  
  .note-sharp {
    top: 0.3em;
  }
  
  .note-octave {
    bottom: 0.3em;
  }
  
  .frequency {
    font-size: 32px;
    color:var(--orange);
  }
  
  .frequency span {
    font-size: 50%;
    margin-left: 0.25em;
  }
  
  .meter {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    width: 400px;
    height: 33%;
    margin: 0 auto 5vh auto;
    top:100px;
  }
  
  .meter-pointer {
    width: 2px;
    height: 100%;
    background: #2c3e50;
    transform: rotate(45deg);
    transform-origin: bottom;
    transition: transform 0.5s;
    position: absolute;
    right: 50%;
  }
  
  .meter-dot {
    width: 10px;
    height: 10px;
    background: #2c3e50;
    border-radius: 50%;
    position: absolute;
    bottom: -5px;
    right: 50%;
    margin-right: -4px;
  }
  
  .meter-scale {
    width: 1px;
    height: 100%;
    transform-origin: bottom;
    transition: transform 0.2s;
    box-sizing: border-box;
    border-top: 10px solid;
    position: absolute;
    right: 50%;
  }
  
  .meter-scale-strong {
    width: 2px;
    border-top-width: 20px;
  }
  
  .frequency-bars {
    position: absolute;
    width:100%;
  }
  
  @media (max-width: 768px) {
    .meter {
      width: 100%;
    }
  
    .notes {
      width: 100%;
    }
  }
  
  .swal-button {
    background: #2c3e50;
  }
  
  .a4 {
    position: absolute;
    top: 16px;
    left: 16px;
  }
  
  .a4 span {
    color: #e74c3c;
  }