@import url('https://fonts.googleapis.com/css?family=DM+Sans&display=swap');

:root {
    --border-radius: 5px;
    --primary: #00BC62;
    --primary-bg: #e3fff2;
    --secondary: #1E6668;
    --secondary-bg: #edfafa;
    --terciary: #1BDE39;
    --terciary-bg: #E8FBEB;
}

* { font-family: 'DM Sans', 'Roboto', Arial, Helvetica, sans-serif; }

.category-tag { background-color: #fff; color: #000; border-radius: var(--border-radius); display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.625rem; text-transform: lowercase; }
.bankaccount-tag { background-color: var(--secondary-bg); border-radius: var(--border-radius); display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.625rem; text-transform: lowercase; }
.exceptional-tag { background-color: var(--secondary); border-radius: var(--border-radius); display: inline-block; color: #fff !important; padding: 0.25rem 0.5rem; font-size: 0.625rem; text-transform: lowercase; }
.tag-lg { font-size: 1.2rem; padding: 0.5rem 1rem; }

.bankaccount-toggle { background-color: var(--secondary-bg); padding: 0.5rem; border: solid 1px #999; width: 100%; position: relative; margin-bottom: 1rem; }
.bankaccount-toggle::after { position: absolute; right: 1rem; top: 45%; }

.summary { background-color: var(--secondary-bg); border-radius: var(--border-radius); padding: 1rem; margin-bottom: 1rem; border: solid 1px var(--secondary); }
.summary label { font-weight: bold; display: block; font-size: 0.725rem; }
.summary .faux-field { font-size: 1.2rem; color: var(--secondary); margin-bottom: 0; font-weight: bold; }

.expense-container { background-color: var(--primary-bg); border-radius: var(--border-radius); margin-bottom: 0.5rem; padding: 1rem; }
.expense-container .expense-timestamp { font-size: 0.625rem; }

.no-expenses-container { background-color: var(--secondary-bg); border-radius: var(--border-radius); padding: 2rem; text-align: center; color: var(--secondary); }
.no-expenses-container i { display: block; font-size: 5rem; margin: 1rem; }
.no-expenses-container strong { font-size: 2rem; }

.total-container { margin-bottom: 1rem; }

.expense-filters { font-size: 0.725rem; padding: 0.25rem; margin-bottom: 1rem; }

.category-container { padding: 1rem; margin-bottom: 0.5rem; border-radius: var(--border-radius); }
.category-container strong { font-size: 1.2rem; display: block; }
.category-container span { font-size: 0.725rem; }
.category-button { filter: brightness(90%); margin-top: 0.5rem; padding: 0.25rem 0.5rem; border-radius: var(--border-radius); position: relative; text-align: center; }
.category-button i { color: #fff !important; }
.category-budget { filter: brightness(120%); margin-top: 0.5rem; padding: 0.25rem 0.5rem; border-radius: var(--border-radius); position: relative; text-align: center; }
.category-budget small { display: block; font-size: 0.625rem; font-weight: bold; }
.category-budget span { font-size: 0.825rem; display: block; }
.category-budget .up-down-arrow { position: absolute; top: 6px; right: 6px; font-size: 0.725rem; }

.expense-add-form { background-color: var(--terciary-bg); border-radius: var(--border-radius); margin: 1rem; padding: 1rem; }
.expense-add-form .category-budget { background-color: var(--secondary-bg); }
.expense-view-form { background-color: var(--primary-bg); border-radius: var(--border-radius); margin: 1rem; padding: 1rem; }
.expense-view-form span, .expense-view-form strong { font-size: 1.5rem !important; }
.balance-update-form { background-color: var(--secondary-bg); border-radius: var(--border-radius); margin: 1rem; padding: 1rem; }
.category-add-form { background-color: var(--primary-bg); border-radius: var(--border-radius); margin: 1rem; padding: 1rem; }
.category-list { background-color: var(--terciary-bg); border-radius: var(--border-radius); margin: 1rem; padding: 1rem; }

.faux-field { display: block; margin-bottom: 1rem; }

.btn.c-primary { background-color: var(--primary); color: #fff; }
.btn.c-secondary { background-color: var(--secondary); color: #fff; }
.btn.c-terciary { background-color: var(--terciary); color: #fff; }
.btn.c-primary-lt { background-color: var(--primary-bg); color: var(--primary); }
.btn.c-secondary-lt { background-color: var(--secondary-bg); color: var(--secondary); }
.btn.c-terciary-lt { background-color: var(--terciary-bg); color: var(--terciary); }

.header-button { background-color: var(--secondary-bg); color: var(--primary); width: 40%; border-radius: var(--border-radius); padding: 0.25rem; text-align: center; font-size: 2rem; display: inline-block; margin: 0.25rem; }
.header-button:hover { color: var(--primary); }