body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.rigthbar{flex:2.5 1}.rigthbar .rigthbar__wrapper{padding:20px 20px 0 0}.rigthbar .rigthbar__wrapper .birthday__container{align-items:center;display:flex}.rigthbar .rigthbar__wrapper .birthday__container .birthday__img{height:40px;margin-right:10px;width:40px}.rigthbar .rigthbar__wrapper .birthday__container .birthday__text{font-size:15px;font-weight:300}.rigthbar .rigthbar__wrapper .rigth__ad{border-radius:10px;margin:30px 0;width:100%}.rigthbar .rigthbar__wrapper .rigth__ad .rigth__title{color:#3d3c3c;margin-bottom:10px}.rigth__friend{align-items:center;display:flex;margin-bottom:15px}.rigth__friend .rigth__img-profileContainer{align-items:center;display:flex;margin-right:10px;position:relative}.rigth__friend .rigth__img-profileContainer .rigth__profileImg{border-radius:50%;height:40px;object-fit:cover;width:40px}.rigth__friend .rigth__img-profileContainer .rigth__online{background-color:#2ac92a;border:2px solid #fff;border-radius:50%;height:12px;left:29px;position:absolute;top:-2px;width:12px}.rigth__friend .rigth__img-profileContainer .rigth__username{font-weight:500;margin-left:20px}.sidemenu{flex:2 1;height:calc(100vh - 50px);overflow-y:scroll;position:-webkit-sticky;position:sticky;top:50px}.sidemenu .sidemenu__wrapper{padding:20px}.sidemenu .sidemenu__wrapper .sidemenu__list{list-style:none;margin:0;padding:0}.sidemenu .sidemenu__wrapper .sidemenu__list .sidemenu__list-item{align-items:center;cursor:pointer;display:flex;font-size:18px;font-weight:500;margin-bottom:20px;margin-right:10px;text-align:center}.sidemenu .sidemenu__wrapper .sidemenu__list .sidemenu__list-item .sidemenu__list-icon{margin-right:10px}.sidemenu .sidemenu__wrapper .sidemenu__list .sidemenu__list-item a{color:#575555;text-decoration:none}.sidemenu .sidemenu__wrapper .sidemenu__list a:hover{color:#1877f2}.sidemenu .sidemenu__wrapper .sidemenu__hr{margin:20px 0}.sidemenu .sidemenu__wrapper .sidemenu__userList{list-style:none;margin:0;padding:0}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background-color:#f1f1f1}::-webkit-scrollbar-thumb{background-color:#dbd9d9}.sidebar__friend{align-items:center;display:flex;margin-bottom:15px}.sidebar__friend .sidebar__Fr-link{align-items:center;color:#000;display:flex;text-decoration:none}.sidebar__friend .sidebar__Fr-link .sidebar__frImg{border-radius:50%;height:32px;object-fit:cover;width:32px}.sidebar__friend .sidebar__Fr-link .sidebar__frName{margin-left:15px}.timeline{flex:5.5 1}.timeline .timeline__wrapper{margin-left:50px;padding:20px}.post{border-radius:10px;box-shadow:0 0 16px -8px rgba(0,0,0,.68);margin:30px 0;width:90%}.post .post__wrapper{padding:20px}.post .post__wrapper .post__top{align-items:center;display:flex;justify-content:space-between}.post .post__wrapper .post__top .post__top-left{align-items:center;display:flex}.post .post__wrapper .post__top .post__top-left .post__profile-img{border-radius:50%;height:32px;object-fit:cover;width:32px}.post .post__wrapper .post__top .post__top-left .post__username{font-size:15px;font-weight:500;margin:0 10px}.post .post__wrapper .post__top .post__top-left .post__date{color:#686767;font-size:12px}.post .post__wrapper .post__center{margin:20px 0}.post .post__wrapper .post__center .post__img{margin-top:20px;max-height:500px;object-fit:contain;width:100%}.post .post__wrapper .post__bottom{align-items:center;display:flex;justify-content:space-between}.post .post__wrapper .post__bottom .post__bottom-left{align-items:center;display:flex}.post .post__wrapper .post__bottom .post__bottom-left .like__icon{cursor:pointer;height:24px;margin-right:5px;width:24px}.post .post__wrapper .post__bottom .post__bottom-left .post__like-counter{color:#5c5b5b;font-size:15px}.post .post__wrapper .post__bottom .post__bottom-rigth .post__comment-text{border-bottom:1px dashed gray;color:#5c5b5b;cursor:pointer;font-size:15px}.share{border-radius:10px;box-shadow:0 0 16px -8px rgba(0,0,0,.68);height:110px;margin:20px;padding:20px;width:90%}.share .share__wrapper{padding:10px}.share .share__wrapper .share__top{align-items:center;display:flex}.share .share__wrapper .share__top .share__profileImg{border-radius:50%;height:50px;margin-right:10px;object-fit:cover;width:50px}.share .share__wrapper .share__top .share__input{border:none;width:80%}.share .share__wrapper .share__top .share__input:focus{outline:none}.share .share__wrapper .share__top .share_button{background-color:green;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:18px;font-weight:500;margin-right:20px;padding:7px;width:150px}.share .share__wrapper .share_hr{margin:20px 20px 0}.home__wrapper,.navbar{display:flex;width:100%}.navbar{align-items:center;background-color:#1877f2;height:50px;position:-webkit-sticky;position:sticky;top:0;z-index:999}.navbar .nav__logo-left{flex:2 1}.navbar .nav__logo-left .nav__logo-link{text-align:center;text-decoration:none}.navbar .nav__logo-left .nav__logo-link .nav__logo{color:#fff;cursor:pointer;font-size:25px;font-weight:800;letter-spacing:2px}.navbar .nav__logo-left .nav__logo-link .nav__logo-icon{font-size:30px}.navbar .nav__center{flex:5 1}.navbar .nav__center .nav__search{align-items:center;background-color:#fff;border-radius:30px;display:flex;height:30px;width:80%}.navbar .nav__center .nav__search .nav__search-icon{font-size:20px;width:10%}.navbar .nav__center .nav__search .nav__search-input{border:none;padding:0;width:70%}.navbar .nav__center .nav__search .nav__search-input:focus{outline:none}.navbar .nav__right{align-items:center;color:#fff;display:flex;flex:4 1;justify-content:space-around}.navbar .nav__right .nav__right-links{align-items:flex-end;display:flex}.navbar .nav__right .nav__right-links .nav__right-link{font-size:18px;font-weight:500;margin-right:20px;position:relative}.navbar .nav__right .nav__right-links .nav__right-link .nav__right-icon{font-size:22px;font-weight:500}.navbar .nav__right .nav__right-links .nav__right-link .nav__right-bange{align-items:center;background-color:red;border-radius:50%;color:#fff;display:flex;font-size:12px;height:15px;justify-content:center;position:absolute;right:-6px;top:-8px;width:15px}.navbar .nav__right .nav__right-links .nav__right-link a{color:#fff;text-decoration:none}.navbar .nav__right .nav__right-links .nav__right-link:first-child{margin-left:300px}.navbar .nav__end{flex:1 1}.navbar .nav__end .nav__end-img{border-radius:50%;cursor:pointer;height:32px;object-fit:cover;width:32px}.friend{display:flex}.friend .friend__container{flex:5 1}.friend .friend__container .friend__block .friend__hr{border-bottom:1px solid red;margin-bottom:50px;width:100%}.friend .friend__container .friend__block .friend__block-head{color:#5f9ea0}.friend .friend__container .friend__block .friend__block-online{align-items:center;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;width:100%}.friend .friend__container .friend__block .friend__block-online .user_online{align-items:center;display:flex;height:80px;justify-content:space-between;margin-bottom:15px;position:relative}.friend .friend__container .friend__block .friend__block-online .user_online .user_online-img{border-radius:50%;height:70px;object-fit:cover;width:70px}.friend .friend__container .friend__block .friend__block-online .user_online .user_online-bange{background-color:#2ac92a;border:2px solid #fff;border-radius:50%;height:12px;left:50px;position:absolute;top:.5px;width:12px}.friend .friend__container .friend__block .friend__block-online .user_online .user_online-name{font-size:18px;font-weight:400;margin-left:20px;width:200px}.friend .friend__container .friend__block .friend__block-online .user_online .user_online-btn{background-color:#1877f2;border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:16px;padding:10px}.friend .friend__reccommend{flex:2 1}.reccommend{height:100%}.reccommend .reccommend-head{color:gray}.reccommend .reccommend__music .reccommend__music-block .player{margin-bottom:10px}.reccommend .reccommend_ad{margin-top:40px}.reccommend .reccommend_ad .reccommend__ad-img{cursor:pointer;width:300px}.messenger{display:flex;height:calc(100vh - 70px)}.messenger .chat__menu{flex:3.5 1}.messenger .chat__menu .chat__menu-wrapper{height:100%;padding:10px}.messenger .chat__menu .chat__menu-wrapper .chat__menu-input{border:none;border-bottom:1px solid gray;padding:10px 0;width:90%}.messenger .conversation{align-items:center;cursor:pointer;display:flex;margin-top:20px;padding:10px}.messenger .conversation .conversation__img{border-radius:50%;height:40px;margin-right:20px;object-fit:cover;width:40px}.messenger .conversation .conversation__newMsg{align-items:center;background-color:red;border-radius:50%;color:#fff;display:flex;font-size:18px;font-weight:500;height:25px;justify-content:center;margin-left:20px;width:25px}.messenger .conversation:hover{background-color:#f5f3f3}.messenger .chat__box{flex:5.5 1}.messenger .chat__box .chat__box-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:10px;position:relative}.messenger .chat__box .chat__box-wrapper .error__block{background-color:#faf9f4;border-radius:10px;color:#444343;font-size:20px;font-weight:700;margin:auto auto 20px;width:60%}.messenger .chat__box .chat__box-wrapper .error__block .error__block-close{color:gray;cursor:pointer;font-size:20px;margin-left:400px}.messenger .chat__box .chat__box-wrapper .error__block .error__block-ham{font-size:18px;padding-left:20px}.messenger .chat__box .chat__box-wrapper .error__block-hidden{display:none!important}.messenger .chat__box .chat__box-wrapper .chat__box-top{height:100%;overflow-y:scroll;padding-right:10px}.messenger .chat__box .chat__box-wrapper .chat__box-bottom{align-items:center;display:flex;justify-content:space-between;margin-top:5px}.messenger .chat__box .chat__box-wrapper .chat__box-bottom .chat__message-input{border-radius:5px;height:90px;padding:10px;width:80%}.messenger .chat__box .chat__box-wrapper .chat__box-bottom .chat__submit-btn{background-color:teal;border:none;border-radius:5px;color:#fff;cursor:pointer;height:40px;margin-right:30px;width:70px}.messenger .chat__box .chat__box-wrapper .chat__noConversation{color:#e0dcdc;cursor:default;font-size:50px;position:absolute;right:15%;text-align:center;top:10%}.messenger .chat__online{flex:3 1}.messenger .chat__online .chat__online-wrapper{height:100%;padding:10px}@media screen and (max-width:768px){.chatMenu{flex:1 1}.chatMenuInput{display:none}.chatBox{flex:10 1}.chatOnline{flex:1px 1}}.message{flex-direction:column;margin-top:20px}.message,.message .message_top{display:flex}.message .message_top .message_img{border-radius:50%;height:32px;margin-right:10px;object-fit:cover;width:32px}.message .message_top .message__text{background-color:#1877f2;border-radius:20px;color:#fff;font-size:16px;font-weight:300;max-width:300px;padding:10px}.message .message__bottom{color:#525151;font-size:12px;margin-top:10px;text-align:start}.message_own{align-items:flex-end;display:flex;flex-direction:column;margin-top:20px}.message_own .message_top{display:flex}.message_own .message_top .message_img{border-radius:50%;height:32px;margin-right:10px;object-fit:cover;width:32px}.message_own .message_top .message__text{background-color:#f5f3f3;border-radius:20px;color:#000;font-size:16px;font-weight:300;max-width:300px;padding:10px}.message_own .message__bottom{color:#525151;font-size:12px;margin-top:10px;text-align:start}.video{display:flex;flex:7 1;height:500px}.video .video__wrapper{flex:5 1!important}.video .video__wrapper .video__head{color:#747272}.video .video__wrapper .video__container{display:flex;flex-wrap:wrap;gap:15px;margin-left:150px;margin-top:30px}.video .video__wrapper .video__container .video__item{border:1px solid #d3d3d3;border-radius:10px;display:flex;flex-direction:column;padding:10px;width:310px}.video .video__wrapper .video__container .video__item .video__item-author{font-weight:500;margin-top:10px}.video .video__wrapper .video__container .video__item .video__item-author span{color:gray;font-size:12px}.music .music__wrapper .music__head{color:#636262}.music .music__wrapper .music__hr{border-bottom:1px solid red;margin:auto;width:150px}.music .music__wrapper .music__container{display:flex;margin:30px auto auto;width:1300px}.music .music__wrapper .music__container .music__big-prewiev{margin-right:10px;position:relative}.music .music__wrapper .music__container .music__big-prewiev .music__big-prewievImg{cursor:pointer;height:600px;margin-right:10px;object-fit:cover;opacity:.7;width:600px}.music .music__wrapper .music__container .music__big-prewiev .music__big-name{color:#fff;cursor:pointer;font-size:30px;font-weight:700;position:absolute;right:240px;top:300px}.music .music__wrapper .music__container .music__big-prewiev .music__big-name:hover{text-decoration:underline}.music .music__wrapper .music__container .music__small-prewiev{display:flex;flex-wrap:wrap;width:650px}.music .music__wrapper .music__container .music__small-prewiev .music__small-container{position:relative;width:200px}.music .music__wrapper .music__container .music__small-prewiev .music__small-container .music__small-img{cursor:pointer;height:200px;opacity:.7;width:200px}.music .music__wrapper .music__container .music__small-prewiev .music__small-container .music__small-name{color:#000;cursor:pointer;font-weight:800;opacity:1;position:absolute;right:80px;top:90px}.music .music__wrapper .music__container .music__small-prewiev .music__small-container .music__small-name .music__small-Bg{background-color:#fff;border-radius:5px;opacity:.7;padding:5px}.music .music__wrapper .music__container .music__small-prewiev .music__small-container .music__small-name:hover{text-decoration:underline}.musicgenre .musicgenre__nead{color:gray}.musicgenre .musicgenre__img_container{display:flex;flex-direction:row;gap:10px;margin:auto;max-width:1400px}.musicgenre .musicgenre__img_container .musicgenre__imgs .musicgenre__img{height:150px;width:150px}.musicgenre .musicgenre_container .musicgenre__hr{border-bottom:1px solid red;margin:auto;width:150px}.myprofile{display:flex;flex:6 1}.myprofile .myprofile__container{margin-left:50px;padding:20px;width:60%}.myprofile .myprofile__container .profile__head .profile__cover{height:320px;position:relative}.myprofile .myprofile__container .profile__head .profile__cover .profile__cover-img{height:250px;object-fit:cover;width:100%}.myprofile .myprofile__container .profile__head .profile__cover .profile__cover-userImg{border:3px solid #fff;border-radius:50%;height:150px;left:0;margin:auto;object-fit:cover;position:absolute;right:0;top:150px;width:150px}.myprofile .myprofile__container .myprofile__share{margin-left:5%;width:80%}.notification{flex:2 1}.notification .notif__head{color:gray}.notification .notification__msg{text-align:center}.notification .notification__msg a{color:#000}.notification .notification__msg .notification__msg-icon{color:green;font-size:18px}.notification .notification__about{margin-bottom:20px}.notification .notification__closeFriend{text-align:center}.profileInfo{margin-bottom:30px}.profileInfo .profileInfo__nead{color:gray}.profileInfo a{text-decoration:none}.profileInfo .profileInfo_btn{background-color:#1877f2;border:none;border-radius:5px;color:#fff;cursor:pointer;margin:auto;padding:5px 10px;width:150px}.closeFriend .closeFriend__head{color:gray}.closeFriend .closeFriend__container{align-items:center;display:flex;margin-bottom:15px}.closeFriend .closeFriend__container a{align-items:center;color:#000;display:flex;text-decoration:none}.closeFriend .closeFriend__container .closeFriend__frImg{border-radius:50%;height:32px;margin-left:20px;object-fit:cover;width:32px}.closeFriend .closeFriend__container .closeFriend__frName{margin-left:15px}.friendPage{min-height:1000px}.friendPage .friendPage__container{background-color:#fdf8ef;height:100%;margin:auto;width:80%}.friendPage .friendPage__container .friendPage__head{display:flex;margin:auto;padding:40px;width:700px}.friendPage .friendPage__container .friendPage__head .friendPage__head-imgs{height:250px;width:400px}.friendPage .friendPage__container .friendPage__head .friendPage__head-imgs .friendPage__head-img{border-radius:50%;height:250px;object-fit:cover;padding-top:20px;width:250px}.friendPage .friendPage__container .friendPage__head .friendPage__head-info .friendPage__head-h2{color:gray}.friendPage .friendPage__container .friendPage__head .friendPage__head-info .riendPage__head-p{font-size:18px}.friendPage .friendPage__container .friendPage__head .friendPage__head-folw{align-items:center;display:flex;margin-left:50px}.friendPage .friendPage__container .friendPage__head .friendPage__head-folw .friendPage__head-btn{background-color:#1877f2;border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:16px;padding:10px;width:150px}.friendPage .friendPage__container .friendPage__hr{border-bottom:2px solid red;width:100%}.friendPage .friendPage__container .friendPage__posts{margin-left:18%;width:70%}.changeInfo .changeInfo__nead,.friendPage .friendPage__container .friendPage__posts .friendPage__posts-h2{color:gray}.changeInfo .changeInfo__form{display:flex;flex-direction:column;margin:auto;width:40%}.changeInfo .changeInfo__form .changeInfo__form-label{color:#363535;margin:10px}.changeInfo .changeInfo__form .changeInfo__form-input{border:1px solid #979696;border-radius:10px;margin:5px 0 20px 140px;padding:10px;width:50%}.changeInfo .changeInfo__form .changeInfo__form-btn{background-color:#0f770f;border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:18px;font-weight:600;margin:20px auto auto;padding:10px;width:25%}
/*# sourceMappingURL=main.0757d0f3.css.map*/