.StyledDataCard {
    /*
     * flex & column in order to have graph content that
     * is pushed up against the bottom edge
     */
    display: flex;
    flex-direction: column;
}

.StyledDataCard.main-svg {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.HandleWrapper {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
}

.Handle {
    width: 50px;
    display: inline-flex;
    position: relative;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.DataCardContent {
    padding: 15px;
    height: 100%;
    max-width: 100%;
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
}

.DataCardContentGraph {
    padding: 15px;
    padding-right: 50px;
    padding-bottom: 5px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.Label {
    /* TODO deal with line height in parent component */
    /* min and max to double line height for label text wrapping */
    /* min-height: calc(1.5em*2);
    max-height: calc(1.5em*2); */
    font-weight: 400;
    font-size: .8em;
}

.DataCardNumbers {
    display: flex;
    align-items: center;
}

.Value {
    font-weight: 400;
    font-size: 2em;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* necessary as setting overflow-x mutates overflow-y to 'auto' */
    overflow-y: hidden;
    text-overflow: ellipsis;
}

.SubValue {
    font-weight: 400;
    padding-left: 10px;
    font-size: .8em;
}