body{font-family:Segoe UI,Arial,sans-serif}.chords-app .ch-chord-selector{text-align:center;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.chords-app .ch-chord-selector .input:checked{background-color:#a00;color:#fff}.chords-app .ch-chord-selector .button-wrapper{-webkit-box-orient:horizontal;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.chords-app .ch-chord-selector .button-slot,.chords-app .ch-chord-selector .button-wrapper{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-direction:normal}.chords-app .ch-chord-selector .button-slot{-webkit-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.chords-app .ch-chord-selector .button{-webkit-box-flex:0;-ms-flex:0 0 auto;-webkit-flex:0 0 auto;flex:0 0 auto;border:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:1.5rem;margin:.5rem;padding:.5rem;border-radius:3px;background-color:#f0f0f0;cursor:pointer;font-weight:700;-webkit-transition:all .25s ease;transition:all .25s ease}.chords-app .ch-chord-selector .button.selected,.chords-app .ch-chord-selector .button:hover{background-color:#a00;color:#fff}.chords-app .ch-control-panel{max-width:1000px;margin:0 auto;border:1px solid #ddd;border-radius:7px;padding:1rem}.chords-app .ch-header{text-align:center;margin:2rem 0}.chords-app .ch-octave .ch-row.white .ch-key{-webkit-box-flex:0;-ms-flex:0 0 48px;-webkit-flex:0 0 48px;flex:0 0 48px;height:168px;background-color:ivory;color:#000;border-color:#aaa;border-radius:0 0 3px 3px;box-shadow:0 2px 3px -2px #aaa;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.chords-app .ch-octave .ch-row.white .ch-key.pressed{height:163.79999999999998px;box-shadow:none;background-image:-webkit-linear-gradient(ivory,#efefe0);background-image:linear-gradient(ivory,#efefe0)}.chords-app .ch-octave .ch-row.black .ch-key{position:absolute;width:24px;height:96px;background-color:#000;color:#fff;border-width:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);border-radius:0 0 2px 2px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.chords-app .ch-octave .ch-row.black .ch-key:before{content:"";display:block;height:95%;width:75%;background-color:#333;background-image:-webkit-linear-gradient(#000,#555);background-image:linear-gradient(#000,#555);border-radius:0 0 4px 4px;box-sizing:border-box}.chords-app .ch-octave .ch-row.black .ch-key.pressed:before{height:97%;width:77%;background-image:-webkit-linear-gradient(#333,#111);background-image:linear-gradient(#333,#111)}.chords-app .ch-key{border-width:1px;border-style:solid;border-top-color:#000;height:100%;box-sizing:border-box;-webkit-transition:all .15s ease;transition:all .15s ease}.chords-app .ch-key.key01{left:48px}.chords-app .ch-key.key03{left:96px}.chords-app .ch-key.key06{left:192px}.chords-app .ch-key.key08{left:240px}.chords-app .ch-key.key10{left:288px}.chords-app .ch-key:after{content:"";display:block;position:absolute;bottom:8%;width:25px;height:25px;border-radius:50%;border:2px solid rgba(255,0,0,.45);background-image:-webkit-linear-gradient(rgba(255,0,0,.45),rgba(255,0,0,.1));background-image:linear-gradient(rgba(255,0,0,.45),rgba(255,0,0,.1));opacity:0;-webkit-transition:all .15s ease;transition:all .15s ease}.chords-app .ch-key.pressed:after{opacity:1;bottom:6%}.chords-app .ch-keyboard{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-bottom:3rem}.chords-app .ch-octave{width:336px;position:relative;display:inline-block}.chords-app .ch-octave .ch-row.white{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.chords-app .ch-octave .ch-row.black{position:absolute;top:0;left:0}.chords-app .ch-root-selector{text-align:center;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;margin-bottom:1rem}.chords-app .ch-root-selector .input:checked{background-color:#a00;color:#fff}.chords-app .ch-root-selector .button-wrapper{-webkit-box-orient:horizontal;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.chords-app .ch-root-selector .button-slot,.chords-app .ch-root-selector .button-wrapper{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-direction:normal}.chords-app .ch-root-selector .button-slot{-webkit-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.chords-app .ch-root-selector .button{border:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:1.5rem;height:1.5rem;margin:.5rem;padding:.5rem;border-radius:50%;background-color:#f0f0f0;cursor:pointer;font-weight:700;-webkit-transition:all .25s ease;transition:all .25s ease}.chords-app .ch-root-selector .button.selected,.chords-app .ch-root-selector .button:hover{background-color:#a00;color:#fff}.chords-app .ch-chord-selector .title,.chords-app .ch-root-selector .title{color:#aaa}
/*# sourceMappingURL=main.f6a2ab2b.css.map*/