* {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
    }

    .green-text {
      color: green;
    }

    .red-text {
      color: red;
    }

    #messages video {
      width: 100%;
    }

    .container {
      position: relative;
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
    }

    .messages-outer li img {
      max-width: 100%;
    }

    .messages-outer li img.img-tag {
      max-width: 100%;
      height: auto !important;
      max-height: 250px;
      width: auto !important;
    }

    .messages-outer li {
      display: inline-block;
      width: 100%;
      list-style: none;
      margin: 0 0 20px;
      font-family: "Ubuntu", sans-serif;
    }

    .user-message-container {
      width: 80% !important;
      max-width: 500px;
    }

    .admin-message-container {
      width: 80% !important;
      max-width: 500px;
      float: right;
    }

    li.user-message-container p,
    .admin-message-container p {
      margin: 0 0 5px;
    }

    .user-name,
    .admin-name {
      margin: 0 0 15px;
      display: inline-block;
      width: 100%;
    }

    .user-name p,
    .admin-name p {
      margin: 0;
      font-size: 15px;
      color: #B98797;
      font-weight: 600;
    }

    .admin-name p {
      color: #92A866;
    }

    .user-message img {
      width: auto;
      float: left;
      max-width: 100%;
    }

    .user-message,
    .admin-message {
      display: inline-block;
      width: 100%;
      padding: 10px;
      background: #f4f4f4;
      position: relative;
      border-radius: 10px;
      /* white-space: pre-line; */
    }

    .admin-message {
      background: #DEF0B9;
    }

    .user-message::before,
    .admin-message::before {
      content: '';
      border-bottom: 10px solid #f4f4f4;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      left: 12px;
      top: -10px;
    }

    .admin-message::before {
      border-bottom: 10px solid #DEF0B9;
    }

    .message-time {
      display: inline-block;
      width: 100%;
      text-align: right;
      line-height: 0;
    }

    .message-time p {
      margin: 10px 0 0 !important;
      font-size: 13px;
      color: #5f5f5fd1;
    }

    /*.user-container,*/
    /*.admin-container {*/
    /*  width: 100%;*/
    /*  border: 1px solid #ccc;*/
    /*  background: #f1f1f1;*/
    /*  margin-bottom: -62px;*/
    /*  border-radius: 5px;*/
    /*  display: flex;*/
    /*  justify-content: center;*/
    /*  align-items: center;*/
    /*}*/
    .user-container,
    .admin-container {
      width: 100%;
      border: 1px solid #ccc;
      background: #f1f1f1;
      margin-bottom: 0;
      border-radius: 5px;
      display: flex; 
      justify-content: center;
      align-items: center;
      position: fixed;
      bottom: 0;
      max-width: 800px;
    }

    .image-upload,
    .submit-outer {
      float: left;
      width: 70px;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .image-upload input {
      opacity: 0;
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: 9;
      cursor: pointer;
    }

    .image-upload .upload-custom-icon {
      text-align: center;
      font-size: 30px;
      color: #8e8e8e;
    }

    .image-upload {
      box-sizing: border-box;
     
    }

    .submit-outer {
      box-sizing: border-box;
      border-right: 1px solid #cdc9c9;
    }

    .submit-outer button {
      height: 100%;
      width: 100%;
      border: transparent;
      font-size: 30px;
      color: #8e8e8e;
      cursor: pointer;
    }

    .message-outer {
      width: calc(100% - 140px);
      float: left;
    }

    .message-outer textarea {
      float: left;
      width: 100%;
      margin: 0;
      padding: 5px 10px;
      box-sizing: border-box;
      min-height: 74px;
      font-size: 16px;
      border: none;
      outline: 0;
      resize: vertical;
      border-left: 2px solid #cecece;
      border-right: 2px solid #cecece;
      box-sizing: border-box;
      max-width: 100%;
    }

    .messages-outer {
      margin: 0;
      padding: 0;
      width: 100%;
    }

    .messages-outer {
      margin: 0;
      padding: 70px 0 0;
      width: 100%;
      position: relative;
    }

    .admin-active {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #eaeaea;
      padding: 15px;
      border-bottom: 2px solid #ccc;
    }

    .admin-active p {
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    div#messages {
      padding: 0 10px;
    }

    div#messages>div {
      display: inline-block;
      width: 100%;
    }

    #messages {
      overflow: auto;
      height: 424px;
      /* Adjust the height as needed */
    }

    /* #messages {
  scroll-behavior: smooth;
} */
    .pdf-name {
      display: inline-block;
      text-decoration: none;
      font-size: 13px;
      color: #000000;
      width: 100%;
    }

    .attachement-file {
      text-decoration: none;
    }

    .pdfIcon {
      height: 50px;
    }

    .img-tag {
      width: 50% !important;
      height: 100% !important;
    }

    .selected-file {
      position: absolute;
      left: 0;
      bottom: 0px;
      background: #ddf0bdb0;
      width: 100%;
      padding: 5px 15px;
      font-size: 15px;
      font-family: "Ubuntu", sans-serif;
      color: #262626cf;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    pre {
      font-family: "Ubuntu", sans-serif;
      white-space: break-spaces;
      word-wrap: break-word;
      margin: 0;
      margin-right: 15px !important;
    }

    .color-green {
      color: #728c34 !important;
    }

    .admin-message i.fa.message-menu-option.menu-message,
    .user-message i.fa.message-menu-option.menu-message {
      right: 5px;
      top: 6px;
      position: absolute;
      cursor: pointer;
      height: 20px;
      width: 20px;
      text-align: center;
      color: #8e8e8e;
      font-size: 16px;
      /* opacity: 0;  */
      transition: opacity 0.3s ease;
      /* Add a transition effect */
    }

    .admin-message:hover i.fa.message-menu-option.menu-message,
    .user-message:hover i.fa.message-menu-option.menu-message {
      opacity: 1;
      /* Show the icon on hover */
    }


    .menu-container {
      position: relative;
      display: inline-block;
    }

    .menu {
      position: absolute;
      top: 25px;
      /* Adjust the distance from the icon as needed */
      right: 0;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      padding: 5px;
      display: none;
      /* Hide the menu by default */
    }

    .menu li {
      list-style: none;
      cursor: pointer;
    }

    .menu-container:hover .menu {
      display: block;
      /* Show the menu on hover */
    }

    ul.message-edit {
      display: none;
      position: absolute;
      width: 100px;
      background: #fff;
      right: 5px;
      top: 25px;
      z-index: 9;
      box-shadow: 0 0 10px #afafaf;
      padding: 0;
      border-radius: 3px;
    }

    ul.message-edit:before {
      border-bottom: 5px solid #fff;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      content: '';
      position: absolute;
      right: 5px;
      top: -5px;
    }

    ul.message-edit li {
      padding: 5px 10px;
      margin: 0;
      font-size: 12px;
      cursor: pointer;

    }

    ul.message-edit li:hover {
      background-color: #f0f0f0;
      /* Change the background color to highlight */
      color: #2e2e2e;
      /* Optionally change the text color */
    }

    .emoji {
      display: none;
      position: absolute;
      top: -40px;
      right: 5px;
      background: #fff;
      padding: 10px 20px;
      box-shadow: 0 0 25px #c6c6c6;
      border-radius: 50px;
    }

    .emoji ul {
      margin: 0;
      padding: 0;
    }

    .emoji ul li {
      display: inline-block;
      width: auto;
      margin: 0;
    }

    .emoji-reaction {
      cursor: pointer;
    }

    .reacted {
      position: absolute;
      background-color: #ffff;
      padding: 4px 3px 3px;
      border: 1px solid #cccc;
      border-radius: 50px;
      text-align: center;
      bottom: -10px;
      font-size: 14px;
      left: 10px;
      display: none;
    }

    .reacted:not(:empty) {
      display: block;
      /* Set display to block if the div is not empty */
    }

    /* audio::-webkit-media-controls-mute-button { display: none !important; }  */
    /* audio::-webkit-media-controls-volume-slider { display: none !important; } */
    /* audio::-webkit-media-controls-volume-container { pointer-events: none !important; } */
    /* Disable hover effect for the entire controls except the play/pause button */
    /* audio::-webkit-media-controls:hover:not(:hover::-webkit-media-controls-play-button):not(:hover::-webkit-media-controls-pause-button) {
  pointer-events: none !important;
} */


    .mediaPlayer:hover {
      cursor: pointer;
      ;
    }

    /* .editSentMessage {
  display: flex;
  gap: 20px;
}

.edit-msg-button {
  gap: 10px;
  display: flex;
  font-size: 13px;
  inline-size: fit-content;
} */

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

    .editSentMessage textarea {
      width: 60%;
      float: left;
      padding: 6px 5px;
      margin: -4px 0 0;
      border: 1px solid #728c34;
      border-radius: 3px;
      resize: vertical;
      min-height: 30px;
      max-height: 200px;
    }

    .edit-msg-button {
      width: 40%;
      float: left;
      padding: 0 0 0 10px;
      text-align: right;
    }

    .edit-msg-button span {
      font-size: 11px;
      border: 1px solid #728c34;
      background: #728c34;
      color: #fff;
      padding: 4px 10px;
      border-radius: 3px;
      cursor: pointer;
    }

    .edit-msg-button span.cancel-edit-msg {
      background: #fff;
      color: #415c00;
    }

    .display-none {
      display: none !important;
    }

    .display-block {
      display: block !important;
    }

    button.send-btn,
    #start-button {
      border: none;
      border-radius: 5px;
      color: white;
      cursor: pointer;
      margin-left: 7px;
    }

    .send-btn{
      background: #415c00;
      padding: 10px;
    }
    #start-button {
      background: #8e8e8e;
      padding: 13px;
      /* margin-left: 7px; */
    }

    #start-button:hover {
      background: #415c00;
    }

   
    button.cancel-btn,
    #stop-button {
      background: hsla(11, 100%, 42.2%, 1);
      border: none;
      padding: 10px;
      border-radius: 5px;
      color: white;
      margin-left: 10px;
      cursor: pointer;
    }

    div#recording-preview {
      display: flex;
      align-items: center;
    }
    .audioRecord {
      display: flex;
      padding: 15px;
    }