Feat: Multiplayer sessions added using CRUD database.

static/dist/css/416.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/legal_accessibility_statement.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/legal_license.bundle.css

@@ -0,0 +1,10 @@
+
+.page-body > * {
+}
+#pageBody > * :first-child{
+}
+#pageBody > * :last-child {
+}
+
+
+/*# sourceMappingURL=legal_license.bundle.css.map*/

static/dist/css/legal_license.bundle.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"css/legal_license.bundle.css","mappings":";AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://app/./static/css/pages/legal/license.css"],"sourcesContent":["\n.page-body > * {\n}\n#pageBody > * :first-child{\n}\n#pageBody > * :last-child {\n}\n"],"names":[],"sourceRoot":""}

static/dist/css/legal_privacy_policy.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/legal_retention_schedule.bundle.css

@@ -0,0 +1 @@
+

static/dist/css/main.bundle.css

@@ -0,0 +1,926 @@
+
+:root {
+    --font-family-base: 'Open Sans', Arial, sans-serif;
+    /* Declare global variables */
+    /*
+    --c_purple: #5B29FF;
+    --c_purple_pastel: #D1D1FF;
+    --c_purple_lighter: #E8E1FF;
+    --c_purple_light: #C6BDFF;
+    --c_purple_dark: #4700B3;
+    */
+    /* purple theme
+        - light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe
+        - dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff
+    */
+    /*
+    --c_purple_darker: #310055;
+    --c_purple_dark: #4A0A77;
+    --c_purple: #6818A5;
+    --c_purple_light: #CBAFFE;
+    --c_purple_lighter: #F5ECFE;
+
+    --c_blue: #0044FF;
+    --c_blue_pastel: #B8E0FF;
+    --c_blue_light: #73E8FF;
+    --c_blue_dark: #003ADB;
+    */
+    /* --c_red: * /
+    --c-red: #FF0000;
+    --c_red_pastel: #FAE0E2;
+    --c_red_lighter: #FAE0E2;
+    */
+}
+
+html {
+    height: 100vh;
+    /* overflow-y: clip; */
+}
+
+body {
+    background-color: var(--colour-page-background);
+    color: var(--colour-text);
+    font-family: var(--font-family-base);
+    font-family: Arial;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: linear-gradient(to bottom right, var(--colour-page-background-1), var(--colour-page-background-2)); /* var(--c_purple); */
+    height: 100vh;
+    /* max-height: 100vh;
+    overflow-y: clip; */
+}
+
+* {
+    margin: 0;
+}
+
+script, link {
+    display: none !important;
+}
+
+/*
+#pageBody {
+    / * height: 69vh !important; * /
+    max-height: 79vh;
+    padding: 0 5vw;
+    margin: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 90vw;
+    color: var(--colour-text);
+}
+*/
+
+.page-body > * {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    align-self: center;
+    font-size: 1rem;
+    color: var(--colour-text);
+}
+#pageBody > * > * {
+    align-self: center;
+    padding-top: 0.5vh 0.5vw;
+    padding-bottom: 0.5vh 0.5vw;
+}
+#pageBody > .card {
+    height: fit-content;
+    margin: 0.5vh auto;
+}
+
+
+
+/* Add a card effect for articles */
+.card {
+    background-color: var(--colour-text-background);
+    padding: 1vh 2.5vw;
+    margin: 1vh 1vw;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 1.5vh;
+    position: relative;
+    height: fit-content;
+    max-width: 80vw;
+}
+
+.container {
+    flex: 1;
+    margin: 0;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: flex-start;
+    /* max-width: 100%; */
+    /* min-width: fit-content; */
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: auto 0;
+}
+
+.row {
+    display: flex; 
+    flex-direction: row;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.container > .card:first-of-type {
+    margin-top: none;
+}
+
+
+/*
+/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other *
+@media screen and (max-width: 800px) {
+    .leftcolumn, .rightcolumn {   
+        width: 100%;
+        /* padding: 0; *
+    }
+}
+
+/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *
+@media screen and (max-width: 400px) {
+    .topnav a {
+        float: none;
+        width: 100%;
+    }
+}
+*/
+
+.container-input {
+    padding: 1vh 1vw;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.container-input > label {
+    width: 100%;
+    margin-bottom: 1vh;
+    margin-top: 0;
+}
+
+.container-input > input,
+.container-input > textarea {
+    border: 2px solid var(--colour-accent);
+    border-radius: 0.5vh;
+    padding: 1vh 1vw;
+}
+
+.label-title {
+    width: 100%;
+}
+
+
+ul {
+    max-width: 90%;
+    padding: 5px 0 10px 0;
+    width: fit-content;
+    margin: auto;
+}
+li {
+    text-align: left;
+    font-size: 18px;
+}
+
+
+:not(input,textarea,select,button).dirty {
+    background-color: var(--colour-accent);
+}
+input.dirty, textarea.dirty, select.dirty {
+    border-color: var(--colour-primary);
+}
+
+.is-collapsed {
+    display: none;
+}
+
+.button {
+    display: inline-block;
+    padding: 0.5vh 0.75vh;
+    border-radius: 0.75vh;
+    text-decoration: none;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    width: fit-content;
+}
+.button:not(.is_collapsed) {
+    cursor: pointer;
+}
+.button.is_collapsed {
+    display: block;
+    opacity: 0;
+}
+
+.button-primary {
+    background: var(--colour-accent);
+    color: var(--colour-primary);
+    border: 2px solid var(--colour-primary);
+}
+
+.button-primary:hover {
+    background: var(--colour-secondary);
+    color: var(--colour-accent);
+}
+
+.button-light {
+    background: white;
+    color: var(--colour-primary);
+}
+
+.button-light:hover {
+    background: var(--colour-accent);
+}
+
+.logo:hover{
+    cursor: pointer;
+}
+
+
+.button.icon.active.delete, 
+.button.icon.active.add {
+    height: 2vh;
+}
+
+
+
+
+select {
+    border: 1px solid var(--colour-accent);
+    background-color: var(--colour-page-background-1);
+}
+
+img, video {
+    border-radius: 3vh;
+}
+
+
+h1 {
+    font-size: 2.5rem;
+}
+h2 {
+    font-size: 1.8rem;
+}
+h3 {
+    font-size: 1.2rem;
+    margin-top: 1vh;
+}
+h4 {
+    font-size: 13px;
+    margin: 1vh;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+h5 {
+    font-size: 11px;
+    margin: 1vh;
+}
+
+
+.text-center {
+    text-align: center;
+}
+.section-title {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+}
+.section-subtitle {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+}
+
+
+
+
+/* Overlay modal */
+.overlay {
+    /*
+    display: none;
+    */
+    position: fixed;
+    width: 100px;
+    /* height: 50%; */ 
+    background: var(--colour-page-background);
+    justify-content: right;
+    align-items: right;
+    align-self: right;
+    z-index: 999;
+}
+.is_collapsed {
+    display: none;
+}
+
+/* Hamburger menu overlay */
+#buttonHamburger {
+    cursor: pointer;
+    position: fixed;
+    right: 1vh;
+    min-height: 3.5vh;
+    max-height: 3.5vh;
+    min-width: 4vh;
+    max-width: 4vh;
+    z-index: 10;
+    padding: 0;
+}
+#buttonHamburger.expanded {
+    min-width: 100px;
+    max-width: 100px;
+    min-height: 5vh;
+    max-height: 5vh;
+    padding-left: calc(100 * 1px - 5 * 1vh);
+    padding-bottom: 1vh;
+}
+#buttonHamburger .icon.hamburger {
+    min-height: 2.5vh;
+    max-height: 2.5vh;
+    min-width: 2.5vh;
+    max-width: 2.5vh;
+    padding: 0.5vh 0.75vh;
+}
+/*
+#buttonHamburger:hover {
+    text-decoration: none;
+    cursor: pointer;
+}
+*/
+#overlayHamburger {
+    top: 7vh;
+    right: 1vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 60vh;
+    background-color: var(--colour-accent);
+    border: 2px solid var(--border-colour);
+    border-radius: 0.75vh;
+    width: 100px;
+    z-index: 2;
+    padding-top: 3.5vh;
+}
+#overlayHamburger:first-child {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+#overlayHamburger:last-child {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+#overlayHamburger > :hover {
+    color: var(--colour-page-background);
+    background-color: var(--colour-primary);
+}
+#overlayHamburger .container {
+    background-color: var(--colour-page-background);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    /* color: var(--colour-text); */
+    font-weight: bold;
+    font-size: 15px;
+    /* height: 18px; */
+    cursor: pointer;
+    padding: 0;
+    height: fit-content;
+}
+#overlayHamburger .container:hover {
+    color: var(--colour-page-background);
+    background-color: var(--colour-primary);
+}
+#overlayHamburger > .container {
+    /*
+    padding-top: 4.5px;
+    padding-bottom: 4.5px;
+    */
+}
+#overlayHamburger .container a {
+    width: 100%;
+    padding: 4.5px 0;
+    color: var(--colour-text);
+    text-decoration: none;
+    line-height: initial;
+}
+#overlayHamburger .container a:hover {
+    color: var(--colour-page-background);
+    background-color: var(--colour-primary);
+}
+
+@media screen and (max-width: 400px) {
+    #buttonHamburger {
+        min-height: 5vh;
+        max-height: 5vh;
+        min-width: 5.5vh;
+        max-width: 5.5vh;
+    }
+    #buttonHamburger .icon.hamburger {
+        min-height: 4vh;
+        max-height: 4vh;
+        min-width: 4vh;
+        max-width: 4vh;
+    }
+    #overlayHamburger {
+        padding-top: 5vh;
+    }
+}
+
+/* Confirm overlay */
+#overlayConfirm {
+    position: absolute;
+    left: 25vw;
+    width: 50vw;
+    height: 50vh;
+}
+
+#overlayConfirm .row > * {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#overlayConfirm .row .button.button-cancel {
+    margin-right: 0.5vh;
+}
+#overlayConfirm .row .button.submit {
+    margin-left: 0.5vh;
+}
+
+
+
+
+#formFilters .container {
+    max-width: fit-content;
+}
+
+thead, tbody {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+}
+
+th {
+    background-color: transparent;
+}
+td {
+    font-size: min(16px, calc(1vh * 3));
+}
+
+th, td {
+    min-width: fit-content;
+}
+tr:not(:last-child) > td {
+    border-bottom: 1px dashed var(--border-colour);
+}
+td > table > tbody > tr > td {
+    border: none !important;
+}
+th.is_collapsed, td.is_collapsed {
+    display: table-cell !important;
+}
+td.dirty {
+    background-color: var(--colour-primary);
+}
+td:not(.dirty) {
+    background-color: transparent;
+}
+
+tr {
+    min-height: 1px;
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    border-color: var(--border-colour);
+    background-color: transparent;
+}
+
+table button {
+    margin: 0.25vh;
+    padding: 0.5vh 1vh;
+}
+
+table button.active {
+    background-color: var(--colour-page-background);
+}
+
+tr.delete, tr.delete > td {
+    background-color: var(--colour-error);
+}
+
+table div {
+    align-content: center;
+}
+
+
+/* Navigation */
+.topnav {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    flex-direction: row;
+    font-weight: bold;
+    font-size: 1vh;
+    max-height: 7vh;
+    height: 7vh;
+    align-items: flex-start;
+    background: var(--colour-text-background);
+    justify-content: center; /* space-between */
+    align-items: center;
+}
+.topnav a,
+.topnav label,
+.topnav p,
+.topnav h1 {
+    float: left;
+    display: flex;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+    max-height: 7vh;
+    justify-content: center;
+}
+.topnav h1 {
+    color: var(--colour-text-link-visited);
+}
+.topnav a:hover {
+    background-color: var(--colour-page-background);
+    color: var(--colour-text)
+}
+.topnav > .container {
+    width: 30vw;
+    min-width: 30vw;
+    max-width: 30vw;
+    height: 100%;
+    align-items: center;
+    align-self: center;
+    display: flex;
+}
+.topnav .container.logo {
+    cursor: pointer;
+}
+.topnav .container .logo {
+    /* min-width: 35vh; */
+    max-width: 30vw;
+    width: 30vw;
+    /* min-height: 6vh; */
+    max-height: 6vh;
+    margin: 0.5vh;
+    margin-right: auto;
+}
+.topnav .container.company-name {
+    min-width: 30vw;
+    max-width: 30vw;
+}
+.company-name {
+    font-size: 1.6rem;
+}
+.nav-links {
+    display: flex;
+    gap: 0 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    max-width: calc(1vw * 100 - 1vh * 35);
+    align-items: center;
+    margin: 0 0.5vw;
+}
+.nav-links a {
+    text-decoration: none;
+    color: var(--colour-text);
+    font-weight: normal;
+    align-content: center;
+    font-size: 1.2rem;
+    width: fit-content;
+    padding: 0.5vh 0.5vw;
+    border-radius: 0.5vh;
+}
+.nav-links a.button {
+    color: var(--colour-text-background);
+    margin: 0 auto;
+    font-weight: bold;
+}
+
+
+/* Page Filters */
+#formFilters {
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  
+}
+#formFilters * {
+    font-size: 1rem;
+}
+
+#formFilters .container {
+}
+#formFilters .container-input {
+    max-width: fit-content;
+    padding: 0 0.5vh;
+}
+#formFilters .container-input:has(.dirty) {
+    background-color: var(--colour-accent);
+} 
+
+#formFilters .container-input input {
+    width: 10vh;
+    max-width: 10vh;
+    height: 20px;
+}
+/*
+#formFilters .container-input input {
+    height: 1.7vh;
+}
+#formFilters .container-input select {
+    height: 2vh;
+}
+*/
+
+#formFilters .container-input.filter.active_only {
+    width: 8vh;
+}
+#formFilters .container-input.filter.active_only input {
+    display: none;
+}
+#formFilters .container-input.filter.active_only svg.active_only {
+    height: 25px;
+    fill: var(--colour-text-background);
+    background-color: var(--colour-accent);
+    /* border: 1px solid var(--colour-accent);
+    border-radius: 0.5vh; */
+    width: 25px;
+}
+#formFilters .container-input.filter.active_only svg.active_only.is_checked {
+    fill: var(--colour-accent);
+    background-color: var(--colour-text-background);
+}
+#formFilters .container-input.filter.is_not_empty {
+    width: 12vh;
+}
+
+/*
+#formFilters button {
+    padding: 0.5vh 0.75vh;
+    background-color: var(--colour-accent);
+    color: var(--colour-primary);
+    font-weight: bold;
+    border-radius: 0.75vh;
+    border: 2px solid var(--colour-primary);
+}
+
+#formFilters button.is_collapsed {
+    display: block;
+    opacity: 0;
+}
+*/
+
+form.filter button.save, form.filter button.button-cancel {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+form.filter button.save, form.filter button.button-cancel {
+    margin-top: 0;
+    margin-bottom: 1px;
+}
+
+/*
+@media screen and (max-width: 400px) {
+    .topnav h1 {
+        font-size: 16px;
+    }
+}
+*/
+
+@media screen and (max-width: 980px) {
+    /*
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+    */
+    .nav-links,
+    .nav-links.tcg {
+        display: none;
+    }
+    .topnav {
+        justify-content: flex-start;
+        align-items: start;
+    }
+    .topnav.tcg {
+        padding-right: 30vw;
+    }
+}
+/* In sections */
+
+#formFilters {
+    padding: 0.5vh 1vw;
+    margin-top: 1vh;
+}
+
+table.table-main {
+    overflow-x: auto;
+    padding: 1vh 1vw;
+    max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
+    width: min-content;
+    align-items: normal;
+    justify-content: normal;
+}
+
+table.table-main * {
+    padding: 0.25vh 0.5vh;
+}
+
+table.table-main thead {
+    max-height: 4vh;
+    overflow-y: visible;
+    background-color: var(--colour-text-background);
+}
+
+table.table-main tbody {
+    max-height: 75vh;
+    overflow-y: auto;
+    min-width: fit-content;
+    max-width: fit-content;
+    overflow-x: visible;
+}
+table.table-main tbody.is_collapsed {
+    display: block;
+}
+table.table-main:has(tbody > div) tbody {
+}
+table.table-main tbody > div {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    justify-self: center;
+    align-content: center;
+    align-items: center;
+    align-self: center;
+    position: relative;
+    display: block;
+    width: 100%; /* min(calc(90vh), calc(70vw)); */
+}
+
+table.table-main select, 
+table.table-main input:not([type="checkbox"]), 
+table.table-main textarea, 
+table.table-main div {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    border: 1px solid var(--colour-accent);
+    border-radius: 0.5vh;
+    text-align: center;
+    background-color: var(--colour-text-background);
+    font-size: 16px;
+}
+
+table.table-main thead tr th, 
+table.table-main tbody tr td {
+    max-width: 20vh;
+    min-width: 20vh;
+    padding: 0 0.5vh;
+}
+table.table-main tbody tr td {
+    height: 3vh;
+    /* padding-top: 0.5vh; */
+}
+table.table-main thead tr th.notes, 
+table.table-main tbody tr td.notes {
+    max-width: fit-content;
+}
+table.table-main tbody tr td:has(.dirty) {
+    background-color: var(--colour-primary);
+}
+table.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
+    background-color: var(--colour-text-background);
+}
+table.table-main tbody tr:not(:last-of-type) td {
+    padding-bottom: 0.25vh;
+}
+table.table-main tbody tr td.ddl-preview div {
+    cursor: pointer;
+}
+table.table-main tbody tr td.ddl-preview div,
+table.table-main tbody tr td.ddl-preview select {
+    padding-left: 2vh;
+    padding-right: 2vh;
+}
+table.table-main thead tr th.active, 
+table.table-main tbody tr td.active {
+    max-width: 6vh;
+    min-width: 6vh;
+}
+table.table-main thead tr th.active svg.active.add {
+    fill: var(--colour-primary);
+    background-color: var(--colour-accent);
+    border: 2px solid var(--colour-accent);
+    padding: 0;
+    border-radius: 1vh;
+}
+table.table-main tbody tr td.active svg.active.add {
+    fill: var(--colour-primary);
+}
+table.table-main tbody tr td.active svg.active.delete {
+    fill: var(--colour-error);
+}
+table.table-main tbody tr td.display_order, 
+table.table-main thead tr th.display_order {
+    max-width: 5vh;
+    min-width: 5vh;
+}
+
+#container-template-elements {
+    display: none;
+}
+
+
+@media screen and (max-width: 850px) {
+}
+@media screen and (max-width: 400px) {
+    #formFilters input[type="text"],
+    #formFilters select {
+        width: 15vh;
+        /* height: 3vh; */
+    }
+    .topnav .container.company-name {
+        margin: 0 auto;
+        min-width: 40vw;
+        max-width: 64vw;
+    }
+    .company-name {
+        font-size: 1.2rem;
+    }
+    table.table-main {
+        max-height: 61vh;
+    }
+    table.table-main thead {
+        font-size: 0.8rem;
+    }
+    table.table-main tbody {
+        max-height: 53vh;
+    }
+}
+
+
+
+
+/* Default */
+:root {
+    /* Claude dark blue / grey theme */
+    --colour-accent: #C77DFF;
+    --colour-error: red;
+    --colour-error-accent: #fc8181;
+    --colour-error-highlight: #fff5f5;
+    --colour-error-title: #c53030;
+    --colour-page-background: #E0AAFF;
+    --colour-page-background-1: #F5ECFE;
+    --colour-page-background-2: #FAE0E2;
+    --colour-primary: #240046;
+    --colour-secondary: #3C096C;
+    --colour-success: #38a169;
+    --colour-success-highlight: #f0fff4;
+    --colour-success-title: #16a34a;
+    --colour-text: #10002B;
+    --colour-text-background: white;
+    --colour-text-link-unvisited: #0000EE;
+    --colour-text-link-visited: #551A8B;
+}
+
+/*
+--c_purple_darker: #310055;
+--c_purple_dark: #4A0A77;
+--c_purple: #6818A5;
+--c_purple_light: #CBAFFE;
+--c_purple_lighter: #F5ECFE;
+
+--c_blue: #0044FF;
+--c_blue_pastel: #B8E0FF;
+--c_blue_light: #73E8FF;
+--c_blue_dark: #003ADB;
+/* --c_red: * /
+--c-red: #FF0000;
+--c_red_pastel: #FAE0E2;
+--c_red_lighter: #FAE0E2;
+}
+*/
+
+/*# sourceMappingURL=main.bundle.css.map*/

