improved my folders display on header

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1179,6 +1179,14 @@ main[role="main"] {
   main[role="main"] > .wrapper {
     width: 100vw; }
 
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+    transform-origin: center; }
+  to {
+    transform: rotate(360deg);
+    transform-origin: center; } }
+
 body {
   font-size: 16px;
   font-family: "Ubuntu",Arial,"MS Trebuchet",sans-serif;
@@ -1271,23 +1279,26 @@ header[role="banner"] {
     position: relative; }
     header[role="banner"] #user-flags h2 {
       cursor: pointer; }
+      header[role="banner"] #user-flags h2:before {
+        padding-right: 0.2em; }
     header[role="banner"] #user-flags ul {
-      position: absolute;
-      width: 8em;
-      left: 0;
       background-color: #fff;
-      border-radius: 3px;
-      background-clip: padding-box;
-      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-      padding: 0.3em 0.3em 0.5em;
-      opacity: 0;
+      overflow: hidden;
+      width: 11em;
       max-height: 1px;
-      transition: opacity,max-height 0.3s ease-in-out;
-      overflow: hidden; }
+      padding: 0.01em 1em;
+      box-sizing: content-box;
+      transition: all 0.4s ease-in-out;
+      transition-delay: 2s;
+      position: absolute;
+      right: 0;
+      top: 1.7em;
+      box-sizing: content-box; }
     header[role="banner"] #user-flags:hover ul {
-      opacity: 1;
-      max-height: 100px;
-      transition: opacity,max-height 0.2s ease-in-out; }
+      transition-delay: 0s;
+      max-height: 12em;
+      padding: 1em 1em;
+      box-shadow: 0 0 10px #ccc; }
     header[role="banner"] #user-flags li {
       width: 100%;
       display: flex;
@@ -1302,17 +1313,32 @@ header[role="banner"] {
         opacity: 0;
         transition: opacity 0.3s ease-in-out;
         padding-left: 0.5em; }
+        header[role="banner"] #user-flags li div.actions span.mdi {
+          cursor: pointer;
+          color: #4e4d4d; }
+        header[role="banner"] #user-flags li div.actions span.delete-btn.loading:before {
+          animation: rotating 2s linear infinite; }
       header[role="banner"] #user-flags li:hover div.actions {
         opacity: 1; }
-      header[role="banner"] #user-flags li input {
-        border: 1px solid #bbb;
-        border-radius: 5px;
-        width: calc(100% - 2em);
-        font-size: 0.8em; }
-      header[role="banner"] #user-flags li span.mdi-plus-box,
-      header[role="banner"] #user-flags li span.mdi-trash-can-outline {
-        cursor: pointer;
-        color: #4e4d4d; }
+      header[role="banner"] #user-flags li.create-flag {
+        margin-top: 0.2em; }
+        header[role="banner"] #user-flags li.create-flag input {
+          align-self: flex-end;
+          border: 1px solid #bbb;
+          border-radius: 5px;
+          width: calc(100% - 2em);
+          font-size: 0.8em; }
+        header[role="banner"] #user-flags li.create-flag span.add-btn {
+          align-self: flex-end;
+          color: #bbb;
+          font-size: 1em;
+          padding: 0 0 0 .5em;
+          transition: all 0.2s ease-in-out; }
+          header[role="banner"] #user-flags li.create-flag span.add-btn.active {
+            cursor: pointer;
+            color: #1a1a1a; }
+          header[role="banner"] #user-flags li.create-flag span.add-btn.loading:before {
+            animation: rotating 2s linear infinite; }
   header[role="banner"] #block-header {
     margin-right: 1em;
     padding-left: 1em;