/* ========= INFORMATION ============================
	- document:  WP Coder!
	- author:    Dmytro Lobov 
	- url:       https://wow-estore.com/
==================================================== */
.dark-blue{
	background-color: #325574;
	color: white;
}
.orange{
	background-color : #B56132;
	color : white;
}
.green{
	background-color: #769A6E;
	color:white;
}
.mauve{
	background-color : #533585;
	color:white;
}
.hide {
	display: none !important;
}

.avatar img {
	width: 100px;
	border-radius: 100px;
	margin: 10px;
	flex: 1;
}

.chat-messages {
	display: flex;
	flex-direction: column;
}

.chat-bubble-right {
	flex: 1;
	align-self: flex-end;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	margin: 15px;
}

.chat-bubble-left {
	flex: 1;
	align-self: flex-start;
	align-items: center;
	display: flex;
	margin: 15px;
}

.chat-bubble-message {}

.text {
	flex: 5;
	display: block;
	min-height: 40px;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
    padding: 20px;
}

.typing {
	display: block;
	width: 60px;
	height: 40px;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.circle {
	display: block;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	background-color: white;
	margin: 3px;
}

.circle.scaling {
	animation: typing 1000ms ease-in-out infinite;
	animation-delay: 3600ms;
}

.circle.bouncing {
	animation: bounce 1000ms ease-in-out infinite;
	animation-delay: 3600ms;
}

.circle:nth-child(1) {
	animation-delay: 0ms;
}

.circle:nth-child(2) {
	animation-delay: 333ms;
}

.circle:nth-child(3) {
	animation-delay: 666ms;
}

@keyframes typing {
	0% {
		transform: scale(1);
	}
	33% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.4);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}
	33% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}