.group-list {
  list-style: none;
  padding-left: 0;
  margin:0;
}
.group-item {
  position: relative;
  font-size: 14px;
  cursor: pointer;
  background: #FFF;
  border-radius: 3px;
  margin: 20px 0;
  background: darksalmon;
  
}
.user-more::after{
  font-family: "Font Awesome 5 Free";
  /*font-weight: 900;
  content: "\f05a";
  margin-left: 5px;
  cursor:pointer;
  color:dodgerblue;*/
}
.contact__card-online .user-avatar{
  float:left;
  width:40px;
  height:40px;
  margin-right:15px;
}
.contact__card .user-more{
  font-weight: bold;
  padding: 7px 7px 5px 9px;
  border: 1px solid #CCC;
  border-radius: 5px;
  font-size: 12px;
  line-height: 100%;
  display: inline-block;
  background: #FFF; 
}
.group-contact-list {
  display: none;
  list-style: none;
  padding-left: 0;
  padding-bottom:10px;
}
.contact-list{
  overflow-y: scroll;
  height: 100%;
}
.group-item.show .group-contact-list {
  display: block;
  margin-left:25px;
  margin-right:15px;
}
.list-item {
  border: 1px dashed #e5e5e5;
  border-radius: 5px;
  background: #ffebcd;
  display: block;
  margin-bottom: 15px;
  box-shadow: 1px 0 4px #f1bead inset;
}

.list-item .open-icon {
  margin-right: 10px;
}
.contact__card {
  display: none;
}

.contact__card.show {
  display: block;
}
.add-to-room, .start-chat{
  cursor:pointer;
}
.start-chat {
  border-radius: 5px;
  padding: 5px 10px;
  border: none;
  background-color: #a89cee;
  margin-top: 10px;
  color: #fff;
}

.add-to-room {
  max-width: 215px;
  width: auto;
  position: relative;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 5px;
  border-radius: 5px;
  color: #fff;
  background-color: #a89cee;
}

.hide-all{
    font-size: 12px;
    text-transform: lowercase;
    color: rgba(102, 102, 102, 0.5);
    font-weight: 700;
    cursor:pointer;
}
.contact-search{
    padding:10px;
    font:inherit; 
    border:1px solid #e5e5e5;
    min-width: 50px;
}
.contact-search-wrapper{
  flex-wrap: nowrap;
  display:flex;
}
.contact-search-wrapper button, .contact-search-wrapper a{
    margin-left:10px;
}
.contact-search-wrapper a{
    padding-top:15px;  
}
.contact-list-wrapper{
  height: Calc(100% - 60px);
  overflow-y: auto;
  margin-top: 15px;
  padding: 15px;
  background: #FFF;
  border: 1px solid #E5e5e5;
  box-shadow: 1px 0 4px #ccc inset;
  position:relative;
}
.contact-group-header{
  padding:10px;  
  position:relative;
  color:#FFF;
  font-size:20px;
}
.contact__card-online{
  padding:10px;
  position:relative;
}
.contact-group-popup-wrapper{
  position:absolute;
  background:#FFF;
  width:150px;
  border-radius: 5px;
  box-shadow: 1px 0 4px #CCC;  
}
.contact-group-popup-wrapper span{
  display:block;
  cursor:pointer;
  padding:10px;
  border-bottom:1px solid #E5E5E5;  
}
.contact-group-popup-wrapper span:last-child{
  border:none;  
}
.contact-report{
  margin-top:15px;
}
.popup-wrapper-form{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;  
  background:url('/assets/img/op.png');
  background-repeat: repeat;
  cursor:pointer;
  z-index:15000;
}
.popup-form{
  position:fixed;
  z-index:15001;
  top:20%;
  left:15px;
  right:15px;
  max-height:60%;
  overflow-y:auto;
  background:#FFF;
  padding:15px;
  box-shadow:1px 0 4px #CCC;
  border:1px solid #E5E5E5;
  border-radius: 1px;
}
.popup-form textarea{
  width:100%;
  min-height:200px;
  resize: vertical;  
  font:inherit;
  padding:10px;
  margin-bottom:15px;
}
.popup-form button:last-child{
  float:right;  
}
.contact-editor-item{
   display:flex;
   flex-wrap: nowrap; 
   margin-top:15px;
}