From 105e20ebef2731dc7b9cd697827518053b485c6b Mon Sep 17 00:00:00 2001
From: freakoverse <freakoramag@gmail.com>
Date: Thu, 25 Jul 2024 15:52:04 +0000
Subject: [PATCH] Upload files to "/"

---
 dashboard.css | 268 +++++++++++++++++++
 files.css     | 696 ++++++++++++++++++++++++++++++++++++++++++++++++++
 footer.css    | 116 +++++++++
 frontpage.css | 171 +++++++++++++
 nav.css       |  74 ++++++
 5 files changed, 1325 insertions(+)
 create mode 100644 dashboard.css
 create mode 100644 files.css
 create mode 100644 footer.css
 create mode 100644 frontpage.css
 create mode 100644 nav.css

diff --git a/dashboard.css b/dashboard.css
new file mode 100644
index 0000000..dd95280
--- /dev/null
+++ b/dashboard.css
@@ -0,0 +1,268 @@
+.secMainBodySecInside_Dashboard {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+}
+
+.secMainBodySecInside_DashboardSec {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecTop {
+  flex-direction: row;
+}
+
+@media (max-width: 768px) {
+  .secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecTop {
+    flex-direction: column;
+  }
+}
+
+.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecMid {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+}
+
+.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecFilters {
+  flex-direction: row;
+}
+
+.secMainBodySecInside_DashboardSec.secMainBodySecInside_DashboardSecUpload {
+}
+
+.secMainBodySecInside_DashboardSecTopSec {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.secMainBodySecInside_DashboardSecTopSec.secMainBodySecInside_DashboardSecTopSecLeft {
+}
+
+.secMainBodySecInside_DashboardSecTopSec.secMainBodySecInside_DashboardSecTopSecRight {
+  justify-content: end;
+}
+
+.secMainBodySecInside_DashboardSecTopSecRightSec {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  height: 100%;
+}
+
+.secMainBodySecInside_DashboardSecTopSecRightSec.secMainBodySecInside_DashboardSecTopSecRightSecSearch {
+}
+
+.secMainBodySecInside_DashboardSecTopSecRightSec.secMainBodySecInside_DashboardSecTopSecRightSecBtns {
+}
+
+.secMainBodySecInside_DashboardSecTopSecDivider {
+  width: 1px;
+  background: rgba(0,0,0,0.1);
+  height: 100%;
+  max-height: 25px;
+}
+
+.btnMain.secMainBodySecInside_DashboardSecTopSecRightSecBtnsBtn {
+  height: 100%;
+}
+
+.secMainBodySecInside_DashboardSecMidCards {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 25px;
+}
+
+@media (max-width: 1200px) {
+  .secMainBodySecInside_DashboardSecMidCards {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .secMainBodySecInside_DashboardSecMidCards {
+    grid-template-columns: 1fr;
+  }
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrap {
+  transition: ease 0.2s;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 0px;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+  border-left: solid 4px rgba(76,130,163,0);
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrap:hover {
+  transition: ease 0.2s;
+  border-left: solid 4px #4c82a3;
+  border-radius: 0 4px 4px 0;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrap:hover > .secMainBodySecInside_DashboardSecMidCardsWrapBtns {
+  transition: ease 0.2s;
+  padding: 5px 10px;
+  width: 60px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLink {
+  width: 100%;
+  padding: 15px;
+  color: unset;
+  text-decoration: unset;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLink:hover {
+  color: unset;
+  text-decoration: unset;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapBtns {
+  transition: ease 0.2s;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+  justify-content: start;
+  align-items: center;
+  padding: 0px;
+  width: 0px;
+  overflow: hidden;
+  border-left: solid 1px rgba(0,0,0,0.1);
+}
+
+.btnMain.secMainBodySecInside_DashboardSecMidCardsWrapBtnsBtn {
+  background: rgba(76,130,163,0);
+  color: rgb(76,130,163);
+  flex-grow: 1;
+  padding: 5px 10px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkTop {
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMid {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottom {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkTopText {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  font-size: 20px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidPrimary {
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidSecondary {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  flex-wrap: wrap;
+  padding: 0 0 0 15px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidDivider {
+  height: 100%;
+  width: 1px;
+  background: rgba(0,0,0,0.1);
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser {
+  transition: ease 0.2s;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  background: rgba(0,0,0,0.15);
+  border-radius: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: solid 2px #4c82a3;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther {
+  transition: ease 0.2s;
+  margin: 0 0 0 -15px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther:hover {
+  transition: ease 0.2s;
+  margin: 0 15px 0 0px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background: #4c82a3;
+  border-radius: 100px;
+  padding: 6px;
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  font-size: 10px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst {
+  margin: 0 0 0 -15px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst:hover {
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRow {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+  color: rgba(0,0,0,0.3);
+  font-size: 14px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomSplit {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 25px;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRowVisual {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRowText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  flex-grow: 1;
+}
+
diff --git a/files.css b/files.css
new file mode 100644
index 0000000..d1ab9bd
--- /dev/null
+++ b/files.css
@@ -0,0 +1,696 @@
+.secMainBodySec.secMainBodySecFiles {
+  flex-grow: 1;
+}
+
+.secMainBodySecInside.secMainBodySecInsideFiles {
+  flex-grow: 1;
+}
+
+.filesPage {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 30px;
+  flex-grow: 1;
+}
+
+@media (max-width: 992px) {
+  .filesPage {
+    grid-template-columns: 1fr;
+  }
+}
+
+.filesPageSec.filesPageSecSides {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+  height: 100%;
+  position: relative;
+}
+
+@media (max-width: 992px) {
+  .filesPageSec.filesPageSecSides {
+    display: none;
+  }
+}
+
+.filesPageSec.filesPageSecMid {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.filesPageSecSidesSec {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
+.filesPageSecSidesSecFiles {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  grid-gap: 15px;
+  max-height: 350px;
+  overflow: auto;
+  padding: 0 5px 0 0;
+  margin: 0 -5px 0 0;
+}
+
+.filesPageSecSidesSecFiles::-webkit-scrollbar {
+  width: 10px;
+}
+
+.filesPageSecSidesSecFiles::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0.15);
+}
+
+.filesPageSecSidesSecFiles::-webkit-scrollbar-thumb {
+  max-width: 10px;
+  border-radius: 2px;
+  background-color: #4c82a3;
+  cursor: grab;
+}
+
+.filesPageSecSidesSecFilesFile {
+  transition: ease 0.2s;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #ffffff;
+  padding: 5px 10px;
+  align-items: center;
+  color: rgba(0,0,0,0.5);
+  cursor: pointer;
+}
+
+.filesPageSecSidesSecFilesFile:hover {
+  transition: ease 0.2s;
+  background: #4c82a3;
+  color: white;
+}
+
+.filesPageSecSidesSecFilesFileVisual {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 25px;
+  width: 25px;
+}
+
+.filesPageSecSidesSecFilesFileText {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+}
+
+.filesPageSecSidesSecFilesFileNumber {
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.filesPageSecSidesSecFilesFileInfo {
+  flex-grow: 1;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.filesPageSecSidesSec.filesPageSecSidesSecAlt {
+  background: unset;
+  padding: 0 10px;
+  text-align: center;
+}
+
+.filesPageSecSidesSecFilesFile.filesPageSecSidesSecFilesFileActive {
+  background: #4c82a3;
+  color: white;
+}
+
+.filesPageSecSidesSecAltText {
+  font-weight: 400;
+  color: rgba(0,0,0,0.5);
+  font-size: 14px;
+}
+
+.filesPageSecSidesSecAlt_Users {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.filesPageSecSidesSecAlt_UsersTop {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  width: 100%;
+}
+
+.filesPageSecSidesSecAlt_UsersBottom {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+}
+
+.dropdownMain.filesPageSecSidesSecAlt_UsersTopDropdown {
+  width: 100%;
+}
+
+.filesPageSecSidesSecAlt_UsersTopDropdownUser {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.filesPageSecSidesSecAlt_UsersTopDropdownUserPic {
+  width: 30px;
+  height: 30px;
+  border: solid 2px #4c82a3;
+  border-radius: 100px;
+}
+
+.filesPageSecSidesSecAlt_UsersTopDropdownUserInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.filesPageSecSidesSecAlt_UsersTopDropdownUserInfoText {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+}
+
+.filesPageSecSidesSecAlt_UsersTopDropdownUserVisual {
+  border-radius: 100px;
+  height: 15px;
+  width: 15px;
+  background: #4c82a3;
+  outline: solid 2px #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnMain.filesPageSecSidesSecAlt_UsersTopDropdownUserBtn {
+  padding: 10px;
+  color: rgba(0,0,0,0.35);
+  background: rgba(76,130,163,0);
+}
+
+.btnMain.filesPageSecSidesSecAlt_UsersTopDropdownUserBtn:hover {
+  padding: 10px;
+  color: white;
+  background: #5e8eab;
+}
+
+.dropdownMainMenuItem.filesPageSecSidesSecAlt_UsersTopDropdownItem {
+  padding: 5px 10px;
+}
+
+.filesPageSecSidesSecAlt_UsersTopDropdownUserVisual.filesPageSecSidesSecAlt_UsersTopDropdownUserVisualAlt {
+  outline: unset;
+  background: unset;
+  border-radius: 0px;
+}
+
+.filesPageSecSidesSecTools {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 15px;
+  max-height: 450px;
+  overflow: auto;
+  padding: 0 5px 0 0;
+  margin: 0 -5px 0 0;
+}
+
+@media (max-width: 1200px) {
+  .filesPageSecSidesSecTools {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.filesPageSecSidesSecTools::-webkit-scrollbar {
+  width: 10px;
+}
+
+.filesPageSecSidesSecTools::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0.15);
+}
+
+.filesPageSecSidesSecTools::-webkit-scrollbar-thumb {
+  max-width: 10px;
+  border-radius: 2px;
+  background-color: #4c82a3;
+}
+
+.filesPageSecSidesSecToolsItem {
+  transition: ease 0.2s;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+  border-radius: 4px;
+  padding: 10px 5px 5px 5px;
+  background: rgba(0,0,0,0.05);
+  color: rgba(0,0,0,0.5);
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  cursor: grab;
+}
+
+.filesPageSecSidesSecToolsItem:hover {
+  transition: ease 0.2s;
+  background: rgb(76,130,163);
+  color: rgb(255,255,255);
+}
+
+.filesPageSecSidesSecToolsItemText {
+  text-align: center;
+}
+
+.filesPageSecMidPreview {
+  border-radius: 4px;
+  background: white;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+  margin: 0 0 30px 0;
+  height: 100%;
+}
+
+.filesPageSecMidPreviewInside {
+  border-radius: 0px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+  background: rgba(0,0,0,0.1);
+  flex-grow: 1;
+  /*max-height: 650px;*/
+  padding: 10px 15px 10px 10px;
+  margin: 0 -5px 0 0;
+}
+
+.filesPageSecMidPreviewInside::-webkit-scrollbar {
+  width: 10px;
+}
+
+.filesPageSecMidPreviewInside::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0.15);
+}
+
+.filesPageSecMidPreviewInside::-webkit-scrollbar-thumb {
+  max-width: 10px;
+  border-radius: 2px;
+  background-color: #4c82a3;
+  cursor: grab;
+}
+
+.filesPageSecMidPreviewInsideWrap {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.filesPageSecMidActions {
+  background: white;
+  width: 100%;
+  border-radius: 4px;
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  grid-gap: 15px;
+  box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
+  max-width: 750px;
+}
+
+@media (max-width: 768px) {
+  .filesPageSecMidActions {
+    display: none;
+  }
+}
+
+.filesPageSecMidPreviewInsideWrapFile {
+  width: 100%;
+  border-radius: 4px;
+  background: rgba(255,255,255,0.5);
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0,0,0,0.25);
+  font-size: 14px;
+}
+
+.filesPageSecMidPreviewInsideWrapImg {
+  width: 100%;
+}
+
+.filesPageSecMidActionsTrigger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.btnMain.filesPageSecMidActionsTriggerBtn {
+  background: white;
+  color: #434343;
+  padding: 5px 30px;
+  box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
+  position: absolute;
+  top: -25px;
+}
+
+.filesPageSecMidActionsTop {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.filesPageSecMidActionsMid {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.filesPageSecMidActionsBottom {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  justify-content: center;
+  align-items: center;
+}
+
+.filesPageSecMidActionsFoot {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.filesPageSecMidActionsTopActions {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+}
+
+.filesPageSecMidActionsTopInfo {
+  flex-grow: 1;
+}
+
+.filesPageSecMidActionsTopInfoText {
+  font-size: 16px;
+  color: #434343;
+}
+
+.filesPageSecMidActionsMidDraw {
+  height: 100px;
+  background: rgba(0,0,0,0.1);
+  border-radius: 4px;
+  border: solid 2px #4c82a3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.filesPageSecMidActionsFootInside {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  align-items: start;
+  justify-content: center;
+  width: 100%;
+}
+
+.filesPageSecMidActionsFootInsideWrap {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+}
+
+.btnMain.filesPageSecMidActionsFootInsideWrapBtn {
+  font-size: 12px;
+  padding: 5px 10px;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.1);
+  color: rgba(0,0,0,0.5);
+}
+
+.filesPageSecMidActionsFootInsideWrapSlab {
+  height: 2px;
+  width: 100%;
+  background: #4c82a3;
+}
+
+.btnMain.filesPageSecMidActionsFootInsideWrapBtn:hover {
+  background: #447592;
+  color: rgba(255,255,255,0.5);
+}
+
+.btnMain.filesPageSecMidActionsFootInsideWrapBtn.filesPageSecMidActionsFootInsideWrapBtnDone {
+  background: #5e8eab;
+  color: rgb(255,255,255);
+}
+
+.filesPageSecMidActionsWrapper {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 20px;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.btnMain.filesPageSecSidesSecFilesFileBtn {
+  background: rgba(76,130,163,0);
+  color: rgb(76,130,163);
+}
+
+.filesPageSecSidesSecFilesFile:hover > .btnMain.filesPageSecSidesSecFilesFileBtn {
+  color: white;
+}
+
+.filesPageSecSidesSecFilesFileActive > .btnMain.filesPageSecSidesSecFilesFileBtn {
+  color: white;
+}
+
+.filesPageSecMidWrap {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  grid-gap: 25px;
+  height: 100%;
+  width: 100%;
+}
+
+.tabsMain.filesPageSecMidTab {
+  flex-grow: 1;
+  justify-content: end;
+  display: flex;
+}
+
+.tabsMainTop.filesPageSecMidTabTop {
+  order: 2;
+  display: none;
+  position: fixed;
+  bottom: 0;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  background: white;
+  padding: 5px;
+  box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
+}
+
+@media (max-width: 992px) {
+  .tabsMainTop.filesPageSecMidTabTop {
+    order: 2;
+    display: flex;
+  }
+}
+
+.tabsMainBottom.filesPageSecMidTabBottom {
+}
+
+.tabsMainBottomPane.filesPageSecMidTabBottomPane {
+}
+
+.filesPageSecSidesSecInfo {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+}
+
+.filesPageSecSidesSecInfoSec {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.filesPageSecSidesSecInfoSecText {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.filesPageSecSidesSecInfoSecUsers {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+}
+
+.filesPageSecSidesSecInfoSecUsersPrimary {
+}
+
+.filesPageSecSidesSecInfoSecUsersSplitter {
+  height: 100%;
+  width: 1px;
+  background: rgba(0,0,0,0.1);
+}
+
+.filesPageSecSidesSecInfoSecUsersSecondary {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  flex-wrap: wrap;
+  padding: 0 0 0 15px;
+}
+
+.filesPageSecSidesSecInfoSecUsersUser {
+  transition: ease 0.2s;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  background: rgba(0,0,0,0.15);
+  border-radius: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: solid 2px #4c82a3;
+  text-decoration: unset;
+  color: unset;
+}
+
+.filesPageSecSidesSecInfoSecUsersUserStatus {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background: #4c82a3;
+  border-radius: 100px;
+  padding: 6px;
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  font-size: 10px;
+}
+
+.filesPageSecSidesSecInfoSecUsersUser.filesPageSecSidesSecInfoSecUsersUserAlt {
+  transition: ease 0.2s;
+  margin: 0 0 0 -15px;
+}
+
+.filesPageSecSidesSecInfoSecUsersUser.filesPageSecSidesSecInfoSecUsersUserAlt:hover {
+  transition: ease 0.2s;
+  margin: 0 15px 0 0px;
+}
+
+.filesPageSecSidesSecInfoSecUsersUser.filesPageSecSidesSecInfoSecUsersUserAlt.filesPageSecSidesSecInfoSecUsersUserAltFirst {
+  margin: 0 0 0 -15px;
+}
+
+.filesPageSecSidesSecInfoSecDetails {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.filesPageSecSidesSecInfoSecDetailsRow {
+  transition: ease 0.2s;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  color: rgba(0,0,0,0.5);
+  font-size: 14px;
+  align-items: center;
+  border-radius: 4px;
+  padding: 5px;
+}
+
+.filesPageSecSidesSecInfoSecDetailsRow:hover {
+  transition: ease 0.2s;
+  background: #4c82a3;
+  color: white;
+}
+
+.filesPageSecSidesSecInfoSecDetailsRowVisual {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  border-radius: 3px;
+}
+
+.filesPageSecSidesSecInfoSecDetailsRowInfo {
+}
+
+.filesPageSecSidesSecInfoSecDetailsRowInfoText {
+}
+
+.filesPageSecMidWrap.filesPageSecMidWrapAlt {
+  background: white;
+  padding: 15px;
+}
+
+.tabsMainTopTab.filesPageSecMidTabTab {
+}
+
+.tabsMainTopTabLink.filesPageSecMidTabTabLink {
+  /*padding: 5px 10px;*/
+}
+
+.filesPageSecSidesWrap {
+  position: sticky;
+  top: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.filesPageSecMidActionsWrapped {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  align-items: center;
+}
+
diff --git a/footer.css b/footer.css
new file mode 100644
index 0000000..c304ddf
--- /dev/null
+++ b/footer.css
@@ -0,0 +1,116 @@
+.secMain.secMainFooter {
+  background: white;
+  padding: 50px 0 0 0;
+}
+
+.secMainFooterInside {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.secMainFooterInsideTop {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.5fr 1.75fr 0.75fr;
+  grid-gap: 50px;
+  padding: 0 0 40px 0;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .secMainFooterInsideTop {
+    grid-template-columns: 1fr;
+  }
+}
+
+.secMainFooterInsideTopSec {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
+.secMainFooterInsideBottom {
+  padding: 10px 0;
+  border-top: solid 1px rgba(0,0,0,0.1);
+}
+
+.secMainFooterInsideBottomSec {
+}
+
+.secMainFooterInsideBottomSecText {
+  text-align: center;
+  color: rgba(0,0,0,0.5);
+  font-size: 12px;
+}
+
+.secMainFooterInsideTopSecLeftTop {
+  display: flex;
+  flex-direction: column;
+}
+
+.secMainFooterInsideTopSecLeftBottom {
+  display: flex;
+  flex-direction: column;
+}
+
+.btnMain.secMainFooterInsideTopSecMidBtn {
+  flex-grow: 1;
+  background: unset;
+  color: rgba(0,0,0,0.65);
+  justify-content: start;
+}
+
+.secMainFooterInsideTopSecLeftTopImg {
+  width: 100%;
+}
+
+.secMainFooterInsideTopSecLeftBottomText {
+  font-size: 14px;
+}
+
+.secMainFooterInsideTopSecMidInside {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 15px;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-items: start;
+}
+
+@media (max-width: 768px) {
+  .secMainFooterInsideTopSecMidInside {
+    flex-direction: column;
+    justify-content: unset;
+    align-items: unset;
+  }
+}
+
+.secMainFooterInsideTopSecRightInside {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+}
+
+@media (max-width: 768px) {
+  .secMainFooterInsideTopSecRightInside {
+    align-items: center;
+  }
+}
+
+.secMainFooterInsideTopSecRightInsideText {
+  font-size: 14px;
+  color: rgba(0,0,0,0.5);
+}
+
+.secMainFooterInsideTopSecRightInsideLinks {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+}
+
+.btnMain.secMainFooterInsideTopSecRightInsideLinksLink {
+}
+
diff --git a/frontpage.css b/frontpage.css
new file mode 100644
index 0000000..e5da53c
--- /dev/null
+++ b/frontpage.css
@@ -0,0 +1,171 @@
+.secMainBodySecInside_Front {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 45px;
+  border-radius: 4px;
+  padding: 50px;
+}
+
+@media (max-width: 768px) {
+  .secMainBodySecInside_Front {
+    padding: 15px;
+  }
+}
+
+.secMainBodySecInside_FrontSec {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
+.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecLogo {
+  align-items: center;
+}
+
+.secMainBodySecInside_FrontSecLogoImg {
+  width: 100%;
+  max-width: 500px;
+}
+
+.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecInfo {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+  text-align: center;
+}
+
+.secMainBodySecInside_FrontSecInfoHeading {
+  font-weight: bold;
+}
+
+.secMainBodySecInside_FrontSecInfoText {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecCards {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 25px;
+}
+
+@media (max-width: 992px) {
+  .secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecCards {
+    grid-template-columns: 1fr;
+  }
+}
+
+.secMainBodySecInside_FrontSecCardsCard {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInside {
+  transition: ease 0.2s;
+  width: 100%;
+  border-radius: 4px;
+  background: white;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+  height: 100%;
+  justify-content: space-between;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInside:hover {
+  transition: ease 0.2s;
+  background: #4c82a3;
+  color: white;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInside:hover > .secMainBodySecInside_FrontSecCardsCardInsideSecTop > .secMainBodySecInside_FrontSecCardsCardInsideSecTopVisual {
+  transition: ease 0.2s;
+  color: white;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInside:hover > .secMainBodySecInside_FrontSecCardsCardInsideSecBottom > .secMainBodySecInside_FrontSecCardsCardInsideSecBottomBtnAlt {
+  transition: ease 0.2s;
+  color: white;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInsideSec {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecTop {
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecMid {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecBottom {
+  justify-content: center;
+  align-items: end;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInsideSecTopVisual {
+  width: 25px;
+  height: 25px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  color: rgb(76,130,163);
+  font-size: 24px;
+}
+
+.secMainBodySecInside_FrontSecCardsCardInsideSecTopText {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.btnMain.secMainBodySecInside_FrontSecCardsCardInsideSecBottomBtnAlt {
+  background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.00)), linear-gradient(rgba(76,130,163,0), rgba(76,130,163,0));
+  color: #434343;
+}
+
+.secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecExtra {
+  font-size: 14px;
+  text-align: center;
+  color: rgba(0,0,0,0.5);
+}
+
+.secMainBodySec.secMainBodySecFront {
+  position: relative;
+  flex-grow: 1;
+}
+
+.secMainBodySecFrontBGElement {
+  width: 13%;
+  opacity: 0.05;
+  position: absolute;
+}
+
+@media (max-width: 1200px) {
+  .secMainBodySecFrontBGElement {
+    display: none;
+  }
+}
+
+.secMainBodySecFrontBGElement.secMainBodySecFrontBGElementRight {
+  top: 50px;
+  right: 0;
+  z-index: -1;
+}
+
+.secMainBodySecFrontBGElement.secMainBodySecFrontBGElementLeft {
+  bottom: 50px;
+  left: 0;
+  z-index: -1;
+}
+
diff --git a/nav.css b/nav.css
new file mode 100644
index 0000000..9452611
--- /dev/null
+++ b/nav.css
@@ -0,0 +1,74 @@
+.secMain.secMainNav {
+  background: white;
+  height: 75px;
+  justify-content: center;
+}
+
+.secMainNavInside {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 25px;
+  height: 100%;
+  padding: 10px 0;
+}
+
+@media (max-width: 768px) {
+  .secMainNavInside {
+    grid-template-columns: 0.75fr 0fr 2.25fr;
+    grid-gap: 10px;
+  }
+}
+
+.secMainNavInsideSec {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+}
+
+.secMainNavInsideSecLeft {
+  width: 100%;
+  justify-content: center;
+}
+
+.secMainNavInsideSecMid {
+}
+
+.secMainNavInsideSecRight {
+}
+
+.linkMain.secMainNavInsideSecLeftLink {
+  display: flex;
+  flex-direction: column;
+}
+
+.linkMain.secMainNavInsideLeftLink {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.secMainNavInsideLeftLinkImg {
+  width: 100%;
+  height: 50px;
+}
+
+.secMainNavInsideSecLeftInside {
+}
+
+.secMainNavInsideSecMidInside {
+}
+
+.secMainNavInsideSecRightInside {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  justify-content: end;
+}
+
+.btnMain.secMainNavInsideSecRightInsideBtn {
+}
+