body{margin:0;font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wsBBwY46H+cZQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAIElEQVQY02PUMzH7z4ADsLGyMDAxEABDQgELGysLXgUAt6gBx8RLD38AAAAASUVORK5CYII=);height:100%}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}#app-bar a{padding:5px 0}#app-bar a,#app-bar a.active{color:inherit;text-decoration:inherit;font-size:26px}#app-bar a.active{border-bottom:1px solid #fff}#app-bar h1{max-width:20%;min-width:20%;text-overflow:ellipsis;overflow:hidden}.MuiAutocomplete-groupLabel,.MuiAutocomplete-input,.MuiAutocomplete-option{text-transform:capitalize}#scale-settings .MuiInputBase-input{font-size:36px}#scale-settings .MuiAutocomplete-inputRoot{padding-left:16px}.chord-card:hover button,.scale-card:hover:not(.empty) button{opacity:1}#scale-settings .MuiInputBase-root{padding-right:8px!important}.fretboard .fret:not(.nut):before{width:.22em!important}div.react-guitar-scrollbar>div:nth-child(2){height:7px!important}::-webkit-scrollbar{height:.4em;background-color:rgb(51 51 51)}#tiny-daw ::-webkit-scrollbar{background-color:transparent}::-webkit-scrollbar-track{box-shadow:inset 0 0 6px transparent}::-webkit-scrollbar-thumb{background-color:rgb(42 42 42)}#scale-settings .MuiFilledInput-root{padding-left:24px!important;padding-top:21px!important}#scale-settings .MuiFilledInput-root .MuiAutocomplete-input{padding:12px 4px 16px!important}#scale-settings .MuiFilledInput-root{background-color:#3f4042!important}#scale-settings .MuiFilledInput-root:hover{background-color:#575757!important}#scale-settings .MuiFilledInput-underline:before{border-bottom-width:2px!important}.MuiFormLabel-root.Mui-focused{color:#fff!important}#settings-modal>div:nth-child(3){outline:none!important}#settings-modal>div:nth-child(3)>div{border-radius:10px;border:none}#tiny-daw .CodeMirror{background:transparent!important}#tiny-daw .CodeMirror:hover{background:#383838!important}#tiny-daw .codemirror-focus .CodeMirror{background:#2e2e2e!important}#tiny-daw .CodeMirror-overlayscroll-vertical>div,.CodeMirror-overlayscroll-horizontal>div{display:none;background-color:rgb(42 42 42)!important}#tiny-daw .CodeMirror:hover .CodeMirror-overlayscroll-horizontal>div,#tiny-daw .CodeMirror:hover .CodeMirror-overlayscroll-vertical>div{display:block}#tiny-daw .codemirror-focus .CodeMirror-overlayscroll-horizontal>div,#tiny-daw .codemirror-focus .CodeMirror-overlayscroll-vertical>div{background-color:#3f4042!important}#tiny-daw .CodeMirror-scrollbar-filler{display:none!important}#main-control .MuiInputBase-input{font-size:36px;width:270px}#main-control .MuiAutocomplete-inputRoot{padding-left:16px}#tiny-daw .channel .MuiInputBase-input{font-size:24px}#tiny-daw .channel .MuiAutocomplete-inputRoot{padding-left:16px}#tiny-daw .channel .instrument .MuiInputBase-input,#tiny-daw .channel .preset .MuiInputBase-input{font-size:16px}#tiny-daw .channel .instrument .MuiAutocomplete-inputRoot,#tiny-daw .channel .preset .MuiAutocomplete-inputRoot{padding-left:10px}#tiny-daw .channel .preset .MuiFilledInput-underline:before{border-bottom:none!important}#tiny-daw .channel .preset .MuiInputBase-root:not(:hover){background:transparent}#main-control .MuiCardContent-root:last-child{padding-bottom:16px!important}#main-control #main-control-chords .MuiCardContent-root:last-child{padding-bottom:8px!important}#main-control button.MuiButtonBase-root{padding:8px 14px;margin-left:12px}.react-contextmenu{background-color:#383838!important}.react-contextmenu>div{color:#fff!important}.react-contextmenu-item--selected{background-color:#7986cb!important;border-color:#7986cb!important}#backing-track-generator{height:100%}.editor-card-input .MuiAutocomplete-endAdornment{display:none}#backing-track-generator .editor-card-input .MuiAutocomplete-inputRoot{padding-right:0}#backing-track-generator .editor-card-input .MuiFormControl-marginNormal{margin-top:10px}#backing-track-generator .editor-card-input .MuiInputBase-input{text-align:center}div[role=presentation]{min-width:140px}#backing-track-editor .MuiInputBase-root:after,#backing-track-editor .MuiInputBase-root:before{margin-bottom:-2px}#backing-track-generator #backing-track-editor .MuiInputBase-input{font-size:20px}#backing-track-generator-body ::-webkit-scrollbar{width:.4em}#backing-track-editor .MuiCardContent-root:last-child{padding-bottom:8px}@keyframes slidein{0%{margin-left:-256px}to{margin-left:0}}.blink{animation:blinker 1s ease infinite}@keyframes blinker{50%{opacity:.3}}*,:after,:before{-webkit-user-select:none;-webkit-user-drag:none;-webkit-app-region:no-drag}.frac{display:inline-block;position:relative;vertical-align:middle;letter-spacing:.001em;text-align:center;font-size:.65rem}.frac>span{display:block}.frac span.bottom{border-top:thin solid hsla(0,0%,100%,.7)}.MuiSlider-markLabel .MuiSlider-markLabelActive .frac span.bottom{border-top:thin solid #fff}.frac span.symbol{display:none}#backing-track-editor .carousel-slider{overflow:visible}#backing-track-editor .carousel .control-dots{bottom:28px}#backing-track-editor .carousel .control-dots .dot{width:6px;height:6px;margin:0 4px}#backing-track-editor .carousel .carousel-status{top:-32px;right:-4px;opacity:.7}.react-contextmenu{background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;color:#373a3c;font-size:16px;margin:2px 0 0;min-width:160px;outline:none;opacity:0;padding:5px 0;pointer-events:none;text-align:left;transition:opacity .25s ease!important}.react-contextmenu.react-contextmenu--visible{opacity:1;pointer-events:auto;z-index:9999}.react-contextmenu-item{background:0 0;border:0;color:#373a3c;cursor:pointer;font-weight:400;line-height:1.5;padding:3px 20px;text-align:inherit;white-space:nowrap}.react-contextmenu-item.react-contextmenu-item--active,.react-contextmenu-item.react-contextmenu-item--selected{color:#fff;background-color:#20a0ff;border-color:#20a0ff;text-decoration:none}.react-contextmenu-item.react-contextmenu-item--disabled,.react-contextmenu-item.react-contextmenu-item--disabled:hover{background-color:transparent;border-color:rgba(0,0,0,.15);color:#878a8c}.react-contextmenu-item--divider{border-bottom:1px solid rgba(0,0,0,.15);cursor:inherit;margin-bottom:3px;padding:2px 0}.react-contextmenu-item--divider:hover{background-color:transparent;border-color:rgba(0,0,0,.15)}.react-contextmenu-item.react-contextmenu-submenu{padding:0}.react-contextmenu-item.react-contextmenu-submenu>.react-contextmenu-item:after{content:"▶";display:inline-block;position:absolute;right:7px}.example-multiple-targets:after{content:attr(data-count);display:block}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}#circleoffifths *{position:relative;box-sizing:border-box;margin:0;padding:0;list-style:none}#circleoffifths .component{position:relative;margin-bottom:3em;height:15em}#circleoffifths .component>h2{position:absolute;overflow:hidden;width:100%;text-align:center;white-space:nowrap;font-weight:300;font-style:italic;font-size:12em;opacity:.1;cursor:default}#circleoffifths .cn-button{position:absolute;top:100%;left:50%;z-index:11;margin-top:-3.4em!important;margin-left:-3.5em!important;padding-top:0;width:7em;height:7em;border:none;transform:scale(1.4);color:#fff;font-weight:700;cursor:pointer;background:transparent!important}#circleoffifths .cn-button .MuiSvgIcon-root{font-size:3rem!important}#circleoffifths .cn-button:focus{outline:none}#circleoffifths .csstransforms .cn-wrapper:not(.inner){box-shadow:0 0 1.875vw 1.875vw rgb(0 0 0/25%);height:419px;width:419px;margin-left:-13.04em}#circleoffifths .csstransforms .cn-wrapper{position:absolute;top:100%;left:50%;z-index:10;margin-top:-13em;margin-left:-13.5em;width:27em;height:27em;border-radius:50%;background:transparent;opacity:0;transition:all .75s cubic-bezier(.51,.02,.85,.7) 0s;transform:scale(.1);pointer-events:none;overflow:hidden}#circleoffifths .cn-wrapper.inner{margin-top:-12.7em}#circleoffifths .csstransforms .cn-wrapper.opened-nav{transition:all 1.05s cubic-bezier(0,.88,.07,1) 0s}#circleoffifths .csstransforms .cn-wrapper:after{content:".";display:block;font-size:2em;width:6.2em;height:6.2em;position:absolute;left:50%;margin-left:-3.1em;top:50%;margin-top:-3.1em;border-radius:50%;z-index:10;color:transparent}#circleoffifths .cn-wrapper.inner .inner-shadow{position:absolute;top:100%;left:50%;z-index:11;margin-top:-19.25em!important;margin-left:-5.25em!important;padding-top:0;border-radius:50%;width:10.5em;height:10.5em;transform:scale(1.4);color:#fff;font-weight:700;cursor:pointer;background:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wsBBwY46H+cZQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAIElEQVQY02PUMzH7z4ADsLGyMDAxEABDQgELGysLXgUAt6gBx8RLD38AAAAASUVORK5CYII=);box-shadow:inset 0 0 1.875vw 1.875vw rgb(0 0 0/25%);border:2px solid #4e5888}#circleoffifths .csstransforms .cn-wrapper .key.active a{background:#606ba5}#circleoffifths .csstransforms .cn-wrapper.inner .key.active a{background:#4a5480}#circleoffifths .csstransforms .cn-wrapper li a:hover{background:#606ba5}#circleoffifths .csstransforms .cn-wrapper.inner li a:hover{background:#4a5480}#circleoffifths .csstransforms .cn-wrapper li.hidden{opacity:0}#circleoffifths .csstransforms .cn-wrapper li a{cursor:pointer}#circleoffifths .csstransforms .cn-wrapper li.hidden a{cursor:default}#circleoffifths .csstransforms .cn-wrapper li{position:absolute;top:50%;left:50%;overflow:hidden;margin-top:-1.3em;margin-left:-10em;width:10em;height:10em;font-size:1.5em;transition:none;transform:rotate(76deg) skew(60deg);transform-origin:100% 100%;pointer-events:none}#circleoffifths .csstransforms .cn-wrapper.opened-nav li{transition:all 0s cubic-bezier(0,.88,.07,1) 0s}#circleoffifths .csstransforms .cn-wrapper li:first-child span{transform:rotate(30deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(2) span{transform:rotate(0deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(3) span{transform:rotate(-30deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(4) span{transform:rotate(-60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(5) span{transform:rotate(-90deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(6) span{transform:rotate(-120deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(7) span{transform:rotate(-150deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(8) span{transform:rotate(180deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(9) span{transform:rotate(150deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(10) span{transform:rotate(120deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(11) span{transform:rotate(90deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(12) span{transform:rotate(60deg)}#circleoffifths .csstransforms .cn-wrapper li span{position:relative;top:1.2em;display:block;font-size:.6em;font-weight:700;opacity:0;transition:opacity .65s ease-in-out}#circleoffifths .csstransforms .cn-wrapper.opened-nav li span{opacity:1;transition:opacity 1.5s ease-in-out}#circleoffifths .csstransforms .cn-wrapper li a{position:absolute;right:-7.25em;bottom:-7.25em;display:block;width:14.5em;height:14.5em;border-radius:50%;background:#4e5888;color:#fff;border:2px solid #7986cb;text-align:center;text-decoration:none;font-size:1.2em;line-height:2;transform:skew(-60deg) rotate(-75deg) scale(1);-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}#circleoffifths .csstransforms .cn-wrapper.inner li a{background:#394063}#circleoffifths .csstransforms .opened-nav{border-radius:50%;opacity:1;transform:scale(1);pointer-events:auto}#circleoffifths .csstransforms .cn-wrapper li:first-child{transform:rotate(45deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(2){transform:rotate(75deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(3){transform:rotate(105deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(4){transform:rotate(135deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(5){transform:rotate(165deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(6){transform:rotate(195deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(7){transform:rotate(225deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(8){transform:rotate(255deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(9){transform:rotate(285deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(10){transform:rotate(315deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(11){transform:rotate(345deg) skew(60deg)}#circleoffifths .csstransforms .cn-wrapper li:nth-child(12){transform:rotate(375deg) skew(60deg)}#circleoffifths .no-csstransforms .cn-wrapper{overflow:hidden;margin:10em auto;padding:.5em;text-align:center}#circleoffifths .no-csstransforms .cn-wrapper ul{display:inline-block}#circleoffifths .no-csstransforms .cn-wrapper li{float:left;width:5em;height:5em;background-color:#fff;text-align:center;font-size:1em;line-height:5em}#circleoffifths .no-csstransforms .cn-wrapper li a{display:block;width:100%;height:100%;color:inherit;text-decoration:none}#circleoffifths .no-csstransforms .cn-wrapper li a:active,#circleoffifths .no-csstransforms .cn-wrapper li a:focus,#circleoffifths .no-csstransforms .cn-wrapper li a:hover{background-color:#f8f8f8}#circleoffifths .no-csstransforms .cn-wrapper li.active a{background-color:#6f325c;color:#fff}#circleoffifths .no-csstransforms .cn-button{display:none}@media only screen and (max-width:1650px){#circleoffifths #mode{right:-5%}}@media only screen and (max-width:620px){#circleoffifths .no-csstransforms li{width:4em;height:4em;line-height:4em}}@media only screen and (max-width:500px){#circleoffifths .no-ccstransforms .cn-wrapper{padding:.5em}#circleoffifths .no-csstransforms .cn-wrapper li{width:4em;height:4em;font-size:.9em;line-height:4em}}@media only screen and (max-width:480px){#circleoffifths .cn-button{font-size:1em}#circleoffifths .csstransforms .cn-wrapper{font-size:.68em}}@media only screen and (max-width:420px){#circleoffifths .no-csstransforms .cn-wrapper li{width:100%;height:3em;line-height:3em}}
/*# sourceMappingURL=main.671a1d4f.chunk.css.map */