.guitar-neck{position:relative;width:100%;height:250px;background:#755628;box-shadow:inset -1px 0 11px #000000bf;display:flex;min-width:1200px}.string-tuning{flex:1;z-index:200;background-color:#231e17;border:0;font-weight:800;cursor:pointer;color:#fff}.string-tuning-container{width:30px;height:100%;background-color:#453113;display:flex;flex-direction:column}.open-notes{position:absolute;top:3px;left:-35px}.open-notes li{margin-bottom:20px;font-size:18px;color:#fff}.open-notes li.active{color:#fa990f}.fret-container{flex:1;height:100%;display:flex}.fret-space{flex:1;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.fret-dot{width:25px;height:25px;background:#453113;border-radius:50%}.fret-bar{width:3px;height:100%;background:#d7d6d6;border-right:2px solid #686868}.fret-index{position:absolute;bottom:-24px;color:#969696;font-size:15px}.strings-container{position:absolute;padding-left:30px;top:0;left:0;width:calc(100% - 35px);height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.string-container{flex:1;width:100%;display:flex;flex-direction:row;align-items:center;overflow:visible;position:relative}.string-render{position:absolute;background:#c8bb93;height:3px;width:100%;border-bottom:2px solid #958963;box-sizing:border-box;z-index:100}.note-container{height:12px;width:12px;flex:1;display:flex;align-items:center;justify-content:center;z-index:200}.note{height:20px;width:20px;border-radius:50%;background-color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid black}.note-off-key{opacity:.3}.note-root{background-color:#4fc184}.note-key-root{background-color:#faffc3}.notes{position:absolute;left:17px;top:-7px;width:100%;height:258px;overflow-x:hidden}.notes .mask{position:absolute;right:-189px;bottom:0;width:1184px;height:30px}.notes .mask ul{position:relative;float:left}.notes .mask ul li{float:left;width:30px;height:30px;margin-right:50px;background:#fa990f;color:#fff;border-radius:50%;text-align:center;line-height:30px;box-shadow:0 3px 5px #000000bf}.notes .mask.a{bottom:47px}.notes .mask.d{bottom:93px}.notes .mask.g{bottom:137px}.notes .mask.b{bottom:181px}.notes .mask.high-e{bottom:224px}.button{background-color:#fff;border:0;cursor:pointer}.button:hover{background-color:#f2f2f2}.button-selected{background-color:#0b8343;color:#fff}.button-selected:hover{background-color:#0b8343}.options-label{display:flex;font-weight:600;margin:8px 16px}.options-container{display:flex;margin:0 16px 16px}