From af8e6492093cac2f2c8b322e8597c13b76853a41 Mon Sep 17 00:00:00 2001
From: stitch <futurebetagamer@gmail.com>
Date: Fri, 16 Aug 2024 12:37:11 +0300
Subject: [PATCH] fixed overflow and sizing issues in files. added title input.
 re-structured the add and manage signers flow. adjusted calendar icons

---
 assets/css/files.css    |  77 +++++++++++++++-
 assets/css/styles.css   |   6 +-
 dashboard-complete.html |   4 +-
 dashboard-draft.html    | 196 +++++++++++++++-------------------------
 dashboard-failed.html   |   6 +-
 dashboard-progress.html |   4 +-
 6 files changed, 160 insertions(+), 133 deletions(-)

diff --git a/assets/css/files.css b/assets/css/files.css
index ac674fd..b75efa6 100644
--- a/assets/css/files.css
+++ b/assets/css/files.css
@@ -90,10 +90,11 @@
   border-radius: 4px;
   overflow: hidden;
   background: #ffffff;
-  padding: 5px 10px;
+  padding: 10px 10px;
   align-items: center;
   color: rgba(0,0,0,0.5);
   cursor: pointer;
+  min-height: 50px;
 }
 
 .filesPageSecSidesSecFilesFile:hover {
@@ -135,7 +136,7 @@
 
 .filesPageSecSidesSec.filesPageSecSidesSecAlt {
   background: unset;
-  padding: 0 10px;
+  padding: 0;
   text-align: center;
 }
 
@@ -729,3 +730,75 @@
   background: rgba(0,0,0,0.1);
 }
 
+.filesPageSecSidesSecAlt_UsersBottomInside {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+  border-radius: 5px;
+  background: white;
+  padding: 15px;
+  max-height: 350px;
+  overflow: auto;
+}
+
+.filesPageSecSidesSecAlt_UsersBottomInsideUser {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+  font-size: 14px;
+  text-align: start;
+  min-height: 35px;
+}
+
+.btnMain.filesPageSecSidesSecAlt_UsersBottomInsideUserBtn {
+  padding: 10px;
+  color: rgba(0,0,0,0.35);
+  background: rgba(76,130,163,0);
+}
+
+.btnMain.filesPageSecSidesSecAlt_UsersBottomInsideUserBtn:hover {
+  padding: 10px;
+  color: white;
+  background: #5e8eab;
+}
+
+.filesPageSecSidesSecAlt_UsersBottomInsideUserToggle {
+  border-radius: 100px;
+  height: 20px;
+  width: 20px;
+  min-width: 15px;
+  min-width: 15px;
+  outline: solid 2px #ffffff;
+  color: #4c82a3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.filesPageSecSidesSecAlt_UsersBottomInsideUserInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.filesPageSecSidesSecAlt_UsersBottomInsideUserPic {
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+  min-width: 30px;
+  border: solid 2px #4c82a3;
+  border-radius: 100px;
+}
+
+.filesPageSecSidesSecAlt_UsersBottomInsideUserPicHandle {
+  font-size: 14px;
+  color: rgba(0,0,0,0.35);
+  min-width: 16px;
+  min-height: 16px;
+}
+
diff --git a/assets/css/styles.css b/assets/css/styles.css
index f64289f..6302bc6 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -24,15 +24,15 @@
   font-weight: 500;
 }
 
-body::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 12px;
 }
 
-body::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   background-color: rgba(0,0,0,0.15);
 }
 
-body::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
   max-width: 10px;
   border-radius: 2px;
   background-color: #4c82a3;
diff --git a/dashboard-complete.html b/dashboard-complete.html
index 8036598..e1dfa77 100644
--- a/dashboard-complete.html
+++ b/dashboard-complete.html
@@ -331,7 +331,7 @@
                                                     <div class="filesPageSecSidesSecInfoSecDetailsRow">
                                                         <div data-bs-toggle="tooltip" data-bss-tooltip="" class="filesPageSecSidesSecInfoSecDetailsRowVisual" title="Publication Date"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
                                                                 <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
+                                                                <path d="M224 232C237.3 232 248 242.7 248 256V304H296C309.3 304 320 314.7 320 328C320 341.3 309.3 352 296 352H248V400C248 413.3 237.3 424 224 424C210.7 424 200 413.3 200 400V352H152C138.7 352 128 341.3 128 328C128 314.7 138.7 304 152 304H200V256C200 242.7 210.7 232 224 232zM152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
                                                             </svg></div>
                                                         <div class="filesPageSecSidesSecInfoSecDetailsRowInfo">
                                                             <p class="filesPageSecSidesSecInfoSecDetailsRowInfoText">16 July 2024 - 10:00 PM</p>
