Overview panel

assets/dashboard.css

@@ -83,22 +83,40 @@ body {
   width: 100%;
 }
 
-@media (max-width: 1300px) {
-  .summary-container {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.overview-card {
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 1.5rem;
+  border-radius: 10px;
+  width: 650px;
+}
 
-  .overview-container {
-    flex-direction: column;
-  }
+.overview-card h2 {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 20px;
+  display: flex;
+  gap: 7px;
+}
 
-  .dashboard-container {
-    padding-left: 25px;
-  }
+.overview-card h2 svg {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.overview-card div {
+  display: flex;
+  justify-content: space-between;
+}
+
+.overview-card div p {
+  margin-bottom: 8px;
+  font-size: 14px;
 }
 
 .search-container {
   display: flex;
+  flex-wrap: wrap;
   background-color: #fff;
   box-sizing: border-box;
   padding: 1.5rem;
@@ -172,3 +190,48 @@ body {
   padding: 0;
   margin: 0;
 }
+
+@media (max-width: 1300px) {
+  .summary-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .overview-container {
+    flex-direction: column;
+  }
+
+  .dashboard-container {
+    padding-left: 25px;
+  }
+
+  .server-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .overview-card {
+    width: 100%;
+  }
+}
+
+@media (max-width: 750px) {
+  .server-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.progress-bar {
+  display: block;
+  width: 100%;
+  height: 10px;
+  background-color: #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.progress {
+  display: block;
+  height: 100%;
+  background-color: #4f46e5;
+  transition: width 0.3s ease;
+  border-radius: 10px;
+}