.chord {
    font-family: sans-serif;
    margin-bottom: 20px;
    cursor: default;
}
.chord,
.chord td,
.chord th {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    padding: 0;
}
.chord td,
.chord th {
    border-bottom: 2px solid #044d93;
}
.chord td:last-child,
.chord th:last-child {
    border-bottom: none;
}
.chord thead th {
    font-size: 20px;
}
.chord thead td {
    padding-top: 10px;
}
.chord tbody td {
    border-left: 1.5px dashed #0473da;
    height: 5rem;
}
.chord tbody :first-child,
.chord thead :first-child {
    border: none;
    width: 4rem;
}
.chord tbody tr:first-child td {
    border-top: 12px solid #03407a;
    height: 6rem;
}
.chord tbody tr:first-child td:first-child,
.chord tbody tr:first-child td:last-child {
    border-top: 10px solid transparent;
}
@media (min-width: 768px) {
    .chord tbody td {
        border-left: 1.5px dashed #0473da;
        height: 4.3rem;
    }
    .chord tbody :first-child,
    .chord thead :first-child {
        border: none;
        width: 3.3rem;
    }
    .chord tbody tr:first-child td {
        border-top: 10px solid #03407a;
        height: 5.3rem;
    }
    .chord tbody tr:first-child td:first-child,
    .chord tbody tr:first-child td:last-child {
        border-top: 10px solid transparent;
    }
}
.chord tbody tr:first-child td:nth-child(2),
.chord tbody tr:nth-child(2) td:nth-child(2),
.chord tbody tr:nth-child(3) td:nth-child(2),
.chord tbody tr:nth-child(4) td:nth-child(2) {
    border-left: 3px dashed #0473da;
}
.chord tbody tr:first-child td:nth-child(3),
.chord tbody tr:nth-child(2) td:nth-child(3),
.chord tbody tr:nth-child(3) td:nth-child(3),
.chord tbody tr:nth-child(4) td:nth-child(3) {
    border-left: 2.5px dashed #0473da;
}
.chord tbody tr:first-child td:nth-child(4),
.chord tbody tr:nth-child(2) td:nth-child(4),
.chord tbody tr:nth-child(3) td:nth-child(4),
.chord tbody tr:nth-child(4) td:nth-child(4) {
    border-left: 2px dashed #0473da;
}
.chord tbody tr:first-child td:nth-child(5),
.chord tbody tr:nth-child(2) td:nth-child(5),
.chord tbody tr:nth-child(3) td:nth-child(5),
.chord tbody tr:nth-child(4) td:nth-child(5) {
    border-left: 2px dashed #0473da;
}
.chord .cj {
    text-align: center;
    padding-bottom: 10px;
}
.chord i {
    font-style: normal;
    margin-left: -30%;
}
.chord i.open:before {
    content: "\039f";
    margin-left: -2.6rem;
    font-size: 1.8rem;
}
.chord i.muted:before {
    content: "\03a7";
    margin-left: -2.6rem;
    font-size: 1.8rem;
}
.chord i.dot {
    background: #388e3c;
    border-radius: 50%;
    display: block;
    width: 2.3rem;
    height: 2.3rem;
    font-size: 17px;
    color: #fff;
    text-align: center;
}
.chord i.slurS:before {
    content: "\01D177";
}
.chord i.slur:before {
    content: "\2040";
    width: 500px;
}
.fret,
.sn td {
    font-size: 0.8em;
    opacity: 0.8;
}
.fret {
    padding-right: 14px !important;
}
.sn td {
    border: none !important;
}
.sn td i {
    display: block;
    margin-left: -50%;
}
.barra {
    display: block;
    position: absolute;
    background: #388e3cb5;
    height: 2.3rem;
    border-radius: 1.2rem;
    margin-left: -1.1rem;
    z-index: -1;
}