@@ -340,7 +340,7 @@
                                                     <div class="filesPageSecSidesSecInfoSecDetailsRow">
                                                         <div data-bs-toggle="tooltip" data-bss-tooltip="" class="filesPageSecSidesSecInfoSecDetailsRowVisual" title="Completion Date"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
                                                                 <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
+                                                                <path d="M216.1 408.1C207.6 418.3 192.4 418.3 183 408.1L119 344.1C109.7 335.6 109.7 320.4 119 311C128.4 301.7 143.6 301.7 152.1 311L200 358.1L295 263C304.4 253.7 319.6 253.7 328.1 263C338.3 272.4 338.3 287.6 328.1 296.1L216.1 408.1zM128 0C141.3 0 152 10.75 152 24V64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0zM400 192H48V448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192z"></path>
                                                             </svg></div>
                                                         <div class="filesPageSecSidesSecInfoSecDetailsRowInfo">
                                                             <p class="filesPageSecSidesSecInfoSecDetailsRowInfoText">19 July 2024 - 08:00 PM</p>
diff --git a/dashboard-draft.html b/dashboard-draft.html
index bb07aa6..c55aa86 100644
--- a/dashboard-draft.html
+++ b/dashboard-draft.html
@@ -47,6 +47,7 @@
                     <div class="filesPage">
                         <div class="filesPageSec filesPageSecSides">
                             <div class="filesPageSecSidesWrap">
+                                <div class="inputMainWrapper"><input type="text" class="inputMain" placeholder="User" value="User 1"></div>
                                 <div class="filesPageSecSidesSec">
                                     <div class="filesPageSecSidesSecFiles">
                                         <div class="filesPageSecSidesSecFilesFile filesPageSecSidesSecFilesFileActive">
@@ -62,18 +63,7 @@
                                         </div>
                                         <div class="filesPageSecSidesSecFilesFile">
                                             <div class="filesPageSecSidesSecFilesFileNumber">
-                                                <p>2</p>
-                                            </div>
-                                            <div class="filesPageSecSidesSecFilesFileInfo">
-                                                <p class="filesPageSecSidesSecFilesFileText">File name</p>
-                                            </div><button class="btnMain filesPageSecSidesSecFilesFileBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                    <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
-                                                </svg></button>
-                                        </div>
-                                        <div class="filesPageSecSidesSecFilesFile">
-                                            <div class="filesPageSecSidesSecFilesFileNumber">
-                                                <p>3</p>
+                                                <p>1</p>
                                             </div>
                                             <div class="filesPageSecSidesSecFilesFileInfo">
                                                 <p class="filesPageSecSidesSecFilesFileText">File name</p>
@@ -129,55 +119,43 @@
                                     <div class="tab-pane tabsMainBottomPane filesPageSecMidTabBottomPane" role="tabpanel" id="tab-2">
                                         <div class="filesPageSecMidWrap">
                                             <div class="filesPageSecSidesSecAlt_Users">
-                                                <div class="filesPageSecSidesSecAlt_UsersTop">
-                                                    <div class="dropdown dropdownMain filesPageSecSidesSecAlt_UsersTopDropdown"><button aria-expanded="false" data-bs-toggle="dropdown" class="btnMain dropdownMainBtn" type="button">Signer name<svg xmlns="http://www.w3.org/2000/svg" viewBox="-96 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                <path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path>
-                                                            </svg></button>
-                                                        <div class="dropdown-menu dropdownMainMenu"><a class="dropdown-item dropdownMainMenuItem filesPageSecSidesSecAlt_UsersTopDropdownItem" href="#">
-                                                                <div class="filesPageSecSidesSecAlt_UsersTopDropdownUser">
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfo">
-                                                                        <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph</p>
-                                                                    </div>
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserVisual" style="background: #4c82a3;"></div><button class="btnMain filesPageSecSidesSecAlt_UsersTopDropdownUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                            <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
-                                                                        </svg></button>
-                                                                </div>
-                                                            </a><a class="dropdown-item dropdownMainMenuItem filesPageSecSidesSecAlt_UsersTopDropdownItem" href="#">
-                                                                <div class="filesPageSecSidesSecAlt_UsersTopDropdownUser">
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfo">
-                                                                        <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph</p>
-                                                                    </div>
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserVisual"></div><button class="btnMain filesPageSecSidesSecAlt_UsersTopDropdownUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                            <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
-                                                                        </svg></button>
-                                                                </div>
-                                                            </a><a class="dropdown-item dropdownMainMenuItem filesPageSecSidesSecAlt_UsersTopDropdownItem" href="#">
-                                                                <div class="filesPageSecSidesSecAlt_UsersTopDropdownUser">
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfo">
-                                                                        <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph</p>
-                                                                    </div>
-                                                                    <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserVisual filesPageSecSidesSecAlt_UsersTopDropdownUserVisualAlt"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor">
-                                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                            <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path>
-                                                                        </svg></div><button class="btnMain filesPageSecSidesSecAlt_UsersTopDropdownUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                            <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
-                                                                        </svg></button>
-                                                                </div>
-                                                            </a></div>
-                                                    </div><button class="btnMain" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                <div class="filesPageSecSidesSecAlt_UsersTop"><input type="text" class="inputMain" placeholder="User"><button class="btnMain" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
                                                             <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                                                             <path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path>
