.chat-wrapper {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 100%;
      flex: 1 1 100%;
  min-height: 400px;
  width: 100%; }

.chat-sidebox {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 16rem;
      flex-basis: 16rem;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 0;
      flex-grow: 0;
  width: 16rem;
  transition: .2s all;
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%); }
  [dir=rtl] .chat-sidebox {
    right: 0;
    left: auto;
    -webkit-transform: translateX(101%);
            transform: translateX(101%); }

.chat-sidebox-open .chat-sidebox {
  -webkit-transform: none !important;
          transform: none !important; }

.chat-search {
  border-radius: 10rem; }

.chat-contacts .list-group-item {
  z-index: auto !important;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-positive: 0;
      flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.625rem;
  width: 100%;
  border: 0;
  border-radius: 0; }
  .chat-contacts .list-group-item.active {
    font-weight: bold; }
  .chat-contacts .list-group-item:not(.active) {
    opacity: .7; }
    .chat-contacts .list-group-item:not(.active):hover, .chat-contacts .list-group-item:not(.active):focus, .chat-contacts .list-group-item:not(.active):active {
      opacity: 1; }
  .chat-contacts .list-group-item.online {
    opacity: 1; }
  .chat-contacts .list-group-item .chat-status {
    font-weight: normal !important; }

.chat-messages {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

.chat-message-left,
.chat-message-right {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.chat-message-left {
  margin-right: auto; }
  [dir=rtl] .chat-message-left {
    margin-right: 0;
    margin-left: auto; }

.chat-message-right {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
  margin-left: auto; }
  [dir=rtl] .chat-message-right {
    margin-right: auto;
    margin-left: 0; }

.chat-scroll {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.default-style .chat-sidebox {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 28, 33, 0.075); }

.default-style .chat-contacts .list-group-item {
  padding-right: 1.5rem;
  padding-left: 1.5rem; }
  .default-style .chat-contacts .list-group-item:not(.active) {
    color: #4E5155; }
  .default-style .chat-contacts .list-group-item .chat-status {
    color: #d9534f; }
  .default-style .chat-contacts .list-group-item .chat-status .badge {
    background: #d9534f; }
  .default-style .chat-contacts .list-group-item.online .chat-status {
    color: #02BC77; }
  .default-style .chat-contacts .list-group-item.online .chat-status .badge {
    background: #02BC77; }
  .default-style .chat-contacts .list-group-item.active .chat-status {
    color: #fff; }
  .default-style .chat-contacts .list-group-item.active .chat-status .badge {
    background: #fff; }

@media (min-width: 992px) {
  .default-style .chat-sidebox {
    position: relative !important;
    -webkit-transform: none !important;
            transform: none !important; } }

.material-style .chat-sidebox {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 28, 33, 0.075); }

.material-style .chat-contacts .list-group-item {
  padding-right: 1.5rem;
  padding-left: 1.5rem; }
  .material-style .chat-contacts .list-group-item:not(.active) {
    color: #4E5155; }
  .material-style .chat-contacts .list-group-item .chat-status {
    color: #d9534f; }
  .material-style .chat-contacts .list-group-item .chat-status .badge {
    background: #d9534f; }
  .material-style .chat-contacts .list-group-item.online .chat-status {
    color: #02BC77; }
  .material-style .chat-contacts .list-group-item.online .chat-status .badge {
    background: #02BC77; }
  .material-style .chat-contacts .list-group-item.active .chat-status {
    color: #fff; }
  .material-style .chat-contacts .list-group-item.active .chat-status .badge {
    background: #fff; }

@media (min-width: 992px) {
  .material-style .chat-sidebox {
    position: relative !important;
    -webkit-transform: none !important;
            transform: none !important; } }

/*# sourceMappingURL=data:application/json;charset=utf8;base64,[encoded data, 296548 characters] */

/*# sourceMappingURL=data:application/json;charset=utf8;base64,[encoded data, 60800 characters] */
