/**
 * Music development for web
 * @source    http://dev.music.free.fr/index.html
 * @copyright Copyright (C) 2022 Christophe Poudras.
 * @license	  GNU General Public License version 2 or later.
 */
.keyWhite {
    stroke: gray;
    fill: #EEE
}

.keyBlack {
    stroke: gray;
    fill: black
}

.keySelected {
    stroke: gray;
    fill: #507fff
}

.keySelected.sensible {
    stroke: gray;
    fill: red
}

.keySelected.fourth {
    stroke: gray;
    fill: orange
}

.keySelected.highlight {
    stroke: gray;
    fill: green
}

.keySelected.optional {
    stroke: gray;
    fill: lightgray
}

.keySelected.red {
    stroke: gray;
    fill: red
}

.keySelected.lightred {
    stroke: gray;
    fill: lightcoral
}

.keySelected.blue {
    stroke: gray;
    fill: blue
}

.keySelected.lightblue {
    stroke: gray;
    fill: lightblue
}

.keySelected.green {
    stroke: gray;
    fill: green
}

.keySelected.lightgreen {
    stroke: gray;
    fill: lightgreen
}

.harmonic-sequence {
    display: none
}

br.chord-sequence {
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0
}

.chord-sequence {
    margin: 5px;
    display: inline-block;
    vertical-align: top
}

.mn-exp {
    font-size: 70%;
    vertical-align: text-top
}

.mn-sub {
    font-size: 60%;
    vertical-align: middle;
    line-height: 1em
}

.mn-sus {
    font-size: 60%;
    vertical-align: text-bottom;
    line-height: 80%
}

.mn-add {
    font-size: 60%;
    vertical-align: text-top;
    line-height: 1em
}

span.xl {
    font-size: .6em
}

.mn-over {
    position: relative
}

.mn-over span {
    position: absolute;
    top: -0.5em;
    left: 1px;
    font-size: .8em
}

.inversion-sup {
    position: absolute;
    font-size: 60%;
    vertical-align: text-top;
    line-height: 1em
}

.inversion-sub {
    position: absolute;
    font-size: 60%;
    vertical-align: text-bottom;
    line-height: 2.6em
}

ol.hs-item {
    display: table;
    float: left;
    border-collapse: collapse;
    border: 1px solid black;
    list-style-type: none;
    margin: 0
}

.hs-item li {
    display: table-cell;
    min-width: 60px;
    text-align: center;
    font-weight: bold;
    color: white
}

.hs-item li.hs-chord,
.hs-item li.hs-signature {
    display: table-header-group;
    color: black;
    border-bottom: 1px dashed gray
}

.hs-item li.hs-degree {
    display: table-header-group;
    color: black
}

.hs-item li.sus-add {
    font-size: 60%;
    vertical-align: text-top;
    position: relative;
    left: -24px
}

.hs-item ul.ul-sus-add {
    display: inline-table;
    list-style-type: none;
    vertical-align: top;
    margin-left: 3px
}

.hs-item li.li-sus-add {
    display: table-header-group;
    font-size: 60%;
    color: black;
    line-height: 90%
}

.hs-item li.hs-function.T {
    background-color: #3f3f3f
}

.hs-item li.hs-function.Ts {
    background-color: #3f3f3f;
    color: red
}

.hs-item li.hs-function.t {
    background-color: #bfbfbf
}

.hs-item li.hs-function.ts {
    background-color: #bfbfbf;
    color: red
}

.hs-item li.hs-function.D {
    background-color: #f00
}

.hs-item li.hs-function.Dst {
    background-color: #f00;
    color: black
}

.hs-item li.hs-function.d {
    background-color: brown
}

.hs-item li.hs-function.dst {
    background-color: brown;
    color: black
}

.hs-item li.hs-function.D2 {
    background-color: #92d050
}

.hs-item li.hs-function.D2st {
    background-color: #92d050;
    color: black
}

.hs-item li.hs-function.SD {
    background-color: #0070c0
}

.hs-item li.hs-function.SD2 {
    background-color: #3fa4f0
}

