#chatbotIcon{
	position:fixed;
	right:40px;
	bottom:30px;	
	z-index:90;
	cursor:pointer;
	text-align:right;
}

#chatbotIcon .chatbotIconWithText{
	position:relative;
	margin:0;
    min-width: 425px;
    top: -42px;
    left: -48px
}
#chatbotIconWithTextDiv{
	width: 260px;
    height: 168px;  
    overflow: hidden;
}
.chatbotIconWithoutText{	
	width:100px;
	height:auto;    
	left: 5px;
    top: 5px;
    position: relative;
}
.chatbotIconWithoutText2{	
    position: relative;
}
#chatroom{
	width:500px;
	max-width:90vw;
	height:70vh;
	min-height:450px;
	bottom:15px;
	right:30px;
	position:fixed;
	background:#f0f0f0;
	border-radius:5px;
	z-index:90;	
	display:flex;
	flex-flow: column;
	flex:1;
	box-shadow:rgb(0 0 0 / 20%) 0px 0px 20px 0px, rgb(0 0 0 / 24%) 0px 5px 5px 0px;
}
#chatroom.large{
	width:650px;
	height:85vh;
}
 #chatroomName{
 	padding:3px;
	margin-right: 5%;
	cursor:auto !important;
}
#chatroom.large #chatroomName{
	margin-right: 19%;
}
#chatroom.min{
	height:auto;
	min-height:0px;	
}
#chatroom.min #chatroomReduce,#chatroom.min #chatroomEnlarge{
	display:none;
}
#chatroomHeader{
	padding:10px 10px;
	border-radius:5px 5px 5px 5px;
	display:flex; 
}
.chatroomLang{
	color:#888888;
	font-size:80%;
	padding:3px 5px;
	cursor:pointer;
	line-height:80%;
	margin:auto;
}
.chatroomLang.selected{
	pointer-events:none;
	font-weight:bold;
	color:#333;
}

.chatroomLang:not(:nth-child(3)){
	border-right:1px solid #888;
}
#chatroomHeaderRight{
	display:flex;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	width:100%;
}
#chatroomHeaderRight div{
	padding:3px 3px;	
	color:#888888;
	cursor:pointer;
	vertical-align: middle;
}

#chatroomMessage{
	overflow-y:auto;
	flex: 1 1 auto;
}
#chatroomInputArea{
	background-color:white;
	display:flex;
	margin-top:auto;
	border-radius:0px 0px 5px 5px;
	padding:10px 10px;
	align-items: center;
}
#chatroomFooterMenu{
	cursor:pointer;
}
#chatroomFooterMenu i.bi{
	font-size:35px !important;
	position:relative;
	color:#333333;
	vertical-align: middle;
}
 #chatroomName, #chatroom.large #chatroomName{	
		margin-right: calc((100% - 300px) /2);
	}
#chatroomInputField{
	text-align:center;
	width:100%;
	display:flex;
}
#chatroomInput{
	width: 98%;
	background:white;
	color:#333333;
	padding:7px 7px;
	font-size:22px;
	line-height: 22px;
}

#chatroomInputSubmit .material-icons {
	font-size:30px !important;
	position:relative;
	color:#666666;
	vertical-align: middle;
	cursor:pointer;
	
}

#chatroomMenuList{
	position:absolute;
	bottom:60px;
	background-color:white;
	box-shadow:0 5px 10px rgb(0 0 0 / 20%);
	border-radius:5px;	
}
.chatroomMenuHeader, .chatroomMenuItem{
	padding:5px 10px;
	font-size:85%;	
}
.chatroomMenuHeader, .chatroomMenuItem:not(:last-child){
	border-bottom:1px solid #888;	
}
.chatroomMenuItem a, .chatroomMenuItem a:hover, .chatroomMenuItem a:visited{
	color:#004499 !important;
	text-decoration:none;
}
.chatroomMenuHeader{
	color:#000;
	background-color:#fafafa;
	border-radius:5px 5px 0px 0px;	
}
.chatroomMenuItem:last-child{
	border-radius: 0px 0px 5px 5px;		
}
.chatroomMessageRow{
	margin:10px 20px 20px 10px;
	font-size:85%;
	line-height:120%;
} 
.botIcon{
	display:inline-block;
	vertical-align:top;
	width:60px;
	height:60px;
	text-align: center; 
	overflow:hidden;
}
.botIcon i.bi{
	font-size:40px !important;
	color:#888 !important;
	position:relative !important;
}

.botMessage{
	padding:10px;
	display:inline-block;
	max-width:calc( (100% - 80px) * 0.8 );
	color:#000;
	background:white;
	margin-left:20px;
	border-radius: 15px 15px 15px 0px;
}

