@import 'https://fonts.googleapis.com/css?family=Noto+Sans';
body {
  padding: 0;
  margin: 0;
  background: -moz-linear-gradient(-45deg, #183850 0, #183850 25%, #192C46 50%, #22254C 75%, #22254C 100%);
  background: -webkit-linear-gradient(-45deg, #183850 0, #183850 25%, #192C46 50%, #22254C 75%, #22254C 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Vazirmatn, sans-serif;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.1);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.2);
}

.chat-thread {
  margin: 24px auto 0 auto;
  padding: 0 20px 0 0;
  list-style: none;
  overflow-y: scroll;
  overflow-x: hidden;
}

.chat-thread li {
  position: relative;
  clear: both;
  display: inline-block;
  padding: 16px 40px 16px 20px;
  margin: 0 0 20px 0;
  font: 16px/20px Vazirmatn, sans-serif;
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.2);
  text-align: justify;
  direction:rtl;
}

/* Chat - Avatar */
.chat-thread li:before {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  content: "";
}

/* Chat - Speech Bubble Arrow */
.chat-thread li:after {
  position: absolute;
  top: 15px;
  content: "";
  width: 0;
  height: 0;
  border-top: 15px solid rgba(25, 147, 147, 0.2);
}

.chat-thread li:nth-child(odd) {
  animation: show-chat-odd 0.15s 1 ease-in;
  -moz-animation: show-chat-odd 0.15s 1 ease-in;
  -webkit-animation: show-chat-odd 0.15s 1 ease-in;
  float: right;
  margin-right: 80px;
  color: #0AD5C1;
}

.lowAttentionHint {

  margin-left:0px !important;
  display:none;
  color:#bbc80e  !important;;
  text-align: center !important;
  font-size: large !important;
 }


.chat-thread li:nth-child(odd):before {
  right: -80px;
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAASAAAATgAAAAAAAABgAAAAAQAAAGAAAAABUGFpbnQuTkVUIHYzLjUuMTAA/9sAQwAHBQUGBQQHBgUGCAcHCAoRCwoJCQoVDxAMERgVGhkYFRgXGx4nIRsdJR0XGCIuIiUoKSssKxogLzMvKjInKisq/9sAQwEHCAgKCQoUCwsUKhwYHCoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioq/8AAEQgAMgAyAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8wre0/w55qLLqM62ysMrEWAdh+PSl8M6fFLMbu5K7YziNT3b1/CqniRLq98UA2SlhHGobnA55FdbajHmZwxTnLlRtm78NabDGhs/tEwchmVfMGD0znvn0pqahoN3fCH+z0RcHcWiKY4745/KuUVtTtdSFtJCvmxHmN+317Gp5dTthGZXUSXPJJVsh1PUH1rP2rZt7GKOi1LwxHIv2jRg20jPks4b64b+h/OuZZWRyrqVZTggjBBrZ0PWftFwkA8xImTpu7gVJr1kpX7UhzJ0cZ5I9a0umtDJxcWYVFFFBJ1WlKkOmQASYyoYjZnk81aukuLHTP7YFtDeW6zJEFmyu4555H8PQemaz9NmR9PhO45C7T+HFa1rrk9iwSZ3vLJU+WyaVUCsDncMjJI64H41riYRVHmS7E4KbliOWT7nPePtPvbm8j1trWSyF3GpkgkYEbl4BBHTjHBrn49GkfRLnUpn2tBgtFj76k4GD/e749K63xb4gtdTtp4LeRismGVyOmDnpWBq2pXd74ZsdPjG2GCTdHDEnzSN/ebHLH+VeXBuyR7E4wu35EXhKKObVCRnMKMwY+hwAPz5rrJ7bzYXTfu3Ag5yKwfC+nNZvcPPJHvdQDGnJjOehPTPsOlb0zLFA8m/hVJ/SvXo0oundnhV6slU5UcjRRRXPY3Luk3giYwSHCscqfetfULXOlR3TXIhZ2ZYfLILHHDkjsO3PJPSuXqeC5aPzd5ZjIQdxOcEDFa+0fJyEKmvac5myyQWJlRZnkkTHytjoeuPepLaa9vi4ib7LbOMyFG5KjtnrVMabPd30gcrCjMSZGPQf1NbF0i29pHBAUlbABVT8pPqSOwrljDW53c+lrl/RWxvymyDAWPjsPSpdVnVF8iNsk8tz0HpVFLloowEYvJjBkIwB7AdhUGSxJJyT1JrpU2o8py1IwlJS6hRS0VAiKiiikUKKUUUUxC0ooooAKKKKQH/2Q==);
}

.chat-thread li:nth-child(odd):after {
  border-right: 15px solid transparent;
  right: -15px;
}

.chat-thread li:nth-child(even) {
  animation: show-chat-even 0.15s 1 ease-in;
  -moz-animation: show-chat-even 0.15s 1 ease-in;
  -webkit-animation: show-chat-even 0.15s 1 ease-in;
  float: left;
  margin-left: 80px;
  color: #0EC879;
}

.chat-thread li:nth-child(even):before {
  left: -80px;
  background-image: url(data:image/jpeg;base64,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);
}

.chat-thread li:nth-child(even):after {
  border-left: 15px solid transparent;
  left: -15px;
}

.chat-window {
  position: fixed;
  bottom: 18px;
}

.chat-window-message {
  width: 100%;
  height: 48px;
  font: 32px/48px Vazirmatn, sans-serif;
  background: none;
  color: #0AD5C1;
  border: 0;
  border-bottom: 1px solid rgba(25, 147, 147, 0.2);
  outline: none;
}

/* Small screens */
@media all and (max-width: 767px) {
  .chat-thread {
    width: 90%;
    height: 100vh;
  }

  .chat-window {
    left: 5%;
    width: 90%;
  }
}
/* Medium and large screens */
@media all and (min-width: 768px) {
  .chat-thread {
    width: 50%;
    height: 100vh;
  }

  .chat-window {
    left: 25%;
    width: 50%;
  }
}
@keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}
@-moz-keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}
@-webkit-keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}
@-moz-keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}
@-webkit-keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}