.ChatBot{
	position: fixed;
	right: 5px;
	bottom: 5px;
	z-index: 5100;
}
.ChatBot .ChatBotWindow{
	display: none;
	width: 320px;
	height: 400px;
	background: #fff;
	color: #000;
	border: solid 1px #333;
	border-radius: 8px;
	position: relative;
	right: 0px;
}

@media(max-width: 360px){
	.ChatBot .ChatBotWindow{
		max-width: calc(100vw - 6px);
	}
}

.ChatBot.Show .ChatBotWindow{
	display: block;
}

.ChatBot .cbHeader{
	background: #3298ef;
	color:  #fff;
	height: 37px;
	display: flex;
	justify-content: left;
	padding: 3px 5px;
}

.ChatBot .cbHeader .cbBotName{
	line-height: 32px;
	padding-left: 5px;
}
.ChatBot .cbFooter{
	display: flex;
	justify-content: right;
}
.ChatBot  .cbButtonShow{
	color: #000;
	border-radius: 8px;
	border: solid 1px #333;
	background: #027fff;
	color:  #fff;
	text-align: center;
	width: 60px;
	height: 60px;
	line-height: 60px;
	cursor: pointer;
	position: relative;
}
.ChatBot.Show .cbButtonShow{
	display: none;
}
.ChatBot  .cbButtonShow .cbWarning{
	position: absolute;
	top: -5px;
	right: -5px;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	background: #f00;
	color: #fff;
	font-size: 8px;
	line-height: 16px;
}
.ChatBot  .cbButtonHide{
	display: none;
	color: #000;
	border-radius: 8px;
	border: solid 1px #333;
	background: #027fff;
	color:  #fff;
	font-size: 55px;
	text-align: center;
	width: 60px;
	height: 60px;
	line-height: 60px;
	cursor: pointer;
}
.ChatBot.Show .cbButtonHide{
	display: block;
}
.ChatBot.Show .cbButtonHide .icon-close{
	width: 100%;
	height: 100%;
	background-image: url("close.png");
	background-position: center;
	background-size: 46px 46px;
	background-repeat: no-repeat;
}
.ChatBot.Show .cbUserPhoto{
	width: 30px;
	height: 30px;
	border-radius: 100%;
	position: relative;
}
.ChatBot.Show .cbUserPhoto img{
	max-width: 100%;
	max-height: 100%;
}
.ChatBot.Show .cbUserPhoto.cbBotIcon{
	background-image: url('/template/face/images/logo_bold.gif');
	background-position: center;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	border:  solid 2px #fff;
}
.ChatBot.Show .cbUserPhoto .cbOnline{
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background: #00ff00;
	border:  solid 2px #fff;

}
.ChatBot .cbChat{
	overflow-y: scroll;
	max-height: 300px;
	height: 300px;
	padding-right: 8px;
}
.ChatBot .cbChat .cbMassager{
	font-size: 14px;
}
.ChatBot .cbChat .cbMassager .write-bot{
	display: flex;
	justify-content: left;
	align-items: flex-end;
}

.ChatBot .cbChat .cbMassager .write-user{
	display: flex;
	justify-content: right;
	/*flex-direction: row-reverse;*/
}
.ChatBot .cbChat .cbMassager .write-bot .cbUserPhoto{
	background-image: url('/template/face/images/logo_bold.gif');
	background-position: center;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	margin-bottom: 12px;
	margin-left: 4px;
	z-index: 500;
}
.ChatBot .cbChat .cbMassager .write-user .cbUserPhoto{
	display: none;
	/*margin-top: 8px;
	background-image: url('user_photo.png');
	background-position: center;
	background-size: 40px 40px;
	background-repeat: no-repeat;*/
}
.ChatBot .cbChat .cbMassager .cbMessage{
	border-radius: 5px;
	background: #027fff;
	color:  #fff;
	padding: 8px;
	margin: 5px 2px;
	max-width: 215px;
}
.ChatBot .cbChat .cbMassager .write-bot .cbMessage{
	background: #f1f1f1;
	color: #000;
	border: solid 1px #a1a1a1;
	margin-left: 6px;
	position: relative;
	border-radius: 5px 5px 5px 0px;
}
.ChatBot .cbChat .cbMassager .write-bot .cbMessage .cbComer{
	width: 20px;
	height: 30px;
	background: #f1f1f1;
	border-right: solid 2px #f1f1f1; 
	border-bottom: solid 2px #a1a1a1; 
	position: absolute;
	bottom: -1px;
	left: -21px;

}
.ChatBot .cbChat .cbMassager .write-bot .cbMessage .cbComer .cbComer-circle{
	width: 20px;
	height: 30px;
	background: #fff;
	border-radius: 0px 0px 20px 0px;
	border-right: solid 1px #a1a1a1; 
	border-bottom: solid 1px #a1a1a1; 
}
.ChatBot .cbChat .cbMassager .write-error{
	display: flex;
	justify-content: left;
}
.ChatBot .cbChat .cbMassager .write-error .cbMessage{
	border-radius: 20px;
	background: #c10505;
	color:  #fff;
	padding: 8px;
	margin: 5px 2px;
}
.ChatBot .cbChat .cbUserAnswer .cbSelectAnswer .cb-option{
	display: flex;
	justify-content: right;
}
.ChatBot .cbChat .cbUserAnswer .cbSelectAnswer .cb-button{
	border-radius: 5px;
	background: #02b9ff;
	color:  #fff;
	padding: 8px;
	margin: 5px 2px;
	min-width: 40px;
	max-width: 215px;
	cursor: pointer;
}
.ChatBot .cbChat .cbUserAnswer .cbSelectAnswer .cb-button:hover{
	background: #027fff;
}

.ChatBot  .cbTextAnswer{
	display: none;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 4px 0px 8px 0px;
	border-top: solid 1px #aaa;
	background: #fff;
}

.ChatBot .cbTextAnswer textarea{
	width: 270px;
	height: 20px;
	font-size: 16px;
	border: solid 1px #aaa;
	padding: 4px 0px;
	text-indent: 10px;
	resize: none;
}
.ChatBot .cbTextAnswer .button_message_send{
	width: 30px;
	height: 30px;
	margin-left: 2px;
	cursor: pointer;
	border-radius: 4px;
	background: #027fff;
	background-image: url('icon-send-48.png');
	background-position: center;
	background-size: 25px 25px;
}

.ChatBot .cbUserAlert{
	position: absolute;
	right: 80px;
	bottom:  0px;
}
.ChatBot .cbUserAlert .cbText{
	background: #fff;
	color: #000;
	height: 52px;
	width: 100px;
	padding: 4px 8px;
	border-radius: 5px;
	position: relative;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
}
.ChatBot .cbUserAlert .cbText .cbTextFix{
	height: 52px;
	overflow: hidden;
}
.ChatBot .cbUserAlert .cbText .cb-arrow{
	position: absolute;
	top: 20px;
	right: -10px;
	width: 20px;
	height: 20px;
	background: #fff;
	transform: rotate(-45deg);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
}
.ChatBot .cbUserAlert .cbText .cb-close{
	position: absolute;
	top: -8px;
	left: -40px;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background-color: #555;
	background-image: url("close.png");
	background-position: center;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	border: solid 2px #fff;
	cursor: pointer;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
}