-                                                        </svg></button>
-                                                </div>
-                                                <div class="filesPageSecSidesSecAlt_UsersBottom"><input type="text" class="inputMain" placeholder="User" value="User 1">
-                                                    <div class="checkboxWrapper checkboxWrapperAlt"><input type="checkbox" class="checkboxMain checkboxMainAlt"><label class="form-label labelMain labelMainCheckbox">This person is a viewer</label></div>
+                                                        </svg></button></div>
+                                                <div class="filesPageSecSidesSecAlt_UsersBottomInside">
+                                                    <div class="filesPageSecSidesSecAlt_UsersBottomInsideUser"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="filesPageSecSidesSecAlt_UsersBottomInsideUserPicHandle">
+                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                            <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"></path>
+                                                        </svg>
+                                                        <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
+                                                        <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserInfo">
+                                                            <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph<br></p>
+                                                        </div>
+                                                        <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserToggle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor">
+                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                                <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path>
+                                                            </svg></div><button class="btnMain filesPageSecSidesSecAlt_UsersBottomInsideUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                                <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
+                                                            </svg></button>
+                                                    </div>
+                                                    <div class="filesPageSecSidesSecAlt_UsersBottomInsideUser"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="filesPageSecSidesSecAlt_UsersBottomInsideUserPicHandle">
+                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                            <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"></path>
+                                                        </svg>
+                                                        <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
+                                                        <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserInfo">
+                                                            <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph<br></p>
+                                                        </div>
+                                                        <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserToggle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
+                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                                <path d="M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z"></path>
+                                                            </svg></div><button class="btnMain filesPageSecSidesSecAlt_UsersBottomInsideUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                                <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
+                                                            </svg></button>
+                                                    </div>
                                                 </div>
                                             </div>
                                             <div class="filesPageSecSidesSec">
@@ -333,11 +311,7 @@
                                                     </div>
                                                     <div class="filesPageSecSidesSecFilesFileInfo">
                                                         <p class="filesPageSecSidesSecFilesFileText">File name</p>
-                                                    </div>
-                                                    <div class="filesPageSecSidesSecFilesFileVisual"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
-                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                            <path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
-                                                        </svg></div><button class="btnMain filesPageSecSidesSecFilesFileBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                    </div><button class="btnMain filesPageSecSidesSecFilesFileBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
                                                             <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                                                             <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
                                                         </svg></button>
@@ -348,11 +322,7 @@
                                                     </div>
                                                     <div class="filesPageSecSidesSecFilesFileInfo">
                                                         <p class="filesPageSecSidesSecFilesFileText">File name</p>
-                                                    </div>
-                                                    <div class="filesPageSecSidesSecFilesFileVisual"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
-                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                            <path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
-                                                        </svg></div><button class="btnMain filesPageSecSidesSecFilesFileBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                    </div><button class="btnMain filesPageSecSidesSecFilesFileBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
                                                             <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                                                             <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
                                                         </svg></button>
@@ -363,11 +333,7 @@
                                                     </div>
                                                     <div class="filesPageSecSidesSecFilesFileInfo">
                                                         <p class="filesPageSecSidesSecFilesFileText">File name</p>
-                                                    </div>
-                                                    <div class="filesPageSecSidesSecFilesFileVisual"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
-                                                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                            <path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
-                                                        </svg></div><button class="btnMain filesPageSecSidesSecFilesFileBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                    </div><button class="btnMain filesPageSecSidesSecFilesFileBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
                                                             <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                                                             <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
                                                         </svg></button>
@@ -385,55 +351,43 @@
                             <div class="filesPageSecSidesWrap">
                                 <div class="filesPageSecSidesSec filesPageSecSidesSecAlt">
                                     <div class="filesPageSecSidesSecAlt_Users">
