added loki form to agents

frontend/src/app/users/styles.module.css

@@ -4,7 +4,6 @@
   position: relative;
   overflow: auto;
 }
-
 /* Table */
 .table {
   width: 100%;
@@ -22,9 +21,9 @@
   padding: 12px 24px;
   text-align: left;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
-  font-size: 13px;
+
+  font-size: var(--table-font-size);
   font-style: normal;
   flex: 1 0 0;
   font-weight: 500;
@@ -40,9 +39,8 @@
 .tableBody td {
   padding: 12px 24px;
   color: #eeeffd;
-  color: color(display-p3 0.9333 0.9373 0.9882);
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -54,9 +52,7 @@
 }
 .tableBody tr:hover {
   border-bottom: 1px solid rgba(129, 135, 255, 0.25);
-  border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
   background: rgba(129, 135, 255, 0.05);
-  background: color(display-p3 0.5098 0.5294 1 / 0.05);
 }
 
 .tableActions {
@@ -67,3 +63,24 @@
   gap: 12px;
   align-self: stretch;
 }
+.cardContainer {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+    padding: 0 16px;
+    padding-bottom: 50px;
+    height: calc(100vh - 170px);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+    overflow: auto;
+    background-color: red;
+  }
+  .tableContainer {
+    display: none;
+  }
+}