static/dist/css/tcg_game.bundle.css

@@ -0,0 +1,585 @@
+
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
+}
+
+/* Main Table */
+#pageBody {
+    max-height: 77vh;
+    padding: 0 5vw;
+    margin: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 90vw;
+    color: var(--colour-text);
+}
+
+
+/* Footer */
+.footer {
+    padding: 1vh 1vw;
+    text-align: center;
+    margin: 0;
+    max-height: 5vh;
+    overflow-y: auto;
+    background-color: var(--colour-accent);
+    position: absolute;
+    bottom: 0;
+    width: 98vw;
+}
+
+@media screen and (max-width: 400px) {
+    .footer  {
+        max-height: 8vh;
+        padding: 0.75vh 2vw;
+        font-size: 10px;    
+        width: 96vw;
+        max-width: 96vw;
+    }
+    .footer > h4 {
+        font-size: 10px;
+    }
+    .footer > h5 {
+        font-size: 9px;
+    }
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}
+/* MTG Single Game Page Styles */
+
+#buttonHamburger {
+    display: none;
+}
+
+/* Game Header */
+.game-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1vh auto;
+    flex-wrap: wrap;
+    gap: 0;
+    animation: tcg-fadeInDown 0.8s ease-out;
+}
+
+.header-left, .header-right {
+    flex: 1;
+    color: var(--tcg-text-secondary);
+    font-size: 1rem;
+    margin: 0 auto;
+}
+
+.header-left {
+    padding-left: 15vw;
+    width: 30vw;
+}
+
+.header-right {
+    text-align: right;
+    min-width: 15vw;
+    width: 15vw;
+}
+
+.header-center {
+    text-align: center;
+    flex: 2;
+    padding-left: 4vw;
+}
+
+.game-header .container.save.button-cancel {
+    width: 15vw;
+    max-width: 15vw;
+}
+
+.back-link {
+    color: var(--tcg-text-secondary);
+    text-decoration: none;
+    font-family: 'Cinzel', serif;
+    font-size: 1rem;
+    transition: color 0.3s ease;
+}
+
+.back-link:hover {
+    color: var(--tcg-accent-gold);
+}
+
+.game-title {
+    font-family: 'Cinzel', serif;
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--tcg-accent-gold), var(--tcg-accent-purple));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.5rem;
+    letter-spacing: 0.05em;
+}
+
+.game-meta {
+    display: flex;
+    gap: 0;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.game-meta .location {
+    color: var(--tcg-text-secondary);
+    font-size: 1rem;
+    width: 4vw;
+}
+
+/* Setup Section */
+.setup-section {
+    max-width: 800px;
+    margin: 0 auto 2rem;
+    animation: tcg-fadeIn 0.8s ease-out 0.2s backwards;
+}
+
+.setup-controls {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 2rem;
+}
+
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.control-group .tcg-input {
+    width: 80px;
+    text-align: center;
+    font-family: 'Cinzel', serif;
+    font-size: 1.2rem;
+}
+
+.player-names-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    max-width: 800px;
+    margin: 0 auto 2rem;
+    justify-content: center;
+}
+
+.player-name-input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    border: 1px solid gray;
+    border-radius: 0.5vh;
+    padding: 1vh;
+    width: fit-content;
+}
+.player-name-input-wrapper.is_collapsed {
+    display: none;
+}
+
+.player-name-heading-label,
+.player-name-label {
+    font-size: 0.9rem;
+    color: var(--tcg-text-secondary);
+    letter-spacing: 0.05em;
+}
+.player-name-label {
+    font-size: 0.8rem;
+}
+
+.setup-actions {
+    text-align: center;
+}
+
+/* Players Grid */
+.players-grid {
+    display: flex; /* grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    */
+  gap: 2rem;
+  margin-bottom: 2rem;
+  max-width: 90vw;
+  flex-wrap: wrap;
+  margin: 0 auto;
+  width: fit-content;
+
+}
+
+/* Player Card */
+.player-card {
+    background: var(--tcg-bg-secondary);
+    border: 2px solid var(--tcg-border-color);
+    border-radius: 16px;
+    padding: 1.5rem;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.4s ease;
+    animation: tcg-scaleIn 0.5s ease-out backwards;
+    width: fit-content;
+    max-width: 38vw;
+    min-width: 20vw;
+    margin: 0 auto;
+}
+
+.player-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--tcg-accent-purple), var(--tcg-accent-gold));
+}
+
+.player-card.eliminated {
+    opacity: 0.5;
+    filter: grayscale(0.8);
+}
+
+.player-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.player-info {
+    flex: 1;
+    min-width: 150px;
+}
+
+.player-name {
+    font-family: 'Cinzel', serif;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--tcg-accent-gold);
+    letter-spacing: 0.05em;
+    margin-bottom: 0.5rem;
+}
+
+.commander-deaths {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--tcg-text-secondary);
+}
+
+.death-counter {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--tcg-bg-card);
+    border: 1px solid var(--tcg-border-color);
+    border-radius: 6px;
+    padding: 0.25rem 0.5rem;
+}
+
+.death-display {
+    font-family: 'Cinzel', serif;
+    font-weight: 600;
+    color: var(--tcg-text-primary);
+    min-width: 20px;
+    text-align: center;
+}
+
+.death-btn {
+    background: transparent;
+    border: none;
+    color: var(--tcg-text-secondary);
+    cursor: pointer;
+    font-size: 1rem;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.death-btn:hover {
+    color: var(--tcg-accent-red);
+    transform: scale(1.2);
+}
+
+.eliminate-btn {
+    background: var(--tcg-accent-red);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    font-family: 'Cinzel', serif;
+    transition: all 0.3s ease;
+}
+
+.eliminate-btn:hover {
+    background: #b91c1c;
+    transform: scale(1.05);
+}
+
+/* Life Total */
+.life-total {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.life-display {
+    font-family: 'Cinzel', serif;
+    font-size: 4rem;
+    font-weight: 700;
+    color: var(--tcg-text-primary);
+    margin-bottom: 1rem;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.life-controls {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.life-btn {
+    background: var(--tcg-bg-card);
+    border: 2px solid var(--tcg-border-color);
+    color: var(--tcg-text-primary);
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    font-family: 'Cinzel', serif;
+    font-size: 1.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.life-btn:hover {
+    border-color: var(--tcg-accent-purple);
+    background: var(--tcg-accent-purple);
+    color: var(--tcg-bg-primary);
+    transform: scale(1.1);
+}
+
+.life-btn:active {
+    transform: scale(0.95);
+}
+
+/* Commander Damage Section */
+.commander-damage-section {
+    border-top: 1px solid var(--tcg-border-color);
+    padding-top: 1.5rem;
+}
+
+.section-title {
+    font-family: 'Cinzel', serif;
+    font-size: 1.1rem;
+    color: var(--tcg-accent-purple);
+    margin-bottom: 1rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.damage-grid {
+    display: grid;
+    gap: 0.75rem;
+}
+
+.damage-row {
+    background: var(--tcg-bg-card);
+    border: 1px solid var(--tcg-border-color);
+    border-radius: 8px;
+    padding: 0.75rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+
+.damage-row:hover {
+    border-color: var(--tcg-accent-purple);
+    background: rgba(139, 92, 246, 0.1);
+}
+
+.damage-source {
+    font-size: 1rem;
+    color: var(--tcg-text-secondary);
+}
+
+.damage-controls {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.damage-display {
+    font-family: 'Cinzel', serif;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--tcg-text-primary);
+    min-width: 40px;
+    text-align: center;
+}
+
+.damage-display.lethal {
+    color: var(--tcg-accent-red);
+    animation: pulse 1s ease-in-out infinite;
+}
+
+.damage-btn {
+    background: var(--tcg-bg-primary);
+    border: 1px solid var(--tcg-border-color);
+    color: var(--tcg-text-primary);
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.damage-btn:hover {
+    border-color: var(--tcg-accent-purple);
+    background: var(--tcg-accent-purple);
+    color: var(--tcg-bg-primary);
+}
+
+/* Save Indicator */
+.save-indicator {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: var(--tcg-bg-secondary);
+    border: 2px solid var(--tcg-accent-gold);
+    border-radius: 8px;
+    padding: 0.75rem 1.5rem;
+    font-family: 'Cinzel', serif;
+    color: var(--tcg-accent-gold);
+    font-size: 0.9rem;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.3s ease;
+    pointer-events: none;
+    z-index: 1000;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+}
+
+.save-indicator.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Badges (same as games page) */
+.badge {
+    display: inline-block;
+    padding: 0.35rem 0.75rem;
+    border-radius: 20px;
+    font-family: 'Cinzel', serif;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.badge-commander {
+    background: linear-gradient(135deg, var(--tcg-accent-purple), rgba(139, 92, 246, 0.5));
+    color: white;
+    margin: 0 auto;
+}
+
+.badge-draft {
+    background: linear-gradient(135deg, #2563eb, rgba(37, 99, 235, 0.5));
+    color: white;
+}
+
+.badge-sealed {
+    background: linear-gradient(135deg, #059669, rgba(5, 150, 105, 0.5));
+    color: white;
+}
+
+.badge-standard {
+    background: linear-gradient(135deg, var(--tcg-accent-gold), rgba(212, 175, 55, 0.5));
+    color: var(--tcg-bg-primary);
+}
+
+/* Hidden Class */
+.hidden {
+    display: none !important;
+}
+
+/* Animations */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .game-header {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .header-left, .header-right {
+        text-align: center;
+    }
+
+    .game-title {
+        font-size: 1.8rem;
+    }
+
+    .players-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .life-display {
+        font-size: 3rem;
+    }
+
+    .life-btn {
+        width: 50px;
+        height: 50px;
+        font-size: 1.5rem;
+    }
+
+    .setup-controls {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+@media (max-width: 1260px) {
+    #buttonHamburger {
+        display: block;
+    }
+}
+
+/*# sourceMappingURL=tcg_game.bundle.css.map*/

static/dist/css/tcg_games.bundle.css

@@ -0,0 +1,437 @@
+
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
+}
+
+/* Main Table */
+#pageBody {
+    max-height: 77vh;
+    padding: 0 5vw;
+    margin: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 90vw;
+    color: var(--colour-text);
+}
+
+
+/* Footer */
+.footer {
+    padding: 1vh 1vw;
+    text-align: center;
+    margin: 0;
+    max-height: 5vh;
+    overflow-y: auto;
+    background-color: var(--colour-accent);
+    position: absolute;
+    bottom: 0;
+    width: 98vw;
+}
+
+@media screen and (max-width: 400px) {
+    .footer  {
+        max-height: 8vh;
+        padding: 0.75vh 2vw;
+        font-size: 10px;    
+        width: 96vw;
+        max-width: 96vw;
+    }
+    .footer > h4 {
+        font-size: 10px;
+    }
+    .footer > h5 {
+        font-size: 9px;
+    }
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}
+/* MTG Games Page Styles */
+
+/* Page Header */
+.page-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    animation: tcg-fadeInDown 0.8s ease-out;
+    margin: 0 auto;
+}
+
+.page-title {
+    font-family: 'Cinzel', serif;
+    font-size: 3rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--tcg-accent-gold), var(--tcg-accent-purple));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.5rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.page-subtitle {
+    font-size: 1.2rem;
+    color: var(--tcg-text-secondary);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+}
+
+/* Games Section */
+.games-section {
+    position: relative;
+    animation: tcg-fadeIn 0.8s ease-out 0.2s backwards;
+    margin: 2vh auto;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+/* Filters Form */
+.filters-form {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background: var(--tcg-bg-card);
+    border: 1px solid var(--tcg-border-color);
+    border-radius: 12px;
+}
+
+.filters-row {
+    display: flex;
+    gap: 1.5rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+}
+
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 150px;
+}
+
+.filter-group.checkbox-group {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.filter-group.checkbox-group input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    accent-color: var(--tcg-accent-purple);
+}
+
+.filter-group.checkbox-group .tcg-label {
+    margin-bottom: 0;
+}
+
+/* Games Table */
+.games-table-container {
+    overflow-x: auto;
+}
+
+.games-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 1rem;
+}
+
+.games-table thead {
+    background: var(--tcg-bg-card);
+    border-bottom: 2px solid var(--tcg-accent-purple);
+}
+
+.games-table th {
+    font-family: 'Cinzel', serif;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--tcg-accent-gold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 1rem;
+    text-align: left;
+}
+
+.games-table tbody tr {
+    border-bottom: 1px solid var(--tcg-border-color);
+    transition: all 0.3s ease;
+}
+
+.games-table tbody tr:hover {
+    background: rgba(139, 92, 246, 0.1);
+}
+
+.games-table tbody tr.inactive {
+    opacity: 0.5;
+}
+
+.games-table td {
+    padding: 1rem;
+    vertical-align: middle;
+}
+.games-table tbody td.game-location,
+.games-table tbody td.game-date {
+    color: white;
+}
+
+.game-id {
+    font-family: 'Cinzel', serif;
+    font-weight: 600;
+    color: var(--tcg-text-secondary);
+}
+
+/* Badges */
+.badge {
+    display: inline-block;
+    padding: 0.35rem 0.75rem;
+    border-radius: 20px;
+    font-family: 'Cinzel', serif;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.badge-commander {
+    background: linear-gradient(135deg, var(--tcg-accent-purple), rgba(139, 92, 246, 0.5));
+    color: white;
+}
+
+.badge-draft {
+    background: linear-gradient(135deg, #2563eb, rgba(37, 99, 235, 0.5));
+    color: white;
+}
+
+.badge-sealed {
+    background: linear-gradient(135deg, #059669, rgba(5, 150, 105, 0.5));
+    color: white;
+}
+
+.badge-standard {
+    background: linear-gradient(135deg, var(--tcg-accent-gold), rgba(212, 175, 55, 0.5));
+    color: var(--tcg-bg-primary);
+}
+
+/* Status Indicators */
+.status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+.status::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.status-active {
+    background: rgba(34, 197, 94, 0.2);
+    color: #22c55e;
+}
+
+.status-active::before {
+    background: #22c55e;
+    animation: pulse-status 2s ease-in-out infinite;
+}
+
+.status-ended {
+    background: rgba(107, 114, 128, 0.2);
+    color: #9ca3af;
+}
+
+.status-ended::before {
+    background: #9ca3af;
+}
+
+.status-inactive {
+    background: rgba(220, 38, 38, 0.2);
+    color: #dc2626;
+}
+
+.status-inactive::before {
+    background: #dc2626;
+}
+
+@keyframes pulse-status {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+}
+
+/* Join Button */
+.btn-join {
+    padding: 0.5rem 1.25rem;
+    font-size: 0.9rem;
+}
+
+/* No Games Message */
+.no-games {
+    text-align: center;
+    padding: 3rem !important;
+}
+
+.no-games-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.no-games-icon {
+    font-size: 3rem;
+    opacity: 0.5;
+}
+
+.no-games-message p {
+    color: var(--tcg-text-secondary);
+    font-size: 1.1rem;
+}
+
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: tcg-fadeIn 0.3s ease-out;
+}
+
+.modal-overlay.hidden {
+    display: none;
+}
+
+.modal-content {
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: tcg-scaleIn 0.3s ease-out;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.modal-header .tcg-section-title {
+    margin-bottom: 0;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    color: var(--tcg-text-secondary);
+    font-size: 2rem;
+    cursor: pointer;
+    transition: color 0.3s ease;
+    line-height: 1;
+}
+
+.modal-close:hover {
+    color: var(--tcg-accent-red);
+}
+
+/* New Game Form */
+.new-game-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group textarea.tcg-input {
+    resize: vertical;
+    min-height: 80px;
+}
+
+.form-group select.tcg-input {
+    cursor: pointer;
+}
+
+.form-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    margin-top: 1rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .page-title {
+        font-size: 2rem;
+    }
+
+    .section-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .filters-row {
+        flex-direction: column;
+    }
+
+    .filter-group {
+        width: 100%;
+    }
+
+    .games-table th,
+    .games-table td {
+        padding: 0.75rem 0.5rem;
+        font-size: 0.9rem;
+    }
+
+    .btn-join {
+        padding: 0.4rem 0.75rem;
+        font-size: 0.8rem;
+    }
+
+    .modal-content {
+        width: 95%;
+        padding: 1.5rem;
+    }
+}
+
+
+/*# sourceMappingURL=tcg_games.bundle.css.map*/

static/dist/css/tcg_home.bundle.css

@@ -0,0 +1,75 @@
+
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
+}
+
+/* Main Table */
+#pageBody {
+    max-height: 77vh;
+    padding: 0 5vw;
+    margin: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 90vw;
+    color: var(--colour-text);
+}
+
+
+/* Footer */
+.footer {
+    padding: 1vh 1vw;
+    text-align: center;
+    margin: 0;
+    max-height: 5vh;
+    overflow-y: auto;
+    background-color: var(--colour-accent);
+    position: absolute;
+    bottom: 0;
+    width: 98vw;
+}
+
+@media screen and (max-width: 400px) {
+    .footer  {
+        max-height: 8vh;
+        padding: 0.75vh 2vw;
+        font-size: 10px;    
+        width: 96vw;
+        max-width: 96vw;
+    }
+    .footer > h4 {
+        font-size: 10px;
+    }
+    .footer > h5 {
+        font-size: 9px;
+    }
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}
+#pageBody .column .row {
+    margin-top: 0.5vh;
+}
+#pageBody .column .row .button {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/*# sourceMappingURL=tcg_home.bundle.css.map*/

static/dist/css/tcg_home.bundle.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"css/tcg_home.bundle.css","mappings":";;AAEA;IACI,gBAAgB;IAChB,oBAAoB;IACpB,cAAc;AAClB;;;AAGA,iBAAiB;AACjB;IACI,sBAAsB;AAC1B;;AAEA,eAAe;AACf;IACI,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,SAAS;IACT,qBAAqB;IACrB,2BAA2B;IAC3B,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;IAClB,kBAAkB;IAClB,WAAW;IACX,yBAAyB;AAC7B;;;AAGA,WAAW;AACX;IACI,gBAAgB;IAChB,kBAAkB;IAClB,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,sCAAsC;IACtC,kBAAkB;IAClB,SAAS;IACT,WAAW;AACf;;AAEA;IACI;QACI,eAAe;QACf,mBAAmB;QACnB,eAAe;QACf,WAAW;QACX,eAAe;IACnB;IACA;QACI,eAAe;IACnB;IACA;QACI,cAAc;IAClB;AACJ;;AAEA;IACI,UAAU;IACV,SAAS;AACb,C;ACjEA;IACI,iBAAiB;AACrB;AACA;IACI,iBAAiB;IACjB,kBAAkB;AACtB,C","sources":["webpack://app/./static/css/sections/tcg.css","webpack://app/./static/css/pages/tcg/home.css"],"sourcesContent":["\n\n.container-input > input {\n    padding: 0vh 1vh;\n    border-radius: 0.5vh;\n    max-width: 7vh;\n}\n\n\n/* Right column */\n.rightcolumn {\n    min-width: fit-content;\n}\n\n/* Main Table */\n#pageBody {\n    max-height: 77vh;\n    padding: 0 5vw;\n    margin: 0;\n    border: 0;\n    align-content: center;\n    justify-content: flex-start;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    overflow-y: auto;\n    overflow-x: hidden;\n    position: absolute;\n    width: 90vw;\n    color: var(--colour-text);\n}\n\n\n/* Footer */\n.footer {\n    padding: 1vh 1vw;\n    text-align: center;\n    margin: 0;\n    max-height: 5vh;\n    overflow-y: auto;\n    background-color: var(--colour-accent);\n    position: absolute;\n    bottom: 0;\n    width: 98vw;\n}\n\n@media screen and (max-width: 400px) {\n    .footer  {\n        max-height: 8vh;\n        padding: 0.75vh 2vw;\n        font-size: 10px;    \n        width: 96vw;\n        max-width: 96vw;\n    }\n    .footer > h4 {\n        font-size: 10px;\n    }\n    .footer > h5 {\n        font-size: 9px;\n    }\n}\n\n.footer > h4, h5 {\n    padding: 0;\n    margin: 0;\n}","#pageBody .column .row {\n    margin-top: 0.5vh;\n}\n#pageBody .column .row .button {\n    margin-left: auto;\n    margin-right: auto;\n}"],"names":[],"sourceRoot":""}

static/dist/css/user_account.bundle.css

@@ -0,0 +1,96 @@
+
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
+}
+
+/* Main Table */
+#pageBody {
+    max-height: 77vh;
+    padding: 0 5vw;
+    margin: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 90vw;
+    color: var(--colour-text);
+}
+
+
+/* Footer */
+.footer {
+    padding: 1vh 1vw;
+    text-align: center;
+    margin: 0;
+    max-height: 5vh;
+    overflow-y: auto;
+    background-color: var(--colour-accent);
+    position: absolute;
+    bottom: 0;
+    width: 98vw;
+}
+
+@media screen and (max-width: 400px) {
+    .footer  {
+        max-height: 8vh;
+        padding: 0.75vh 2vw;
+        font-size: 10px;    
+        width: 96vw;
+        max-width: 96vw;
+    }
+    .footer > h4 {
+        font-size: 10px;
+    }
+    .footer > h5 {
+        font-size: 9px;
+    }
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}
+
+
+#formFilters {
+    display: none;
+}
+
+.container.save.button-cancel {
+    position: fixed;
+    top: 10vh;
+    right: 10vh;
+}
+
+.container-input {
+    margin: 0 auto;
+}
+label {
+    font-weight: bold;
+}
+.container-input input {
+    max-width: 250px;
+}
+
+input.dirty, 
+textarea.dirty, 
+select.dirty {
+    border-color: var(--colour-primary);
+    background-color: var(--colour-page-background-2);
+}
+
+/*# sourceMappingURL=user_account.bundle.css.map*/

static/dist/css/user_account.bundle.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"css/user_account.bundle.css","mappings":";;AAEA;IACI,gBAAgB;IAChB,oBAAoB;IACpB,cAAc;AAClB;;;AAGA,iBAAiB;AACjB;IACI,sBAAsB;AAC1B;;AAEA,eAAe;AACf;IACI,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,SAAS;IACT,qBAAqB;IACrB,2BAA2B;IAC3B,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;IAClB,kBAAkB;IAClB,WAAW;IACX,yBAAyB;AAC7B;;;AAGA,WAAW;AACX;IACI,gBAAgB;IAChB,kBAAkB;IAClB,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,sCAAsC;IACtC,kBAAkB;IAClB,SAAS;IACT,WAAW;AACf;;AAEA;IACI;QACI,eAAe;QACf,mBAAmB;QACnB,eAAe;QACf,WAAW;QACX,eAAe;IACnB;IACA;QACI,eAAe;IACnB;IACA;QACI,cAAc;IAClB;AACJ;;AAEA;IACI,UAAU;IACV,SAAS;AACb,C;;;AChEA;IACI,aAAa;AACjB;;AAEA;IACI,eAAe;IACf,SAAS;IACT,WAAW;AACf;;AAEA;IACI,cAAc;AAClB;AACA;IACI,iBAAiB;AACrB;AACA;IACI,gBAAgB;AACpB;;AAEA;;;IAGI,mCAAmC;IACnC,iDAAiD;AACrD,C","sources":["webpack://app/./static/css/sections/tcg.css","webpack://app/./static/css/pages/user/user.css"],"sourcesContent":["\n\n.container-input > input {\n    padding: 0vh 1vh;\n    border-radius: 0.5vh;\n    max-width: 7vh;\n}\n\n\n/* Right column */\n.rightcolumn {\n    min-width: fit-content;\n}\n\n/* Main Table */\n#pageBody {\n    max-height: 77vh;\n    padding: 0 5vw;\n    margin: 0;\n    border: 0;\n    align-content: center;\n    justify-content: flex-start;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    overflow-y: auto;\n    overflow-x: hidden;\n    position: absolute;\n    width: 90vw;\n    color: var(--colour-text);\n}\n\n\n/* Footer */\n.footer {\n    padding: 1vh 1vw;\n    text-align: center;\n    margin: 0;\n    max-height: 5vh;\n    overflow-y: auto;\n    background-color: var(--colour-accent);\n    position: absolute;\n    bottom: 0;\n    width: 98vw;\n}\n\n@media screen and (max-width: 400px) {\n    .footer  {\n        max-height: 8vh;\n        padding: 0.75vh 2vw;\n        font-size: 10px;    \n        width: 96vw;\n        max-width: 96vw;\n    }\n    .footer > h4 {\n        font-size: 10px;\n    }\n    .footer > h5 {\n        font-size: 9px;\n    }\n}\n\n.footer > h4, h5 {\n    padding: 0;\n    margin: 0;\n}","\n#formFilters {\n    display: none;\n}\n\n.container.save.button-cancel {\n    position: fixed;\n    top: 10vh;\n    right: 10vh;\n}\n\n.container-input {\n    margin: 0 auto;\n}\nlabel {\n    font-weight: bold;\n}\n.container-input input {\n    max-width: 250px;\n}\n\ninput.dirty, \ntextarea.dirty, \nselect.dirty {\n    border-color: var(--colour-primary);\n    background-color: var(--colour-page-background-2);\n}"],"names":[],"sourceRoot":""}

static/dist/css/user_accounts.bundle.css

@@ -0,0 +1,71 @@
+
+
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
+}
+
+/* Main Table */
+#pageBody {
+    max-height: 77vh;
+    padding: 0 5vw;
+    margin: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 90vw;
+    color: var(--colour-text);
+}
+
+
+/* Footer */
+.footer {
+    padding: 1vh 1vw;
+    text-align: center;
+    margin: 0;
+    max-height: 5vh;
+    overflow-y: auto;
+    background-color: var(--colour-accent);
+    position: absolute;
+    bottom: 0;
+    width: 98vw;
+}
+
+@media screen and (max-width: 400px) {
+    .footer  {
+        max-height: 8vh;
+        padding: 0.75vh 2vw;
+        font-size: 10px;    
+        width: 96vw;
+        max-width: 96vw;
+    }
+    .footer > h4 {
+        font-size: 10px;
+    }
+    .footer > h5 {
+        font-size: 9px;
+    }
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}
+
+
+
+/*# sourceMappingURL=user_accounts.bundle.css.map*/

