div.btn-nav{width:630px;min-height:61px;margin:10px auto;background:linear-gradient(180deg,#1b2143,#2a426e);border-radius:10px;padding:12px;display:flex;box-sizing:border-box;position:relative}div.btn-nav div.btn{color:#fff;background-color:#f3a42d;padding:4px 13px;cursor:pointer;border-radius:4px;margin:0 10px;font-size:15px}div.btn-nav div.settings-icon{position:absolute;left:10px;top:8px;font-size:22px}@media(max-width:700px){div.btn-nav{width:97%}}@media(max-width:500px){div.btn-nav{padding:12px 3px}div.btn-nav div.btn{font-size:13px;margin:0 7px;padding:4px 7px}div.btn-nav div.settings-icon{font-size:19px;left:4px}}@media(max-width:330px){div.btn{font-size:13px;margin:0 4px;padding:3px 4px 4px}}div.points{display:flex;justify-content:center}div.points span{padding:0 3px}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);transition:opacity .3s ease}.modal-mask .modal-container{direction:rtl;margin:40px auto 0;width:600px;padding:21px 31px 25px;background-color:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.33);transition:all .3s ease;line-height:38px;text-align:justify;overflow-y:auto;max-height:90vh;direction:ltr;position:relative;z-index:100000}.modal-mask .modal-container span.icon-close{position:absolute;top:13px;left:18px;cursor:pointer}.modal-mask .modal-container div.close-btn{position:absolute;left:10px;top:6px;cursor:pointer;font-size:14px;z-index:11}.modal-mask .modal-container div.intro{background:#f45b6f;z-index:10;position:relative}.modal-mask .modal-container div.intro div.text{color:#fff;font-weight:400;padding:9px 0;text-align:center;font-size:19px}.modal-mask .modal-container *{direction:rtl}.modal-enter,.modal-leave-active{opacity:0}.modal-enter .modal-container,.modal-leave-active .modal-container{-webkit-transform:scale(1.1);transform:scale(1.1)}.modal-mask p{color:#000;text-align:right}.modal-mask p span{font-weight:700}.modal-mask div.btns{display:flex;justify-content:center;margin-bottom:5px}.modal-mask button.no,.modal-mask button.save{background-color:#2ecc71;color:#fff;font-weight:200;font-size:16px;border-radius:25px;border:inherit;padding:6px 0;outline:none;cursor:pointer;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.1);user-select:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;position:relative;width:62px;margin-top:0}.modal-mask button.no:active:hover:not([disabled]),.modal-mask button.save:active:hover:not([disabled]){background-color:#0abe57}.modal-mask button.no:disabled,.modal-mask button.save:disabled{cursor:default}.modal-mask button.no .loadingSpinner,.modal-mask button.save .loadingSpinner{margin-top:-12px;margin-left:-13px}.modal-mask button.no:hover,.modal-mask button.save:hover{background:#0abe57}.modal-mask button.no{background-color:#e2e2e2;color:#898989;margin-left:34px}.modal-mask button.no:active:hover:not([disabled]),.modal-mask button.no:hover{background-color:#d8d8d8}.switch_box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex:1;flex:1}.switch_box input[type=checkbox].switch_1{font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:3.5em;height:1.5em;background:#ddd;border-radius:3em;position:relative;cursor:pointer;outline:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.switch_box input[type=checkbox].switch_1:checked{background:#0ebeff}.switch_box input[type=checkbox].switch_1:after{position:absolute;content:"";width:1.5em;height:1.5em;border-radius:50%;background:#fff;-webkit-box-shadow:0 0 .25em rgba(0,0,0,.3);box-shadow:0 0 .25em rgba(0,0,0,.3);-webkit-transform:scale(.7);transform:scale(.7);left:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.switch_box input[type=checkbox].switch_1:checked:after{left:calc(100% - 1.5em)}div.solfege{margin-bottom:100px}div.solfege p svg{display:inline}div.solfege div.settings{width:100%;padding:5px 17px 20px;color:#333;font-size:14px;position:relative;line-height:35px}div.solfege div.settings div.title{font-weight:700;margin-top:14px}div.solfege div.settings div.items{display:flex;justify-content:center;flex-wrap:wrap}div.solfege div.settings div.item{display:flex;flex-wrap:wrap;margin:0 9px}div.solfege div.settings div.item.range{margin-top:12px}div.solfege div.settings div.item svg{border:2px solid #333;border-radius:100%;width:22px;height:22px}div.solfege div.settings input{transform:scale(1.3);margin-left:7px}div.solfege div.settings div.option div.item.icon{height:30px;cursor:pointer;padding:0 4px;margin:5px 6px 0}div.solfege div.settings div.option input[type=range]{width:213px;margin:3px 0 11px;height:7px;direction:ltr;transform:scale(1)}div.solfege .modal-mask .modal-container.settins-modal{padding:0;width:550px}@media(max-width:600px){div.solfege .modal-mask .modal-container.settins-modal{width:89%}div.solfege div.settings div.option input[type=range]{width:156px}}