body {
    /*
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    height: auto;
    */
}
#chordsheet_container {
    width: 100%;
    overflow: hidden;
}
#chordsheet_control {
    display: none;
}
#chordsheet_buttons {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#chordsheet_buttons button {
    margin: 5px;
}
#chordsheet_buttons div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 500px;
}
#chordsheet_buttons div button {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.chordsheet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 2%;
    margin-bottom: 4%;
}
.chordsheet h2 {
    width: 100%;
}
.bar {
    border-right: solid 1px;
    border-left: solid 1px;
    height: 3.5em;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 6em;
    min-width: 20%;
}
.bar.error {
    background: repeating-linear-gradient(135deg, #ccc, #ccc 5px, #fff 3px, #fff 10px);
}
.chord {
    position: relative;
    text-align: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border-bottom: solid 2px;
    margin-bottom: 1em;
}
.activeChord {
    background: #e4e4e4;
    background-image: url('../pics/bg.png');
    -webkit-box-shadow: rgb(121, 121, 121) 1px 1px 1px inset;
    box-shadow: rgb(121, 121, 121) 1px 1px 1px inset;
}
.number {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'Roboto Condensed', sans-serif;
    height: 2.5em;
    margin-top: -2.5em;
    font-size: 1.2em;
}
.letter {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: serif;
    height: 1em;
    margin-top: -0.5em;
    font-size: 1.5em;
    padding-left: 10px;
    padding-right: 10px;
}
.chord .left {
    left: -2%;
}
.chord .right {
    right: -2%;
}
.chord .arrow {
    position: absolute;
    height: 40px;
    width: 47%;
    top: -92px;
}
.chord .arrow:after {
    content: ' ';
    display: block;
    border-top: solid 3px;
    height: 20px;
    margin-top: 13px;
}
.chord .arrow.end:after {
    border-right: solid 3px;
    border-top-right-radius: 100%;
}
.chord .arrow.end:before {
    position: absolute;
    right: -5px;
    top: 31px;
    -webkit-transform: rotate(65deg);
    transform: rotate(62deg);
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0px 6px 10px;
    border-color: transparent transparent transparent #000000;
}
.chord .arrow.start:after {
    border-left: solid 3px;
    border-top-left-radius: 100%;
}
.arrow.middle {
    width: 52%;
}
.chord .arrow.middle.dashed:after {
    border-top: dashed 3px;
}
.chord .arrow.start.dashed:after {
    border-top: dashed 3px;
    border-left: dashed 3px;
}
.chord .arrow.end.dashed:after {
    border-top: dashed 3px;
    border-right: dashed 3px;
}
.chord .bracket {
    position: absolute;
    height: 25px;
    width: 47%;
    top: -25px;
}
.chord .bracket:after {
    content: ' ';
    display: block;
    height: 13px;
    margin-top: 5px;
    border-bottom: solid 2px;
}
.chord .bracket.end:after {
    content: ' ';
    display: block;
    border-right: solid 2px;
}
.chord .bracket.start:after {
    content: ' ';
    display: block;
    border-left: solid 2px;
}
.chord .bracket.start.dashed:after {
    content: ' ';
    display: block;
    border-left: solid 2px;
    border-bottom: dashed 2px;
    margin-right: 3px;
    right: 1px;
}
.chord .bracket.end.dashed:after {
    content: ' ';
    display: block;
    border-right: solid 2px;
    border-bottom: dashed 2px;
    margin-left: 3px;
    left: 1px;
}
.hidden {
    opacity: 0;
}
@media screen and (max-width: 850px) {
    .bar {
        min-width: 40%;
    }
}
@media screen and (max-width: 350px) {
    .bar {
        width: 100%;
    }
}