Working user, Keys and chat

static/style.css

@@ -112,4 +112,72 @@ svg text {
     fill: #000;
     stroke: #000;
     font-size: 240px;
+}
+
+/* Custom Checkbox Styles */
+.custom-checkbox {
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    cursor: pointer;
+    user-select: none;
+    /* Prevent text selection */
+}
+
+.custom-checkbox input {
+    position: absolute;
+    opacity: 0;
+    /* Hide the default checkbox */
+    cursor: pointer;
+}
+
+.custom-checkbox .checkmark {
+    position: relative;
+    height: 14px;
+    width: 14px;
+    background-color: #eee;
+    /* Light grey background */
+    border-radius: 4px;
+    /* Rounded corners */
+    margin-right: 8px;
+    /* Space between checkmark and label text */
+    border: 2px solid #ccc;
+    /* Grey border */
+}
+
+/* On mouse-over, add a grey background color */
+.custom-checkbox:hover input~.checkmark {
+    background-color: #ccc;
+}
+
+/* When the checkbox is checked */
+.custom-checkbox input:checked~.checkmark {
+    background-color: var(--bulma-primary, #126d0f);
+    /* Primary color background */
+    border-color: var(--bulma-primary, #126d0f);
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.custom-checkbox .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+/* Show the checkmark when checked */
+.custom-checkbox input:checked~.checkmark:after {
+    display: block;
+}
+
+/* Style the checkmark/indicator */
+.custom-checkbox .checkmark:after {
+    left: 4px;
+    top: 1px;
+    width: 3px;
+    height: 6px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
 }