:root{--font-cousine:"Cousine","Courier New",Courier,monospace;--default-size:16px;--fret-height:27px}@media (max-width:899px){:root{--default-size:11px;--fret-height:20px}}@media (min-width:900px) and (max-width:1199px){:root{--default-size:13px;--fret-height:22px}}@media (min-width:1200px){:root{--default-size:16px;--fret-height:27px}}.fretboard-container{display:flex;flex-direction:column;align-items:flex-start;max-width:1000px;margin:20px auto}.fretboard-wrapper{display:flex;flex-direction:row;align-items:center;width:100%}.fretboard-wrapper .string-names{display:flex;font-weight:700;flex-direction:column;justify-content:center;padding-right:10px;margin-top:2px}.fretboard-wrapper .fretboard{display:flex;flex-direction:column;padding:0;margin-left:0;position:relative;border:1px solid #ccc;box-shadow:0 4px 8px rgba(0,0,0,.3);width:100%}.fretboard-wrapper .string{display:flex;position:relative;height:27px;height:var(--fret-height)}.fretboard-wrapper .string,.maple .string{background:linear-gradient(90deg,#f0c9a0,#d5a87d,#c89c71,#d4ab82,#ca9c6e)}.rosewood .string{background:linear-gradient(90deg,#8b7265,#6a544b,#5e4a42,#533f38,#49342f)}.ebony .string{background:linear-gradient(90deg,#3a3832,#292721,#24221d,#1e1c19,#171512)}.fretboard-wrapper .string:before{content:"";position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:1px;background-image:url("data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7");background-repeat:repeat-x}.fretboard-wrapper .string:nth-last-child(6):before{height:.5px;background-image:none;background-color:#696969}.fretboard-wrapper .string:nth-last-child(5):before{height:1.5px;background-image:none;background-color:#696969}.fretboard-wrapper .string:nth-last-child(4):before{height:1.7px;background-image:none;background-color:#696969}.fretboard-wrapper .string:nth-last-child(3):before{height:2.5px}.fretboard-wrapper .string:nth-last-child(2):before{height:3px}.fretboard-wrapper .string:last-child:before{height:4px}.fretboard-wrapper .fret{flex:1 1;border-right:4px solid rgba(136,133,133,.5);display:flex;align-items:center;justify-content:center;height:100%;width:8%;position:relative;flex-direction:column}.startFretLabel{font-weight:700;background-color:var(--color-primary);color:white;text-align:center;margin:10px 35px;width:calc(var(--default-size) * 5.375);font-size:calc(var(--default-size) * 1.2)}.fretboard-wrapper .guitar-nut{border-left:5px solid #eee}.fretboard-wrapper .string-name{font-size:var(--default-size);margin-bottom:calc(var(--default-size) * .2);padding:0 8px}.fretboard-wrapper .chordname{font-weight:700;text-align:left;margin-bottom:5px;font-size:calc(var(--default-size) * 2);margin-left:calc(var(--default-size) * 3)}.fretboard-wrapper .bridge-string,.fretboard-wrapper .mute-string,.fretboard-wrapper .note{font-family:var(--font-cousine)!important;position:absolute;z-index:2;color:#fff;text-align:center;border-radius:50%;padding-top:2px;width:calc(var(--default-size) * 1.625);height:calc(var(--default-size) * 1.625);font-size:var(--default-size)}.fretboard-wrapper .bridge-string,.fretboard-wrapper .note{background:#222}.fretboard-wrapper .bridge-string,.fretboard-wrapper .mute-string{position:absolute;left:calc(var(--default-size) * -1)}.fretboard-wrapper .mute-string{color:#a52b31;font-weight:700}.fretboard-wrapper .marker{margin-top:calc(var(--fret-height) * .5);top:50%;transform:translate(-50%,-50%);z-index:1}.fretboard-wrapper .marker,.fretboard-wrapper .marker.double{width:15px;height:15px;background-color:#525252;border-radius:50%;position:absolute;left:50%}.fretboard-wrapper .marker.double{margin-top:38px;top:30%;transform:translateX(-50%)}.fretboard-wrapper .marker.double:after{content:"";margin-top:-60px;width:15px;height:15px;background-color:#525252;border-radius:50%;position:absolute;top:40%;left:50%;transform:translate(-50%)}.maple .marker,.maple .marker.double{background-color:#6a544b}.ebony .marker,.ebony .marker.double,.ebony .marker.double:after,.ebony .string:nth-last-child(4):before,.ebony .string:nth-last-child(5):before,.ebony .string:nth-last-child(6):before,.rosewood .marker,.rosewood .marker.double,.rosewood .marker.double:after,.rosewood .string:nth-last-child(4):before,.rosewood .string:nth-last-child(5):before,.rosewood .string:nth-last-child(6):before{background-color:#c0c0c0}.fretboard-wrapper .isClickable{cursor:pointer}.fretboard-wrapper .fret.isClickable:hover{background-color:rgba(255,255,255,.25)}.fretboard-wrapper .string-name.isClickable:hover{background-color:#ccc}.fretboard-wrapper .root-note{background:#603cb4}.fretboard_guide .A{background:Blue!important}.fretboard_guide .A♯,.fretboard_guide .B♭{background:#0000ff!important}.fretboard_guide .B{background:#800080!important}.fretboard_guide .C{background:#00008b!important}.fretboard_guide .C♯,.fretboard_guide .D♭{background:#33006f!important}.fretboard_guide .D{background:#1d1160!important}.fretboard_guide .D♯,.fretboard_guide .E♭{background:#720e9e!important}.fretboard_guide .E{background:#191970!important}.fretboard_guide .F{background:#000080!important}.fretboard_guide .F♯,.fretboard_guide .G♭{background:#7b68ee!important}.fretboard_guide .G{background:#4169e1!important}.fretboard_guide .A♭,.fretboard_guide .G♯{background:#4682b4!important}.no-scaling .fretboard-wrapper .string-name{font-size:16px!important;margin-bottom:calc(16px * .2)!important}.no-scaling .fretboard-wrapper .string{height:27px!important}.no-scaling .fretboard-wrapper .fret{width:75px!important}.no-scaling .startFretLabel{width:calc(16px * 5)!important;font-size:calc(16px * 1.2)!important}.no-scaling .fretboard-wrapper .chordname{font-size:calc(16px * 2)!important;margin-left:calc(16px * 3)!important}.no-scaling .fretboard-wrapper .mute-string{width:calc(16px * 1.625)!important;height:calc(16px * 2.4)!important;font-size:24px!important}.no-scaling .fretboard-wrapper .bridge-string,.no-scaling .fretboard-wrapper .note{width:calc(16px * 1.625)!important;height:calc(16px * 1.625)!important;font-size:16px!important}.no-scaling .fretboard-wrapper .bridge-string,.no-scaling .fretboard-wrapper .mute-string{left:calc(16px * -1)}