-                                        <div class="filesPageSecSidesSecAlt_UsersTop">
-                                            <div class="dropdown dropdownMain filesPageSecSidesSecAlt_UsersTopDropdown"><button aria-expanded="false" data-bs-toggle="dropdown" class="btnMain dropdownMainBtn" type="button">Signer name<svg xmlns="http://www.w3.org/2000/svg" viewBox="-96 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                        <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                        <path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path>
-                                                    </svg></button>
-                                                <div class="dropdown-menu dropdownMainMenu"><a class="dropdown-item dropdownMainMenuItem filesPageSecSidesSecAlt_UsersTopDropdownItem" href="#">
-                                                        <div class="filesPageSecSidesSecAlt_UsersTopDropdownUser">
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfo">
-                                                                <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph</p>
-                                                            </div>
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserVisual" style="background: #4c82a3;"></div><button class="btnMain filesPageSecSidesSecAlt_UsersTopDropdownUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                    <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
-                                                                </svg></button>
-                                                        </div>
-                                                    </a><a class="dropdown-item dropdownMainMenuItem filesPageSecSidesSecAlt_UsersTopDropdownItem" href="#">
-                                                        <div class="filesPageSecSidesSecAlt_UsersTopDropdownUser">
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfo">
-                                                                <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph</p>
-                                                            </div>
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserVisual"></div><button class="btnMain filesPageSecSidesSecAlt_UsersTopDropdownUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                    <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
-                                                                </svg></button>
-                                                        </div>
-                                                    </a><a class="dropdown-item dropdownMainMenuItem filesPageSecSidesSecAlt_UsersTopDropdownItem" href="#">
-                                                        <div class="filesPageSecSidesSecAlt_UsersTopDropdownUser">
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfo">
-                                                                <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph</p>
-                                                            </div>
-                                                            <div class="filesPageSecSidesSecAlt_UsersTopDropdownUserVisual filesPageSecSidesSecAlt_UsersTopDropdownUserVisualAlt"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor">
-                                                                    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                    <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path>
-                                                                </svg></div><button class="btnMain filesPageSecSidesSecAlt_UsersTopDropdownUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                    <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
-                                                                </svg></button>
-                                                        </div>
-                                                    </a></div>
-                                            </div><button class="btnMain" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                        <div class="filesPageSecSidesSecAlt_UsersTop"><input type="text" class="inputMain" placeholder="User"><button class="btnMain" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
                                                     <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                                                     <path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path>
-                                                </svg></button>
-                                        </div>
-                                        <div class="filesPageSecSidesSecAlt_UsersBottom"><input type="text" class="inputMain" placeholder="User" value="User 1">
-                                            <div class="checkboxWrapper checkboxWrapperAlt"><input type="checkbox" class="checkboxMain checkboxMainAlt"><label class="form-label labelMain labelMainCheckbox">This person is a viewer</label></div>
+                                                </svg></button></div>
+                                        <div class="filesPageSecSidesSecAlt_UsersBottomInside">
+                                            <div class="filesPageSecSidesSecAlt_UsersBottomInsideUser"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="filesPageSecSidesSecAlt_UsersBottomInsideUserPicHandle">
+                                                    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                    <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"></path>
+                                                </svg>
+                                                <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
+                                                <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserInfo">
+                                                    <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph<br></p>
+                                                </div>
+                                                <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserToggle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor">
+                                                        <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                        <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path>
+                                                    </svg></div><button class="btnMain filesPageSecSidesSecAlt_UsersBottomInsideUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                        <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                        <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
+                                                    </svg></button>
+                                            </div>
+                                            <div class="filesPageSecSidesSecAlt_UsersBottomInsideUser"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="filesPageSecSidesSecAlt_UsersBottomInsideUserPicHandle">
+                                                    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                    <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"></path>
+                                                </svg>
+                                                <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserPic" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
+                                                <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserInfo">
+                                                    <p class="filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText">Paragraph<br></p>
+                                                </div>
+                                                <div class="filesPageSecSidesSecAlt_UsersBottomInsideUserToggle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
+                                                        <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                        <path d="M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z"></path>
+                                                    </svg></div><button class="btnMain filesPageSecSidesSecAlt_UsersBottomInsideUserBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                        <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                        <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
+                                                    </svg></button>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
diff --git a/dashboard-failed.html b/dashboard-failed.html
index eca4446..98cdce6 100644
--- a/dashboard-failed.html
+++ b/dashboard-failed.html
@@ -329,9 +329,9 @@
                                                 <p class="filesPageSecSidesSecInfoSecText">Details</p>
                                                 <div class="filesPageSecSidesSecInfoSecDetails">
                                                     <div class="filesPageSecSidesSecInfoSecDetailsRow">
