Add dataTypesContainer to container and update styles

web/newWebsite/styles/graph-styles.css

@@ -168,46 +168,46 @@ body {
 }
 
 .container {
+    box-sizing: border-box;
     display: flex;
-    justify-content: space-around;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    border: 2px solid #ccc;
+    border: 2px solid #000000;
     border-radius: 10px;
-    padding: 10px;
-    margin: 20px;
+    padding: 20px;
   }
   
   .data-types {
-    display: flex;
     flex-direction: column;
+    align-self: self-center;
+    justify-content: space-between;
+    padding: 20px;
+    width: 30%; /* Adjust width as needed */
+    background-color: #f1f1f1;
   }
   
-  .date-filter,
-  .node-filter {
-    margin-left: 10px;
+  .date-filter{ 
+    align-content: center;
+    flex-direction: column;
+    justify-content: space-between;
+    /* width: 30%; /* Adjust width as needed */
+    background-color: #f1f1f1;
   }
-  
-  .input-field {
-    margin: 5px;
-    padding: 5px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-  }
-  
-  .checkbox {
-    margin-right: 5px;
-  }
-  
-  .filter-button {
-    margin: 10px;
-    padding: 5px 10px;
-    background-color: #007bff;
-    color: #fff;
+
+  .node-filter{
+    align-self: center;
+    justify-content: space-between;
+    width: 10%; /* Adjust width as needed */
     border: none;
-    border-radius: 5px;
-    cursor: pointer;
+    border-radius: 4px;
+    background-color: #f1f1f1;
+  }
+
+  .filter-button {
+    width: 100%;
+    margin-top: 20px;
   }
   
-  .filter-button:hover {
-    background-color: #0056b3;
-  }
+  /* Additional styling as needed */