.hs-item li.hs-function.UNK {
    background-color: orange
}

.hs-item li.hs-function.T:before,
.hs-item li.hs-function.Ts:before,
.hs-item li.hs-function.t:before,
.hs-item li.hs-function.ts:before {
    content: "T"
}

.hs-item li.hs-function.d:before,
.hs-item li.hs-function.dst:before,
.hs-item li.hs-function.D:before,
.hs-item li.hs-function.Dst:before {
    content: "D"
}

.hs-item li.hs-function.D2:before,
.hs-item li.hs-function.D2st:before {
    content: "D²"
}

.hs-item li.hs-function.SD:before {
    content: "SD"
}

.hs-item li.hs-function.SD2:before {
    content: "SD²"
}

.hs-item li.hs-function.UNK:before {
    content: "?"
}

.hs-function div {
    min-width: 60px;
    color: white;
    font-weight: bold;
    text-align: center
}

.hs-function div.T {
    background-color: #3f3f3f
}

.hs-function div.Ts {
    background-color: #3f3f3f;
    color: red
}

.hs-function div.t {
    background-color: #bfbfbf
}

.hs-function div.ts {
    background-color: #bfbfbf;
    color: red
}

.hs-function div.D {
    background-color: #f00
}

.hs-function div.Dst {
    background-color: #f00;
    color: black
}

.hs-function div.d {
    background-color: brown
}

.hs-function div.dst {
    background-color: brown;
    color: black
}

.hs-function div.D2 {
    background-color: #92d050
}

.hs-function div.D2st {
    background-color: #92d050;
    color: black
}

.hs-function div.SD {
    background-color: #0070c0
}

.hs-function div.SD2 {
    background-color: #3fa4f0
}

.hs-function div.UNK {
    background-color: yellow
}

.hs-function div.T:before,
.hs-function div.Ts:before,
.hs-function div.t:before,
.hs-function div.ts:before {
    content: "T"
}

.hs-function div.d:before,
.hs-function div.dst:before,
.hs-function div.D:before,
.hs-function div.Dst:before {
    content: "D"
}

.hs-function div.D2:before,
.hs-function div.D2st:before {
    content: "D²"
}

.hs-function div.SD:before {
    content: "SD"
}

.hs-function div.SD2:before {
    content: "SD²"
}

.hs-function div.UNK:before {
    content: "?"
}

.sig-major {
    background-color: #dfd;
    font-weight: bold
}

.sig-major6 {
    background-color: #afa;
    font-weight: bold
}

.sig-majorM7 {
    background-color: #008040;
    font-weight: bold
}

.sig-major7 {
    background-color: #f2dede;
    font-weight: bold
}

.sig-augmented {
    background-color: #8c8;
    font-weight: bold
}

.sig-augmentedM7 {
    background-color: #aca;
    font-weight: bold
}

.sig-minor {
    background-color: #ffb;
    font-weight: bold
}

.sig-minor6 {
    background-color: #ff9;
    font-weight: bold
}

.sig-minor7 {
    background-color: #ffd;
    font-weight: bold
}

.sig-minorM7 {
    background-color: #dda;
    font-weight: bold
}

.sig-minor7b5 {
    background-color: #ddcdaa;
    font-weight: bold
}

.sig-diminished {
    background-color: #ffefcc;
    font-weight: bold
}

.sig-diminished7 {
    background-color: #ffa500;
    font-weight: bold
}

.sig-suspended4 {
    background-color: #faa;
    font-weight: bold
}

.sig-diminished1 {
    background-color: #ffefcc;
    font-weight: bold
}

.sig-diminished2 {
    background-color: #ffac30;
    font-weight: bold
}

.sig-diminished3 {
    background-color: #ebabf5;
    font-weight: bold
}

.harmonic-diagram {
    display: none
}

button.tone {
    height: 30px;
    min-width: 38px;
    margin: 2px 2px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: solid black 2px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25)
}

button.tone.end {
    margin-right: 8px
}

