*{font-family:sans-serif;margin:0;padding:0;box-sizing:border-box}a{color:#fff;text-decoration:none}a:hover{transform:scale(1.02);transition:transform .3s}.container{height:100vh;font-size:32px;padding:28px;display:grid;grid-template-columns:auto auto auto auto;grid-template-rows:auto;text-align:center;gap:20px}.instrumentBox{display:flex;justify-content:center;align-items:center;text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;background-position:center;background-repeat:no-repeat;background-size:contain;border:1px solid black;border-radius:10px}#violinBox{background-image:url(/fingerboard-app/assets/strad-violin-vieuxtemps-hauser-small-DB9jgNaO.jpeg)}#violaBox{background-image:url(/fingerboard-app/assets/strad-viola-cassavetti-small-C_CJBGVz.jpeg)}#celloBox{background-image:url(/fingerboard-app/assets/strad-cello-amaryllis-fleming-small-DsJFNXm7.jpeg)}#bassBox{background-image:url(/fingerboard-app/assets/maggini-bass-delmas-small-Xczeb_Ya.jpeg)}#container{display:flex;justify-content:center}.inner{position:absolute}@media (max-width: 800px){.container{font-size:20px;grid-template-columns:auto auto;grid-template-rows:auto auto}}#main-svg{fill:transparent}#bodyViolin{fill:#b66323;opacity:1}#bodyViola{fill:#93522d;opacity:1}#bodyCello{fill:#b44833;opacity:1}#bodyBass{fill:#643222;opacity:1}#fingerboard{fill:#222;opacity:1}#nut{fill:#242424;opacity:1}#bridge{fill:#e5c487;stroke:#e5c487;stroke-linecap:round;opacity:1}.f-hole{fill:#000;opacity:1}.strings,.stringEnds{stroke:#d3d3d3;opacity:1}.point{fill:red}:root{--grey: rgb(210, 210, 210);--selectGreen: rgb(63, 255, 0);--ghostColor: rgb(140, 140, 140);--border-radius: 5px;--widget-height: 36px;--width-3-column: 31.5%}.menus{position:fixed;background:#a0b4c8e6;height:100vh;width:300px;top:0;text-align:left;z-index:1;transition:.8s;overflow:auto}#settings{left:-300px}#menu{right:-300px}.open-menu{transition:.8s;display:none}.header{color:#fff;font-size:1.2em;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1;background:#576270}.menu-header{display:flex;flex-direction:row-reverse}.bars-container{cursor:pointer;padding:10px;position:fixed}.menu-bars{right:0}.x-container{display:flex;height:30px;width:30px;justify-content:center;align-items:center;cursor:pointer}.bar{background-color:#000;width:30px;height:2px;margin:6px 0}.bar1{margin-top:0}.bar3{margin-bottom:0}.x{background-color:#fff;width:20px;height:3px;position:absolute}.x1{rotate:45deg}.x2{rotate:-45deg}.widget{padding:5px;border-bottom:1px solid black}.widget-grid{display:grid;grid-template-columns:1fr 1fr}.widget-label{font-weight:600;display:flex;align-self:center;height:var(--widget-height);align-items:center;justify-content:space-between}.label{font-weight:400;display:flex;align-self:center;height:var(--widget-height);align-items:center;justify-content:space-between}.widget-content a{color:#000;list-style:none}.alt-1{display:grid;grid-template-columns:40% 60%}.alt-2{display:grid;grid-template-columns:50% 50%}.alt-3{display:grid;grid-template-columns:35% 35% 30%;justify-content:center;align-items:center}.btn-container,.division-container{margin:4px 0}.btn-container{display:flex}.btn-container-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:4px}.btn-container-columns{display:flex;flex-direction:column}.division-container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:12px}.btn{height:var(--widget-height);display:flex;flex-grow:1;flex-basis:0;margin:0 2px;justify-content:center;align-items:center;text-align:center;background-color:var(--grey);border-radius:var(--border-radius);cursor:pointer}.one-btn{height:var(--widget-height);display:flex;justify-content:space-around;align-items:center;text-align:center;background-color:var(--grey);border-radius:var(--border-radius);cursor:pointer}.flex-items-same{flex-grow:1;flex-basis:0}.division-btn{margin:0}.btn-white{background-color:#fff}.btn-non-clickable{cursor:default}.fret-choice-wrapper{display:grid;width:100%;grid-template-rows:auto auto;border-radius:var(--border-radius)}.fret-choice-wrapper .btn{margin-left:0}.fret-choice-container{display:grid;width:inherit;height:max-content;grid-row:1;grid-template-columns:67% 33%;background-color:var(--grey);border-radius:var(--border-radius)}.btn-container .btn:first-of-type,.btn-container .fret-choice-wrapper:first-of-type{margin-left:0}.btn-container .btn:last-of-type,.btn-container .fret-choice-wrapper:last-of-type{margin-right:0}.span-2{grid-column:span 2}.btn-container input{all:unset;display:flex;flex-grow:1;flex-basis:0;text-align:center;width:100%;cursor:text}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.arrow-container{display:grid;flex-grow:1;flex-basis:0}.arrow{width:0;height:0;border:10px solid transparent;cursor:pointer;margin:auto}.arrow-up{border-top:0;border-bottom:10px solid black;align-self:self-end;margin-bottom:2px}.arrow-down{grid-row:2;border-top:10px solid black;border-bottom:0;align-self:self-start;margin-top:2px}.plus-icon-container{flex-grow:.4;flex-basis:0;background-color:#fff;margin:0 0 0 2px}.plus-icon-line{width:12px;height:2px;background-color:#000;position:absolute}.plus-icon-line2{rotate:90deg}.fret-dropdown-container{display:none;grid-row:2;border-radius:var(--border-radius);background-color:#fff}.show{display:unset}.fret-btn{position:relative}.open-string-btn{border-radius:var(--border-radius);background-color:var(--grey);margin:4px 0;padding:4px;text-align:center;width:86px;justify-self:end}.plus-icon{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.rotate45{rotate:45deg}.fret-choice{border-radius:var(--border-radius);background-color:var(--grey);margin:4px;padding:4px 2px;text-align:center;cursor:pointer}.selected{background-color:var(--selectGreen)}.ghost{background-color:var(--ghostColor)}select{-webkit-appearance:none;-moz-appearance:none;outline:none;border:none;width:100%;border-radius:var(--border-radius);font-size:inherit;text-align:center;cursor:pointer}.placeholder{height:18.5px}.switch-wrapper{display:flex;align-items:center;justify-content:end}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--selectGreen)}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.switch-takes-50{width:50%}.todo{opacity:.2;cursor:not-allowed}