.root-note-selected,.chord-type-selected{color:#fff!important}.cf_loading{z-index:9999;color:orange;letter-spacing:2px;background:#2e2e2ef2;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex;position:fixed;inset:0}.guitar-neck{background:linear-gradient(10.56deg,#27272a 7.85%,#3f3f46 92.15%);position:relative;overflow-x:hidden;max-width:100%!important}.guitar-neck .string{align-items:center;margin-bottom:0;display:flex;position:relative}.guitar-neck .string:last-child{border-bottom:none}.guitar-neck .string .v{z-index:0;background:linear-gradient(359.97deg,#504f54 .03%,#b1b1b1 16.02%,#13181c99 40.01%,#c6c6c8 79.98%,#fff 99.97%);height:2px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.guitar-neck #string-6 .v{height:5px}.guitar-neck .string.muted .v{opacity:.5;background:#e5ac00!important}.guitar-neck .string.open .v{opacity:.5;background:#378ac9!important}.guitar-neck .string.fretted .v{height:3px;background:linear-gradient(359.97deg,#504f54 .03%,#b1b1b1 16.02%,#13181c99 40.01%,#c6c6c8 79.98%,#fff 99.97%)!important}.guitar-neck .string:before{content:"";z-index:10;background:0 0;border-radius:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:18px;font-weight:700;display:flex;position:absolute;left:8px}.guitar-neck .string.muted:before{content:""!important;z-index:1!important;background:#fbbf22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 4 L16 16 M16 4 L4 16' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 50%/14px 14px no-repeat!important;border-radius:50%!important}.guitar-neck .string.open:before{content:""!important;z-index:1!important;background:#378ac9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 50%/14px 14px no-repeat!important;border-radius:50%!important}.guitar-neck .string .note{cursor:pointer;z-index:3;flex:1;justify-content:center;align-items:center;height:32px;display:flex;position:relative}.guitar-neck .string .note:has(img){z-index:2}.guitar-neck .string .note:has(img) .marker{z-index:10!important}.guitar-neck .string .note:has(img) .marker p{z-index:15!important}.guitar-neck #string-1 .note,.guitar-neck #string-6 .note{height:44px}.guitar-neck .string .note:first-child{border-left:none}.guitar-neck .string .note:last-child{border-right:2px solid #666}.guitar-neck .string .note .plectrum{color:#000;text-align:center;z-index:10;pointer-events:none;background:url(https://images.guitartricks.com/toolbox-assets/chord-finder/plectrum.png) 0 -1px no-repeat;width:42px;height:33px;font-size:12px;font-weight:700;line-height:12px;display:none;position:absolute;top:50%;left:3px;transform:translateY(-50%)}.guitar-neck .string .note .plectrum span{margin:10px 0 0 -5px;padding:0;display:block}.guitar-neck .string .note:hover .plectrum{display:block}.guitar-neck .string .note img{position:relative;z-index:-1!important}.guitar-neck #string-1 .note{z-index:2!important}.guitar-neck #string-1 .note .plectrum{z-index:10!important}.guitar-neck .string .note .marker{cursor:pointer;z-index:3;color:#0000;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;margin-right:5px;font-size:14px;font-weight:700;transition:all .2s;display:flex;position:relative}.guitar-neck .string .note .marker:hover{opacity:.7;transform:scale(1.1)}.guitar-neck .string .note .marker.active,.guitar-neck .string .note .marker.muted,.guitar-neck .string .note .marker.x{color:#000!important;opacity:1!important;background:orange!important;transform:scale(1.1)!important}.guitar-neck .string .note .marker.open,.guitar-neck .string .note .marker.o{color:#fff!important;opacity:1!important;background:#007bff!important;transform:scale(1.1)!important}.guitar-neck .string .note .marker p{color:#fff;text-align:center;z-index:7;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;margin:0 auto;font-size:14px;font-weight:700;line-height:25px;display:flex;position:relative}.guitar-neck .string .note .marker p.fret_note{color:#000!important;background:#fff!important}.guitar-neck .string .note .marker p.root_fret_note{color:#fff!important;background:#cd2828!important}.guitar-neck .string:nth-child(3) .note.pos3:before,.guitar-neck .string:nth-child(3) .note.pos5:before,.guitar-neck .string:nth-child(3) .note.pos7:before,.guitar-neck .string:nth-child(3) .note.pos9:before,.guitar-neck .string:nth-child(3) .note.pos15:before{content:"";z-index:1;opacity:.3;background:#fff;border-radius:50%;width:20px;height:20px;position:absolute;top:100%;left:50%;transform:translate(-50%,-50%)}.guitar-neck .string:nth-child(2) .note.pos12:before,.guitar-neck .string:nth-child(4) .note.pos12:before{content:"";z-index:1;opacity:.3;background:#fff;border-radius:50%;width:20px;height:20px;position:absolute;left:50%;transform:translate(-50%)}.guitar-neck .string:nth-child(2) .note.pos12:before{top:5px}.guitar-neck .string:nth-child(4) .note.pos12:before{bottom:-26px}.variationStep div:hover{color:#fff;background:#757575}.variationStep div.active{color:#fbbf22;background:#fbbf2233}.left-cut-dot:after{content:"";background:#202022;width:5px;height:4px;position:absolute;top:50%;left:-3px;transform:translateY(-50%)}.right-cut-dot:before{content:"";background:#202022;width:5px;height:4px;position:absolute;top:50%;right:-3px;transform:translateY(-50%)}.chord_box{display:none}.root-note-dropdown,.chord-type-dropdown{min-width:200px;position:relative}.root-note-dropdown-content,.chord-type-dropdown-content{opacity:0;visibility:hidden;z-index:1000;background:#202022;border:1px solid #3f3f46;border-radius:12px;width:100%;max-width:356px;transition:all .2s;position:absolute;bottom:calc(100% + 8px);left:0;right:0;transform:translateY(-10px)}.chord-type-dropdown-content{max-height:400px;overflow-y:auto}.root-note-dropdown.open .root-note-dropdown-content,.chord-type-dropdown.open .chord-type-dropdown-content{opacity:1;visibility:visible;transform:translateY(0)}.root-note-btn{color:#a1a1aa;white-space:nowrap;background:#202022;border:1px solid #3f3f46;outline:none;transition:all .2s}.root-note-btn:hover{color:#e4e4e7;background:#3f3f46}.root-note-btn.active{color:#000;background:#49b2b3;border-color:#49b2b3}.root-note-btn.active:hover{background:#0f766e;border-color:#0f766e}.chord-type-btn{color:#a1a1aa;cursor:pointer;background:0 0;border:none;outline:none;padding:10px 16px;transition:all .15s}.chord-type-btn:hover{color:orange;background:#3a3a3a}.chord-type-btn.active{color:orange;background:#3a3a3a;padding-right:40px;font-weight:600;position:relative}.chord-type-btn.active:after{content:"✓";color:orange;font-size:16px;font-weight:700;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.chord-type-dropdown-content::-webkit-scrollbar{width:0}.play_button a:after,.play_button button:after{content:"▶";color:#000;margin-left:3px;font-size:24px}.play_button button.playing:after{content:"❚❚";letter-spacing:-3px;margin-left:0;font-size:20px}.play_button button.playing{opacity:.8}.volume_meter{cursor:pointer;background:#52525b;border-radius:4px;flex:1;min-width:150px;max-width:300px;height:4px;position:relative;overflow:hidden}.volume_meter_full{z-index:1;background:#fff;border-radius:4px;width:100%;min-width:0;height:100%;transition:width .2s;position:absolute;top:0;left:0}.volume_meter_blank{z-index:0;background:0 0;height:100%;position:absolute;top:0;right:0}.guitar-neck .note img,.guitar-neck img{z-index:-100!important;pointer-events:none!important;position:absolute!important}@media (prefers-contrast:high){.guitar-neck .string .note .marker.note,.guitar-neck .string .note .marker.root{border:3px solid #fff}.guitar-neck .string .note .marker.open{border:3px solid #007bff}}@media (prefers-reduced-motion:reduce){.guitar-neck .string .note .marker,.play_button a,.play_button button,.variationStep div{transition:none!important}}.guitar-neck .string .note.fret-hidden,.cf-fretboard-container>div:first-child>div.fret-hidden{display:none!important}
