.scale-fretboard{border-collapse:collapse;font-family:sans-serif;font-size:1.2rem;color:#333}.dark-mode .scale-fretboard{color:#eee}.scale-fretboard th,.scale-fretboard td{border:none;padding:0;text-align:center;width:5rem;height:3.5rem;position:relative;display:flex;justify-content:center;align-items:center}.scale-fretboard .fret-numbers td{font-weight:700;background-color:transparent;height:30px;color:#555}.dark-mode .scale-fretboard .fret-numbers td{color:#bbb}.scale-fretboard .fret-numbers td:first-child{background-color:transparent}.scale-fretboard .string-name{font-weight:700;background-color:transparent;width:98px;flex-shrink:0;color:#555;top:1.5rem}.dark-mode .scale-fretboard .string-name{color:#bbb}.scale-fretboard .open-string-note{min-width:45px;border-right:transparent;border-right:transparent}.scale-fretboard .string:nth-of-type(n+3):nth-of-type(-n+7) td.open-string-note{border-right:10px solid #03407a}.scale-fretboard td:not(.string-name):not(.fret-numbers td):not(.open-string-note){border-right:2px solid #044d93}.scale-fretboard tr:nth-of-type(2) td:not(.string-name){border-right:transparent!important}.scale-fretboard .string:nth-of-type(3) td:not(.string-name){border-top:1.2px dashed #0473da;border-bottom:1.5px dashed #0473da}.scale-fretboard .string:nth-of-type(5) td:not(.string-name){border-top:2px dashed #0473da;border-bottom:2.5px dashed #0473da}.scale-fretboard .string:nth-of-type(7) td:not(.string-name){border-top:3.2px dashed #0473da;border-bottom:3.5px dashed #0473da}.scale-fretboard .fret-numbers .fret-marker-single::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:10px;height:10px;background-color:#888;border-radius:50%}.dark-mode .scale-fretboard .fret-numbers .fret-marker-single::after{background-color:#836b03}.scale-fretboard .fret-numbers .fret-marker-double::after,.scale-fretboard .fret-numbers .fret-marker-double::before{content:'';position:absolute;bottom:-10px;width:10px;height:10px;background-color:#888;border-radius:50%}.dark-mode .scale-fretboard .fret-numbers .fret-marker-double::after,.dark-mode .scale-fretboard .fret-numbers .fret-marker-double::before{background-color:#836b03}.scale-fretboard .fret-numbers .fret-marker-double::before{left:calc(50% - 15px)}.scale-fretboard .fret-numbers .fret-marker-double::after{left:calc(50% + 5px)}.scale-fretboard .note{background-color:#4CAF50;border-radius:50%;width:28px;height:28px;line-height:28px;display:flex;justify-content:center;align-items:center;font-size:1rem;font-weight:700;color:#fff;box-sizing:border-box;position:relative;top:1.9rem;left:1.2rem;z-index:2}.dark-mode .scale-fretboard .note{background-color:#388E3C;color:#fff}.scale-fretboard .root-note{background-color:#FFC107;color:#333;width:28px;height:28px;font-size:1.1rem}.dark-mode .scale-fretboard .root-note{background-color:#FFA000;color:#333}@media (max-width: 768px){.scale-fretboard{display:block;width:100%;overflow-x:auto;overflow-y:hidden;border:none;padding-bottom:25px}.scale-fretboard thead,.scale-fretboard tbody,.scale-fretboard tr{display:block}.scale-fretboard tr{display:flex;flex-direction:row;height:40px}.scale-fretboard th,.scale-fretboard td{flex-shrink:0;width:50px;height:47px;border-top:none}.fret-numbers td{border:0;left:45px}.scale-fretboard .note{left:1px}}@media (min-width: 769px){.scale-fretboard{display:table;width:auto;overflow-x:visible}.scale-fretboard thead,.scale-fretboard tbody,.scale-fretboard tr{display:table-row-group}.scale-fretboard th,.scale-fretboard td{display:table-cell}}