#navbar button {
    background-color: #4285F4;
    border: none;
    color: white!important;
}
#navbar #conversation {
    background-color: #4285f4;
    color: white !important;
    border-radius: 8px;
    border-color: white !important;
  }
  .cat-tamcat{
    display: flex;
  }
  .cat {
    cursor: pointer;
  }
#maincontent .col-md-4 .card{
    background-color:#F0F0F0;
    border: none;
}
#maincontent .offset {
    position: -webkit-sticky;
    position: sticky;
    top: 130;
}
#maincontent .card .list{
    color:var(--bs-secondary);
    cursor: pointer;
}
#maincontent .col-md-4 .listsubcategory:hover{
    background-color:#DEEAFD;
}
#maincontent .listsubcategory.active {
    background-color:#DEEAFD !important;
    color: black !important;
    font-weight: 600 !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.chat{
    background: #4285f4;
    border-radius: 10px;
    display: inline-block;
    padding: 10px;
    color: #fff;
    font-weight: 500;
    position: relative;
}
.chat img {
    display: none;
}
.chat.u1{
    float: left;
    clear: both;
    border-top-left-radius: 0px;
    background: #4285f4;
    margin-right:100px !important;
}
.chat.u1:before{
    content: "";
    width: 0px;
    height: 0px;
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid #4285f4;
    border-top: 5px solid #4285f4;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 0px;
    left: -10px;
}

.chat.u3{
    float: left;
    clear: both;
    border-top-left-radius: 9px;
    background: #ecf0f7;
    color:black;
    margin-right: 100px !important;
}
.chat.u3:before{
    content: "";
    width: 0px;
    /* height: 0px;
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid #ecf0f7;
    border-top: 5px solid #e2edfd;
    border-bottom: 5px solid transparent;
    position: absolute;
    color:black;
    top: 0px;
    left: -10px; */
}
.chat.u2{
    float: right;
    clear: both;
    border-top-right-radius: 0px;
    background: #DEEAFD;
    color: black;
    margin-left: 100px !important;
}
.chat.u2:before{
    content: "";
    width: 0px;
    height: 0px;
    display: block;
    border-left: 5px solid #DEEAFD;
    border-right: 5px solid transparent;
    border-top: 5px solid #DEEAFD;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 0px;
    right: -10px;
    color: black;
}
.chat.u4{
    float: right;
    clear: both;
    border-top-right-radius: 9px;
    background: #eaedf2;
    color: black;
    margin-left: 100px !important;
}
.chat.u4:before{
    content: "";
    color: black;
}
.scroll::-webkit-scrollbar {
    width: 1px;          
  }
