.chat-table {
  margin-top: 15px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgb(243,243,243); /* Beyaz kenarlık */
  border-radius: 10px; /* Yuvarlak köşeler */
  overflow: hidden; /* Yuvarlak köşelerin görünür olmasını sağlar */
}

.chat-table thead {
  background-color: rgb(243,243,243); /* Thead için beyaz arka plan */
  color: black; /* Bootstrap'in birincil rengini kullan */
}

.chat-table thead th{
  padding: 10px;
}

.chat-table tbody {
  background-color: transparent; 
  color: black; 
}

.chat-table tbody td{
  padding: 10px;
}

#chat-input {
  background-color: white !important;
  border-radius: 1.5rem !important;
}
.user-chat-topbar {
  background-color: white !important;
    z-index: 1000 !important;
    position: relative !important;
}
#send-button {
  background-color: white !important;
}

#send-button i {
  color: rgb(100,100,100) !important;
}

#volume-button i {
  color: rgb(100,100,100) !important;
}

.chat-button {
  margin-top: 10px;
  background-color: white !important;
  color: black !important;
  border-radius: 1.5rem !important;
}

*, ::after, ::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*, ::after, ::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


div.user-chat-content::before, div.user-chat-content::after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
}
div.user-chat-content::before {
  border-bottom-left-radius: 0.8rem 0.7rem;
  border-right: 1rem solid #248bf5;
  right: -0.35rem;
  transform: translate(0, -0.1rem);
}

.user-chat-content::after {
  background-color: #fff;
  border-bottom-left-radius: 0.5rem;
  right: -40px;
  transform:translate(-30px, -2px);
  width: 10px;
}


div.mona-chat-content::before, div.mona-chat-content::after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
}
div.mona-chat-content::before {
  border-bottom-right-radius: 0.8rem 0.7rem;
  border-left: 1rem solid #e5e5ea;
  left: -0.35rem;
  transform: translate(0, -0.1rem);
}

div.mona-chat-content::after {
  background-color: #fff;
  border-bottom-right-radius: 0.5rem;
  left: 20px;
  transform: translate(-30px, -2px);
  width: 10px;
}



.chat-content-me{
  background-color: #248bf5;
  border-radius: 1.5rem;
  padding: 0.5rem 0.875rem;
}

.chat-content-me p{
  color: white;
}

.chat-content-mona{
  background-color: #e5e5ea;
  border-radius: 1.5rem;
  padding: 0.5rem 0.875rem;
}

.chat-content-mona p{
  color: black;
}