.popup-total-value {
    font-size: xx-large;
    display: inline-block;
    text-align: right;
}

.popup-row {
    background: white;
    color: #3b567f;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "name value" "origin value";
    margin: 0;
    padding: .5rem 0;
}
    .popup-row:nth-child(odd) {
        background: none;
        color: white;
    }

.membership-row {
    grid-template-areas: "name start" "name origin";
}

.popup-row-header, .popup-row-start {
    padding: 0 1rem;
}

.popup-row-header {
    align-items: center;
    border-bottom: 2px solid;
	display: flex;
	justify-content: space-between;
    margin-bottom: .5rem;
}

.popup-row-name {
    grid-area: name;
    padding: .3rem 1rem 0 1rem;
}

.popup-row-origin {
    font-size: smaller;
    grid-area: origin;
    padding: 0 1rem;
}

.popup-row-start {
    align-self: center;
}

.popup-row-value {
    align-self: center;
    font-size: xx-large;
    grid-area: value;
    padding: .3rem 0 0 1rem;
    text-align: right;
    width: 5ch;
}

@media only screen and (min-width: 500px) {

    .popup-row {
        align-items: center;
        display: flex;
        justify-content: space-around;
    }

    .popup-row-value, .popup-row-name {
        flex: 0 0 auto;
        padding: .3rem 0 0 1rem;
    }

    .popup-row-name {
        margin-right: 1rem;
        max-width: 50%;
    }

    .popup-row-origin, .popup-row-start {
        flex: 1 0 auto;
        padding: 1rem;
        position: relative;
        text-align: end;
        top: .5rem;
    }
        .popup-row-origin::before, .popup-row-start::before {
            content: attr(title);
            display: inline-flex;
            font-size: small;
            margin-right: 1rem;
            padding: .2rem;
            position: absolute;
            right: 0;
            top: -.3rem;
        }

    }