button.tone.selected {
    color: white;
    background-color: brown
}

button.tone:hover {
    color: white;
    background-color: red
}

button.tone:focus {
    outline: 0
}

button.tonality {
    color: white;
    width: 44px;
    height: 28px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: solid black 1px
}

button.tonality.major {
    background-color: #555
}

button.tonality.minor {
    background-color: #777
}

button.tonality.selected {
    background-color: #000
}

button.tonality:hover {
    background-color: #0f71ba
}

button.tonality:focus {
    outline: 0
}

button.signature {
    height: 30px;
    min-width: 80px;
    margin: 2px 2px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: solid black 2px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25)
}

button.signature.selected {
    color: white;
    background-color: #2d6987
}

button.signature:hover {
    color: white;
    background-color: lightblue
}

button.signature:focus {
    outline: 0
}

.interval {
    height: 30px;
    min-width: 38px;
    margin: 2px 2px;
    padding: 2px 4px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: solid black 2px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25)
}

button.interval.selected {
    color: white;
    background-color: brown
}

button.interval:hover {
    color: white;
    background-color: red
}

button.interval:focus {
    outline: 0
}

button.tension {
    height: 30px;
    min-width: 100px;
    margin: 2px 2px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: solid black 2px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25)
}

button.tension.selected {
    color: white;
    background-color: #2d6987
}

button.tension:hover {
    color: white;
    background-color: lightblue
}

button.tension:focus {
    outline: 0
}

.tonic,
.T1 {
    color: black;
    font-weight: bold
}

.T2 {
    color: blue
}

.T3 {
    color: brown
}

.fourth,
.T4 {
    color: orange;
    font-weight: bold
}

.T5 {
    color: green;
    font-weight: bold
}

.T6 {
    color: purple
}

.T7 {
    color: red
}

.TT {
    color: red;
    font-weight: bold
}

.T2M {
    color: blue;
    font-weight: bold
}

.T3M {
    color: brown;
    font-weight: bold
}

.T4A {
    color: orange
}

.T5A {
    color: green
}

.T6M {
    color: purple;
    font-weight: bold
}

.sensible,
.T7M {
    color: red;
    font-weight: bold
}

.T7D {
    color: red;
    font-weight: 200
}

.fourth2 {
    color: blue;
    font-weight: bold
}

.sensible2 {
    color: green;
    font-weight: bold
}

.fnT {
    font-weight: bold;
    background-color: #3f3f3f;
    color: white
}

.fnTs {
    font-weight: bold;
    background-color: #3f3f3f;
    color: red
}

.fnTl {
    font-weight: bold;
    background-color: #bfbfbf;
    color: white
}

.fnTls {
    font-weight: bold;
    background-color: #bfbfbf;
    color: red
}

.fnD {
    font-weight: bold;
    background-color: #f00;
    color: white
}

.fnDl {
    font-weight: bold;
    background-color: #c00000;
    color: white
}

.fnDst {
    font-weight: bold;
    background-color: #f00;
    color: black
}

.fnSD {
    font-weight: bold;
    background-color: #0070c0;
    color: white
}

.fnD2 {
    font-weight: bold;
    background-color: #92d050;
    color: white
}

.fnD2st {
    font-weight: bold;
    background-color: #92d050;
    color: black
}

.fnSD2 {
    font-weight: bold;
    background-color: #3fa4f0;
    color: white
}

.fnHarmo.fnT:before {
    content: "T"
}

.fnHarmo.fnD:before {
    content: "D"
}

.fnHarmo.fnSD:before {
    content: "SD"
}

.xxl {
    font-size: 1.5em
}

.chord-name {
    font-weight: bold;
    width: 60px;
    height: 30px;
    display: inline-block;
    text-align: right;
    padding-top: 36px
}

.chord.tonic {
    background-color: #f8f8f8;
    font-weight: bold
}

.chord.selected {
    background-color: lightgray;
    color: white;
    font-weight: bold
}

.chord.enharmonic {
    font-style: italic
}

.sig-major {
    background-color: #dfd;
    font-weight: bold
}

