body {
    background: #e9ebee;
    }
    textarea,
    .form-control {
      border: 0;
      border-radius: 0;
      resize: none;
    }
    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
      margin-bottom: 50px;
  
      overflow: hidden;
    }
    .topbar .right-group {
      float: right;
    }
    .topbar .right-group .link-group {
      position: relative;
      top: -4px;
      display: inline-block;
      padding: 0;
    }
    .topbar .right-group .link-group a {
      padding: 9px 8px;
      color: #fff;
      font-size: 12px;
    }
    .topbar .right-group .link-group a img {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 9px;
    }
    .topbar .right-group .link-group a:hover {
      background: #355486;
      text-decoration: none;
    }
    .topbar .right-group .link-group:nth-child(2) a {
      margin-right: 16px;
      border-left: 1px solid #355485;
    }
    .topbar .right-group .notification-group {
      display: inline-block;
      position: relative;
      top: 3px;
    }
    .topbar .right-group .notification-group .link-group a {
      margin: 0;
      border: 0;
    }
    .topbar .right-group .notification-group a {
      color: #17253c;
      font-size: 21px;
    }
    .topbar .right-group .notification-group a:hover {
      color: #111;
      background: transparent;
    }
    .topbar .right-group .link-group:nth-child(4) a {
      margin-left: 16px;
      border-left: 1px solid #355485;
    }
    .topbar .search-box {
      display: inline-block;
      width: calc(100vw - 72%);
    }
    .topbar .search-box .input-group * {
      font-size: 12px;
      height: 25px;
      border: 1px solid #fff;
      background: #fff;
      outline: 0;
    }
    .topbar .search-box .input-group button {
      color: #7a7a7a;
      transition: all ease 150ms;
    }
    .topbar .search-box .input-group button:hover {
      color: #000;
    }
    .left-content {
      left: 0;
    }
    .left-content {
     height: 100%;
    }
    .left-content .global-links {
      padding: 10px;
      margin-left: 10px;
    }
    .left-content .global-links a {
      display: inline-block;
      color: #000;
      font-size: 12px;
      width: 100%;
      padding: 2px 8px;
    }
    .left-content .global-links a img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
    .left-content .global-links .counter {
      float: right;
      color: #90949c;
    }
    .left-content .global-links .counter .fa-ellipsis-h {
      font-size: 20px;
    }
    .left-content .global-links .activepage {
      padding-top: 5px;
      background: #fff;
      border-radius: 2px;
      border: 1px solid #dddfe2;
    }
    .left-content .group-content h4 {
      margin: 20px 0 8px 0;
      font-size: 13px;
      color: #444;
      text-transform: uppercase;
    }
    .left-content a:last-child .fa-caret-down {
      margin-right: 12px;
    }
    .feed-content {
      position: absolute;
      top: 0px;
      bottom: 0;
      left: 350px;
      right: 0;
  
      background: #e9ebee;
     
    } 
    .feed-content .recentcontainer {
      border-radius: 2px;
      border: 1px solid #dddfe2;
      margin-bottom: 15px;
  
    }
    .feed-content .recentcontainer .newpostheader,
    .feed-content .recentcontainer .newpostfooter {
      padding: 4px 5px;
      background: #f6f7f9;
    }
    .feed-content .recentcontainer .newpostheader li,
    .feed-content .recentcontainer .newpostfooter li {
      display: inline-block;
      width: 100%;
      text-align: center;
    }
    .feed-content .recentcontainer .newpostheader li:first-child,
    .feed-content .recentcontainer .newpostfooter li:first-child {
      float: left;
    }
    .feed-content .recentcontainer .newpostheader li:last-child,
    .feed-content .recentcontainer .newpostfooter li:last-child {
      float: rght;
    }
    .feed-content .recentcontainer .newpostheader h4,
    .feed-content .recentcontainer .newpostfooter h4 {
      font-size: 14px;
      margin: 10px 5px;
      color: #666;
    }
    .feed-content .recentcontainer .newpostheader a:first-child,
    .feed-content .recentcontainer .newpostfooter a:first-child {
      margin-right: 5px;
    }
    .feed-content .recentcontainer .newpostheader a,
    .feed-content .recentcontainer .newpostfooter a {
      font-size: 14px;
    }
    .feed-content .recentcontainer .newpostheader a img,
    .feed-content .recentcontainer .newpostfooter a img {
      width: 40px;
      height: 40px;
      margin: 5px 5px 0 5px;
    }
    .feed-content .recentcontainer .newpostheader a .name,
    .feed-content .recentcontainer .newpostfooter a .name {
      position: relative;
      top: -6px;
    }
    .feed-content .recentcontainer .newpostheader a .fa,
    .feed-content .recentcontainer .newpostfooter a .fa {
      display: inline-block;
      margin: 5px;
    }
    .feed-content .recentcontainer .newpostheader > span,
    .feed-content .recentcontainer .newpostfooter > span {
      position: relative;
      top: -6px;
      left: -4px;
      font-size: 14px;
    }
    .feed-content .recentcontainer .newpostheader p,
    .feed-content .recentcontainer .newpostfooter p {
      position: relative;
      top: -22px;
      left: 55px;
      font-size: 12px;
    }
    .feed-content .recentcontainer .newpostheader p a,
    .feed-content .recentcontainer .newpostfooter p a {
      font-size: 12px;
      color: #4b4f56;
      margin-right: 5px;
    }
    .feed-content .recentcontainer .newpostheader .rightsideofpost,
    .feed-content .recentcontainer .newpostfooter .rightsideofpost {
      position: relative;
      top: -73px;
      float: right;
    }
    .feed-content .recentcontainer .newpostheader .rightsideofpost .personpostmenu,
    .feed-content .recentcontainer .newpostfooter .rightsideofpost .personpostmenu {
      color: #4b4f56;
    }
    .feed-content .recentcontainer .newpostheader li a,
    .feed-content .recentcontainer .newpostfooter li a {
      font-size: 14px;
      color: #4b4f56;
      margin-right: 5px;
    }
    .feed-content .recentcontainer .newpostheader li a .fa,
    .feed-content .recentcontainer .newpostfooter li a .fa {
      display: inline-block;
      margin: 5px;
    }
    .feed-content .recentcontainer .community-counter {
      padding: 4px 5px;
      background: #f6f7f9;
    }
    .feed-content .recentcontainer .community-counter li a {
      font-size: 14px;
      color: #4b4f56;
      margin-right: 5px;
    }
    .feed-content .recentcontainer .community-counter li a .fa {
      display: inline-block;
      margin: 5px;
    }
    .feed-content .recentcontainer .newpost textarea,
    .feed-content .recentcontainer .newpost .postcontent {
      display: inherit;
      padding: 10px;
      width: 100%;
      height: 100%;
      background: #f6f7f9;
    }
    .feed-content .recentcontainer .newpost .postcontent {
      position: relative;
      margin-top: -40px;
      padding-bottom: 40px;
      white-space: pre-line;
    }
    .feed-content .recentcontainer .newpostfooter {
      margin-top: 1px;
    }
    .feed-content .recentcontainer .commentpost {
      display: inherit;
      background: #f6f7f9;
      margin-top: -1px;
    }
    .feed-content .recentcontainer .commentpost img {
      margin: 10px;
      height: 40px;
    }
    .feed-content .recentcontainer .commentpost .input-group-btn {
      display: inline-block;
      background: #fff;
    }
    .feed-content .recentcontainer .commentpost .input-group-btn a {
      margin-top: 10px;
    }
    .feed-content .recentcontainer:nth-child(1) .newpostfooter li:first-child .fa {
      color: #96b756;
    }
    .feed-content .recentcontainer:nth-child(1) .newpostfooter li:nth-child(2) .fa {
      color: #f1c04e;
    }
    .feed-content .recentcontainer:nth-child(1) .newpostfooter li:last-child a:last-child {
      font-size: 20px;
    }
  
    .right-content {
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
     
    
      right: 0;
      width: 390px;
   
      overflow-x: auto;
  
    }
    .right-content ul {
      list-style: none;
      padding: 0;
      margin: 0;
      height: 50%;
      overflow: auto;
    }
    .right-content ul li {
      display: block;
      padding: 5px 5px 15px 5px;
      width: 100%;
  
      cursor: pointer;
    }
    .right-content ul:first-child {
      list-style: none;
      padding: 0;
      height: 50%;
      overflow: auto;
    }
    .right-content ul:first-child li {
      display: block;
      padding: 5px 5px 15px 5px;
      width: 100%;
   
      cursor: pointer;
    }
    .right-content ul:first-child li a {
      padding: 5px;
      font-size: 12px;
    }
    .right-content ul:first-child li img {
      display: inline-block;
      width: 32px;
      border-radius: 50%;
      height: 32px;
    }
    .right-content ul:first-child li b,
    .right-content ul:first-child li span {
      color: #000;
    }
    .right-content ul:first-child li span {
      color: #545454;
    }
    .right-content ul:first-child li a:hover {
      text-decoration: none;
    }
    .right-content ul:first-child li:hover {
      background: #ccc;
    }
    .right-content ul:nth-child(2) {
      list-style: none;
      padding: 0;
      height: 50%;
      overflow: auto;
    }
    .right-content ul:nth-child(2) h4 {
      font-size: 12px;
      margin-top: 15px;
      color: #474747;
      text-transform: uppercase;
    }
    .right-content ul:nth-child(2) li {
      display: block;
      padding: 5px 5px 15px 5px;
      width: 100%;
      border-bottom: 1px solid #a3a3a3;
      cursor: pointer;
    }
    .right-content ul:nth-child(2) li a {
      padding: 5px;
      font-size: 12px;
    }
    .right-content ul:nth-child(2) li img {
      display: inline-block;
      width: 32px;
      height: 32px;
    }
    .right-content ul:nth-child(2) li b,
    .right-content ul:nth-child(2) li span {
      color: #000;
    }
    .right-content ul:nth-child(2) li span {
      display: block;
      float: right;
      position: relative;
      top: 8px;
      font-size: 9px;
      padding: 1px 2px;
      color: #545454;
      background: #fff;
      border: 1px solid #b8b8b8;
    }
    .right-content ul:nth-child(2) li .fa {
      float: right;
      position: relative;
      top: 8px;
      color: #1f0;
    }
    .right-content ul:nth-child(2) li a:hover {
      text-decoration: none;
    }
    .right-content ul:nth-child(2) li:hover {
      background: #ccc;
    }
    @media all and (max-width: 700px) {
      .left-content {
        display: none;
      }
      .feed-content {
        left: 0;
      }
      .topbar .right-group > .link-group {
        display: none;
      }
    }
    @media all and (max-width: 1000px) {
      .thirdcol-content {
        display: none;
      }
      .feed-content {
        right: 0;
      }  
    }  @media all and (min-width: 1000px) {
      .thirdcol-content {
        display: none;
      }
      .feed-content {
        right: 100px;
        left: 350px;
      }
    }
    @media all and (min-width: 1260px) {
      .feed-content {
        right: 250px;
      }
      .right-content {
        right: 0;
      }
    }
    @media all and (min-width: 1260px) {
      .feed-content {
        right: 200px;
        left: 320;margin-right: 200px;
      }
      .thirdcol-content {
        right: 275px;
      }
      .right-content {
        display: block;
      }  
    } @media all and (min-width: 700px) {.topbar {
      display: none;
     }}
    .pointer {
      cursor: pointer;
    }
    .ib {
      display: inline-block;
    }
    .fl {
      float: left;
    }
    .fr {
      float: right;
    }
    .tc {
      text-align: center;
    }	*,
    *:before,
    *:after{
        padding: 0;
        margin: 0;
        
    }
    .popup{
        background-color: #ffffff;
      width: 400px;
      box-shadow: 8000px 8000px 16000px 16000px rgba(19, 16, 16, 0.664);
        position: fixed;
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
        border-radius: 8px;
        font-family: "Poppins",sans-serif;
        display: none;
        text-align: center;
      
      
    }
    
    a{
      cursor: pointer;
    }
    .popup button{
        display: block;
        margin:  0 0 20px auto;
        background-color: transparent;
        font-size: 30px;
        color: #c5c5c5;
        border: none;
        outline: none;
        cursor: pointer;
      border-radius: 10px;
    }
    .popup p{
        font-size: 14px;
        text-align: justify;
        margin: 20px 0;
        line-height: 25px;
    }
    .popup button{
        display: block;
        width: 100%;
      height: 40px;
        position: relative;
        text-align: center;
        background-color: #0f72e5;
        color: #ffffff;
        text-decoration: none;
        padding: 5px 0;
      font-size: 16px;
    }
    .modal{
      position: absolute;
      right: 0;
      opacity: 0;
      bottom: -100%;
      width: 360px;
      transition: bottom 0.4s, opacity 0.4s;
      box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
    }
    .popup.show{
      bottom: 0;
      opacity: 1;
 
    }
    .popup .top-content{
      background: #34495e;
      width: 100%;
      padding: 0 0 30px 0;
    }
    .top-content .left-text{
      text-align: left;
      padding: 10px 15px;
      font-size: 18px;
      color: #f2f2f2;
      font-weight: 500;
      user-select: none;
    }
    .top-content .close-icon{
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 23px;
      color: silver;
      cursor: pointer;
    }
    .close-icon:hover{
      color: #b6b6b6;
    }
    .top-content .fa-camera-retro{
      font-size: 80px;
      color: #f2f2f2;
    }
    .popup .bottom-content{
      background: white;
      width: 100%;
      padding: 15px 20px;
    }
    .bottom-content .text{
      font-size: 28px;
      font-weight: 600;
      color: #34495e;
    }
    .bottom-content p{
      font-size: 18px;
      line-height: 27px;
      color: grey;
    }
    .bottom-content .close-btn{
      padding: 15px 0;
    }
    body {
      min-height: 100vh;
      min-height: -webkit-fill-available;
    }
    
    html {
      height: -webkit-fill-available;
    }
    
    main {
      height: 100vh;
      height: -webkit-fill-available;
      max-height: 100vh;
      overflow-x: auto;
      overflow-y: hidden;
    }
    
    .dropdown-toggle { outline: 0; }
    
    .btn-toggle {
      padding: .25rem .5rem;
      font-weight: 600;
      color: var(--bs-emphasis-color);
      background-color: transparent;
    }
    .btn-toggle:hover,
    .btn-toggle:focus {
      color: rgba(var(--bs-emphasis-color-rgb), .85);
      background-color: var(--bs-tertiary-bg);
    }
    
    .btn-toggle::before {
      width: 1.25em;
      line-height: 0;
      content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
      transition: transform .35s ease;
      transform-origin: .5em 50%;
    }
    
    [data-bs-theme="dark"] .btn-toggle::before {
      content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    }
    
    .btn-toggle[aria-expanded="true"] {
      color: rgba(var(--bs-emphasis-color-rgb), .85);
    }
    .btn-toggle[aria-expanded="true"]::before {
      transform: rotate(90deg);
    }
    
    .btn-toggle-nav a {
      padding: .1875rem .5rem;
      margin-top: .125rem;
      margin-left: 1.25rem;
    }
    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
      background-color: var(--bs-tertiary-bg);
    }
    
    .scrollarea {
      overflow-y: auto;
    }
    
  
  
  
  
    /* Import Google font - Poppins */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  body {
  
  }
  .wrapper {
  
  }
  .wrapper i {
    top: 70px;
    height: 30px;
    width: 30px;
    cursor: pointer;
    font-size: 1.25rem;
    position: absolute;
    text-align: center;
    line-height: 30px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.23);
    transform: translateY(-50%);
    transition: transform 0.1s linear;
    
  }
  .wrapper i:active{
    transform: translateY(-50%) scale(0.85);
  }
  .wrapper i:first-child{
    left: -1px;
  }
  .wrapper i:last-child{
    right: -1px;
  }
  .wrapper .carousel{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((15% ) - 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    border-radius: 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;margin-bottom: 0;margin-top: 10px;
  }
  .carousel::-webkit-scrollbar {
    display: none;
  }
  .carousel.no-transition {
    scroll-behavior: auto;
  }
  .carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
  .carousel.dragging .card {
    cursor: grab;
    user-select: none;
  }
  .carousel :where(.card, .img) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .carousel .card {
    scroll-snap-align: start;
    height: px;
    list-style: none;
  
    background: none;
    cursor: pointer;
  
     border-radius: 8px;
    border: none
  ;
  }
  .carousel .card .img {
    background: #8B53FF;
    height: 66px;
    width: 66px;
    border-radius: 50%;
  }
  .card .img img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
  }
  .carousel .card h2 {
    font-weight: 500;
    font-size: 1.56rem;
    margin: 30px 0 5px;
  }
  .carousel .card span {
    color: #6A6D78;
    font-size: 1.31rem;
  }
  
  @media screen and (max-width: 900px) {
    .wrapper .carousel {
      grid-auto-columns: calc((20% ) - 9px);
    }
  }
  
  @media screen and (max-width: 600px) {
    .wrapper .carousel {
      grid-auto-columns: 20%;
    }
  }