.pianoContainer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.piano-outer-container{position:fixed;left:0;right:0;bottom:0;height:auto;background-color:transparent;z-index:1000;transition:all .5s ease-in-out;transform:translateY(150%)}.piano-outer-container.open{transform:translateY(0)}.piano-scroll-wrapper{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}#piano-container{height:100%}.blackKey{background:#000;z-index:2}.blackKey p{color:#fff;text-align:center}.whiteKey{background:#fff;z-index:1}.whiteKey p{color:#000;text-align:center;position:absolute;left:0;right:0;bottom:0}.blackKey,.whiteKey{cursor:pointer;position:relative;border:1px solid black;float:left;border-radius:2;border-top:5px solid black;transition:background-color .25s}.whiteKey:before,.blackKey:before{content:attr(shortcut);text-align:center;width:100%;position:absolute;color:#737373;font-size:13px;top:50%}.blackKey:hover,.whiteKey:hover{background-color:#c7c7c7}.blackKey p,.whiteKey p{font-family:Arial,Helvetica,sans-serif}.blackKey:active,.whiteKey:active,.pianoContainer.filled .blackKey,.pianoContainer.filled .whiteKey{background-color:#c7c7c7;cursor:default}.middleC{border-bottom:4px solid red}.pianoContainer .blackKey.selected,.pianoContainer .whiteKey.selected{background-color:#3097e0;cursor:pointer}.pianoContainer .blackKey.correct,.pianoContainer .whiteKey.correct{background-color:#ffed35}.pianoContainer .blackKey.incorrect,.pianoContainer .whiteKey.incorrect{background-color:#e03030}.pianoContainer .blackKey.incorrect.correct,.pianoContainer .whiteKey.incorrect.correct{background-color:#30e06e}.blackKey.selected:before,.whiteKey.selected:before{content:attr(order);color:#fff;text-align:center;display:block}.piano-toolbar{position:absolute;left:0;right:0;top:0;opacity:.7}#pianoPlacement{width:100%;overflow-x:scroll}#pianoPlacement .pianoHideBtn{position:absolute;top:-31px;right:10px;width:31px;height:31px;background-color:#fff;background:url(/theme/berkleemusic3/pix/piano.png);cursor:pointer}#pianoPlacement .pianoOctaveDown,#pianoPlacement .pianoOctaveUp,#pianoPlacement #pianoHelp,#pianoPlacement #pianoHelpDialog{position:absolute;top:-31px;left:300px;width:31px;padding:5px 0;font-size:18px;background-color:#fff;color:#222;cursor:pointer;text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}#pianoPlacement #pianoHelp{left:100px;background-color:red}#pianoPlacement #pianoHelp:active{background-color:#000}#pianoPlacement #pianoHelpDialog{left:100px;top:-160px;width:300px;height:100px;padding:10px;display:none;font-size:14px;text-align:left;line-height:170%}div.inactive{cursor:default;display:none;opacity:.5}div.inactive:hover{background-color:inherit!important;color:inherit!important}[class^=piano-note-]{padding:1px 3px 2px 1px;color:var(--blue);cursor:pointer;border-radius:.25em;background-color:var(--gray-xlight)}[class^=piano-note-]:hover{filter:brightness(.8)}[class^=piano-note-]:before{content:"";font-family:"Font Awesome 5 Pro";font-weight:900;font-size:1em;vertical-align:middle;padding-left:2px;margin-right:1px}#pianoHelpDialog{display:none;padding:10px;font-size:1.15rem;text-align:left;line-height:170%;width:100%;left:0;right:0;bottom:100px;background:#fff;color:#222;padding:1rem;height:auto;text-align:center}.piano-close-button:hover{background-color:#e44a4a}.piano-close-button:focus{outline:none;box-shadow:0 0 0 2px #f4433680}.piano-octave-controls{position:absolute;top:-58px;left:20px;display:flex;justify-content:center;align-items:center;z-index:1001}.pianoOctaveDown,.pianoOctaveUp{width:40px;height:40px;font-size:18px;background-color:#000;color:#fff;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center}.pianoOctaveDown{border-radius:20px 0 0 20px}.pianoOctaveDown:before{content:"OCTAVES";display:flex;align-items:center;justify-content:center;position:absolute;font-weight:800;top:0;left:35px;height:40px;font-size:12px;background:#000;padding:12px 9px 9px;pointer-events:none;border-left:1px solid #FFF}.pianoOctaveUp{left:113px;position:absolute;border-radius:0 30px 30px 0;height:40px;display:flex;align-items:center;justify-content:center}.pianoHelp{width:40px;height:40px;font-size:18px;background-color:#000;color:#fff;cursor:pointer;border:none;border-radius:50%;margin-left:10px;display:flex;align-items:center;justify-content:center;position:absolute;left:160px}.piano-close-button{position:absolute;top:-58px;right:20px;width:40px;height:40px;border-radius:50%;background-color:#222;color:#fff;border:none;font-size:20px;cursor:pointer;z-index:1003;display:flex;align-items:center;justify-content:center;padding:0}.pianoHelp:hover,.piano-close-button:hover,.pianoOctaveDown:hover,.pianoOctaveUp:hover{background-color:#888;color:#fff}