/** ---- NEW ---- */
.chat-wrapper { width:100%; }

 #page-chat-box-wrapper {
  height: calc(100vh - 250px);
  background: #fafafa;
  padding: 10px 20px;
  position: relative;
  border: 1px solid #ccc;
  overflow-y: auto;
}

#page-chat-box-wrapper svg {
width: 50px;
height: 50px;
margin: 0px;
display:inline-block;
}
  
.btn-answer { 
	height: 140px !important;
    background-color: #dde4ed;
}

.btn-answer.answer-selected, .btn-answer-blocked.answer-selected { 
	color:#fff;
    background: #274e5c;
}

.btn-multi-select.answer-selected { 
	color:#fff;
    background-color: #274e5c;
}

.btn-multi-select-submit { background:#fc613f; color:#fff; }
.btn-multi-select-submit:hover { background:#f88b73; color:#fff; }

.btn-answer > img { 
	height: 60px;
    width: 60px;
    margin-bottom: 5px;
}

.btn-answer > div { 
	font-size: 12px;
    line-height: 1.3em;
}

.btn-answer-blocked { width:100%;  background-color: #dde4ed; }

.chat-step-block { border:none; }
.chat-bot-message-single:before {
    position: absolute;
    content: 'C';
    top: 0px;
    left: 0px;
    background: #fff;
    border: 1px solid #efefef;
    box-shadow: 0 0 16px rgb(220 220 220 / 32%), 0 2px 4px rgb(235 235 235 / 80%) !important;
    border-radius: 50%;
    width: 45px;
    height: 45px;
	line-height: 47px;
    text-align: center;
	font-weight: 900;
    color: #274e5c;
}
   
.chat-bot-message-single-hidden {
	display:none;
}

.chat-bot-message-single {
	display:none; 
	border:none; 
	padding-left:60px;
	position:relative;
	width: 80%;
}

.chat-bot-message-single.active {
	display:block; 
}

.chat-bot-message-single > div {
    box-shadow: 0 0 16px rgb(220 220 220 / 32%), 0 2px 4px rgb(235 235 235 / 80%) !important; padding: 14px;  display: inline-block;
}

.chat-step-block { display:none; }
.chat-step-block.active { display:block; }


.chat-bot-answers { display:none;  padding-left:58px; justify-content:flex-end; margin-bottom: 10px; padding-right: 55px; }
.chat-bot-answers.active { display:flex;   }
.chat-bot-answer-blocked { display:none !important; padding-left:350px; }
.chat-bot-answer-blocked.active { display:block !important;  }

.chat-from-user { text-align:right; position:relative; padding-right:60px; }
.chat-from-user:before {
    position: absolute;
    content: 'You';
    top: 0px;
    right: 0px;
    background: #fff;
    border: 1px solid #efefef;
    box-shadow: 0 0 16px rgb(220 220 220 / 32%), 0 2px 4px rgb(235 235 235 / 80%) !important;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    line-height: 48px;
    text-align: center;
}
.chat-from-user > div { text-align:left; max-width:80%; box-shadow: 0 0 16px rgb(220 220 220 / 32%), 0 2px 4px rgb(235 235 235 / 80%) !important; padding: 14px;  display: inline-block; }

.chat-step-conditional { display:none; border:none !important; }
.chat-step-conditional.chat-step-block { display:block; }

.current-date {
	padding-top: 10px;
    padding-left: 68px;
    padding-bottom: 5px;
    color: #ccc;
    font-size: 12px;
} 


#chat-message, #chat-message:focus{
    outline: none;
}

#chat-message-wrapper {
	text-align: right;
    padding-right: 122px;
	position:relative;
	margin-top: 20px;
}

#chat-message-wrapper:before {
    position: absolute;
    content: 'You';
    top: -4px;
    right: 0px;
    background: #fff;
    border: 1px solid #efefef;
    box-shadow: 0 0 16px rgb(220 220 220 / 32%), 0 2px 4px rgb(235 235 235 / 80%) !important;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    line-height: 48px;
    text-align: center;
}

#chat-message-submit {
	position: absolute;
    top: 0px;
    right: 60px;
    background: #274e5c;
    color: #fff;
    width: 60px;
    height: 40px;
    line-height: 40px;
}


#chat-message-reset {
	background:#274e5c; position:absolute; left:0px; top:0px; border-radius:50%; width:40px; height:40px;
    line-height: 40px;
}

#chat-message-reset.disabled { opacity: 0.8; }

#chat-message {
	width: 100%;
    display: inline-block;
    max-width: 350px;
    box-shadow: 0 0 16px rgb(220 220 220 / 32%), 0 2px 4px rgb(235 235 235 / 80%) !important;
    border: 1px solid #ccc;
    padding: 0px 10px;
    height: 40px;
    line-height: 40px;
    overflow: hidden; 
    resize: none;
}


.modal-overlay { display:none; background:rgba(0,0,0,0.7); position:fixed; top:0px; left:0px; width:100%; height:100vh; }
.modal-overlay.show { display:block; }
.modal-container { width:95%; max-width:600px; background:#fff; margin:0px auto; margin-top:200px; }
.modal-body { border-bottom:1px solid #efefef; padding:10px; min-height:200px; }
.modal-footer { padding:10px; text-align:right; }
.modal-footer .btn-modal-closer { display:inline-block; height:30px; }

.modal-calendly .modal-container {  margin-top:50px; }


@media only screen and (max-width: 1279px) {
	#page-chat-box-wrapper {
	  height: calc(100vh - 280px);
	}
}


@media only screen and (max-width: 900px) {
	 #page-chat-box-wrapper {
	  height: calc(100vh - 100px);
	  padding: 10px 10px;
	}
	
	.chat-bot-message-single.active { width:100%; padding-left: 40px; }
	.chat-bot-message-single:before { position: absolute; content: 'C'; width: 30px; height: 30px; line-height: 32px; }
	
	.chat-bot-message-single > div { padding:10px; font-size:12px; line-height: 1.1em;}
	
	.button-grey.btn-answer { flex-direction: row; margin-bottom:5px;  }
	.btn-answer { height:40px !important; }
	.btn-answer > img { display:none; }
	.btn-answer > div { font-size: 10px; line-height: 1.1em; font-weight: 600; }

	.chat-bot-answers { padding-left: 35px; justify-content: center;  margin-bottom: 5px; padding-right: 0px;}
	.chat-bot-answers.active { display:block; }
	
	.chat-from-user { padding-right:40px; }
	.chat-from-user > div { max-width: 100%; padding:10px; font-size:12px; line-height: 1.1em; font-weight: 400; }
	.chat-from-user:before { position: absolute; content: 'U'; width: 30px; height: 30px; line-height: 32px; }
	
	#chat-message-wrapper { padding-right: 95px; }

	#chat-message {
		padding: 0px 5px;
		height: 30px;
		line-height: 30px;
	}
	
	#chat-message-wrapper:before {
		content: 'U';
		top:-2px;
		width: 30px;
		height: 30px;
		line-height: 32px;
	}
	
	#chat-message-submit {
		width: 50px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		right: 40px;
	}
	
	
}


@media only screen and (max-width: 580px) {
	#chat-message-wrapper {
		padding-left: 40px;
	}  
	
	#chat-message-reset {
		width: 32px;
		height: 32px;
		line-height: 27px;
	}
}