#chordsheet {
  box-sizing: border-box;
  color: var(--text);
  background-color: var(--bg-sheet);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  color: var(--gray);
}
#chordsheet h1 {
  color: var(--accent);
}
#chordsheet h2 {
  color: var(--gray);
}
#chordsheet::-webkit-scrollbar {
  width: 12px;
}
#chordsheet::-webkit-scrollbar-track {
  background: var(--bg-sheet);
}
#chordsheet::-webkit-scrollbar-thumb {
  background-color: var(--gray);
  border-radius: 20px;
  border: 3px solid var(--bg-sheet);
}
#chordsheet #chordsheetContent {
  margin-bottom: 10em;
}
#chordsheet.multicolumns {
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#chordsheet.multicolumns::-webkit-scrollbar {
  width: 12px;
}
#chordsheet.multicolumns::-webkit-scrollbar-track {
  background: var(--bg-sheet);
}
#chordsheet.multicolumns::-webkit-scrollbar-thumb {
  background-color: var(--gray);
  border-radius: 20px;
  border: 3px solid var(--bg-sheet);
}
#chordsheet.multicolumns .sd-header {
  margin-bottom: .3em;
}
#chordsheet.multicolumns > p {
  margin-bottom: 1.5em;
}
#chordsheet.multicolumns section {
  clear: both;
}
#chordsheet.multicolumns section > div {
  margin-bottom: .5em;
}
#chordsheet.multicolumns section > div:last-child {
  margin-bottom: 2.5em;
}
#chordsheet.multicolumns .ref,
#chordsheet.multicolumns .ref.open,
#chordsheet.multicolumns h3 {
  margin: 0;
  margin-bottom: 1em;
  width: auto;
  height: auto;
  line-height: 1em;
  text-align: left;
}
#chordsheet.multicolumns p {
  margin: 0;
}
#chordsheet.multicolumns #chordsheetContent {
  height: 100%;
  width: unset;
  display: flex;
  flex-flow: column wrap ;
}
#chordsheet.multicolumns #chordsheetContent > * {
  width: 30vw;
}
#chordsheet.multicolumns #chordsheetContent > .sd-header,
#chordsheet.multicolumns #chordsheetContent > .tags {
  width: 60vw;
  position: absolute;
}
#chordsheet.multicolumns * {
  overflow: visible;
}
#chordsheet.multicolumns .abc-notation {
  display: none;
}
#chordsheet h2 {
  color: var(--gray);
}
#chordsheet h4,
#chordsheet h3 {
  color: var(--text);
}
#chordsheet .ref {
  color: var(--text);
  padding-left: 8px;
  margin-left: -12px;
  border-left: 4px solid var(--accent);
  margin-top: 2em;
  margin-bottom: 2em;
  cursor: pointer;
}
#chordsheet .ref strong {
  margin-right: 0.5em;
}
#chordsheet .ref.open {
  color: var(--gray);
}
#chordsheet .ref.open strong {
  display: block;
  margin-right: 0;
}
#chordsheet .ref.open,
#chordsheet h3 {
  font-size: 1em;
  margin: 0;
  height: 3em;
  line-height: 1.1em;
  margin-bottom: -4.5em;
  text-align: right;
  width: 5em;
  margin-left: -6em;
  border: none;
  padding-left: 0;
  clear: both;
}
@media only screen and (max-width: 700px) {
  #chordsheet .ref.open,
  #chordsheet h3 {
    margin: 2em 0 0;
    width: auto;
    height: auto;
    line-height: 1em;
    text-align: left;
  }
}
#chordsheet p {
  margin: 1.33em 0;
  max-width: 40em;
  clear: both;
}
#chordsheet .inlineReference.shown h3 {
  display: none;
}
#chordsheet .inlineReference.hidden {
  display: none;
}
#chordsheet code {
  display: inline-block;
  font-family: "Input Mono", Courier New, Courier, monospace;
  font-size: 0.9em;
  font-weight: 300;
  padding: 0 0.5em;
  border-radius: 0.4em;
  line-height: 1.5em;
  color: black;
  background-color: var(--accent-flat);
}
#chordsheet pre code {
  font-size: 1em;
  background-color: transparent;
  color: inherit;
  line-height: inherit;
}
@media only screen and (max-width: 700px) {
  #chordsheet .abc-notation {
    margin-right: 0;
  }
}
#chordsheet .abc-notation svg .abcjs-note,
#chordsheet .abc-notation svg .abcjs-slur,
#chordsheet .abc-notation svg .abcjs-rest,
#chordsheet .abc-notation svg .abcjs-beam-elem {
  fill: var(--text);
}
#chordsheet .abc-notation svg .abcjs-triplet {
  stroke: var(--text);
}
#chordsheet .abc-notation svg .abcjs-triplet tspan {
  fill: var(--text);
}
#chordsheet .abc-notation svg .abcjs-lyric,
#chordsheet .abc-notation svg .abcjs-staff,
#chordsheet .abc-notation svg .abcjs-staff-extra {
  fill: var(--gray);
}
#chordsheet .abc-notation svg path.abcjs-ending {
  stroke: var(--gray-dark);
}
#chordsheet .abc-notation svg text.abcjs-ending,
#chordsheet .abc-notation svg .abcjs-bar {
  fill: var(--gray-dark);
}
#chordsheet .abc-notation svg .abcjs-note_selected {
  fill: var(--accent);
}
#chordsheet .abc-notation svg .abcjs-annotation {
  fill: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