static/dist/css/user_accounts.bundle.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"css/user_accounts.bundle.css","mappings":";;;AAEA;IACI,gBAAgB;IAChB,oBAAoB;IACpB,cAAc;AAClB;;;AAGA,iBAAiB;AACjB;IACI,sBAAsB;AAC1B;;AAEA,eAAe;AACf;IACI,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,SAAS;IACT,qBAAqB;IACrB,2BAA2B;IAC3B,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;IAClB,kBAAkB;IAClB,WAAW;IACX,yBAAyB;AAC7B;;;AAGA,WAAW;AACX;IACI,gBAAgB;IAChB,kBAAkB;IAClB,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,sCAAsC;IACtC,kBAAkB;IAClB,SAAS;IACT,WAAW;AACf;;AAEA;IACI;QACI,eAAe;QACf,mBAAmB;QACnB,eAAe;QACf,WAAW;QACX,eAAe;IACnB;IACA;QACI,eAAe;IACnB;IACA;QACI,cAAc;IAClB;AACJ;;AAEA;IACI,UAAU;IACV,SAAS;AACb,C","sources":["webpack://app/./static/css/sections/tcg.css"],"sourcesContent":["\n\n.container-input > input {\n    padding: 0vh 1vh;\n    border-radius: 0.5vh;\n    max-width: 7vh;\n}\n\n\n/* Right column */\n.rightcolumn {\n    min-width: fit-content;\n}\n\n/* Main Table */\n#pageBody {\n    max-height: 77vh;\n    padding: 0 5vw;\n    margin: 0;\n    border: 0;\n    align-content: center;\n    justify-content: flex-start;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    overflow-y: auto;\n    overflow-x: hidden;\n    position: absolute;\n    width: 90vw;\n    color: var(--colour-text);\n}\n\n\n/* Footer */\n.footer {\n    padding: 1vh 1vw;\n    text-align: center;\n    margin: 0;\n    max-height: 5vh;\n    overflow-y: auto;\n    background-color: var(--colour-accent);\n    position: absolute;\n    bottom: 0;\n    width: 98vw;\n}\n\n@media screen and (max-width: 400px) {\n    .footer  {\n        max-height: 8vh;\n        padding: 0.75vh 2vw;\n        font-size: 10px;    \n        width: 96vw;\n        max-width: 96vw;\n    }\n    .footer > h4 {\n        font-size: 10px;\n    }\n    .footer > h5 {\n        font-size: 9px;\n    }\n}\n\n.footer > h4, h5 {\n    padding: 0;\n    margin: 0;\n}"],"names":[],"sourceRoot":""}