.botMessageWithoutIcon{
	margin-left:80px;
	margin-top:20px;
}
.userMessage{
	padding:10px;
	max-width:calc( (100% - 80px) * 0.8 );
	color:#000;	
	border-radius: 15px 15px 0px 15px ;
	margin-left:auto;
	margin-right:0;
	width: fit-content;
	word-break:break-word;
}
.botButtonMessage{
	margin-top:20px;
	display:block;
	width:calc( (100% - 80px) * 0.8 );
	color:#888;
	background:white;
	margin-left:80px;
}
.botButtonMessage .botButton{
	width:100%;;
	margin:auto;
	text-align:center;
	padding:8px 10px;
	cursor:pointer;	
	color:#004499;
	
}
.botButtonMessage .botButton:not(:last-child){
	border-bottom:1px solid #eee;
}


.idle{
	opacity:0.5;
	pointer-events:none;
}


@media(max-width:600px){
	#chatroom,#chatroom.large{
		width:100vw;
		height:90%;
		min-height:300px;		
		max-width:100vw;
		bottom:0px;
		right:0px;
	}
	#chatroom.min{
		height:auto;
		min-height:0px;	
	}
	
	#chatroomReduce,#chatroomEnlarge{
		display:none;
	}

	
	#chatbotIcon{
		right:10px;
		bottom:15px;
	}
	
	 #chatroomName, #chatroom.large #chatroomName{	
		margin-right: calc((100vw - 365px) /2);
	}
	
	 #chatroomName.androidFirefox, #chatroom.large #chatroomName.androidFirefox{	
		margin-right: calc((100vw - 270px) /2);
	}
	#chatroomInput{
	    line-height: 18px;
		font-size:18px;
	}
	#chatroomInputArea{
		padding:10px 5px;
	}
}
@media(max-width:414px){		
	#chatroomInput{
	    line-height: 16px;
		font-size:16px;
	}
	#chatroomInputSubmit .material-icons{
		font-size:27px !important;
	}
	#chatroomFooterMenu i.bi{
		font-size:32px !important;
	}
}
@media(max-width:375px){		
	 #chatroomInput{
	    line-height: 14px;
		font-size:14px;
	}
	#chatroomInputSubmit .material-icons{
		font-size:24px !important;
	}
	#chatroomFooterMenu i.bi{
		font-size:28px !important;
	}
}

@media(max-width:360px){		
	 #chatroomName, #chatroom.large #chatroomName{	
		margin-right: 5px;
	}
}
#rateSubmitButton.dim, #chatroomMessage.dim, #chatroomInputArea.dim,#chatroomHeader.dim{
	opacity:0.7;
	pointer-events:none;
}
#rateSubmitButton, #skipSubmitButton,#rateChatbotCompleteButton{
	font-size:80% !important;
	padding:5px 15px;
	width:100px;
}
body.green .userMessage,body.light_green .userMessage,
body.green #rateHeader,body.light_green #rateHeader{
	background-color: rgb(221, 252, 220);
}
body.red .userMessage,body.light_red .userMessage,
body.red #rateHeader,body.light_red #rateHeader{
	background-color: rgb(252, 221 , 220);
}
body.blue .userMessage,body.light_blue .userMessage,
body.blue #rateHeader,body.light_blue #rateHeader{	
	background-color: rgb(221 , 220 , 252);
}
body.green #chatroomHeader,body.light_green #chatroomHeader{
	background-color: rgb(221, 252, 220);
}
body.red #chatroomHeader,body.light_red #chatroomHeader{
	background-color: rgb(252, 221 , 220);
}
body.blue #chatroomHeader,body.light_blue #chatroomHeader{	
	background-color: rgb(221 , 220 , 252);
}



@media print{
 	body.printing #content,
 	body.printing #footer,
 	body.printing  .background,
 	body.printing  #header>div:not(#chatroomMessage):not(#chatroom),
 	body.printing  #chatroomInputArea, #chatroomHeader{
 		display:none;
 	} 	
 	body.printing #chatroomMessage{
 		width:85vw;
 		height:unset;
 		color:black;
 		margin:auto;
 		overflow: visible;
 		padding:30px 10px;
 	}
 	body.printing #chatroom{
 		height:unset;
 		max-height:unset;
 		min-height:unset;
 		width:100vw;
 		max-width:100vw;
 		position:relative;
 	}
 	body.printing{
 		overflow:visible !important;
 	}
 	body.printing .content-body{
 		overflow-y:visible ;
 	}
 	body.printing .botMessage,body.printing .userMessage,body.printing .botButtonMessage{
		border:1px solid #888;		
	}
}

#chatroomInput{
	resize: none;
	height:auto;
}