.container-guitar-fretboard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.guitar-fretboard {
    width: var(--thirds-circle-diameter);
    display: flex;
    flex-direction: column;
    /* border: 2px solid var(--bgcolor-light);
    border-top: none; */
    border-bottom: 2px solid var(--bgcolor-light);
}

.guitar-fretboard::-webkit-scrollbar {
    display: none;
}

.guitar-string {
    display: flex;
    background-color: var(--bgcolor-dark);
    border-right: 2px solid var(--bgcolor-light);
}

.string-index {
    border-right: 2px solid var(--bgcolor-dark);
}

.guitar-fret {
    width: calc(var(--thirds-circle-diameter) / 26);
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-right: 4px solid var(--gray);
    font-weight: bold;
}

.guitar-fret a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--key-length);
    pointer-events: auto;
    color: inherit;
}

.guitar-fret-index {
    width: calc(var(--thirds-circle-diameter) / 26);
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-right: 4px solid var(--bgcolor-dark);
    font-weight: bold;
    color: var(--gray);

    position: relative;
}

.key {
    visibility: hidden;
    /* visibility: visible; */
    position: relative;
    display: inline-block;
}

.marked {
    visibility: visible;
    /* visibility: hidden; */
}

.index {
    background-color: var(--bgcolor-light);
    border-right: 2px solid var(--bgcolor-light);
    color: var(--gray);
}

.fret-index {
    border-left: none;
    border-right: none;
    color: var(--gray);
}

.fretmark {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: var(--key-shape-circle);
    background-color: var(--gray);
    z-index: 8000;
    pointer-events: none;
}

.first {
    border-top: 2px solid var(--bgcolor-light);
}

.menu {
    color: var(--gray);
    text-align: left;
    display: flex;
    justify-content: center;
    flex-direction: row;
}


.menu-inner {
    display: flex;
}

.menu-inner ul {
    list-style-type: none;
    padding-left: 10px;
}

.active {
    text-decoration: underline;
}

body, .guitar-fret-index, .index, a, .menu, h1, h2 { -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Standard syntax */ user-drag: none;  -webkit-user-drag: none; }

.guitar-fret-index:nth-child(5),
.guitar-fret-index:nth-child(7),
.guitar-fret-index:nth-child(9),
.guitar-fret-index:nth-child(11),
.guitar-fret-index:nth-child(14),
.guitar-fret-index:nth-child(17),
.guitar-fret-index:nth-child(19),
.guitar-fret-index:nth-child(21),
.guitar-fret-index:nth-child(23),
.guitar-fret-index:nth-child(26)
{
	text-decoration: overline solid 2px;
}