.sig-major6 {
    background-color: #afa;
    font-weight: bold
}

.sig-majorM7 {
    background-color: #008040;
    font-weight: bold
}

.sig-major7 {
    background-color: #f2dede;
    font-weight: bold
}

.sig-augmented {
    background-color: #8c8;
    font-weight: bold
}

.sig-augmentedM7 {
    background-color: #aca;
    font-weight: bold
}

.sig-minor {
    background-color: #ffb;
    font-weight: bold
}

.sig-minor6 {
    background-color: #ff9;
    font-weight: bold
}

.sig-minor7 {
    background-color: #ffd;
    font-weight: bold
}

.sig-minorM7 {
    background-color: #dda;
    font-weight: bold
}

.sig-minor7b5 {
    background-color: #ddcdaa;
    font-weight: bold
}

.sig-diminished {
    background-color: #ffefcc;
    font-weight: bold
}

.sig-diminished7 {
    background-color: #ffa500;
    font-weight: bold
}

.sig-suspended4 {
    background-color: #faa;
    font-weight: bold
}

.abc-source {
    display: none

}

.full-score {
    margin-left: -20px
}

.abc-follow {
    fill: #00d000;
    fill-opacity: 0;
    z-index: 15
}

.abc-player {
    width: 36px;
    height: 36px;
    background-color: transparent;
    border-collapse: collapse;
    color: transparent;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABmNJREFUeNpMiSEOAEEIxGYv80GewoNJMDg8cjbkzFZUtEcSXriqKu0giW9DZsLdERF/6G6YGWYGVwAxopvBzMrKukVJSWnpp0+fGiZPntzCcO7cuf9Hjhz5r6en9//27dv/mf/8+TNHSEioyMbGhsHe3p4RIIAYQGaAcHd3995fv379//bt2//fv3//B/K1QOJgSx4/fvwfaCbYksuXLzPo6uqC2W/fvoU4/N27dyBFYEFRUVGG+/fvM8DcD7ciJiaGYebMmWAHVVVV/YeJAwQQhj/QAROMAfIC0Of/f/z48X/btm1wXWATgA6EOxIGnj17xmBmZsbIVFtbWwFy4MePHxk0NDTANAjz8fFBgs7U1HS1oqIiD9BosG+2bNnCICgoyMDJyckwadKkLsbs7GwDLy+v8//+/WNgZmZm+Pv3L1gnSIGzszMj2A2rVq36D5KA+QgUkbt27foyZ84cXuRwuLpp06b/QCv+A9nJMHGAAMIIh76+PhizGogDgdgYiI8DcS4Qny0qKkINKJhJINzR0fENFJnAFPP/1atXGPjDhw//b9y48R+ozg/DBRcuXPgvICAA9yQ+AAqA2bNnP62vr5cBG1BZWXk1Li5OC2g7isLExES4K4HxwaCsrAyJPUZGBhEREQY5OTlGcGoCRvGdr1+/aoEiCBmAEu2tW7cYQP4GuQ7oBUj6YGICuxRoAMILwAT8X19fn+HLly8M+BIYKC6lpKQY5s2blz5jxoxZKLGQkJBgZmdnd1JcXByUvhiAOQNsGMhGkL9BaX3+/PlfFixYwIuSGCkBAAFYq3qWhqEo+gbplOwZCmbLZHESzA8QXNxTyBLzFzpVkEJ+gEMgOHfMIA6CkClTMAQcBPdKJYQMHToVhHjOwzyTfkz64BLIu+/kvnvPOfkzwNEBElmIe8Q5ZYx4QtzukGibSGikEcdxA+uQwiOpGJvNplkul3SK126+rL7DwlOSiWyr63qHhWQnwZD31QVQPUjTtKFg2fmDDQOBNE0TYRi+TafTkfKM2Wz2YlmW5ADKPRit6Mfj8QnODBQAXOGMLGRCGzQ/z/N67xikO8mEPt0pAFiK3OgmDodDsVqthOM4IgiC3t56vSbAdc/2aPbdJNM0pYlRQJiAgPJ6+1gDxYOyLJVA2mUYhoDZC13XOSEJ8nNQ4B/CD74rgCzLhG3bsop2MWkymYjFYkFT/nVqfIiuiSvcqCvAdy/os6yg7TicVEq5OwVWRICiKDjKBwUAWSZRFH1ug+w7TJ7keT7aKybIufR936iqSl6HYCQPr8NecNRJklxCzs97AVzX5eMKDXyELwj8SqULsclg6sd8Pj/+dzl/C9B8GbumFUVh/A5FCQ4OggQchICDFkEQdBCXQCSLRgoFwcHNgKugYwcDouDq4BRTBxcbyJJCEYpboZPBwT8g4BoIBAKFnt/lXXk1z9eqSy887tPHe/fcc77zfd89+AOHjnduD3u9nrk9l6srKYlHIhEVDoe1/MHstAU5ZyNABjsjv/EIn+r1+ue9M9DtdlMyfclkMiHReV19BJrCMjPMDDoMWxAQF4Wfz+dqOp0+y6OPjUbj6z8F0G63j2X6mcvlQjAMEBTQq11LRTBkyePxaBBNJhM0Lysa+rA1gFardSocMC0Wi0p0UmP/YJBZgfh8PjWbzXAAlyLSgzcBCNnEg8HgvFQqabZyW5x2kfqqRCKxUxD0ovShWi6XH4SPb/8AoaT5Kp1OawqliU19nQb+0y5wBIINjcVi292m4IRSJpNJtVgsruSvNwGkoCLD626ph6qRJjuVDwaDNY2hD4VCYe2FzGBTWBzJSKzZbB51Op2XdQCC8ieRtGMW5iNuGSCAQCCgy8TiUByZoz3L5bLWEaTPzu6UgSxYqvYqFuJlMwPX4h3bvEyqjC1yGnwY542FEleoTRqnGLMgXOCEAQYKwVqOXVCr1X7k8/kUYAGI24Jgp2I91KYd/VsXcD8ejx/l75N+v//qyAPVavU+m82ek2ZjFCjHPjxAyuEBv9+vVqsVpLSUR+8FL79cmVDcCCz4XcjoSFpTO1VDSG7BsKjZsdfr1W3Huyi6tN6FWOK7ncSoUqmEZLoRXJxGo1ENPNJOMHZKtrMeNhosyIIcV2G98nA4fNhLDentjRG3Tk5nHFWsE5SyDDAI/GYZYU5VajQa/f9y/Bt10JVuRlKADQAAAABJRU5ErkJggg==');
    background-size: 32px 32px
}

