body {
	background-color:#fff;
	padding: 0;
	margin: 0;
	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.4em;
}

h3 {
	font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-bottom: 5px;
	font-weight: bold;
}
label {
    margin-top: 5px;
}
.user-info {
   float: right;
   padding: 8px;
}
.form-group-inline {
    margin-bottom: 15px;
    display: inline-block;
    margin-right: 15px;
}
#mainmenu{
   float: left;
}
.editable {
	border: 1px solid #333;
	padding: 3px;
	background-color: #333;
	color: #fff;
	width: 200px;
	height: 26px;
	display: inline-block;
}

.long-field {
	width: 90%;	
}

.short-field {
	width: 70%;	
}

.help-copy {
	color: #666;
	font-style: italic;	
}

.locked-editable {
	border: 1px solid #333;
	padding: 3px;
	background-color: #333;
	color: #ddd;
	width: 250px;
	height: 26px;
	display: inline-block;
}

.got-form tbody tr{
	margin-bottom: 7px;	
}

.got-form tbody tr td{
	margin-right: 7px;	
}

.dtheader {
    font-weight: 600;    
    }
    
 #appMain {
    width: 900px;     
    min-height: 580px;
    display: flex;
}

.full-width {
	width: 100%;
}
     
#footer {
    text-align: center;
    color: #555555;
    padding: 5px;
}
     
 /*filters*/
 
.filterList {
    background-color: #333;
    color: #FFF;
    height: 30px;
    padding: 10px 0px 0px 10px;
    margin-bottom: 10px;      
}   

.filter {
    cursor: pointer;    
}

    
.numberCol {
    text-align: right;
    width: 40px;  
     }
     
#orderPrintArea {
	border: 1px solid #333;
	margin: 30px;
	padding: 10px;
	width: 300px;
	}

tr.changed{
	color: #ED9C28;
}
/*chat*/
.open-media {
	cursor: pointer;
}
.chat-long-status {
    width: 60%;
    display: inline-block;
}
.chat-tools-left {
    width: 60px;
    height: 60px;
    background-color: lightslategray;
    left: 10px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    color: white;
    text-align: center;
    padding-top: 7px;
    position: absolute;
    z-index: 100;
}

.chat-tools-left i {
	font-size: 3em;
	cursor: pointer;
}

.chat-tools-left i:hover {
	color: #5cb85c;
}

.rep-name {
    color: #035403;
    font-size: 0.8em;
}
.chat-drawer {
    background-color: #fdfdfd;
    position: absolute;
    min-height: 300px;
    border: 1px solid lightslategray;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    width: 550px;
    left: -560px;
    padding: 10px;
    z-index: 101;
}

.chat-window {
	margin: auto;	
}
.chat-box {
	width: 500px;
	margin: auto;
}

.chat-left {
   width: 40%;
   float: left;
   margin-top: 10px;
}
.chat-right {
   width: 59%;
   float: right;
   margin-top: 10px;
}
.user-right {
   border-left: 1px solid #ddd;
   padding-left: 10px;
   width: 45%;
   float: right;
   height: 500px;
   margin-top: 10px;
}
.respuesta {
  display: block;
  margin: 2px 0px;
  padding: 9px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1em;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid #357ebd;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none; 
}
.respuesta:hover {
   background-color: #428bca;
   color: #fff;
}
.respuesta-close {
  display: block;
  margin: 2px 0px;
  padding: 9px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1em;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid #357ebd;
  background-color: #5cb85c;
  color: #fff;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none; 
}
.respuesta-close:hover {
   background-color: #428bca;
   color: #fff;
}

.cierre-chat {
  display: block;
  margin: 2px 0px;
  padding: 9px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1em;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid #357ebd;
  background-color: #5cb85c;
  color: #fff;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none; 
}
.cierre-chat:hover {
   background-color: #428bca;
   color: #fff;
}
.mensajes {
	display: block;
    height: 410px;
    overflow: auto;
    margin: 6px 0px;
    padding: 12px 12px;
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 4px;
  /*-webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;*/
}
.mensaje {
  min-height: 75px;
  margin: 6px 0px;
  padding: 12px 12px;
  font-size: 16px;
  border: 1px solid #f7f8f8;
}

.mensaje-img {
    min-height: 55px;
    margin: 10px 0px;
    padding: 12px 12px;
    font-size: 16px;
    border: 1px solid #f7f8f8;
    width: 100%;
}

