added loki form to agents

frontend/src/app/agents/[agentsId]/styles.module.css

@@ -1,23 +1,31 @@
-.createAgentContainer {
+.formContainer {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 48px;
+  align-items: flex-start;
+  gap: 10px;
   flex: 1 0 0;
   align-self: stretch;
 }
 
+.createAgentContainer {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: 16px;
+  flex: 1 1 auto;
+  padding-top: 48px;
+  height: calc(100vh - 100px - 70px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
 .inputMainContainer {
   display: flex;
   padding: 24px;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
-  border-radius: 8px;
-  height: calc(100vh - 260px);
-  position: relative;
-  overflow: auto;
-  scrollbar-width: none;
 }
 .headerContainer {
   display: flex;
@@ -34,9 +42,9 @@
   flex: 1 0 0;
 }
 .headerTxt > p {
-  width: 163px;
+  /* width: 163px; */
+  align-self: stretch;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -70,112 +78,11 @@
   font-weight: 600;
 }
 
-.checkboxMainContainer {
+.lokiContainer {
   display: flex;
+  width: 548px;
+  padding: 24px;
   flex-direction: column;
   align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-}
-.checkboxContainer {
-  display: flex;
-  align-items: flex-start;
-  align-self: stretch;
-}
-.checkbox {
-  display: flex;
-  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
-    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
-  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
-  flex: 1 0 0;
-  border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
-  background: #1d1e2a;
-  background: color(display-p3 0.1137 0.1176 0.1608);
-}
-.check {
-  display: flex;
-  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
-  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
-}
-.hiddenCheckbox {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  cursor: pointer;
-  position: relative;
-}
-.hiddenCheckbox:checked {
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    #0067fd
-  );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    color(display-p3 0.1451 0.3882 0.9216)
-  );
-}
-.hiddenCheckbox::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center;
-  opacity: 0;
-}
-.hiddenCheckbox:checked::after {
-  opacity: 1;
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  flex: 1 0 0;
-}
-.placeholderTxt {
-  align-self: stretch;
-  color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px; /* 150% */
-  letter-spacing: 0.08px;
-}
-.secondaryTxt {
-  align-self: stretch;
-  color: #697281;
-  color: color(display-p3 0.4196 0.4471 0.502);
-  font-family: Inter;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px; /* 142.857% */
-  letter-spacing: 0.07px;
+  gap: 24px;
 }