*,* *,:after,:before{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;-khtml-user-select:none;-moz-user-select:none}html{overflow:hidden}body{background-color:#656565;font-family:Arial,Helvetica,sans-serif;height:100vh;line-height:normal;overflow-x:hidden;overflow-y:auto;width:100vw}@media screen and (max-width:43em){body{font-size:2.4vw}}.App{--text-color:#2e3440;--background-color:#fff;--opt-hover:#0000001a;background-color:var(--background-color);border:.1em dotted var(--background-color);height:44em;margin:3em auto;position:relative;transition:.3s;user-select:none;-moz-user-select:none;-webkit-user-select:none;width:40em}.App.dark{--text-color:#fff;--background-color:#2e3440;--opt-hover:#fff3;color:#fff;scrollbar-color:#d2d2d2 #2e3645!important}#lightModeBtn,#listBkBtn,#listBtn{cursor:pointer;filter:brightness(0);height:2em;position:absolute;right:1.7em;top:.7em;z-index:1000}#listBkBtn,#listBtn{height:1.5em;left:.7em;top:.5em;width:-webkit-fit-content;width:fit-content}#listBtn{left:2em;top:1em;transform:rotateY(180deg)}#listBkBtn img{height:100%;transform:scale(.5)}.dark #lightModeBtn,.dark #listBkBtn,.dark #listBtn{filter:brightness(100%)}.invertFromBlack{filter:invert(100%)}.dark .invertFromBlack{filter:invert(0)}section{flex-direction:column;justify-content:space-between;padding:1em;width:18.5em}#controls,section{display:flex;user-select:none;-moz-user-select:none;-webkit-user-select:none}#controls{height:15.2em;margin:0 auto .7em;width:-webkit-fit-content;width:fit-content}.form-container{margin:0 auto;position:relative;user-select:none;-moz-user-select:none;-webkit-user-select:none;width:100%}.disable{opacity:.3}.disable,.hideThis{pointer-events:none}.hideThis{opacity:0;position:absolute;z-index:-10000}main{--title-one-green:#009000;--by-day:#d0b000;--section1-title:#0a7ea5;--section2-title:var(--by-day);--track1-color:#bdbdbd;--thumb1-color:var(var(--section1-title));--thumb2-color:var(var(--section1-title));--track1-color:var(--by-day);--track2-color:var(--section1-title);display:flex;flex-wrap:wrap;font-size:.95em;justify-content:space-between;margin:auto;width:92%}.dark main{--section1-title:#b6edff;--title-one-green:#90ee90;--by-day:#ccac00;--track1-color:var(--by-day);--track2-color:var(--section1-title);--thumb1-color:#000;--thumb2-color:#000}.records-page-title{font-size:1.8em;margin:.7em;width:100%}.records-page-title,main .listTitle{text-align:center;text-decoration:underline}main .listTitle{font-size:1.3em;margin-bottom:.7em}.list{height:37em;overflow-y:auto;padding-right:2em;width:-webkit-fit-content;width:fit-content}.list2{padding-right:1em}.list:not(.list2){flex-shrink:0;min-width:14em}.list.list2 .data{margin:0}.sectionTitle{color:var(--section1-title);text-decoration:underline}.sectionTitle:not(:first-of-type){margin-top:1em}.day{color:var(--by-day);font-size:.9em;text-decoration:underline}.day:not(:first-child){margin-top:1em}.exerciseTitle{color:var(--title-one-green);margin:.5em 0 .25em 1em;text-decoration:underline}ul.data{margin-bottom:.2em;margin-left:1em}ul.data li{display:flex;font-size:.9em;justify-content:space-between;list-style:none;margin-left:.5em}.list2 ul.data li{justify-content:flex-start;margin-top:.3em}.scroller::-webkit-scrollbar{height:.5em;width:.5em}.scroller1{--scrollbar-color-thumb:var(--thumb1-color);--scrollbar-color-track:var(--track1-color)}.scroller1,.scroller2{scrollbar-color:var(--scrollbar-color-track)}.scroller2{--scrollbar-color-thumb:var(--thumb2-color);--scrollbar-color-track:var(--track2-color)}@supports (scrollbar-width:auto){.scroller{scrollbar-color:var(--scrollbar-color-thumb) var(--scrollbar-color-track);scrollbar-width:var(--scrollbar-width)}}header{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-top:2em;position:relative}h1 span{font-size:1.06em}h1{display:inline;margin:0 auto;position:relative;text-decoration:underline;width:-webkit-fit-content;width:fit-content}h1:after{background-color:#bababa;bottom:0;content:"";height:.07em;left:0;position:absolute;width:100%}header h4:not(:last-child){margin:.4em}header h4:last-child{margin:.5em 0 .4em}::-webkit-scrollbar{width:none!important}.datalist{--opt-even:#eee;--opt-odd:#dfdfdf}.input,.option{color:var(--text-color);font-size:inherit;outline:none;padding:.5em .6em;width:100%}.input{background-color:var(--input-bkground);border:.11em solid var(--text-color);border-radius:.4em}.input,.option{cursor:pointer;width:100%}.option{box-shadow:0 0 .4em .2em #0000;margin:.2em auto;padding:.5em .7em}.sound .option{padding:0}.soundOption span{padding:.5em .7em;white-space:nowrap}.datalist .option:nth-child(2n):hover,.option:hover{background-color:var(--opt-hover);box-shadow:0 0 .3em .1em var(--opt-hover)}.show .input{border-radius:.45em .45em 0 0}.datalist-container{border-bottom:none;border-radius:0 0 .45em .45em}.dark .show .datalist-container.sound::-webkit-scrollbar-track,.show .datalist-container.sound::-webkit-scrollbar-track{scrollbar-width:0!important;width:none!important}.show .datalist-container.sound{border-bottom:.15em solid var(--text-color);color:red!important;overflow-y:scroll;scrollbar-width:0}.datalist-container.sound::-webkit-scrollbar,.datalist-container::-webkit-scrollbar{width:none!important}.show .datalist-container{height:var(--datalist-height);position:absolute;scrollbar-width:none;transition:.3s linear;z-index:1000}.datalist{background-color:var(--background-color);border:.11em solid var(--text-color);border-radius:0 0 .47em .47em;border-top:none;display:block;padding:.65em .45em;pointer-events:all;position:relative;transform:translateY(-100%);transition:transform 0s linear;z-index:10}.show .datalist{display:block;transform:translateY(0)}.datalist-container{--datalist-maxHeight:17.5em;--datalist-height:var(--datalist-maxHeight);border-radius:0 0 .47em .47em;height:0;max-height:var(--datalist-height);overflow:hidden;pointer-events:none;transition:0s linear;width:100%;z-index:-10}.controls{display:flex;justify-content:space-evenly;margin:0 auto}.placeHolder{opacity:.5}.soundOption{display:flex;justify-content:space-between}.soundOption span{cursor:pointer;display:flex}.soundOption span:first-child{width:80%}.soundOption span:nth-child(2){align-items:center;display:flex;justify-content:flex-end;padding:0;width:2.8em}.soundOption img{filter:brightness(.5);height:.9em;position:absolute;right:.9em}.dark .soundOption img{filter:brightness(.8)}.audioCtrls{display:flex;flex-direction:column;flex-shrink:0;font-size:.9em;font-size:.84em;height:50%;justify-content:space-around}div.checkbox{flex-shrink:0;padding:0 4em 1em}#volumeControl{align-items:center;display:flex;flex-direction:column;height:1em;height:2em;justify-content:center;margin-bottom:1.1em;padding:0 2em 1em}#volumeControl p{inset-block-start:1em;position:relative}#volumeControl small{-webkit-margin-after:.4em;display:flex;inline-size:100%;justify-content:space-between;margin-block-end:.4em;padding-bottom:.3em}#volume{--block-size:.25rem;--inline-size:100%;--thumb-size:.85rem;--track-color:var(--text-color);--thumb-color:var(--background-color);--thumb-border-size:.15em;-webkit-appearance:none;background:#0000;box-sizing:border-box;cursor:pointer;width:100%}#volume::-webkit-slider-runnable-track{background:var(--track-color);border-radius:calc(var(--block-size)/2);height:var(--block-size);width:var(--inline-size)}#volume::-webkit-slider-thumb{-webkit-appearance:none;background:var(--thumb-color);border:var(--thumb-border-size) solid var(--track-color);border-radius:calc(var(--thumb-size)/2);box-shadow:0 0 calc(var(--thumb-border-size)/1) calc(var(--thumb-border-size)/4) var(--track-color);height:var(--thumb-size);margin-top:calc((var(--thumb-size) - var(--thumb-border-size))/-2);width:var(--thumb-size)}#volume::-moz-range-track{background:var(--track-color);border-radius:calc(var(--block-size)/2);height:var(--block-size);width:var(--inline-size)}#volume::-moz-range-thumb{background:var(--thumb-color);border:var(--thumb-border-size) solid var(--track-color);border-radius:calc(var(--thumb-size)/2);box-shadow:0 0 calc(var(--thumb-border-size)/1) calc(var(--thumb-border-size)/4) var(--track-color);height:var(--thumb-size);width:var(--thumb-size)}#buttons{align-items:center;display:flex;justify-content:space-evenly;width:100%}button:disabled{pointer-events:none}button{border-radius:.5em;border-width:.02em;cursor:pointer;display:block;flex-shrink:0;font-size:.9em;font-weight:900;height:-webkit-max-content;height:max-content;outline:none;padding:.3em .4em;width:6.5em}.welcome,button{text-align:center}.welcome{text-wrap:balance}.welcome h2{text-decoration:underline}.welcome p{margin:1em 0}#lessonInfoDiv .infoTitle{margin-bottom:.7em;text-align:center;text-decoration:underline}#lessonInfoDiv .lessonDetailsContainer{display:flex;gap:3em;height:9em;justify-content:center;margin:auto;position:relative;top:-.7em;width:90%}#lessonInfoDiv .lessonDetailsContainer .lessonDetails h5{margin-left:2em}#lessonInfoDiv .lessonLog{text-align:center;width:-webkit-fit-content;width:fit-content}#lessonInfoDiv .lessonLog ul::-webkit-scrollbar-track{width:0}#lessonInfoDiv .lessonLog li{display:flex;font-size:.83em;justify-content:space-between;margin:0 auto .3em;text-align:center}#lessonInfoDiv .lessonLog h5{margin:auto;width:-webkit-fit-content;width:fit-content}#lessonInfoDiv .lessonLog span:first-of-type{display:inline-block;text-align:left}#lessonInfoDiv p{margin:.5em 3em 1.5em}#lessonInfoDiv h4,#lessonInfoDiv h5{margin:.5em 1em;white-space:nowrap}#lessonInfoDiv h5{text-align:left}#lessonInfoDiv h4{text-align:center;text-decoration:underline}.lessonLog h4{margin-bottom:0 !}#lessonInfoDiv ul{font-weight:700;height:9em;overflow-y:auto;scrollbar-width:none}.canvasContainer{align-items:center;display:flex;filter:brightness(0);justify-content:center;margin:.3em auto .5em;max-width:95%;padding:.4em;transition:.3s}.noPickDir{margin:-1.3em auto .5em!important}.canvasContainer span{color:var(--text-color);display:inline-block;font-family:Times New Roman,Times,serif;font-size:1.25em;font-style:italic;position:relative;text-align:right;top:.56em;width:2.5em}#canvas{flex-shrink:2;width:calc(100% - 2.6em)}.dark .canvasContainer{filter:brightness(1)}#description{display:flex;flex-direction:column;height:6em;justify-content:space-between;margin:0 auto;text-align:center;white-space:nowrap;width:-webkit-fit-content;width:fit-content}#description p{text-wrap:balance;margin-top:.5em;white-space:wrap}#description div{margin:auto;text-align:center;white-space:break-spaces}#description .shortMsg{margin:auto}#description .smallText{font-size:.9em}#description h3:first-child{text-decoration:underline}#description .arrow{position:absolute;top:5%;width:2em}#description .arrowRight{right:5%}#description .arrowLeft{left:5%}#main-display{position:relative}#main-display .noteValue{left:2em;position:absolute;top:.5em;width:8em}#main-display #noteLegend{--dot-size:0.6em;align-items:center;display:flex;gap:.5em;height:1.35em;justify-content:space-between;width:-webkit-fit-content;width:fit-content}#main-display .smallCircle{background:var(--text-color);border-radius:50%;height:.6em;width:.6em}#main-display .dotEquals,#main-display .dotEquals img{height:100%}#main-display span{font-weight:100}#main-display .showNotesPerBeat{display:flex;font-size:.86em;gap:.5em;margin-bottom:.4em}#main-display .numOfNotes{font-weight:700}.exercise{height:.625em;opacity:0;pointer-events:none}.exercise.practice{height:-webkit-fit-content;height:fit-content;opacity:1;overflow:hidden;pointer-events:all;transition:margin .3s}.exercise.practice:has(.noPickDir){margin-top:1em}.info{display:flex;font-weight:600;justify-content:space-between;margin:auto;width:85%}.info span{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-weight:400;width:2.81em}.exercise-description{align-items:flex-end;display:flex;flex-shrink:0;height:3em;width:90%}#main-display .info .time span{text-align:center;width:.6em}#main-display .info .time span:first-of-type{margin-left:.4em}#main-display .info .time span.colon{font-weight:700;position:relative;top:-.13em;width:.4em}#forwardAndBack{align-items:center;cursor:pointer;display:flex;filter:brightness(0);height:3em;justify-content:space-between;margin:auto;width:-webkit-fit-content;width:fit-content}#forwardAndBack .text{white-space:nowrap}#forwardAndBack div{flex-shrink:0;height:70%}.dark #forwardAndBack{filter:brightness(1)}#forwardAndBack img{flex-shrink:0;height:100%;margin:0 20%}#forwardAndBack div:first-child{transform:rotate(180deg)}
/*# sourceMappingURL=main.3618229f.css.map*/