body{
;

}


#f1Id{
    position: absolute;
    top: 48.5%;
    left: 4.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;



}

#f2Id{
    position: absolute;
    top: 48.5%;
    left: 9.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

#f3Id{
    position: absolute;
    top:48.5%;
    left: 14.3%;
    width: 2%;
    height: 12%;
    font-family: cursive;
}

#f4Id{
    position: absolute;
    top: 48.5%;
    left: 19.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

#f5Id{
    position: absolute;
    top: 48.5%;
    left: 24.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;
}


#f6Id{
    position: absolute;
    top: 48.5%;
    left: 29.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;
}

#f7Id{
    position: absolute;
    top: 48.5%;
    left: 34.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

#f8Id{
    position: absolute;
    top: 48.5%;
    left: 39.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

#f9Id{
    position: absolute;
    top: 48.5%;
    left: 44.3%;
    width: 2%;
    height: 1px;
    font-family: cursive;

}

#f10Id{
    position: absolute;
    top: 48.5%;
    left: 49.3%;
    width: 2%;
    height:1%;
    font-family: cursive;

}

#f11Id{
    position: absolute;
    top: 48.5%;
    left: 54.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

#f12Id{
    position: absolute;
    top: 48.5%;
    left: 59.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;
}

#f13Id{
    position: absolute;
    top: 48.5%;
    left: 64.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

#f14Id{
    position: absolute;
    top: 48.5%;
    left: 69.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

#f15Id{
    position: absolute;
    top: 48.5%;
    left: 74.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

#f16Id{

    position: absolute;
    top: 48.5%;
    left: 79.3%;
    width: 2%;
    height: 1%;
    font-family: cursive;

}

.slider1{
    position: absolute;
    top: 54%;
    left: 2%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider2{
    position: absolute;
    top: 54%;
    left: 7%;
    width: 2%;
    height: 2%;
    align-items: center;

    rotate:-90deg;
}

.slider3{
    position: absolute;
    top: 54%;
    left: 12%;
    width: 2%;
    height: 2%;
    align-items: center;

    rotate:-90deg;
}

.slider4{
    position: absolute;
    top: 54%;
    left: 17%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider5{
    position: absolute;
    top: 54%;
    left: 22%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider6{
    position: absolute;
    top: 54%;
    left: 27%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}
.slider7{
    position: absolute;
    top: 54%;
    left: 32%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}
.slider8{
    position: absolute;
    top: 54%;
    left: 37%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider9{
    position: absolute;
    top: 54%;
    left: 42%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider10{
    position: absolute;
    top: 54%;
    left: 47%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider11{
    position: absolute;
    top: 54%;
    left: 52%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider12{
    position: absolute;
    top: 54%;
    left: 57%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider13{
    position: absolute;
    top: 54%;
    left: 62%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider14{
    position: absolute;
    top: 54%;
    left: 67%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider15{
    position: absolute;
    top: 54%;
    left: 72%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;
}

.slider16{
    position: absolute;
    top: 54%;
    left: 77%;
    width: 2%;
    height: 2%;
    align-items: center;
    rotate:-90deg;

}


#myCanvas{
    position: absolute;
    top: 5%;
    left:-2%;

    border-style: solid;
    width: 35.5%;
    height: 35%;
    scale:0.8;

}

#Slozky{

    position: absolute;
    top: 5%;
    left:30%;

    border-style: solid;
    width: 35.5%;
    height: 35%;
    scale:0.8;
}




#ADSR{

    position: absolute;
    top:1%;
    left:71.5%;
    border-style: solid;
    scale: 0.7;
}

#atack{

    position: absolute;
    width: 150px;
    top:65.4%;
    left:27.15%;
    height:6%;


}

#Atack1{

    position: absolute;
    top: 65.4%;
    left:30.15%;

    scale: 0.8;

}

#AIn{

    position: absolute;
    width:3%;
    top:65.4%;
    left:37.15%;
    height:1.5%;

}

#DIn{

    position: absolute;
    width:3%;
    top:68%;
    left:37.15%;
    height:1.5%;

}


#SIn{

    position: absolute;
    width:3%;
    top:71%;
    left:37.15%;
    height:1.5%;

}

#RIn{

    position: absolute;
    width:3%;
    top:74%;
    left:37.15%;
    height:1.5%;

}



#DecayID{

    position: absolute;

    width: 150px;

    top:68.28%;
    left:27.15%;
    height:6%;


}

