:root {
    --service-label-width: 150px;
    --phase-column-width: 75px;

    --indent-scale: 2;
}
.billing-phase, .billing-phase * {
}

.billing-phase {
    display: grid;
    grid-gap: var(--std-unit-x3);
}

.billing-phase > .phase {

    display: grid;
    grid-template-columns: 30px 1fr 1fr;
    grid-auto-rows: auto;
    padding: var(--std-unit-x3);
    border-radius: var(--std-unit-x1);
    background-color: var(--theme-translucent-1);
}
.billing-phase > .phase:nth-child(2n) {

    background-color: var(--theme-translucent-2);
}
.billing-phase > .phase:before {
    content: var(--FA-icon-caret-right);
    grid-area: 1 / 1 / 1 / 2;
    font-family: var(--FontAwesome);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: bold;
    font-size: var(--font-large);
}
.billing-phase > .phase:after {
    content: attr(data-phase);
    font-size: var(--font-large);
    font-weight: bold;
    padding: var(--std-unit-x1);
    border-radius: var(--std-unit-x1);
    grid-area: 1 / 2 / 1 / 4;
}
.billing-phase > .phase > .service {
    grid-column-start: 2;
    grid-column-end: 4;
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
}
.billing-phase > .phase > .service:after {
    content: attr(data-service);
    font-size: var(--font-medium);
    font-weight: bold;
    grid-area: 1 / 1 / 1 / 3;
}
.billing-phase > .phase > .service > .service-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /*! width: min-content; */
    grid-column-start: 2;
    grid-column-end: 4;
    /*! grid-row-start: 2; */
}
.billing-phase > .phase > .service > .service-item:before {}


.sum-block .phase-name {
    font-weight: normal;
    font-style: italic;
}