#chordsheet .abc-notation svg .abcjs-chord {
  fill: var(--accent);
  font-size: 18px;
  font-weight: 600;
}
#chordsheet .chord-container {
  display: flex;
  flex-direction: column-reverse;
  text-align: center;
  float: left;
  margin-right: 2em;
  margin-bottom: 2em;
  margin-left: -1em;
}
#chordsheet .chord-container .kord {
  display: inline-block;
}
#chordsheet .chord-container .kord .chord-diag {
  width: 90px;
}
#chordsheet .chord-container strong {
  font-weight: 600;
  margin-left: 0.8em;
}
#chordsheet .chord-container strong sup,
#chordsheet .line i .before sup {
  vertical-align: 0.4em;
  font-size: 0.7em;
  letter-spacing: 0.02em;
  padding-left: 0.1em;
  font-weight: 700;
}
#chordsheet .interactive {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
#chordsheet .interactive i {
  cursor: pointer;
  text-indent: 0 !important;
  padding-left: 0 !important;
  line-height: 1.4em;
}
#chordsheet .interactive i:not(.hasChord):hover {
  border-top: 2px solid var(--accent);
  margin-top: -2px;
}
#chordsheet .line i u {
  color: var(--accent);
  font-family: "Cardo", 'Times New Roman', Times, serif;
  font-size: 1.2em;
  line-height: 1em;
  font-weight: bold;
  text-decoration: none;
}
#chordsheet .line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  min-height: 1em;
  padding-left: 0.8em;
  white-space: pre-wrap;
}
#chordsheet .line i {
  font-style: normal;
  font-weight: 400;
  color: var(--text);
  flex-direction: column;
  display: flex;
  /* currently not in use: Both Viewer and Preview have preprocessors.
    &::before {
      content: attr(data-chord);
      .before();
    }
    */
}
@supports ( -moz-appearance:none ) {
  #chordsheet .line i {
    text-indent: -0.8em;
    padding-left: 0.8em;
  }
}
#chordsheet .line i:first-child {
  margin-left: -0.8em;
}
#chordsheet .line i .before {
  color: var(--accent);
  font-weight: 600;
  font-style: normal;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
  margin-top: 0;
  margin-right: 0.5em;
  margin-bottom: -0.3em;
}
#chordsheet .line i .before:focus {
  outline: none;
}
#chordsheet .line i .before:focus {
  background-color: var(--bg-filter-opaque);
  min-width: 1.5em;
}
#chordsheet .line i .before:focus:empty:before {
  content: "\feff";
}
#chordsheet .line i .before.optional {
  color: var(--gray);
}
#chordsheet .line i .before.optional:before {
  content: "(";
}
#chordsheet .line i .before.optional:after {
  content: ")";
}
#chordsheet .line i .before.optional:after,
#chordsheet .line i .before.optional:before {
  font-weight: 200;
  vertical-align: 0.05em;
}
#chordsheet .interactive .line i .before {
  -webkit-touch-callout: text;
  /* iOS Safari */
  -webkit-user-select: text;
  /* Safari */
  -khtml-user-select: text;
  /* Konqueror HTML */
  -moz-user-select: text;
  /* Firefox */
  -ms-user-select: text;
  /* Internet Explorer/Edge */
  user-select: text;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
#chordsheet li {
  line-height: 1.6em;
  list-style-type: none;
}
#chordsheet li::before {
  content: "–";
  display: inline-block;
  position: relative;
  width: 0;
  left: -1.2em;
}