.container {
    display: grid;
    grid-template-columns: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr;
    grid-template-rows: 0.1fr 0.03fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr;
    grid-gap: 0.5em;
}

.container > div {
    background-color: #0f61;
    border: 1px solid black;
    padding: 5px;
}


#noty{

    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:8;
    grid-column-end:10;



}

#nota{

    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:10;
    grid-column-end:12;

    height: 60%;
    width: 40%;

}

#presets{

    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:8;
    grid-column-end:10;

}


#Presety{

    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:10;
    grid-column-end:12;

    height: 60%;
    width: 80%;



}

#myCanvas{

    grid-row-start:1;
    grid-row-end: 5;
    grid-column-start:1;
    grid-column-end:4;


}

#Slozky{

    grid-row-start:1;
    grid-row-end: 5;
    grid-column-start:4;
    grid-column-end:12;


}


#adsrko{

    grid-row-start:1;
    grid-row-end: 6;
    grid-column-start:12;
    grid-column-end:15;


}

#vypisKmitoctu{

    grid-row-start:13;
    grid-row-end: 20;
    grid-column-start:1;
    grid-column-end:10;


}

#Navod{

    grid-row-start:13;
    grid-row-end: 20;
    grid-column-start:3;
    grid-column-end:15;

}


.sliderOut{

    grid-row-start:9;
    grid-row-end: 10;
    grid-column-start:10;
    grid-column-end:12;
    height: 55%;

}

#outIn{

    grid-row-start:10;
    grid-row-end: 11;
    grid-column-start:10;
    grid-column-end:13;
    height: 72%;
    width: 72%;


}

#OutId{
    grid-row-start:9;
    grid-row-end: 12;
    grid-column-start:8;
    grid-column-end:10;


}

.slider1{

    grid-row-start:5;
    grid-row-end: 7;
    grid-column-start:2;
    grid-column-end:3;
    height: 30%;

}

#f0In{

    grid-row-start:5;
    grid-row-end: 7;
    grid-column-start:3;
    grid-column-end:4;

    height: 30%;
    width: 25%;



}

#f1Id{

    grid-row-start:5;
    grid-row-end: 6;
    grid-column-start:1;
    grid-column-end:2;





}

.slider2{

    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:2;
    grid-column-end:3;

    height: 60%;

}

#f2Id{

    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:1;
    grid-column-end:2;

}


#f1In{

    grid-row-start:6;
    grid-row-end: 8;
    grid-column-start:3;
    grid-column-end:4;

    height: 30%;
    width: 25%;


}



.slider3{

    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:2;
    grid-column-end:3;
    height: 60%;


}

#f3Id{

    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:1;
    grid-column-end:2;


}

#f2In{

    grid-row-start:7;
    grid-row-end: 9;
    grid-column-start:3;
    grid-column-end:4;


    height: 30%;
    width: 25%;

}



.slider4{

    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:2;
    grid-column-end:3;

    height: 60%;
}


#f3In{

    grid-row-start:8;
    grid-row-end: 10;
    grid-column-start:3;
    grid-column-end:4;
    height: 30%;
    width: 25%;


}

#f4Id{
    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:1;
    grid-column-end:2;}



.slider5{

    grid-row-start:9;
    grid-row-end: 10;
    grid-column-start:2;
    grid-column-end:3;

    height: 60%;


}

#f4In{

    grid-row-start:9;
    grid-row-end: 11;
    grid-column-start:3;
    grid-column-end:4;
    height: 30%;
    width: 25%;

}

#f5Id{

    grid-row-start:9;
    grid-row-end: 10;
    grid-column-start:1;
    grid-column-end:2;

}


.slider6{

    grid-row-start:10;
    grid-row-end: 11;
    grid-column-start:2;
    grid-column-end:3;

    height: 60%;
}

#f6Id{

    grid-row-start:10;
    grid-row-end: 11;
    grid-column-start:1;
    grid-column-end:2;


}


#f5In{

    grid-row-start:10;
    grid-row-end: 12;
    grid-column-start:3;
    grid-column-end:4;

    height: 30%;
    width: 25%;
}

.slider7{

    grid-row-start:11;
    grid-row-end: 12;
    grid-column-start:2;
    grid-column-end:3;

    height: 60%;
}

#f7Id{

    grid-row-start:11;
    grid-row-end: 12;
    grid-column-start:1;
    grid-column-end:2;


}

#f6In{

    grid-row-start:11;
    grid-row-end: 13;
    grid-column-start:3;
    grid-column-end:4;
    height: 30%;
    width: 25%;

}

.slider8{

    grid-row-start:12;
    grid-row-end: 13;
    grid-column-start:2;
    grid-column-end:3;
    height: 60%;

}

#f8Id{

    grid-row-start:12;
    grid-row-end: 13;
    grid-column-start:1;
    grid-column-end:2;

}

#f7In{

    grid-row-start:12;
    grid-row-end: 14;
    grid-column-start:3;
    grid-column-end:4;
    height: 30%;
    width: 25%;
}


