/*NOTE (natem):
    Left bubble is for other person (who signed in person is talking to)
    Right bubble is for person signing in
    Left bubble Notarygo is for any message from notarygo UserType*/

/*LEFT BUBBLE*/
.talk-bubble-left {
    margin: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    position: relative;
    margin-right: 50px;
    height: auto;
    background-color: #222;
    color: #FFFFFF;
}

.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: #222 transparent transparent transparent;
}
/*END LEFT BUBBLE*/

/*LEFT BUBBLE NOTARYGO*/
.talk-bubble-left-notarygo {
    margin: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    position: relative;
    margin-right: 50px;
    height: auto;
    background-color: #222;
    color: #FFFFFF;
}

.tri-right.left-top-notarygo:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 22px solid;
    border-color: #222 transparent transparent transparent;
}
/*END LEFT BUBBLE NOTARYGO*/

/*RIGHT BUBBLE*/
.talk-bubble-right {
    margin: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    position: relative;
    margin-left: 50px;
    height: auto;
    background-color: #e2e3e5;
    color: #383d41;
}

.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: #e2e3e5 transparent transparent transparent;
}
/*END RIGHT BUBBLE*/

/* talk bubble contents */
.talktext {
    padding: .75em;
    text-align: left;
    line-height: 1.5em;
    padding-bottom: .25em
}

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


/*.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: red transparent transparent transparent;
}*/

/*.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: #d4edda transparent transparent transparent;
}*/


/*.chat-user-img {
    border-radius: 50%;
    width: 35px;
    vertical-align: top
}*/


/* 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: #dff0d8 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: #d9edf7 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: #d9edf7 lightyellow transparent transparent;
}*/
/*
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/
/*.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: #d9edf7 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: #d9edf7 transparent transparent lightyellow;
}*/