.hide-notes{color:transparent!important}.hidden{display:none}.btn-group-piano{display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;overflow-x:auto}.btn-group-piano button:focus{outline:0}.btn-group-piano button{font-size:12px;background:#f8f8f8;padding:7px 14px;border-radius:4px;border:1px solid #eee;color:#000;-webkit-transition:.25s ease false;-moz-transition:.25s ease false false;-o-transition:.25s ease false false;transition:.25s ease;cursor:pointer;white-space:nowrap;margin:0;margin-right:8px;margin-top:14px;margin-bottom:15px}.btn-group-piano button:hover{border-color:#dadada;box-shadow:0 5px 10px rgba(0,0,0,.2)}.btn-group-piano button:active{background-color:#e4e4e4;border-color:#dadada;box-shadow:0 5px 10px rgba(0,0,0,.2)}.btn-group-piano button.active{background-color:#e4e4e4;border-color:#dadada}.btn-group-piano button.active:active{background-color:#e0e0e0}.piano{text-align:center;margin-top:.5rem;display:flex;width:100%;overflow:hidden;height:200px}.piano-accidental{line-height:13px}.key{display:inline-flex;flex-grow:1;position:relative;justify-content:center;cursor:pointer}.key span{align-items:flex-start}.key>span{display:flex;justify-content:flex-end;align-items:center;flex-direction:column}.key>span i{display:flex;align-items:center;justify-content:center;font-style:normal;font-variant:normal;margin-bottom:12px;width:20px;height:20px;border-radius:10px}.key .white-key{background:#fff;border-top:1px solid rgba(32,32,32,.2);border-right:5px solid rgba(32,32,32,.3);border-bottom:1px solid rgba(32,32,32,.3);border-radius:0 0 5px 5px;box-shadow:0 5px 1px rgba(32,32,32,.2);margin:0 -2px;width:100%;height:190px;transition:background-color 50ms ease,box-shadow 50ms ease}.key .white-key.active{background:#d8d8d8;position:relative;top:5px;box-shadow:0 0 0 rgba(32,32,32,0);transition:background-color 50ms ease,box-shadow 50ms ease}.key .white-key .active .black-key{top:-10px}.key .white-key .marked{background-color:#72ac51;color:transparent;box-shadow:inset -1px -3px 4px rgba(32,32,32,.3)}.key .black-key{content:"";box-shadow:inset 0 -1px 2px rgba(255,255,255,.4),0 2px 3px rgba(0,0,0,.4);background:-webkit-linear-gradient(-20deg,#222,#000,#222);background:-moz-linear-gradient(-20deg,#222,#000,#222);background:-o-linear-gradient(-20deg,#222,#000,#222);background:linear-gradient(-20deg,#222,#000,#222);background:#111;transition:background-color 50ms ease,box-shadow 50ms ease;box-shadow:0 5px 1px rgba(32,32,32,.2);border-width:1px;border-radius:0 0 5px 5px;border-style:solid;border-color:#666 #222 #111 #555;height:110px;position:absolute;top:0;right:-40%;width:80%;z-index:10}.key .black-key.active{box-shadow:0 1px 1px rgba(32,32,32,.1);border-bottom-width:3px;height:110px;top:5px}.key .black-key i{display:block;color:#fff;font-size:13px;font-weight:600;line-height:.8rem;text-align:center;position:relative}.key .black-key i>span{display:inline-flex;flex-direction:row;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.key .black-key i>span:first-child{margin-top:-4px}.key .black-key i>span:last-child{padding-top:10px}.key .black-key .marked{background-color:#72ac51;color:transparent;box-shadow:inset 3px 3px 4px rgba(255,255,255,.3)}.key:first-child .white-key{border-left:none;border-radius:0 0 5px 0}.key:last-child .white-key{border-right:transparent;border-radius:0 0 0 5px}.key:first-child .white-key.active,.key:last-child .white-key.active{box-shadow:0 0 0 rgba(32,32,32,0)}ul.piano{margin:0!important;list-style-type:none!important}