body{    background-color: #f2f2f2!important;}

  .mobileshow{background: #fff!important}
  .chat-body {

    background: #fff;
    padding: 0;
    border-radius: 7px;
    margin: 1rem auto 0px;
        height: 90vh;
  }
  .right-side-body{height: 100vh}
  .Contacts-chats-list{height: 100%;
      overflow-y: auto;border-bottom: 1px solid lightgrey;background: #fff;
      border-radius: 0px;}
  .Contacts-chats-list li .media-body .text-muted{font-size: 12px;margin-bottom: 0px}
  .profile-image-chats img{
    width: 50px;
    height: 50px;
    border-radius: 40px;
        border: 1px solid #f2f2f2;
  }

  .settings-tray {
    background: #fff;
    padding: 10px 15px;
  border-bottom: 1px solid lightgrey;
      height: 4rem;
      display: flex;
      align-items: center;
    }
    .settings-tray h2{font-size: 1.5rem;margin-bottom: 0px}
  .chattypes{border: none;border-bottom: 1px solid lightgrey;transition: .5s ease}
  .chattypes:focus{outline: none;}
  .right-side-body .right-side-search-bar{padding:.5em 3rem;border-radius: 5px;border: 1px solid lightgrey}
  .right-side-body .right-side-search-bar:focus{outline: none;}
   .right-side-body .search-box {
    background: #fff;
    padding: 10px 13px;    border-bottom: 1px solid lightgrey;
  }

  .chat-body input {
    width: 100%;
  }

  .friend-drawer {
    display: flex;
    vertical-align: baseline;
    background: #fff;
    transition: 0.3s ease;
    }
  .search-box .input-wrapper{
  	position: relative;
  }
   .search-box img{
  position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
  .right-search-icon{left: .5em;}
  .right-side-section{position: relative;}
  .r-fillter-icon{right: .5em}
    .time {
      color: grey;
    }

  hr {
    margin: 5px auto;
    width: 60%;
  }
  .right-side-section .settings-tray .media-body h1{    font-size: 1.5em;
      margin-bottom: 0px;}

  .chat-bubble {
    padding: 10px 14px;
    background: #eee;
    margin: 10px 30px;
    border-radius: 9px;
    position: relative;
    animation: fadeIn 1s ease-in;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


  .chat-box-tray {
    background: #fff;
    display: flex;
    align-items: baseline;
    padding: 10px 15px;
    align-items: center;
    bottom: 0;border-top: 1px solid lightgrey;
      box-sizing: border-box;
      box-shadow: 0px -1px 5px -3px #00000063;
      border-bottom: 1px solid lightgrey;
  }

  .mg-auto{margin: auto;}
  .Contacts-chats-list ul{list-style: none;padding: 0px; margin: 0px;overflow: hidden;}
  .Contacts-chats-list ul li{padding: 0.5em 10px;
      border-bottom: 1px solid lightgray;cursor: pointer;transition: .5s ease}
     .Contacts-chats-list ul li:hover {background: #22A7DE0F}
     .Contacts-chats-list ul li.active{background: #22A7DE0F}
  .Read-unread{text-align: right;}
  .date-time{    color: #686868;
      font-size: 14px;}
  .right-side-section .right-side-search-bar:focus{outline: none;}
     .right-side-section .right-side-search-bar {
      padding: .5em 3rem;
      border-radius: 5px;
      border: 1px solid lightgrey;}
  .right-side-section .search-box {
      background: #fff;
      padding: 10px 13px;
      border-bottom: 1px solid lightgrey;
  }
  .chat-panel{
      overflow-y: auto;height: 100%;}
  .right-side-section{height: 90vh;position: relative;}
  .chat-send-panel{position: absolute;bottom: 0px;width: 100%}
  /*************Profile photo In background*******************

  .profile-image-chats {background: url(../../../../public/images/website-images/C-chat-profile.png);
      background-repeat: no-repeat;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background-size: cover;
      background-position: center center;
      box-shadow: 0px 0px 3px -1px #000000b0;
  }
  *************Profile photo In background close*******************/
  .chat-fillter{display: none; list-style: none;
      padding: 0px;
      margin: 0px;
      position: absolute;
      z-index: 9;
      width: 13rem;
      background: #fff;
    	right: 1.2rem;    top: 1.8em;
      border-radius: 5px;
      box-shadow: 0px 0px 4px -2px #000;transition: .5s ease}
     .drop-down-de:hover  .chat-fillter ,.drop-down-de:active  .chat-fillter {display: block;}
  .chat-fillter li{    padding: .5em .8em;
  }
  .chat-body{margin-bottom: 1rem;overflow: hidden;}

  .Profile-name{font-size: 25px;margin-bottom: 0px}
  .profile-status{margin-bottom: 0px;color: #686868}
  .profile-details{padding: 1rem 1.5rem;}
  .profile-details .media .media-left img{height: 80px;width: 80px;border-radius: 50%}
  .notification-mute{padding:0px;margin: 0px;overflow: auto;}
  .notification-mute li{padding:.5rem 1.5rem;border-bottom: 1px solid lightgrey}
  .notification-mute li:first-child{border-top: 1px solid lightgrey}
  .notification-mute .bg-light-blue{background: #22A7DE0F}
  .notification-mute li .switch{margin-bottom: 0px!important}
  .Profile-notifocaton {overflow-y: scroll;
      height: 100%;}
  .block-rpt-delet-btn {margin-top: 1rem;padding: 0px;overflow: auto;}
  .block-rpt-delet-btn li{cursor: pointer;text-align: center;padding: .5rem 1.5rem;
      border-bottom: 1px solid lightgrey;}
  .block-rpt-delet-btn li:first-child{border-top: 1px solid lightgrey}
   .block-rpt-delet-btn li a span{color: #22A7DE}
   .color-red{color:#FF0000!important }

  .add-imge{background: #22a7de;    width: 20px!important;
      height: 20px!important;
      position: absolute;
      bottom: 0rem;
      right: 0px;
      padding: 3px;}
  .profile-details .media-left{position: relative;}
  /*********************Footer Code *********************/

  /*********************Delet Modal code *********************/

  #Delet{padding-top: 0px!important}

  #Delet .modal-dialog{justify-content: center;
      align-items: center;}
  #Delet .modal-dialog .modal-content{    width: 20rem;
      border-radius: 20px;    padding: 0px 11px;    text-align: center;}
  #Delet .modal-content .modal-header #exampleModalCenterTitle{letter-spacing: 0.17px;
  font-weight: bolder;    line-height: 1.4em;
  }
  #Delet .modal-header{    padding: .5rem 1rem 0px;border-bottom: none;}
  #Delet .modal-body{padding: .3em 0px 1em;}
  #Delet .modal-footer{padding:0px;}
  #Delet .modal-footer .col-md-6{padding: 10px;}
  .Cancel0btn{border-right: 1px solid lightgrey}
  /*********************Delet Modal code close *********************/


  footer{margin-top: 1em}
  footer .footer-col4 .Download-link{width: 60%;}
  /*********************Footer Code close *********************/

  /*scroll bar css */

  ::-webkit-scrollbar
  {
      width: 5px;
      border-radius: 50%;
  }
  ::-webkit-scrollbar-thumb{
      background:linear-gradient(rgb(99 198 237), rgb(99 198 237));
      border-radius: 10%;
  }
  /*scroll bar css */

  @media only screen and (max-width: 768px) {
    .mobileshow{position: fixed;z-index: 1;height: 100vh;
      top: 0px;
      left: 0px;}
      .Contacts-chats-list{padding: 0px!important}
      .Contacts-chats-list ul li {
      padding: 0.5em 0px;}
      .settings-tray {
      background: #fff;
      padding: 0px 0px;
      border-bottom: 1px solid lightgrey;
      height: 4rem;
      display: flex;
      align-items: center;
      font-size: .8em;}
  }
  .search-Right .results{ display: none;}
  .search-Right .results.fixed{display: block!important;}
  .search-Right .results {
    border-top: none;
      background: #fff;
      display: none;
      position: absolute;
      z-index: 1;
      width: 100%;
      border-radius: 0px 0px 10px 10px;
      border: 1px solid #f2f2f2;
      border-color: #ff000000 #f2f2f2 #f2f2f2 #f2f2f2;
      padding: 10px 10px;
      box-shadow:0px 8px 7px -9px #0000007d;
  }
      .surchresult-dd{    background: #DFDFDF;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      padding: 3px;
      position: relative!important;
      left: 0px!important;
      top: 0px!important;
      transform: translate(0px)!important;}
      .results li:last-child{border-bottom: none}
      .results li{cursor: pointer;border-bottom: 1px solid lightgrey;
      padding: 8px 0px;}
  .right-side-search-bar:focus{border-radius: 5px 5px 0px 0px;}
  @media only screen and (min-width: 768px) {
  .chat-panel{padding-bottom: 8rem;}
  }

  /*new changes css*/
  .left-msg .chat-left{max-width: 70%}
  .chat-right{max-width: 70%}
  .right-msg .chat-bubble::after{
    content: "";
      background: transparent;
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #63c6ed;
      position: absolute;
      transform: translate(-50%, 0%) rotate(25deg);
      top: 8px;
      right: -28px;
  }
  .right-msg{    justify-content: flex-end!important;}
  .chat-right  .chat-bubble{background:#63c6ed;color: #fff}
  .chat-left .chat-bubble{background:#e9f7fc }
  .left-msg .chat-bubble::before{
    content: "";
      background: transparent;
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #e9f7fc;
      position: absolute;
      transform: translate(-50%, 0%) rotate(204deg);
      top: 0%;
      right: 100%;
      left: 3px;
  }

  .chat-massage{    margin: 0px;
      overflow-wrap: break-word;}


  .timeing-msg{    font-size: 9px;
      position: absolute;
      text-align: left;
      bottom: 0px;
      right: 12px;
      color: #bababa;}
  .chat-bubble {cursor: pointer;}
  .seen{
    position: absolute;
      height: 20px;
      width: 20px;
      background: url(https://dev6.fastorder.com/api/public/images/website-images/C-read.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      right: 5%;
  bottom: -20px;
  }
  .unseen{
    position: absolute;
    height: 16px;
  width: 16px;
      background: url(https://dev6.fastorder.com/api/public/images/website-images/C-unread.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      right: 5%;
  bottom: -20px;
  }
  .chat-right{position: relative;}

  .chat-right .timeing-msg{    color: #e9f7fc;}
  .chat-massage{    min-width: 40px;}


  .top-date-and-time{   background: #283a90;
      display: inline-block;
        position: sticky;
        top: 0px;
      left: 50%;
      transform: translateX(-50%);
      padding: 2px 5px;
      color: #fff;
      border-radius: 60px;

      z-index: 0;}
      .top-date{font-size: 14px;
      padding: 0px 20px;}
  .chat-left .arrow-icon{    color: #c4babe;}
  .arrow-icon{    position: absolute;
      right: 10px;
      top: 10px;transition: .5s ease;display: none;}

    .chat-right  .arrow-icon {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 2;
      background: #63c6ed;
      height: auto;
      width: 25px;
      padding-left: 8px;
  }
  .arrow-icon ul li:hover{background: #22A7DE0F}
  .arrow-icon ul li{     padding: 5px 10px 5px;transition: .5s}
  .arrow-icon ul{box-shadow: 1px 2px 6px -4px #000;transition: .5s ease;position: absolute;
      background: white;
      right: 0px;
          padding: 5px 0px;
      margin: 0px;
      width: 150px;
      text-align: left;
      border-radius: 5px;
      color: #000;}
  .chat-bubble:hover .arrow-icon{display: block;}
  .arrow-icon:hover ul{display: none;}
  .arrow-icon ul{display: none;}
  .activelist ul{display: block!important;}
  @media only screen and (min-width: 768px){
      .chat-panel{  padding-top: 0em;}
  }


  .person-name{    color: #a8b4e9;}

  .user-status-k{animation: 1s fade}

  @keyframes fade {
  0%{
      opacity: 0;

  }
  100%{
      opacity: 1;


  }
  }
    .results{list-style: none;}




    /* Preloader */

    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      /* change if the mask should have another color then white */
      z-index: 99999999999;
      /* makes sure it stays on top */
    }

    #status {
      position: absolute;
        left: 50%;
        top: 50%;
        background-image: url(https://dev6.fastorder.com/api/public/images/website-images/loder.gif);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 150px;
        width: 150px;
        transform: translate(-50%, -50%);
    }

  footer{display: none;}

  @media only screen and (max-width: 768px) {
  header{display: none!important;}
  .new-message-button{    position: fixed;
    bottom: 33px;
    right: 20px;
    background: #fff;
    z-index: 1;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0px 0px 3px #0000006e;}
    .chat-body{height: 100%;    margin: 0px!important;}
.right-side-section{display: none;}
html, body{height: 100%;}

.container.chat-body .row:first-child{height: 100%;}
  }


  ed-position {
  position: fixed;
  right: 50%;
  bottom: 50%;
}
.chat-icon-box {
  width: 155px;
  height: 155px;
  background-color: #fff;
  border-radius: 50%;

}
.notify {
  animation: animSpin 1.8s ease-in-out forwards infinite, animFade 1.8s ease forwards infinite;
}

@keyframes animSpin {
	0% { -webkit-transform: perspective(100px) rotateY(180deg) rotateX(0deg); transform: perspective(120px) rotateY(181deg) rotateX(0deg);
  }
  50% { -webkit-transform: perspective(100px) rotateY(0deg) rotateX(0deg); transform: perspective(120px) rotateY(0deg) rotateX(0deg);
  }
	100% { -webkit-transform: perspective(100px) rotateY(180deg); transform: perspective(120px) rotateY(181deg); }
}
@keyframes animFade {
	0% { opacity: .95; }
	100% { opacity: 1; }
}

.chat-icon-box img{width:100%;height:100%;}
.loader{    position: fixed;
    z-index: 1;
    height: 100%;
    background: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;}

    .Contacts-chats-list ul li .col-md-12.no-padding{padding: 0px}
    .Send_Icon,.camera_Icon,.Key_board_Icon{cursor: pointer;}