:root {
  --header-bg-color: #FCBD20;
  --header-text-color: #FFFFFF;
  --chat-bg-color: #f7f7f7;
  --border-color: #f7f7f7;
  --sender-bg-color: #6C757D;
  --sender-text-color: #FFFFFF;
  --assistant-bg-color: #1E88E5;
  --assistant-text-color: #FFFFFF;
  --input-bg-color: #FFFFFF;
  --input-text-color: #000000;
  --button-bg-color: #FCBD20;
  --button-icon-color: #FFFFFF;
}

/* Chat widget styles */

#chat-header {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  padding: 10px; 
  border-top-left-radius: 10px; 
  border-top-right-radius: 10px; 
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
}

#chat-header h4 {
  margin: 0; 
  font-size: 20px; 
  font-weight: 800;
}

#close-chat {
  padding: 0; 
  background: none; 
  border: none; 
  cursor: pointer;
  color: var(--header-text-color);
}

#chat-box {
  padding: 10px; 
  height: 400px; 
  max-height: 400px;  
  overflow: auto;
  background-color: var(--chat-bg-color);
}

#chat-window {
  border: 1px solid var(--border-color);
  max-width: 350px; 
  min-width: 100%; 
  height: fit-content; 
  border-radius: 10px; 
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16);
  transform: scale(1); 
  transform-origin: right bottom; 
  transition: transform 0.3s; 
  z-index: 1000; 
  overflow: hidden;
}

.sender-bubble {
  display: flex; 
  justify-content: end; 
  padding: 10px; 
  border-radius: 10px; 
  width: fit-content; 
  max-width: 80%;
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.4;
  background-color: var(--website-sender-bg-color);
  color: var(--website-sender-text-color);
  margin-bottom: 10px;
}

.assistant-bubble-container {
  display: flex; 
  justify-content: end; 
  width: 100%;
  margin-bottom: 10px;
}

.assistant-bubble {
  display: flex; 
  justify-content: end; 
  padding: 10px; 
  border-radius: 10px; 
  width: fit-content;
  max-width: 80%;
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.4;
  background-color: var(--website-assistant-bg-color);
  color: var(--website-assistant-text-color);
}

#chatAndSendButtonContainer {
  display: flex; 
  justify-content: space-between;
  border-top: 1px solid var(--border-color);
}

#chat-input {
  width: 100%; 
  padding: 10px; 
  outline: none;
  background-color: var(--input-bg-color);
  color: var(--input-text-color);
  border-right: 1px solid var(--border-color);
  border-top: none;
  border-bottom: none;
  border-left: none;
}

#send-button {
  border: none; 
  padding: 10px; 
  cursor: pointer;
  background-color: var(--input-bg-color);
  color: var(--input-text-color);
  transition: color 0.3s ease;
}

#send-button:hover {
  color: var(--header-bg-color);
}

#chat-input::placeholder {
  opacity: 0.5;
  color: var(--input-text-color);
}

#chat-button {
  display: block;
  transition: 0.3s;
}

#open-chat {
  display: flex; 
  align-items: center; 
  justify-content: center;
  border: none; 
  border-radius: 13px; 
  padding: 8px 10px; 
  cursor: pointer; 
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16);
  background-color: var(--button-bg-color);
  color: var(--button-icon-color);
}

/* End of widget styles */

.navbar,
#main-wrapper[data-layout="horizontal"]
  .topbar
  .top-navbar
  .navbar-header[data-logobg="skin6"],
#main-wrapper[data-layout="vertical"]
  .topbar
  .top-navbar
  .navbar-header[data-logobg="skin6"] {
  background: #f7fafc !important;
}

.btn-primary {
  background-color: #fcbd20 !important;
  border-color: #fcbd20 !important;
}

.error {
  border: 1px solid red;
}

.color-box {
  width: 35px;
  height: 35px;
  max-width: 35px;
  max-height: 35px;
  border: none;
  padding: 0;
  cursor: pointer;
}

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jumping-dots .dot-1,
.jumping-dots .dot-2,
.jumping-dots .dot-3 {
	background-color: var(--assistant-text-color);
	width: 7px;
	height: 7px;
	border-radius: 50%
}

.jumping-dots span {
	position: relative;
	margin-left: 0;
	margin-right: 0;
	animation: 1s infinite jump;
	display: inline-block
}

.jumping-dots .dot-1 {
	margin-right: 3px;
	animation-delay: .2s
}

.jumping-dots .dot-2 {
	margin-right: 3px;
	animation-delay: .4s
}

.jumping-dots .dot-3 {
	animation-delay: .6s
}

@keyframes jump {

	0%,
	40% {
		bottom: 0
	}

	20% {
		bottom: 5px
	}
}