/* Chat Area Style
============================================*/
.status-position {
  top: 2px;
  right: -5px;
}
.status-position2 {
  bottom: 4px;
  right: -2px;
}
.chat-tabs {
  &.nav-tabs {
    margin-bottom: 1.5rem !important;
    justify-content: space-between !important;
    .nav-item {
      .nav-link {
        position: relative;
        border: none;
        padding: 0 0 0.5rem 0;
        color: rgba(
          var(--bs-body-color-rgb),
          var(--bs-text-opacity)
        ) !important;
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          width: 0;
          height: 2px;
          background-color: $primary;
          transition: $transition;
        }
        &.active {
          color: $primary !important;
          background-color: transparent !important;
          &::before {
            width: 100%;
            right: auto;
            left: 0;
          }
        }
      }
    }
  }
}
.chat-details {
  li {
    max-width: 800px;
    p {
      border-radius: 0px 15px 15px 15px;
      background-color: #f5f6fa;
      margin-bottom: 0;
      padding: 15px 20px;
      margin-bottom: 5px;
      display: inline-block;
    }
    .dropdown {
      &.action-opt {
        opacity: 0;
        transition: $transition;
      }
    }
    &.own-chat {
      p {
        border-radius: 15px 0 15px 15px;
        background-color: $primary;
        color: $white;
      }
    }
    &:hover {
      .dropdown {
        &.action-opt {
          opacity: 1;
        }
      }
    }
  }
}

/* Max width 767px */
@media only screen and (max-width: 767px) {
  .chat-details {
    li {
      p {
        padding: 10px;
      }
    }
  }
}

/* Min width 768px to Max width 992px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .chat-details {
    li {
      p {
        padding: 10px;
      }
    }
  }
}

/* Min width 1400px to Max width 1799px */
@media only screen and (min-width: 1400px) and (max-width: 1799px) {
}