#Decay1{

    position: absolute;
    left:30.15%;
    top:68.28%;
    scale: 0.8;


}


#SustainID{

    position: absolute;


    width: 150px;
    height:6%;
    top:71.5%;
    left:27.15%;



}

#Sustain1{

    position: absolute;
    left:30.15%;
    top:71.5%;
    scale: 0.8;


}



#ReleaseID{

    position: absolute;
    top:74.5%;
    left:27.15%;
    height:6%;



}

#Release1{

    position: absolute;
    left:30.15%;
    top:74.5%;
    height: 10px;
    scale: 0.8;


}



#vypisKmitoctu {


    position: absolute;
    width: 7.8%;
    height: 38%;
    font-family:cursive;
    font-size: 0.7vw;
    left:65%;
    top: 4%;

    text-align: center;
}



.sliderOut{

    position: absolute;
    top: 90.8%;
    left: 32.15%;
    align-items: center;


}

#tlac1{

    top: 82.5%;
    left: 30.6%;
    position:absolute;
    height: 4%;
    width: 10%;
    background-color: green;
    font-size: 0.6vw;
}




#OutId{

    position: absolute;
    top: 91.2%;
    left: 27.15%;
    width: 10%;
    height: 2%;

    font-size: 0.6vw;

}


#rangeValueOut{

    font-size: 0.6vw;

}

#nota{

    top:1%;
    left: 6.5%;
    position: absolute;
    height:3%;
    width:3%;


}

#noty{

    top:1.5%;
    left: 1%;
    position: absolute;
    height:3%;
    width:8%;


}

#Presety{

    top:1%;
    left: 14.8%;
    position: absolute;
    height:3%;
    width:4.5%;


}

#presets{
    top:1.5%;
    left: 9.9%;
    position: absolute;
    height:3%;
    width:8%;
}




#f0In{

    position: absolute;
    top:58%;
    width:3%;
    left:1.9%;
}

#f1In{

    position: absolute;
    top:58%;
    width:3%;
    left:6.9%;
}

#f2In{

    position: absolute;
    top:58%;
    width:3%;
    left:11.9%;
}

#f3In{

    position: absolute;
    top:58%;
    width:3%;
    left:16.9%;
}

#f4In{

    position: absolute;
    top:58%;
    width:3%;
    left:21.9%;
}

#f5In{

    position: absolute;
    top:58%;
    width:3%;
    left:26.9%;
}

#f6In{

    position: absolute;
    top:58%;
    width:3%;
    left:31.9%;
}

#f7In{

    position: absolute;
    top:58%;
    width:3%;
    left:36.9%;
}

#f8In{

    position: absolute;
    top:58%;
    width:3%;
    left:41.9%;
}

#f9In{

    position: absolute;
    top:58%;
    width:3%;
    left:46.9%;
}

#f10In{

    position: absolute;
    top:58%;
    width:3%;
    left:51.9%;
}

#f11In{

    position: absolute;
    top:58%;
    width:3%;
    left:56.9%;
}
#f12In{

    position: absolute;
    top:58%;
    width:3%;
    left:61.9%;
}

#f13In{

    position: absolute;
    top:58%;
    width:3%;
    left:66.9%;
}

#f14In{

    position: absolute;
    top:58%;
    width:3%;
    left:71.9%;
}

#f15In{

    position: absolute;
    top:58%;
    width:3%;
    left:76.9%;
}

#container{

    position: absolute;
    top:620px;
    left:1%;

}