multi user

public/styles/css/style.css

@@ -306,6 +306,39 @@ th.dt-center, td.dt-center { text-align: center; }
     border:none;
 }
 
+.herousers {
+    position: absolute;
+    top: 100px;
+    flex-wrap: wrap;
+    left: 400px;
+    z-index: 10000;
+    display: flex;    
+}
+
+.herousers h3 {
+    width:100%;
+    padding-left:15px;
+}
+
+.herouser {
+    padding:15px;
+    width:250px; 
+    background-color: var(--colorbgbodydark);
+    margin:10px;
+    border-radius:5px;
+    text-align:center;
+}
+
+.herouser img {
+    width:80px;
+    height: 80px;
+}
+
+.herouser h4 {
+    font-size:16px;
+    margin-top:15px;
+}
+
 .heromenu {
     padding-top: 30px;
     font-size: 20px;
@@ -338,7 +371,10 @@ th.dt-center, td.dt-center { text-align: center; }
     width: 100%;    
 }
 
-.herologo img {max-height:200px;}
+.herologo img {
+    max-height:200px;
+    border-radius: 100%;
+}
 
 @media (max-width: 980px) {
     .herobox { display: none; }
@@ -347,7 +383,11 @@ th.dt-center, td.dt-center { text-align: center; }
     .heromenu .facatmenu {display: none;}
     .catmenu { display:none }
     .heromenu .linkmenu {zoom:200%}
-    
+    .herousers { top:315px; left:0px; width: 100%; justify-content: center; }
+    .herousers { text-align: center; }
+    .herousers h3{ padding-left: 0px; }
+    .herouser { width:170px}
+    .herouser img { width:50px;height:50px}
     .herofloatmenu a {
         font-size: 40px;
     }
@@ -392,7 +432,7 @@ th.dt-center, td.dt-center { text-align: center; }
     border-bottom: 1px solid var(--colorftbodydark);
 }
 
-.foliomenu .logo {  float:left; height:40px; margin-top:7px }
+.foliomenu .logo {  float:left; height:40px; margin-top:7px; border-radius: 100%; }
 .foliomenu .avatar { height: 20px; margin: 3px 3px 0px 0px; width: 20px; }
 .foliomenu div { padding: 10px; line-height:35px; float:left;}
 .foliomenu a {