.header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--flex-text-dark);
    font-size: var(--flex-text-sm);
    position: relative; 
    overflow: hidden;
    padding: 0.5em;
}

.header > .title {
    flex-grow: 1;
    /*text-transform: uppercase;*/
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}

.header > button {
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 1.8em;
    border: 0;
    cursor: pointer;
}

.header > button.options {
    margin-right: -.25em;
}

.header > .resizer {
    width: .15em;
    background: transparent;
    cursor: col-resize;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    z-index: 30;
}

.header > .resizer.active,
.header > .resizer:hover {
    background: var(--flex-main-color);
}

.header.resizing,
.header.resizing > button {
    cursor: col-resize !important;
}