.scroll::-webkit-scrollbar-thumb {   
   border-radius: 30px;
   width:3px;
   background: #6ca1f5;
   box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
.scroll::-webkit-scrollbar-track {     
   background-color: #fff;
   border-radius:10px;
   background: #eaedf2;
}
.lists {
    width: 94%;
    height: 100%;
  }
.scroll {
  width: 100%;
  padding-right: 17px;
  box-sizing: content-box;
}
.next-blog .card {
    background-color: #679bf2 !important;
    border-radius: 9px !important;
    cursor: pointer;
    color: white;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}
#scroll-to-top {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 15px;
    z-index: 99;
    font-size: 14px;
    border: none;
    outline: none;
    background-color: #2669eb;
    color: white;
    cursor: pointer;
    padding: 10px 13px;
    border-radius: 50%;
}
.nxt-pre .px-4 {
    padding-right: 2rem!important;
    padding-left: 2rem!important;
}
.convers {
  padding-top: 125px !important;
}
p {
  font-size: larger;
}
.hover .u1,.u2, .hover .u2,.u4 {
  font-size: 18px;
}
.nxt-pre .card {
  width: 100;
}
.menu-toggle-btn {
  display:none;
}
#sidebarcontent {
  background-color: #f0f0f0;
  max-height: 520px;
  min-height: 520px;
  height: 520px;
  overflow-y: scroll;
  z-index: 99;
}
.convercontent {
  max-height: 520px;
  min-height: 520px;
  height: 520px;
  overflow-y: scroll;
}
.convercontent::-webkit-scrollbar, #sidebarcontent::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
@media (min-width: 600px) and (max-width: 1024px){
  #sidebarcontent {
    max-height: 600px!important;
    min-height: 600px!important;
    height: 600px!important;
  }
  .convercontent {
    max-height: 600px!important;
    min-height: 600px!important;
    height: 600px!important;
  }
  .chat.u1, .chat.u3 {
    margin-left: 2rem!important;
    margin-right: 6rem!important;
  }
  .chat.u2, .chat.u4 {
    margin-right: 2rem!important;
    margin-left: 6rem!important;
  }
}
@media (max-width: 990px){
  #navbar button {
    background-color: #e7e7e7 !important;
  }
  #maincontent .px-4 {
    padding-right: 0rem!important;
    padding-left: 1.5rem!important;
  }
  .convercontent{
      width:100%;
      padding-top: 60px!important;
      position: absolute;
      padding-left: 3rem;
  }
  .sidebarcontent.active {
      -webkit-transform: translateX(-320px);
  }
  .sidebarcontent {
    transition: 0.5s;
  }
  .menu-toggle-btn {
    display:block!important;
  }
  .header-left .logo_img {
    position: absolute;
    padding-left: 30%;
    z-index: 999;
    transition: 0.5s;
  }
  .header-left .logo_img.active {
    position: absolute;
    padding-left: 0%;
    z-index: 999;
    transition: 0.5s;
  }
  #maincontent .px-5 {
    padding-right: 0rem!important;
    padding-left: 0rem!important;
  }
  #nextpre .px-4 {
   padding-right: 1.5rem!important;
   padding-left: 1.5rem!important;
 }
}
@media (max-width: 600px) {
    .cat-tamcat .cat, .cat-tamcat span {
      font-size: 10px !important;
      align-self: center !important;
    }
    .convers {
      padding-top: 48px !important;
    }
    .px-5 {
      padding-right: 1rem!important;
      padding-left: 1rem!important;
    }
    #nextpre .col-xs-6 {
      width: 40% !important;
    }
    .nxt-pre .mt-5 {
        margin-top: 0rem!important;
    }
    #nextpre .row {
      display: flex;
      justify-content: center;
    }
    .hover .my-3 {
      margin-top: 0rem!important;
      margin-bottom: 1rem!important;
    }
    .hove .my-3 {
      margin-top: 0rem!important;
      margin-bottom: 1rem!important;
    }
    h5, h5 {
      font-size: 1.1rem;
    }
    #main .headcont {
      background-image: url(https://theretail.files.wordpress.com/2011/05/1_775717151l.jpg?w=634);
      background-color: hsl(0deg 0% 0% / 38%) !important;
      width: 100%;
      height: 170px !important;
      min-height: 170px !important;
      max-height: 170px !important;
    }
    p {
      font-size: small;
    }
    .header-left .logo_img {
      z-index: 999;
      padding-left: 72%;
    }
    .sidebarcontent {
      z-index: 99;
      width: 80%;
    }
    .convercontent {
      margin-left: 0px!important;
      position: absolute;
    }
    .sidebarcontent.active {
      -webkit-transform: translateX(-410px);
    }
   .convercontent {
    max-height: 400px;
    min-height: 400px;
    height: 400px
   }
   #sidebarcontent {
    max-height: 400px;
    min-height: 400px;
    height: 400px;
   }
   .chat.u1, .chat.u3 {
     margin-left: 1rem!important;
     margin-right: 3rem!important;
   }
   .chat.u2, .chat.u4 {
     margin-right: 1rem!important;
     margin-left: 3rem!important;
   }
}
@media (max-width: 578px){
  .hover .u1,.u3, .hover .u2,.u4 {
    font-size: 16px;
  }
  .chats .card {
    padding-top: 20px!important;
    padding-bottom: 20px;
  }
}