added active chart select

app/src/styles/pages/realTimeViz.scss

@@ -26,7 +26,7 @@
     border-radius: $border-radius-medium;
     padding: 18px;
     position: absolute;
-    z-index: 1000;
+    z-index: 1;
   }
 
   .scene-container {
@@ -544,21 +544,21 @@
 }
 
 .floating-wrapper {
-  .icon {
-    width: 25px !important;
-    height: 25px !important;
-    background-color: transparent;
-  }
+  // .icon {
+  //   width: 25px !important;
+  //   height: 25px !important;
+  // }
 
   .kebab {
-    width: 30px;
-    height: 30px;
+    width: 25px;
+    height: 25px;
     position: absolute !important;
     top: 0px;
     right: 0px;
     z-index: 10;
     cursor: pointer;
     @include flex-center;
+    background-color: transparent;
   }
 
   .kebab-options {
@@ -576,6 +576,12 @@
 
     box-shadow: var(--box-shadow-medium);
 
+    .icon {
+      width: 25px !important;
+      height: 25px !important;
+      background-color: transparent;
+    }
+
     .btn {
       display: flex;
       gap: 6px;
@@ -607,18 +613,19 @@
       }
     }
 
-    .dublicate {
-      cursor: not-allowed;
-    }
+
+
   }
 }
 
 .distance-line {
   position: absolute;
   border-style: dashed;
-  border-color: var(--accent-color); /* Green color for visibility */
+  border-color: var(--accent-color);
+  /* Green color for visibility */
   border-width: 1px;
-  pointer-events: none; /* Ensure lins don't interfere with dragging */
+  pointer-events: none;
+  /* Ensure lins don't interfere with dragging */
   z-index: 10000;
 }
 
@@ -631,51 +638,73 @@
   padding: 2px 6px;
   border-radius: 3px;
   white-space: nowrap;
-  transform: translate(-50%, -50%); /* Center the label */
+  transform: translate(-50%, -50%);
+  /* Center the label */
 }
 
 /* Specific styles for each type of line */
 
 /* Top distance line */
 .distance-line.top {
-  border-bottom: none; /* Remove bottom border for a single line */
-  width: 2px; /* Thin vertical line */
+  border-bottom: none;
+  /* Remove bottom border for a single line */
+  width: 2px;
+  /* Thin vertical line */
 }
 
 .distance-line.top .distance-label {
-  top: -10px; /* Position label above the line */
-  left: 50%; /* Center horizontally */
+  top: -10px;
+  /* Position label above the line */
+  left: 50%;
+  /* Center horizontally */
 }
 
 /* Bottom distance line */
 .distance-line.bottom {
-  border-top: none; /* Remove top border for a single line */
-  width: 2px; /* Thin vertical line */
+  border-top: none;
+  /* Remove top border for a single line */
+  width: 2px;
+  /* Thin vertical line */
 }
 
 .distance-line.bottom .distance-label {
-  bottom: -10px; /* Position label below the line */
-  left: 50%; /* Center horizontally */
+  bottom: -10px;
+  /* Position label below the line */
+  left: 50%;
+  /* Center horizontally */
 }
 
 /* Left distance line */
 .distance-line.left {
-  border-right: none; /* Remove right border for a single line */
-  height: 2px; /* Thin horizontal line */
+  border-right: none;
+  /* Remove right border for a single line */
+  height: 2px;
+  /* Thin horizontal line */
 }
 
 .distance-line.left .distance-label {
-  left: -10px; /* Position label to the left of the line */
-  top: 50%; /* Center vertically */
+  left: -10px;
+  /* Position label to the left of the line */
+  top: 50%;
+  /* Center vertically */
 }
 
 /* Right distance line */
 .distance-line.right {
-  border-left: none; /* Remove left border for a single line */
-  height: 2px; /* Thin horizontal line */
+  border-left: none;
+  /* Remove left border for a single line */
+  height: 2px;
+  /* Thin horizontal line */
 }
 
 .distance-line.right .distance-label {
-  right: -10px; /* Position label to the right of the line */
-  top: 50%; /* Center vertically */
+  right: -10px;
+  /* Position label to the right of the line */
+  top: 50%;
+  /* Center vertically */
+}
+
+.activeChart {
+  outline: 1px solid var(--accent-color);
+  z-index: 2 !important;
 }