#sigvp-scatter-div {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 100%;
}

#plot-title-div {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    height: 55px;
    margin-bottom: 10px;
    justify-content: space-between;
    margin-left: 30px;
}

#plot-title-div > .titles {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

#plot-title-div .labeled-select {
    display: flex;
    align-items: baseline;
}

#plot-title-div .labeled-select > span {
    margin-right: 5px;
}

#plot-subtitle-latent {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

#plot-subtitle-latent > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 10px;
}

#plot-subtitle-latent > div:first-child > div:not(:first-child) {
    margin-top: 5px;
}

#plot-title-div .color-options {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    text-align: center;
}

#plot-title-div .color-options > div {
    margin-left: 20px;
}

#plot-title-div .color-options > div > div:first-child {
    margin-bottom: 5px;
}

#plot-title-div .color-options label {
    padding: 0 6px;
    display: flex;
    /* Needed so icons are centered vertically */
}

#plot-title-div .color-options .btn-group {
    vertical-align: bottom;
}

#plot-title-div button {
    padding: 0 6px;
    vertical-align: baseline;
}

#scatter-container-div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.scatter-layout-container {
    flex-grow: 1;
    overflow: hidden;
    /* so it shrinks even when plot is too big */
    display: flex;
    flex-direction: column;
}

.scatter-split-row-div {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    flex-direction: row;
    overflow: hidden;
}

.scatter-split-plot-div {
    display: flex;
    /* even though this isn't a flex container, fixes it's shrinking/growing */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff;
    overflow: hidden;
    box-sizing: content-box;
    padding: 3px;
}

.scatter-split-plot-div.active {
    border-color: var(--primary);
}

.selection-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 250px;
    margin-left: 20px;
    margin-right: 20px;
}

.selection-list > .loadable-selection-option {
    padding: 10px;
}

.selection-list > .loadable-selection-option:hover {
    background-color: #eeeeee;
    cursor: pointer;
}

.selection-list > .loadable-selection-option.selected {
    color: #ffffff;
    background-color: var(--primary);
}

.empty-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 250px;
    margin-left: 20px;
    margin-right: 20px;
}
