/* Message page====================================================================

======================================================================================

============================================== */

/* message page css================================================= */

.message-page-heading h4 {
  font-size: 24px;
}

.so-search-message i.bi-search {
  position: absolute;

  top: 6%;

  right: 50px;
}

.all-message-options {
  display: flex;

  gap: 20px;
}

.so-see-all-messages ul.all-message-options button {
  color: black;
}

.so-see-all-messages ul.all-message-options button.active {
  color: var(--pink) !important;

  /* border-bottom: 2px solid #ea1e79;

*/

  border: none;

  /* background-color: transparent; */
}

.all-message-options li .active {
  background-color: #a9a9a9;
}

ul.all-message-options-lists {
  justify-content: space-around;

  align-items: flex-end;
}

.all-messages-lists-messages img {
  width: 60px;

  height: 60px;

  border-radius: 40px;
}

.all-messages-lists-messages {
  display: flex;

  /* gap: 15px; */

  align-items: center;

  /* padding: 20px 0px; */

  justify-content: space-around;

  gap: 20px;
}

.all-message-lists-name {
  text-align: left;

  max-width: 250px;
}

.all-message-lists-name p {
  margin: 0;
}

.so-see-all-messages {
  background-color: #fff;

  padding: 30px;

  border-radius: 25px;
}

.all-messages-lists {
  max-height: 550px;

  overflow-y: auto;

  overflow-x: clip;
}

/* .all-messages-lists {

  background-color: #fff;

  padding: 20px;

  max-height: 750px;

} */

.search-message input {
  border-radius: 20px;

  padding: 22px;
}

.message-user-name {
  align-items: center;

  gap: 10px;
}

.message-user-name img {
  width: 50px;

  height: 50px;

  object-fit: cover;

  border-radius: 50px;
}

.message-user-chats {
  display: flex;

  align-items: center;

  justify-content: space-between;
}

.message-user-chat-ratings i::before {
  color: #bfbfbf;
}

.message-user-chat-ratings i {
  cursor: pointer;
}

.message-user-chats-messages {
  max-height: 550px;

  overflow-y: auto;

  padding: 20px 10px;
}

.message-user-chats-messages::-webkit-scrollbar {
  width: 8px;
}

.message-user-chats-messages::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.message-user-chats-messages::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.message-user-chats-messages::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 4px;
}

.all-messages-lists::-webkit-scrollbar {
  width: 8px;
}

.all-messages-lists::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.all-messages-lists::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.all-messages-lists::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 4px;
}

.so-search-message {
  padding: 10px 0;
}

.message-user-chats-messages .message-sent {
  padding: 15px;

  border: 1px solid #bfbfbf;

  border-radius: 10px;

  width: fit-content;

  margin-left: auto;

  max-width: 70%;

  text-align-last: start;

  margin-top: 30px;
}

.message-user-chats-messages .message-sent p,
.message-user-chats-messages .message-sent p {
  color: #2dede2;
}

.message-user-chats-messages .message-recieved {
  background-color: #f1f1f1;

  padding: 15px;

  margin: 10px 0;

  width: fit-content;

  width: fit-content;

  border-radius: 10px;

  max-width: 70%;

  text-align-last: start;
}

.message-sent-time, .message-recieved-time {
  display: none;
}

.message-recieved-time p,
.message-sent-time p {
  color: #7e7e7e;
}

.message-user-chats-messages .media {
  border: none;
}

.message-user-chats-messages .media img {
  border-radius: 10px;
}

.message-sent-time {
  text-align: right;
}

.message-user-chat-ratings {
  display: flex;

  gap: 20px;
}

.so-see-single-msg {
  background-color: #fff;

  border-radius: 25px;

  padding: 30px;
}

.message-container-all-message {
  gap: 30px;

  justify-content: unset;
}

.so-send-messages-field input {
  max-width: 70%;

  width: 70%;

  padding: 10px;

  border-radius: 30px;

  border: 1px solid #bfbfbf;
}

.so-send-messages-field {
  display: flex;

  justify-content: space-between;

  align-items: center;

  position: sticky;

  bottom: 0;

  z-index: 99;
}

.so-send-messages-field i {
  border: 1px solid #bfbfbf;

  border-radius: 30px;

  padding: 15px 20px;
}

.so-send-messages-field button {
  padding: 14px 36px;
}

.so-send-messages-field form label {
  margin: 0;
}

.so-message-page {
  padding: 0;
}

.so-message-page-contents {
  padding: 20px 0;
}

/* .so-message-page-contents .so-see-single-msg .all-message-chats:has(:not(.show)) {

  display: none;

} */

.message-user-name {
  cursor: pointer;
}

.so-see-single-msg .fade:not(.show) {
  display: none;
}

