Improve adding headers to frontend

Frontend/assets/css/tools/mock/r11popup.css

@@ -0,0 +1,93 @@
+.popup-flex:not(.hiddable-container){
+    animation: blur 0.5s ease-in-out ;
+    animation-fill-mode: forwards;
+}
+.popup-flex:has(.hiddable-container){
+    animation: deblur 0.3s ease-in-out ;
+    animation-direction: reverse;
+    animation-fill-mode: forwards;
+}
+.popup-flex{
+    display: flex; 
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    z-index: 50;
+    flex-direction: column;
+    gap: 2%;
+    position: fixed;
+    justify-content: center;
+}
+
+.popup-body{
+    min-width: 33%;
+    background-color: white;
+    box-shadow: 10px 10px 5px lightblue;
+    min-height: 45%;
+    border-radius: 1em;
+    text-align: center;
+    padding: 10px 15px 15px 15px;
+    color: black;
+    border: 1px #2A93B0 solid;
+}
+
+.popup-button-close-container{
+    text-align: right;
+    margin-right: 2%;
+    margin-top: 1%;
+    font-size: xx-large;
+    font-weight: bold;
+}
+
+.popup-button-close{
+    background: padding-box;
+    border: 0;
+}
+
+.popup-button-close:hover{
+    color: #2A93B0;
+}
+
+.hiddable-container{
+    display:none;
+}
+
+
+#header-table tr td {
+    border: 1px black solid;
+    padding: 1%;
+}
+
+#header-table{
+    border-collapse: collapse;
+}
+
+@keyframes blur {
+    0% {
+      backdrop-filter: blur(0px);
+    }
+  
+    50% {
+      backdrop-filter: blur(5px);
+    }
+  
+    100% {
+      backdrop-filter: blur(10px);
+    }
+  }
+
+@keyframes deblur {
+    0%{
+        backdrop-filter: blur(10px);
+      }
+    
+      50% {
+        backdrop-filter: blur(5px);
+      }
+    
+      100% {
+        backdrop-filter: blur(0px);
+        display: none;
+      }
+    
+}