*{font-family:Roboto,sans-serif}*,*:before,*:after{box-sizing:border-box}body{background:#506080;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;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1,h2,h3,h4,h5,h6,p{margin:0;font-size:16px;line-height:1.2}h1{text-align:center;font-size:30px;margin-bottom:12px}h2{text-align:center;font-size:28px;margin-bottom:10px}h3{text-align:center;font-size:20px;margin-bottom:8px}h4{font-size:18px;margin-bottom:8px}h5{font-size:16px;margin-bottom:8px}h5,h6,p{margin-bottom:8px}input{min-width:0}label{padding-right:16px}a{text-decoration:none}#app{display:flex;flex-direction:column;align-items:stretch;height:100vh;padding-top:60px}#main{display:flex;flex-direction:column;align-items:center;margin:20px 30px 0;padding-bottom:30px}.app-page{display:flex;justify-content:center;align-items:center;max-width:1200px;width:100%}.page{display:flex;flex-direction:column;border:1px solid black;border-radius:8px;background:#ddd;padding:26px 20px 0;width:100%}.container{display:flex;flex-direction:column;border:1px solid black;border-radius:8px;background:#ddd;padding:20px;margin-bottom:20px}.container-panel{background:#d0d0d0}.column{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.item{padding-bottom:20px}.center{display:flex;justify-content:center;align-items:center;text-align:center}.left{display:flex;flex-direction:column;justify-content:left;text-align:left}.right{display:flex;justify-content:right}.spaced{justify-content:space-between}.narrow{max-width:700px}.error-message{color:red}.button{font-size:12pt;padding:4px 8px;border-radius:8px;background:#fff;margin-bottom:10px;border-width:1.5px;cursor:pointer}.icon{cursor:pointer}.react-tooltip{z-index:3;max-width:300px}.fret-value{display:flex;flex:1 1 auto;align-items:center;justify-content:center;height:0}.mobile{display:none}.desktop{display:flex}@media all and (max-width: 600px){#main{margin-left:0;margin-right:0}.mobile{display:flex}.desktop{display:none}}.tone-x{background:#fafafa}.tone-11{background:#fa87c8}.tone-10{background:#c887fa}.tone-9{background:#a07dfa}.tone-8{background:#6487f0}.tone-7{background:#64affa}.tone-6{background:#64c8c8}.tone-5{background:#7ae67a}.tone-4{background:#f0f064}.tone-3{background:#fac864}.tone-2{background:#faaf64}.tone-1{background:#f08464}.tone-0{background:#de6464}#header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px;color:#ddd;background:#080820;position:fixed;top:0;width:100%;height:60px;z-index:10}#header a,#menu a{color:#ddd}#header #header-left{display:flex;flex-direction:row;align-items:center}#header h1{padding:0;margin:0}#header #menu-button{margin-right:20px}.signup,.login,.profile,.logout{margin-left:15px}.logout{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}#menu{display:flex;flex-direction:column;position:fixed;top:60px;left:0;z-index:2;height:75vh;width:280px;padding:8px 0;border:1px solid black;border-radius:0 8px 8px 0;background:#999;color:#fff;overflow:scroll;transition:.4s}#menu.hide{left:-300px}.menu-folder{display:flex;flex-direction:column;width:100%}.menu-folder-name{display:flex;justify-content:space-between;align-items:center;padding-right:20px}.menu-folder-content{display:flex;flex-direction:column}.menu-item{font-size:15pt;width:100%;padding:6px 0 6px 25px}.menu-folder-content .menu-item{padding-left:45px}.menu-folder-content .menu-folder-content .menu-item{padding-left:65px}.menu-folder-name:hover,.menu-item:hover{background:#888}#headshot{width:200px;border-radius:100%;margin-top:12px}#footer{display:flex;justify-content:space-between;width:250px}#footer .icon{height:30px;width:30px}a{color:#000}.home-section{display:flex;align-items:center;justify-content:center;text-align:center;margin-bottom:8px}.home-overview{flex-direction:column;text-align:center}.home-panels{flex-direction:row;flex-wrap:wrap;align-items:stretch}.panel{display:flex;flex-direction:column;border:solid 1px black;background:#d0d0d0;border-radius:8px;min-height:220px;width:40%;margin:12px;padding:12px 30px 4px}.panel:hover{cursor:pointer;transform:scale(1.01);box-shadow:0 0 8px #0003;transition:all .1s ease-in-out}@media screen and (max-width: 1200px){.panel{width:45%}}@media screen and (max-width: 800px){.panel{width:100%}}.panel-content{display:flex;justify-content:center;margin-bottom:8px}.panel-content img{height:150px}.panel-title{display:flex;margin-bottom:0}.panel-description{display:flex;margin-bottom:0;justify-content:center}.banner{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:red solid 1px;border-radius:8px;background:#f99;width:100%;padding:8px;margin-bottom:10px}.banner p{margin:1px;font-size:18px}.banner .button{margin-top:8px;margin-bottom:0}.banner .close-button{display:flex;position:absolute;top:4px;right:4px;width:25px;height:25px;justify-content:center;align-items:center;border:solid 1px black;border-radius:8px;font-weight:700;cursor:pointer}#login,#signup{width:400px}#login input,#signup input{width:165px}#music-theory img.full{width:100%;padding-bottom:12px}.circle-of-fifths-diagram{align-self:center;max-width:250px}.circle-of-fifths-diagram.desktop{position:relative;top:-15px;width:40%;padding-left:20px}select{font-size:x-large}#color-key{display:flex;flex-direction:column;flex:0 0 auto}.color-key-sample{display:inline-block;width:20px}.fretboard{display:flex}@media all and (max-width: 600px){.fretboard{width:300px;overflow-x:hidden}.fretboard>div{position:relative}}.fretboard-content{display:flex;flex-direction:column;position:relative;border-style:solid;border-color:#000;border-width:3px 0px 3px 3px}.frets{display:flex;position:absolute;height:100%}.fret{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:30px;border-right:solid black 1px}:root{--fret-scale: 60}.fret-0{width:calc(.6px * var(--fret-scale))}.fret-1{width:calc(.944px * var(--fret-scale))}.fret-2{width:calc(.891px * var(--fret-scale))}.fret-3{width:calc(.841px * var(--fret-scale))}.fret-4{width:calc(.794px * var(--fret-scale))}.fret-5{width:calc(.749px * var(--fret-scale))}.fret-6{width:calc(.707px * var(--fret-scale))}.fret-7{width:calc(.667px * var(--fret-scale))}.fret-8{width:calc(.63px * var(--fret-scale))}.fret-9{width:calc(.5951px * var(--fret-scale))}.fret-10{width:calc(.561px * var(--fret-scale))}.fret-11{width:calc(.53px * var(--fret-scale))}.fret-12{width:calc(.5px * var(--fret-scale))}.fret-13{width:calc(.472px * var(--fret-scale))}.fret-14{width:calc(.445px * var(--fret-scale))}.fret-15{width:calc(.42px * var(--fret-scale))}.fret-16{width:calc(.397px * var(--fret-scale))}.fret-17{width:calc(.375px * var(--fret-scale))}.fret-18{width:calc(.354px * var(--fret-scale))}.fret-19{width:calc(.334px * var(--fret-scale))}.fret-20{width:calc(.315px * var(--fret-scale))}.fret-21{width:calc(297px * var(--fret-scale))}.fret-22{width:calc(1px * var(--fret-scale))}.fret-marker{display:flex;flex-direction:column;justify-content:center;height:8px}.fretboard-strings{position:relative;top:-12px;padding:5px 0}.fretboard-string{display:flex;flex-direction:row;border-bottom:solid black 1px}.fret-numbers{display:flex;flex-direction:row;padding-left:3px}.fret-number{display:flex;align-items:center;justify-content:center}.fret-box{display:flex;justify-content:flex-end;align-items:center;height:24px;padding-right:3px}.fretboard-string .fret-box{position:relative;top:12px}.finger-value{display:flex;justify-content:center;align-items:center;height:24px;width:24px;border-radius:50%}.fretboard.arpeggio .tone-1,.fretboard.arpeggio .tone-2,.fretboard.arpeggio .tone-5,.fretboard.arpeggio .tone-6,.fretboard.arpeggio .tone-8,.fretboard.arpeggio .tone-9,.fretboard.arpeggio .tone-10,.fretboard.arpeggio .tone-11{display:none}#tabulator-page{display:flex}#tabulator{display:flex;justify-content:center;width:100%;margin-top:12px}#sidebar{display:flex;flex-direction:column;flex:0 0 auto;width:300px;margin-left:20px}#config{display:flex;flex-direction:column;flex:0 0 auto;height:300px}#config>div{display:flex;flex-direction:column;flex:1 1 auto;justify-content:space-between}#config-options{display:flex;flex-direction:column}.config-option{display:flex;justify-content:flex-start;margin:8px}.config-option-control,.config-option-label{display:flex;flex:1 0 auto;min-width:0;width:0;margin:0}.config-option-control{justify-content:center;align-items:center}#num-columns-buttons button{margin:0 3px;width:25px}#num-column-display{width:30px;text-align:center}#export{font-size:14pt;padding:5px;border-radius:8px;background:#fff;margin-bottom:10px;cursor:pointer}#tab{display:flex;flex-direction:column;overflow:scroll;width:70%;max-height:75vh;padding-top:20px;padding-bottom:40px}#tab-mobile{display:none}.tab-view{display:flex;padding-top:20px;padding-right:20px}.edit{position:absolute;left:20px;bottom:-20px;padding-right:15px}.start-column{padding-right:10px;width:90px;flex-shrink:0}.end-column{padding:0 10px}.start-column .tab-row,.start-column .input-row{align-items:flex-end}.start-column .input-row-label{display:flex;align-items:center}.start-column .input-row-label svg{margin-left:6px}.start-column .input-row-label svg:focus{outline:none}.quality-icon{cursor:pointer}.chord{display:flex;flex-direction:column;width:40px}.display{display:flex}.input-row{display:flex;flex-direction:column;justify-content:space-around;align-content:center;height:150px;margin:10px 0}.input-row input,.input-row button{flex:1 1 auto;text-align:center}.tab-detail{display:flex;flex-direction:column;position:absolute;width:180px;background:#fff;z-index:1}.tab-detail.hide{display:none}.tab-detail-row{display:flex;flex:1 1 auto}.tab-detail-cell{display:flex;flex:1 1 auto;justify-content:center;width:0;margin-top:-1px;margin-left:-1px;border:1px solid black}.tab-detail-cell:first-child{justify-content:flex-end;padding-right:5px}.tab-row{display:flex;flex-direction:column;flex:1;justify-content:space-around;height:150px;position:sticky}@media all and (max-width: 600px){#tabulator{flex-direction:column;align-items:center;max-height:none}#tab-mobile{display:flex;width:250px}#sidebar{margin:0;width:250px}#tab,#config,.edit{display:none}}.abbrev-modal-body{margin-bottom:20px}.abbrev-modal-table{text-align:left}.abbrev-modal .quality{font-weight:700}#modal{display:flex;justify-content:center;align-items:center;position:fixed;width:100%;top:200px;z-index:5}#modal .outside-click-handler{display:flex;justify-content:center;width:100%}#modal-content{display:flex;position:fixed;flex-direction:column;align-items:center;background:#ddd;border:1px solid black;border-radius:8px;max-width:600px;padding:20px 30px 12px}