body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapper{
    display: grid;
    place-items: center;
    padding-top: .5rem;
    overflow-x: auto;
}
table{
    font-size: .75rem;
    white-space: nowrap;
}
thead{
    background-color: var(--color1);
    color: var(--color5);
    
}
td{
    border-collapse:collapse;
    /* border:1px solid slategray; */
    border-style: solid;
    border-color: slategray;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-right-width: 0;
    /* background-color: whitesmoke; */
}
th{
    text-align: center;
}

.tr-cat1{
    font-weight: 500;
    /* background-color: var(--color1); */
    /* color: var(--color6); */
    background-color: whitesmoke;
}

.tr-cat2{
    /* background-color: var(--color5); */
    background-color: whitesmoke;
    text-indent:2ch;
}
.tr-cat3{
    font-weight: 300;
    /* background-color: var(--color6); */
    background-color: whitesmoke;
    text-indent:3ch;
}
.tr-cat2,.tr-cat3{
    display:none;
}
.tr-totals{
    font-weight: 700;
    background-color: var(--color5);
}

th,td{
    padding: 0 .5rem;
    line-height: 2rem;
    width: 8ch;
}
th,td:nth-child(1){
    width:1ch;
    padding: 0 .25rem;
}
th:nth-child(2){
    width:24ch;
}
th:nth-last-child(1),
td:nth-last-child(1){
    border-left: solid .5rem hsl(180, 20%, 60%);
}

th,td:nth-last-child(2){
    border-left-width: 1px;
    /* border-right-width: 1px; */
}
.td-value{
    text-align: right;
    min-width: 8ch;
}
.expand-child-rows{
    cursor: pointer;
    font-size:1.5rem;
}
.expand-child-rows::before{
    content: "\23f5"
}
.expand-child-rows.expanded::before{
    content: "\23f7"
}