/*!
 * 
 *   react-simple-keyboard v3.8.14
 *   https://github.com/hodgef/react-simple-keyboard
 *
 *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
 *
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
 */
/*!
 * 
 *   simple-keyboard v3.8.10
 *   https://github.com/hodgef/simple-keyboard
 *
 *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
 *
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
 */.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1 1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}.keyboardContainer{display:flex;background-color:rgba(0,0,0,.1);justify-content:center;width:100%;height:100%;margin:0 auto;border-radius:5px;position:relative;z-index:0}.hg-rows{height:100%}.simple-keyboard-main .hg-rows .hg-row{height:15%}.simple-keyboard.hg-theme-default{display:inline-block}.simple-keyboard-main .hg-button{height:100%}.simple-keyboard-main.simple-keyboard{width:50%;min-width:640px;background:none;z-index:-1}.simple-keyboard-main.simple-keyboard .hg-row:first-child{margin-bottom:10px}.simple-keyboard-main.simple-keyboard .hg-row{margin-bottom:7px}.simple-keyboard-arrows.simple-keyboard{align-self:flex-end;background:none}.simple-keyboard .hg-button.selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard .hg-button.emptySpace{pointer-events:none;background:none;border:none;box-shadow:none}.simple-keyboard-arrows .hg-row{justify-content:center}.simple-keyboard-arrows .hg-button{width:50px;flex-grow:0;justify-content:center;display:flex;align-items:center}.hg-theme-default .hg-button{height:48px}.controlArrows{display:flex;align-items:center;justify-content:space-between;flex-flow:column;z-index:-1}.simple-keyboard-control.simple-keyboard{background:none}.simple-keyboard-control.simple-keyboard .hg-row:first-child{margin-bottom:13px}.simple-keyboard-control .hg-button{width:50px;flex-grow:0;justify-content:center;display:flex;align-items:center}.numPad{display:flex;align-items:flex-end;z-index:-1}.simple-keyboard-numpad.simple-keyboard{background:none;width:78%}.simple-keyboard-numpad.simple-keyboard .hg-button{width:50px;justify-content:center;display:flex;align-items:center}.control-keys{pointer-events:none;background-color:#adb0b3!important;color:grey}.hg-button-shiftleft,.hg-button-shiftright{width:11%}.hg-button-capslock{width:9%}.simple-keyboard-numpadEnd.simple-keyboard{width:50px;background:none;margin:0;padding:5px 5px 5px 0}.simple-keyboard-numpadEnd.simple-keyboard .hg-button{align-items:center;justify-content:center;display:flex}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter,.simple-keyboard-numpadEnd .hg-button.hg-standardBtn.hg-button-plus,.simple-keyboard-numpadEnd.simple-keyboard .hg-button.hg-button-enter{height:100px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-button.hg-functionBtn.hg-button-space{width:50%}.hg-theme-default .hg-button.hg-activeButton{background:#3ac8da!important}.hg-theme-default .hg-button.hg-activeButton-left{background:rgba(32,148,226,.7)!important}.hg-theme-default .hg-button.hg-activeButton-right{background:rgba(216,81,81,.85)!important}.menu-option{display:flex;justify-content:space-between;align-items:center;padding:0 0 0 10px}.menu-option:hover{background-color:rgba(75,158,252,.384);border:none;color:#000;font-size:1.5em;cursor:pointer}.note-to-play{width:20px;height:20px;background-color:#000;border-radius:50%;pointer-events:none}.menu_option_child{background-color:#fff;position:relative;z-index:1000;padding:4px 16px;width:80px;transition:background-color .2s ease}.menu_option_child:hover{background-color:rgba(75,158,252,.384);border:none;color:#000;cursor:pointer}.ReactPiano__Keyboard{position:relative;display:flex}.ReactPiano__Key{display:flex}.ReactPiano__Key--accidental{background:#555;border:1px solid #fff;border-top-color:transparent;border-radius:0 0 4px 4px;cursor:pointer;height:66%;z-index:1;position:absolute;top:0}.ReactPiano__Key--natural{background:#f6f5f3;border:1px solid #888;border-radius:0 0 6px 6px;cursor:pointer;z-index:0;flex:1 1;margin-right:1px}.ReactPiano__Key--natural:last-child{margin-right:0}.ReactPiano__Key--active{background:#3ac8da}.ReactPiano__Key--active.ReactPiano__Key--accidental{border:1px solid #fff;border-top-color:#3ac8da;height:65%}.ReactPiano__Key--active.ReactPiano__Key--natural{border:1px solid #3ac8da;height:98%}.ReactPiano__Key--disabled.ReactPiano__Key--accidental{background:#ddd;border:1px solid #999}.ReactPiano__Key--disabled.ReactPiano__Key--natural{background:#eee;border:1px solid #aaa}.ReactPiano__NoteLabelContainer{flex:1 1;align-self:flex-end}.ReactPiano__NoteLabel{font-size:12px;text-align:center;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ReactPiano__NoteLabel--accidental{color:#f8e8d5;margin-bottom:3px}.ReactPiano__NoteLabel--natural{color:#888;margin-bottom:3px}.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active{color:#f8e8d5}.Piano{position:relative;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.1)}.ReactPiano__Keyboard{height:100%}.ReactPiano__Key--accidental{color:#fff}.ReactPiano__NoteLabelContainer{display:flex;align-items:flex-end;height:100%}.ReactPiano__Key--active{border:1px solid #fff!important}.ReactPiano__Key--active-left{background:rgba(32,148,226,.8);border:1px solid rgba(32,148,226,.9);border-radius:0 0 3px 3px}.ReactPiano__Key--active-left,.ReactPiano__Key--active-right{display:flex;align-items:flex-end;color:#fff;height:100%;width:100%}.ReactPiano__Key--active-right{background:rgba(240,78,78,.9);border:1px solid rgba(240,78,78,.9);border-radius:0 0 6px 6px}#fallingNote,.note-display{position:absolute;top:0}#fallingNote{pointer-events:none;z-index:100;left:0}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background:#fff;padding:20px;border-radius:8px;width:500px;position:relative}.option{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;margin-left:10px}.close-button{position:absolute;top:10px;right:10px;cursor:pointer;font-size:24px}.confirm-button{padding:10px 20px;background-color:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px}.confirm-button:hover{background-color:#45a049}.modal-actions{margin-top:20px;text-align:center}.note-range{margin-left:10px}.switch{position:relative;display:inline-block;width:48px;height:18px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:17px}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:13px;width:13px;top:2px;left:4px;bottom:4px;background-color:#fff;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translateX(26px)}.status{margin-top:10px}.playpause-button .pause-icon{display:none}.playpause-button.playing .pause-icon{display:block}.playpause-button.playing .play-icon{display:none}