img {
    cursor: pointer;
  }
  
  /*NAvbar basic */
  /*********************************
  **********************************
  **********************************
  */
  .nav {
    /* background-color: #242526;
    width: 100vw;
    height: 7.5vh;
    overflow: hidden;
    align-items: center;
    justify-items: center;
    grid-template-rows: 100%;
    box-sizing: border-box; */
  
  }
  @media only screen and (max-width:600px) {
    .nav{
      display: none;
    }
  }
  
  /*********************************
  **********************************
  **********************************
  */
  /*NAvbar basic */
  
  /*NAvbar grid*/
  /*i make grid to fit all item systematically*/
  /*********************************
  **********************************
  **********************************
  */
  .nav-grid {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 30rem 75.3rem 47rem;
    width: 100%;
    height: 100%;
  }
  
  /*********************************
  **********************************
  **********************************
  */
  /*NAvbar grid*/
  
  
  
  .nav-grid--box {
    width: 100%;
    height: 100%;
    border: 2px solid red;
  }
  
  
  /* my search box with facebook icon */
  /*********************************
  **********************************
  **********************************
  */
  
  .nav-grid--box--search {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 6rem 24rem;
  }
  
  .nav-grid--box--search--icon-box {
    display: flex;
    align-items: center;
    justify-items: center;
  }
  
  .nav-grid--box--search--icon-box--icon {
    width: 4rem;
    margin: 0 auto;
  }
  
  .nav-grid--box--search--search {
    align-items: center;
    justify-items: center;
    margin: 0 auto;
    display: flex;
  }
  
  .nav-grid--box--search--search--input {
    background-color: #3A3B3C;
    height: 4.3rem;
    width: 23rem;
    outline: none;
    border: none;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 2rem;
    display: inline;
    padding-left: 4rem;
    color: #E4E6EB;
    font-size: 1.5rem;
  }
  
  /*********************************
  **********************************
  **********************************
  */
  /* my search box with facebook icon */
  
  
  
  .nav-grid--box--nav {
    margin-left: 16rem;
  }
  
  @media only screen and (max-width:1380px) {
    .nav-grid--box--nav {
      margin-left: 10rem;
    }
  }
  
  @media only screen and (max-width:1260px) {
    .nav-grid--box--nav {
      margin-left: 5rem;
    }
  }
  
  @media only screen and (max-width:1180px) {
    .nav-grid--box--nav {
      margin-left: -5rem;
    }
  }
  
  @media only screen and (max-width:1100px) {
    .nav-grid--box--nav {
      margin-left: -8rem;
    }
  }
  
  @media only screen and (max-width:1020px) {
    .nav-grid--box--nav {
      margin-left: -13rem;
    }
  }
  
  @media only screen and (max-width:940px) {
    .nav-grid--box--nav {
      margin-left: -16rem;
    }
  }
  
  @media only screen and (max-width:900px) {
    .nav-grid--box--nav {
      margin-left: -10rem;
    }
  }
  
  @media only screen and (max-width:880px) {
    .nav-grid--box--nav {
      margin-left: -12rem;
    }
  
  }
  
  @media only screen and (max-width:780px) {
    .nav-grid--box--nav {
      margin-left: -14rem;
    }
  
  }
  @media only screen and (max-width:620px) {
    .nav-grid--box--nav {
      margin-left: -16rem;
    }
  }
  
  .nav-grid--box--nav--grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(5, 118.600px);
  }
  
  @media only screen and (max-width:900px) {
    .nav-grid--box--nav--grid {
      grid-template-columns: repeat(5, 90px);
    }
  }
  
  @media only screen and (max-width:880px) {
    .nav-grid--box--nav--grid {
      grid-template-columns: repeat(4, 110px);
    }
  }
  
  @media only screen and (max-width:800px) {
    .nav-grid--box--nav--grid {
      grid-template-columns: repeat(4, 90px);
    }
  }
  
  @media only screen and (max-width:700px) {
    .nav-grid--box--nav--grid {
      grid-template-columns: repeat(4, 80px);
    }
  }
  
  .nav-grid--box--nav--grid--box {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
  }
  
  
  .nav-grid--box--nav--grid--box:hover {
    cursor: pointer;
  }
  
  
  .nav-grid--box--nav--grid--box--inner {
    border-radius: 1rem;
    width: 11em;
    height: 4.7rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  
  .nav-grid--box--nav--grid--box--inner:hover {
    cursor: pointer;
    background-color: rgba(77, 79, 80, 0.5);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .nav-grid--box--nav--grid--box--icon {
    fill: #A7B1AC;
  }
  
  .nav-grid--box--nav--grid--box--icon:hover {
    cursor: pointer;
  }
  
  .active {
    fill: #2374e1;
  }
  
  
  
  
  .active-lines {
    margin-top: 5rem;
    width: 10.5rem;
    height: 0.3rem;
    background-color: #2374e1;
    position: absolute;
  
  }
  
  @media only screen and (max-width:700px) {
    .active-lines {
      width: 7rem;
    }
  }
  
  
  .nav-grid--box--main {
    width: 18rem;
    margin-left: 29rem;
    box-sizing: border-box;
  }
  
  @media only screen and (max-width:1520px) {
    .nav-grid--box--main {
      margin-left: 27rem;
    }
  }
  
  @media only screen and (max-width:1480px) {
    .nav-grid--box--main {
      margin-left: 23rem;
    }
  }
  
  @media only screen and (max-width:1480px) {
    .nav-grid--box--main {
      margin-left: 22rem;
    }
  }
  
  @media only screen and (max-width:1440px) {
    .nav-grid--box--main {
      margin-left: 20rem;
    }
  }
  
  @media only screen and (max-width:1420px) {
    .nav-grid--box--main {
      margin-left: 18rem;
    }
  }
  
  @media only screen and (max-width:1400px) {
    .nav-grid--box--main {
      margin-left: 16rem;
    }
  }
  
  @media only screen and (max-width:1380px) {
    .nav-grid--box--main {
      margin-left: 14rem;
    }
  }
  
  @media only screen and (max-width:1360px) {
    .nav-grid--box--main {
      margin-left: 12rem;
    }
  }
  
  @media only screen and (max-width:1340px) {
    .nav-grid--box--main {
      margin-left: 10rem;
    }
  }
  
  @media only screen and (max-width:1320px) {
    .nav-grid--box--main {
      margin-left: 7rem;
    }
  }
  
  @media only screen and (max-width:1280px) {
    .nav-grid--box--main {
      margin-left: 5rem;
    }
  }
  
  @media only screen and (max-width:1260px) {
    .nav-grid--box--main {
      margin-left: 3rem;
    }
  }
  
  @media only screen and (max-width:1240px) {
    .nav-grid--box--main {
      margin-left: 1rem;
    }
  }
  
  @media only screen and (max-width:1220px) {
    .nav-grid--box--main {
      margin-left: -2rem;
    }
  }
  
  @media only screen and (max-width:1220px) {
    .nav-grid--box--main {
      margin-left: -4rem;
    }
  }
  
  @media only screen and (max-width:1180px) {
    .nav-grid--box--main {
      margin-left: -6rem;
    }
  }
  
  @media only screen and (max-width:1160px) {
    .nav-grid--box--main {
      margin-left: -8rem;
    }
  }
  
  @media only screen and (max-width:1140px) {
    .nav-grid--box--main {
      margin-left: -10rem;
    }
  }
  
  @media only screen and (max-width:1120px) {
    .nav-grid--box--main {
      margin-left: -12rem;
    }
  }
  
  @media only screen and (max-width:1100px) {
    .nav-grid--box--main {
      margin-left: -14rem;
    }
  }
  
  @media only screen and (max-width:1080px) {
    .nav-grid--box--main {
      margin-left: -16rem;
    }
  }
  
  @media only screen and (max-width:1060px) {
    .nav-grid--box--main {
      margin-left: -18rem;
    }
  }
  
  @media only screen and (max-width:1040px) {
    .nav-grid--box--main {
      margin-left: -20rem;
    }
  }
  
  @media only screen and (max-width:1020px) {
    .nav-grid--box--main {
      margin-left: -22rem;
    }
  }
  
  @media only screen and (max-width:1000px) {
    .nav-grid--box--main {
      margin-left: -24rem;
    }
  }
  
  @media only screen and (max-width:950px) {
    .nav-grid--box--main {
      margin-left: -30rem;
    }
  }
  
  @media only screen and (max-width:900px) {
    .nav-grid--box--main {
      margin-left: -34rem;
    }
  }
  
  @media only screen and (max-width:880px) {
    .nav-grid--box--main {
      margin-left: -36rem;
    }
  }
  
  @media only screen and (max-width:860px) {
    .nav-grid--box--main {
      margin-left: -39rem;
    }
  }
  
  @media only screen and (max-width:820px) {
    .nav-grid--box--main {
      margin-left: -42rem;
    }
  }
  
  @media only screen and (max-width:800px) {
    .nav-grid--box--main {
      margin-left: -44rem;
    }
  }
  
  @media only screen and (max-width:740px) {
    .nav-grid--box--main {
      margin-left: -50rem;
    }
  }
  
  @media only screen and (max-width:700px) {
    .nav-grid--box--main {
      margin-left: -54rem;
    }
  }
  @media only screen and (max-width:680px) {
    .nav-grid--box--main {
      margin-left: -52rem;
    }
  }
  @media only screen and (max-width:660px) {
    .nav-grid--box--main {
      margin-left: -54rem;
    }
  }
  @media only screen and (max-width:640px) {
    .nav-grid--box--main {
      margin-left: -56rem;
    }
  }
  @media only screen and (max-width:620px) {
    .nav-grid--box--main {
      margin-left: -58rem;
    }
  }
  
  .nav-grid--box--main--grid {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(4, 25%);
  }
  
  .nav-grid--box--main--grid--box {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgb(58, 59, 60);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .nav-grid--box--main--grid--box:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .nav-grid--box--main--grid--box--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .nav-grid--box--main--grid--box--icon {
    -webkit-filter: invert(89%) sepia(6%) hue-rotate(185deg);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  
  }
  
  .nav-grid--box--main--grid--box--icon:hover {
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    cursor: pointer;
  }
  
  
  .nav-search-box {
    width: 24.2%;
    height: 5rem;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 20% 70%;
    padding-top: 0.4%;
  }
  
  .nav-search-box--logo {
    width: 4rem;
    height: 4rem;
    margin-left: 0.7rem;
  }
  
  .nav-search-box--logo--search-box {
    background-color: #3A3B3C;
    height: 1rem;
    width: 33rem;
    outline: none;
    border: none;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 2rem;
    display: inline;
    padding-top: 1rem;
    padding-left: -2rem;
    color: #E4E6EB;
    font-size: 1.2rem;
  }
  
  .nav-grid--box--search--search--input::placeholder {
    color: #A7B1AC;
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
  }
  
  @media only screen and (max-width:1180px) {
    .nav-grid--box--search--search--input {
      width: 4.3rem;
      height: 4.3rem;
      margin-left: -12rem;
      padding: 0%;
    }
  
    .nav-grid--box--search--search--input::placeholder {
      font-size: 0rem;
      color: transparent;
    }
  }
  
  .nav-grid--box--search--search--input--icon {
    color: white;
  }
  
  .fa-1x {
    font-size: 1.4em !important;
    color: #A7B1AC;
    position: absolute;
    margin-left: 1.3rem;
  }
  
  @media only screen and (max-width:1180px) {
    .fa-1x {
      position: absolute;
      margin-left: -10.5rem;
      margin-top: 0.3rem;
    }
  }
  
  
  .nav-search-box--logo--search-box::placeholder {
    color: #A7B1AC;
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
  }
  
  .nav-search-box--logo--search-box--icon {
    position: absolute;
    fill: #A7B1AC;
    left: 8rem;
    top: 2rem;
  }
  
  
  
  .nav-search-box--logo--search-box--icon :hover {
    cursor: pointer;
  }
  
  .icon-box {
    width: 53.7rem;
    margin-left: 9rem;
    height: 4rem;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(5, 20%);
  }
  
  
  .icon-box-con {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .icon-box-con:hover {
  
    cursor: pointer;
    background-color: #4d4f50;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .icon-box-con--icon {
    fill: #b0b3b8;
  }
  
  .icon-box-con--icon :hover {
    cursor: pointer;
  }
  
  .porfile-box {
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    width: 9.5rem;
    height: 3.1rem;
    margin-left: 8.4rem;
    display: flex;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  
  
  
  
  
  
  .porfile-box:hover {
    cursor: pointer;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #4d4f50;
  }
  
  .porfile-box--circle {
    fill: transparent;
    padding-left: 0.3rem;
    padding-top: 0.1rem;
  }
  
  .porfile-box--circle--name {
    font-family: 'Segoe UI', sans-serif;
    font-weight: bolder;
    font-size: 1.3rem;
    text-overflow: ellipsis;
    color: #E4E6EB;
    padding-left: 1rem;
    padding-top: 0.6rem;
  }
  
  .user-select {
    width: 20rem;
    height: 100%;
    margin-left: 1rem;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(4, 25%);
  }
  
  
  .user-select--profile {
    border-radius: 50%;
    background-color: #3a3b3c;
    width: 4rem;
    height: 4rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-top: 0.5rem;
  }
  
  .user-select--profile--icon {
    fill: #E4E6EB;
    width: 2rem;
    height: 2rem;
  }
  
  .user-select--profile--icon :hover {
    cursor: pointer;
  }
  
  .user-select--notification {
    border-radius: 50%;
    background-color: #3a3b3c;
    width: 4rem;
    height: 4rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-top: 0.5rem;
  }
  
  
  
  .user-select--notification--icon {
    fill: #E4E6EB;
    width: 2rem;
    height: 2rem;
  }
  
  .user-select--notification--icon :hover {
    cursor: pointer;
  }
  
  .user-select--messenger-box {
    border-radius: 50%;
    background-color: #3a3b3c;
    width: 4rem;
    height: 4rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-top: 0.5rem;
  }
  
  
  .user-select--messenger-box--icon {
    fill: #E4E6EB;
    width: 2rem;
    height: 2rem;
  }
  
  .user-select--messenger-box--icon :hover {
    cursor: pointer;
  }
  
  .user-select--menu-box {
    border-radius: 50%;
    background-color: #3a3b3c;
    width: 4rem;
    height: 4rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-top: 0.5rem;
  }
  
  .user-select--menu-box--icon {
    fill: #E4E6EB;
    width: 2rem;
    height: 2rem;
  }
  
  .user-select--menu-box--icon :hover {
    cursor: pointer;
  }
  
  .menu-con {
    overflow: hidden;
    background-color: #323436;
    width: 53rem;
    height: 55rem;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    overflow-x: hidden;
    position: absolute;
    top: 5.3REM;
    right: 1Rem;
    z-index: 100;
    border: 1PX solid grey;
    visibility: hidden;
  
    /* Chrome, Edge, and Safari */
  }
  
  .vis {
    visibility: visible !important;
  }
  
  .toggle {
    color: #2e89ff;
  }
  
  .toggle-bg {
    background-color: rgba(24, 119, 242, 0.2);
  }
  
  .menu-con {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .menu-con::-webkit-scrollbar {
    width: 5px;
  }
  
  .menu-con::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .menu-con::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  .menu-con--grid {
    width: 95%;
    height: 100%;
    margin-left: 2rem;
    display: grid;
    grid-template-columns: 55% 45%;
  }
  
  .menu-con--name {
    text-align: center;
    display: inline-block;
    color: #e4e6eb;
    font-size: 2.4rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    margin-left: 2rem;
    margin-top: 1rem;
  }
  
  .social-con {
    width: 28rem;
    height: 100%;
    background-color: #242526;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin-top: 1.2rem;
    overflow: hidden;
    /* ===== Scrollbar CSS ===== */
    /* Firefox */
    /* Chrome, Edge, and Safari */
  }
  
  .social-con {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .social-con::-webkit-scrollbar {
    width: 16px;
  }
  
  .social-con::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .social-con::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 3px solid transparent;
  }
  
  .social-con--social-name {
    color: #E4E6EB;
    font-size: 1.6rem;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    margin-top: 3rem;
    margin-left: 2rem;
  }
  
  .social-con--search {
    top: 1.5rem;
    left: 1.5rem;
    display: inline;
    position: relative;
    background-color: #3A3B3C;
    height: 3.5rem;
    width: 90%;
    outline: none;
    border: none;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 1rem;
    padding-left: 3.5rem;
    color: #E4E6EB;
    font-size: 1.5rem;
  }
  
  .social-con--search::placeholder {
    color: #b0b3b8;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
  }
  
  .social-con--search--icon {
    z-index: 10000;
    margin-top: 2.5rem;
    margin-left: 2.7rem;
    position: absolute;
  }
  
  .social-con--search--icon :hover {
    cursor: pointer;
  }
  
  .social-con--social-box--container {
    width: 95%;
    padding: 0.5rem 2rem;
    display: flex;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    align-items: center;
    justify-items: center;
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    margin-left: 0.7rem;
    margin-top: 1rem;
  }
  
  .social-con--social-box--container:hover {
    cursor: pointer;
    cursor: pointer;
    background-color: rgba(77, 79, 80, 0.7);
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
  }
  
  .social-con--social-box--container--img {
    position: relative;
    margin-left: -1.5rem;
  }
  
  .social-con--social-box--container--text {
    color: #B0B3B8;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin-left: 2rem;
  }
  
  .social-con--social-box--container--heading {
    display: block;
    color: #E4E6EB;
    margin-top: 0rem;
    font-weight: 600;
    font-size: 1.4rem;
  }
  
  .social-loader--con {
    display: flex;
    align-items: center;
    justify-items: center;
  }
  
  .social-loader--con--header {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
  }
  
  .social-loader--con--header--detail--about {
    left: 5rem;
    margin-top: 0.2rem;
    height: 1.5rem;
    width: 22rem;
    background: #656871;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    display: inline-block;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .social-loader--con--header--detail--about::before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .social-loader--con--header--detail--name {
    left: 5rem;
    margin-top: 3.5rem;
    height: 1.5rem;
    width: 20rem;
    background: #656871;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    display: inline-block;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .social-loader--con--header--detail--name:before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .social-loader--con--header--img {
    left: 3rem;
    margin-top: 3rem;
    height: 30px;
    width: 30px;
    background: #656871;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    display: block;
  }
  
  .social-loader--con--header--img:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
  }
  
  .create-con {
    width: 88%;
    height: 83%;
    margin-left: 2rem;
    margin-top: 1rem;
    background-color: #242526;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin-top: 1.2rem;
    overflow: hidden;
    /* ===== Scrollbar CSS ===== */
    /* Firefox */
    /* Chrome, Edge, and Safari */
  }
  
  .create-con {
    scrollbar-width: auto;
    scrollbar-color: transparent transpar;
  }
  
  .create-con::-webkit-scrollbar {
    width: 16px;
  }
  
  .create-con::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .create-con::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 3px solid transparent;
  }
  
  .create-con--name {
    color: #E4E6EB;
    font-size: 2.2rem;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    margin-top: 1.2rem;
    margin-left: 1rem;
  }
  
  .create-con--grid {
    margin-top: 1rem;
    display: grid;
    grid-template-rows: repeat(8, 11.2%);
    grid-template-columns: 100%;
    width: 100%;
    height: 100%;
  }
  
  .create-con--grid-box {
    margin-top: -0.5rem;
    width: 90%;
    height: 93%;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    margin-left: 1rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .create-con--grid-box:hover {
    cursor: pointer;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: rgba(77, 79, 80, 0.7);
  }
  
  .create-con--grid-box--con {
    width: 3.8rem;
    height: 3.8rem;
    background-color: #3A3B3C;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-left: 1rem;
  }
  
  .create-con--grid-box--con--icon {
    margin-left: 0.9rem;
    margin-top: 0.9rem;
    -webkit-filter: invert(89%) sepia(6%) hue-rotate(185deg);
  }
  
  .create-con--grid-box--con--icon :hover {
    cursor: pointer;
  }
  
  .create-con--grid-box--con--icon--name {
    top: -2rem;
    position: relative;
    color: #E4E6EB;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    left: 5rem;
    font-size: 1.5rem;
  }
  
  .create-loader-con {
    display: flex;
    align-items: center;
    justify-items: center;
  }
  
  .create-loader-con--header {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
  }
  
  .create-loader-con--header--img {
    top: 40.5rem;
    left: 34rem;
    height: 36px;
    width: 36px;
    background: #656871;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    display: block;
  }
  
  .create-loader-con--header--img:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
  }
  
  .create-loader-con--header--img--detail--name {
    left: 7rem;
    top: -0.8rem;
    height: 1.2rem;
    width: 7rem;
    background: #656871;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    display: inline-block;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .create-loader-con--header--img--detail--name:before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
  }
  
  .messenger-con {
    width: 36rem;
    height: 50rem;
    overflow: hidden;
    background-color: #242526;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    overflow-x: hidden;
    position: absolute;
    top: 5.5REM;
    right: 1Rem;
    z-index: 100;
    border: 1PX solid grey;
    visibility: hidden;
  }
  
  .messenger-con--search-con--search-bar {
    top: -2.5rem;
    display: inline;
    position: relative;
    margin-top: 0rem;
    margin-left: 2rem;
    background-color: #3A3B3C;
    height: 3.5rem;
    width: 88%;
    outline: none;
    border: none;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 1rem;
    padding-left: 3.5rem;
    color: #E4E6EB;
    font-size: 1.5rem;
  }
  
  .messenger-con--search-con--search-bar::placeholder {
    color: #e4e6eb;
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
  }
  
  .messenger-con--search-con--search-bar--icon {
    fill: #E4E6EB;
    margin-left: 3.5rem;
    position: absolute;
    z-index: 10000000000000;
    margin-top: -1.5rem;
  }
  
  .messenger-con--search-con--search-bar--icon :hover {
    cursor: pointer;
  }
  
  .messenger-con--top-grid {
    grid-template-columns: 60% repeat(4, 10%);
    grid-template-rows: 100%;
    display: grid;
    display: flex;
    margin-top: 1rem;
    width: 100%;
    height: 10%;
  }
  
  .messenger-con--top-grid--icon-box {
    top: -3.5rem;
    left: 21rem;
    position: relative;
  }
  
  .messenger-con--top-grid--icon-box--icon {
    margin-left: 1rem;
    -webkit-filter: invert(62%) sepia(98%) saturate(12%) hue-rotate(175deg) brightness(90%) contrast(96%);
  }
  
  .messenger-con--top-grid--icon-box--icon :hover {
    cursor: pointer;
  }
  
  .messenger-con--top-grid--name {
    font-size: 2.5rem;
    color: #E4E6EB;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    margin-left: 1.5rem;
    margin-top: 0.7rem;
  }
  
  .messenger-con--middle-grid {
    width: 100%;
    height: 100%;
    margin-top: -1.5rem;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(10, 10%);
  }
  
  .messenger-con--middle-grid--msg-con {
    border-radius: 0.8rem;
    margin-left: 0.6rem;
    width: 96%;
    height: 120%;
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -ms-border-radius: 0.8rem;
    -o-border-radius: 0.8rem;
    display: flex;
    transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .messenger-con--middle-grid--msg-con:hover {
    cursor: pointer;
    transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #4d4f50;
  }
  
  .messenger-con--middle-grid--msg-con--img {
    margin-top: 0.3rem;
    margin-left: 1.2rem;
    border-radius: 50%;
    height: 5.5rem;
    width: 5.5rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .messenger-con--middle-grid--msg-con--img--details {
    margin-top: 0.7rem;
    margin-left: 1.3rem;
  }
  
  .messenger-con--middle-grid--msg-con--img--details--name {
    color: #E4E6EB;
    font-size: 1.4rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
  }
  
  .messenger-con--middle-grid--msg-con--img--details--msg {
    color: #E4E6EB;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    margin-top: 0.6rem;
  }
  
  .messenger-con--middle-grid--msg-con--img--details--msg--time {
    color: #E4E6EB;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    margin-left: 4rem;
  }
  
  .messenger-con--loader-con {
    margin-top: 9.7rem;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  
  .messenger-con--loader-con--header {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
  }
  
  .messenger-con--loader-con--header--img {
    left: 2rem;
    margin-top: 3rem;
    height: 5.5rem;
    width: 5.5rem;
    background: #656871;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    display: block;
  }
  
  .messenger-con--loader-con--header--img::before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .messenger-con--loader-con--header--img--details--name {
    left: 8rem;
    margin-top: 3.5rem;
    height: 1.5rem;
    width: 14rem;
    background: #656871;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    display: inline-block;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .messenger-con--loader-con--header--img--details--name::before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .messenger-con--loader-con--header--img--details--about {
    left: 8rem;
    margin-top: 0.2rem;
    height: 1.5rem;
    width: 22rem;
    background: #656871;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    display: inline-block;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .messenger-con--loader-con--header--img--details--about::before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .notification-con {
    width: 36rem;
    height: 55rem;
    overflow: scroll;
    background-color: #242526;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    overflow-x: hidden;
    position: absolute;
    top: 5.4REM;
    right: 2Rem;
    z-index: 100;
    border: 1PX solid grey;
    visibility: hidden;
    /* Chrome, Edge, and Safari */
  }
  
  .notification-con {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .notification-con::-webkit-scrollbar {
    width: 5px;
  }
  
  .notification-con::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .notification-con::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  .notification-con--name {
    font-size: 2.6rem;
    color: #E4E6EB;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    margin-left: 1.5rem;
    margin-top: 1.7rem;
    display: inline-block;
  }
  
  .notification-con--name--icon {
    -webkit-filter: invert(89%) sepia(6%) hue-rotate(185deg);
    margin-left: 13rem;
    padding-top: 1rem;
  }
  
  .notification-con--loader {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  
  .notification-con--loader--header {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
  }
  
  .notification-con--loader--header--img {
    left: 2.5rem;
    margin-top: 3rem;
    height: 5.5rem;
    width: 5.5rem;
    background: #656871;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    display: block;
  }
  
  .notification-con--loader--header--img::before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .notification-con--loader--header--img--details--about {
    left: 8.5rem;
    margin-top: 0rem;
    height: 1.5rem;
    width: 22rem;
    background: #656871;
    border-radius: 1rem;
    position: absolute;
    overflow: hidden;
    display: inline-block;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .notification-con--loader--header--img--details--about::before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .notification-con--loader--header--img--details--name {
    left: 8.5rem;
    margin-top: 2rem;
    height: 1.5rem;
    width: 14rem;
    background: #656871;
    border-radius: 1rem;
    position: absolute;
    overflow: hidden;
    display: inline-block;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .notification-con--loader--header--img--details--name::before {
    border-radius: 1rem;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 650px 600px;
    -webkit-animation: shimmer 4s linear infinite;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .notification-con--btn-con {
    margin-top: 1rem;
    margin-left: 1.5rem;
    display: flex;
  }
  
  .notification-con--btn-con--all-btn {
    justify-content: flex-start;
    font-size: 1.4rem;
    align-items: center;
    display: flex;
    font-weight: bold;
    color: #2d88ff;
    border: none;
    outline: none;
    background-color: rgba(45, 136, 255, 0.2);
    background-color: #2d88ff33;
    height: 3.6rem;
    width: 4rem;
    padding-left: 1.2rem;
    border-radius: 1.8rem;
    -webkit-border-radius: 1.8rem;
    -moz-border-radius: 1.8rem;
    -ms-border-radius: 1.8rem;
    -o-border-radius: 1.8rem;
    overflow: hidden;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .notification-con--btn-con--all-btn:hover {
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #3C4D63;
  }
  
  .notification-con--btn-con--unread-btn {
    justify-content: flex-start;
    color: #E4E6EB;
    font-weight: bold;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    background-color: #3A3B3C;
    height: 3.6rem;
    width: 6.8rem;
    padding-left: 1.2rem;
    border-radius: 1.7rem;
    -webkit-border-radius: 1.7rem;
    -moz-border-radius: 1.7rem;
    -ms-border-radius: 1.7rem;
    -o-border-radius: 1.7rem;
    outline: none;
    border: none;
    overflow: hidden;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .notification-con--btn-con--unread-btn:hover {
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #3C4D63;
  }
  
  .notification-con--name-primary {
    color: #E4E6EB;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    margin-left: 2rem;
    margin-top: 1.5rem;
  }
  
  .notification-con--friend-request-con {
    position: relative;
    width: 95%;
    height: 12rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    margin-left: 1rem;
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 50% 40%;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .notification-con--friend-request-con:hover {
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #4d4f50;
  }
  
  .notification-con--friend-request-con--img-con {
    margin-top: 1.5rem;
    display: flex;
  }
  
  .notification-con--friend-request-con--img-con--img {
    margin-left: 2rem;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .notification-con--friend-request-con--img-con--img--text {
    color: #E4E6EB;
    font-size: 1.4rem;
    font-family: 'Roboto', sans-serif;
    width: 200px;
    margin-left: 1rem;
    line-height: 1.2;
  }
  
  .notification-con--friend-request-con--img-con--img--text--icon {
    margin-top: 1.8rem;
    margin-left: 1.5rem;
    top: 3.5rem;
  }
  
  .notification-con--friend-request-con--img-con--img--text--time {
    font-size: 1.2rem;
    color: #2E89FF;
    font-weight: bolder;
    font-family: 'Roboto', sans-serif;
  }
  
  .notification-con--friend-request-con--btn-con {
    display: flex;
    align-items: center;
    justify-items: center;
  }
  
  .notification-con--friend-request-con--btn-con--conform {
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    margin-left: 8rem;
    color: #E4E6EB;
    outline: none;
    border: none;
    border-radius: 0.5rem;
    height: 3.6rem;
    background-color: #2374e1;
    width: 10.6rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
  }
  
  .notification-con--friend-request-con--btn-con--delete {
    height: 3.6rem;
    background-color: rgba(255, 255, 255, 0.1);
    width: 10.6rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    margin-left: 1rem;
    color: #E4E6EB;
    outline: none;
    border: none;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
  }
  
  .notification-con--earlier-post {
    margin-top: 1.5rem;
    display: flex;
    position: relative;
    width: 95%;
    height: 8rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    margin-left: 1rem;
    margin-top: 0.6rem;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .notification-con--earlier-post:hover {
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #4d4f50;
  }
  
  .notification-con--earlier-post--img {
    margin-top: 1rem;
    margin-left: 2rem;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .notification-con--earlier-post--img--reaction {
    position: absolute;
    top: 4rem;
    left: 5rem;
  }
  
  .notification-con--earlier-post--img--text {
    color: #E4E6EB;
    font-size: 1.4rem;
    width: 27rem;
    margin-left: 2rem;
    margin-top: 2rem;
    font-family: 'Roboto', sans-serif;
  }
  
  .notification-con--earlier-post--img--text--time {
    font-size: 1.2rem;
    color: #2E89FF;
  }
  
  .profile-con {
    width: 36rem;
    height: 40rem;
    overflow: hidden;
    background-color: #242526;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    overflow-x: hidden;
    position: absolute;
    top: 5.4REM;
    right: 2Rem;
    z-index: 100;
    visibility: hidden;
    border: 1PX solid grey;
  }
  
  .profile-con--author-con {
    margin-top: 1.5rem;
    display: flex;
    position: relative;
    width: 95%;
    height: 7rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    margin-left: 1rem;
    margin-top: 1rem;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .profile-con--author-con:hover {
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #4d4f50;
  }
  
  .profile-con--author-con--img {
    margin-left: 1.5rem;
    margin-top: 0.3rem;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .profile-con--author-con--img--caption {
    color: #e4e6eb;
    font-size: 1.5rem;
    font-family: "Game of Squids";
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    margin-left: 1rem;
    margin-top: 2rem;
  }
  
  .profile-con--author-con--img--caption--see {
    font-size: 1.3rem;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    margin-top: 1.8rem;
    color: #B0b3b8;
    margin-top: 3.5rem;
    margin-left: -12rem;
  }
  
  .profile-con--author-con--img--caption--see--divider {
    background-color: rgba(128, 128, 128, 0.4);
    height: 0.1rem;
    width: 90%;
    z-index: 1000;
    margin-top: 1rem;
    margin-left: 1.3rem;
  }
  
  .profile-con--feed-me-con {
    display: flex;
    width: 95%;
    height: 5rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    margin-left: 1rem;
    margin-top: 0.5rem;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .profile-con--feed-me-con:hover {
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #4d4f50;
  }
  
  .profile-con--feed-me-con--circle {
    margin-top: 0.6rem;
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    background-color: #3A3B3C;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .profile-con--feed-me-con--circle--icon {
    -webkit-filter: invert(89%) sepia(6%) hue-rotate(185deg);
  }
  
  .profile-con--feed-me-con--circle--icon--heading {
    margin-top: 0.7rem;
    font-size: 1.4rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #e4e6eb;
    margin-left: 1rem;
  }
  
  .profile-con--feed-me-con--circle--icon--description {
    font-size: 1.3rem;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    color: #B0b3b8;
    margin-top: 2.2rem;
    margin-left: -9rem;
  }
  
  .profile-con--feed-me-con--divider {
    background-color: rgba(128, 128, 128, 0.4);
    height: 0.1rem;
    width: 90%;
    z-index: 1000;
    margin-top: 0.5rem;
    margin-left: 1.3rem;
  }
  
  .profile-con--other-con {
    display: flex;
    width: 95%;
    height: 4.5rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    margin-left: 1rem;
    margin-top: 0.5rem;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .profile-con--other-con:hover {
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: #4d4f50;
  }
  
  .profile-con--other-con--circle {
    margin-top: 0.6rem;
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    background-color: #3A3B3C;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .profile-con--other-con--circle--icon {
    -webkit-filter: invert(89%) sepia(6%) hue-rotate(185deg);
  }
  
  .profile-con--other-con--circle--icon--heading {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #e4e6eb;
    margin-left: 1rem;
  }
  
  *,
  *::after,
  *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }
  
  html {
    font-size: 62.5%;
  }
  
  body {
    box-sizing: border-box;
    /* background-color: #18191A; */
    overflow-x: hidden;
    /* Chrome, Edge, and Safari */
  }
  
  
  body {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  body::-webkit-scrollbar {
    width: 5px;
  }
  
  body::-webkit-scrollbar-track {
    background: transparent;
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  .active {
    fill: #2374e1 !important;
  }
  
  .active-bottom:hover {
    cursor: pointer;
    background-color: transparent;
  }
  
  .active-bottom-line {
    position: absolute;
    width: 10.5rem;
    height: 0.3rem;
    background-color: #2374e1;
    margin-top: 5rem;
  }
  
  .hide-me {
    visibility: hidden;
    display: none;
  }
  
  .divider {
    background-color: rgba(128, 128, 128, 0.4);
    height: 0.1rem;
    width: 45%;
    position: absolute;
    z-index: 1000;
    margin-top: 2rem;
    margin-left: 2rem;
    position: absolute;
  }
  
  .top-prefix {
    top: 45rem;
  }
  
  .margin-top-prefixer {
    margin-top: 1.7rem;
  }
  
  .margin-top-prefixer--two {
    margin-top: 3.5rem;
  }
  
  .margin-top-prefixer--three {
    margin-top: 5.5rem;
  }
  
  .margin-top-prefixer--four {
    margin-top: 7rem;
  }
  
  .link {
    color: #2e89ff !important;
  }
  
  .top-prefixer-sidebar {
    margin-top: 1.5rem !important;
  }
  
  .border-round {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -ms-border-radius: 50% !important;
    -o-border-radius: 50% !important;
  }
  
  .border-round-small {
    border-radius: 0.7rem !important;
    -webkit-border-radius: 0.7rem !important;
    -moz-border-radius: 0.7rem !important;
    -ms-border-radius: 0.7rem !important;
    -o-border-radius: 0.7rem !important;
  }
  
  .small-arrrow {
    width: 1.7rem !important;
    height: 1.7rem !important;
    left: -0.8rem;
    top: 0.1rem;
    position: relative;
  }
  
  .icon-left-prefixer {
    margin-left: 2.5rem;
  }
  
  .Color-change {
    border-width: 5px !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    border-color: blue;
    animation: color-change 2s linear 2s infinite alternate;
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-animation: color-change 2s linear 2s infinite alternate;
  }
  
  @keyframes color-change {
    0% {
      border-color: #f4d419;
      margin-left: 1rem;
    }
  
    50% {
      margin-left: 5rem;
      background-color: #2374e1;
    }
  
    100% {
      margin-left: 1rem;
      background-color: #f4d419;
    }
  }
  
  .like__btn {
    background: transparent;
    font-size: 18px;
    font-family: "Open Sans", sans-serif;
    border-radius: 5px;
    color: #0080ff !important;
    outline: none;
    border: none;
    cursor: pointer;
  }
  
  @media only screen and (max-width: 1500px) {
    .respo--prefixer {
      width: 90.4%;
      margin-left: 1.5rem;
    }
  }
  
  @media only screen and (max-width: 1000px) {
    .hide-me-res-sm {
      visibility: hidden;
      display: none;
    }
  }
  
  @media only screen and (max-width: 790px) {
    .hide-me-res--sm {
      visibility: visible;
      display: block;
    }
  }
  
  @media only screen and (max-width: 450px) {
    .hide-me-res--sm {
      visibility: hidden;
      display: none;
    }
  }
  
  @media only screen and (max-width: 790px) {
    .hide-me-res--sm .res-hide-me-vsm {
      visibility: hidden;
    }
  }
  
  @keyframes shimmer {
    0% {
      background-position: -550px 0;
    }
  
    100% {
      background-position: 550px 0;
    }
  }
  
  #open1:checked~.menu-con {
    visibility: visible;
  }
  
  #open2:checked~.messenger-con {
    visibility: visible;
  }
  
  #open3:checked~.notification-con {
    visibility: visible;
  }
  
  #open4:checked~.profile-con {
    visibility: visible;
  }
  
  .nav-responsive {
    width: 100vw;
    height: 6rem;
    background-color: #242526;
    display: grid;
    grid-template-rows: repeat(1, 100%);
    grid-template-columns: 100%;
    visibility: hidden;
    display: none;
  }
  
  @media only screen and (max-width: 600px) {
    .nav-responsive {
      display: grid;
      visibility: visible;
    }
  }
  
  .nav-responsive--logo-con {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 80% repeat(2, 10%);
    margin-top: 0.7rem;
  }
  
  .nav-responsive--logo-con--messenger-circle {
    background-color: #3a3b3c;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-left: 0rem;
  }
  
  @media only screen and (max-width: 350px) {
    .nav-responsive--logo-con--messenger-circle {
      margin-left: 0.5rem;
    }
  }
  
  @media only screen and (max-width: 300px) {
    .nav-responsive--logo-con--messenger-circle {
      margin-left: 0.4rem;
    }
  }
  
  .nav-responsive--logo-con--messenger-circle--icon {
    fill: #fff;
  }
  
  .nav-responsive--logo-con--search-circle {
    background-color: #3a3b3c;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-left: 0.5rem;
  }
  
  @media only screen and (max-width: 300px) {
    .nav-responsive--logo-con--search-circle {
      margin-left: 0rem;
    }
  }
  
  .nav-responsive--logo-con--search-circle--icon {
    fill: #fff;
  }
  
  .nav-responsive--logo-con--logo {
    width: 16rem;
    height: 5rem;
  }
  
  @media only screen and (max-width: 350px) {
    .nav-responsive--logo-con--logo {
      width: 13rem;
      height: 4rem;
    }
  }
  
  .nav-responsive--bottom {
    width: 100vw;
    height: 6rem;
    background-color: #242526;
    display: grid;
    grid-template-rows: repeat(1, 100%);
    grid-template-columns: 100%;
    visibility: hidden;
    display: none;
    
  }
  
  @media only screen and (max-width: 600px) {
    .nav-responsive--bottom {
      display: grid;
      visibility: visible;
    }
  }
  
  .nav-responsive--bottom--icon-con {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(6, 16.6%);
    margin-left: 2.5rem;
    margin-top: 1.5rem;
  }
  
  .nav-responsive--bottom--icon-con--icon-box {
    display: flex;
    align-items: flex-start;
    justify-items: center;
    align-content: center;
    justify-content: center;
    border-top: #2374e1;
    margin-right: 2.5rem;
  }
  
  .nav-responsive--bottom--icon-con--icon-box--icon {
    height: 2.8rem;
    width: 2.8rem;
    fill: #b0b3b8;
  }
  
  .res-active {
    fill: #2374e1 !important;
  }
  
  .bg-res-2 {
    background-image: url("../img/group-story/user-4-story.webp") !important;
    background-size: cover;
  }
  
  .bg-res-3 {
    background-image: url("../img/group-story/user-5-strory.webp") !important;
    background-size: cover;
  }
  
  .backbone {
    width: 100vw;
    height: 91.5vh;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 22% 56% 22%;
    overflow: hidden;
  }
  
  @media only screen and (max-width: 450px) {
    .backbone {
      display: none;
      visibility: hidden;
    }
  }
  
  .sidebar-con {
    width: 100%;
    height: 100%;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    overflow: scroll;
    overflow-x: hidden;
    /* Chrome, Edge, and Safari */
  }
  
  @media only screen and (max-width: 1100px) {
    .sidebar-con {
      width: 125%;
    }
  }
  
  @media only screen and (max-width: 790px) {
    .sidebar-con {
      visibility: hidden;
      display: none;
    }
  }
  
  .sidebar-con {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .sidebar-con::-webkit-scrollbar {
    width: 5px;
  }
  
  .sidebar-con::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .sidebar-con::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  .sidebar-con--flex {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
  }
  
  .sidebar-con--flex:not(:first-child) {
    margin-top: 0 !important;
  }
  
  .sidebar-con--flex--box {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 1rem;
    width: 100%;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    grid-gap: 0.3rem;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .sidebar-con--flex--box:hover {
    cursor: pointer;
    background-color: rgba(77, 79, 80, 0.5);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .sidebar-con--flex--box--circle {
    width: 3.1rem;
    height: 3.1rem;
    background-color: #242526;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-left: 1rem;
  }
  
  .sidebar-con--flex--box--img {
    width: 3.1rem;
    height: 3.1rem;
    margin-left: 1.6rem;
    fill: #E4E6EB;
  }
  
  .sidebar-con--flex--box--img--name {
    font-family: 'Roboto', sans-serif;
    margin-left: 0.4rem;
    font-size: 1.4rem;
    color: #E4E6EB;
    font-weight: bolder;
  }
  
  .sidebar-con--flex--box--heading-primary {
    color: #b0b3b8;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    margin-top: 0.5rem;
    margin-left: -17rem;
  }
  
  .sidebar-con--flex--divider {
    background-color: rgba(128, 128, 128, 0.4);
    height: 0.1rem;
    width: 28rem;
    margin-top: 0.5rem;
    margin-left: 1.5rem;
  }
  
  .active-con {
    width: 100%;
    height: 100%;
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    overflow: scroll;
    overflow-x: hidden;
    /* Chrome, Edge, and Safari */
  }
  
  @media only screen and (max-width: 1100px) {
    .active-con {
      visibility: hidden;
    }
  }
  
  .active-con {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .active-con::-webkit-scrollbar {
    width: 5px;
  }
  
  .active-con::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .active-con::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  .active-con--contacts-con {
    width: 106%;
    height: 5rem;
    display: flex;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    align-items: center;
  }
  
  .active-con--contacts-con--heading {
    color: #b0b3b8;
    font-size: 1.6rem;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    margin-left: 1.5rem;
  }
  
  .active-con--contacts-con--icon-box {
    display: flex;
    margin-left: 8.7rem;
  }
  
  .active-con--contacts-con--icon-box--icon {
    fill: #b0b3b8;
    display: inline-block;
  }
  
  .active-con--flex-con {
    margin-top: -1.5rem;
    width: 100%;
    height: 93.9%;
    overflow: scroll;
    overflow-x: hidden;
    /* Chrome, Edge, and Safari */
  }
  
  .active-con--flex-con {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .active-con--flex-con::-webkit-scrollbar {
    width: 5px;
  }
  
  .active-con--flex-con::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .active-con--flex-con::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  .active-con--flex-con--flex {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
  }
  
  .active-con--flex-con--flex:not(:first-child) {
    margin-top: 0 !important;
  }
  
  .active-con--flex-con--flex--box {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 1rem;
    width: 100%;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    grid-gap: 0.3rem;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .active-con--flex-con--flex--box:hover {
    cursor: pointer;
    background-color: rgba(77, 79, 80, 0.5);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .active-con--flex-con--flex--box--img {
    width: 3.1rem;
    height: 3.1rem;
    margin-left: 1.6rem;
    fill: #E4E6EB;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .active-con--flex-con--flex--box--img--name {
    font-family: 'Roboto', sans-serif;
    margin-left: 0.4rem;
    font-size: 1.4rem;
    font-family: 'Roboto', sans-serif;
    color: #E4E6EB;
    font-weight: bolder;
  }
  
  .active-con--flex-con--flex--box--img--name--live {
    position: relative;
    /*left: 3rem;
                              */
    padding: 0rem 0.5rem;
    font-size: 0.9rem;
    color: #31a12c;
    height: auto;
    width: auto;
    border: 1px solid grey;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    margin-top: 2.2rem;
    margin-left: -11rem;
    background-color: rgba(0, 100, 0, 0.863);
  }
  
  .main-con {
    width: 100%;
    height: 100%;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    overflow: scroll;
    overflow-x: hidden;
    /* Chrome, Edge, and Safari */
  }
  
  @media only screen and (max-width: 1150px) {
    .main-con {
      grid-column: 2 / 4;
      width: 80%;
      margin-left: 12rem;
    }
  }
  
  @media only screen and (max-width: 1000px) {
    .main-con {
      margin-left: 10rem;
    }
  }
  
  @media only screen and (max-width: 880px) {
    .main-con {
      margin-left: 8.5rem;
    }
  }
  
  @media only screen and (max-width: 790px) {
    .main-con {
      width: 95%;
      margin-left: -6.5rem;
    }
  }
  
  @media only screen and (max-width: 650px) {
    .main-con {
      width: 110%;
      margin-left: -8.5rem;
    }
  }
  
  @media only screen and (max-width: 550px) {
    .main-con {
      margin-left: -8.5rem;
    }
  }
  
  @media only screen and (max-width: 530px) {
    .main-con {
      width: 120%;
      margin-left: -10rem;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .main-con {
      margin-left: -9.5rem;
    }
  }
  @media only screen and (max-width:400px) {
    .main-con{
          display: none;
          visibility: hidden;
    }
  }
  
  .main-con {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .main-con::-webkit-scrollbar {
    width: 0px;
  }
  
  .main-con::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .main-con::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 0px;
    border: 0px solid transparent;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
  }
  
  .main-con--story-con {
    width: 100%;
    height: 45%;
  }
  
  @media only screen and (max-width: 1280px) {
    .main-con--story-con {
      width: 105%;
    }
  }
  
  @media only screen and (max-width: 790px) {
    .main-con--story-con {
      width: 85%;
    }
  }
  
  .main-con--story-con--grid {
    width: 81.4%;
    height: 80%;
    margin-left: 8rem;
    margin-top: 2.7rem;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(5, 18%);
    grid-gap: 1rem;
  }
  
  @media only screen and (max-width: 1230px) {
    .main-con--story-con--grid {
      width: 85.4%;
      margin-left: 5rem;
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .main-con--story-con--grid {
      width: 87.4%;
      margin-left: 3rem;
    }
  }
  
  @media only screen and (max-width: 1000px) {
    .main-con--story-con--grid {
      width: 107.4%;
      margin-left: 3rem;
    }
  }
  
  @media only screen and (max-width: 930px) {
    .main-con--story-con--grid {
      width: 109%;
    }
  }
  
  @media only screen and (max-width: 840px) {
    .main-con--story-con--grid {
      width: 115%;
      margin-left: 1rem;
    }
  }
  
  @media only screen and (max-width: 790px) {
    .main-con--story-con--grid {
      grid-template-columns: repeat(5, 23%);
      margin-left: 0rem;
      width: 115%;
    }
  }
  
  @media only screen and (max-width: 650px) {
    .main-con--story-con--grid {
      width: 115%;
    }
  }
  
  .main-con--story-con--grid--box {
    text-align: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #242526;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .main-con--story-con--grid--box--img {
    width: 100%;
    height: 75%;
    object-fit: cover;
    transform: scale(1);
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  
  .main-con--story-con--grid--box--img:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }
  
  .main-con--story-con--grid--box--img--plus-circle {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #2e89ff;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-left: 3.5rem;
    margin-top: -2rem;
    position: relative;
    outline: 4px solid #242526;
  }
  
  .main-con--story-con--grid--box--img--plus-circle--icon {
    color: white;
  }
  
  .main-con--story-con--grid--box--img--plus-circle--icon--name {
    margin-top: 1rem;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    color: #E4E6EB;
    font-weight: bold;
  }
  
  .main-con--story-con--grid--normal-box {
    text-align: center !important;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #242526;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
  }
  
  .main-con--story-con--grid--normal-box--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  
  .main-con--story-con--grid--normal-box--img:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }
  
  .main-con--story-con--grid--normal-box--profile-circle {
    margin-top: -19rem;
    margin-left: 1rem;
    position: relative;
    z-index: 1000;
    border: 3px solid #2e89ff;
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .main-con--story-con--grid--normal-box--profile-circle--img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    object-fit: cover;
  }
  
  .main-con--story-con--grid--normal-box--profile-circle--img--name {
    display: flex;
    align-self: center;
    justify-self: center;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    color: #E4E6EB;
    font-weight: bolder;
    position: relative;
    margin-top: 12rem;
    margin-left: 2.8rem;
  }
  
  .main-con--story-con--grid--normal-box--loader-con {
    overflow: hidden;
    width: 110%;
    height: 100%;
    background-color: #242526;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-items: center;
  }
  
  @media only screen and (max-width: 1150px) {
    .main-con--story-con--grid--normal-box--loader-con {
      width: 115%;
    }
  }
  
  .main-con--story-con--grid--normal-box--loader-con--header {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
  }
  
  .main-con--story-con--grid--normal-box--loader-con--header--img {
    height: 45px;
    width: 45px;
    background: #656871;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: block;
    margin-top: -13rem;
    margin-left: 1rem;
  }
  
  .main-con--story-con--grid--normal-box--loader-con--header--img:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #656871 0%, #888b94 20%, #656871 40%, #656871 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 4s linear infinite;
    background-size: 800px 600px;
    -webkit-animation: shimmer 4s linear infinite;
  }
  
  .main-con--story-con--grid--normal-box--arrow-circle {
    width: 4rem;
    height: 4rem;
    background-color: #3E4042;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-top: -15rem;
    margin-left: 67rem;
  }
  
  .main-con--story-con--grid--normal-box--arrow-circle--icon {
    margin-top: 0.9rem;
    margin-left: 1rem;
    fill: #B0B3B8;
  }
  @media only screen and (max-width:1480px) {
    .main-con--story-con--grid--normal-box--arrow-circle {
      margin-left: 64rem;
    }
  }
  @media only screen and (max-width:1400px) {
    .main-con--story-con--grid--normal-box--arrow-circle {
      margin-left: 60rem;
    }
  }
  @media only screen and (max-width:1340px) {
    .main-con--story-con--grid--normal-box--arrow-circle {
      margin-left: 58rem;
    }
  }
  @media only screen and (max-width: 1300px) {
    .mobile-res-arrow {
      margin-left: 57rem;
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .mobile-res-arrow {
      margin-left: 59rem;
    }
  }
  
  @media only screen and (max-width: 1100px) {
    .mobile-res-arrow {
      margin-left: 60rem;
    }
  }
  
  @media only screen and (max-width: 1000px) {
    .mobile-res-arrow {
      position: absolute;
      margin-left: 20rem;
    }
  }
  
  @media only screen and (max-width: 990px) {
    .mobile-res-arrow {
      visibility: hidden;
      display: none;
    }
  }
  
  .main-con--mind-section {
    width: 67%;
    height: 21%;
    height: 12rem;
    background-color: #242526;
    position: relative;
    margin-left: 4rem;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    margin-left: 13rem;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin-top: -2rem;
  }
  
  @media only screen and (max-width: 1200px) {
    .main-con--mind-section {
      width: 75%;
      height: 21%;
      height: 12rem;
      background-color: #242526;
      position: relative;
      margin-left: 4rem;
      border-radius: 8px;
      -webkit-border-radius: 8px;
      margin-left: 9rem;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
      margin-top: -2rem;
    }
  }
  
  @media only screen and (max-width: 1000px) {
    .main-con--mind-section {
      width: 85%;
      height: 21%;
      height: 12rem;
      background-color: #242526;
      position: relative;
      margin-left: 4rem;
      border-radius: 8px;
      -webkit-border-radius: 8px;
      margin-left: 5rem;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
      margin-top: -2rem;
    }
  }
  
  @media only screen and (max-width: 930px) {
    .main-con--mind-section {
      width: 90%;
      margin-left: 2.5rem;
    }
  }
  
  @media only screen and (max-width: 840px) {
    .main-con--mind-section {
      width: 95%;
      margin-left: 1.3rem;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .main-con--mind-section {
      width: 98%;
      margin-left: 0.5rem;
    }
  }
  
  .main-con--mind-section--grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, 50%);
  }
  
  .main-con--mind-section--grid--search-con {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 15% 75%;
  }
  
  .main-con--mind-section--grid--search-con--img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    margin-left: 2rem;
    margin-top: 1rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .main-con--mind-section--grid--search-con--img--search-box {
    margin-left: -1rem;
    /* background-color: #3A3B3C; */
    height: 4rem;
    width: 41rem;
    outline: none;
    border: none;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 2rem;
    padding-left: 1.5rem;
    color: #E4E6EB;
    font-size: 1.7rem;
    margin-top: 1rem;
  }
  
  @media only screen and (max-width: 1230px) {
    .main-con--mind-section--grid--search-con--img--search-box {
      margin-left: 0%;
      width: 36rem;
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .main-con--mind-section--grid--search-con--img--search-box {
      margin-left: -1.2rem;
      width: 40rem;
    }
  }
  
  @media only screen and (max-width: 750px) {
    .main-con--mind-section--grid--search-con--img--search-box {
      width: 43rem;
    }
  }
  
  @media only screen and (max-width: 750px) {
    .main-con--mind-section--grid--search-con--img--search-box {
      width: 41rem;
    }
  }
  
  @media only screen and (max-width: 690px) {
    .main-con--mind-section--grid--search-con--img--search-box {
      width: 39rem;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .main-con--mind-section--grid--search-con--img--search-box {
      width: 36rem;
      margin-left: -0.5rem;
    }
  }
  
  .main-con--mind-section--grid--search-con--img--search-box::placeholder {
    font-size: 1.7rem;
    color: #B0B3B8;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
  }
  
  .main-con--mind-section--grid--search-con--divider {
    background-color: rgba(255, 255, 255, 0.3);
    margin-top: 6rem;
    margin-left: 1.4rem;
    height: 0.1rem;
    width: 90%;
    position: absolute;
    z-index: 100;
  }
  
  .main-con--mind-section--grid--chose-section {
    margin-top: 0.5rem;
    width: 90%;
    height: 4.5rem;
    margin-left: 1.5rem;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(3, 33.3%);
  }
  
  .main-con--mind-section--grid--chose-section--live {
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -ms-border-radius: 0.8rem;
    -o-border-radius: 0.8rem;
  }
  
  .main-con--mind-section--grid--chose-section--live:hover {
    cursor: pointer;
    background-color: rgba(77, 79, 80, 0.5);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .main-con--mind-section--grid--chose-section--live--icon--name {
    font-size: 1.3rem;
    color: #B0B3B8;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-left: 0.5rem;
  }
  
  .active-line {
    width: 67%;
    height: 10%;
    background-color: #242526;
    margin-left: 4rem;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    margin-left: 13rem;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin-top: 1.5rem;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 30% repeat(6, 11%);
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    grid-gap: 0rem;
    position: relative;
  }
  
  @media only screen and (max-width: 1200px) {
    .active-line {
      width: 75%;
      height: 10%;
      background-color: #242526;
      margin-left: 4rem;
      border-radius: 8px;
      -webkit-border-radius: 8px;
      margin-left: 9rem;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
      margin-top: 1.5rem;
      display: grid;
      grid-template-rows: 100%;
      grid-template-columns: 30% repeat(6, 11%);
      align-items: center;
      justify-items: center;
      align-content: center;
      justify-content: center;
      grid-gap: 0rem;
    }
  }
  
  @media only screen and (max-width: 1000px) {
    .active-line {
      margin-left: 5rem;
      width: 85%;
    }
  }
  
  @media only screen and (max-width: 930px) {
    .active-line {
      width: 90%;
      margin-left: 3rem;
    }
  }
  
  @media only screen and (max-width: 840px) {
    .active-line {
      width: 95%;
      margin-left: 1.3rem;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .active-line {
      width: 98%;
      margin-left: 0.5rem;
    }
  }
  
  .active-line--btn {
    width: 14.2rem;
    height: 4rem;
    border: 0.5px solid #4599FF;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-radius: 2rem;
    position: relative;
    left: -0.2rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .active-line--btn:hover {
    cursor: pointer;
    background-color: rgba(77, 79, 80, 0.9);
    transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .active-line--btn--icon--name {
    font-size: 1.4rem;
    color: #4599FF;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-left: 0.5em;
  }
  
  .active-line--img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .active-line--img--dot {
    position: absolute;
    margin-left: 2rem;
    margin-top: 2.2rem;
    height: 1.1rem;
    width: 1.1rem;
    border: 2px solid black;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #31a12c;
  }
  
  .active-line--img--dot--second {
    position: absolute;
    height: 1.1rem;
    width: 1.1rem;
    border: 2px solid black;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #31a12c;
    margin-top: 3rem;
    margin-left: -9.2rem;
  }
  
  .active-line--img--dot--third {
    position: absolute;
    margin-left: 13rem;
    margin-top: 2.4rem;
    height: 1.1rem;
    width: 1.1rem;
    border: 2px solid black;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #31a12c;
  }
  
  .post-con {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  
  .post-con--box {
    overflow: hidden;
    width: 67%;
    height: 63.5rem;
    background-color: #242526;
    margin-left: 6rem;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 100%;
    margin-left: 13rem;
    grid-template-rows: 10% 78% 12%;
  }
  
  @media only screen and (max-width: 1200px) {
    .post-con--box {
      overflow: hidden;
      width: 75%;
      height: 63.5rem;
      background-color: #242526;
      margin-left: 6rem;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      margin-top: 2rem;
      display: grid;
      grid-template-columns: 100%;
      margin-left: 9rem;
      grid-template-rows: 10% 78% 12%;
    }
  }
  
  @media only screen and (max-width: 1000px) {
    .post-con--box {
      margin-left: 5rem;
      width: 85%;
    }
  }
  
  @media only screen and (max-width: 930px) {
    .post-con--box {
      width: 90%;
      margin-left: 3rem;
    }
  }
  
  @media only screen and (max-width: 840px) {
    .post-con--box {
      width: 95%;
      margin-left: 1.3rem;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .post-con--box {
      width: 98%;
      margin-left: 0.5rem;
    }
  }
  
  .post-con--box--header {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
  }
  
  .post-con--box--header--img-con {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
  }
  
  .post-con--box--header--img-con--img {
    margin-left: 1.5rem;
    border: 2px solid #2e89ff;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  
  .post-con--box--header--img-con--img--name-con {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
  }
  
  .post-con--box--header--img-con--img--name-con--name {
    color: #E4E6EB;
    font-size: 1.4rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    margin-left: 1rem;
    margin-top: -2rem;
  }
  
  .post-con--box--header--img-con--img--name-con--time {
    text-decoration: none;
    color: #B0B3B8;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin-top: 1.5rem;
    margin-left: -4.7rem;
    transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .post-con--box--header--img-con--img--name-con--time:hover {
    cursor: pointer;
    transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
    text-decoration: underline;
  }
  
  .post-con--main {
    width: 100%;
    height: 100%;
  }
  
  .post-con--main--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .post-con--reaction {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, 50%);
  }
  
  .post-con--reaction--reacted-con {
    width: 100%;
    height: 100%;
    display: flex;
  }
  
  .post-con--reaction--reacted-con--reacted--icon {
    margin-left: 1.8rem;
    margin-top: 1rem;
  }
  
  .post-con--reaction--reacted-con--reacted--icon--count {
    color: #B0B3B8;
    font-size: 1.3rem;
    font-family: 'Roboto', sans-serif;
    margin-left: 0.5rem;
    margin-top: 1rem;
  }
  
  .post-con--reaction--reacted-con--share {
    color: #B0B3B8;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    margin-left: 28rem;
    margin-top: 1rem;
  }
  
  @media only screen and (max-width: 1350px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 23rem;
      margin-top: 1.1rem;
    }
  }
  
  @media only screen and (max-width: 1220px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 20rem;
    }
  }
  
  @media only screen and (max-width: 1190px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 25rem;
    }
  }
  
  @media only screen and (max-width: 1150px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 22rem;
    }
  }
  
  @media only screen and (max-width: 1100px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 27rem;
    }
  }
  
  @media only screen and (max-width: 880px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 25rem;
    }
  }
  
  @media only screen and (max-width: 790px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 30rem;
    }
  }
  
  @media only screen and (max-width: 750px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 27rem;
    }
  }
  
  @media only screen and (max-width: 750px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 25rem;
    }
  }
  
  @media only screen and (max-width: 690px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 23rem;
    }
  }
  
  @media only screen and (max-width: 650px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 28rem;
    }
  }
  
  @media only screen and (max-width: 580px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 23rem;
    }
  }
  
  @media only screen and (max-width: 550px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 21rem;
    }
  }
  
  @media only screen and (max-width: 530px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 23rem;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .post-con--reaction--reacted-con--share {
      margin-left: 21rem;
    }
  }
  
  .post-con--divider {
    background-color: rgba(128, 128, 128, 0.4);
    height: 0.1rem;
    width: 295%;
    z-index: 1000;
    margin-top: -4.2rem;
    margin-left: 0.7rem;
    position: relative;
  }
  
  .post-con--reaction-con {
    width: 93%;
    height: 100%;
    margin-left: 1.5rem;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(3, 33.3%);
  }
  
  .post-con--reaction-con--box {
    text-align: center;
    height: 93%;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -ms-border-radius: 0.8rem;
    -o-border-radius: 0.8rem;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .post-con--reaction-con--box:hover {
    cursor: pointer;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: rgba(77, 79, 80, 0.7);
  }
  
  .post-con--reaction-con--box--icon {
    -webkit-filter: invert(62%) sepia(98%) saturate(12%) hue-rotate(175deg) brightness(90%) contrast(96%);
    width: 1.8rem;
    height: 1.8rem;
    fill: transparent;
    stroke-width: 3px;
    stroke: #B0B3B8;
  }
  
  .post-con--reaction-con--box--icon--name {
    font-size: 1.4rem;
    color: #B0B3B8;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-left: 0.5rem;
    margin-top: 0.4rem;
  }
  
  .res-story-con {
    margin-top: 0.5rem;
    width: 100vw;
    height: 21rem;
    background-color: #242526;
    display: none;
    visibility: hidden;
  }
  
  @media only screen and (max-width: 450px) {
    .res-story-con {
      display: block;
      visibility: visible;
    }
  }
  
  .res-story-con--grid {
    padding-top: 0.4rem;
    padding-left: 0.5rem;
    width: 98%;
    height: 98%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(4, 25%);
    overflow-x: scroll;
    overflow-y: hidden;
    /* Chrome, Edge, and Safari */
  }
  
  .res-story-con--grid {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .res-story-con--grid::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  
  .res-story-con--grid::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .res-story-con--grid::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  .res-story-con--grid--story-box {
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    display: grid;
    grid-template-rows: 75% 25%;
    grid-template-columns: 100%;
    overflow: hidden;
  }
  
  .res-story-con--grid--story-box--img-con {
    width: 100%;
    height: 100%;
  }
  
  .res-story-con--grid--story-box--img-con--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .res-story-con--grid--story-box--upload-con {
    width: 100%;
    height: 100%;
    background-color: #303233;
  }
  
  .res-story-con--grid--story-box--upload-con--txt {
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: "Roboto";
    margin-left: 1.4rem;
    margin-top: 0.3rem;
  }
  
  .res-story-con--grid--story-box--upload-con--circle {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #2e89ff;
    margin-top: -1.3rem;
    margin-left: 3.3rem;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    border: 3px solid #303233;
  }
  
  .res-story-con--grid--story-box--upload-con--circle--icon {
    fill: #fff;
    width: 2rem;
    height: 2rem;
  }
  
  .res-story-con {
    display: none;
    visibility: hidden;
  }
  
  @media only screen and (max-width: 450px) {
    .res-story-con {
      visibility: visible;
      display: block;
    }
  }
  
  .res-story-con--grid {
    grid-gap: 0.7rem;
  }
  
  .res-story-con--grid--normal-box {
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    overflow: hidden;
    background-image: url("../img/group-story/user-3-story.webp");
    background-size: cover;
    display: grid;
    grid-template-rows: 25% repeat(2, 40%);
    grid-template-columns: 100%;
  }
  
  .res-story-con--grid--normal-box--profile-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 3px solid #ffdf00;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
  }
  
  .res-story-con--grid--normal-box--profile-circle--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .res-story-con--grid--normal-box--user-name {
    grid-row: 3 / 4;
    color: #fff;
    font-weight: bold;
    font-family: 'Roboto';
    font-size: 1.3rem;
    text-align: center;
    margin-top: 2.7rem;
  }
  
  .res-mind-con {
    width: 100vw;
    height: 10rem;
    background-color: #242526;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, 50%);
    display: none;
    visibility: hidden;
  }
  
  @media only screen and (max-width: 450px) {
    .res-mind-con {
      display: grid;
      visibility: visible;
    }
  }
  
  .res-mind-con--whatinmind {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 20% 80%;
  }
  
  .res-mind-con--whatinmind--img {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
  }
  
  .res-mind-con--whatinmind--img--img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    margin-top: -0.5rem;
  }
  
  @media only screen and (max-width: 330px) {
    .res-mind-con--whatinmind--img--img {
      width: 4rem;
      height: 4em;
    }
  }
  
  .res-mind-con--whatinmind--icon {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    visibility: hidden;
    margin-top: -0.5rem;
  }
  
  @media only screen and (max-width: 400px) {
    .res-mind-con--whatinmind--icon {
      visibility: hidden;
    }
  }
  
  .res-mind-con--whatinmind--search-box--search {
    outline: none;
    border: none;
    width: 95%;
    height: 4.5rem;
    border-radius: 2.5rem;
    background-color: #3a3b3c;
    margin-left: -1.5rem;
    padding-left: 1.5rem;
    padding-top: 0.3rem;
  }
  
  @media only screen and (max-width: 400px) {
    .res-mind-con--whatinmind--search-box--search {
      margin-left: -1rem;
      width: 98%;
    }
  }
  
  @media only screen and (max-width: 350px) {
    .res-mind-con--whatinmind--search-box--search {
      margin-left: -0.5rem;
    }
  }
  
  @media only screen and (max-width: 330px) {
    .res-mind-con--whatinmind--search-box--search {
      width: 98%;
      height: 4rem;
    }
  }
  
  .res-mind-con--whatinmind--search-box--search::placeholder {
    font-size: 1.7rem;
    font-weight: bold;
    font-family: "Roboto";
    color: #b0b3b8;
    text-overflow: ellipsis;
  }
  
  .res-mind-con--chose-con {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(3, 33.3%);
  }
  
  @media only screen and (max-width: 350px) {
    .res-mind-con--chose-con {
      grid-template-columns: repeat(2, 50%);
    }
  }
  
  .res-mind-con--chose-con--live {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
  }
  
  .res-mind-con--chose-con--live--icon {
    fill: #f3425f;
    width: 2rem;
    height: 2rem;
  }
  
  .res-mind-con--chose-con--live--icon--txt {
    color: #e3e6eb;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Roboto";
    margin-left: 0.8rem;
  }
  
  .res-mind-con--chose-con--photo {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
  }
  
  .res-mind-con--chose-con--photo--icon {
    fill: #45bd62;
    width: 2rem;
    height: 2rem;
  }
  
  .res-mind-con--chose-con--photo--icon--txt {
    color: #e3e6eb;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Roboto";
    margin-left: 0.8rem;
  }
  
  .res-mind-con--chose-con--feeling {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
  }
  
  @media only screen and (max-width: 350px) {
    .res-mind-con--chose-con--feeling {
      visibility: hidden;
      display: none;
    }
  }
  
  .res-mind-con--chose-con--feeling--icon {
    fill: #f7b928;
    width: 2rem;
    height: 2rem;
  }
  
  .res-mind-con--chose-con--feeling--icon--txt {
    color: #e3e6eb;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Roboto";
    margin-left: 0.8rem;
  }
  
  .res-post-con {
    width: 100vw;
    height: 400vh;
    margin-top: 0.5rem;
    overflow-y: scroll;
    visibility: hidden;
    display: none;
  }
  
  @media only screen and (max-width: 450px) {
    .res-post-con {
      display: inline;
      visibility: visible;
    }
  }
  
  .res-post-con--grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: scroll !important;
    /* Chrome, Edge, and Safari */
  }
  
  .res-post-con--grid {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  .res-post-con--grid::-webkit-scrollbar {
    width: 0px;
  }
  
  .res-post-con--grid::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .res-post-con--grid::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  .res-post-con--grid--post {
    margin-top: 1rem;
    width: 96%;
    margin-left: 0.7rem;
    height: 44rem;
    background-color: #242526;
    display: grid;
    grid-template-rows: 14% 67% 19%;
    grid-template-columns: 100%;
    border-radius: 0.8rem;
  }
  
  .res-post-con--grid--post--header {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 15% 67% 18%;
  }
  
  .res-post-con--grid--post--header--img-con {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
  }
  
  .res-post-con--grid--post--header--img-con--img {
    margin-top: -0.2rem;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 50%;
  }
  
  .res-post-con--grid--post--header--name-con {
    width: 100%;
    height: 100%;
  }
  
  .res-post-con--grid--post--header--name-con--name {
    font-size: 1.4rem;
    color: #e3e6eb;
    font-weight: bold;
    font-family: "Roboto";
    margin-top: 1rem;
  }
  
  .res-post-con--grid--post--header--name-con--name--time {
    color: #b0b3b8;
    font-size: 1.2rem;
    margin-top: 0.3rem;
  }
  
  .res-post-con--grid--post--header--options {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(2, 50%);
    padding-top: 1rem;
    padding-left: 1rem;
  }
  
  .res-post-con--grid--post--main {
    width: 100%;
    height: 100%;
  }
  
  .res-post-con--grid--post--main--img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .res-post-con--grid--post--main--img--img {
    width: 100%;
    height: 100%;
  }
  
  .res-post-con--grid--post--footer {
    width: 100%;
    height: 100%;
  }
  
  .res-post-con--grid--post--footer--grid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: grid;
    grid-template-rows: 50% 3% 47%;
    grid-template-columns: 100%;
  }
  
  .res-post-con--grid--post--footer--grid--reacted-con {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 6% 80%;
    padding-top: 0.8rem;
  }
  
  .res-post-con--grid--post--footer--grid--reacted-con--txt {
    margin-left: 1rem;
    margin-top: -0.2rem;
    display: flex;
    align-items: center;
    align-content: center;
    font-family: "Roboto";
    font-weight: bold;
    font-size: 1.4rem;
    color: #e3e6eb;
  }
  
  .res-post-con--grid--post--footer--grid--divider {
    background-color: rgba(128, 128, 128, 0.4);
    height: 0.1rem;
    width: 95%;
    margin-left: 0.8rem;
    margin-top: 0.2rem;
  }
  
  .res-post-con--grid--post--footer--grid--reaction {
    width: 100%;
    height: 100%;
  }
  
  .res-post-con--grid--post--footer--grid--reaction--grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(3, 33.3%);
  }
  
  .res-post-con--grid--post--footer--grid--reaction--grid--like-con {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    padding-right: 1.5rem;
  }
  
  .res-post-con--grid--post--footer--grid--reaction--grid--like-con--txt {
    color: #b0b3b8;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: "Roboto";
    margin-left: 0.5rem;
  }
  
  *,
  *::after,
  *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }
  
  html {
    font-size: 62.5%;
  }
  
  body {
    box-sizing: border-box;
    /* background-color: #18191A; */
    overflow-x: hidden;
    /* Chrome, Edge, and Safari */
  }
  
  body {
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;
  }
  
  body::-webkit-scrollbar {
    width: 5px;
  }
  
  body::-webkit-scrollbar-track {
    background: transparent;
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  
  @media only screen and (max-width:680px) {
    .menu-icon-inner {
      display: none;
    }
  }