.body {
    /* background: var(--company-color1); */
    background:rgba(250,240,240,0.98);
    width: 100%;
    height: 100%;
    flex-grow: 1;
    display:flex;
    flex-direction:column;
    * {
        overflow-x: hidden;
        overflow-y: hidden;
    }
}
.body-panel{
    width: 100%;
}
.height-10{
    min-height:10%;
}
.height-30{
    min-height:30%;
    height:30%;
}
.height-40{
    min-height:40%;
}

.height-60{
    min-height:60%;
}


.body-panel-row{
    margin:1rem;
    display:flex;
    flex-direction:row;
    user-select:none;

    .label{
        color:#597;
        font-size:1.3rem;
        font-weight:600;
    }
    .text{
        color:#555;
        font-size:1rem;
        font-weight:600;
        vertical-align: middle;
    }
    .buttons{
        display:flex;
        flex-direction:row;
        .button{
            min-width:10%;
            text-align:center;
            margin-left:0.5rem;
            margin-right:0.5rem;
            padding:4px;
            border-radius:6px;
            font-weight:600;
            border:solid 1px #888;

            color:#000;
            background:#fff;
            cursor: pointer;
        }
        .active{
            color:#3b3;
            background:#fff;
            cursor: default;
        }
        .disable{
            background:rgba(0,5,0,0.3);
            color:rgba(0,5,0,0.3);
            cursor: default;
        }
        .attention{
            background:rgba(200,5,0,0.6);
            cursor: default;
        }
    }
    .selector-container{
        display:flex;
        * {
            margin-left:2px;
            margin-right:2px;
        }
        .selector{
            .select{
                color:#2a4;
            }
        }
    }
    .pager-container{
        display:flex;
        .index-selector-button{
            text-align:center;
            margin-left:0.5rem;
            margin-right:0.5rem;
            padding:4px;
            border-radius:6px;
            color:#000;
            cursor: pointer;
            width:1.5rem;
        }
        .disable{
            color:rgba(0,5,0,0.3);
        }
        .label{
            text-align:center;
            width:6rem;
        }
    }
}

.body-panel-area{
    width:100%;
    height:100%;
    padding:2rem;
    display:flex;
    flex-direction:column;
    user-select:none;
    .card{
        border:solid 1px #000;
        border-radius:10px;
        width:100%;
        min-height: 10rem;
        background: rgba(200,200,110,0.9);
        padding:20px;
        overflow-y: scroll;
        .title{
            font-size:1.5rem;
        }
        .text{
            display:flex;
            font-size:1.5rem;
            color:#333;
            font-weight:200;
            .tag{
                color:#633;
                width:8rem;
                font-weight:600;
            }
        }
        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        &::-webkit-scrollbar-track {
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 10px;
        }

    }
}
.split-2-8{
    & > div:nth-child(1) {
        left: 0px;
        width: 20%;
    }
    & > div:nth-child(2) {
        left: 20%;
        width: 80%;
    }
}
.split-3-4-3{
    & > div:nth-child(1) {
        left: 0px;
        width: 30%;
    }
    & > div:nth-child(2) {
        left: 30%;
        width: 40%;
    }
    & > div:nth-child(3) {
        left: 70%;
        width: 30%;
    }
}
.split-2-6-2{
    & > div:nth-child(1) {
        left: 0px;
        width: 20%;
    }
    & > div:nth-child(2) {
        left: 20%;
        width: 60%;
    }
    & > div:nth-child(3) {
        left: 80%;
        width: 20%;
    }
}
.split-2-2-5-1{
    & > div:nth-child(1) {
        left: 0px;
        width: 20%;
    }
    & > div:nth-child(2) {
        left: 20%;
        width: 20%;
    }
    & > div:nth-child(3) {
        left: 40%;
        width: 50%;
    }
    & > div:nth-child(4) {
        left: 90%;
        width: 10%;
    }

}
.split-1-1-2-1-2{    
    & > div:nth-child(1) {
        /* left: 0px; */
        width: 10%;
    }
    & > div:nth-child(2) {
        /* left: 10%; */
        width: 10%;
    }
    & > div:nth-child(3) {
        /* left: 20%; */
        width: 30%;
    }
    & > div:nth-child(4) {
        /* left: 50%; */
        width: 10%;
    }
    & > div:nth-child(5) {
        /* left: 60%; */
        width: 10%;
    }
}


.waveform-container,
.mel-spectrogram-container
 {
    width: 500px;
    margin: 0 auto;
}

.mel-spectrogram-div{
    width:100%;
    height:150px;
    display:flex;
    object-fit:contain;
    margin-top:10px;
}
.mel-spectrogram-canvas{
    width: 100%;
}



.waveform-header {
    display: flex;
}
.waveform-header-item {
    padding: 0 5px 0 5px;
    width: 250px;
}
.waveform-header-item-warn {
    padding: 0 5px 0 5px;
    width: 200px;
    color: #f00;
}

.button{
    min-width:10%;
    text-align:center;
    margin-left:0.5rem;
    margin-right:0.5rem;
    padding:4px;
    border-radius:6px;
    font-weight:600;
    border:solid 1px #888;

    color:#000;
    background:#fff;
    cursor: pointer;

}
