/* container */
html, body {
  color: #333;
 ...
}

/* fundo da tela de de chamada de chat do IrisChatClient */
#mainform_sphtml_0-innerCt {
	background-color: #DBE7F8;
}
/* fundo da tela da barr ade avatar do IrisChatClient */
#mainform_sptitle_0-innerCt {
	background-color: #DBE7F8;
}

/* fundo da tela de de chamada de chat do IrisClient */
#frmmain_sphtml_0-innerCt {
	background-color: #DBE7F8;
}

/* fundo da tela de recuperacao de chats do recovery */
#fplayer_pchatframe_0-innerCt {
	background-color: #DBE7F8;
}

#frmspychat_spychat_0-innerCt {
	background-color: #DBE7F8;
}
#frmspychat_1_spychat_0-innerCt {
	background-color: #DBE7F8;
}
#frmspychat_2_spychat_0-innerCt {
	background-color: #DBE7F8;
}
#frmspychat_3_spychat_0-innerCt {
	background-color: #DBE7F8;
}

.container {
  padding: 1% 1%;
  
}

/* CSS talk bubble */
.talk-bubble-client {
   float: left;
   clear: left;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 8px;
	margin-right: 2px;
  display: inline-axis;
  position: relative;
	max-width: 75%;
	height: auto;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
	background-color: white;
	page-break-inside: avoid !important;	
}
.talk-bubble-right-client {
  float: right;
   clear: right;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 8px;
  display: inline-axis;   
  position: relative;
	max-width: 75%; 
	height: auto;
	/*background-color: #7FFFD4;*/
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
	background-color: #2181CB;
	page-break-inside: avoid !important;	
}


.talk-bubble-chat-client {
   float: left;
   clear: left;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 8px;
	margin-right: 2px;
  display: inline-axis;
  position: relative;
	max-width: 80%;
	height: auto;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
	background-color: white;
	page-break-inside: avoid !important;	
}
.talk-bubble-right-chat-client {
   float: right;
   clear: right;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 8px;
  display: inline-axis;   
  position: relative;
	max-width: 80%; 
	height: auto;
	/*background-color: #7FFFD4;*/
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
	background-color: #2181CB;
	page-break-inside: avoid !important;	
}


.border{
  border: 1px solid #666;
}

.round-left{
  border-radius: 15px 15px 15px 1px;
	-webkit-border-radius: 15px 15px 15px 1px;
	-moz-border-radius: 15px 15px 15px 1px;
	

}
.round-right{
  border-radius: 15px 15px 1px 15px;
	-webkit-border-radius: 15px 15px 1px 15px;
	-moz-border-radius: 15px 15px 1px 15px;
	

}

/* Right triangle placed top left flush. */
/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -16px;
	right: auto;
  top: -1px;
	bottom: auto;
	border: 15px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -13px;
	right: auto;
  top: 0px;
	bottom: auto;
	border: 15px solid;
	border-color: lightblue transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: 30px;
	bottom: auto;
	border: 21px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -25px;
	right: auto;
  top: 38px;
	bottom: auto;
	border: 13px solid;
	border-color: lightblue lightyellow transparent transparent;
}


.tri-right.border.right-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -18px;
  top: -1px;
	bottom: auto;
	border: 17px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -15px;
  top: 0px;
	bottom: auto;
	border: 16px solid;
	border-color: #7FFFD4 transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
  padding: 0em 1em;
  text-align: left;
  line-height: 1.4em;
  font-size: 12px;
  color: #2181CB;
  font-family: Arial;
}

.talktext-right{
  padding: 0em 1em;
  text-align: right;
  line-height: 1.4em;
  font-size: 12px;
  color: white;
  font-family: Arial;
}

.talktext-chat-client{
  padding: 0em 1em;
  text-align: left;
  line-height: 1.4em;
  font-size: 12px;
  color: #2181CB;
  font-family: Arial;
  word-break: break-word;		
  
/*  font-weight:bold;*/
}

.talktext-right-chat-client{
  padding: 0em 1em;
  text-align: right;
  line-height: 1.4em;
  font-size: 12px;
  color: white;
  font-family: Arial;
  word-break: break-word;		
  /*font-weight:bold;*/
}


.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}


/* barra de titulo da janela do chatbot */

.title-bar {
	padding: 5px;
	top: 0px;
	background-color: #2181CB;
	width: 100%;
	height: 60px;
	
}

.title-bar p{
  margin: 0px;
  padding: 15px 0px;
  font-size: 16px;
  color: white;
  font-weight:bold;
  text-align:left;
  font-family: Arial;
  word-break: break-word;		
}

/* botoes dentro do chatbot */


.chat-button {
  background-color: #2181CB;
  border: none;
  color: white;
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  font-family: Arial;
  margin: 1px 1px;
  cursor: pointer;
  height: auto;
  width: 100%;
  word-wrap:break-word;
  /*left: 50%;
  position: relative;
  transform: translateX(-50%);*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}

.chat-button:hover {background-color: #04396E;}

.chat-button1 { border-radius: 8px;}

.img-center-responsive {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  padding: 10px;
  width: 60%;
}
.embed-center-responsive {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 500px;
  width: 90%;
}

.img-thumb-responsive {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 60%;
  padding: 10px;
}


/* combo normal */

.combo {
  border-radius: 5px;
  background-color: #80d4ff;
  padding: 5px;
  font-size: 12px;
  color: #FFFFFF;
  font-family: Arial;
  width: 90%;
  height: 30px;
/*  left: 50%;
  position: relative;
  transform: translateX(-50%);*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.combo-option {
  padding: 5px;
	
}







/* combo dropdown */

.dropbtn {
  background-color: #2181CB;
  color: white;
  padding: 10px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2181CB;
  min-width: 160px;
  color: white;
  border-radius: 8px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content p {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  color: white;
}

.dropdown-content p:hover {background-color: #04396E;cursor: pointer;padding: 10px;}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #04396E;
}


.select-css {
	display: block;
  left: 50%;
  position: relative;
  transform: translateX(-50%);

	font-size: 12px;
	font-family: sans-serif;
	font-weight: 700;
	color: white;
	line-height: 1.5;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	height: 80%;
	word-break: break-word;		
	max-height: 300px;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0px 0px 20px 10px rgba(0,0,0,.04);
	border-radius: 8px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #2181CB;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
		
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #2181CB 0%,#2181CB 100%);
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
    
    
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
	display: none;
}
/* Hover style */
.select-css:hover {
	border-color: #04396E;
}
/* Focus style */
.select-css:focus {
	border-color: #aaa;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: white; 
	outline: none;
}

/* Set options to normal weight */
.select-css option {
	font-weight:normal;
    font-size: 12px;
    color: white;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}


.talk-bubble-transcrypt {
   float: left;
   clear: left;
	margin: 1px;
  display: inline-axis;
  position: relative;
	max-width: 100%;
	height: auto;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
	background-color: white;
	page-break-inside: avoid !important;	
}

.talktext-transcrypt{
  padding: 0em 1em;
  text-align: left;
  line-height: 1.4em;
  font-size: 14px;
  color: #04396E;
  font-family: Arial;
}