.zairux_panel {

border: 0;
margin-bottom: 24px;
}

.zairux_panel-control {
height: 100%;
position: relative;
float: right;
padding: 0 15px;

}
/* Here if we want to modify the height of the chat */
.zairux_nano {
position: relative;
width: 100%;
height: 40vh;

}
.zairux_nano>.zairux_nano-content {
position: absolute;
overflow: auto;
overflow-x: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:white;
}
.zairux_pad-all {
padding: 3%;
}
.zairux_mar-btm {
margin-bottom: 15px;
}

.zairux_media-left {
position: absolute;
z-index:3;
}

.zairux_media-left-text {
position:relative;
left:60px;
bottom:0%;
width:80%;
z-index:3;
}

.zairux_media-right {
float: right;
right:10%;
padding-right:22px;
padding-top:20px;
max-width:85%;
z-index:3;
}
/* Here if we want to modify the color of the agent's vignette */
.zairux_speech-left {
position: relative;
background-color:#2dabf9;
font-family:Arial;
font-size: 14px;
border: 1px solid #58ACFA;
color: #1f2d3d;
display: inline-block;
-moz-border-radius: 5px 5px 5px 0px;
-webkit-border-radius: 5px 5px 5px 0px;
padding: 6px 10px 3px 10px;
max-width:85%;
overflow:auto;
word-wrap: break-word;
z-index:3;
}
/* Here if we want to modify the color of the user's biñeta */
.zairux_speech-right {
position: relative;
background-color: #d6be0f;
font-family:Arial;
font-size: 14px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color: #1f2d3d;
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
padding: 10px 10px 3px 10px;
text-align: right;
word-wrap: break-word;
overflow:auto;
width:auto;
z-index:3;
}

.zairux_speech-time {
  display: block;
   margin-top: 0 !important;
font-size: .8em;
font-weight: 300;
}
.zairux_speech-time-right {
font-size: .8em;
font-weight: 300;
float:right;
display: block;
 margin-top: 0 !important;
}
/* Here if we want to modify the chat header */
.zairux_chat-head{

-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
box-shadow:inset 0px -3px 7px 0px #29bbff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);

padding-top:10px;
padding-left:10px;
padding-bottom:10px;
}

#zairux_mini_right{
position: absolute;
right: 2em;
}
/* Here the image of the agent */
.zairux_img-circle{
-webkit-border-radius: 10px 10px;  /* Safari  */
-moz-border-radius: 10px 10px;     /* Firefox */
border-radius:150px;
height:50px !important;
}
/* Here if we want to modify the color of the chat border */
#zairux_chat_body{

background-color:white;
border: 2px solid rgb(160, 202, 255);

}
/* Here if we want to modify the "width" dimension of the chat, as well as positioning */
#zairux_chatbot{
position:fixed;
width:19%;

min-width:280px;
bottom: 10%; right: 0;
z-index:5000;
}
/* The same but for mobile devices */
@media (max-width:800px) {
  .zairux_media-left {
  display: none;
  }
  .zairux_media-left-text {
  position:relative;
  left:20px;
  }
  #zairux_zairux-chatbot{
  position:fixed;
  width:95%;
  margin-left: 0;
  margin-right: 0;
  bottom: 30%; right: 0;
  }
}
/* Here if we want to modify the bottom of the chat */
#zairux_footer-agent{
padding:10px;
border-top: 1px solid rgb(160, 202, 255);
background-color: #f5f5f5;

}
/* Here if we want to change the color of the agent name */
#zairux_agent_name{
color:white;
font-weight: bold;
}

.zairux_zairux_nopadding {
padding: 0 !important;
margin: 0 !important;
}
/* Here if we want to modify the "Send" button, we must be careful that it may be affected
by an external CSS to this, such as the CSS of the web template. */
.zairux_myButton {
-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
box-shadow:inset 0px -3px 7px 0px #29bbff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
background-color:#2dabf9;
border:1px solid #00a0f0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
height:2.8em;
}
.zairux_myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
background-color:#0688fa;
}
.zairux_myButton:active {
position:relative;
top:1px;
}
/* Here if we want to modify the text box where the questions are written */
.zairux_text_agent{

height:42px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
padding-left:8px;
padding-right:8px;
}
.zairux_text_agent:hover{
-webkit-box-shadow: 0px 0px 1px 1px rgba(45,171,249,1);
-moz-box-shadow: 0px 0px 1px 1px rgba(45,171,249,1);
box-shadow: 0px 0px 1px 1px rgba(45,171,249,1);

}
.zairux_text_agent:focus{
-webkit-box-shadow: 0px 0px 1px 1px rgba(45,171,249,1);
-moz-box-shadow: 0px 0px 1px 1px rgba(45,171,249,1);
box-shadow: 0px 0px 1px 1px rgba(45,171,249,1);

}
.zairux_separator-mess{

  padding:40px;
}

#zairux_container2-right{
  position: relative;
  width:100%;
  overflow:auto;
  overflow-x:hidden;
}
#zairux_logo-ref{
  position:absolute;
  bottom:0;
  right:0;
  opacity: 0.35;
  filter: alpha(opacity=50); /* For IE8 and earlier */
  z-index:1;
}
#zairux_btn_agent{
 padding : 0 0 !important;
 height:40px !important;
 border-radius:0px !important;
}
.zairux_myButton {
-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
box-shadow:inset 0px -3px 7px 0px #29bbff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
background-color:#2dabf9;
border:1px solid #00a0f0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
height:2.8em;
}
.zairux_myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
background-color:#0688fa;
}
.zairux_myButton:active {
position:relative;
top:1px;
}
/* Here if we want to modify the chat button where the dialog icon appears (enable disable) */
#zairux_buttOCchat {
  position: absolute;
  width:80px;
  height:80px;
  right:0;
  -webkit-box-shadow: 1px 6px 24px -6px rgba(14,43,235,1);
  -moz-box-shadow: 1px 6px 24px -6px rgba(14,43,235,1);
  box-shadow: 1px 6px 24px -6px rgba(14,43,235,1);

  border-radius:      3em;
  cursor:pointer;
  display:block;
}
#zairux_buttOCchat.active {
  -webkit-box-shadow: 1px 6px 24px 11px rgba(255,255,255,1);
  -moz-box-shadow: 1px 6px 24px 11px rgba(255,255,255,1);
  box-shadow: 1px 6px 24px 11px rgba(255,255,255,1);
}
.zairux_img-btn{
padding:8px;

}