Stylized button, and UUID input field

Backend/mocked-services/src/main/resources/static/css/common.css

@@ -1,7 +1,8 @@
 @import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @import url('r11addons.css');
 @import url('r11tables.css');
 @import url('r11tool.css');
 @import url('r11tooltip.css');
 @import url('r11modal.css');
-@import url('r11flexbox.css')
+@import url('r11flexbox.css')

Backend/mocked-services/src/main/resources/static/css/r11addons.css

@@ -69,4 +69,4 @@
 .content p {
     margin: 0;
     padding: 0;
-}
+}

Backend/mocked-services/src/main/resources/static/css/r11flexbox.css

@@ -2,4 +2,21 @@
     display: flex;
     flex-direction: row;
     align-items: stretch;
+    position: relative;
+}
+
+#uuid-flex-container .uuid-inputField-icon{
+    font-size: medium;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-right: 41%;
+    margin-top: 1%;
+    background: none;
+    color: black;
+    border: 0;
+}
+
+.uuid-inputField-icon-span {
+    font-size: x-large;
 }

Backend/mocked-services/src/main/resources/static/html/mock.html

@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="../css/main.css" type="text/css">
     <!-- <link rel="stylesheet" href="css/common.css" type="text/css"> -->
     <link rel="stylesheet" href="../css/common.css" type="text/css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <!-- <script src="../js/dyn_host.js"></script> -->
 </head>
@@ -22,12 +21,10 @@
                     <label for="uuid-input" class="block-display">UUID</label>
                     <div id="uuid-flex-container">
                         <input id="uuid-input" disabled class="bordered-field flex-item with-padding diabled-background" value="UUID" style="margin-bottom:2%; width: 60%;"/>
-                        <button class="modification-button flex-item btn-copy action-button"> 
-                            <span class="material-symbols-outlined">content_copy</span> 
+                        <button class="uuid-inputField-icon modification-button flex-item btn-copy action-button"> 
+                            <span class="material-icons uuid-inputField-icon-span ">content_copy</span> 
                         </button>
                     </div>
-                    
-                </br>
                     <label for="editable">Editable</label>
                     <input type="checkbox" name="editable" id="editable" value="false"/>
                 </div>