body {
    font-family: Roboto,sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}
#container {
    width: 386px;
}
span {
    display: table-cell;
    color: rgba(0, 0, 0, 0.87);
    vertical-align: middle;
    padding: 0 56px 0 0;
    text-align: right;
    height: 30px;
}
span:first-child {
    padding-right: 25px;
    width: 100px;
    text-align: left;
    padding-left: 4px;
}
span:not(:first-child) {
    padding-right: 50px;
    width: 50px;
}
span:last-child {
    padding-right: 0px;
}
.sub {
    text-indent: 10px;
}
.row, #header {
    border-bottom: 1px solid rgba(0,0,0,.12);
    border-width: 0 1px 1px 0;
}
#header span {
    color: rgba(43, 33, 33, 0.54);
    font-size: 12px;
    font-weight: 500;
    text-align: right;
}
#header span:first-child {
    text-align: left;
}
.row {
    background-image: -webkit-gradient(linear, left bottom, left top,
        color-stop(0, #c3e0ee), color-stop(0, #c3e0ee));
    background-repeat: no-repeat;
}
h3 {
    font-size: 16px;
    color: rgba(0,0,0,.54);
    margin: 0.5em;
    margin-left: 3px;
}
#r-total {
    background: none;
    font-weight: 500;
}
#total {
    padding-left: 200px;
}
