*{font-family:Quicksand,sans-serif;margin:0;padding:0}html,body{height:100%}body{background-image:#eeeeee}h1,h2,h3,p,a{color:#0e0e0e}#app{height:100%}.checkAuth{margin:50px;color:#fff}.navBar{width:100%;display:flex;flex-direction:row;background-color:#eee}.navBar .checkBtn{font-size:25px;color:#fff;margin:10px;cursor:pointer;display:none}.navBar .navbarList{display:flex;width:100%;flex-direction:row;list-style-type:none}.navBar .navbarList .computer{width:100%;display:flex;justify-content:space-between}.navBar .navbarList .computer .navbarResponsiveMenu{display:none}.navBar .navbarList .computer .rightSide{display:flex}.navBar .navbarList .computer .rightSide .navbarListItem{float:right;display:flex;flex-direction:row;align-items:center;border-radius:10px;transition:.3s;padding:10px 15px;margin:2px 3px;text-decoration:none}.navBar .navbarList .computer .rightSide .navbarListItem .icon{transition:.3s;color:#414141;font-size:20px}.navBar .navbarList .computer .rightSide .navbarListItem span{transition:.3s;color:#5a5a5a;font-size:15px;margin-left:10px;font-weight:600}.navBar .navbarList .computer .rightSide .navbarListItem:hover>span,.navBar .navbarList .computer .rightSide :hover>.icon{cursor:pointer;background-color:#252525;color:#757575}.navBar .navbarList .computer .rightSide .utilIcon{color:#5a5a5a!important;align-self:center;margin-right:20px;position:relative;height:24px;width:24px;transition:.3s}.navBar .navbarList .computer .rightSide .utilIcon .badge{height:5px;width:5px;padding:5px;background-color:#ce2626;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;color:#fff;position:absolute;right:-2px;top:-2px}.navBar .navbarList .computer .rightSide .utilIcon:hover{color:#fff!important;cursor:pointer}.navBar .navbarList .computer .leftSide{display:flex}.navBar .navbarList .computer .leftSide .navbarListItem{float:right;display:flex;flex-direction:row;align-items:center;border-radius:10px;transition:.3s;padding:10px 15px;margin:2px 3px;text-decoration:none}.navBar .navbarList .computer .leftSide .navbarListItem .icon{transition:.3s;color:#414141;font-size:20px}.navBar .navbarList .computer .leftSide .navbarListItem span{transition:.3s;color:#5a5a5a;font-size:15px;margin-left:10px;font-weight:600}.navBar .navbarList .computer .leftSide .navbarListItem .icon{color:#b22222}.navBar .navbarList .smartphone{display:none}@media screen and (max-width: 945px){.navBar .navbarList .computer .navbarListItem span{display:none}}@media screen and (max-width: 825px){.navBar{background-color:#1e1e1e}.navBar .navbarList .computer{display:none}.navBar .navbarList .smartphone{display:flex}.navBar .navbarList .smartphone .navbarResponsiveMenu{padding:10px 15px;margin:2px 3px;display:flex;border-radius:10px;transition:.3s}.navBar .navbarList .smartphone .navbarResponsiveMenu:hover{cursor:pointer;background-color:#252525;color:#fff}.navBar .navbarList .smartphone .navbarListItem{display:flex;flex-direction:row;align-items:center;border-radius:10px;transition:.3s;padding:10px 15px;margin:2px 3px;text-decoration:none}.navBar .navbarList .smartphone .navbarListItem .icon{transition:.3s;color:#414141;font-size:20px}.navBar .navbarList .smartphone .navbarListItem span{transition:.3s;color:#5a5a5a;font-size:15px;margin-left:10px;font-weight:600}.navBar .navbarList .smartphone .navbarListItem:hover,.navBar .navbarList .smartphone .navbarListItem:hover>span,.navBar .navbarList .smartphone :hover>.icon{cursor:pointer;background-color:#252525;color:#fff}}.loginContainer{display:flex;position:relative;flex-direction:column;align-items:center;top:50px;background-color:#fff4;margin:auto;padding:20px;border-radius:20px;width:30%;box-shadow:5px 5px 17px #00000080;-webkit-box-shadow:5px 5px 17px 0px rgba(0,0,0,.5);-moz-box-shadow:5px 5px 17px 0px rgba(0,0,0,.5)}.loginContainer .loginForm{display:flex;flex-direction:column;align-items:center;min-width:50%;max-width:70%;width:100%}.loginContainer .loginForm .loginTitle{position:relative;align-self:center;text-align:center;margin:20px}.loginContainer .loginForm .loginTextLabel{color:#2a2a2a;margin-bottom:5px;align-self:flex-start}.loginContainer .loginForm .loginTextInput{position:relative;margin-bottom:10px;border-radius:20px;padding:20px;background-color:inherit;border:2px solid #3d3d3d;color:#fff;width:calc(100% - 40px);height:1em;transition:.3s}.loginContainer .loginForm .loginTextInput:focus{outline:none;border:2px solid #1c87eb}.loginContainer .loginForm .loginButtonInput{position:relative;border-radius:20px;margin-top:20px;padding:20px;border:none;color:#fff;background:linear-gradient(95deg,#3391e9,#186bf1);width:100%}.loginContainer .loginForm .error{color:red;margin-top:20px}.loginContainer .loginForm .noAcc{margin-top:10px}@media screen and (max-width: 600px){.col-25,.col-75,input{width:100%;margin-top:0}}.signupContainer{display:flex;position:relative;flex-direction:column;align-items:center;top:50px;background-color:#27272744;margin:auto;padding:20px;border-radius:20px;width:30%;box-shadow:5px 5px 17px #00000080;-webkit-box-shadow:5px 5px 17px 0px rgba(0,0,0,.5);-moz-box-shadow:5px 5px 17px 0px rgba(0,0,0,.5)}.signupContainer .signupForm{display:flex;flex-direction:column;align-items:center;min-width:50%;max-width:70%;width:100%}.signupContainer .signupForm .signupTitle{position:relative;align-self:center;text-align:center;margin:20px}.signupContainer .signupForm .signupTextLabel{color:#b9b9b9;margin-bottom:5px;align-self:flex-start}.signupContainer .signupForm .loginTextInput{position:relative;margin-bottom:10px;border-radius:20px;padding:20px;background-color:inherit;border:2px solid #3d3d3d;color:#fff;width:calc(100% - 40px);height:1em;transition:.3s}.signupContainer .signupForm .loginTextInput:focus{outline:none;border:2px solid #1c87eb}.signupContainer .signupForm .loginButtonInput{position:relative;border-radius:20px;margin-top:20px;padding:20px;border:none;color:#fff;background:linear-gradient(95deg,#3391e9,#186bf1);width:100%}.signupContainer .signupForm .error{color:red;margin-top:20px}.signupContainer .signupForm .success{color:#04aa1a;margin-top:20px}.signupContainer .signupForm .noAcc{margin-top:10px}.home{display:flex;height:100%;flex-direction:column}.home .homePage{display:flex;flex-direction:row;align-items:flex-end;width:100%;height:100%}.home .homePage .leftPage{width:100%;height:100%;border:1px solid green}.home .homePage .centerPage{position:relative;display:flex;margin:auto;width:500px;max-width:90%;min-width:50%;height:100%;flex-direction:column}.home .homePage .centerPage .sendPost{top:20px;display:flex;align-items:center;position:relative}.home .homePage .centerPage .sendPost .input{border-radius:20px;width:100%;padding:15px;border:none;background-color:#f0f0f0;transition:transform .3s;box-shadow:0 0 4px #00000026;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.15);-moz-box-shadow:0px 0px 4px 0px rgba(0,0,0,.15)}.home .homePage .centerPage .sendPost .input:focus{outline:none;transform:scale(1.005)}.home .homePage .centerPage .sendPost .icon{position:absolute;right:20px;transition:all .7s ease-in-out}.home .homePage .centerPage .sendPost .icon2{right:60px}.home .homePage .centerPage .sendPost .vLine{position:absolute;height:20px;width:0;right:50px;border-left:1px solid rgba(105,105,105,.31)}.home .homePage .centerPage .sendPost .icon:hover{cursor:pointer;color:#b22222;transform:rotate(360deg)}.home .homePage .centerPage .postsContainer{position:relative;top:50px}.home .homePage .centerPage .postsContainer .post{width:calc(100% - 20px);border-radius:10px;box-shadow:0 0 2px #000000bf;-webkit-box-shadow:0px 0px 2px 0px rgba(0,0,0,.75);-moz-box-shadow:0px 0px 2px 0px rgba(0,0,0,.75);padding:10px;margin-bottom:10px}.home .homePage .centerPage .postsContainer .post .user{display:flex;align-items:center}.home .homePage .centerPage .postsContainer .post .user .avatar{width:40px;height:40px}.home .homePage .centerPage .postsContainer .post .user .right{display:flex;margin-left:5px;flex-direction:column}.home .homePage .centerPage .postsContainer .post .user .right .timeAgo{font-size:13px}.home .homePage .centerPage .postsContainer .post .user .right .username{font-weight:600}.home .homePage .centerPage .postsContainer .post hr{margin:10px 0}.home .homePage .centerPage .postsContainer .post .opinion{display:flex;align-items:center}.home .homePage .centerPage .postsContainer .post .opinion .likeIcon{transition:.3s}.home .homePage .centerPage .postsContainer .post .opinion .likeIcon:hover{cursor:pointer;color:#838383!important}.home .homePage .centerPage .postsContainer .post .opinion .likedIcon{transition:.3s;color:#0571ed!important}.home .homePage .centerPage .postsContainer .post .opinion .likedIcon:hover{cursor:pointer}.home .homePage .centerPage .postsContainer .post .opinion .commentInput{padding:10px;margin-left:10px;border-radius:20px;border:none;background-color:#f0f0f0;min-width:100px;width:25%;transition:width .3s}.home .homePage .centerPage .postsContainer .post .opinion .commentInput:focus{outline:none;width:40%}.home .homePage .rightPage{width:100%;height:100%;border:1px solid green}.userContainer{width:100%}.userContainer .userInfo{border-radius:20px;position:relative;width:100%;display:flex;align-self:center;align-items:center;padding:10px;transition:.3s}.userContainer .userInfo .information{margin-left:10px}.userContainer .userInfo .information .username{color:#2c2c2c}.userContainer .userInfo .information .bio{color:#8e8e8e}.userContainer .userInfo:hover{cursor:pointer;background-color:#e2e2e2}.searchPage{align-self:center;width:50%;margin:auto;display:flex;justify-content:center;flex-direction:column;position:relative;top:20px;border-radius:20px}.searchPage .searchInput{align-self:center;width:60%;position:relative;padding:15px;margin:10px 0;color:#333;border:none;border-radius:10px;background-color:#f0f0f0;box-shadow:0 0 4px #00000026;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.15);-moz-box-shadow:0px 0px 4px 0px rgba(0,0,0,.15);transition:.3s}.searchPage .searchInput:focus{outline:none}.searchPage .searchUser{position:relative;margin:40px 20px 20px;border-radius:10px}.searchPage .searchUser .user{transition:.7s;padding:10px}.searchPage .searchUser:hover{background-color:#222;cursor:pointer}.onlineStatus{position:relative;border:3px solid #252526;border-radius:50%;top:10px;right:10px;background-color:green}.offlineStatus{width:10px;height:10px;position:relative;border:3px solid #252526;border-radius:50%;top:10px;right:10px;background-color:#6d6d6d}.dndStatus{width:10px;height:10px;position:relative;border:3px solid #252526;border-radius:50%;top:10px;right:10px;background-color:hsl(359,calc(var(--saturation-factor, 1) * 82.6%),59.4%)}.profilePage .profileInfo .top .avatarContainer{width:150px;height:150px;position:relative}.profilePage .profileInfo .top .avatarContainer .avatarInput{z-index:1;width:inherit;position:absolute;width:150px;height:150px;text-indent:-999em}.profilePage .profileInfo .top .avatarContainer .hide{display:flex;top:0;left:0;background-color:#000000bf;transition:.7s;position:absolute;height:100%;width:100%;border-radius:50%;align-items:center}.profilePage .profileInfo .top .avatarContainer .hide p{font-size:12px;font-weight:700;text-align:center}.profilePage .profileInfo .top .avatarContainer .avatarInput:hover{cursor:pointer}.profilePage .profileInfo .top .avatarContainer .avatar{height:150px;width:150px}.profilePage .profileInfo .showEmail{color:#00a2ff;text-decoration:underline;cursor:pointer}.profile{width:75%;height:20%;margin:auto;border-radius:10px;background-color:#1f1f1f;padding:20px;display:flex;flex-direction:column}.profile .topContainer{width:100%;display:flex;align-items:center;justify-content:space-between}.profile .topContainer .baseContainer{display:flex;height:100px}.profile .topContainer .baseContainer .avatarContainer{width:100px;height:100px;position:relative}.profile .topContainer .baseContainer .avatarContainer .avatarInput{z-index:1;width:inherit;position:absolute;width:100px;height:100px;text-indent:-999em}.profile .topContainer .baseContainer .avatarContainer .hide{display:flex;top:0;left:0;background-color:#000000bf;transition:.7s;position:absolute;height:100%;border-radius:50%;align-items:center}.profile .topContainer .baseContainer .avatarContainer .hide p{font-size:12px;font-weight:700;text-align:center}.profile .topContainer .baseContainer .avatarContainer .avatarInput:hover{cursor:pointer}.profile .topContainer .baseContainer .testImg{background-color:green;width:100px;height:100px;border-radius:50%}.profile .topContainer .baseContainer .usernameContainer{margin-left:30px;margin-top:auto;margin-bottom:auto}.profile .topContainer .baseContainer .usernameContainer .username{font-size:20px;font-weight:800}.profile .topContainer .baseContainer .usernameContainer .userIdContainer{display:flex}.profile .topContainer .baseContainer .usernameContainer .userIdContainer .copyId{text-decoration:underline;text-transform:uppercase;cursor:pointer;display:flex}.profile .topContainer .baseContainer .usernameContainer .userIdContainer .helpIconUserId{color:#7d7d7d;margin:0 0 0 5px;align-self:center}.profile .topContainer .baseContainer .usernameContainer .copyMessage{position:absolute}.profile .topContainer .followersFollowing{float:right;width:200px;display:flex;justify-content:space-evenly}.profile .topContainer .followersFollowing .text{padding:10px;background-color:#333;border-radius:10px}.profile .topContainer .followersFollowing .text:hover{cursor:pointer}.profile .editableItem{position:relative;top:10px;height:50px}.profile .editableItem .itemTitle{font-variant:small-caps}.profile .editableItem .showEmail{color:#00a2ff;text-decoration:underline;cursor:pointer}.profile .editableItem p{position:relative;left:20px}.profile .editableItem .editBtn{background-color:#797979;position:absolute;top:50%;right:20px;transform:translateY(-50%);border:none;border-radius:10px;width:50px;height:30px;color:#fff;float:right;align-self:center;cursor:pointer;transition:all .3s}.profile .editableItem .editBtn:hover{background-color:#5f5d5d}.popupMenuContainer{position:absolute;left:0;top:0;width:100%;height:100%;backdrop-filter:blur(5px);background-color:#0003}.popupMenuContainer .popupMenu{position:absolute;left:0;right:0;margin:auto;bottom:50%;background-color:#1e1e1e;width:600px;border:10px solid #222;border-radius:10px;padding:20px;display:flex;flex-direction:column}.popupMenuContainer .popupMenu .closeButton{position:absolute;color:#fff;top:0;right:0;cursor:pointer}.popupMenuContainer .popupMenu .informations{position:relative;top:20px}.popupMenuContainer .popupMenu .inputContainer{margin-bottom:10px}.popupMenuContainer .popupMenu .inputContainer .infoTitle{color:#fff;margin-bottom:5px;font-variant:small-caps}.popupMenuContainer .popupMenu .inputContainer .infoInput{width:40%;border:none;border-radius:10px;height:20px;padding:10px}.popupMenuContainer .popupMenu .btnContainer{display:flex;justify-content:flex-end}.popupMenuContainer .popupMenu .btnContainer .popupBtn{float:right;padding:7px;border:none;margin-top:5px;height:40px;width:100px;border-radius:10px;transition:all .3s;background-color:#797979;color:#fff;cursor:pointer;margin-left:5px;z-index:1}.popupMenuContainer .popupMenu .btnContainer .popupBtn:hover{background-color:#5f5d5d}.requests{position:relative;top:20px;width:75%;height:20%;margin:auto;border-radius:10px;background-color:#1f1f1f;padding:20px;display:flex;flex-direction:column}*{margin:0;padding:0}.chatContainer{display:flex;justify-content:space-around;height:calc(100vh - 44px)}.chatContainer .menu{flex:1.5;border-right:1px solid white}.chatContainer .menu .menuWrapper{display:flex;flex-direction:column;top:0;height:100%}.chatContainer .menu .menuWrapper .searchInput{display:flex;align-self:center;width:90%;padding:10px 0;border:none;border-bottom:1px solid gray;background:none;color:#fff}.chatContainer .menu .menuWrapper .searchInput::placeholder{color:#fff}.chatContainer .menu .menuWrapper .searchInput:focus{outline:none}.chatContainer .box{flex:6;width:100%}.chatContainer .box .boxWrapper{display:flex;flex-direction:column}.chatContainer .box .boxWrapper .chatBoxTop{height:100%;overflow-y:scroll;scroll-behavior:auto}.chatContainer .box .boxWrapper .chatBoxTop .noMessages{display:flex;position:relative;top:20px;padding:20px;justify-content:center;margin:auto;width:50%;background-color:#242424;border-radius:10px}.chatContainer .box .boxWrapper .chatBoxTop .noMessages .text{color:#888;text-align:center}.chatContainer .box .boxWrapper .chatBoxBottom{position:static;display:flex;align-items:center;justify-content:space-between}.chatContainer .box .boxWrapper .chatBoxBottom .chatInputContainer{position:relative;display:flex;width:100%;align-items:center}.chatContainer .box .boxWrapper .chatBoxBottom .chatInputContainer .chatInput{width:100%;font-size:15px;padding:15px;resize:none;background:none;color:#4b4b4b;border-radius:15px;border:2px solid #bdbdbd;margin:5px;transition:.3s}.chatContainer .box .boxWrapper .chatBoxBottom .chatInputContainer .chatInput:focus{outline:none;border:2px solid #06a506}.chatContainer .box .boxWrapper .chatBoxBottom .chatInputContainer .chatInputEmojiSelector{position:absolute;right:1.5%;color:#959595!important;transition:.3s}.chatContainer .box .boxWrapper .chatBoxBottom .chatInputContainer .chatInputEmojiSelector:hover{color:#cece00!important;transform:scale(1.2) rotate(-30deg);cursor:pointer}.chatContainer .box .boxWrapper .chatBoxBottom .chatSubmit{width:80px;height:50px;border:none;border-radius:10px;transition:.3s;margin-bottom:5px}.chatContainer .box .boxWrapper .noConv{position:relative;text-align:center;color:#888;top:20px;font-size:40px}.chatContainer .online{flex:1.5;width:20%}.chatContainer .menuWrapper,.chatContainer .boxWrapper,.chatContainer .onlineWrapper{height:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#afafaf}::-webkit-scrollbar-thumb{background:#757575}::-webkit-scrollbar-thumb:hover{background:#555}.conversation{display:flex;align-items:center;padding:10px;transition:.3s;cursor:pointer;margin:5px;border-radius:20px}.conversation .img{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:15px}.conversation .name{color:#363636}.conversation:hover{background-color:#ddd}.message{display:flex;flex-direction:column;align-items:flex-start;margin:0 15px 15px}.message .top{display:flex;margin-top:10px}.message .top .img{width:32px;height:32px;border-radius:50%;object-fit:cover}.message .top p{margin-left:10px;align-self:center}.message .top .time{font-size:12px;color:gray}.message .bottom .text{padding:15px;border-radius:10px;color:#fff;background-image:linear-gradient(130deg,#D62121,#C72C2C);margin-top:5px}.own{align-items:flex-end}.own .bottom .text{background-image:linear-gradient(130deg,#7e7e7e,#727272);font-weight:500}.adminPage{display:flex;width:100%;height:calc(100% - 43.98px)}.adminPage .leftBar{height:100%;width:15%;border-right:1px solid #bebebe;display:flex;flex-direction:column}.adminPage .leftBar .selectItem{padding:5px;margin-left:15px;display:flex;transition:.3s;border-radius:5px 0 0 5px}.adminPage .leftBar .selectItem .icon{color:#b22222}.adminPage .leftBar .selectItem span{margin-left:15px;font-weight:600;color:gray}.adminPage .leftBar .selectItem:hover{cursor:pointer;background-color:#b2222236}.adminPage .leftBar .selectItem:first-child{margin-top:5px}.adminPage .middlePage{width:100%}.adminPage .middlePage .searchInput{margin:15px;padding:10px;border-radius:10px;border:2px solid grey}.adminPage .middlePage .userList{width:75%}.widget{display:flex;justify-content:space-between;flex:1;padding:10px;-webkit-box-shadow:2px 4px 10px 1px rgba(0,0,0,.47);box-shadow:2px 4px 10px 1px #c9c9c978;border-radius:10px;height:100px}.widget .left,.widget .right{display:flex;flex-direction:column;justify-content:space-between}.widget .left .title,.widget .right .title{font-weight:700;font-size:14px;color:#a0a0a0}.widget .left .counter,.widget .right .counter{font-size:28px;font-weight:300}.widget .left .link,.widget .right .link{width:max-content;font-size:12px;border-bottom:1px solid gray}.widget .left .percentage,.widget .right .percentage{display:flex;align-items:center;font-size:14px}.widget .left .percentage.positive,.widget .right .percentage.positive{color:green}.widget .left .percentage.negative,.widget .right .percentage.negative{color:red}.widget .left .icon,.widget .right .icon{font-size:18px;padding:5px;border-radius:5px;align-self:flex-end}.profilePage{position:relative;margin:auto;width:75%;height:100vh}.profilePage .profileInfo{position:relative;background-color:#f0f0f0;padding:20px;border-radius:20px;top:20px}.profilePage .profileInfo .top{display:flex;flex-direction:row;align-items:center}.profilePage .profileInfo .top .avatar{height:150px;width:150px}.profilePage .profileInfo .top .topRight{display:flex;flex-direction:column;margin-left:20px}.profilePage .profileInfo .top .topRight .followBtn{position:absolute;right:20px;padding:5px;background-color:#b22222;border:none;color:#fff;border-radius:10px}.profilePage .profileInfo .top .topRight .followBtn:hover{cursor:pointer}.profilePage .profileInfo .top .topRight .username{font-weight:800;font-size:30px}.profilePage .profileInfo .bio{display:flex;flex-direction:column}.profilePage .profileInfo .bio .bioTitle{font-weight:800;font-size:25px;color:#929292;font-variant:small-caps}