.l_01_middle { display: flex; flex-direction: column; }

.pageHead { display: flex; padding: 0px 0px; width: calc( 100% - 200px); justify-content: space-between; margin: 20px 100px; box-sizing: border-box; border-bottom: solid 1px #ccc; }
.filterContainer { width: 524px; height: 150px; position: relative; background-color: var(--SecondaryColor); padding: 16px 20px; box-sizing: border-box; border-radius: 8px 8px 0px 0px; margin-left: 20px; border: 1px solid #ccc; border-bottom: none; }
    .filterContainer:after { content: "功能说明"; position: absolute; top: -0.75em; left: 1em; width: 5em; height: 1.5em; line-height: 1.5em; text-align: center; }
    .filterContainer:before { content: ""; position: absolute; top: -1px; left: 1em; width: 5em; height: 1px; background-color: #e1e1e1; }

.filterContainer { display: flex; flex-direction: column; justify-content: space-around; }
    .filterContainer #theoTitle { font-weight: bold; font-size: 20px; }
    .filterContainer #helpText { color: #a1a1a1; display: flex; justify-content: flex-start; flex-wrap: wrap; }
        .filterContainer #helpText p { margin-right: 10px; }
    .filterContainer #theoFrom { font-size: 14px; display: flex; justify-content: space-between; }
        .filterContainer #theoFrom p { margin-top: 6px; }
    .filterContainer #qqGroup p { text-align: right; }


.content { position: relative; width: calc( 100% - 200px); margin: auto; }
.btnAddBar { position: absolute; right: 10px; z-index: 50; width: 20px; height: 20px; cursor: pointer; }
    .btnAddBar svg { width: 100%; height: 100%; fill: #ba7833; }
.btnDelBar { position: absolute; right: 36px; top: 1px; z-index: 50; width: 18px; height: 18px; cursor: pointer; }
    .btnDelBar svg { width: 100%; height: 100%; fill: #ba7833; }

#chart { width: 100%; height: 350px; }
.btn { width: 70px; height: 3em; display: inline-flex; justify-content: center; align-items: center; background-color: #ba7833; color: white; border-radius: 4px; margin-right: 4px; cursor: pointer; user-select: none; }

.useguide { width: calc( 100% - 200px); margin: auto; color: #999;margin-bottom:20px; }

.allChs { display: flex; flex-wrap: wrap; }
    .allChs:before { content: "所有和弦"; width: 100%; height: 2em; background-color: black; color: white; text-align: center; line-height: 2em; font-size: 16px; }
.chsItem { width: 15em; height: 1.5em; display: flex; flex-wrap: wrap; box-sizing: border-box; border: 1px solid #ccc; margin-right: 10px; margin-bottom: 4px; }
.chsID { width: 4em; text-align: center; background-color: #eee; }
.chsName { padding-left: 10px; flex: 1; background-color: #f9d7b4; }

.btnGetNextChord { width: 5em; height: 2em; border-radius: 4px; text-align: center; line-height: 2em; background-color: #ba7833; color: white; cursor: pointer; }

.Result { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
    .Result:before { content: "结果"; width: 100%; height: 2em; background-color: black; color: white; text-align: center; line-height: 2em; font-size: 16px; }


.barChordContainer { width: 100%; display: flex; justify-content: space-around; align-items: start; box-sizing: border-box; padding: 0 4%; }
    .barChordContainer .barChord { text-align: center; }

.Chord { text-align: center; height: 3em; line-height: 3em; border: 1px dashed #ccc; margin: 10px 0px; font-size: 12px; box-sizing: border-box; }
    .Chord[chordid] { background-color: #ba7833; color: white; border: none; }
.iptChord { width: 100%; box-sizing: border-box; outline: none; border: 1px solid #ccc; height: 2em; padding: 4px 6px; box-sizing: border-box; font-size: 20px; text-align: center; }
.barChordTemplate { width: 160px; }
.OptionChordTemplate { cursor: pointer; height: 2em; border: solid 1px #ccc; outline: none; box-sizing: border-box; padding: 4px 8px; }
    .OptionChordTemplate:hover { background-color: #ba7833; color: white; border: none; }


.waveParent { padding: 0 4%; }
.waveContainer { overflow: hidden; height: 100px; position: relative; }
.waveform { width: 100%; height: 100px; position: absolute; top: 0; left: 0; }


.controlBar { position: relative; display: flex; justify-content: center; width: calc( 100% - 200px); margin: 0px auto 20px; }
.btnPlay { }
.btnDMidi { position: absolute; right: 0px; z-index: 50; cursor: pointer; box-sizing: border-box; padding: 0px 10px; }
    .btnDMidi svg { width: 100%; height: 100%; fill: white; }
.btnDMp3 { position: absolute; right: 7em; z-index: 50; cursor: pointer; box-sizing: border-box; padding: 0px 10px; }
    .btnDMp3 svg { width: 100%; height: 100%; fill: white; }