.whisper #page-chat {
  background-color: #fff;
  display: flex;
  height: 100%;
  position: fixed;
  right: -24.62rem;
  overflow: hidden;
  width: 24.62rem;
  top: 0;
  transition: all 0s ease;
  -webkit-transition: all 0s ease;
  -moz-transition: all 0s ease;
  -o-transition: all 0s ease;
  -webkit-overflow-scrolling: touch;
  z-index: 999; }
  .whisper #page-chat.show {
    right: 0; }
  .whisper #page-chat .nav-item {
    margin-right: .5rem; }
    .whisper #page-chat .nav-item .nav-link {
      align-items: center;
      height: 4.615rem;
      display: flex;
      border-bottom: 0.154rem solid transparent;
      border-top: 0.154rem solid transparent; }
      .whisper #page-chat .nav-item .nav-link.active {
        border-bottom-color: #007bff; }
  .whisper #page-chat .chat-item {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    height: 4.615rem;
    flex-direction: column;
    justify-content: center; }
    .whisper #page-chat .chat-item.chat-item-template {
      display: none; }
    .whisper #page-chat .chat-item.has-unread-messages > div span:first-child {
      color: #007bff; }
    .whisper #page-chat .chat-item.has-unread-messages > div .badge {
      display: block; }
    .whisper #page-chat .chat-item .chat-room-show:hover {
      background-color: rgba(52, 58, 64, 0.05); }
    .whisper #page-chat .chat-item > div {
      padding: 0 2.692rem;
      display: flex;
      justify-content: space-between; }
      .whisper #page-chat .chat-item > div span:first-child {
        color: #343a40;
        display: -webkit-box;
        max-height: 2.69rem;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden; }
      .whisper #page-chat .chat-item > div .badge {
        align-self: center;
        display: none;
        font-size: 0.77rem;
        font-weight: 200;
        height: 1.31rem;
        line-height: 1.31rem;
        padding: 0;
        min-width: 1.31rem; }
    .whisper #page-chat .chat-item .user-info {
      padding: 0 2.692rem; }
  .whisper #page-chat .chat-room, .whisper #page-chat .chat-channels, .whisper #page-chat .chat-room-members {
    display: block;
    height: 100%;
    flex-basis: 100%;
    min-width: 100%;
    transition: all 0s ease;
    -webkit-transition: all 0s ease;
    -moz-transition: all 0s ease;
    -o-transition: all 0s ease;
    width: 100%; }
  .whisper #page-chat .chat-channels {
    margin-left: -24.62rem; }
    .whisper #page-chat .chat-channels .tab-content {
      height: calc(100% - 4.615rem);
      overflow-y: auto;
      overflow-x: hidden; }
    .whisper #page-chat .chat-channels.show {
      margin-left: 0; }
  .whisper #page-chat .chat-room, .whisper #page-chat .chat-room-members {
    flex-direction: column; }
    .whisper #page-chat .chat-room header, .whisper #page-chat .chat-room-members header {
      line-height: normal;
      min-height: 4.615rem; }
      .whisper #page-chat .chat-room header h3, .whisper #page-chat .chat-room-members header h3 {
        display: -webkit-box;
        font-size: 1.2rem;
        max-height: 3rem;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden; }
    .whisper #page-chat .chat-room footer, .whisper #page-chat .chat-room-members footer {
      height: initial;
      min-height: 4.615rem;
      padding-bottom: .7rem;
      padding-top: .7rem;
      width: 24.62rem; }
  .whisper #page-chat .chat-room {
    display: flex; }
    .whisper #page-chat .chat-room.show {
      margin-left: 0; }
      .whisper #page-chat .chat-room.show.hide-left {
        margin-left: -24.62rem; }
  .whisper #page-chat .chat-room-members {
    display: none; }
    .whisper #page-chat .chat-room-members.show {
      display: flex; }
    .whisper #page-chat .chat-room-members .member-list-wrapper {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto; }
    .whisper #page-chat .chat-room-members footer {
      display: flex;
      flex-direction: column; }
      .whisper #page-chat .chat-room-members footer .form-wrapper {
        width: 100%; }
        .whisper #page-chat .chat-room-members footer .form-wrapper select {
          width: 100%; }

.whisper .message-input-wrapper {
  flex-grow: 1;
  position: relative; }
  .whisper .message-input-wrapper textarea {
    padding-right: 1.9rem;
    resize: none; }
  .whisper .message-input-wrapper .send-message {
    bottom: .4rem;
    color: #17a2b8;
    position: absolute;
    right: .5rem; }

.whisper .message-list-wrapper {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto; }
  .whisper .message-list-wrapper .message-list {
    padding-bottom: .3rem; }
    .whisper .message-list-wrapper .message-list .message {
      align-items: flex-start;
      display: flex;
      flex-direction: column; }
      .whisper .message-list-wrapper .message-list .message > span {
        background-color: white;
        border-radius: 0.3rem;
        display: inline-block;
        font-weight: 400;
        max-width: 80%;
        margin: 1rem 1.8rem 0 1.8rem;
        padding: .5rem 1rem;
        position: relative;
        white-space: pre-wrap;
        word-break: break-word; }
        .whisper .message-list-wrapper .message-list .message > span:after {
          border: .6rem solid;
          border-color: white white transparent transparent;
          bottom: auto;
          content: ' ';
          height: 0;
          left: -1rem;
          position: absolute;
          right: auto;
          width: 0;
          top: .7rem; }
      .whisper .message-list-wrapper .message-list .message > small {
        margin: 0 2rem; }
      .whisper .message-list-wrapper .message-list .message.my {
        align-items: flex-end; }
        .whisper .message-list-wrapper .message-list .message.my > span {
          background-color: #17a2b8;
          color: #fff; }
          .whisper .message-list-wrapper .message-list .message.my > span:after {
            border-color: #17a2b8 transparent transparent #17a2b8;
            left: auto;
            right: -1rem; }
      .whisper .message-list-wrapper .message-list .message.system > span {
        background-color: #ffc107;
        color: #fff; }
        .whisper .message-list-wrapper .message-list .message.system > span:after {
          border-color: #ffc107 #ffc107 transparent transparent; }
  .whisper .message-list-wrapper #user-typing {
    display: block;
    height: 1.15rem;
    margin: 0 2rem; }

/*# sourceMappingURL=chat.css.map */