.invalid {
	border-color: red;
}
.error {
	color: red;
	font-style: italic;
	display: block;
	padding: 3px;
}

.error-img {
	color: lightyellow;
	font-style: italic;
	display: block;
	padding: 3px;
}

.msg-tools {
   display: block;
   text-align: right;  
}

.chatDate {
   color: #666;
   font-size: 12px;
}
/*Chat bubbles*/
.triangle-border {
  position:relative;
  width: 85%;
  padding:15px;
  margin:1em 0 1em;
  border: 5px solid #f7f8f8;
  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;
  background-color:#f6f6f6;
}

/* 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:#f7f8f8 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 #f7f8f8;
}

/* 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 #f7f8f8;
}

/* 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;
}

.slider-horario {
	float: right;	
}

.msg-preview {
   display: inline-block;
   width: 130px;
   white-space: nowrap;
   overflow: hidden;  
   }

.preview-mo {
   color: #428bca; 
   font-weight: bold;
   }
   
.preview-mt {
   color: green; 
   }	

.fa-check {
   color: #ccc;
}

.fa-blue {
   color: #428bca;
}

/*Dashboard*/

@media screen and (min-width: 810px) {
	#db-right {
	   width: 40%;
	   float: left;
	}
	#db-left {
	   width: 50%;
	   float: left;
	   margin: 10px;
	}
}
@media screen and (max-width: 809px) {
	#db-right {
	   width: 90%;
	   margin: auto;
	}
	#db-left {
	   width: 90%;
	   margin: auto;
	}
}
#chatNotasWrapper {
   padding: 5px;
}

#customContactFields {
   float:right;
   width: 49%;
}
#notas-ack {
   padding:3px;
   color: #d43f3a;
}
.emoji-btn {
   cursor: pointer;	
}
.emoji-box {
	height: 0px;
	overflow: hidden;
}
/*Upload*/
.upload-wrapper {
	width: 100%;
	position: absolute;
	top: 400px;
	display: none;
}
.upload-box {
    width: 500px;
    margin: auto;
    background-color: lightslategray;
    color: white;
    padding: 30px;
    border-radius: 4px;
}
.upload-box-tools {
    width: 100%;
    position: relative;
    text-align: right;
    font-size: 2em;
}
.upload-box-tools i {
	cursor: pointer;
}
.upload-box-tools i:hover {
	color: #5cb85c;
}
.upload-progress {
    margin-right: 10px;
    font-weight: bold;
}
.toggle-upload {
   cursor: pointer;	
}
.img-sent-preview {
    max-width: 350px;
    border: 1px solid #dddddd;
    margin-bottom: 5px;
}
/*Assign control*/
/*Upload*/
.assigned-wrapper {
	width: 100%;
	position: absolute;
	top: 300px;
	display: none;
}
.assigned-box {
    width: 500px;
    margin: auto;
    background-color: orangered;
    color: white;
    padding: 30px;
    border-radius: 4px;
}
/*SmartFormGathering*/
#float-asigner {
    width: 275px;
    border: 1px solid lightslategray;
    padding: 10px;
    background: #f5f5f5;
    position: absolute;
    display: none;
}
.captured {
    margin-bottom: 10px;
}
.form-asign {
    display: inline-block;
    margin: 5px;
}
.run-hook {
	cursor: pointer;
}
.extra-numbers {
	overflow: hidden;
}

/*In chat agent selector*/
#agent-selector {
    width: 450px;
    height: 300px;
    background-color: #eceff1;
    position: absolute;
    right: 20px;
    overflow: scroll;
    display: none;
    z-index: 99;
    padding: 10px;
}

#agent-selector a {
	line-height: 25px;
}

#agent-selector a:hover {
	color: red;
}

/*Dialog*/
.dialog {
   border: 1px solid #666;
   border-radius: 3px;
   background-color: #fff;
   z-index: 1600;
   width: 200px;
   min-height: 150px;
   padding: 10px;
   position: absolute;
}

.dialog-tools {
   text-align: right;
   position: absolute;
   margin:10px;
   right: 0;
   bottom: 0;
}

.dialog-btn {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.9em;
    padding: 6px;
    background-color: #259bd4;
    color: #fff;
    border: 1px solid #2d708f;
    border-radius: 2px;
    cursor: pointer;
}

.btn-alert {
   background-color: red;
   color: #fff;
   font-weight: bold;
}

.btn-alert:hover {
   background-color: red;
   color: #333;
}

.green-light {
   color: #05b505;
}

.red-light {
   color: red;
}