:root{--modal-bg-color:#282828;--main-bg-color:#282828}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-y:auto;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{overflow:auto;background:var(--main-bg-color);width:100vw;height:100vh;padding:0}.mainPart{position:relative;top:15vh;z-index:0}.trackHeader button{position:absolute;bottom:2px;padding:0;background-color:transparent;border:none;cursor:pointer;border-radius:10px;transition:-webkit-filter .2s linear;transition:filter .2s linear;transition:filter .2s linear,-webkit-filter .2s linear}.trackHeaderDeleteButton{right:2px}.trackHeaderEditButton{right:25px}.trackHeader img{height:20px;width:20px}.trackHeader button:hover{-webkit-filter:invert();filter:invert()}.trackHeader{background-color:#000;opacity:.8;color:#fff;border:1px solid #000;border-top-right-radius:15px;border-bottom-right-radius:15px;height:100px;font-weight:700;overflow:auto;position:relative}.trackHeaderContainer{display:grid;grid-template-columns:20px 80%;grid-template-rows:50% 50%}.trackHeaderTitle{width:10px;padding:10px}.trackHeaderInstrumentName{font-weight:lighter;font-size:smaller;padding:10px}.newTrackModal{position:absolute;top:40%;left:50%;background:var(--modal-bg-color);width:350px;height:20%;border-radius:25px;margin-left:-175px;animation:showPopUp .5s ease-in-out 1 forwards;min-height:200px}@keyframes showPopUp{0%{transform:scale(0)}75%{transform:scale(1.1)}to{transform:scale(1)}}.newTrackModal label{padding:40px}.newTrackModal input{margin:10px;border-radius:10px;border:none}.newTrackModal input:focus{background-color:#ff0}.newTrackModal select{margin:10px;border-radius:10px}.newTrackModal button{margin:3px;padding:5px;border-radius:10px;border:none;position:absolute;cursor:pointer;transition:background-color .5s,padding .2s}.newTrackModal button:hover{background-color:#ff0;padding:4px}.newTrackModalAddButton{bottom:10px;right:20px}.newTrackModalCancelButton{bottom:10px;left:20px}.newTrackModalContainer{display:grid;grid-template-columns:35% 65%;grid-template-rows:repeat(3,1fr)}.newTrackModalContainer p{color:#fff;font-weight:bolder;text-align:right;margin-top:7px}.newTrackModalContainer input{padding:0}.arrangementViewContainer{display:grid;grid-template-columns:150px auto;padding:0;height:60vh;width:100%;overflow:scroll}.audioSamplerContainer{display:grid;grid-template-columns:repeat(5,20%);height:25vh}.addNewTrackButton{background-color:transparent;display:table-cell;vertical-align:middle;border-radius:10px;color:#fff;border:none;padding:10px;font-weight:700;cursor:pointer;font-size:15px;transition:letter-spacing .5s}.addNewTrackButton:hover{letter-spacing:1px}.addNewTrackImg{padding-right:10px;vertical-align:middle}.stageClass{overflow:scroll}.audioSampler{padding:5%;margin:50px 50px 100px;background-color:#000;color:#fff;border-radius:50px;font-weight:bolder;opacity:.8;position:relative}.audioSampler img{cursor:pointer;width:20px;right:20px;top:20px;position:absolute}footer{background:linear-gradient(180deg,transparent,#000);position:absolute;bottom:0;width:100%}footer button{font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:1em;border-radius:.5em;border:none;padding:.5em;margin:.5em;background-color:#000;cursor:pointer;color:#fff;transition:background-color .5s,color .5s}footer button:hover{background-color:grey;color:#000}.footerRightButtons{display:block;float:right}.prefModal{position:absolute;top:40%;left:50%;background:var(--modal-bg-color);width:350px;height:20%;border-radius:25px;margin-left:-175px;animation:showPopUp .5s ease-in-out 1 forwards;min-height:200px}.prefModalContainer{display:grid;grid-template-columns:50% 50%}.prefModalContainer p{color:#fff;text-align:right;font-weight:bolder;margin:0;padding:7px 3px 0 0}.prefModal input{margin-bottom:25px;margin-left:10px;border-radius:10px;border:none}.prefModal select{margin-top:10px;margin-bottom:27px;margin-left:10px;border-radius:10px}.prefModal button{margin:3px;padding:5px;border-radius:10px;border:none;position:absolute;cursor:pointer;transition:background-color .5s,padding .2s}.prefModal button:hover{background-color:#ff0;padding:4px}.prefModalSaveButton{bottom:10px;right:20px}.prefModalCancelButton{bottom:10px;left:20px}.signUpContainer{display:grid;height:200px;grid-template-columns:50% 50%;grid-template-rows:repeat(4,1fr)}.signUpModal{position:absolute;top:35%;left:50%;background:var(--modal-bg-color);width:500px;height:30%;border-radius:25px;margin-left:-250px;animation:showPopUp .5s ease-in-out 1 forwards;min-height:200px}.signUpModal p{font-weight:700;color:#fff;margin:0;padding:10px 20px 0 0;text-align:right}.signUpModal input{text-align:center;margin:4px;padding:5px 0;border-radius:10px;border:none}.signUpModal input:focus{background-color:#ff0}.signUpModal button{margin:3px;padding:5px;border-radius:10px;border:none;position:absolute;cursor:pointer;transition:background-color .5s,padding .2s}.signUpModal button:hover{background-color:#ff0;padding:4px}.signUpModalCancelButton{bottom:10px;left:20px}.signUpModalSignUpButton{bottom:10px;right:20px}.signInContainer{padding-top:8%;display:grid;height:200px;grid-template-columns:40% 60%;grid-template-rows:repeat(2,1fr)}.signInModal{position:absolute;top:40%;left:50%;background:var(--modal-bg-color);width:500px;height:20%;border-radius:25px;margin-left:-250px;animation:showPopUp .5s ease-in-out 1 forwards;min-height:200px}.signInModal p{font-weight:700;color:#fff;margin:0;padding:10px 20px 0 0;text-align:right}.signInModal input{text-align:center;margin:4px;padding:5px 0;border-radius:10px;border:none}.signInModal input:focus{background-color:#ff0}.signInModal button{margin:3px;padding:5px;border-radius:10px;border:none;position:absolute;cursor:pointer;transition:background-color .5s,padding .2s}.signInModal button:hover{background-color:#ff0;padding:4px}header{font-family:"Brush Script MT",cursive;color:#ffebcd;font-size:6vh;text-align:center;background-color:#000;height:7vh;top:0;z-index:1}header,nav{position:absolute;width:100%}nav{background:linear-gradient(180deg,#000,hsla(0,0%,66.3%,0));padding-left:150px;padding-bottom:10px;top:7vh;height:5vh;z-index:2}nav button{background-image:linear-gradient(90deg,#000,grey,#000);color:#fff;margin-top:10px;margin-bottom:10px;margin-right:5px;transition:border-radius .2s;cursor:pointer}nav button:hover{border-radius:5px}nav button:active{background-image:linear-gradient(90deg,#000,#4d1c1c,#000)}nav input{border-radius:5px;border:none;padding:2px;margin-left:10px;text-align:center;font-weight:900;font-size:small;outline:none;transition:border-radius .2s}nav input:focus{border-radius:0}nav span{color:#fff;margin-left:30px;font-weight:bolder}nav select{border-radius:5px;border:none;padding:2px;margin-left:10px;text-align:center;font-weight:900;font-size:small;outline:none;transition:border-radius .2s}nav select:focus{border-radius:0}.pianoTiles{display:grid;grid-auto-rows:1fr;opacity:.8}.pianoTileWhite{background-color:#fff}.pianoTileBlack,.pianoTileWhite{font-size:10px;font-family:Arial,Helvetica,sans-serif;margin:1px;border-top-right-radius:5px;border-bottom-right-radius:5px;height:25px;padding:0}.pianoTileBlack{background-color:#000;color:#fff}.gridContainer{display:grid;grid-template-columns:50px auto;padding:0;height:65vh;width:99vw;overflow:scroll;margin-top:10px;grid-gap:0;gap:0;border:3px solid #fff;border-radius:5px}.pianoRollView{margin-bottom:30vh}.pianoRollView span{color:#fff;margin-left:50px;font-weight:bolder}.pianoRollView select{border-radius:5px;border:none;padding:2px;margin-left:10px;text-align:center;font-weight:900;font-size:small;outline:none;transition:border-radius .2s}.pianoRollView select:focus{border-radius:0}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent;border-radius:10px}::-webkit-scrollbar-thumb{background:#888;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#555}::-webkit-scrollbar-corner{opacity:0}.stageClass{color:#fff;overflow:hidden}
/*# sourceMappingURL=main.f0d85746.chunk.css.map */