body{font-family:'Open Sans', sans-serif;font-size:30px;padding:0;margin:0;background-color:#202124;overflow:hidden}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}.container{width:100vw;height:100vh;transition:all ease-in-out 0.2s;overflow:hidden;backface-visibility:hidden;transform:translateZ(0);padding:0;margin:0;position:relative}.header{display:flex;flex-direction:row;justify-content:space-between;padding:20px;font-size:20px;background-color:#202124;border-bottom:1px solid white;color:#9e9e9e;box-sizing:border-box;border-bottom:1px solid white;user-select:none}.header ul{display:flex;flex-direction:row;list-style-type:none;padding:0;margin:0}.header ul li{vertical-align:center;display:flex;flex-direction:row;align-items:center;cursor:pointer}.header ul li:not(:first-child){margin-left:10px}.header .left .logo{color:#fff}.header .left .logo img{width:35px;margin-right:5px}.header .left .logo a{text-decoration:none;color:white;position:relative}.header .center{font-size:30px;display:flex;align-items:center;transition:opacity ease-in-out 0.2s;opacity:1}.header .center.hide{opacity:0}.header .center.close{display:none}.header .center .play .icon{color:#fff;opacity:1;transition:opacity ease-in-out 0.2s}.header .center .play .icon.hide{opacity:0}.header .center .play .icon:nth-child(2){margin-left:-1em}.header .center .bpm{position:relative}.header .center .bpm #bpm{background-color:transparent;border:none;outline:none;font-size:20px;width:40px;height:1em;text-align:center;color:white;cursor:pointer;transition:all ease-in-out 0.2s;font-family:'Open Sans', sans-serif}.header .center .bpm::after{content:'BPM';position:absolute;top:1px;right:-45px;font-size:20px;color:#fff;transition:all ease-in-out 0.2s;transform:translateX(-5px);opacity:0}.header .center .bpm:hover::after{transform:translateX(0px);opacity:1}.header .center .icon{transition:all ease-in-out 0.2s}.header .center .icon:hover{color:#fff}.header .center .icon:hover #bpm{color:#fff}.header .right{display:flex;align-content:center;opacity:1}.header .right.hide{opacity:0}.header .right.close{display:none}.header .right .midi.active,.header .right .save.active,.header .right .opt.active{color:#fff}.header .right .midi.active span::after,.header .right .save.active span::after,.header .right .opt.active span::after{transform:scaleX(1)}.header .right .midi span,.header .right .save span,.header .right .opt span{position:relative}.header .right .midi span::after,.header .right .save span::after,.header .right .opt span::after{content:'';width:100%;height:1px;background-color:#fff;position:absolute;bottom:0;left:0;transition:all ease-in-out 0.2s;transform-origin:center;transform:scaleX(0)}.header .right li{transition:all ease-in-out 0.2s}.header .right li:hover{color:#fff}.options{position:absolute;left:0;bottom:0;width:100%;height:0;max-height:0;z-index:99;overflow:hidden;display:flex;flex-direction:row;justify-content:space-between;padding:0;font-size:20px;background-color:#202124;border-top:0 solid white;color:#9e9e9e;box-sizing:border-box;transition:all 0.2s ease-in-out}.options.active{padding:20px 0;height:auto;max-height:400px;border-top:1px solid white}.options .main{width:500px;transition:all ease-in-out 0.2s;transform:translateY(0);opacity:1;user-select:none;color:white}.options .main.hide{transform:translateY(5px);opacity:0}.options .main.close{display:none}.options .main .title{background-color:#202124;color:#fff;display:flex;flex-direction:row;justify-content:space-between;padding:5px}.options .main .title .close{color:#9e9e9e;transition:color ease-in-out 0.2s;cursor:pointer}.options .main .title .close:hover{color:#fff}.options .main .string{padding:5px;text-align:center}.options .main .string.mod{display:flex;flex-direction:row;justify-content:space-around;font-size:20px;margin-top:10px}.options .main .string.mod span{position:relative;cursor:pointer;color:#9e9e9e;transition:color ease-in-out 0.1s}.options .main .string.mod span.active{color:white}.options .main .string.mod span:hover{color:white}.options .main .string.mod span::after{content:'';width:100%;height:1px;background-color:#202124;position:absolute;bottom:0;left:0;transition:all ease-in-out 0.2s;transform-origin:center;transform:scaleX(0)}.options .main .string.mod span.active::after{transform:scaleX(1)}.options .main .string input{width:80%;height:30px;line-height:30px;font-size:20px;border:none;border-bottom:1px solid white;outline:none;font-weight:100;font-family:'Open Sans', sans-serif;background-color:transparent;color:white;transition:border-bottom-color ease-in-out 0.1s}.options .main .string input.error{border-bottom:1px solid crimson}.options .main .string .botton{color:#9e9e9e;transition:color ease-in-out 0.2s}.options .main .string .botton:hover{color:#202124}.options .main .string .load{display:inline-block;width:21px;text-align:left}.options .main .string.list .string{color:#9e9e9e;transition:color ease-in-out 0.1s;cursor:pointer}.options .main .string.list .string:hover{color:rgba(0,0,0,0.8)}.options .select,.options .chart,.options .instrument,.options .metronome{width:500px;transition:all ease-in-out 0.2s;transform:translateY(0);opacity:1;user-select:none;color:white;display:flex;flex-direction:column;justify-content:center;align-items:center}.options .select.instrument,.options .chart.instrument,.options .instrument.instrument,.options .metronome.instrument{width:200px}.options .select.metronome,.options .chart.metronome,.options .instrument.metronome,.options .metronome.metronome{width:200px}.options .select .string,.options .chart .string,.options .instrument .string,.options .metronome .string{padding:5px;text-align:center;display:flex;flex-direction:row;justify-content:space-around;font-size:20px;margin-top:10px}.options .select .string span,.options .chart .string span,.options .instrument .string span,.options .metronome .string span{position:relative;cursor:pointer;color:#9e9e9e;margin:0 15px;transition:color ease-in-out 0.1s}.options .select .string span.active,.options .chart .string span.active,.options .instrument .string span.active,.options .metronome .string span.active{color:white}.options .select .string span:hover,.options .chart .string span:hover,.options .instrument .string span:hover,.options .metronome .string span:hover{color:white}.options .select .string span:after,.options .chart .string span:after,.options .instrument .string span:after,.options .metronome .string span:after{content:'';width:100%;height:1px;background-color:white;position:absolute;bottom:0;left:0;transition:all ease-in-out 0.2s;transform-origin:center;transform:scaleX(0)}.options .select .string span.active:after,.options .chart .string span.active:after,.options .instrument .string span.active:after,.options .metronome .string span.active:after{transform:scaleX(1)}.modal{position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.8);width:100vw;height:100vh;display:flex;flex-direction:row;justify-content:center;align-items:center;transition:all ease-in-out 0.2s;opacity:1}.modal.hide{opacity:0}.modal.close{display:none}.modal .popap{width:500px;background-color:white;transition:all ease-in-out 0.2s;transform:translateY(0);opacity:1;user-select:none}.modal .popap.hide{transform:translateY(5px);opacity:0}.modal .popap.instrument{width:700px;height:600px}.modal .popap.instrument .cont{display:flex;flex-direction:row;justify-content:space-between;height:calc(100% - 102px)}.modal .popap.instrument .cont .menu{width:28%;height:100%;padding-left:10px;border-right:1px solid black;overflow:auto}.modal .popap.instrument .cont .menu div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal .popap.instrument .cont .menu .sub-items{padding-left:20px}.modal .popap.instrument .cont .instruments{width:72%;height:100%;overflow:auto}.modal .popap.close{display:none}.modal .popap .title{background-color:#202124;color:#fff;display:flex;flex-direction:row;justify-content:space-between;padding:5px}.modal .popap .title .close{color:#9e9e9e;transition:color ease-in-out 0.2s;cursor:pointer}.modal .popap .title .close:hover{color:#fff}.modal .popap .string{padding:5px;text-align:center}.modal .popap .string.mod{display:flex;flex-direction:row;justify-content:space-around;font-size:20px;margin-top:10px}.modal .popap .string.mod span{position:relative;cursor:pointer;color:#9e9e9e;transition:color ease-in-out 0.1s}.modal .popap .string.mod span.active{color:#202124}.modal .popap .string.mod span:hover{color:#202124}.modal .popap .string.mod span::after{content:'';width:100%;height:1px;background-color:#202124;position:absolute;bottom:0;left:0;transition:all ease-in-out 0.2s;transform-origin:center;transform:scaleX(0)}.modal .popap .string.mod span.active::after{transform:scaleX(1)}.modal .popap .string.inst .item.active{opacity:0.5}.modal .popap .string.inst .item:hover{opacity:0.5}.modal .popap .string.inst .item{transition:all .1s ease-in-out;opacity:1;cursor:pointer}.modal .popap .string input{width:80%;height:30px;line-height:30px;font-size:20px;border:none;border-bottom:1px solid #202124;outline:none;font-weight:100;font-family:'Open Sans', sans-serif;background-color:white;color:#202124;transition:border-bottom-color ease-in-out 0.1s}.modal .popap .string input.error{border-bottom:1px solid crimson}.modal .popap .string .botton{color:#9e9e9e;transition:color ease-in-out 0.2s}.modal .popap .string .botton:hover{color:#202124}.modal .popap .string .load{display:inline-block;width:21px;text-align:left}.modal .popap .string.list .string{color:#9e9e9e;transition:color ease-in-out 0.1s;cursor:pointer}.modal .popap .string.list .string:hover{color:rgba(0,0,0,0.8)}.left-menu{position:fixed;left:-300px;top:0;width:300px;height:100vh;display:flex;flex-direction:column;background-color:white;box-sizing:border-box;border-right:1px solid white;user-select:none;transition:left ease-in-out 0.2s}.left-menu.hide{display:none}.left-menu.min{left:-270px}.left-menu.full{left:0}.left-menu .title{background-color:#202124;color:white;font-size:25px;display:flex;flex-direction:row;flex-basis:75px;justify-content:space-between;align-items:center;padding:0 5px 0 3px}.left-menu .title .plus{cursor:pointer}.left-menu .search{overflow-y:auto;padding:0px 3px;align-items:center;flex-basis:50px;text-align:center}.left-menu .search input{width:98%;border:none;outline:none;border-bottom:1px solid #202124;font-size:20px;font-family:'Open Sans', sans-serif;background-color:white;color:#202124}.left-menu .list{overflow-y:auto;overflow-x:hidden;flex-grow:0;font-size:18px;flex-basis:calc(100vh - 125px)}.left-menu .list::-webkit-scrollbar{width:2px;background-color:white}.left-menu .list::-webkit-scrollbar-track{background-color:white}.left-menu .list::-webkit-scrollbar-thumb{background-color:#202124;outline:none;border-radius:1px}.left-menu .list .item{display:flex;flex-direction:row;justify-content:space-between;padding:5px 3px;cursor:pointer;color:#9e9e9e;transition:all ease-in-out 0.1s;overflow:hidden;flex-wrap:wrap}.left-menu .list .item:hover{color:#202124}.left-menu .list .item.active{color:#202124}.left-menu .list .item.hide{color:#202124;max-height:0;padding:0 3px}.left-menu .list .item .left{flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-basis:calc(100% - 100px)}.left-menu .list .item .right{font-size:12px;display:flex;align-items:center;flex-basis:100px;flex-direction:row;justify-content:space-between}.left-menu .list .item::after{content:'duble click for delete';max-height:0;overflow:hidden;z-index:999;transition:all ease-in-out 0.2s;transition-delay:2s}.left-menu .list .item:hover::after{max-height:35px}.left-menu .list .no-data{color:#202124;text-align:center;max-height:25px;transition:all ease-in-out 0.1s;overflow:hidden}.left-menu .list .no-data.hide{max-height:0}.sequencer{width:100%;height:calc(100vh - 76px);user-select:none;position:relative;box-sizing:border-box;display:flex;flex-direction:row;overflow-y:auto;background-color:white}.sequencer .no-data{width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:100px;color:#e9e9e9;text-shadow:0 4px 6px #f1f1f1;letter-spacing:10px;overflow:hidden;white-space:nowrap;opacity:1}.sequencer .no-data.hide{opacity:0}.sequencer .no-data.close{display:none}.sequencer .pentagramon{opacity:1;transition:opacity ease-in-out 0.2s;display:flex;flex-direction:row;overflow-y:auto;background-color:white;width:100%}.sequencer .pentagramon::-webkit-scrollbar{width:2px;height:2px;background-color:transparent}.sequencer .pentagramon::-webkit-scrollbar-thumb{background-color:#202124;outline:none;border-radius:1px}.sequencer .pentagramon.hide{opacity:0}.sequencer .pentagramon.close{display:none}.sequencer .pentagramon.mod-13 .left img.mod-8,.sequencer .pentagramon.mod-13 .left img.mod-5{display:none}.sequencer .pentagramon.mod-13 .line-0,.sequencer .pentagramon.mod-13 .line-1,.sequencer .pentagramon.mod-13 .line-2,.sequencer .pentagramon.mod-13 .line-3,.sequencer .pentagramon.mod-13 .line-4,.sequencer .pentagramon.mod-13 .line-5,.sequencer .pentagramon.mod-13 .line-6,.sequencer .pentagramon.mod-13 .line-7,.sequencer .pentagramon.mod-13 .line-8,.sequencer .pentagramon.mod-13 .line-9,.sequencer .pentagramon.mod-13 .line-10,.sequencer .pentagramon.mod-13 .line-11,.sequencer .pentagramon.mod-13 .line-12{display:flex}.sequencer .pentagramon.mod-13 li.line-0,.sequencer .pentagramon.mod-13 li.line-2,.sequencer .pentagramon.mod-13 li.line-4,.sequencer .pentagramon.mod-13 li.line-6,.sequencer .pentagramon.mod-13 li.line-8,.sequencer .pentagramon.mod-13 li.line-10,.sequencer .pentagramon.mod-13 li.line-12{background-color:#fff;color:#202124;border-left:1px dashed #202124;border-right:1px dashed #202124}.sequencer .pentagramon.mod-13 div.line-0 .note,.sequencer .pentagramon.mod-13 div.line-2 .note,.sequencer .pentagramon.mod-13 div.line-4 .note,.sequencer .pentagramon.mod-13 div.line-6 .note,.sequencer .pentagramon.mod-13 div.line-8 .note,.sequencer .pentagramon.mod-13 div.line-10 .note,.sequencer .pentagramon.mod-13 div.line-12 .note{border-right:1px dashed #202124}.sequencer .pentagramon.mod-13 div.line-0 .note.tact,.sequencer .pentagramon.mod-13 div.line-2 .note.tact,.sequencer .pentagramon.mod-13 div.line-4 .note.tact,.sequencer .pentagramon.mod-13 div.line-6 .note.tact,.sequencer .pentagramon.mod-13 div.line-8 .note.tact,.sequencer .pentagramon.mod-13 div.line-10 .note.tact,.sequencer .pentagramon.mod-13 div.line-12 .note.tact{border-right-width:2px}.sequencer .pentagramon.mod-13 div.line-0 .note:last-child,.sequencer .pentagramon.mod-13 div.line-2 .note:last-child,.sequencer .pentagramon.mod-13 div.line-4 .note:last-child,.sequencer .pentagramon.mod-13 div.line-6 .note:last-child,.sequencer .pentagramon.mod-13 div.line-8 .note:last-child,.sequencer .pentagramon.mod-13 div.line-10 .note:last-child,.sequencer .pentagramon.mod-13 div.line-12 .note:last-child{border-right:none}.sequencer .pentagramon.mod-13 div.line-12 .note,.sequencer .pentagramon.mod-13 li.line-12{border-bottom:1px dashed #202124}.sequencer .pentagramon.mod-13 li.line-1,.sequencer .pentagramon.mod-13 li.line-3,.sequencer .pentagramon.mod-13 li.line-5,.sequencer .pentagramon.mod-13 li.line-7,.sequencer .pentagramon.mod-13 li.line-9,.sequencer .pentagramon.mod-13 li.line-11{background-color:#202124;color:#fff;border-right:1px dashed #fff}.sequencer .pentagramon.mod-13 div.line-1 .note,.sequencer .pentagramon.mod-13 div.line-3 .note,.sequencer .pentagramon.mod-13 div.line-5 .note,.sequencer .pentagramon.mod-13 div.line-7 .note,.sequencer .pentagramon.mod-13 div.line-9 .note,.sequencer .pentagramon.mod-13 div.line-11 .note{border-right:1px dashed #fff;background-color:#202124}.sequencer .pentagramon.mod-13 div.line-1 .note.tact,.sequencer .pentagramon.mod-13 div.line-3 .note.tact,.sequencer .pentagramon.mod-13 div.line-5 .note.tact,.sequencer .pentagramon.mod-13 div.line-7 .note.tact,.sequencer .pentagramon.mod-13 div.line-9 .note.tact,.sequencer .pentagramon.mod-13 div.line-11 .note.tact{border-right-width:2px}.sequencer .pentagramon.mod-13 div.line-1 .note:last-child,.sequencer .pentagramon.mod-13 div.line-3 .note:last-child,.sequencer .pentagramon.mod-13 div.line-5 .note:last-child,.sequencer .pentagramon.mod-13 div.line-7 .note:last-child,.sequencer .pentagramon.mod-13 div.line-9 .note:last-child,.sequencer .pentagramon.mod-13 div.line-11 .note:last-child{border-right:none}.sequencer .pentagramon.mod-13 div.line-1 .note.active,.sequencer .pentagramon.mod-13 div.line-3 .note.active,.sequencer .pentagramon.mod-13 div.line-5 .note.active,.sequencer .pentagramon.mod-13 div.line-7 .note.active,.sequencer .pentagramon.mod-13 div.line-9 .note.active,.sequencer .pentagramon.mod-13 div.line-11 .note.active{background-color:#985eff;border-bottom:1px dashed black;border-right:1px dashed black}.sequencer .pentagramon.mod-13 div.line-1 .note.active .resize,.sequencer .pentagramon.mod-13 div.line-3 .note.active .resize,.sequencer .pentagramon.mod-13 div.line-5 .note.active .resize,.sequencer .pentagramon.mod-13 div.line-7 .note.active .resize,.sequencer .pentagramon.mod-13 div.line-9 .note.active .resize,.sequencer .pentagramon.mod-13 div.line-11 .note.active .resize{border-left:2px solid #202124;opacity:1}.sequencer .pentagramon.mod-13 div.line-1 .note.active.maybe,.sequencer .pentagramon.mod-13 div.line-3 .note.active.maybe,.sequencer .pentagramon.mod-13 div.line-5 .note.active.maybe,.sequencer .pentagramon.mod-13 div.line-7 .note.active.maybe,.sequencer .pentagramon.mod-13 div.line-9 .note.active.maybe,.sequencer .pentagramon.mod-13 div.line-11 .note.active.maybe{opacity:0.5}.sequencer .pentagramon.mod-13 div.line-1 .note.active.select,.sequencer .pentagramon.mod-13 div.line-3 .note.active.select,.sequencer .pentagramon.mod-13 div.line-5 .note.active.select,.sequencer .pentagramon.mod-13 div.line-7 .note.active.select,.sequencer .pentagramon.mod-13 div.line-9 .note.active.select,.sequencer .pentagramon.mod-13 div.line-11 .note.active.select{background-color:#bbb;border-right:1px dashed #202124}.sequencer .pentagramon.mod-13 div.line-1 .note.active.child,.sequencer .pentagramon.mod-13 div.line-3 .note.active.child,.sequencer .pentagramon.mod-13 div.line-5 .note.active.child,.sequencer .pentagramon.mod-13 div.line-7 .note.active.child,.sequencer .pentagramon.mod-13 div.line-9 .note.active.child,.sequencer .pentagramon.mod-13 div.line-11 .note.active.child{border-right:none}.sequencer .pentagramon.mod-13 div.line-1 .note.active.child .resize,.sequencer .pentagramon.mod-13 div.line-3 .note.active.child .resize,.sequencer .pentagramon.mod-13 div.line-5 .note.active.child .resize,.sequencer .pentagramon.mod-13 div.line-7 .note.active.child .resize,.sequencer .pentagramon.mod-13 div.line-9 .note.active.child .resize,.sequencer .pentagramon.mod-13 div.line-11 .note.active.child .resize{opacity:0}.sequencer .pentagramon.mod-8 .left img.mod-13,.sequencer .pentagramon.mod-8 .left img.mod-5{display:none}.sequencer .pentagramon.mod-8 .line-0,.sequencer .pentagramon.mod-8 .line-2,.sequencer .pentagramon.mod-8 .line-4,.sequencer .pentagramon.mod-8 .line-5,.sequencer .pentagramon.mod-8 .line-7,.sequencer .pentagramon.mod-8 .line-8,.sequencer .pentagramon.mod-8 .line-10,.sequencer .pentagramon.mod-8 .line-12{display:flex}.sequencer .pentagramon.mod-8 .line-1,.sequencer .pentagramon.mod-8 .line-3,.sequencer .pentagramon.mod-8 .line-6,.sequencer .pentagramon.mod-8 .line-9,.sequencer .pentagramon.mod-8 .line-11{display:none}.sequencer .pentagramon.mod-8 li.line-0,.sequencer .pentagramon.mod-8 li.line-4,.sequencer .pentagramon.mod-8 li.line-7,.sequencer .pentagramon.mod-8 li.line-10{background-color:#fff;color:#202124;border-left:1px dashed #202124;border-right:1px dashed #202124}.sequencer .pentagramon.mod-8 div.line-0 .note,.sequencer .pentagramon.mod-8 div.line-4 .note,.sequencer .pentagramon.mod-8 div.line-7 .note,.sequencer .pentagramon.mod-8 div.line-10 .note{border-right:1px dashed #202124}.sequencer .pentagramon.mod-8 div.line-0 .note.tact,.sequencer .pentagramon.mod-8 div.line-4 .note.tact,.sequencer .pentagramon.mod-8 div.line-7 .note.tact,.sequencer .pentagramon.mod-8 div.line-10 .note.tact{border-right-width:2px}.sequencer .pentagramon.mod-8 div.line-0 .note:last-child,.sequencer .pentagramon.mod-8 div.line-4 .note:last-child,.sequencer .pentagramon.mod-8 div.line-7 .note:last-child,.sequencer .pentagramon.mod-8 div.line-10 .note:last-child{border-right:none}.sequencer .pentagramon.mod-8 li.line-2,.sequencer .pentagramon.mod-8 li.line-5,.sequencer .pentagramon.mod-8 li.line-8,.sequencer .pentagramon.mod-8 li.line-12{background-color:#202124;color:#fff;border-right:1px dashed #fff}.sequencer .pentagramon.mod-8 div.line-2 .note,.sequencer .pentagramon.mod-8 div.line-5 .note,.sequencer .pentagramon.mod-8 div.line-8 .note,.sequencer .pentagramon.mod-8 div.line-12 .note{border-right:1px dashed #fff;background-color:#202124}.sequencer .pentagramon.mod-8 div.line-2 .note.tact,.sequencer .pentagramon.mod-8 div.line-5 .note.tact,.sequencer .pentagramon.mod-8 div.line-8 .note.tact,.sequencer .pentagramon.mod-8 div.line-12 .note.tact{border-right-width:2px}.sequencer .pentagramon.mod-8 div.line-2 .note:last-child,.sequencer .pentagramon.mod-8 div.line-5 .note:last-child,.sequencer .pentagramon.mod-8 div.line-8 .note:last-child,.sequencer .pentagramon.mod-8 div.line-12 .note:last-child{border-right:none}.sequencer .pentagramon.mod-8 div.line-2 .note.active,.sequencer .pentagramon.mod-8 div.line-5 .note.active,.sequencer .pentagramon.mod-8 div.line-8 .note.active,.sequencer .pentagramon.mod-8 div.line-12 .note.active{background-color:#985eff;border-bottom:1px dashed black;border-right:1px dashed black}.sequencer .pentagramon.mod-8 div.line-2 .note.active .resize,.sequencer .pentagramon.mod-8 div.line-5 .note.active .resize,.sequencer .pentagramon.mod-8 div.line-8 .note.active .resize,.sequencer .pentagramon.mod-8 div.line-12 .note.active .resize{border-left:2px solid #202124;opacity:1}.sequencer .pentagramon.mod-8 div.line-2 .note.active.maybe,.sequencer .pentagramon.mod-8 div.line-5 .note.active.maybe,.sequencer .pentagramon.mod-8 div.line-8 .note.active.maybe,.sequencer .pentagramon.mod-8 div.line-12 .note.active.maybe{opacity:0.5}.sequencer .pentagramon.mod-8 div.line-2 .note.active.select,.sequencer .pentagramon.mod-8 div.line-5 .note.active.select,.sequencer .pentagramon.mod-8 div.line-8 .note.active.select,.sequencer .pentagramon.mod-8 div.line-12 .note.active.select{background-color:#bbb;border-right:1px dashed #202124}.sequencer .pentagramon.mod-8 div.line-2 .note.active.child,.sequencer .pentagramon.mod-8 div.line-5 .note.active.child,.sequencer .pentagramon.mod-8 div.line-8 .note.active.child,.sequencer .pentagramon.mod-8 div.line-12 .note.active.child{border-right:none}.sequencer .pentagramon.mod-8 div.line-2 .note.active.child .resize,.sequencer .pentagramon.mod-8 div.line-5 .note.active.child .resize,.sequencer .pentagramon.mod-8 div.line-8 .note.active.child .resize,.sequencer .pentagramon.mod-8 div.line-12 .note.active.child .resize{opacity:0}.sequencer .pentagramon.mod-5 .left img.mod-13,.sequencer .pentagramon.mod-5 .left img.mod-8{display:none}.sequencer .pentagramon.mod-5 .line-0,.sequencer .pentagramon.mod-5 .line-2,.sequencer .pentagramon.mod-5 .line-5,.sequencer .pentagramon.mod-5 .line-8,.sequencer .pentagramon.mod-5 .line-10{display:flex}.sequencer .pentagramon.mod-5 .line-1,.sequencer .pentagramon.mod-5 .line-3,.sequencer .pentagramon.mod-5 .line-4,.sequencer .pentagramon.mod-5 .line-6,.sequencer .pentagramon.mod-5 .line-7,.sequencer .pentagramon.mod-5 .line-9,.sequencer .pentagramon.mod-5 .line-11,.sequencer .pentagramon.mod-5 .line-12{display:none}.sequencer .pentagramon.mod-5 li.line-0,.sequencer .pentagramon.mod-5 li.line-5,.sequencer .pentagramon.mod-5 li.line-10{background-color:#fff;color:#202124;border-left:1px dashed #202124;border-right:1px dashed #202124}.sequencer .pentagramon.mod-5 div.line-0 .note,.sequencer .pentagramon.mod-5 div.line-5 .note,.sequencer .pentagramon.mod-5 div.line-10 .note{border-right:1px dashed #202124}.sequencer .pentagramon.mod-5 div.line-0 .note.tact,.sequencer .pentagramon.mod-5 div.line-5 .note.tact,.sequencer .pentagramon.mod-5 div.line-10 .note.tact{border-right-width:2px}.sequencer .pentagramon.mod-5 div.line-0 .note:last-child,.sequencer .pentagramon.mod-5 div.line-5 .note:last-child,.sequencer .pentagramon.mod-5 div.line-10 .note:last-child{border-right:none}.sequencer .pentagramon.mod-5 div.line-10 .note,.sequencer .pentagramon.mod-5 li.line-10{border-bottom:1px dashed #202124}.sequencer .pentagramon.mod-5 li.line-2,.sequencer .pentagramon.mod-5 li.line-8{background-color:#202124;color:#fff;border-right:1px dashed #fff}.sequencer .pentagramon.mod-5 div.line-2 .note,.sequencer .pentagramon.mod-5 div.line-8 .note{border-right:1px dashed #fff;background-color:#202124}.sequencer .pentagramon.mod-5 div.line-2 .note:last-child,.sequencer .pentagramon.mod-5 div.line-8 .note:last-child{border-right:none}.sequencer .pentagramon.mod-5 div.line-2 .note.tact,.sequencer .pentagramon.mod-5 div.line-8 .note.tact{border-right-width:2px}.sequencer .pentagramon.mod-5 div.line-2 .note.active,.sequencer .pentagramon.mod-5 div.line-8 .note.active{background-color:#985eff;border-bottom:1px dashed black;border-right:1px dashed black}.sequencer .pentagramon.mod-5 div.line-2 .note.active .resize,.sequencer .pentagramon.mod-5 div.line-8 .note.active .resize{border-left:2px solid #202124;opacity:1}.sequencer .pentagramon.mod-5 div.line-2 .note.active.maybe,.sequencer .pentagramon.mod-5 div.line-8 .note.active.maybe{opacity:0.5}.sequencer .pentagramon.mod-5 div.line-2 .note.active.select,.sequencer .pentagramon.mod-5 div.line-8 .note.active.select{background-color:#bbb;border-right:1px dashed #202124}.sequencer .pentagramon.mod-5 div.line-2 .note.active.child,.sequencer .pentagramon.mod-5 div.line-8 .note.active.child{border-right:none}.sequencer .pentagramon.mod-5 div.line-2 .note.active.child .resize,.sequencer .pentagramon.mod-5 div.line-8 .note.active.child .resize{opacity:0}.sequencer .pentagramon .left{height:auto}.sequencer .pentagramon .left .mod{display:flex;flex-direction:row}.sequencer .pentagramon .left .mod>img{transition:all .2s ease-in-out}.sequencer .pentagramon .left .mod>img.mod-13{margin-top:4px;height:643px}.sequencer .pentagramon .left .mod>img.mod-8{margin-top:4px;height:386px}.sequencer .pentagramon .left .mod>img.mod-5{margin-top:4px;height:246px}.sequencer .pentagramon .left .mod ul{margin:0;padding:0}.sequencer .pentagramon .left .mod ul li{padding-left:10px;list-style-type:none;font-size:20px;height:50px;line-height:2.5em;width:120px;box-sizing:border-box;flex-direction:row}.sequencer .pentagramon .left .mod ul li .num{text-align:center;flex-grow:0;flex-basis:40px;margin-right:5px}.sequencer .pentagramon .left .mod ul li:last-child{border-bottom:1px dashed #202124}.sequencer .pentagramon .left.hide img.mod-13{margin-left:-240px}.sequencer .pentagramon .left.hide img.mod-8{margin-left:-194px}.sequencer .pentagramon .left.hide img.mod-5{margin-left:-153px}.sequencer .pentagramon .right{flex-grow:1;position:relative;height:auto}.sequencer .pentagramon .right .line{position:absolute;width:2px;height:100%;left:1%;background-color:#bbb;opacity:1;cursor:move}.sequencer .pentagramon .right .line.hide{opacity:0}.sequencer .pentagramon .right .box{position:absolute;left:0;top:0;height:0;width:0;border:1px solid #CCC;background-color:rgba(220,220,220,0.4)}.sequencer .pentagramon .right .mod{display:flex;flex-direction:column}.sequencer .pentagramon .right .mod .string{height:50px;flex-direction:row}.sequencer .pentagramon .right .mod .string .note{height:100%;width:12.5%;box-sizing:border-box;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;transition:background-color ease-in-out 0.05s}.sequencer .pentagramon .right .mod .string .note .resize{width:20px;height:20px;display:none}.sequencer .pentagramon .right .mod .string .note.active{background-color:#985eff;border-bottom:1px dashed black}.sequencer .pentagramon .right .mod .string .note.active .resize{border-left:2px solid #202124;display:block}.sequencer .pentagramon .right .mod .string .note.active.maybe{opacity:0.5}.sequencer .pentagramon .right .mod .string .note.active.select{background-color:#bbb;border-right:1px dashed #202124}.sequencer .pentagramon .right .mod .string .note.active.child{border-right:none}.sequencer .pentagramon .right .mod .string .note.active.child .resize{display:none}.sequencer .pentagramon .right .mod .string:last-child .note{border-bottom:1px dashed #202124}