#pianoContainer{width:100%;height:200px;background-color:#000}#keyboard{width:100%;height:200px;position:absolute;bottom:0;left:0;border:solid #212224;border-width:.5px .5px 1px}#keyboard p{font-family:Barlow Semi Condensed,sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#keyboard .key{height:calc(100% - 2px);top:1px;border:1px solid #212224;position:absolute;left:0;top:0;width:100%;height:100%}#keyboard .key.white{z-index:0;text-align:center;color:#939aa0;background-color:#fff}#keyboard .key.white>.note-name{position:absolute;top:160px;width:100%}#keyboard .key.white>.keyStr{position:absolute;top:180px;width:100%}#keyboard .key.white:hover{background-color:#f0f0f0}#keyboard .key.white:active{background-color:#ffeaa7}#keyboard .key.black{z-index:1;height:50%;text-align:center;color:#d3d3d3;box-shadow:inset 10px 10px 100px rgba(132,189,245,.98);background-image:linear-gradient(0deg,#575960,#2e2d31);width:100%;border-color:#212224;border-style:solid;border-width:1px 2px 8px}#keyboard .key.black.highlight{background-image:linear-gradient(0deg,#ffeaa7 50%,#fdcb6e)}#keyboard .key.black.highlight-root{background-image:linear-gradient(0deg,#848d90 50%,#65696c)}#keyboard .key.black.highlight-root:hover{background-color:#4c5053}#keyboard .key.black>.keyStr{position:absolute;width:100%;top:30px}#keyboard .key.black:hover{background-image:none;background-color:#596275}#keyboard .key.black:active{background-color:grey}#keyboard .key.highlight{background-image:none;background-color:#ffeaa7;box-shadow:inset 0 3px 20px #fdcb6e}#keyboard .key.highlight-root{background-image:none;background-color:#dfe6e9}#keyboard .key.highlight-root:hover{background:#ccd3d6}#keyboard .key.highlight:hover{background-color:#fdcb6e}#mask{height:100%;width:100%;position:absolute;top:0;left:0;background-color:#ebecef;z-index:999}#progress{min-width:300px;width:40%;height:30px;margin:auto;z-index:1000;border:2px solid #fff}#progress .progress-bar{background-image:linear-gradient(120deg,#e0c3fc,#8ec5fc)}#resetBtn{color:#6c757d}#resetBtn:hover{color:#dc3445}#resetBtn.disabled{color:#939aa0}#downloadBtn{color:#6c757d}#downloadBtn:hover{color:#8ec5fc}#downloadBtn.disabled{color:#939aa0}#copyBtn{color:#6c757d}#copyBtn:hover{color:#8ec5fc}#copyBtn.disabled{color:#939aa0}#playBtn{border-radius:50%}#playBtn.active{border:0}#playBtn.active,#playBtn:hover{background:#8ec5fc}.btn-chord{position:relative;margin-left:10px;margin-right:10px;margin-bottom:4px;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.btn-chord:hover .btn-chord-copy,.btn-chord:hover .btn-chord-delete{display:block}.btn-chord .disable{-webkit-animation:none!important;-moz-animation:none!important;-o-animation:none!important;-ms-animation:none!important;animation:none!important}.btn-chord .button-chord-name{background-color:#fff;border-radius:50%;color:#000;width:140px;height:140px;text-align:center;text-decoration:none;font-size:40px;position:relative;margin:5px}.btn-chord .button-chord-name:hover{background:#f8f9fa}.btn-chord .button-chord-name div{font-size:33px}.btn-chord .button-chord-name div,.btn-chord .button-chord-name i{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn-chord .button-chord-name i{font-size:50px;color:#939aa0}.btn-chord .btn-chord-delete{background:#6c757c;width:30px;height:30px;margin:12px;border-radius:50%;text-align:center;display:none;position:absolute;top:0;left:0}.btn-chord .btn-chord-delete:hover{background:#dc3445}.btn-chord .btn-chord-delete i{color:#f8f9fa;vertical-align:middle}.btn-chord .btn-chord-copy{background:#6c757c;width:30px;height:30px;margin:12px;border-radius:50%;text-align:center;display:none;position:absolute;right:0;bottom:0}.btn-chord .btn-chord-copy:hover{background:#5a628d}.btn-chord .btn-chord-copy i{color:#f8f9fa;vertical-align:middle;font-size:18px}.active .button-chord-name{color:#fff;background-image:linear-gradient(120deg,#e0c3fc,#8ec5fc)}.active .button-chord-name:hover{background-image:linear-gradient(120deg,#d9bef5,#84bdf5)}.active .btn-chord-copy,.active .btn-chord-delete{display:block}.active .animated{animation:jump .6s ease infinite alternate}@keyframes jump{0%{transform:scale(1);box-shadow:0 1px 2px rgba(0,0,0,.15)}to{transform:scale(1.03);box-shadow:0 4px 20px rgba(0,0,0,.1)}}.dropdown-item{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.dropdown-item:active{background-color:#8ec5fc}.container-fluid{margin-right:auto;margin-left:auto;max-width:1400px}.no-scroll{margin:0;height:100%;overflow:hidden}#helpBtn:hover{color:#f8f9fa}
/*# sourceMappingURL=style.1a64aaa5.css.map */