html{box-sizing:border-box;background:-webkit-gradient(linear,left top,left bottom,from(#f8e5cd),to(#ab8c65));background:linear-gradient(#f8e5cd,#ab8c65);background-attachment:fixed}body{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;margin:0;padding:0}.header{font-size:22px;font-weight:700;background-color:#826644}.header,.header-secondary{text-align:center;margin:0;padding:5px;color:#fffff2}.header-secondary{font-size:20px;background-color:#2e4553}.row{padding:10px}.btn{display:inline-block;padding:6px 14px;margin-bottom:0;font-size:16px;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;border:1px solid transparent;border-radius:4px}.btn-primary{color:#fff;background-color:#ab8c65;border-color:#6f4f27}.btn-primary:hover{background-color:#6f4f27}.btn-secondary{color:#fff;background-color:#435d6d;border-color:#1c3747}.btn-secondary:hover{background-color:#1c3747}.blue{background-color:#2196f3}.yellow{background-color:#ffeb3b}.orange{background-color:#ff9800}.indigo{background-color:#3f51b5}.teal{background-color:#009688}.khaki{background-color:khaki}.light-gray{background-color:#f1f1f1}#container{width:1128px;margin:20px auto 0}#side-content{float:left;width:328px}#notation-component{float:right;width:800px;height:392px;background:#fff;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);margin:0 0 20px}#keyboard-component{clear:both;width:1128px;margin:0}#appDetails{text-align:right;color:rgba(0,0,0,.8);font-size:14px;margin:0;padding:10px 5px 0 0}#appDetails a{color:rgba(0,0,0,.6)}#appDetails a:hover{text-decoration:none}.panel{height:186px;padding:0;margin:0 20px 20px 0;background:#fffff2;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.selected{background-color:#513410;font-weight:700}.btn{margin-right:10px}.note-card{display:inline-block;text-align:center;margin:20px 10px;padding:0;width:90px;background-color:#fffff2;color:#0d2534;border:2px solid #435d6d;box-shadow:0 4px 8px 0 rgba(0,0,0,.2);-webkit-transition:.3s;transition:.3s;cursor:pointer}.note-card:hover{color:#fffff2;background-color:#617986;box-shadow:0 8px 16px 0 rgba(0,0,0,.2)}.note-card-or{display:inline-block;text-align:center;font-size:22px;color:#435d6d;width:30px;padding-top:50px;vertical-align:top}.name{display:block;height:60px;font-size:40px;font-weight:700;padding-top:8px}.octave{display:block;font-size:14px;padding:4px}.content{text-align:center;padding:10px}.dropdown{padding:5px;margin:0 0 0 10px;width:100px;font-size:16px}.score-label{width:100px;color:#fffff2;background-color:#617986}.score,.score-label{display:inline-block;font-size:18px;padding:4px;margin:0;border:2px solid #617986}.score{width:35px;color:#1c3747;background-color:#fff}.correct{color:#fff;background-color:#4caf50;border:2px solid #4caf50}.incorrect{color:#fff;border:2px solid #f44336}.incorrect,.red{background-color:#f44336}.green{background-color:#4caf50}#notation{background-color:#fff;margin:0 auto;width:800px}[id^=rest]{display:none}g.note{-webkit-transition:fill .3s;transition:fill .3s}g.note:hover{fill:#ff9800;cursor:pointer}#p-wrapper>*{margin:0;padding:0;list-style:none}#p-wrapper{margin-top:20px;background:#000;background:linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);width:1114px;position:relative;left:0;padding-left:10px;padding-top:5px;box-shadow:0 2px 0 #666,0 3px 0 #555,0 4px 0 #444,0 6px 6px #000,inset 0 -1px 1px hsla(0,0%,100%,.5),inset 0 -4px 5px #000;border:2px solid #333;border-radius:0 0 5px 5px;-webkit-animation:taufik 2s;animation:taufik 2s}ul#piano{display:block;width:100%;height:240px;border-top:2px solid #222}ul#piano li{list-style:none;float:left;display:inline;background:#aaa;width:38px;position:relative;cursor:pointer}ul#piano li a,ul#piano li div.anchor{display:block;height:220px;background:#fff;background:linear-gradient(-30deg,#f5f5f5,#fff);border:1px solid #ccc;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #fff,inset 1px 0 0 #fff,inset -1px 0 0 #fff,0 4px 3px rgba(0,0,0,.7);border-radius:0 0 3px 3px}ul#piano li.middlec a,ul#piano li.middlec div.anchor{background:#ddd}ul#piano li a:active,ul#piano li div.anchor:active{box-shadow:0 2px 2px rgba(0,0,0,.4);position:relative;top:2px;height:216px}ul#piano li a:active:before,ul#piano li div.anchor:active:before{content:"";width:0;height:0;border-color:transparent transparent transparent rgba(0,0,0,.1);border-style:solid;border-width:216px 5px 0;position:absolute;left:0;top:0}ul#piano li a:active:after,ul#piano li div.anchor:active:after{content:"";width:0;height:0;border-color:transparent rgba(0,0,0,.1) transparent transparent;border-style:solid;border-width:216px 5px 0;position:absolute;right:0;top:0}ul#piano li span{position:absolute;top:0;left:-12px;width:20px;height:120px;background:#333;background:linear-gradient(-20deg,#333,#000,#333);z-index:10;border-color:#666 #222 #111 #555;border-style:solid;border-width:1px 2px 7px;box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);border-radius:0 0 2px 2px}ul#piano li span:active{border-bottom-width:2px;height:123px;box-shadow:inset 0 -1px 1px hsla(0,0%,100%,.4),0 1px 0 rgba(0,0,0,.8),0 2px 2px rgba(0,0,0,.4),0 -1px 0 #000}@-webkit-keyframes taufik{0%{opacity:0}to{opacity:1}}@keyframes taufik{0%{opacity:0}to{opacity:1}}
/*# sourceMappingURL=main.b854c55f.chunk.css.map */