body{margin:auto}.homeContainer{display:flex;width:100%;justify-content:center}.post{width:100%;border-radius:10px;margin:30px 0}.postWrapper{padding:10px}.postTop{justify-content:space-between}.postTop,.postTopLeft{display:flex;align-items:center}.postProfileImg{width:32px;height:32px;border-radius:50%;object-fit:cover}.postUsername{font-size:14px;font-weight:500;margin:0 10px}.postDate{font-size:12px}.postCenter{margin:20px 0}.postImg{margin-top:20px;width:100%;max-height:500px;object-fit:contain}.postBottom{justify-content:space-between}.postBottom,.postBottomLeft{display:flex;align-items:center}.postBottomLeft{margin:0 10px}.likeIcon{width:25px;height:25px;margin-right:5px;cursor:pointer}.postLikeCounter{font-size:15px}.postCommentText{cursor:pointer;border-bottom:1px dashed #505d54;font-size:15px}.listOfComments{display:block;width:auto;margin:auto;height:auto;outline:none;border:.5px solid #b9b5b5}.listOfComments,.white{padding-left:.5rem;transition:.3s}.white{color:#170097;cursor:pointer;margin-bottom:.5rem;background-color:none}.red{color:#dc143c}.green{color:#7fff00}.card{overflow:hidden;margin:2rem auto;border-radius:5px;background-color:#f4f4f4}@media screen and (max-width:800px){.topbarLeft img{display:none}.card{width:auto}}#comm{min-width:-webkit-fill-available}.profile{display:flex}.profileRight{flex:9 1}.profileCover{height:320px;position:relative}.profileCoverImg{width:100%;height:250px;object-fit:cover}.profileUserImg{width:150px;height:150px;left:0;top:150px}.profileUserImg,.profileUserImgChange{border-radius:50%;object-fit:cover;position:absolute;right:0;margin:auto;border:3px solid #fff}.profileUserImgChange{width:2rem!important;height:2rem!important;left:7em;background-color:#a9a9a9}.profileUserImgChange svg{margin:3px}.profileInfo{margin-top:.4rem;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 .5rem}.profileInfoName{font-size:20px}.profileInfoDesc{font-weight:300}.profileRightBottom{display:flex;flex-direction:column;align-items:center;justify-content:center}.profile-title{text-align:center;margin-top:1.5rem;font-size:3rem;color:#000;text-decoration:underline}.profile-image-div{display:flex;align-items:center;justify-content:center}.profile-image-div img{width:100%}.user-action{background-color:hsla(0,0%,100%,.658)}.user-action,.user-actions{padding-top:1rem;display:flex;align-items:center;justify-content:space-around}.user-actions{background-color:#ff0}.postImgAdmin{margin:0 auto;height:8em;width:8em;border-radius:1.5rem;object-fit:cover}.card-input input{background-color:#d0d1d8!important;padding:.3rem;transition:.3s;border:none;width:70%}.add-input:focus{background-color:#86af9c!important;color:#ac8b61!important;outline:none}.add-input:focus,.card-input:focus{-webkit-transform:scale(1.15)!important;transform:scale(1.15)!important}.card-input:focus{background-color:#85083c!important;color:#7e94b4!important}@-webkit-keyframes borderAnimation{0%{border:1px solid #8c8da0}50%{border:1px solid #80809b}to{border:1px solid #8e8c99}}@keyframes borderAnimation{0%{border:1px solid #8c8da0}50%{border:1px solid #80809b}to{border:1px solid #8e8c99}}@media screen and (max-width:800px){.add-input:focus,.card-input:focus{-webkit-transform:scale(1.02)!important;transform:scale(1.02)!important}.card,.card-image__post img{width:93vw}}#comm{display:block;text-align:center;margin:auto;height:40px}.share{border-radius:10px;box-shadow:0 0 16px -8px rgba(0,0,0,.68)}.shareWrapper{padding:10px}.shareTop{width:100%;height:30px;background-color:#fff;border-radius:30px;display:flex;align-items:center}.shareProfileImg{width:50px;height:50px;border-radius:50%;object-fit:cover;margin-right:10px}.shareInput{border:none;width:100%}.shareInput:focus{outline:none}.shareHr{margin-top:12px}.shareBottom{display:flex;align-items:center;justify-content:space-between}.shareOptions{display:flex;margin-left:20px}.shareOption{display:flex;align-items:center;margin-right:15px;cursor:pointer}.shareIcon{font-size:18px;margin-right:3px}.shareOptionText{font-size:14px;font-weight:500}.shareButton{border:none;padding:7px;border-radius:5px;background-color:green;font-weight:500;margin-right:20px;cursor:pointer;color:#fff}.shareImgContainer{padding:0 20px 10px;position:relative}.shareImg{width:100%;object-fit:cover}.shareCancelImg{position:absolute;top:0;right:20px;cursor:pointer;opacity:.7}.emoji-picker-react{position:absolute!important}p:before{display:inline;content:"\26A0   "}.rightbar{flex:3 1}.rightbarWrapper{padding:20px 20px 0 0}.birthdayContainer{display:flex;align-items:center}.birthdayImg{width:40px;height:40px;margin-right:10px}.birthdayText{font-weight:300;font-size:15px}.rightbarAd{width:10%;border-radius:10px;margin:30px 0}.rightbarTitle{margin-bottom:20px}.rightbarFriendList{padding:0;margin:0;list-style:none}.rightbarTitle{font-size:18px;font-weight:500;margin-bottom:10px}.rightbarInfo{margin-bottom:30px}.rightbarInfoItem{margin-bottom:10px}.rightbarInfoKey{font-weight:500;margin-right:15px;color:#555}.rightbarInfoValue{font-weight:300}.rightbarFollowings{display:flex;flex-wrap:wrap;justify-content:space-between}.rightbarFollowing{display:flex;flex-direction:column;margin-bottom:20px;cursor:pointer}.rightbarFollowingImg{width:100px;height:100px;object-fit:cover;border-radius:5px}.rightbarFollowButton{margin-top:30px;margin-bottom:10px;border:none;background-color:#1872f2;color:#fff;border-radius:5px;padding:5px 10px;display:flex;align-items:center;font-size:16px;font-weight:500;cursor:pointer}.rightbarFollowButton:focus{outline:none}.rightbarFriend{display:flex;align-items:center;margin-bottom:15px}.rightbarProfileImgContainer{margin-right:10px;position:relative}.rightbarProfileImg{width:40px;height:40px;border-radius:50%;object-fit:cover}.rightbarOnline{width:12px;height:12px;border-radius:50%;background-color:#32cd32;position:absolute;top:-2px;right:0;border:2px solid #fff}.rightbarUsername{font-weight:500}.sidebar{flex:3 1;height:calc(100vh - 50px);overflow-y:scroll;position:-webkit-sticky;position:sticky;top:50px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background-color:#f1f1f1}::-webkit-scrollbar-thumb{background-color:#b3b3b3}.sidebarWrapper{padding:20px}.sidebarList{padding:0;margin:0;list-style:none}.sidebarListItem{display:flex;align-items:center;margin-bottom:20px}.sidebarIcon{margin-right:15px}.sidebarButton{width:150px;border:none;padding:10px;border-radius:5px;font-weight:500}.sidebarHr{margin:20px 0}.sidebarFriendList{padding:0;margin:0;list-style:none}.sidebarFriend{display:flex;align-items:center;margin-bottom:15px}.sidebarFriendImg{width:32px;height:32px;border-radius:50%;object-fit:cover;margin-right:10px}.topbarContainer{height:50px;width:100%;background-color:#04326f;display:flex;align-items:center;position:-webkit-sticky;position:sticky;top:0;z-index:999}.topbarLeft{flex:3 1;padding-left:.5rem;display:flex}.logo{font-size:24px;margin:left 20px;color:#fff;cursor:pointer}.burgerNav{display:flex;align-items:center;padding-left:.5em;margin-right:15px;cursor:pointer}.topbarCenter{flex:4 1;display:flex}.topbar-title{text-align:center;margin:0 26px;color:#000;font-size:xxx-large}.topbarRight{flex:4 1;display:flex;align-items:center;justify-content:space-around;color:#fff}.topbarLink{margin-right:10px;font-size:14px;cursor:pointer}.topbarIcons{display:flex}.topbarIcons svg{height:28px;width:28px}.topbarIconItem{margin-right:15px;cursor:pointer;position:relative}.topbarIconBadge{width:15px;height:15px;background-color:red;border-radius:50%;color:#fff;position:absolute;top:-5px;right:-18px;display:flex;justify-content:center;font-size:12px}.topbarIco{width:15em}.topbarIcon{width:32px;height:32px;object-fit:cover;cursor:pointer;padding:0 .5em}.searchbar{width:100%;height:30px;background-color:#fff;border-radius:30px;display:flex;align-items:center}.searchInput{border:none;width:70%}@media screen and (max-width:768px){.topbarLink{display:none}}.dropdownwrapper ul li{display:flex;justify-content:space-between;border-style:outset;list-style:none!important}.dropdown-wrapper{position:absolute;flex-direction:column;text-transform:capitalize;margin:-19px -111px 0}.modal{display:flex;flex-direction:column;position:fixed;background:#f3ecec;border-radius:2rem;padding:13px 2rem;z-index:30;box-shadow:0 2px 8px rgba(0,0,0,.26);right:0}.modal__content{text-align:center;font-weight:500;margin:3rem auto}.modal__footer{padding:0}.modal-enter{-webkit-transform:translateY(-10rem);transform:translateY(-10rem);opacity:0}.modal-enter-active{transition:all .2s}.modal-enter-active,.modal-exit{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.modal-exit-active{-webkit-transform:translateY(-10rem);transform:translateY(-10rem);opacity:0;transition:all .2s}.modal-overlay{top:0;left:0;height:100vh;z-index:1040;background-color:rgba(0,0,0,.5)}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-close-button{font-size:1.4rem;font-weight:700;color:#000;cursor:pointer;border:none;background:transparent}.feed{flex-direction:column;align-items:center;justify-content:center}.feedWrapper{padding:20px}.login-container{display:flex;align-items:center;height:calc(80vh - 10px);background-repeat:no-repeat;background-position:0;padding-left:5%;padding-right:5%;margin-top:10%}.cardlogin{box-shadow:0 4px 8px 0 rgba(0,0,0,.2);transition:.3s;width:45%;margin-left:auto}.card:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,.2)}.login-container .container{padding-bottom:7%;padding-left:7%;padding-right:7%;height:100%}.login-container .container h1{font-size:2.5rem}.login-container .container form{display:flex;height:80%;flex-direction:column;justify-content:space-around;align-self:center}[type=username],input[type=email],input[type=password],input [type=text]{padding-left:1px;padding-right:1px;height:40px;border-radius:5px;border:.5px solid #8f8f8f;font-size:15px}label{display:flex;flex-direction:column}.login-container button{height:40px;font-weight:700;font-size:15px;background-color:#aaaa84;color:#fff}.login-container button:hover{background-color:#97192e;cursor:pointer}.login-container button:focus{outline:none!important}.spinner{-webkit-animation:spinner .9s linear infinite;animation:spinner .9s linear infinite;height:90%}.spinner:focus{border:none}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.form-error{color:#f42b4b;text-align:center}@media screen and (max-width:700px){.login-container{justify-content:center;background-image:none}.cardlogin{width:100%;align-self:center;margin-left:auto}}@media screen and (max-width:350px){.card{width:100%}}.login{width:100vw;height:100vh;background-color:#f0f2f5;display:flex;align-items:center;justify-content:center}.loginWrapper{width:70%;height:70%;display:flex}.loginLeft,.loginRight{flex:1 1;display:flex;flex-direction:column;justify-content:center}.loginLogo{font-size:50px;font-weight:800;color:#1775ee;margin-bottom:10px}.loginDesc{font-size:24px}.loginBox{height:300px;padding:20px;background-color:#fff;border-radius:10px;display:flex;flex-direction:column;justify-content:space-between}.loginInput{height:50px;border-radius:10px;border:1px solid grey;font-size:18px;padding-left:20px}.loginInput:focus{outline:none}.loginButton{height:50px;border-radius:10px;border:none;background-color:#1775ee;color:#fff;font-size:20px;font-weight:500;cursor:pointer}.loginButton:focus{outline:none}.loginButton:disabled{cursor:not-allowed}.loginForgot{text-align:center;color:#1775ee}.loginRegisterButton{width:60%;align-self:center;height:50px;border-radius:10px;border:none;background-color:#42b72a;color:#fff;font-size:20px;font-weight:500;cursor:pointer}.messenger{display:flex}.chatMenu{flex:3.5 1}.chatMenuInput{width:90%;padding:10px 0;border:none;border-bottom:1px solid grey}.chatBox{flex:5.5 1}.chatBoxWrapper{display:flex;flex-direction:column;justify-content:space-between;position:relative}.chatBoxTop{height:100%;overflow-y:scroll;padding-right:10px}.chatBoxBottom{margin-top:5px;display:flex;align-items:center;justify-content:space-between}.chatMessageInput{width:80%;height:90px;padding:10px}.chatSubmitButton{width:70px;height:40px;border:none;border-radius:5px;cursor:pointer;background-color:teal;color:#fff}.chatOnline{flex:3 1}.chatBoxWrapper,.chatMenuWrapper,.chatOnlineWrapper{padding:10px;height:100%}.noConversationText{position:absolute;top:10%;font-size:50px;color:#e0dcdc;cursor:default}@media screen and (max-width:768px){.chatMenu{flex:1 1}.chatMenuInput{display:none}.chatBox{flex:10 1}.chatOnline{flex:1px 1}}.conversation{display:flex;align-items:center;padding:10px;cursor:pointer;margin-top:20px}.conversation:hover{background-color:#f5f3f3}.conversationImg{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:20px}.conversationName{font-weight:500}@media screen and (max-width:768px){.conversationName{display:none}}.message{flex-direction:column;margin-top:20px}.message,.messageTop{display:flex}.messageImg{width:32px;height:32px;border-radius:50%;object-fit:cover;margin-right:10px}.messageText{padding:10px;border-radius:20px;background-color:#b5be71;color:#010101;max-width:300px}.messageBottom{font-size:12px;margin-top:10px}.message.own{align-items:flex-end}.message.own .messageText{background-color:#dbbd45;color:#000}.topbarImg{width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;padding:0 .5em}.chatOnlineFriend{display:flex;align-items:center;font-weight:500;cursor:pointer;margin-top:10px}.chatOnlineImgContainer{position:relative;margin-right:10px}.chatOnlineImg{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #fff}.chatOnlineBadge{width:10px;height:10px;border-radius:50%;background-color:#32cd32;position:absolute;top:2px;right:2px}@media screen and (max-width:768px){.chatOnlineName{display:none}}