static/dist/css/user_company.bundle.css

@@ -0,0 +1,100 @@
+
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
+}
+
+/* Main Table */
+#pageBody {
+    max-height: 77vh;
+    padding: 0 5vw;
+    margin: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 90vw;
+    color: var(--colour-text);
+}
+
+
+/* Footer */
+.footer {
+    padding: 1vh 1vw;
+    text-align: center;
+    margin: 0;
+    max-height: 5vh;
+    overflow-y: auto;
+    background-color: var(--colour-accent);
+    position: absolute;
+    bottom: 0;
+    width: 98vw;
+}
+
+@media screen and (max-width: 400px) {
+    .footer  {
+        max-height: 8vh;
+        padding: 0.75vh 2vw;
+        font-size: 10px;    
+        width: 96vw;
+        max-width: 96vw;
+    }
+    .footer > h4 {
+        font-size: 10px;
+    }
+    .footer > h5 {
+        font-size: 9px;
+    }
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}
+
+
+#formFilters {
+    display: none;
+}
+
+.container.authorisedUser.dirty {
+    background-color: white;
+}
+
+.container.save.button-cancel {
+    position: fixed;
+    top: 1vh;
+    right: 5vh;
+    z-index: 2;
+}
+
+.container-input {
+    margin: 0 auto;
+}
+.container-input input {
+    max-width: 250px;
+    padding: 1vh 1vw;
+}
+
+.container-input:has(.dirty) {
+    background-color: var(--colour-accent);
+}
+
+.container-input textarea {
+    width: 300px;
+}
+
+/*# sourceMappingURL=user_company.bundle.css.map*/

