.chords {
  vertical-align: baseline;
}

.chords .linepart {
  display: inline-block;
  vertical-align: baseline;
  overflow: visible;
}
.chords .chord {
  vertical-align: top;
  white-space: nowrap;
}
.chords .diagram {
  height: 120px;
  font-style: normal;
}
.chords .comment {
  display: inline-block;
  position: relative;
  font-style: normal;
  font-size: 0.8em;
  text-transform: uppercase;
  background-color: #999;
  color: #eee;
  border-radius: 3px;
  padding: 0 3px;
}

.chords .linepart.has_text .comment {
  margin-bottom: 4px;
}
.chords .linepart.has_text .comment:before {
  content: " ";
  position: absolute;
  border: 4px solid transparent;
  border-left: 4px solid #999;
  bottom: -4px;
  left: 0px;
}

@media print {
  .chords .comment {
    background-color: transparent;
    border: 1px solid #000;
    color: #000;
  }

  .chords .linepart.has_text .comment:before {
    left: -1px;
    border-left-color: #000;
    border-width: 3px;
    bottom: -3px;
  }
}

.chords .part {
  display: block;
  position: relative;
  margin-left: 50px;
}
.chords .part .label {
  position: relative;
  width: 0;
  display: inline-block;
  vertical-align: baseline;
}
.chords .part .label span {
  position: absolute;
  bottom: 0;
  right: 5px;
}
.chords .part.float {
  float: right;
  clear: right;
}
.chords .part.clear {
  float: none;
  clear: both;
}

.chords .tab {
  font-family: Courier New, monospaced;
  white-space: nowrap;
}
.chords .tab.block {
  display: block;
  margin-left: 50px;
}

.chords .section {
  margin-bottom: 10px;
}
.chords .column {
  display: inline-block;
  vertical-align: top;
}

@media screen and (max-width: 800px) {
  .chords .column {
    display: block;
    width: auto !important;
  }
}

.chords.preview .chord span:hover {
  background-color: #ffbc2c;
  color: #fff;
  position: relative;
}
.chords.preview .chord span:hover::after {
  content: "akord";
  font-size: 0.5em;
  position: absolute;
  top: 0;
  left: 100%;
  color: #ffbc2c;
  font-style: normal;
  padding: 0 2px;
}

.chords.preview .part {
  border: 1px solid transparent;
}

.chords.preview .part:hover {
  border: 1px solid #ccc;
}

.chords.preview .part:hover::before {
  content: "blok";
  font-size: 0.8em;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ccc;
  font-style: normal;
  padding: 0 2px;
}

.chords.preview .part.verse:hover::before {
  content: "sloka";
}
.chords.preview .part.chorus:hover::before {
  content: "refrén";
}
.chords.preview .part.textblock:hover::before {
  content: "textový blok";
}