body{margin:0;font-family:Arial,sans-serif}.nav{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#000;color:#fff}.nav__left{display:flex;flex-direction:row;justify-content:center;align-items:stretch}.nav__left .nav__title{margin-right:0}.nav__left__notification{display:block;width:10px;height:10px;background-color:#0086bb;border-radius:50%}.nav__title{margin:0 1rem;font-size:1.5rem;text-decoration:none;color:#fff;-webkit-user-select:none;user-select:none}.nav__requests{position:absolute;top:70px;background-color:#000;padding:1.2rem;border-radius:10px;width:20%}.nav__requests__header{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center}.nav__requests__header .nav__header{display:flex;flex-direction:column;justify-content:center;align-items:stretch;width:100%}.nav__requests__header .nav__header__top{display:flex;flex-direction:row;justify-content:space-evenly;align-items:flex-end;height:30px;width:100%}.nav__requests__header .nav__header__top__title{margin:0;font-size:1.2rem;cursor:pointer}.nav__requests__header .nav__header__underline{position:absolute;background-color:orange;width:50px;height:2px;transition:all .2s ease}.nav__requests__header__btn{font-size:1.2rem;cursor:pointer;-webkit-user-select:none;user-select:none}.requests__header__select{border:none;background-color:#000;color:#fff}.sidebar{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;background-color:#d3d3d3}.sidebar__header{display:flex;flex-direction:column;justify-content:center;align-items:stretch;margin-bottom:20px;background-color:gray;height:77px}.sidebar__header__top{display:flex;flex-direction:row;justify-content:space-evenly;align-items:flex-end;height:30px}.sidebar__header__top__title{margin:0;font-size:1.2rem;cursor:pointer}.sidebar__header__underline{position:absolute;background-color:orange;width:50px;height:2px;transition:all .2s ease}.sidebar .create-group{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.sidebar .create-group__btn{width:90%;height:50px;font-size:1.2rem}.sidebar .create-group__input{height:25px;width:85%}.sidebar .add-friend{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.sidebar .add-friend__btn{width:90%;height:50px;font-size:1.2rem}.sidebar .add-friend__container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.sidebar .add-friend__container__input{height:30px;margin:10px 0;width:85%}.sidebar .add-friend__container__btns{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%}.sidebar .add-friend__container__btns__btn{width:40%;height:40px;font-size:1.2rem}.sidebar__chats{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.sidebar__chats__chat{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#acacac;margin:10px;height:50px;border-radius:10px}.sidebar__chats__chat__link{margin:10px auto 10px 10px;text-decoration:none;color:#000;font-size:1.1rem;cursor:pointer}.sidebar__chats__chat__setting{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:20px;height:100%;margin-right:10px;cursor:pointer}.sidebar__chats__chat__setting .dot{width:5px;height:5px;background-color:#000;border-radius:50%}.sidebar__chats__chat__setting .dot1{transition:transform .1s ease 0}.sidebar__chats__chat__setting .dot2{transition:transform .1s ease .01s}.sidebar__chats__chat__setting .dot3{transition:transform .1s ease .02s}.sidebar__chats__chat__setting:hover .dot{transform:translateY(-1px)}.relative-div{position:relative;width:0;height:0}.relative-div .group-settings{position:absolute;width:15rem;background-color:#000;color:#fff;right:-17.5rem;top:-1.5rem;z-index:10;padding:1rem;border-top-right-radius:20px;border-bottom-right-radius:20px}.relative-div .group-settings__options__option{cursor:pointer}.relative-div .group-settings__options__members__member{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch}.grid{height:100vh;width:100vw;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);grid-column-gap:0px;grid-row-gap:0px}.grid .div1{grid-area:1/1/13/3}.grid .div2{grid-area:1/3/2/13}.grid .div4{grid-area:2/3/13/13}.forms-login{display:flex;flex-direction:column;justify-content:center;align-items:center;width:50%;height:500px;margin:20% auto;border-radius:10px;background-color:#d3d3d32f}.forms-login__title{font-size:2rem}.forms-login__form{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%}.forms-login__form__input{width:60%;height:1.5rem;border-radius:5px;border:1px solid black;padding:.5rem;margin:10px 0;font-size:1rem}.forms-login__form__password{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;margin:0 0 0 38px}.forms-login__form__password__icon{font-size:1.2rem;margin:0 10px;cursor:pointer}.forms-login__form__btn{width:60%;height:2.2rem;border-radius:5px;border:1px solid black;padding:.5rem;margin:20px 0;font-size:1rem;background-color:#000;color:#fff;cursor:pointer}.forms-signup{display:flex;flex-direction:column;justify-content:center;align-items:center;width:50%;height:500px;margin:20% auto;border-radius:10px;background-color:#d3d3d32f}.forms-signup__title{font-size:2rem}.forms-signup__form{height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.forms-signup__form__input{width:60%;height:30px;border-radius:5px;border:1px solid black;padding:.5rem;margin:10px 0;font-size:1rem}.forms-signup__form__password{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;margin:0 0 0 38px}.forms-signup__form__password__input{width:60%;height:30px;border-radius:5px;border:1px solid black;padding:.5rem;margin:10px 0;font-size:1rem}.forms-signup__form__password__icon{font-size:1.2rem;margin:0 10px;cursor:pointer}.forms-signup__form__btn{width:60%;height:2.2rem;border-radius:5px;border:1px solid black;padding:.5rem;margin:20px 0;font-size:1rem;background-color:#000;color:#fff;cursor:pointer}.chat{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;width:100%;background-color:gray}.chat__msgs{overflow-y:auto;width:100%;display:flex;flex-direction:column}.chat__msgs__msg{width:100%;padding:0;margin:0}.chat__msgs__msg__content{background-color:#d3d3d3;width:fit-content;max-width:60%;border-radius:20px;padding:10px;margin:10px 20px}.chat__msgs__msg__date{font-size:.8rem;text-align:center}.chat__msgs .sent{align-self:flex-end;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.chat__msgs .sent .chat__msgs__msg__content{background-color:#007bff;color:#fff;align-self:flex-end}.chat__msgs .received{align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.chat__msgs .received .chat__msgs__msg__content{background-color:#f1f1f1;color:#000;align-self:start}.chat__bottom{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100px;width:100%}.chat__bottom__writing{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.chat__bottom__writing__form{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;width:100%}.chat__bottom__writing__form__input{width:90%;height:50px;font-size:1rem;padding:0 10px;border:none;border-top-left-radius:20px;border-bottom-left-radius:20px}.chat__bottom__writing__form__btn{height:50px;width:100px;padding:0;border:none;border-top-right-radius:20px;border-bottom-right-radius:20px;font-size:1.2rem;cursor:pointer}.chat__bottom__typing{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;margin-left:20px}.chat__bottom__typing__dot{width:10px;height:10px;background-color:#d3d3d3;border-radius:50%;animation:typing 1s infinite}.chat__bottom__typing .one{animation-delay:0}.chat__bottom__typing .two{animation-delay:.1s}.chat__bottom__typing .three{animation-delay:.2s}@keyframes typing{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}