.slider9{

    grid-row-start:5;
    grid-row-end: 6;
    grid-column-start:6;
    grid-column-end:7;

    height: 60%;

}

#f9Id{

    grid-row-start:5;
    grid-row-end: 6;
    grid-column-start:4;
    grid-column-end:6;
}

#f8In{

    grid-row-start:5;
    grid-row-end: 7;
    grid-column-start:7;
    grid-column-end:10;
    height: 30%;
    width: 25%;

}



.slider10{

    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:6;
    grid-column-end:7;

    height: 60%;
}

#f10Id{
    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:4;
    grid-column-end:6;




}

#f9In{

    grid-row-start:6;
    grid-row-end: 8;
    grid-column-start:7;
    grid-column-end:10;
    height: 30%;
    width: 25%;

}

.slider11{

    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:6;
    grid-column-end:7;

    height: 60%;
}

#f11Id{
    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:4;
    grid-column-end:6;

}

#f12Id{
    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:4;
    grid-column-end:6;

}

#f13Id{
    grid-row-start:9;
    grid-row-end: 10;
    grid-column-start:4;
    grid-column-end:6;

}


#f14Id{
    grid-row-start:10;
    grid-row-end: 11;
    grid-column-start:4;
    grid-column-end:6;

}

#f15Id{
    grid-row-start:11;
    grid-row-end: 12;
    grid-column-start:4;
    grid-column-end:6;

}

#f16Id{
    grid-row-start:12;
    grid-row-end: 13;
    grid-column-start:4;
    grid-column-end:6;

}


#f10In{

    grid-row-start:7;
    grid-row-end: 9;
    grid-column-start:7;
    grid-column-end:10;
    height: 30%;
    width: 25%;

}



.slider12{



    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:6;
    grid-column-end:7;

    height: 60%;

}


#f11In{

    grid-row-start:8;
    grid-row-end: 10;
    grid-column-start:7;
    grid-column-end:10;
    height: 30%;
    width: 25%;

}

.slider13{

    grid-row-start:9;
    grid-row-end: 10;
    grid-column-start:6;
    grid-column-end:7;

    height: 60%;

}


#f12In{

    grid-row-start:9;
    grid-row-end: 11;
    grid-column-start:7;
    grid-column-end:10;
    height: 30%;
    width: 25%;

}

.slider14{

    grid-row-start:10;
    grid-row-end: 11;
    grid-column-start:6;
    grid-column-end:7;

    height: 60%;



}


#f13In{

    grid-row-start:10;
    grid-row-end: 12;
    grid-column-start:7;
    grid-column-end:10;
    height: 30%;
    width: 25%;
}

.slider15{

    grid-row-start:11;
    grid-row-end: 12;
    grid-column-start:6;
    grid-column-end:7;

    height: 60%;

}


#f14In{

    grid-row-start:11;
    grid-row-end: 13;
    grid-column-start:7;
    grid-column-end:10;
    height: 30%;
    width: 25%;

}

.slider16{

    grid-row-start:12;
    grid-row-end: 13;
    grid-column-start:6;
    grid-column-end:7;

    height: 60%;

}

#f15In{

    grid-row-start:12;
    grid-row-end: 14;
    grid-column-start:7;
    grid-column-end:10;
    height: 30%;
    width: 25%;
}


#atack{

    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:9;
    grid-column-end:10;



}

.Attack{

    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:10;
    grid-column-end:11;
    height: 60%;
}

#AIn{

    grid-row-start:6;
    grid-row-end: 7;
    grid-column-start:11;
    grid-column-end:13;

    height: 40%;
    width: 20%;

}

.Decay {

    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:10;
    grid-column-end:11;

    height: 60%;
}

#DIn{

    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:11;
    grid-column-end:13;

    height: 40%;
    width: 20%;


}

#DecayID{

    grid-row-start:7;
    grid-row-end: 8;
    grid-column-start:9;
    grid-column-end:10;




}


.Sustain {

    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:10;
    grid-column-end:11;
    height: 60%;

}

#SIn{

    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:11;
    grid-column-end:13;

    height: 40%;
    width: 20%;

}

#SustainID{

    grid-row-start:8;
    grid-row-end: 9;
    grid-column-start:9;
    grid-column-end:10;



}

#zkresleni{   grid-row-start:11;
    grid-row-end: 16;
    grid-column-start:8;
    grid-column-end:15;
}




.Release {

    grid-row-start:9;
    grid-row-end: 10;
    grid-column-start:10;
    grid-column-end:11;
    height: 60%;

}

#ReleaseID{

    grid-row-start:9;
    grid-row-end: 10;
    grid-column-start:9;
    grid-column-end:10;



}

#RIn{

    grid-row-start:9;
    grid-row-end: 10;
    grid-column-start:11;
    grid-column-end:13;

    height: 40%;
    width: 20%;


}



#tlac1{
    grid-row-start:6;
    grid-row-end: 6;
    grid-column-start:8;
    grid-column-end:11;

    background-color: green;


}