.abc-player.ready {
    background: url('data:image/png;base64,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')
}

.abc-player.playing {
    background: url('data:image/png;base64,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')
}

.abc-tempo {
    width: 48px;
    height: 8px
}

.abc-dot {
    position: relative;
    top: -6.5px;
    cursor: pointer;
    height: 8px;
    width: 8px;
    margin-right: 2px;
    border-radius: 50%;
    display: inline-block
}

span.abc-dot:last-child {
    margin-right: 0
}

.dot0 {
    background-color: #003c00
}

.dot1 {
    background-color: #005000
}

.dot2 {
    background-color: #006400
}

.dot3 {
    background-color: #007800
}

.dot4 {
    background-color: #008c00
}

.dot5 {
    background-color: #00a000
}

.dot6 {
    background-color: #00b400
}

.dot7 {
    background-color: #00c800
}

.dot8 {
    background-color: #00dc00
}

.dot9 {
    background-color: #00f000
}

.abc-dot.selected {
    background-color: #800
}

.abc-dot:hover {
    background-color: #F00
}

.abc-voices {
    width: 72px
}

.abc-voice {
    font-size: .8em
}

.abc-hidden {
    display: none
}

@media print {

    .abc-player,
    .abc-player.ready,
    .abc-voices,
    .abc-tempo,
    .abc-dot,
    .abc-player.playing {
        display: none
    }
}