.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-gap: 15px; } } @media (max-width: 768px) { .filesPage { grid-template-columns: 1fr; } } .filesPageSec.filesPageSecSides { display: flex; flex-direction: column; grid-gap: 15px; height: 100%; position: relative; } @media (max-width: 768px) { .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: 7px 10px; align-items: center; color: rgba(0,0,0,0.5); cursor: pointer; min-height: 45px; } .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; min-width: 20px; text-align: center; } .filesPageSecSidesSecFilesFileInfo { flex-grow: 1; font-size: 16px; font-weight: 500; } .filesPageSecSidesSec.filesPageSecSidesSecAlt { background: unset; padding: 0; 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; } } @media (max-width: 992px) { .filesPageSecSidesSecTools { grid-template-columns: 1fr; } } @media (max-width: 768px) { .filesPageSecSidesSecTools { max-height: unset; 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; } .btnMain.filesPageSecMidActionsTriggerBtnAlt { background: white; color: #434343; padding: 5px 30px; box-shadow: unset; position: static; top: -20px; } .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: 768px) { .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; } .filesPageSecMidPreviewInsideDivider { display: flex; flex-direction: row; grid-gap: 10px; justify-content: center; align-items: center; color: rgba(0,0,0,0.15); font-size: 12px; } .filesPageSecMidPreviewInsideDividerLine { flex-grow: 1; height: 1px; 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-height: 15px; 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; } .filesPageSecSidesSecCTA { display: flex; flex-direction: row; grid-gap: 10px; flex-wrap: wrap; } .btnMain.filesPageSecSidesSecCTABtn { flex-grow: 1; min-width: 160px; } .MobileSignBox { position: fixed; bottom: 50px; background: white; left: 5px; right: 5px; display: flex; flex-direction: column; padding: 10px; box-shadow: 0 0 4px 0 rgb(0,0,0,0.25); border-radius: 5px; grid-gap: 10px; } @media (min-width: 768px) { .MobileSignBox { display: none; } } .MobileSignBoxControl { display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }