@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;
  }
}