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

:root {
    --border-radius: 5px;
    --primary: #697b99;
    --primary-bg: #cfe1ff;
    --secondary: #1c324c;
    --secondary-bg: #d5dade;
    --terciary: #1BDE39;
    --terciary-bg: #f9f9f9;
}

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

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

.hit-add-form { background-color: var(--terciary-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; }

.hit-add-form .category-name { text-align: center; display: block; padding: 0.5rem; border-radius: 8px; }

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

table.map th, table.map td { border-radius: 8px; text-align: center; }
table.map th { box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3); padding: 1rem 0; }
table.map th small { writing-mode: vertical-rl; text-orientation: upright; margin: 0 auto; display: block; font-size: 0.625rem; }
table.map span.hit { width: 1rem; height: 1rem; border-radius: 50%; display: inline-block; margin: 0.5rem 0.1rem; }

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

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}