@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; }

.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; }

.team span.name { font-size: 2rem; font-weight: bold; display: block; }
.team input.score { font-size: 4rem; text-align: center; }

.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); }

table.tournament-table { border: solid 1px #ccc; border-collapse: collapse; }
table.tournament-table th { text-align: center; padding: 4px 6px; background-color: #8cb1b2; }
table.tournament-table td { text-align: center; padding: 4px 6px; border: solid 1px #ddd; }
table.tournament-table td.tbl-team { font-weight: bold; text-align: left; }
table.tournament-table td.tbl-points { font-weight: bold; }

table.last-five td.result-win { background-color: #29e88c; }
table.last-five td.result-loss { background-color: #ed6363; }
table.last-five td.result-tie { background-color: #999; }

div.tournament-bracket-container { padding: 1rem; }
div.tournament-bracket { padding: 0.5rem; border: solid 1px #666; border-radius: 10px; margin-bottom: 1rem; }
div.tournament-bracket-team { padding: 1rem; }
div.tournament-bracket-team.result-win { background-color: #29e88c; font-weight: bold; border-radius: 10px; }
div.tournament-bracket-team strong { text-align: right; }

div.champion { margin: 2rem; border-radius: 2rem; padding: 2rem; background-color: #00BC62; color: #fff; font-size: 4rem; text-align: center; }
div.champion i { color: #1E6668; display: block; font-size: 6rem; }

a.btn.btn-team { margin: 0.5rem; display: inline-block; background-color: #1E6668; color: #fff; }
span.prop-fixture { display: inline-block; background-color: #e3fff2; color: #1E6668; padding: 0.25rem; border-radius: var(--border-radius); margin: 0.25rem; }