@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
body{
	margin:0px;
	padding:0px;
	//font-family:var(--font);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --blue: #C7222A;
  --text_color: #4E4E4E;
  --chat_1: #eaf0f6;
  --chat_2: #f2f2f2;
  --font:'Open Sans', sans-serif; "Calibri";
}

section[chat__bot]{
	width:400px;
	position:fixed;
	height: calc(100% - 120px);
	right:20px;
	bottom: 100px;
	top:auto;
	border-radius: 8px;
	overflow: hidden;
	z-index: 2147483000; 
	display:flex;
	flex-direction: column;
	box-shadow: 0 5px 40px rgba(0,0,0,.1);
	display:none;
	background:#fff
}

section[chat__bot] [role="chat__bot_head"]{
	background:var(--blue);
	padding:20px;
	color:#fff;
	font-weight:600;
	font-size:14px;
	border-radius:5px 5px 0 0px;
	display:flex;
}
section[chat__bot] [role="chat__bot_head"] span{
	margin-left:auto;
	display:flex;
	align-items:center
}
section[chat__bot] [role="chat__bot_head"] span img{
	width:15px;
	margin-left:10px;
}
section[chat__bot] [role="chat__bot_body"]{
	padding:25px;
	background:#fff;
	font-size:13px;
	line-height:24px;
	flex:1;
	overflow-y:scroll;
	height: calc(100% - 108px);
}
section[chat__bot] [role="chat__bot_body"] [class*="chat"]{
	display:flex;
	margin-bottom:20px;
	word-wrap: break-word;
	white-space: pre-wrap;
	position:relative
}
section[chat__bot] [role="chat__bot_body"] [class*="chat"]:last-child{
	margin-bottom:0px;
}
section[chat__bot] [role="chat__bot_body"] [class*="chat"] img{
	width:40px;
	height:40px;
	object-fit: cover;
	border-radius:100%;
	margin-right:15px;
}
section[chat__bot] [role="chat__bot_body"] [class*="chat"] span{
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	border-radius:5px;
	background:var(--chat_1);
	padding:8px;
}
section[chat__bot] [role="chat__bot_body"] [class*="chat"] span a{
	color:#45bcd2;
	font-size:14px;
}
section[chat__bot] [role="chat__bot_body"] [class*="chat"].chat_user{
	flex-direction: row-reverse;
}
section[chat__bot] [role="chat__bot_body"] [class*="chat"].chat_user span{
	background:var(--chat_2);
        width: 80%;
}
section[chat__bot] [role="chat__bot_body"] [class*="chat"].chat_user img{
	margin-left:15px;
	margin-right:0;
}
 
section[chat__bot] [role="chat__bot_body"] .user__slider .item{
	background: var(--chat_1);
	margin: 2px;
	padding: 0;
	font-size: 11px;
	line-height: initial;
	word-wrap: break-word;
	border-radius: 4px;
	overflow: hidden;
	height:100%
}
 
section[chat__bot] [role="chat__bot_body"] .user__slider .item span{
	padding: 5px;
	flex: 1;
	display: flex;
	
	height: 43px;
	align-items: center;
}
section[chat__bot] [role="chat__bot_body"] .user__slider .item span[id="contentType"]{
	padding: 5px;
	flex: 1;
	display: flex;
	height: auto;
	min-height: 0px;
	align-items: center;
	font-style: italic;
    font-size: unset;
	font-weight: bold;
}
section[chat__bot] [role="chat__bot_body"] .user__slider .item >a{
	text-decoration:none;
	color:inherit;
        cursor: pointer;
}
section[chat__bot] [role="chat__bot_body"] .user__slider .item img{
	max-width:100%;
	height:120px;
	object-fit:cover
}
section[chat__bot] [role="chat__bot_body"] .user__slider button[class*="owl-"]{
	position: absolute;
	top: 50%;
	left: 0;
	height: auto;
	color: var(--blue) !important;
	background:none !important;
	border: none;
	left: -22px;
	font-size:20px;
	transform: translateY(-50%);
	padding: 10px;
	background:none;
}
section[chat__bot] [role="chat__bot_body"] .user__slider button[class*="owl-"] i{
	width:auto !important;
	height:auto !important;
	background:none !important;
	color: var(--text_color) !important;
}
section[chat__bot] [role="chat__bot_body"] .user__slider button.owl-next{
	right:-22px;
	left:auto;
}
section[chat__bot] [role="chat__bot_body"] [role="submit__button"],
section[chat__bot] [role="chat__bot_body"] [id*="pbox"]{
	display:flex;
	border:1px solid #ddd;
	margin-top:6px;
	border-radius:4px;
	overflow:hidden;
	background:var(--chat_1);
	flex:1;
	position:relative
}
section[chat__bot] [role="chat__bot_body"] [role="submit__button"] input,
section[chat__bot] [role="chat__bot_body"] [id*="pbox"] input{
	flex:1;
	background:none;
	padding:12px;
	border:none;
}
section[chat__bot] [role="chat__bot_body"] [id*="pbox"]{
	border:none;
	flex:0 0 auto;
	overflow:hidden
}
section[chat__bot] [role="chat__bot_body"] [id*="pbox"] input {
    padding: 10px;
    border: none;
    border: 1px solid #ddd;
    margin: -8px;
	//width:275px;
	border-radius:6px

}
section[chat__bot] [role="chat__bot_body"] [role="submit__button"] button,
section[chat__bot] [role="chat__bot_body"] [id*="pbox"] button{
	background:none;
	border:none
}
section[chat__bot] [role="chat__bot_body"] [id*="pbox"] button{
	position: absolute;
	top: 2px;
	right: 0;
}
section[chat__bot] [role="chat__bot_body"] [role="submit__button"] button img,
section[chat__bot] [role="chat__bot_body"] [id*="pbox"] button img{
	width:20px;
	object-fit:contain
}

