styles.css

.budget-wrapper > table {
	--table-width: 100%;
	width: var(--table-width);
}

.budget-wrapper > table td {
	vertical-align: middle;
}

.budget-wrapper > table td  > .budget-table-cell {
	padding: var(--size-2-2) var(--size-4-2);
}

.budget-wrapper > table td  > .budget-table-title {
	font-size: 0.9em;
	font-weight: bold;
}

.budget-wrapper > table td.text-right {
	text-align: right;
}

.budget-wrapper > table td.budget-name {
	width: 35%;
}

.budget-wrapper > table td.budget-amount {
	width: 20%;
}

.budget-wrapper > table > tr:nth-child(odd) {
	background-color: var(--color-base-10);
}

.budget-wrapper > table > tr.budget-summary {
	background-color: var(--color-base-40);
	color: var(--color-base-10);
}

.budget-wrapper > table > tr.budget-category-summary {
	background-color: var(--color-base-30);
}

.budget-wrapper > table > tr.budget-category {
	background-color: var(--color-base-60);
	color: var(--color-base-10);
}