// >>-- 58 Chat css start --<<
.chat-container-box {
  .col-lg-8,
  .col-lg-4 {
    padding: 0;

    .card {
      border-radius: 0 !important;
    }
  }
}

.chat-container-content-box {
  margin-left: 1rem;
}

.chat-tab-wrapper {
  .tabs {
    display: flex;
    justify-content: space-between;
    border-radius: var(--bs-border-radius);


    .tab-link {
      width: 100%;
      text-align: center;
      font-size: 14px;
      list-style: none;
      padding: 16px 0px;
      font-weight: 500;
      color: rgba(var(--dark),.75);
      cursor: pointer;
      border-bottom: solid 2px transparent;
      letter-spacing: 1px;
      transition: border 0.3s ease-in-out;

      &:hover {
        color: rgba(var(--primary), 1);
      }

      &.active {
        color: rgba(var(--primary), 1);
        border-color: rgba(var(--primary), 1);
      }
    }
  }
}

.call {
  position: relative;

  .call-div {
    width: 100%;
    height: auto;
    position: relative;

    .call-caption {
      width: 100%;
      position: absolute;
      text-align: center;
      bottom: 50px;
      color: rgba(var(--white),1);
      z-index: 2;

      .call-btn {
        cursor: pointer;
      }
    }
  }

  .video-div {
    width: 150px;
    height: 180px;
    position: absolute;
    margin: 10px;
    bottom: 50px;
    z-index: 1;
  }
}

.chat-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 561px;
  overflow: auto;
  padding: 0.375rem 0.75rem;
  border-radius: var(--app-border-radius);

  &::-webkit-scrollbar {
    width: 5px;
  }

  &:hover {
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgb(var(--secondary), 0.4);
    }
  }

  .chat-box {
    display: flex;
    padding: 10px 0 0 60px;

    .chat-text {
      p {
        margin: 0;
      }

      padding: 0.75rem;
      background-color: rgb(var(--secondary), .3);
      color: rgba(var(--secondary-dark),1);
      border-radius: 0px 24px 24px;
    }
  }

  .chat-box-right {
    display: flex;
    justify-content: end;
    padding: 10px 60px 0 0;
    text-align: end;

    .chat-text {
      padding: 0.375rem 0.75rem;
      background-color: rgb(var(--primary), .3);
      color: rgba(var(--primary-dark),1);
      border-radius: 24px 0 24px 24px;
    }
  }
}
.pointer-events-auto {
  pointer-events: auto;
}

.chattoggle {
  display: block !important;
  position: absolute;
  z-index: 3;
  width: calc(100% - 245px);
}

.close-togglebtn {
  display: none;
}

.chat-status-tab {
  gap: 0.5rem;
  flex-wrap: nowrap;

  .nav-item {
    width: 100%;

    .nav-link {
      padding: 0.8rem 0.75rem;
      background-color: transparent;
      border: 1px solid rgba(var(--secondary), .4);
      color: rgba(var(--secondary), 1) !important;
      width: 100%;
    }
  }
}

.updates-box {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;

  & + {
    div {
      margin-top: -10px;
    }
  }
}

.chat-contact {
  height: 486px;
  height: 486px;
  overflow: auto;
  padding: 0.375rem 0.75rem;

  .chat-message {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .chat-time {
    margin-bottom: 0;
    color: rgba(var(--dark),.75);
  }

  .chat-contactbox {
    position: relative;
    display: flex;
    padding: 1rem 0;
    .position-absolute{
      top: 12px;
    }

    & + {
      .chat-contactbox {
        border-top: 1px solid var(--border_color);
      }
    }
  }

  &.tabcontent {
    height: 552px;
  }

  &::-webkit-scrollbar {
    width: 5px;
  }

  &:hover {
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgb(var(--secondary), 0.4);
    }
  }
}

.chat-contact-list{
  p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

// >>-- 58 Chat css end --<<