/*
Theme Name: Avada
Description: The Avada Website Builder is the ultimate design and creation suite. Design Anything, Build Everything, Fast. The #1 selling product of all time on ThemeForest.
Author: ThemeFusion
Theme URI: https://avada.theme-fusion.com/
Author URI: https://themeforest.net/user/ThemeFusion
Version: 7.4.1
Requires PHP: 5.6
License: Themeforest Split Licence
License URI: -
Text Domain: Avada
*/

/* Classes needed by Theme Check */
.wp-caption-text,
.gallery-caption,
.bypostauthor {
}




.bg-chat{
	background-image: linear-gradient(to right, #5fb4d0 , #23a4cf);
	/* border: 4px solid rgb(79, 153, 196); */
	border-radius: 5px 30px 0px 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
	/*width: 520px;
	height: 630px;*/
	width: 335px;
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	position:fixed;
	bottom:40px;
	right:5px;
}

.header-con{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 20px;
}

.robot{
	width: 40px;
	height: 40px;
}

.chat {
	height: 630px;
	width: 335px;
	display: flex;
	flex-direction: column;
	/*justify-content: center;
	align-items: center;*/
    justify-content: flex-start;
	align-items: flex-start;
    padding-left:4px;
} 

#chat-send { 
	/*width: 520px;*/
	width: 89%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid #e4eaf9;
	bottom: 20px;
	border-radius: 0px 0px 5px 5px;
	/*height: 60px;*/
	height: 35px;
}

input:focus,
select:focus,
textarea:focus
button:focus {
    outline: none;
}

#input3:focus {
    outline: none;
}

    .messages {
        display: flex;
        flex-direction: column;
        overflow-y: scroll;

        /*height: 100%;
        width: 100%;*/
		height: 67%;
        width: 99%;
        background-color: white;
        margin: 40px 0px 0px 0px;
        padding-top: 10px;
        /* border: 2px solid rgb(79, 153, 196); */
    }

#bot {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 10px;
}

#user{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

.bot {
	
	color: black;
}

.bot span{
	
	margin-left: 4px;
}

.avatar {
	height: 25px;
}

.response {
	display: flex;
	align-items: top;
	/*height: 25px;*/
	text-align: left;

}

#user span{
	border-radius: 20px 0px 20px 20px;
	margin-right: 4px;
    border: 1px solid #e4eaf9;
	background-color: #f6ecf6;
	padding:5px;	
}
#bot span{
	border-radius: 0px 20px 20px 20px;
	margin-right: 4px;
    border: 1px solid #e4eaf9;
	background-color: #ecf5f6;
	padding:5px;
}


.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:90px;
	right:130px;
	border: none;
	z-index:1000;
}
#logo-img {
	position:fixed;
	border: none;
	background: none;
	margin-top: 2px;
}

#chat-close {
	position:fixed;
	/*margin-left: 465px;
	margin-top: 5px;*/
	margin-left: 273px;
	margin-top: 5px;
	border: none;
	background: none;
	opacity: 0.75;
}

#chat-enviar {
	position:fixed;
	/*margin-left: 465px;
	margin-top: 5px;*/
	margin-left: 298px;
	margin-top: 464px;
	border: none;
	background: white;
	opacity: 1;
	padding: -2px;
	border-radius: 5px 5px 5px 5px;
}

#chat-reload {
	position:fixed;
	right: 10px;
}

#chat-show {
	border:none;
	border-radius: 50%;
    box-shadow: 1px 1px 8px 8px rgba(0, 0, 0, .4);
	width:120px;
	height:120px;
	padding:0;
}

#chat-img {
	width: 120px;
	height: 120px;
	
	/*border: 10px solid;
  	border-image-slice: 1;
  	border-width: 5px;
	border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
	border-radius:0px 20px 20px 20px;*/
	
	/*border-radius: 50px; /*1*/
  /*border: 10px solid transparent; /*2*/
  /*background: linear-gradient(45deg,red,blue) border-box; /*3*/
  /*-webkit-mask: /*4*/
     /*linear-gradient(#fff 0 0) padding-box, 
     /*linear-gradient(#fff 0 0);
  /*-webkit-mask-composite: xor; /*5'*/
          /*mask-composite: exclude;
	/*border-style: solid;
  
	border-width: 10px;	
	border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
	border-radius: 50px;*/
}

.chat-opcion {
    border-radius: 0px 20px 20px 20px;
    margin-right: 4px;
    border: 1px solid #e4eaf9;
    background-color: #bde8ff;
    padding: 5px;
    margin: 2px;
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1);
	text-align:left;
	
	
}


/*-------------------------------------------*/

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 1200%;
  height: 100%;
}