.ReactPiano__Keyboard{display:flex;height:300px;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;min-width:1990px;overflow-x:auto;max-width:calc(100vw - 300px);margin-left:auto;margin-right:auto;overflow:hidden;scroll-behavior:smooth}.ReactPiano__Key{display:flex;margin-top:20px;color:#202020;position:absolute;font-weight:700;font-size:15px;border:1px solid rgba(32,32,32,.2);border-radius:0 0 5px 5px;cursor:pointer;box-shadow:0 5px 1px rgba(32,32,32,.2);transition:margin .05s ease,background-color .05s ease,box-shadow .05s ease;-webkit-transition:margin .05s ease,background-color .05s ease,box-shadow .05s ease}.ReactPiano__Key--accidental{border:1px solid #fff;border-top-color:transparent;border-radius:0 0 4px 4px;cursor:pointer;z-index:1;background-color:#202020;color:#fff;width:30px!important;height:130px!important}.ReactPiano__Key--natural{border:1px solid #888;border-radius:0 0 6px 6px;cursor:pointer;flex:1 1;margin-right:1px;background-color:#d8d8b5;z-index:0;width:40px!important;height:235px!important}.ReactPiano__Key--natural:last-child{margin-right:0}.ReactPiano__Key--active{background:#3ac8da;border:1px solid #aaa}.ReactPiano__Key--active.ReactPiano__Key--accidental{border:1px solid #fff;border-top-color:#3ac8da;height:65%}.ReactPiano__Key--active.ReactPiano__Key--natural{height:98%}.ReactPiano__Key--voiceHighlight-midi{background-color:#3ac8da}.ReactPiano__Key--voiceHighlight{animation:fadeToNatural .5s ease-out forwards}.ReactPiano__Key--voiceHighlight-accidental{animation:fadeToAccidental .5s ease-out forwards}@keyframes fadeToNatural{0%{background:#f0bc44}to{background:#d8d8b5}}.ReactPiano__Key--disabled.ReactPiano__Key--accidental{background:#ddd;border:1px solid #999}.ReactPiano__Key--disabled.ReactPiano__Key--natural{background:#eee;border:1px solid #aaa}.ReactPiano__Key--lowestNote-midi{background-color:red}.ReactPiano__Key--lowestNote{border:1px solid #aaa;animation:fadeToLowest .5s ease-out forwards}.ReactPiano__Key--lowestNote-accidental{animation:fadeToLowestAccidental .5s ease-out forwards}.ReactPiano__Key--bridgeNote-midi{background-color:#3ac8da}.ReactPiano__Key--bridgeNote{border:1px solid #aaa;animation:fadeToBridge .5s ease-out forwards}.ReactPiano__Key--bridgeNote-accidental{animation:fadeToBridgeAccidental .5s ease-out forwards}.ReactPiano__Key--highestNote-midi{background-color:#3c96a1}.ReactPiano__Key--highestNote{border:1px solid #aaa;animation:fadeToHighest .5s ease-out forwards}.ReactPiano__Key--highestNote-accidental{animation:fadeToHighestAccidental .5s ease-out forwards}@keyframes fadeToLowest{0%{background-color:red}to{background-color:#d8d8b5}}@keyframes fadeToLowestAccidental{0%{background-color:red}to{background-color:#202020}}@keyframes fadeToBridge{0%{background-color:#f0bc44}to{background-color:#d8d8b5}}@keyframes fadeToBridgeAccidental{0%{background-color:#f0bc44}to{background-color:#202020}}@keyframes fadeToHighest{0%{background-color:#b99134}to{background-color:#d8d8b5}}@keyframes fadeToHighestAccidental{0%{background-color:#b99134}to{background-color:#202020}}.ReactPiano__NoteLabelContainer{flex:1 1;align-self:flex-end}.ReactPiano__NoteLabel{font-size:12px;text-align:center;text-transform:capitalize;-webkit-user-select:none;user-select:none}.ReactPiano__NoteLabel--accidental{color:#f8e8d5;margin-bottom:3px}.ReactPiano__NoteLabel--natural{color:#888;margin-bottom:3px}.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active{color:#f8e8d5}.piano-dimensions{height:260px}.piano-wrapper{overflow-x:auto;scroll-behavior:smooth}.piano-wrapper::-webkit-scrollbar{display:none}.mr-2{margin-right:10px}.text-right{text-align:right}.menu{padding:27px 15px 15px;position:fixed;overflow-y:scroll;top:0;right:-391px;width:330px;height:100%;background-color:#343232;z-index:100;transition:.5s;border-left:2px solid #c5a73b;margin-top:68px;height:-webkit-fill-available;color:#fff}.sidebarshow .menu{right:0;transition:.5s}.sidebarshow .page-content{margin-right:357px;transition:.5s}.sidebarhide .page-content{margin-right:0;transition:.5s}.close{border-radius:0 0 16px 0;position:absolute;text-align:right;left:-4px;background-color:#c5a73b;color:#fff;border:none;width:30px;height:30px;align-items:center;display:flex;justify-content:center;top:-2px;padding:0!important}.cross{width:16px;cursor:pointer;height:15px}.song-container{padding:10px 10px 0 0;cursor:pointer}.btn-edit{color:#fff!important;border-color:grey;background-color:grey!important}.btn-delete{color:#fff!important;background-color:#d71515!important;border-color:#d71515}.song-name{font-size:24px}.song-name-tooltip{font-size:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;max-width:-webkit-fill-available;vertical-align:middle}.artist-name{font-size:21px}.border-left{border-left:5px solid #007bff}.border-left .sharp{left:-1.5px}.border-left .main{left:4px}.border-right{border-right:5px solid #007bff}.custom-vocal-tone-wrapper{position:relative;display:inline-block}.custom-vocal-range-edit{position:absolute;padding:3px 7px!important;top:-15px;right:-10px;background-color:#3f1e35!important;color:#fff!important;border-radius:50%!important;font-size:12px}.hide-range{display:none}:root{--primary:#3f1e35;--secondary:#eec66b}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#222!important;color:#c5a73b!important}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.clickable{cursor:pointer}main{display:flex!important;height:100vh}label{font-size:1.4rem!important}.fs1_3{font-size:20px!important}body{overflow:hidden}.main-container{flex-grow:1;overflow:auto;overflow-x:hidden}.navbar{background-color:#3f1e35;font-size:16px;align-items:center;justify-content:space-between!important;padding:15px!important}.btn-lg{font-size:18px!important;padding:.375rem .75rem!important}.navbar .navbar-brand{width:75px}.dropdown-toggle:after{vertical-align:unset!important;color:#eec66b!important}.fa-user-circle{color:#c5a73b!important}.dropdown-menu{left:-90px!important;background-color:#3f1e35!important}.dropdown-item.active,.dropdown-item:active{background-color:#fff!important}.dropdown-item:focus,.dropdown-item:hover{background-color:unset!important}.nav-link{color:#fff!important}.logout{color:#e74c3c!important;font-weight:700!important}.navbar a.active,.navbar a:hover:not(.logout){color:#c5a73b!important}.logout:active,.logout:hover{color:#e74c3c!important;font-weight:700!important}.social-media{display:flex;margin-left:115px!important}.social-media a:hover{color:#fff!important}.sidebar{width:120px;height:100%;overflow:hidden;z-index:2;background:#fff;transition:all .3s}.sidebar.show{left:0;transition:all .3s}.sidebar::-webkit-scrollbar{display:none}.sidebar-container{padding:20px 0;display:flex}.sidebar-container img{margin-top:40px}.btn_primary{color:#fff!important;background-color:#c5a73b!important}.btn_primary,.btn_secondary{border-color:#c5a73b!important}.btn_secondary,.btn_stop{color:#c5a73b!important}.btn_stop{background-color:#ea5b24!important;border-color:#ea5b24!important}.call-to-action button{padding:.5rem 2rem!important}.Toastify__toast--success{background:#3f1e35!important}.Toastify__toast-body{margin-left:10px!important}.loudness-display span{color:#fff!important;background-color:#c5a73b!important;border-radius:50px;font-size:15px;padding:1em 5em}#responsive-navbar-nav .register{background-color:#c5a73b;border-radius:.3rem;padding:5px}#responsive-navbar-nav .register:hover,.navbar a.register.active{color:#fff!important}form{padding:1em}.form-check{place-content:space-between}.form-check-label{font-size:1em!important}.form-check a,.form-check a:hover{color:unset;text-decoration:underline;font-style:italic}.form-check-label span{cursor:pointer;text-decoration:underline;font-style:italic}.privacy-policy-popup,.terms-service-popup{max-height:85vh;overflow:auto}.privacy-policy-popup .row,.terms-service-popup .row{padding:1em}.overlay_spinner{z-index:9999}.overlay_spinner,.overlay_spinner .overlay__inner{left:0;top:0;width:100%;height:100%;position:absolute}.overlay_spinner .overlay__content{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.overlay_spinner .spinner{width:75px;height:75px;display:inline-block;animation:spin 1s linear infinite;border-radius:100%;border:5px solid #c5a73b;border-top-color:#fff}@keyframes spin{to{transform:rotate(1turn)}}.verify-account{justify-content:center;align-items:center}.shareIcons .dropdown-menu{left:unset!important;background-color:#fff!important;min-width:7rem}.shareIcons ul{list-style:none;-webkit-padding-start:0;padding-inline-start:0;text-align:center}.shareIcons i,.shareIcons svg{font-size:1.5em;color:#eec66b;width:20px}#socialdropdown{color:#eec66b;background-color:unset;border:0;box-shadow:0 0 0 .1rem rgba(197,167,59,.67)}.nav-text{color:#c5a73b!important;font-weight:700}.item-card{transition:.5s}.card:hover{transform:scale(1.05);box-shadow:10px 10px 15px rgba(0,0,0,.3)}.card:after,.card:before{position:absolute;top:0;right:0;bottom:0;left:0;transform:scale3d(0,0,1);transition:transform .3s ease-out 0s;background:hsla(0,0%,100%,.1);content:"";pointer-events:none}.card:before{transform-origin:left top}.card:after{transform-origin:right bottom}.card:focus:after,.card:focus:before,.card:hover:after,.card:hover:before{transform:scaleX(1)}.upgrade-text{color:#484848;font-weight:700}.card .plan-name{padding:13px 0;border-bottom:1px solid #eff0f2;text-align:center;text-transform:uppercase;font-size:20px;color:#c5a73b;letter-spacing:1px}.card .plan-description{padding:15px;color:#101010}.card .plan-description ul{list-style:none;-webkit-padding-start:0;padding-inline-start:0}.card .plan-description li{padding-bottom:6px;list-style-type:none;margin-bottom:6px}.card .plan-description li i{color:#c5a73b;margin-left:-2em;margin-right:.71428571em}.card .plan-description li i.disabled{color:#b9b9b9}.settings{display:none}.settings,.settings *,.settings+.settings-btn,.settings:after,.settings :after,.settings:before,.settings :before{box-sizing:border-box}.settings+.settings-btn::selection,.settings::selection,.settings ::selection,.settings:after::selection,.settings :after::selection,.settings:before::selection,.settings :before::selection{background:none}.settings+.settings-btn{outline:0;display:block;width:3em;height:1.5em;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.settings+.settings-btn:after,.settings+.settings-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.settings+.settings-btn:after{left:0}.settings+.settings-btn:before{display:none}.settings:checked+.settings-btn:after{left:50%}.settings-light+.settings-btn{background:#c1c1c1;border-radius:2em;padding:2px;transition:all .4s ease}.settings-light+.settings-btn:after{border-radius:50%;background:#fff;transition:all .2s ease}.settings-light:checked+.settings-btn{background:#3f1e35}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.modal-buttons{margin:10px!important}@media only screen and (max-width:768px){label{font-size:.95rem!important}.modal-buttons button{margin-bottom:.5em}.modal-buttons .text-right{text-align:center!important}.nav-text,.social-media{display:none!important}#responsive-navbar-nav{background-color:#fff}#responsive-navbar-nav .nav-link{color:#000!important}.dropdown-menu{left:unset!important;background-color:#fff!important}.sidebar{display:none}.main-container{max-height:calc(100vh - 80px)}}@media only screen and (min-width:769px){.tuner{height:550px}.navbar .navbar-brand{display:block;position:absolute;width:105px;top:0}.loudnessMeter canvas{float:left}html{--scrollbarBG:#cfd8dc;--thumbBG:#90a4ae}#react-piano::-webkit-scrollbar,.main-container::-webkit-scrollbar{width:12px;height:15px}#react-piano,.main-container{scrollbar-width:thin;scrollbar-color:var(--thumbBG) var(--scrollbarBG)}#react-piano::-webkit-scrollbar-track,.main-container::-webkit-scrollbar-track{background:var(--scrollbarBG)}#react-piano::-webkit-scrollbar-thumb,.main-container::-webkit-scrollbar-thumb{background-color:var(--thumbBG);border-radius:6px;border:3px solid var(--scrollbarBG)}}.privacy-policy-popup,.terms-service-popup{color:#101010}.terms-service-popup h4,.terms-service-popup p{margin-bottom:10px}.nav-links{grid-gap:30px;gap:30px}.navbar-container{font-weight:500}.slider{accent-color:#eec66b}.mic-slider-container{text-align:left}.container-wrapper{position:relative;height:calc(100vh - 76px);transition:.5s}#react-piano{height:300px;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;width:1800px;overflow-x:auto;max-width:calc(100vw - 300px);margin-left:auto;margin-right:auto;overflow:hidden;scroll-behavior:smooth}.react-piano-key{margin-top:20px;color:#202020;position:absolute;font-weight:700;font-size:15px;border:1px solid rgba(32,32,32,.2);border-radius:0 0 5px 5px;cursor:pointer;box-shadow:0 5px 1px rgba(32,32,32,.2);transition:margin .05s ease,background-color .05s ease,box-shadow .05s ease;-webkit-transition:margin .05s ease,background-color .05s ease,box-shadow .05s ease}.react-piano-key:hover{background-color:#18db36}.react-piano-key .label{position:absolute;bottom:10px;text-align:center;left:0;right:0}.react-piano-sharp-key{background-color:#202020;color:#fff;z-index:1;width:30px;height:130px}.react-piano-main-key{background-color:#d8d8b5;z-index:0;width:40px;height:235px}.react-piano-key-highlighted,.react-piano-key-pressed{transform:perspective(200px) translateZ(-6px)}.react-piano-key-highlighted{background-color:#eec66b}.react-piano-key-highlighted.bridge{background-color:#db483b}.react-piano-key-highlighted.over-bridge{background-color:#d6bd85}.react-piano-key-highlighted.under-bridge{background-color:#f1b52f}.react-piano-lowest-tone{background:red;z-index:3}.react-piano-bridge-tone{background:#007bff}.react-piano-highest-tone{background:#007bff;z-index:3}.react-tone-overlay{height:20px;width:15px;position:absolute;border-radius:15%;text-align:center!important}.react-tone-overlay span{color:#000;font-weight:bolder}.animate-tuner{margin:-5em auto 5vh;height:auto}.point{border-bottom:10px solid;box-sizing:border-box;height:15em;position:absolute;right:50%;transition:transform .2s;transform-origin:top;width:1px}.lgPoint{border-bottom-width:20px;width:2px}.music-theory-text{font-size:2.5em}.music-theory-text span{cursor:pointer}@media screen and (max-width:768px){.point{height:10em}#react-piano{max-width:100vw}}@media screen and (max-width:767px){.loudnessMeter{margin-top:10em}.music-theory-text{font-size:1.5em}}.react-piano-music-dots{position:absolute;border-radius:50%;bottom:30px;width:25px;height:28px;z-index:3;display:flex;justify-content:center;padding:0 0 3px}.sharp{left:1.5px}.main{left:7px}.grey{background-color:grey}.red{background:red}.black{background:#000;border:1px solid #d8d8b5}.white{display:inline-flex!important;background:#fff}.rhombus{transform:rotate(45deg);border-radius:5px;width:26px;height:26px;left:5px;align-items:center;overflow:hidden;padding:0 3px 7px 0}.ReactPiano__Key--accidental .rhombus{left:1px}.rhombus .number{font-size:14px!important;transform:rotate(-45deg);margin-right:1px}.react-piano-music-dots .number{color:#fff;padding-top:3px;min-width:14px;text-align:center;font-size:13px}.white .number{color:#000}.slider{-webkit-appearance:none;width:100%;height:15px;border-radius:5px;background:#d3d3d3;outline:none;opacity:.7;transition:opacity .15s ease-in-out}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:20px;background:#c5a73b;cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;background:#c5a73b;cursor:pointer}.midi-played{background-color:#18db36!important}.vocal-arrow{height:10px;position:absolute;bottom:-2px;z-index:3;left:-1px;border-radius:0 0 5px 5px}.react-piano-sharp-key .vocal-arrow{width:30px}.react-piano-main-key .vocal-arrow{width:39px}.vocal-arrow.highlighted{background-color:#c5a73b}.custom-select{padding:10px;border:2px solid #ccc;border-radius:5px;background-color:#f9f9f9;font-size:16px}.custom-select:focus{border-color:#007bff;box-shadow:0 0 5px rgba(0,123,255,.5)}.custom-option{padding:8px 15px;border-bottom:1px solid #ddd}.custom-option:last-child{border-bottom:none}.custom-option:hover{background-color:#e9ecef}.center-lock{position:absolute;top:-54px;right:280px}.hide-labels{display:none}.square{border-radius:5px!important;width:28px}.ReactPiano__Key--accidental .square{left:0}.ReactPiano__Key--natural .square{left:5px}.double-underline{border-bottom:4px double}.single-underline{border-bottom:1px solid #e5e5e5;margin-bottom:3px}.base-scale{font-size:1.5em;color:#fff}.piano-container{width:95%;margin:0 auto}.center-text{font-size:24px;padding-top:20px}.lock-icon{position:relative;cursor:pointer}.lock-icon i{position:absolute;left:-5px;top:0}.formula-container{cursor:pointer;font-weight:500;font-size:16px;padding-left:5px}.formula-container:hover{font-weight:700;background:#8c8591;border-radius:12px}.formula-container-hover{font-weight:500}.main-scale{font-size:9px}.selected-song{opacity:0;width:15px;height:15px;background-color:#c5a73b;border-radius:50%;margin-right:5px;vertical-align:middle}.pie{display:inline-flex;opacity:1;margin-bottom:5px}.react-piano-bar{position:absolute;height:20px;background-color:#007bff;opacity:.7}.formula-name span{cursor:pointer}.delete-btn{color:red!important}.edit-btn{color:#adacae!important}.ghost-text{color:rgba(79,70,70,.9215686274509803);font-size:2em;height:48px}.hide-ghost{display:none}.center-dropdown{font-size:2.5rem!important;line-height:2.5;padding:0!important;background:#222!important;border:none!important;color:#fff!important;text-shadow:#fff 0 0 0,#fff 0 0 3px,#fff 0 0 15px,#fff 0 0 3px;cursor:pointer;text-align:center;position:relative;width:100%}.center-dropdown-menu{position:absolute;top:100%;line-height:1.5;background:rgba(34,34,34,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2);z-index:1000;width:130px;display:flex;flex-direction:column;box-shadow:0 4px 6px rgba(0,0,0,.1);border-radius:8px}.center-dropdown-menu,.dropdown-item{color:#fff!important;text-shadow:#fff 0 0 0,#fff 0 0 3px,#fff 0 0 15px,#fff 0 0 3px;align-items:center;text-align:center}.dropdown-item{font-size:1.5rem;padding:8px 12px;background:transparent;cursor:pointer;transition:background .3s ease;width:100%}.center-dropdown-item:hover{color:#fff!important;text-shadow:0 0 5px #fff,0 0 10px #f1b52f,0 0 20px #c09332,0 0 30px #f1b52f,0 0 40px #f1b52f;transform:scale(1.1)}.center-dropdown-item:last-child{border-bottom:none}.piano-pedal-wrapper{padding:20px}.piano-pedal-wrapper,.sustain-pedal{background:#222;border:none;color:#fff;text-shadow:0 0 3px #fff,0 0 5px #f1b52f,0 0 10px #c09332,0 0 15px #f1b52f;cursor:pointer;text-align:center;border-radius:8px;transition:all .3s ease-in-out}.sustain-pedal{font-size:2rem;padding:10px 20px}.sustain-pedal:hover{text-shadow:0 0 5px #fff,0 0 10px #f1b52f,0 0 20px #c09332,0 0 30px #f1b52f;transform:scale(1.05)}.sustain-pedal.active{background:rgba(34,34,34,.9);box-shadow:0 0 10px #f1b52f,0 0 20px #c09332;text-shadow:0 0 6px #fff,0 0 12px #f1b52f,0 0 24px #c09332}.edit-key-highlight{background-color:#c5a73b}.edit-key-highlight-fade-black{animation:fadeToAccidental 2s ease-out forwards}@keyframes fadeToAccidental{0%{background-color:#eec66b}to{background-color:#202020}}.edit-key-highlight-fade-red{animation:fadeToRed 2s ease-out forwards}@keyframes fadeToRed{0%{background-color:#eec66b}to{background-color:red}}.tuner-text{display:flex;flex-direction:column}.tuner-text-note{font-size:3em;font-weight:bolder}.tuner-text-frequency{font-size:1.5em;font-weight:700}.tuner-container{position:absolute;left:225px;top:-317px;cursor:move;width:500px;height:400px;border:2px solid;background-color:#222;z-index:2;scale:(.5)}.close-tuner{position:absolute;top:-20px;right:-15px;cursor:pointer}.draggale-modal{position:absolute;bottom:10px;left:10px}
/*# sourceMappingURL=main.5c1469f2.chunk.css.map */