section[chat__bot] [role="chat__bot_body"] .button__holder{
	display:flex;
	margin-top:10px;
}
section[chat__bot] [role="chat__bot_body"] .button__holder.bottom_fixed{
	width: 100%;
	background: #fff;
	left: 0;
}
section[chat__bot] [role="chat__bot_body"] .button__holder .btn_b{
	border:1px solid var(--text_color);
	color:var(--text_color);
	padding:10px 10px;
	border-radius:6px;
	flex:1;
	margin-right:5px;
	text-decoration:none;
	text-align:center;
	background:none;
	display:inline-block
}
section[chat__bot] [role="chat__bot_body"] .button__holder .btn_b:last-child{
	margin-right:0px;
}
section[chat__bot] [role="chat__bot_body"] .button__holder .btn_b:hover{
	background:var(--text_color);
	color:#fff
}
section[chat__bot] [role="chat__bot_body"] .button__holder .btn_b.select{
	padding:10px;
	text-align:left;
	margin-bottom:10px;
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
	-webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
section[chat__bot] [role="chat__bot_body"] .button__holder .btn_b.select:hover{
	color:var(--text_color);
}
[role="chat__modal"] .modal-header{
	padding:0;
}
[role="chat__modal"] .modal-content{
	margin: 2vw 14vw;
	width: calc(58vw - 70px);
	border-radius: 5px; 
	overflow: hidden;
}
[role="chat__modal"] .modal-content h2{
	margin: 0;
	background: var(--blue);
	padding: 15px;
	font-size: 18px;
	color: #fff;
	line-height: inherit;
	width:100%
}
[role="chat__modal"] .modal-content p{
	margin:0px; 
	margin-bottom:10px;
	font-size:14px;
}
[role="chat__modal"] .modal-content .modal-body{
	padding: 10px;
	/*//line-height: 24px; */
	overflow-y: scroll;
        height: 90%;
}
[role="chat__modal"] .modal-content .modal-footer{
	display:flex;
	justify-content:center;
	padding:10px;
}
[role="chat__modal"] .modal-content .modal-footer .btn_b{
	background: var(--text_color);
	border: none;
	color: #fff;
	padding: 12px 40px;
	font-weight: bold;
	margin-right:10px
}
.css-rkaeus {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    transform-origin: center center 0px;
    backface-visibility: hidden;
    overflow: hidden;
	background: var(--blue);
	position:fixed;
	bottom:20px;
	right:20px;
	z-index:9
}
.css-rkaeus svg{
	fill:white
}
.css-dlvlg4 {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    transition: transform 0.16s linear 0s, opacity 0.08s linear 0s;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.css-fvs20o {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%; 
    transition: transform 0.16s linear 0s, opacity 0.08s linear 0s;
}
.css-dlvlg4.in{
	opacity:0
}
.css-dlvlg4 svg {
    width: 28px;
    height: 32px;
}
 
@media(max-width:767px){
	section[chat__bot]{
		width: 100%;
		height: calc(100% - 20px);
		margin: auto;
		left: 0;
		right: 0;
		/*height: calc(60% - 120px);*/
	}
	.intro section[chat__bot]{
		height: calc(60% - 120px);
	}
	.intro [role="chat__modal"] .modal-content {
		margin: auto;
		width: 93%;
		border-radius: 5px;
		overflow: hidden;
		height: 54%;
		flex-direction: column;
		display:flex
	}
	[role="chat__modal"] .modal-content {
		margin: auto;
		width: 96%;
		border-radius: 5px;
		overflow: hidden;
		height: 100%;
		flex-direction: column;
		display:flex;
		margin: 2vw auto;
	}
	[role="chat__modal"] .modal-content .modal-body {
		padding: 20px;
		line-height: 24px;
		flex: 1;
		overflow-y: scroll;
	}
	.owl-carousel .owl-stage{
			display:flex;
			flex-wrap:nowrap;
		}
		.owl-carousel .owl-stage .owl-item{
			flex:0 0 103px;
		}
}

/* The Modal (background) */
.modal {
  display: none;  
  position: fixed; 
  z-index: 1;  
  padding-top: 0;  
  left: 0;
  top: 0;
  width: 100%;  
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0);  
  background-color: rgba(0,0,0,0.4);  
  padding-top:10px;
  z-index:99999;overflow:hidden;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  height: calc(105vh - 100px);
}
 
/* Add Animation */
@-webkit-keyframes animatetop {
  from {right:-300px; opacity:0} 
  to {right:0; opacity:1}
}

@keyframes animatetop {
  from {right:-300px; opacity:0}
  to {right:0; opacity:1} 
}

/* The Close Button */
.close {
  float: right;
font-size: 26px;
font-weight: bold;
padding-right: 10px;
padding-top: 5px;
color:#fff;
}

.close:hover,
.close:focus {
  color:#fff;
  text-decoration: none;
  cursor: pointer;
}

.close-header {
  float: right;
font-size: 26px;
font-weight: bold;
padding-right: 10px;
padding-top: 5px;
color:#fff;
position: absolute;
right: 0;
}

.close-header:hover,
.close-header:focus {
  color:#fff;
  text-decoration: none;
  cursor: pointer;
}
#showcaseData{
	padding-bottom:10px;
}
.close1{cursor: pointer;}
 

/* css for remove scroll from mobile view on chatbot */
@media(max-width:767px){
    .intro-scroll{overflow:hidden;}
}