#corps {
    width: 100%;
}
.bord {
    border:solid 1px rgba(100,200,200,0.8) ;
    background-color: rgba(100,200,200,0.4);
    padding-top: 10px;
    display: inline-block;
    margin: 4px;
    position:relative;
}

.r {
    border-color: rgba(200,100,100,0.8) ;
    background-color: rgba(200,100,100,0.4);    
}
.v {
    border-color: rgba(10,200,10,0.8) ;
    background-color: rgba(10,200,10,0.2);
    color :  rgba(10,200,10,0.8) ;
    font-size: 10px;
}

.bl {
    border-color: rgba(10,10,200,0.8) ;
    background-color: rgba(10,10,200,0.2);
    color :  rgba(10,10,200,0.8) ;
    font-size: 10px;
} 

input {
    background-color: none;
}

.sliders {
  position: relative;

  width: 20px;
}

/* placement manuel ultra compact */
.slider:nth-child(1) { left: -40px; }
.slider:nth-child(2) { left: -25px; }
.slider:nth-child(3) { left: -10px; }
.slider:nth-child(4) { left: 5px; }
.slider:nth-child(5) { left: 20px; }
.slider:nth-child(6) { left: 35px; }
.slider:nth-child(7) { left: 50px; }
.slider:nth-child(8) { left: 65px; }
.slider:nth-child(9) { left: 80px; }
.slider {
    position: absolute;
    top: 40px;
    transform: rotate(-90deg);
    width: 100px; 
}

#env_S, #volume, #vibrato, #f_vibrato, #bruit {
    transform: rotate(-90deg);
    position:absolute;
    top:56px;
    left:380px;
}

#volume, #bruit {
    left:-40px;
}

#vibrato{
    left:-42px;
}
#f_vibrato{
    left:-8px;
}

.fich {
    width: 280px;
    padding: 2px;
    margin: 2px;
    font-family: arial;
    font-size: 9px;
    color:#888;
    background-color: #DDE;
}

   

#message {
    font-family: verdana;
    background-color: rgba(255,0,0,0.2);
    color:#D00;
    border: solid 1px #D00;
    opacity:0;
    padding:2px;
}

html, body {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;                
  }

#clavier {
    touch-action: none;
  }

.active {
    background-color: #4C4;
    color: white;
}
#bloc_note {
    display: flex;
    height:140px;
}

#conteneur_mid{
    display: flex;
}

#bloc_theremine {
    background-color: #A84;
    width: 100%;
    height: 200px;
    padding: 20px;
}
#nom_note, #bloc_theremine {
    font-family: arial;
    font-size: 16px;                
}
    

.bouton > img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  pointer-events: none;
}

select {
  display: block;
}

option {
  display: block;
}

#courbe {
    background-color:rgba(28,28,28,0.4);
}

#nom_fichier_mid {
    font-family:verdana;
    font-size: 20px;
    border:solid 1px;
    margin:10px;
}

#harmoniques {
    transition-duration: 0.5s;
}

.nom_instrument_melodie {
    color:#840;
}