add: observer input & tooltips

src/assets/main.css

@@ -231,6 +231,47 @@ td {
     border: 1px solid #FBBA33 !important;
 }
 
+.box-observers {
+    display: flex;
+    flex-direction: column;
+}
+.box-input {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+}
+.input-observer {
+    flex: 1;
+}
+.box-emails {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    border-radius: 5px;
+    padding: 0.5rem;
+    background-color: #FFF;
+    border: 1px solid #ccc;
+}
+.observer-email {
+    display: flex;
+    align-items: center;
+    background-color: #e0f7fa;
+    padding: 0.5rem;
+    border-radius: 5px;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+.icon-delete {
+    cursor: pointer;
+    color: #FF0000;
+    font-size: 1.5rem;
+    margin-left: 0.5rem;
+    transition: color 0.3s;
+}
+
 @media (max-width: 1024px) {
     th {
       font-size: 13px;