:root {
  --text-color: #222222;
  --primary-color: #0889bd;
  --secondary-color:#0470a3;	
  --bgcolor-0: #f8f8f8;
  --bgcolor-1: #fff;
  --bgcolor-2: rgba(255,255,255, 0.0);	
  --bgcolor-3: #0889bd;	
  --bgcolor-4: #081c08;	
  --beige: #f5f3ef;
  --light-grey: #f5f3ef;
  --white-color:#fff;	
  --darker-light-grey: #e8e4dc;	
	
}



body{
	font-family: 'Quicksand', sans-serif; 
	color:var(--text-color);
	letter-spacing:0.2px;
	font-size:16px;
	line-height:22px;
	background-color: #f8f8f8;
}


.chatbot_window {width:100%;  }
.chatbot_output, .chatbot_input, .chatbot_status, .predefined_questions {padding-left:10px;}
.chatbot_output {height:100vh; padding: 10px; display: flex; flex-direction: column; overflow: scroll;padding-bottom:130px;}
.chatbot_output_preview{height:auto; padding: 10px; display: flex; flex-direction: column; overflow: scroll;}

.chatbot_status{ padding-left:10px;}

.chatbot_icon img{width:50px; border-radius:25px;}
.chatbot_input {padding:5px; paDDING-LEFT:2%; padding-right:2%;
background-color: #fff;
		border-radius: 25px;
	border: 1px solid #ddd;
position:relative;
	width:92%;
}
.chatbot_input textarea{width:60%;  resize: none; 	font-family: 'Quicksand', sans-serif; 	font-size:14px;
	padding-left:15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom:10px;
	border:none;
	outline: none;
	
}
.message_output {font-size:14px; margin-top: 5px; margin-bottom:5px; display:flex;}
.message_output.uOutput {
	align-items: flex-end;
font-weight: 800;
	flex-direction: column;

}

.message_output.bOutput {text-align: left; padding: 10px; align-items: flex-start;
}

.message_output.bOutput .message_bubble {margin-left:20px;}

.message_output.uOutput .message_bubble {background-color: rgba(233, 233, 233, 0.5); padding: 10px;border-radius: 20px; }


.chatbot_name {font-weight:800;}


.predefined_questions span {background-color: #DAEEFF; display: inline-block; padding: 2px; color:var(--primary-color); margin-right:5px; border-radius: 5px; font-size:12px; padding-left:5px; padding-right:5px; margin-bottom: 5px;}

span.predef_question{text-decoration: none; cursor: pointer;color:var(--primary-color); }

.chatbot_actionbar{
position: fixed;
bottom: 20px;
width: 100%;
}
.chatbot_actions{
	padding:5px; 
margin-top: 0px;
padding-top: 0px;
position:absolute;
	right:0;
	top:15px;
}


#loadingIcon img{width:35px;}

.iconShown {display:block;}
.iconNotShown {display:none;}


span#sendMessage{cursor:pointer; background-color: var(--primary-color); color:#fff; border-radius:20px; padding:3px; margin-top: 10px; display: inline-block; padding-right:20px; padding-left:20px;}

span#clearMessages{cursor:pointer; background-color: var(--primary-color); color:#fff; border-radius:20px; padding:3px; margin-top: 10px; display: inline-block; padding-right:20px; padding-left:20px;}


span#sendMessage:hover{
	opacity: 0.5;
}

span#clearMessages:hover{
	opacity: 0.5;
}

span.statusCode {display:none;}



@media (max-width:767px)
{
.chatbot_output{height:65vh; padding-bottom:10px; width:100%;}
	.chatbot_input textarea	{width:50%;}
	.chatbot_window {width:100%;}
}