
#tab-analyze {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--panel-gap);
}

.analyze-panel {
    border: solid 1px;
    display: flex;
    flex-direction: column;
}
.plots-panel {
    width: 100%;
    min-width: 50px;
    /* display: flex; */
    /* flex-direction: column; */
}
.media-panel {
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
    width: 15px;
    /* max-width: 50%; */
    max-height: 80vh;
    flex: 1 1 auto;
    overflow: scroll;
    /* resize: horizontal; */
    h3 {
        text-align: center;
    }
}
.submedia-panel {
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);

    border: 1px solid var(--main-contrast-color);
    border-radius: var(--panel-br);
    padding: var(--panel-pad);
    h4 {
        text-align: center;
    }
}
.media-instance-area {
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
}

/* Multimedia instance information */
.multimedia-instance-panel {
    flex: 1 1 auto;
    width: 100%;
    border: dashed 1px var(--main-contrast-color);
    border-radius: var(--panel-br);
    overflow: hidden;
}
.media-area {
    * {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}
.media-info {
    text-align: center;
}

.image-instance-panel {
    min-width: 0px;
}

#image-media-area {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: calc(var(--mega-gap)*3) var(--mega-gap);
    /* grid-template-columns: repeat(auto-fit, clamp(0px, minmax(300px, 1fr), 1000px)); */
}
#audio-media-area {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(182px, 1fr));
    /* grid-template-columns: repeat(auto-fit, clamp(0px, minmax(182px, 1fr), 1000px)); */
}

.media-type-label:hover {
    cursor: pointer;
}
#media-filter-sort-panel > .filter-sort-label:hover {
    cursor: pointer;
}

.plot-line {
    filter: saturate(80%);
}
.plot-line.hovered-line {
    filter: saturate(130%);
    stroke-width: 3.5px;
}
/* .plot-line.selection-hovered-line {
    filter: saturate(140%);
    stroke-width: 3.5px;
} */

#main-plots-area {
    display: flex;
}
#overview-plot-panel {
    width: 50%;
}
#details-plot-panel {
    width: 50%;
}
#scalar-plots-panel {

}

.plot-key-panel {
    display: flex;
    flex-direction: column;
    gap: var(--std-gap);
}
.plot-key-content-area {
    /* display: flex;
    flex-direction: column;
    gap: var(--std-gap); */
    display: grid;
    padding: var(--std-gap);
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr;
    /* grid-auto-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    gap: var(--extra-gap);
}
.plot-key-area{
    display: grid;
    padding: var(--std-gap);
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* grid-auto-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    gap: var(--extra-gap);
}
.plot-key-area-label {
    cursor: pointer;
    text-align: center;
}
#main-plots-title-panel {
    text-align: center;
}
.single-plot-title-area {
    text-align: center;
}
.value-key-area {
    display: flex;
    flex-direction: column;
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 30px; */
    padding: 5px;
    gap: var(--std-gap);
}
.single-value-header-area {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.single-value-title-area {
    text-align: center;
}
.single-value-button-area {
    display: grid;
    /* grid-template-rows: 20px;
    grid-auto-columns: 20px; */
    grid-template: 20px / 20px 20px;
    column-gap: var(--std-gap);
}
.single-value-area {
    display: flex;
    flex-direction: column;
    /* display: grid;
    grid-template-columns: 1fr 100px;
    grid-template-rows: 1f;
    padding: 5px; */
}
.single-scalar-box {
    display: grid;
    grid-template-columns: 1fr 50px;
    grid-template-rows: 1f;
    padding: 5px;
    border-bottom: 1px var(--main-contrast-color) dashed;
}
#main-plots-header {
    display: flex;
    justify-content: space-around;
}

.single-scalar-box.unselected-sim {
    filter: saturate(40%);
    filter: opacity(40%);
}