Mark accounts that are overspend

That means that accounts with spending in the current greater than the
average spending

financer-web-client/src/main/resources/static/changelog.txt

@@ -1,3 +1,7 @@
+v23 -> v24:
+- Mark accounts that are overspend, meaning their spending in the current period is greater than the average spending of
+  that account
+
 v22 -> v23:
 - Make table headers sticky if the table scrolls
 

financer-web-client/src/main/resources/static/css/main.css

@@ -31,6 +31,10 @@ tr:hover {
     background-color: lightgrey;
 }
 
+.overspend {
+    color: #ff6666;
+}
+
 @media only screen and (max-width: 450px) {
     .hideable-column {
         display: none;

financer-web-client/src/main/resources/templates/account/accountOverview.html

@@ -77,7 +77,8 @@
         <td th:text="${#numbers.formatDecimal(acc.currentBalance/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
         <td class="hideable-column"
             th:if="${acc.spendingCurrentExpensePeriod != null}"
-            th:text="${#numbers.formatDecimal(acc.spendingCurrentExpensePeriod/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
+            th:text="${#numbers.formatDecimal(acc.spendingCurrentExpensePeriod/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"
+            th:classappend="${acc.spendingCurrentExpensePeriod > acc.averageSpendingExpensePeriod} ? overspend"/>
         <td class="hideable-column"
             th:if="${acc.averageSpendingExpensePeriod != null}"
             th:text="${#numbers.formatDecimal(acc.averageSpendingExpensePeriod/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>