:root{--main-bg-color:white;--main-hdr-color:#eff7f6;--hdr-text-color:#30988a;--card-hdr-color:#4bbdac;--card-bg-color:cornsilk;--sidebar-color:#eff7f6;--sidebar-selected-color:#4bbdac;--sidebar-expand-list-color:#92d7cd;--sidebar-text-color:#30988a;--primary-color:#30988a;--primary-hover-color:#59ada1;--primary-active-color:#247268;--success-color:#55ce55;--success-hover-color:#94d7ac;--success-active-color:#3a8e57;--warning-color:#F7B733;--warning-hover-color:#fbe066;--warning-active-color:#ae9217;--danger-color:#fd6e48;--danger-hover-color:#fd8b6d;--danger-active-color:#be5336;--banner-color:#fc4a1a;--fresh-green-color:#4bbdac;--green-color:#55ce55;--red-color:#fc4a1a;--blue-color:#20a8d8}@font-face{font-family:Din;src:url(../fonts/din/Din-Light.ttf) format('truetype');src:url(../fonts/din/Din-Bold.ttf) format('truetype');src:url(../fonts/din/Din-Medium.ttf) format('truetype');src:url(../fonts/din/Din-Regular.ttf) format('truetype');src:url(../fonts/din/Din-RegularAlternate.ttf) format('truetype');src:url(../fonts/din/Din-BlackAlternate.ttf) format('truetype');font-weight:400}html{font-family:Din}.bg-green{background-color:var(--green-color)}.bg-red{background-color:var(--red-color)}.bg-blue{background-color:var(--blue-color)}.app{background-color:var(--main-bg-color)}.app-header.navbar{background-color:var(--main-hdr-color);color:var(--hdr-text-color)}.app-header.navbar .navbar-title{display:inline-block;padding:1rem 1rem;text-align:center;margin:0;color:var(--hdr-text-color);background-position:center center}.app-header.navbar .navbar-brand{display:inline-block;width:155px;height:55px;padding:1rem 1rem;margin-right:0;background-color:#fff;background-image:url(../img/logo.png);background-repeat:no-repeat;background-position:center center;background-size:70px auto;border-bottom:0}.sidebar{background:var(--sidebar-color)}.sidebar .nav .nav-item .nav-link{color:var(--primary-color);font-weight:700}.sidebar .nav .nav-item .nav-link i{color:var(--primary-color);font-weight:400}.sidebar .nav .nav-item.nav-dropdown.open>ol,.sidebar .nav .nav-item.nav-dropdown.open>ul{max-height:inherit}.sidebar .nav .nav-item ul{overflow-y:auto;color:#eff7f6}.sidebar .nav .nav-item ul li{color:#eff7f6}.sidebar .sidebar-nav::-webkit-scrollbar-track{background-color:#fff}.sidebar .nav .divider{height:1px;background-color:#fff}.navbar .sidebar .nav .nav-item .dropdown-toggle:hover,.sidebar .nav .nav-item .nav-link:hover,.sidebar .nav .nav-item .navbar .dropdown-toggle:hover{color:#fff!important;background:var(--green-color)}.navbar .sidebar .nav .nav-item .dropdown-toggle:hover i,.sidebar .nav .nav-item .navbar .dropdown-toggle:hover i{color:#fff!important}.navbar .sidebar .nav .nav-item .active.dropdown-toggle,.sidebar .nav .nav-item .nav-link.active,.sidebar .nav .nav-item .navbar .active.dropdown-toggle{color:#fff;background:var(--sidebar-selected-color)}.navbar .sidebar .nav .nav-item .active.dropdown-toggle i,.sidebar .nav .nav-item .nav-link.active i,.sidebar .nav .nav-item .navbar .active.dropdown-toggle i{color:#fff}.navbar .sidebar .nav .nav-item.nav-dropdown.open .dropdown-toggle,.sidebar .nav .nav-item.nav-dropdown.open .nav-link,.sidebar .nav .nav-item.nav-dropdown.open .navbar .dropdown-toggle{background-color:var(--sidebar-expand-list-color);color:#fff;border-left:0!important}.navbar .sidebar .nav .nav-item.nav-dropdown.open .active.dropdown-toggle,.sidebar .nav .nav-item.nav-dropdown.open .nav-link.active,.sidebar .nav .nav-item.nav-dropdown.open .navbar .active.dropdown-toggle{background:var(--sidebar-selected-color)}.card{padding:0;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.card-color{background-color:var(--card-bg-color);border-color:var(--blue-color)}.card-primary .card-footer,.card-primary .card-header{background-color:transparent}.card-disabled{opacity:.5}.card.hoverable:hover{background-color:#00f;color:#fff;cursor:pointer}.card-header{background-color:var(--card-hdr-color);color:#fff;padding:.5rem .75rem}.card-header.subheader{background-color:#0ff}.card-block-wout-padding-with-bg-color{flex:1 1 auto;background-color:var(--card-bg-color)}.card-block-wout-padding{flex:1 1 auto}.card-block-custom{padding-top:0;padding-right:5px;padding-bottom:0;padding-left:5px;vertical-align:middle;text-align:center}.card-block-custom-with-bg-color{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;vertical-align:middle;text-align:center;background-color:var(--card-bg-color)}.card-primary{background-color:var(--primary-color)}.card-success{background-color:var(--success-color)}.card-warning{background-color:var(--warning-color)}.card-danger{background-color:var(--danger-color)}.banner-color{background-color:var(--red-color);border-color:var(--blue-color)}.nav-tabs{border-bottom:0 solid #ddd}.nav-tabs .nav-item .nav-link{background-color:var(--card-bg-color);color:var(--primary-color);border:2px solid var(--danger-hover-color)}.nav-tabs .nav-item .nav-link:hover{background-color:#fffdf5}.nav-tabs .nav-item .nav-link.active{background-color:var(--danger-hover-color);color:#fffdf5;border:0 solid var(--danger-hover-color);border-bottom:4px solid var(--primary-color);box-shadow:none}.tab-content{background-color:#fff;border:0 solid #dee2e6;border-top:transparent}.tab-content .tab-pane{background-color:#fff;color:#000;min-height:200px;height:auto}.controls{padding-top:10px;padding-right:5px;padding-bottom:10px;padding-left:5px;background-color:#fff;vertical-align:middle;text-align:center;border-bottom:2px solid #cfd8dc;border-left:2px solid #cfd8dc;border-right:2px solid #cfd8dc}.sheet-music{position:relative;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;background-color:var(--card-bg-color);vertical-align:middle;text-align:center}.sheet-music-page{height:80%;width:80%;vertical-align:middle;text-align:center;background-color:#fff;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);z-index:0}.overlay-sheet-music-page{position:absolute;height:80%;width:80%;vertical-align:middle;text-align:center;margin-top:0;margin-left:0;z-index:1}.measure-sheet{height:80%;width:100%;margin-top:5%;margin-right:0;margin-left:0;object-fit:contain;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;background-color:#fff;vertical-align:bottom;text-align:center;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.dnd-measure-sheet{height:50%;width:50%;margin:0;padding:3%;object-fit:contain;background-color:#fff;vertical-align:bottom;text-align:center;cursor:pointer;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.dnd-measure-sheet:hover{background-color:var(--red-color)}.piano-wrapper{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;background-color:#eceff1;vertical-align:middle;text-align:center}.volume-slider-vertical{padding-top:60px;padding-right:2px;padding-bottom:0;padding-left:2px;vertical-align:middle;height:180px}.btn-separator:after{content:' ';display:block;float:left;background:#adadad;margin:0 10px;height:34px;width:1px}.media-controls{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;vertical-align:middle;text-align:center;background-color:#fff;border-bottom:2px solid #cfd8dc;border-right:1px solid #cfd8dc;border-left:1px solid #cfd8dc}.score{padding-top:10px;padding-right:2px;padding-bottom:10px;padding-left:2px;vertical-align:middle;text-align:center}.measure-list{padding-top:10px;padding-right:5px;padding-bottom:10px;padding-left:5px;background-color:var(--card-bg-color);vertical-align:middle;text-align:center;border-bottom:2px solid #cfd8dc;border-right:1px solid #cfd8dc;overflow-y:scroll;height:80vh}.fa-disabled{opacity:.3;cursor:not-allowed}body{padding:0}input#seekslider{width:150px}input#volumeslider{width:70px}input[type=range]{-webkit-appearance:none;border:1px;width:100px;vertical-align:middle}input[type=range]::-webkit-slider-runnable-track{width:300px;height:1px;background:#ddd;border:none;border-radius:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:10px;width:10px;border-radius:50%;background:#daa520;margin-top:-5px}input[type=range]:focus{outline:0}input[type=range]:focus::-webkit-slider-runnable-track{background:#ccc}input[type=range]::-moz-range-track{width:300px;height:1px;background:#ddd;border:none;border-radius:3px}input[type=range]::-moz-range-thumb{border:none;height:10px;width:10px;border-radius:50%;background:#daa520}input[type=range]:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}input[type=range]::-ms-track{width:300px;height:1px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}input[type=range]::-ms-fill-lower{background:#777;border-radius:10px}input[type=range]::-ms-fill-upper{background:#ddd;border-radius:10px}input[type=range]::-ms-thumb{border:none;height:10px;width:10px;border-radius:50%;background:#daa520}input[type=range]:focus::-ms-fill-lower{background:#888}input[type=range]:focus::-ms-fill-upper{background:#ccc}.error-indicator{pointer-events:none;margin-bottom:2px}.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 4px rgba(77,189,116,.5)}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 4px rgba(248,203,0,.5)}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 4px rgba(248,108,107,.5)}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 4px rgba(32,168,216,.5)}.piano{background-color:var(--primary-color);color:#000;margin-top:2%;margin-left:2%;margin-right:2%;margin-bottom:0;position:relative;width:100%;padding:0 0 0;display:block;box-shadow:0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.pianoHeader{width:100%;margin:.5%;position:relative;float:left;display:block}.pianoBody{width:100%;bottom:-1%;margin-top:0;margin-left:1%;position:relative;float:left;display:block}.octave{position:relative;width:100%;height:100%;float:left}.key{pointer-events:none}.key-clickable{cursor:pointer}.white{float:left;width:2.97%;padding-bottom:17.8%;background-color:#f4f4f4;border:1px solid #626262;position:relative;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -2px .3px 0 #838383 none,0 -30px 20px 5px #eee inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -2px .3px 0 #838383 inset,0 -30px 20px 5px #eee inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -2px .3px 0 #838383 inset,0 -30px 20px 5px #eee inset}.white-wide{width:6.53%}.white:before{content:attr(syllable-attr);position:absolute;bottom:-25%;left:calc(50% - .6em);font-weight:700;color:#32cd32;font-size:.9em;z-index:200}.white:after{content:attr(keyname-attr);position:absolute;bottom:0;left:calc(50% - .35em);font-weight:700;color:var(--danger-color);font-size:1em}#reference_piano div.white:active,div.white.pressed{border:1px solid #343434;background-color:var(--blue-color);background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -5px 20px -3px #000 inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -5px 20px -3px #838383 inset,0 -3px 20px -3px #000 inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -5px 20px -3px #000 inset}#actual_piano div.white:active,div.white.pressed_green{border:1px solid #343434;background-color:var(--green-color);background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -5px 20px -3px #000 inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -5px 20px -3px #838383 inset,0 -3px 20px -3px #000 inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -5px 20px -3px #000 inset}#actual_piano div.white.pressed_red{border:1px solid #343434;background-color:var(--red-color);background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -5px 20px -3px #000 inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -5px 20px -3px #838383 inset,0 -3px 20px -3px #000 inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -5px 20px -3px #000 inset}#actual_piano div.white.pressed_grey{border:1px solid #343434;background-color:grey;background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -5px 20px -3px #000 inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -5px 20px -3px #838383 inset,0 -3px 20px -3px #000 inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -5px 20px -3px #000 inset}#actual_piano div.white-wide.pressed_green{border:1px solid #343434;background-color:var(--green-color);background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -10px 40px -6px #000 inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -10px 40px 6px #838383 inset,0 -6px 40px -6px #000 inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -10px 40px -6px #000 inset}#actual_piano div.white-wide.pressed_red{border:1px solid #343434;background-color:var(--red-color);background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -10px 40px -6px #000 inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -10px 40px 6px #838383 inset,0 -6px 40px -6px #000 inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -10px 40px -6px #000 inset}.black{float:left;width:1.7%;padding-bottom:11.86%;background-color:#000;border-bottom:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;position:relative;z-index:100;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;border-top:0;-moz-box-shadow:0 -1px 2px 2px #303030 inset,0 -3px #f7f7f7 inset;-webkit-box-shadow:0 -1px 2px 2px #303030 inset,0 -3px #f7f7f7 inset;box-shadow:0 -1px 2px 2px #303030 inset,0 -3px #f7f7f7 inset}.black-wide{width:3.4%}.black-wide-half{width:1.7%}.black-wide:before{left:calc(50% - 5em);font-size:.9em}.black:before{content:attr(syllable-attr);position:absolute;bottom:-87%;left:calc(50% - .6em);font-weight:700;color:#32cd32;font-size:.9em;z-index:200}#reference_piano div.black:active,div.black.pressed{border:1px solid #000;border-top:1px solid #626262;background-color:var(--blue-color);-moz-box-shadow:0 0 3px 4px var(--blue-color) inset,0 -3px #000 inset;-webkit-box-shadow:0 0 3px 4px var(--blue-color) inset,0 -3px #000 inset;box-shadow:0 0 3px 4px var(--blue-color) inset,0 -3px #000 inset}#actual_piano div.black:active,div.black.pressed_green{border:1px solid #000;border-top:1px solid #626262;background-color:var(--green-color);-moz-box-shadow:0 0 3px 4px var(--green-color) inset,0 -3px #000 inset;-webkit-box-shadow:0 0 3px 4px var(--green-color) inset,0 -3px #000 inset;box-shadow:0 0 3px 4px var(--green-color) inset,0 -3px #000 inset}#actual_piano div.black.pressed_red{border:1px solid #000;border-top:1px solid #626262;background-color:var(--red-color);-moz-box-shadow:0 0 3px 4px var(--red-color) inset,0 -3px #000 inset;-webkit-box-shadow:0 0 3px 4px var(--red-color) inset,0 -3px #000 inset;box-shadow:0 0 3px 4px var(--red-color) inset,0 -3px #000 inset}#actual_piano div.black.pressed_grey{border:1px solid #000;border-top:1px solid #626262;background-color:grey;-moz-box-shadow:0 0 3px 4px grey inset,0 -3px #000 inset;-webkit-box-shadow:0 0 3px 4px grey inset,0 -3px #000 inset;box-shadow:0 0 3px 4px grey inset,0 -3px #000 inset}#actual_piano div.black-wide.pressed_green{border:1px solid #000;border-top:1px solid #626262;background-color:var(--green-color);background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -20px 80px -12px #000 inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -20px 80px 12px #838383 inset,0 -12px 80px -12px #000 inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -20px 80px -12px #000 inset}#actual_piano div.black-wide:active,div.black-wide.pressed_red{border:1px solid #000;border-top:1px solid #626262;background-color:var(--red-color);background-image:-webkit-gradient(center bottom ,#fff 90%,#ccc 100%);-webkit-box-shadow:0 -20px 80px -12px #000 inset;background-image:-moz-linear-gradient(center bottom ,#fff 90%,#ccc 100%);-moz-box-shadow:0 -20px 80px 12px #838383 inset,0 -12px 80px -12px #000 inset;background-image:-gradient(center bottom ,#fff 90%,#ccc 100%);box-shadow:0 -20px 80px -12px #000 inset}.solfege_red{border:0;background-color:#ff5050;moz-box-shadow:none;webkit-box-shadow:none;box-shadow:none}.solfege_blue{border:0;background-color:#69f;moz-box-shadow:none;webkit-box-shadow:none;box-shadow:none}.kbkeyname,.keyname{font-size:.8em;font-weight:700;position:absolute;bottom:0;padding:0;margin:0 auto;left:50%;transform:translate(-30%,0)}.white .keyname{color:brown;text-shadow:0 0 0 #7e6d1f;font-size:100%;left:35%}.white .kbkeyname{color:salmon;text-shadow:2px 2px 0 #b31706}.black .keyname{font-size:1.6em;margin:233px 0 0 0;color:gold;text-shadow:1px 1px 0 #7e6d1f}.black .kbkeyname{font-size:1.6em;margin:233px 0 0 0;color:salmon;text-shadow:1px 1px 0 #b31706}div.black div.kbkeyname,div.black div.keyname{margin-left:0}div.flats{position:absolute;top:0;left:0;right:0}div.flats :nth-child(1){margin-left:2.2%}div.flats :nth-child(2){margin-left:4.24%}div.flats :nth-child(3){margin-left:1.26%}div.flats :nth-child(4){margin-left:4.24%}div.flats :nth-child(5){margin-left:1.26%}div.flats :nth-child(6){margin-left:1.26%}div.flats :nth-child(7){margin-left:4.24%}div.flats :nth-child(8){margin-left:1.26%}div.flats :nth-child(9){margin-left:4.24%}div.flats :nth-child(10){margin-left:1.26%}div.flats :nth-child(11){margin-left:1.26%}div.flats :nth-child(12){margin-left:4.24%}div.flats :nth-child(13){margin-left:1.26%}div.flats :nth-child(14){margin-left:4.24%}div.flats :nth-child(15){margin-left:1.26%}div.flats :nth-child(16){margin-left:1.26%}div.flats :nth-child(17){margin-left:4.24%}div.flats :nth-child(18){margin-left:1.26%}div.flats :nth-child(19){margin-left:4.24%}div.flats :nth-child(20){margin-left:1.26%}div.flats :nth-child(21){margin-left:1.26%}div.flats :nth-child(22){margin-left:4.24%}div.flats :nth-child(23){margin-left:1.26%}div.flats-wide{position:absolute;top:0;left:0;right:0}div.flats-wide :nth-child(1){margin-left:4.83%}div.flats-wide :nth-child(2){margin-left:3.13%}div.flats-wide :nth-child(3){margin-left:9.66%}div.flats-wide :nth-child(4){margin-left:3.13%}div.flats-wide :nth-child(5){margin-left:3.13%}div.flats-wide :nth-child(6){margin-left:9.66%}div.flats-wide :nth-child(7){margin-left:3.13%}div.flats-wide :nth-child(8){margin-left:9.66%}div.flats-wide :nth-child(9){margin-left:3.13%}div.flats-wide :nth-child(10){margin-left:3.13%}div.flats-wide :nth-child(11){margin-left:9.66%}.pause-btn{color:var(--green-color);text-decoration:none;vertical-align:middle}.pause-btn:hover{text-decoration:none;color:#409b40}.pause-btn-disabled{color:#d3d3d3;pointer-events:none;opacity:.5;vertical-align:middle;cursor:default}.play-btn{color:var(--green-color);text-decoration:none;vertical-align:middle}.play-btn:hover{text-decoration:none;color:#409b40}.play-btn-disabled{color:#d3d3d3;pointer-events:none;opacity:.5;vertical-align:middle;cursor:default}.record-btn{color:#fc4a1a;text-decoration:none;vertical-align:middle}.record-btn:hover{text-decoration:none;color:#bd3814}.record-btn-disabled{color:#d3d3d3;pointer-events:none;opacity:.5;vertical-align:middle;cursor:default}.stop-btn{color:var(--fresh-green-color);text-decoration:none;vertical-align:middle}.stop-btn:hover{text-decoration:none;color:#409b40}.stop-btn-disabled{color:#d3d3d3;pointer-events:none;opacity:.5;vertical-align:middle;cursor:default}.nonClickable{cursor:not-allowed;pointer-events:none}.full-overlay{position:fixed;display:none;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:200;cursor:pointer}.full-overlay-text{position:absolute;top:50%;left:50%;font-size:12em;color:#fff;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.toolbox{display:flex;position:absolute;flex-direction:column;z-index:2;right:0;padding:10px;vertical-align:middle;text-align:center}.toolbtn{display:inline-block;height:1.75rem;width:1.75rem;font-size:1rem;-moz-border-radius:.5em;border-radius:.4em;background-color:#222;color:#fff;text-align:center;padding:0;margin:.25em;border:1px solid}.toolbtn .fa-stack{height:1.75em;width:1.75em;line-height:1.75em}.toolbtn .fa-stack-1x{height:1.75em;width:1.75em;line-height:1.75em}.footer-fixed{height:20vw;width:100%;position:fixed;bottom:0;right:0;background-color:var(--blue-color);opacity:1;z-index:100;padding-left:5%;padding-right:5%;padding-bottom:10%}.margin-for-touch-piano{margin-bottom:20vw}.carousel,.nav,.pagination,.panel-title a{cursor:pointer}.modal-open{overflow:auto}.modal-backdrop{display:none;position:relative;top:0;right:0;bottom:0;left:0;z-index:0;opacity:.2}.modal-countoff{max-height:calc(100% - 100px);overflow:hidden;position:fixed;text-align:center;top:5%;left:50%;transform:translate(-50%,0);right:auto;bottom:auto;z-index:10}.modal-tempo{max-height:calc(100% - 100px);overflow:hidden;position:fixed;text-align:center;top:0;right:0;left:auto;bottom:auto;z-index:10}.modal-header{align-items:center;text-align:center;padding:1rem 1rem;border-bottom:1px solid #cfd8dc}.modal-title{text-align:center;color:var(--primary-color);line-height:1}.countoff-digit{text-align:center;color:#00f;width:2em;margin:0 auto;font-size:6em}.score-digit{position:relative;width:50%;text-align:right;padding:0;color:var(--green-color);margin:0;font-size:6em;padding:0}.max-score-digit{position:absolute;bottom:10%;left:50%;width:1em;color:var(--primary-color);font-size:4em;padding:0}.score-message{text-align:center;font-size:1.5em}.modal{background-color:rgba(0,0,0,.3);padding:0}.modal.left .modal-dialog,.modal.right .modal-dialog{vertical-align:middle;position:fixed;margin:auto;width:320px;height:auto;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.modal.left .modal-content,.modal.right .modal-content{height:100%;overflow-y:auto}.modal.left .modal-body,.modal.right .modal-body{padding:15px 15px 80px}.modal.left.fade .modal-dialog{left:-320px;-webkit-transition:opacity .3s linear,left .3s ease-out;-moz-transition:opacity .3s linear,left .3s ease-out;-o-transition:opacity .3s linear,left .3s ease-out;transition:opacity .3s linear,left .3s ease-out}.modal.left.fade.in .modal-dialog{left:0}.modal.right .modal-dialog{top:150px;right:0;z-index:10}.modal.right.fade .modal-dialog{top:150px;right:0;z-index:10;-webkit-transition:opacity .3s linear,right .3s ease-out;-moz-transition:opacity .3s linear,right .3s ease-out;-o-transition:opacity .3s linear,right .3s ease-out;transition:opacity .3s linear,right .3s ease-out}.modal.right.fade.in .modal-dialog{right:0;top:150px}.custom-slider.rzslider .rz-bar{background:#fd6e48;height:2px}.custom-slider.rzslider .rz-pointer{width:12px;height:24px;top:auto;bottom:0;background-color:orange;border-top-left-radius:3px;border-top-right-radius:3px}.custom-slider.rzslider .rz-pointer:after{display:none}.custom-slider.rzslider .rz-bubble{bottom:24px;color:#000}.custom-slider.rzslider .rz-limit{font-weight:700;color:#fd6e48}.custom-slider.rzslider .rz-tick{width:4px;height:10px;margin-left:4px;border-radius:0;background:#fd6e48;color:#fd6e48;top:-1px}.custom-slider.rzslider .rz-tick.rz-selected{background:orange}.custom-checkbox{cursor:pointer;-webkit-appearance:none;appearance:none;background:#d3d3d3;border-radius:5px;box-sizing:border-box;position:relative;box-sizing:content-box;width:15px;height:15px;vertical-align:middle;border-width:0;transition:all .3s linear}.custom-checkbox:checked{background-color:#2ecc71}.custom-checkbox:focus{outline:0 none;box-shadow:none}ul[dnd-list]{min-height:48px;padding-left:0;width:100%}ul[dnd-list] .dndDragging{opacity:1}ul[dnd-list] .dndPlaceholder{background-color:#ddd;display:none;min-height:48px}ul[dnd-list] li{background-color:#fff;border:2px solid #ddd;border-top-right-radius:4px;border-top-left-radius:4px;display:inline-block;width:12%;min-height:48px;padding:10px 10px;margin-bottom:0}ul[dnd-list] li.selected{background-color:#dff0d8;color:#3c763d}.panel .panel-body{padding:0}input[type=radio]{margin:0 10px 0 10px}.actionLink:link,.actionLink:visited{padding:4px 6px;text-align:center;display:inline-block;cursor:pointer;color:var(--primary-color)}.actionLink:hover{background-color:#20a8d8;color:#fffdf5}.disabledLink{cursor:not-allowed;opacity:.5;pointer-events:none}.disabledLink:hover{cursor:not-allowed}.progress-bar{padding-right:10px}.btn{border-radius:5px;cursor:pointer}.btn-no-round{border-radius:0}.round{display:inline-block;height:30px;width:30px;line-height:30px;-moz-border-radius:15px;border-radius:15px;background-color:#222;color:#fff;text-align:center;padding:0;margin:0}.round.hollow{display:inline-block;height:30px;width:30px;line-height:30px;-moz-border-radius:15px;border-radius:15px;background-color:#fff;color:#222;text-align:center;-webkit-box-shadow:0 0 0 3px rgba(0,0,0,.75);-moz-box-shadow:0 0 0 3px rgba(0,0,0,.75);box-shadow:0 0 0 3px rgba(0,0,0,.75)}.round.round-sm{height:20px;width:20px;line-height:20px;-moz-border-radius:10px;border-radius:10px;font-size:.7em}.round.round-lg{height:40px;width:40px;line-height:40px;-moz-border-radius:20px;border-radius:20px;font-size:1.5em}.round.blue{background-color:#3ea6ce}.round.orange{background-color:#ff6701}.round.green{background-color:#42a129}.round.secondary{background-color:#d3d3d3}.round.hollow.blue{color:#3ea6ce;background-color:#fff;-webkit-box-shadow:0 0 0 3px #3ea6ce;-moz-box-shadow:0 0 0 3px #3ea6ce;box-shadow:0 0 0 3px #3ea6ce}.round.hollow.orange{color:#ff6701;background-color:#fff;-webkit-box-shadow:0 0 0 3px #ff6701;-moz-box-shadow:0 0 0 3px #ff6701;box-shadow:0 0 0 3px #ff6701}.round.hollow.green{color:#42a129;background-color:#fff;-webkit-box-shadow:0 0 0 3px #42a129;-moz-box-shadow:0 0 0 3px #42a129;box-shadow:0 0 0 3px #42a129}.btn-sq-xs{width:25px!important;height:25px!important;padding:2px}.btn-primary{color:#fff;background-color:var(--primary-color);border-color:var(--primary-color)}.btn-primary:hover{color:#fff;background-color:var(--primary-hover-color);border-color:var(--primary-hover-color)}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 2px rgba(32,168,216,.5)}.btn-primary.disabled,.btn-primary:disabled{background-color:var(--primary-color);border-color:var(--primary-color);opacity:.5}.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:var(--primary-active-color);background-image:none;border-color:var(--primary-active-color)}.btn-outline-primary{color:var(--primary-color);background-color:transparent;background-image:none;border-color:var(--primary-color)}.btn-outline-primary:hover{color:#fff;background-color:var(--primary-hover-color);border-color:var(--primary-hover-color)}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 2px rgba(248,203,0,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{opacity:.5;color:var(--primary-color);background-color:transparent}.btn-outline-primary.active,.btn-outline-primary:active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:var(--primary-active-color);border-color:var(--primary-active-color)}.btn-secondary{color:#263238;background-color:#d3d3d3;border-color:#ccc}.btn-secondary:hover{color:#263238;background-color:#e6e6e6;border-color:#adadad}.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 2px rgba(204,204,204,.5)}.btn-secondary.disabled,.btn-secondary:disabled{background-color:#fff;border-color:#ccc}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#263238;background-color:#e6e6e6;background-image:none;border-color:#adadad}.btn-success{color:#fff;background-color:var(--success-color);border-color:var(--success-color)}.btn-success:hover{color:#fff;background-color:var(--success-hover-color);border-color:var(--success-hover-color)}.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 2px rgba(77,189,116,.5)}.btn-success.disabled,.btn-success:disabled{background-color:var(--success-color);border-color:var(--success-color);opacity:.5}.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:var(--success-active-color);background-image:none;border-color:var(--success-active-color)}.btn-warning{color:#fff;background-color:var(--warning-color);border-color:var(--warning-color)}.btn-warning:hover{color:#fff;background-color:var(--warning-hover-color);border-color:var(--warning-hover-color)}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 2px rgba(32,168,216,.5)}.btn-warning.disabled,.btn-warning:disabled{background-color:var(--warning-color);border-color:var(--warning-color);opacity:.5}.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#fff;background-color:var(--warning-active-color);background-image:none;border-color:var(--warning-active-color)}.btn-outline-warning{color:#f8cb00;background-color:transparent;background-image:none;border-color:var(--warning-color)}.btn-outline-warning:hover{color:#fff;background-color:var(--warning-hover-color);border-color:var(--warning-hover-color)}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 2px rgba(248,203,0,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{opacity:.5;color:var(--warning-color);background-color:transparent}.btn-outline-warning.active,.btn-outline-warning:active,.show>.btn-outline-warning.dropdown-toggle{color:#fff;background-color:var(--warning-active-color);border-color:var(--warning-active-color)}.btn-danger{color:#fff;background-color:var(--danger-color);border-color:var(--danger-color)}.btn-danger:hover{color:#fff;background-color:var(--danger-hover-color);border-color:var(--danger-hover-color)}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 2px rgba(32,168,216,.5)}.btn-danger.disabled,.btn-danger:disabled{background-color:var(--danger-color);border-color:var(--danger-color);opacity:.5}.btn-danger.active,.btn-danger:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:var(--danger-active-color);background-image:none;border-color:var(--danger-active-color)}.btn.focus,.btn:focus{outline:0;box-shadow:none}.table-hover tbody tr:hover{background-color:#fffdf5}.bg-info-light{background-color:rgba(2,182,179,.12)!important;color:#1db9aa!important}.text-sm{font-size:.875rem!important}