/* focus/disabled styles, you can change this for accessibility */
button.spin:focus, button.spin:disabled {
  outline: none;
  background: #aaa;
}

/* This is the space for the spinner to appear, applied to the button */
.spin {
  padding-left: 2.5em;
  display: block;
}

/* position of the spinner when it appears, you might have to change these values */
.spin .spinner {
  left: 23.4em;
  position: absolute;
}

/* spinner animation */
@keyframes spinner {
  0% {
    transform: rotate(0deg); 
  }
  
  100% {
    transform: rotate(360deg);
  }
}

/* The actual spinner element is a pseudo-element */
.spin .spinner::before {
  content: "";
  width: 1.5em; /* Size of the spinner */
  height: 1.5em; /* Change as desired */
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: solid .35em #999; /* Thickness/color of spinner track */
  border-bottom-color: #555; /* Color of variant spinner piece */
  animation: .8s linear infinite spinner; /* speed of spinner */
  transform: translate(-50%, -50%);
  will-change: transform;
}


[data-bs-target="#exampleModal"]:disabled {
  color: #aaa !important;
}

#addTextBox {
  text-align: center;
  display: block;
  border: solid 1px gray;
  width: 6%;
  border-radius: 50%;
  margin: auto;
}

/*.chatmemberselected {
    background-color: #39a1de17;
    border: 1px solid #39a1de;
    border-radius: 10px;
    width: 130px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}*/
.chatmemberselected {
    background-color: #39a1de17;
    border: 2px solid #39a1de;
    border-radius: 5px;
}

.remove-btn {
  border: solid 1px gray;
  text-align: center;
  border-radius: 50%;
  padding: 1px 3px;
}

.text-box-wrapper input {
  display: inline-block;
  width: 93%;
  margin: 0px 10px 8px 0px;
}

.chat-body .answer.left {
	padding: 0 0 0 0px;
	text-align: left;
	/* float: left; */
	width: 100%;
	display: inline-block;
}


.chat-body .answer .name {
	font-size: 12px;
	line-height: 12px;
	font-weight: 600;
	display: inline flow-root list-item;
	width: 100%;
}

/*.emojiTooltip {
    position: absolute;
    right: 0;
    bottom: 0px;
}*/
#attachment {
  width: 100%;
}
#attachedFile, #replyWithId {
  display: none;
}

.attachments {
  width: 100%;
  display: inline-block;
}

.smile-image-reply {
    right: 10px;
    top: 4px;
    width: 20px;
}

.smile-image-reply img {
  width: 100%;
  height: 100%;
}

.chat-bottom-mic-file {
  cursor: pointer;
}

.typingIndicator {
    width: 100%;
    display: inline-block;
    position: relative;
    left: 0;
    bottom: 0px;
    font-size: 11px;
    line-height: 11px;
    text-transform: capitalize;
}

.latestReaction {
/*  position: absolute;*/
  bottom: 0px;
}

.latestReaction.left {
  left: 0px;
}

.latestReaction.right {
  right: 0px;
}

.text-reply {
    right: 40px;
    top: 5px;
    color: silver;
}

.chat-bottom-mic-image {
  font-size: 20px;
  color: gray;
  cursor: pointer;
}

.stop-recording{
  display: none;
}

.red {
  color: red;
  font-size: 10px;
  font-weight: 400;
  margin: 0px 10px -1px 0;
}
.progress-bar-checkbox .green {
  color: green;
  font-size: 10px;
  font-weight: 400;
  margin: 0px 10px -1px 0;
}

.field-info-checkmark {
  display: flex;
  align-items: center;
  gap: 13px;
}

.tasks-items .field-info-checkmark {
  display: block;
}


/*Group Chat*/
/*.g_emojiTooltip {
    position: absolute;
    right: 0;
    bottom: 0px;
}*/

.g_stop-recording {
    display: none;
}

#g_attachedFile, #g_replyWithId {
  display: none;
}

#g_attachment {
  width: 100%;
}