static/dist/css/user_company.bundle.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"css/user_company.bundle.css","mappings":";;AAEA;IACI,gBAAgB;IAChB,oBAAoB;IACpB,cAAc;AAClB;;;AAGA,iBAAiB;AACjB;IACI,sBAAsB;AAC1B;;AAEA,eAAe;AACf;IACI,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,SAAS;IACT,qBAAqB;IACrB,2BAA2B;IAC3B,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;IAClB,kBAAkB;IAClB,WAAW;IACX,yBAAyB;AAC7B;;;AAGA,WAAW;AACX;IACI,gBAAgB;IAChB,kBAAkB;IAClB,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,sCAAsC;IACtC,kBAAkB;IAClB,SAAS;IACT,WAAW;AACf;;AAEA;IACI;QACI,eAAe;QACf,mBAAmB;QACnB,eAAe;QACf,WAAW;QACX,eAAe;IACnB;IACA;QACI,eAAe;IACnB;IACA;QACI,cAAc;IAClB;AACJ;;AAEA;IACI,UAAU;IACV,SAAS;AACb,C;;;AChEA;IACI,aAAa;AACjB;;AAEA;IACI,uBAAuB;AAC3B;;AAEA;IACI,eAAe;IACf,QAAQ;IACR,UAAU;IACV,UAAU;AACd;;AAEA;IACI,cAAc;AAClB;AACA;IACI,gBAAgB;IAChB,gBAAgB;AACpB;;AAEA;IACI,sCAAsC;AAC1C;;AAEA;IACI,YAAY;AAChB,C","sources":["webpack://app/./static/css/sections/tcg.css","webpack://app/./static/css/pages/user/company.css"],"sourcesContent":["\n\n.container-input > input {\n    padding: 0vh 1vh;\n    border-radius: 0.5vh;\n    max-width: 7vh;\n}\n\n\n/* Right column */\n.rightcolumn {\n    min-width: fit-content;\n}\n\n/* Main Table */\n#pageBody {\n    max-height: 77vh;\n    padding: 0 5vw;\n    margin: 0;\n    border: 0;\n    align-content: center;\n    justify-content: flex-start;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    overflow-y: auto;\n    overflow-x: hidden;\n    position: absolute;\n    width: 90vw;\n    color: var(--colour-text);\n}\n\n\n/* Footer */\n.footer {\n    padding: 1vh 1vw;\n    text-align: center;\n    margin: 0;\n    max-height: 5vh;\n    overflow-y: auto;\n    background-color: var(--colour-accent);\n    position: absolute;\n    bottom: 0;\n    width: 98vw;\n}\n\n@media screen and (max-width: 400px) {\n    .footer  {\n        max-height: 8vh;\n        padding: 0.75vh 2vw;\n        font-size: 10px;    \n        width: 96vw;\n        max-width: 96vw;\n    }\n    .footer > h4 {\n        font-size: 10px;\n    }\n    .footer > h5 {\n        font-size: 9px;\n    }\n}\n\n.footer > h4, h5 {\n    padding: 0;\n    margin: 0;\n}","\n#formFilters {\n    display: none;\n}\n\n.container.authorisedUser.dirty {\n    background-color: white;\n}\n\n.container.save.button-cancel {\n    position: fixed;\n    top: 1vh;\n    right: 5vh;\n    z-index: 2;\n}\n\n.container-input {\n    margin: 0 auto;\n}\n.container-input input {\n    max-width: 250px;\n    padding: 1vh 1vw;\n}\n\n.container-input:has(.dirty) {\n    background-color: var(--colour-accent);\n}\n\n.container-input textarea {\n    width: 300px;\n}"],"names":[],"sourceRoot":""}