@keyframes dots {
  0%, 20% {
    content: '.'; }
  40% {
    content: '..'; }
  60% {
    content: '...'; }
  80%, 100% {
    content: ''; } }
.typing-indicator {
  display: block;
  font-weight: bold; }

.typing-indicator::after {
  content: '';
  animation: dots 1s steps(5, end) infinite; }

#chatbox {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 600px;
  height: 500px;
  background-color: #fff;
  border: 1px solid #202549;
  border-radius: 8px;
  cursor: move;
  overflow: hidden;
  z-index: 99999; }

#header {
  background-color: #03B4CE;
  color: #fff;
  padding: 10px;
  cursor: move; }

#messages {
  height: 416px;
  overflow-y: auto;
  padding: 10px;
  border-bottom: 1px solid #ccc; }

#input {
  display: flex; }

#input input {
  width: 80%;
  padding: 10px;
  border: none;
  outline: none; }

#input button {
  width: 20%;
  padding: 10px;
  border: none;
  background-color: #202549;
  color: #fff;
  cursor: pointer; }

.noshow {
  display: none !important; }

#messages div {
  border-bottom: solid 1px black;
  padding: 20px 0px; }

#messages .you {
  background-color: #EEEEEE; }

/* New Styles for the cross button */
#crossButton {
  position: absolute;
  right: 10px;
  top: 10px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #fff; }