.summary {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    position: relative;
    color: var(--flex-text-dark);
    font-size: var(--flex-text-sm);
    overflow: hidden;
    cursor: pointer;
}

.summary > div.content {
    flex-grow: 1
}

.summary > div.content > * {
    display: block;
    width: 100%;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}


.summary > div.content > .title {
    font-size: .65rem;
    font-weight: bold;
    color: var(--flex-text-muted);
    text-transform: uppercase;
    line-height: 150%;
    margin-top: .5em;
}

.summary:hover > div.content > .title {
    color: var(--flex-text-primary); 
}

.summary > .value {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--flex-text-default);
}

.summary > button {
    font-size: .8em;
    color: var(--flex-text-default);
    background: #eee; 
    border: 0;
    outline: 0;
    font-size: .8rem;
    padding: 0;
    margin: 0;
    margin-left: .5em;
}

.summary:hover > button {
    background: var(--flex-text-primary); 
    color: var(--flex-text-white);
}