.unread-msgs {
	font-size:8pt;
	color:#FFF;
	font-weight: bold;
	background-color:#f57e42;
	border-radius: 5px;
	padding: 3px;
}


/* CSS talk bubble */
.talk-bubble {
	margin: 20px;
  display: inline-block;
  position: relative;
	width: auto;
	height: auto;
	background-color: lightyellow;
}
.border{
  border: 8px solid #666;
}
.round{
  border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 0px;
	bottom: auto;
	border: 22px solid;
	border-color: lightyellow 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: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;
}

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

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 30px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 38px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}
.tri-right.border.btm-right:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -8px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 0px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

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

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 0px;
	bottom: auto;
	border: 20px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
  padding: 1em;
	text-align: left;
  /*line-height: 1.5em;*/
}
.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}


.balon1, .balon2 {

	margin-top: 5px !important;
	margin-bottom: 5px !important;

	}


.balon1 a {

	background: #42a5f5;
	color: #fff !important;
	border-radius: 20px 20px 3px 20px;
	display: block;
	max-width: 75%;
	padding: 7px 13px 7px 13px;

	}

.balon1:before {

	content: attr(data-is);
	position: absolute;
	right: 15px;
	bottom: -0.8em;
	display: block;
	font-size: .750rem;
	color: rgba(84, 110, 122,1.0);
	
	}

.balon2 a {

	background: #f1f1f1;
	color: #000 !important;
	border-radius: 20px 20px 20px 3px;
	display: block;
	max-width: 75%;
	padding: 7px 13px 7px 13px;
	
	}
	
.balon2:before {

	content: attr(data-is);
	position: absolute;
	left: 13px;
	bottom: -0.8em;
	display: block;
	font-size: .750rem;
	color: rgba(84, 110, 122,1.0);
}

.chatText {
			
			text-decoration: none !important;
			
		}
		
		label {
			
			color: rgba(120, 144, 156,1.0) !important;
			
		}
		
		.btn:focus, .btn:active:focus, .btn.active:focus {
			
			outline: none !important;
			box-shadow: 0 0px 0px rgba(120, 144, 156,1.0) inset, 0 0 0px rgba(120, 144, 156,0.8);
}

.bubble {
	position: relative;
	font-family: sans-serif;
	font-size: 14px;
	line-height: 20px;
	width: 400px;
	background: #ffffff;
	border-radius: 25px;
	padding: 5px;
	/* text-align: center; */
	color: #000;
}

  
.bubble-bottom-left:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-left: 24px solid #fff;
	border-right: 12px solid transparent;
	border-top: 12px solid #fff;
	border-bottom: 20px solid transparent;
	left: 32px;
	bottom: -24px;
	margin-bottom: 24px;
  }

  
  .bubble-bottom-right:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-right: 24px solid #fff;
	border-left: 12px solid transparent;
	border-top: 12px solid #fff;
	/* border-bottom: 20px solid transparent; */
	left: 12px;
	bottom: -24px;
	/* margin-bottom: 24px; */
  }
  
  /* (A) SPEECH BOX */
.speech {
	/* (A1) FONT */
	font-family: arial, sans-serif;
	font-size: 1.1em;
	color: #fff;
	/* (A2) DIMENSIONS + BACKGROUND */
	position: relative;
	/* background: #a53d38; */
	background-color: #42a5f5;
	/* background: #fff; */
	padding: 10px;
	border-radius: 10px;
	max-width: 400px;
  }
  
  /* (B) ADD SPEECH "CALLOUT TAIL" */
  /* (B1) ATTACH TRANSPARENT BORDERS AFTER */
  .speech::after {
	position: absolute;
	content: '';
	border: 20px solid transparent;
  }
  
  /* (B2) CREATE + POSITION CALLOUT "TAIL" */
  .bottom.speech::after {
	/* DOWN TRIANGLE */
	border-top-color: #a53d38;
	border-bottom: 0;
	/* POSITION TAIL AT BOTTOM OF BOX */
	bottom: -20px;
	left: 50%;
	margin-left: -20px;
  }
  
  /* (C) DIFFERENT TAIL POSITIONS */
  /* (C1) TOP */
  .top.speech::after {
	/* UP TRIANGLE */
	border-bottom-color: #a53d38;
	border-top: 0;
	/* POSITION TAIL AT BOTTOM OF BOX */
	top: -20px;
	left: 50%;
	margin-left: -20px;
  }
  
  /* (C2) LEFT */
  .left.speech::after {
	/* LEFT TRIANGLE */
	/* border-right-color: #a53d38; */
	border-right-color: #42a5f5;
	border-left: 0;
	/* POSITION TAIL AT LEFT OF BOX */
	left: -20px;
	top: 50%;
	margin-top: -20px;
  }
  
  /* (C3) RIGHT */
  .right.speech::after {
	/* RIGHT TRIANGLE */
	/* border-left-color: #a53d38; */
	border-left-color: #42a5f5;
	border-right: 0;
	/* POSITION TAIL AT RIGHT OF BOX */
	right: -20px;
	top: 50%;
	margin-top: -20px;
  }
  
  /* (D) HALF TRIANGLE TAIL */
  .half.speech::after {
	border-right-color: #a53d38;
	bottom: -20px;
	left: 80%;
  }
  
  /* (E) CIRCULAR SPEECH BUBBLE */
  /* (E1) COMMON COLOR + MAKE ROUND */
  .circular, .circular::before, .circular::after {
	background: #a53d38;
	border-radius: 50%;
  }
  
  /* (E2) "MAIN BUBBLE" */
  .circular {
	/* FONT */
	font-family: arial, sans-serif;
	font-size: 1.1em;
	color: #fff;
	text-align: center;
	/* DIMENSIONS + BACKGROUND */
	padding: 30px 30px;
	max-width: 300px;
	position: relative;
  }
  
  /* (E3) POSITION "CALLOUT" BUBBLES */
  .circular::before, .circular::after {
	content: '';
	position: absolute; 
  }
  .circular::before {
	width: 20px;
	padding: 20px;
	right: 10px;
	bottom: -30px;
  }
  .circular::after {
	width: 10px;
	padding: 10px;
	right: 0;
	bottom: -50px;
  }
  
  /* (X) DOES NOT MATTER - SPACERS */
  .speech, .circular { margin: 50px 0 0 50px; }