.sidebar-container{background-color:#fff;height:100vh;overflow-y:auto;padding:10px 20px;position:fixed;top:0;transform:translateX(250px);transition:.3s;width:250px;z-index:20}.sidebar-container.open{transform:translateX(0)}@media (min-width:992px){.sidebar-container{transform:translateX(0)}}.logo .title{color:var(--main-color);font-size:26px;padding:0 15px 50px;text-align:center}.menu{margin-bottom:40px}.menu-item,.page-item{align-items:center;color:var(--ccc-color);display:flex;gap:15px;margin-bottom:20px}.menu-item:hover,.page-item:hover{color:var(--main-color)}.menu-item span,.page-item span{font-size:14px}.pages .pages-header{color:var(--ccc-color);font-size:16px;font-weight:500;margin-bottom:25px}.page-item img{border-radius:10px;height:35px;object-fit:cover;width:35px}.homeside-container{background-color:#fff;display:none;height:100%;left:0;position:fixed;top:60px;width:300px;z-index:11}@media (min-width:992px){.homeside-container{display:block}}.homeside-container .search{background-color:#fff;border:1px solid var(--eee-color);display:flex;gap:5px;justify-content:space-between;margin-bottom:30px;padding:5px 10px;width:100%}.homeside-container .search input{background-color:inherit;border:none;outline:none;width:100%}.homeside-container .search input:focus{border:none;outline:none}.friends{padding:20px}.friends .friends-header{color:var(--ccc-color);display:block;font-size:16px;font-weight:500;margin-bottom:25px}.friend-item-container{display:block;width:100%}.friend-item{align-items:center;color:var(--ccc-color);display:flex;justify-content:space-between;margin-bottom:15px;position:relative;transition:.3s}.friend-item:hover{transform:translateX(2px)}.friend-item .friend{align-items:center;color:#000;display:flex;font-size:14px;gap:15px}.friend-item .friend span{display:block}.friend-item .friend img{border-radius:50%;height:30px;object-fit:cover;width:30px}.friend-item .state{align-items:center;border-radius:5px;color:var(--ccc-color);display:flex;font-size:12px;padding:0 3px;text-align:center}.friend-item .active-user{background-color:green;border-radius:50%;height:10px;width:10px}.home{background-color:#f5f5f5;min-height:calc(100vh - 65px);padding:10px 0;position:relative;width:100%}@media (min-width:992px){.home{padding-right:250px}}.main{padding-left:10px}@media (min-width:992px){.main{padding-left:300px}}.stories{margin-bottom:20px;padding-right:20px;padding-top:20px}.stories-list{display:flex;gap:10px}.posts-header,.stories-header{margin-bottom:15px}.story{border-radius:10px;height:140px;overflow:hidden;position:relative;width:100px}.story .story-image{height:100%;width:100%}.story .story-image img{height:100%;object-fit:cover;transition:.3s;width:100%}.story .story-image img:hover{transform:scale(1.1)}.story .user{align-items:center;bottom:3px;display:flex;gap:5px;left:50%;position:absolute;text-align:center;transform:translateX(-50%);width:100%;z-index:10}.story .user img{border-radius:50%;height:25px;object-fit:cover;width:25px}.story .user span{color:#fff;display:block;font-size:9px}.posts{margin-bottom:20px;padding-right:20px;padding-top:20px}.news-list{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr;padding-left:15px}@media (min-width:772px){.news-list{grid-template-columns:1fr 1fr}}.news{background-color:#fff;border-radius:10px;padding:10px}.news:hover .cover img{transform:scale(1.1)}.news .cover{border-radius:10px;height:300px;margin-bottom:15px;overflow:hidden;width:100%}.news .cover img{height:100%;object-fit:cover;transition:.3s;width:100%}.news .info{gap:10px;justify-content:space-between;margin-bottom:15px}.news .info,.news .info .user{align-items:center;display:flex}.news .info .user{gap:15px}.news .info .user img{border-radius:50%;height:40px;object-fit:cover;width:40px}.news .info .stats{align-items:center;display:flex;gap:20px}.news .info .stats .comments,.news .info .stats .likes{align-items:center;display:flex;gap:5px}.news .info .stats .comments span,.news .info .stats .likes span{font-weight:700}.news .info .stats .icon{color:var(--ccc-color);display:flex;justify-content:center}.news .info .stats .icon:hover{color:#606060}.news .hashtags{color:#3e54d0}.liked{color:red!important}.chatbox{background-color:#fff;bottom:0;display:flex;flex-direction:column;height:350px;left:315px;padding:10px;position:fixed;width:300px;z-index:400}@media (max-width:992px){.chatbox{display:none}}.user-info{align-items:center;border-bottom:1px solid var(--eee-color);display:flex;gap:10px;justify-content:space-between;padding-bottom:5px;width:100%}.user-info .user-section{gap:5px}.user-info .user-section,.user-info .user-section .image{align-items:center;display:flex}.user-info .user-section img{border-radius:50%;height:35px;object-fit:cover;width:35px}.user-info .user-data{display:flex;flex-direction:column}.user-info .user-data .name{font-size:12px;font-weight:700}.user-info .user-data .last-seen{font-size:10px}.user-info .user-data .last-seen-online{color:#00a200;font-size:10px}.user-info .actions{display:flex;gap:5px}.user-info .actions button{color:var(--main-color);font-size:10px}.chat-box{background-color:#fff;flex:1 1;width:100%}.message-box{align-items:center;border:1px solid #eee;border-radius:10px;display:flex;gap:3px;padding:3px}.message-box button{color:var(--main-color)}.message-box input{border:none;flex:1 1;font-size:12px;outline:none}.overlay{background:#00000080;height:100%;left:0;position:fixed;top:0;width:100%;z-index:19}.topbar-container{align-items:center;background-color:#fff;border-bottom:2px solid #eee;display:flex;gap:20px;height:65px;justify-content:space-between;padding:0 10px;position:-webkit-sticky;position:sticky;top:0;z-index:12}@media (min-width:992px){.topbar-container{padding-right:260px}}.topbar-end-side,.topbar-start-side{align-items:center;display:flex;gap:10px}.topbar-start-side .title{color:var(--main-color)}@media (min-width:992px){.topbar-start-side .title{display:none}}.topbar-end-side .add-person,.topbar-end-side .message,.topbar-end-side .notification,.topbar-end-side .profile-toggle,.topbar-start-side .sidebar-toggle{background:none;border:none;color:var(--ccc-color);cursor:pointer;position:relative}.topbar-end-side :first-child.active:after{background-color:var(--main-color);border-radius:50%;content:"";height:6px;position:absolute;right:0;top:0;width:6px}.topbar-end-side .add-person.open,.topbar-end-side .add-person:hover,.topbar-end-side .message.open,.topbar-end-side .message:hover,.topbar-end-side .notification.open,.topbar-end-side .notification:hover,.topbar-end-side .profile-toggle:hover,.topbar-start-side .sidebar-toggle:hover{color:var(--main-color)}@media (min-width:992px){.topbar-start-side .sidebar-toggle{display:none}}.topbar-start-side .search{background-color:#f5f5f5;border:1px solid var(--eee-color);border-radius:10px;display:none;gap:5px;justify-content:space-between;padding:5px 10px}@media (min-width:992px){.topbar-start-side .search{display:flex}}.topbar-start-side .search input{background-color:inherit;border:none;outline:none;width:250px}.topbar-start-side .search input:focus{border:none;outline:none}.topbar-end-side .profile{align-items:center;display:flex;position:relative}.topbar-end-side .profile .profile-menu{background-color:#fff;border-radius:10px;box-shadow:0 12px 28px 0 #0003,0 2px 4px 0 #0000001a,inset 0 0 0 1px #ffffff80;display:none;left:-10px;padding:10px 0;position:absolute;top:45px;width:250px}.topbar-end-side .profile .profile-menu.active{display:block}.topbar-end-side .profile .profile-menu li{align-items:center;color:var(--ccc-color);display:flex;justify-content:space-between;padding:7px 15px}.topbar-end-side .profile .profile-menu li:hover{background-color:var(--main-color);color:#fff}.topbar-end-side .profile .profile-menu li.logout{color:red}.topbar-end-side .profile img{border-radius:50%;height:30px;object-fit:cover;width:30px}.topbar-action{position:relative}@media (max-width:552px){.topbar-action{position:static}}.topbar-action .menu{align-items:center;background-color:var(--eee-color);border-radius:15px;display:none;height:350px;justify-content:center;position:absolute;top:40px;transform:translateX(90%);width:300px;z-index:21}@media (max-width:552px){.topbar-action .menu{left:0;top:65px;transform:translateX(0);width:100%}}.topbar-action:hover .menu{display:flex}
/*# sourceMappingURL=main.c807c601.css.map*/