.sidebar{width:20%;height:calc(100vh - 60px);position:sticky;top:50px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;background-color:var(--primary-color)}.sidebar::-webkit-scrollbar{display:none}.sidebarWrapper{color:#555}.sidebarMenu{margin-bottom:20px}.sidebarTitle{font-size:var(--h2-font-size);color:#fff;font-weight:var(--font-medium);padding:5px 10px}.h-rule{margin-top:20px;display:block;height:1px;background-color:var(--gray-100);width:100%}.sidebarList{list-style:none;padding:5px;display:flex;flex-direction:column;gap:10px;margin-top:20px}.sidebarListItem{padding:10px;cursor:pointer;display:flex;align-items:center;border-radius:10px;color:#fff;font-size:14px}.sidebarListItem.active,.sidebarListItem:hover{background-color:var(--primary-color-dark)}.sidebarIcon{margin-right:5px;font-size:20px!important}.topbar{width:100%;height:60px;background-color:var(--primary-color);position:sticky;top:0;z-index:999}.topbarWrapper{height:100%;padding:0 10px;display:flex;align-items:center;justify-content:space-between}.logo{font-weight:700;font-size:20px;color:var(--gray-100);cursor:pointer;text-decoration:underline}.topRight{display:flex;align-items:center}.topbarIconContainer{position:relative;cursor:pointer;margin-right:10px;color:#555}.topIconBadge{width:15px;height:15px;position:absolute;top:-5px;right:0;background-color:red;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}.topAvatar{width:40px;height:40px;border-radius:50%;cursor:pointer}.home{width:80%;display:flex;flex-direction:column;justify-content:center;align-items:center}.homeImg{height:200px;width:200px;object-fit:cover;border-radius:4px}.homeTitle{font-size:3rem}.homeSubTitle{font-size:1.5rem;margin-top:40px}.homeSubTitle>a{text-decoration:none}:root{--primary-color: #C89B3C;--primary-color-light: #E0C878;--primary-color-dark: #A1781E;--secondary-color: #0D0D0D;--secondary-color-light: #191919;--secondary-color-dark: #000000;--gray-100: hsl(0, 0%, 100%);--gray-300: hsl(240, 27%, 94%);--gray-500: hsl(247, 7%, 46%);--gray-700: hsl(244, 19%, 16%);--gray-900: hsl(232, 100%, 7%);--black-light: rgb(25, 25, 25);--black-dark: rgb(0, 0, 0);--header-height: 3.5rem;--biggest-font-size: 2.75rem;--big-font-size: 1.75rem;--h1-font-size: 1.5rem;--h2-font-size: 1.25rem;--h3-font-size: 1.1rem;--normal-font-size: .938rem;--small-font-size: .813rem;--smaller-font-size: .75rem;--font-regular: 300;--font-medium: 500;--font-semi-bold: 600;--font-bold: 800;--serif-family: "Playfair Display", serif;--cursive-family: "Courgette", cursive;--sans-family: "Lato", sans-serif;--bold-cursive-family: "Righteous", cursive;--header-style-family: "Kurale", serif;--drip-family: "Nosifer", cursive;--z-tooltip: 10;--z-fixed: 100}*{margin:0;padding:0;box-sizing:border-box;list-style:none;font-family:var(--sans-family)}a{color:inherit;text-decoration:none}html{scroll-behavior:smooth}.container{display:flex;height:calc(100vh - 60px)}.link{text-decoration:none;color:inherit}.loading{flex:4;display:flex;justify-content:center;align-items:center;font-size:var(--big-font-size);font-family:var(--serif-family);font-weight:var(--font-semi-bold);color:var(--primary-color-dark)}.uploading,.loggingIn{position:absolute;top:0;bottom:0;left:0;right:0;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;background-color:#000000c6;font-size:var(--h2-font-size);font-family:var(--serif-family);font-weight:var(--font-medium);color:var(--gray-100);text-shadow:2px 2px 4px var(--black-dark);z-index:var(--z-tooltip);padding:10px}.loggingIn{background-color:var(--primary-color-dark);letter-spacing:1px}.shrink{height:0}.error{color:var(--gray-100);padding:10px;border-radius:5px;background-color:var(--secondary-color);font-size:var(--normal-font-size);font-weight:var(--font-regular)}.post{width:80%;flex:4;padding:20px;overflow-y:scroll}.postLeft{display:flex;flex-direction:column;width:50%;margin-right:20px;border-radius:8px;background-color:#ebebeb;box-shadow:0 0 10px -3px #000000bf;-webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);-moz-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);padding:20px;overflow-y:scroll}.postRight{overflow-y:scroll;width:50%;margin-left:20px;border-radius:8px;background-color:#ebebeb;box-shadow:0 0 10px -3px #000000bf;-webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);-moz-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);padding:20px}.newPost{width:80%;flex:4;padding:20px;display:flex;flex-direction:column;gap:20px;overflow-y:scroll}.login{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}.loginLogo{width:80px;height:80px;object-fit:cover;border-radius:10px;margin-bottom:20px;box-shadow:0 0 10px -3px #00000080;-webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.5);-moz-box-shadow:0px 0px 10px -3px rgba(0,0,0,.5)}.loginForm{display:flex;flex-direction:column;align-items:center;justify-content:center;width:400px;height:60%;padding:20px 10px;border-radius:5px;gap:20px;border:1px solid lightgray;background-color:#eee}.loginForm>.title{font-size:24px;font-weight:600;letter-spacing:2px;margin-bottom:10px}.loginInput{margin-bottom:15px;padding:5px;width:95%;height:30px;border:none;outline:none;background-color:#eee;border-radius:8px;box-shadow:0 0 10px -3px #00000080;-webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.5);-moz-box-shadow:0px 0px 10px -3px rgba(0,0,0,.5);font-size:20px}.loginButton{background-color:#00a6ff;color:#fff6f2;border:none;padding:10px;cursor:pointer;font-size:16px;width:50%;transition:all .3s ease;border-radius:4px}.loginButton:hover{background-color:#0271ac}.logout{flex:4;display:flex;flex-direction:column;gap:30px;justify-content:center;align-items:center}.logoutText{font-size:var(--h1-font-size);color:var(--gray-900)}.logoutButton{padding:15px 30px;background-color:teal;border:none;border-radius:8px;outline:none;cursor:pointer;color:var(--gray-300);font-size:1.2rem;transition:all .3s}.logoutButton:hover{background-color:#002b80;color:var(--gray-100);font-size:1.2rem}.postImg.gimage{width:200px;height:200px;object-fit:contain}.postvideo{margin-top:10px;object-fit:contain;width:200px;height:150px;border-radius:8px;box-shadow:0 0 10px -2px #00000073;-webkit-box-shadow:0px 0px 10px -2px rgba(0,0,0,.45);-moz-box-shadow:0px 0px 10px -2px rgba(0,0,0,.45)}.postImg.apostype{width:200px;height:200px;object-fit:contain}.newPost{width:80%;padding:20px;display:flex;flex-direction:column}.newPost{width:80%;flex:4;padding:20px;display:flex;flex-direction:column}.addPostForm{width:50%;display:flex;flex-direction:column;background-color:#ebebeb;box-shadow:0 0 10px -3px #000000bf;-webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);-moz-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75)}.addPostFormInputs{display:flex;flex-direction:column;padding:20px}.addPostFormInputs>label{margin-top:30px;margin-bottom:10px;font-weight:700;font-size:16px}.addPostFormInputs>input{border:none;padding:10px;border-radius:8px;outline:none}.addPostFormInputs>textarea{border:none;padding:5px;border-radius:8px;outline:none}.newPostButton{border:none;padding:10px 15px;border-radius:5px;background-color:#00008b;color:#eee;font-weight:600;transition:all .3s;cursor:pointer;width:100px;margin:auto auto 20px}.newPostButton:hover{background-color:#21218f;color:#fff}.productList{width:80%;padding:20px;height:100%}.table{height:90%}.productListProduct{display:flex;align-items:center}.productListImage{width:32px;height:32px;border-radius:50%;object-fit:cover;margin-right:10px}.productListEdit{border:none;border-radius:10px;padding:5px 10px;background-color:#3bb077;color:#fff;cursor:pointer;margin-right:20px}.productListDelete{color:#f32a2a;cursor:pointer}.post{width:80%;flex:4;padding:20px}.postTitleContainer{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:10%}.postTitleContainer>h1{color:var(--primary-color-dark)}.postContainer{display:flex;width:100%;height:90%}.addPostButton{width:80px;border:none;padding:5px;background-color:teal;border-radius:5px;cursor:pointer;color:#fff;font-size:16px;transition:all .2s}.addPostButton:hover{background-color:#169b9b}.postLeft{display:flex;flex-direction:column;width:50%;margin-right:20px;border-radius:8px;background-color:#ebebeb;box-shadow:0 0 10px -3px #000000bf;-webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);-moz-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);padding:20px}.postInfoItem{margin-bottom:20px}.postInfoKey{font-weight:700}.postName.link{text-decoration:underline;color:#00f}.postInfoValue.img{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}.postImg{margin-top:10px;object-fit:cover;height:100px;border-radius:8px}.postImg.cimage{width:200px;height:200px;object-fit:contain}.postRight{width:50%;margin-left:20px;border-radius:8px;background-color:#ebebeb;box-shadow:0 0 10px -3px #000000bf;-webkit-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);-moz-box-shadow:0px 0px 10px -3px rgba(0,0,0,.75);padding:20px}.postForm{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.postFormInputs{display:flex;flex-direction:column;width:100%}.postFormInputs>label{margin-top:30px;margin-bottom:10px;font-weight:700;font-size:16px}.postFormInputs>input{border:none;padding:10px;border-radius:8px;outline:none}.postFormInputs>textarea{border:none;padding:5px;border-radius:8px;outline:none}.postButton{border:none;padding:10px 15px;border-radius:5px;background-color:#00008b;color:#eee;font-weight:600;transition:all .3s;cursor:pointer;margin-top:30px}.postButton:hover{background-color:#21218f;color:#fff}