.message-user-chats-messages img {
  max-height: 200px;

  max-width: 250px;
}


.all-messages-lists-messages {
  gap: 150px;
}

.all-message-lists-messages-person-details {
  display: flex;

  align-items: center;

  gap: 15px;
}

.all-messages-lists-messages-new-message-ntf p {
  color: white;

  background: var(--pink);

  padding: 4px 0px;

  border-radius: 20px;
}


.all-message-lists-name {
  color: black;
}

.all-message-options button.nav-link:hover {
  border: transparent;
}

.all-message-options button.nav-link {
  padding: 8px 5px;
}

.all-message-options .message-requests {
  display: flex;

  gap: 10px;

  align-items: flex-end;
}

.all-message-options .message-requests p {
  background: #bfbfbf;

  padding: 2px 8px;

  border-radius: 16px;

  color: white;

  margin-bottom: 0;
}

.chat-box {
  display: none;
}

.no-users-msg {
  display: none;
}

#spitout-logout {
  display: none;
}

#chat-load-err {
  display: none;
}

.approve-user-loader {
  display: none;
}

.chat-history-loader {
  display: none;
  width: 40px;
  margin: auto;
}

.new-msg {
  background-color: hotpink !important;
  color: #ffff !important;
}


/* attachment area */
#msg-att-preview {
  margin: 0 !important;
  /* display: none; */
}

.attachment-area {
  position: relative;
  display: none;
}

.attachment-area #rm-attachment {
  position: absolute;
  top: 16px;
  left: 180px;

  color: var(--pink);
  /* display: none; */
  cursor: pointer;
}


/* delete individual chat */
.msg-wrapper,
.message-sent {
  position: relative;
}

.so-delete-ind-msg-btn .modal-title {
  display: grid;
  text-align: center;
  gap: 15px;
  font-weight: 500;
}

.so-delete-ind-msg-btn .modal-title i:before {
  font-size: 40px;
  color: #ea1e79;
}

#so-delete-ind-msg .modal-header,
#so-delete-convo .modal-header {
  padding: 20px;
}

/* delete convo */
.chatlog-dropdown-item {
  background-color: #fff !important;
  padding: 0;
}

.chatlog-dropdown-item i {
  color: var(--pink);
}

.so-delete-ind-msg-btn button,
.so-delete-convo-modalContent button {
  padding: 10px 20px;
  border-radius: 10px;
}

.so-delete-convo-modalContent {
  max-width: 600px;
  text-align: center;
}

#so-delete-convo .so-delete-convo-modalContent .modal-body {
  padding: 10px 0 20px 0;
}

.modal-content.so-delete-ind-msg-btn {
  max-width: 550px;
}

#so-delete-ind-msg .modal-dialog .modal-body {
  padding: 10px;
  padding-bottom: 20px;
}

.so-delete-ind-msg-btn #close-delete-ind-chat-modal span {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 30px;
  color: #000;
}

.msg-sent-wrapper:hover .remove-ind-chat {
  display: block;
}

.message-sent .remove-ind-chat {
  position: absolute;
  left: -35px;
  top: 45%;

  cursor: pointer;
  display: none;
}





@media screen and (max-width: 767px) {
  .so-send-messages-field button[type="submit"] {
    padding: 12px 15px;
    content: "\F285";
  }

  .so-send-messages-field i.bi-image {
    padding: 10px 12px;
  }

  .so-send-messages-field {
    gap: 10px;
  }

  .so-see-single-msg .chat-box .message-sent,
  .so-see-single-msg .chat-box .message-recieved {
    max-width: 90%;
  }

  .message-user-name {
    position: relative;
  }

  .message-user-name i.chat-box-user-status {
    top: -10px;
    left: -18px;
  }
}

@media screen and (max-width: 991px) {
  .so-send-messages-field {
    gap: 10px;
  }
}

/* loading animation starts*/

#chat-loader {
  display: none;
}


#search-users-result svg,
svg.approve-user-loader {
  width: 3.25em;
  transform-origin: center;
  animation: chatLoaderRotate 2s linear infinite;
}


#search-users-result svg circle,
svg.approve-user-loader circle {
  fill: none;
  stroke: hsl(214, 97%, 59%);
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: chatLoaderDash 1.5s ease-in-out infinite;
}

@keyframes chatLoaderRotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes chatLoaderDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}

/* loading animation ends */



/* emoji picker starts */

#emoji-picker {
  margin-left: 2rem;
  border-radius: 50px;
  padding: 12px 14px !important;
  background-color: transparent;
  border: 1px solid #dbdbdb;
}

@media screen and (max-width: 767px) {
  #emoji-picker {
    display: none;
  }
}

/* emoji picker ends */