#chat-container {
	display:flex;
}

#chat-container > #chat-col {
	flex:1;
	display:flex;
	flex-direction:column;
	padding:50px;
	max-height:420px;
	gap:8px;
}

#chat-container > #chat-col > .chat_row {
	color:var(--color-text-white);
	padding:15px 20px;
	border-radius: 15px;
}

#chat-container > #chat-col > .chat_row.user {
	font-weight:bold;
	width:fit-content;
	background-color: rgba(255,255,255,0.2);
	
}

#chat-container > #chat-col > .chat_row.assistant {
	background-color: rgba(0,192,255,0.3);
	width:fit-content;
	overflow-y:auto;
}

#chat-container > #chat-col > .chat_row.assistant.loaded {
	margin-left:30px;
}

#chat-container > #prod-col {
	flex:1;
	color:#fff;
}

/* HTML: <div class="loader"></div> */
.lds-ellipsis {
	/* change color here */
	color: #ffffff
 }
 .lds-ellipsis,
 .lds-ellipsis div {
	box-sizing: border-box;
 }
 .lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
 }
 .lds-ellipsis div {
	position: absolute;
	top:-13.33333px;
	width: 13.33333px;
	height: 13.33333px;
	border-radius: 50%;
	background: currentColor;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 .lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
 }
 @keyframes lds-ellipsis1 {
	0% {
	  transform: scale(0);
	}
	100% {
	  transform: scale(1);
	}
 }
 @keyframes lds-ellipsis3 {
	0% {
	  transform: scale(1);
	}
	100% {
	  transform: scale(0);
	}
 }
 @keyframes lds-ellipsis2 {
	0% {
	  transform: translate(0, 0);
	}
	100% {
	  transform: translate(24px, 0);
	}
 }