.chatbox {
	position: fixed;
    /*width:290px;*/
	width: 315px;
	display:none;
	z-index:20000;
	text-align: left;
	font-size: 13px;
}

.chatboxtoolbar {
    border-color: #e7e7e7;
    background-color: #f5f5f5;
    padding: 5px;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #eeeeee;
}

.chatboxdatetime{
	display: inline-block;
	color: rgb(173, 173, 173);
	font-size: 10px;
	/*float: right;*/
	position: absolute;
	bottom: -2px;
	right: 3px;
}

.chatboxmessagefromNuevo{
	display: inline-block;
	color: rgb(173, 173, 173);
	font-size: 10px;
	position: absolute;
	bottom: -2px;
	left: 9px;
}

.chatboxhead {
	background-color: #f99d39;
	padding:7px;
	color: #ffffff;

	border-right:1px solid #f99d39;
	border-left:1px solid #f99d39;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.chatboxhead-whatsapp {
	background-color: green;
	padding:7px;
	color: #ffffff;

	border-right:1px solid #f99d39;
	border-left:1px solid #f99d39;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.chatboxblink {
	background-color: #176689;
	border-right:1px solid #176689;
	border-left:1px solid #176689;
}

.chatboxcontent {
	font-family: arial,sans-serif;
	font-size: 13px;
	color: #333333;
	height:250px;
	overflow-y:auto;
	overflow-x:auto;
	padding:7px;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	border-bottom:1px solid #eeeeee;
	background-color: #ffffff;
	line-height: 1.3em;
}

.chatboxinput {
	padding: 5px;
	background-color: #ffffff;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
}

.chatboxtextarea {
	width: 76%;
	max-height:44px;
    min-height:44px;
	padding:3px 0pt 3px 3px;
	border: 1px solid #eeeeee;
	margin: 1px;
	overflow:hidden;
    resize: none;
}

.chatboxtextareaselected {
	border: 2px solid #f99d39;
	margin:0;
}

.chatboxmessage {
	margin-left:1em;
}

.chatboxinfo {
	margin-left:-1em;
	color:#666666;

}

.chatboxmessagefrom {
	margin-left:-1em;
	font-weight: bold;
	display: inline-block;
}

.chatboxreactionleft {
	width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
	border: 1px solid #EEE;
	z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
	vertical-align: middle;
    position: absolute;
	left: -11px;
	top: 62%;
}


.chatboxreactionright {
	width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
	right: 95%;
    top: -5%;
}

.chatboxmessagecontent {
}

.chatboxoptions {
	float: right;
}

.chatboxoptions a {
	text-decoration: none;
	color: white;
	font-weight:bold;
	font-family:Verdana,Arial,"Bitstream Vera Sans",sans-serif;
}

.chatboxtitle {
	float: left;
    padding-top:2px;
    max-width: 75%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border-none {
    position:relative;
    padding:5px 5px 15px 5px;
    margin:0em 0 4px;
    border:1px solid #eee;
    color:#3c763d;
    background:#d6e9c6;
    /* css3 */
    -webkit-border-radius:5px !important;;
    -moz-border-radius:5px !important;;
    border-radius: 5px !important;
}


.triangle-border {
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	border:5px solid #eee;
	color:#333;
	background:#fff;
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
	margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
	margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
	border-width:20px 20px 0;
	border-style:solid;
	border-color:#eee transparent;
	/* reduce the damage in FF3.0 */
	display:block;
	width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
	content:"";
	position:absolute;
	bottom:-13px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	border-width:13px 13px 0;
	border-style:solid;
	border-color:#fff transparent;
	/* reduce the damage in FF3.0 */
	display:block;
	width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
	top:-20px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:40px; /* controls horizontal position */
	border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
	top:-13px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
	border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
	top:10px; /* controls vertical position */
	bottom:auto;
	left:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 30px 15px 0;
	border-color:transparent #eee;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
	left:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 21px 9px 0;
	border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
	top:10px; /* controls vertical position */
	bottom:auto;
	left:auto;
	right:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 0 15px 30px;
	border-color:transparent #eee;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
	left:auto;
	right:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 0 9px 21px;
	border-color:transparent #fff;
}


/* MODIFICACIONES MANU */

.triangle-border.left {
	margin-left: 9px;
	background-color: #FFF9F2;
}

.triangle-border.right {
	margin-right: 9px;
}

.triangle-border {
	margin: 0em 0 4px;
	border: 1px solid #eee;
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;
	padding-right: 4px;
	padding-left: 4px;
	padding-top: 3px;
}

.triangle-border.left:before{
	left: -13px;
	border-width: 6px 12px 6px 0;
}

.triangle-border.right:before{
	right: -13px;
	border-width: 6px 0 6px 12px;
}

.triangle-border.left:after {
	top: 11px;
	bottom: auto;
	left: -10px;
	border-width: 5px 10px 5px 0;
	border-color: transparent #FFF9F2;
}


.triangle-border.right:after {
	top: 11px;
	bottom: auto;
	right: -10px;
	border-width: 5px 0 5px 10px;
	border-color: transparent #fff;
}


table.table-slim td {
    padding: 4px !important;
}

/* para callbots */

.callbotmessage {
    margin-left:1em;
}


.callbotmessagecontent {
}


.callbotdatetime{
    display: inline-block;
    color: rgb(173, 173, 173);
    font-size: 12px;
    /*float: right;*/
    position: absolute;
    bottom: -2px;
    right: 3px;
    padding-bottom: 5px;
    line-height: 12px;
}


.callbotmessagefrom{
    display: inline-block;
    color: rgb(173, 173, 173);
    font-size: 12px;
    position: absolute;
    bottom: -2px;
    left: 3px;
    padding-bottom: 5px;
    line-height: 12px;

}



.callbotmessage.triangle-border.left {
    margin-right: 100px;
    padding-bottom: 20px;
}

.callbotmessage.triangle-border.right {
    margin-left: 100px;
    padding-bottom: 20px;
}