-                                                        <div data-bs-toggle="tooltip" data-bss-tooltip="" class="filesPageSecSidesSecInfoSecDetailsRowVisual" title="Publication Date"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
+                                                        <div data-bs-toggle="tooltip" data-bss-tooltip="" class="filesPageSecSidesSecInfoSecDetailsRowVisual" title="Publication Date"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" style="font-size: 16px;">
                                                                 <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
+                                                                <path d="M224 232C237.3 232 248 242.7 248 256V304H296C309.3 304 320 314.7 320 328C320 341.3 309.3 352 296 352H248V400C248 413.3 237.3 424 224 424C210.7 424 200 413.3 200 400V352H152C138.7 352 128 341.3 128 328C128 314.7 138.7 304 152 304H200V256C200 242.7 210.7 232 224 232zM152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
                                                             </svg></div>
                                                         <div class="filesPageSecSidesSecInfoSecDetailsRowInfo">
                                                             <p class="filesPageSecSidesSecInfoSecDetailsRowInfoText">16 July 2024 - 10:00 PM</p>
@@ -340,7 +340,7 @@
                                                     <div class="filesPageSecSidesSecInfoSecDetailsRow">
                                                         <div data-bs-toggle="tooltip" data-bss-tooltip="" class="filesPageSecSidesSecInfoSecDetailsRowVisual" title="Completion Date"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
                                                                 <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
+                                                                <path d="M257.9 328L304.1 375C314.3 384.4 314.3 399.6 304.1 408.1C295.6 418.3 280.4 418.3 271 408.1L224 361.9L176.1 408.1C167.6 418.3 152.4 418.3 143 408.1C133.7 399.6 133.7 384.4 143 375L190.1 328L143 280.1C133.7 271.6 133.7 256.4 143 247C152.4 237.7 167.6 237.7 176.1 247L224 294.1L271 247C280.4 237.7 295.6 237.7 304.1 247C314.3 256.4 314.3 271.6 304.1 280.1L257.9 328zM128 0C141.3 0 152 10.75 152 24V64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0zM400 192H48V448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192z"></path>
                                                             </svg></div>
                                                         <div class="filesPageSecSidesSecInfoSecDetailsRowInfo">
                                                             <p class="filesPageSecSidesSecInfoSecDetailsRowInfoText">19 July 2024 - 08:00 PM</p>
diff --git a/dashboard-progress.html b/dashboard-progress.html
index 93c2d6b..9d2e9d9 100644
--- a/dashboard-progress.html
+++ b/dashboard-progress.html
@@ -402,7 +402,7 @@
                                                 <div class="filesPageSecSidesSecInfoSecDetailsRow">
                                                     <div data-bs-toggle="tooltip" data-bss-tooltip="" class="filesPageSecSidesSecInfoSecDetailsRowVisual" title="Publication Date"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
                                                             <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                            <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
+                                                            <path d="M224 232C237.3 232 248 242.7 248 256V304H296C309.3 304 320 314.7 320 328C320 341.3 309.3 352 296 352H248V400C248 413.3 237.3 424 224 424C210.7 424 200 413.3 200 400V352H152C138.7 352 128 341.3 128 328C128 314.7 138.7 304 152 304H200V256C200 242.7 210.7 232 224 232zM152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
                                                         </svg></div>
                                                     <div class="filesPageSecSidesSecInfoSecDetailsRowInfo">
                                                         <p class="filesPageSecSidesSecInfoSecDetailsRowInfoText">16 July 2024 - 10:00 PM</p>
@@ -411,7 +411,7 @@
                                                 <div class="filesPageSecSidesSecInfoSecDetailsRow">
                                                     <div data-bs-toggle="tooltip" data-bss-tooltip="" class="filesPageSecSidesSecInfoSecDetailsRowVisual" title="Completion Date"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
                                                             <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                            <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
+                                                            <path d="M216.1 408.1C207.6 418.3 192.4 418.3 183 408.1L119 344.1C109.7 335.6 109.7 320.4 119 311C128.4 301.7 143.6 301.7 152.1 311L200 358.1L295 263C304.4 253.7 319.6 253.7 328.1 263C338.3 272.4 338.3 287.6 328.1 296.1L216.1 408.1zM128 0C141.3 0 152 10.75 152 24V64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0zM400 192H48V448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192z"></path>
                                                         </svg></div>
                                                     <div class="filesPageSecSidesSecInfoSecDetailsRowInfo">
                                                         <p class="filesPageSecSidesSecInfoSecDetailsRowInfoText">-</p>