.fondoPantallaChat{
  background:url("../img/fondochat.png");
  background-size:15%;
  background-color:#F4F4F4;

}


.no-border{
  border:none;
}


/*barra para escribir mensaje en sala de chat*/
.formMensaje{
  /*height:4rem;*/
  /*background-color: #d32f2f;*/
}


.item-input-wrapper{
  background:#fff;
}


.tablero{
  height:72px;
  border-top:1px solid #f2f2f2;
  width:100%;
}


.ultimoDelTablero{
  border-bottom:1px solid #f2f2f2;
}


.tablero:active{
  background-color:lightgray;
}


.cuadroMensaje{

  margin-top:11px;
  /* margin-bottom: 5%; */
  font-family:Roboto-Regular;
  font-size:16px;
  width:80%;

}


.paddingBottom{
  margin-bottom:100px;
  height:84%;
}


/*clear both es para que el flotado no se ponga al lado, sino que haga un salto de linea y se ponga abajo*/
.yo{
  /*float: right;*/
  clear:both;
  padding-left:13%;
}


.otro{
  /*float: left;*/
  clear:both;
  padding-right:13%;
}


.cuadritoMensaje{
  border-radius:14px;
  margin-bottom:21px;
  font-family:'Roboto-Regular', sans-serif;
  /*font-weight:400;*/
  color:rgba(0, 0, 0, 0.7);
  font-size:14pt;
  margin-top:0;
  max-width:100%;
  /*background-color: #f4f4f4 ;*/
}


.bar-footer{
  /*height:100%*/
}


.footerChat{
  height:62px;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background-color:#fafafa;
  border-top:2px solid #849036;
  border-bottom:1px solid #bdbdbd;
  border-left:1px solid #bdbdbd;
  border-right:1px solid #bdbdbd;
}


.inputMensaje{
  width:100%;
  padding-left:40px;
  height:100%;
  border:none;
  font-size:16px;
  font-family:Roboto-Regular;
  line-height:54px;
  color:rgba(0, 0, 0, 0.7);
  outline:none; /*hace que no aparezca cuando se tiene el input activo*/
}


.inputMensaje::-webkit-input-placeholder{
  color:rgba(0, 0, 0, 0.54);
  font-size:16px;
  font-family:Roboto-Regular;

}


.inputMensaje::-moz-placeholder{
  color:rgba(0, 0, 0, 0.54);
  font-size:16px;
  font-family:Roboto-Regular;
}


.inputMensaje::-ms-input-placeholder{
  color:rgba(0, 0, 0, 0.54);
  font-size:16px;
  font-family:Roboto-Regular;
}


.articulo{
  overflow-y:scroll;
  overflow-x:hidden;
  padding-left:62px;
  margin-top:56px;
  padding-right:102px;
  padding-bottom:42px;
}


.sinleer, .sinleer:active, .sinleer.activated{
  background:url("../../img/btn_cerar_conversacion@4x.png");
  width:20px;
  height:20px;
  border:none;
  background-size:20px 20px;
  background-repeat:no-repeat;
  outline:none;
}


.cabecera{
  width:100%;
  height:46px;
  background-color:#f4f4f4;
  color:rgba(0, 0, 0, 0.87);
  font-size:16px;
  margin-left:-40px;
  padding-left:40px;
  display:flex;
  align-items:center;
  position:absolute;
  z-index:10;;
}


.iconitoNoLeidos, .iconitoBorrarChat{
  float:right;
  border-radius:12px;
  padding:1px 6px;
  text-align:center;
  font-size:12px;
  font-weight:500;
  border:none;
  height:19px;
  line-height:19px;
  min-width:9px;
}


.iconitoNoLeidos{
  background-color:#849036;
  color:#fff;
}


.leidos, .leidos:active, .leidos.activated{
  background:url("../../img/btn_num_mensajes_pendientes@4x.png");
  width:20px;
  height:20px;
  border:none;
  background-size:20px 20px;
  background-repeat:no-repeat;
  outline:none;

}


.btnEnviar, .btnEnviar:disabled, .btnEnviar:active{

  width:62px;
  height:62px;
  border:none;
  position:absolute;
  right:120px;
  z-index:2;
  outline:none;

}


.btnEnviar{
  background:url("../../img/btn_enviar_activo@4x.png");
  background-size:48px 48px;
  background-repeat:no-repeat;
  background-position:7px 7px;

}


.btnEnviar:disabled{
  background:url("../../img/btn_enviar_inactivo@4x.png");
  background-size:48px 48px;
  background-repeat:no-repeat;
  background-position:7px 7px;
}


.iconitoBorrarChat{
  background-color:rgba(0, 0, 0, 0.54);
  color:#fff;
}


.yo .cuadritoMensaje, .otro .cuadritoMensaje{
  font-family:'Roboto-Regular', sans-serif;
  /*z-index:1;*/
  position:relative;
}


.yo .cuadritoMensaje{
  background-color:#bcbcbc;
}


.yo .cuadritoMensaje::after{
  background-color:#bcbcbc;
  position:relative;
  float:right;
  z-index:0;
  display:block;
  width:22px;
  height:20px;
  top:-83px;
  right:-5px;
  content:'\00a0';
  -webkit-transform:rotate(29deg) skew(-35deg);
  transform:rotate(29deg) skew(-35deg);

}


.otro .cuadritoMensaje::after{
  background-color:#fafafa;
  position:absolute;
  z-index:0;
  display:block;
  top:8px;
  width:18px;
  left:-3px;
  height:22px;
  content:'\00a0';
  -webkit-transform:rotate(29deg) skew(-35deg);
  transform:rotate(29deg) skew(-35deg);
}


.otro .cuadritoMensaje{
  background-color:#ffffff;
}


.botonEnvioMensaje{
  height:62px;
  width:150px;
  position:absolute;
  top:0px;
  right:0px;

}


.chatSeleccionado{
  background-color:#f4f4f4;
}


.cuadroMensajeSugerencia{
  top:40%;
  display:flex;
  position:relative;
  justify-content:center;
  margin:24px;
  align-items:center;
  background-color:#777;
  height:100px;
  color:white;
  font-size:18px;
  text-align:center;
  border-radius:20px;
  -webkit-box-shadow:7px 6px 16px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow:7px 6px 16px -3px rgba(0, 0, 0, 0.75);
  box-shadow:7px 6px 16px -3px rgba(0, 0, 0, 0.75);
}


.botonReproducirMensaje{
  color:#7b7b7d;
  min-height:40px;
  min-width:40px;
  transform:scaleX(-1) translateY(4%);
}


.yoBoton{
  float:left;
  z-index:2;
  position:absolute;
}


.otroBoton{
  float:right;
  /*clear:both;*/

}


.textoMensaje, .fechaMensaje, .enviandoMensaje{
  font-family:"Roboto-Regular", Serif;
}


.textoMensaje{
  font-size:16pt;
  margin-bottom:6px;
  overflow-x:auto !important;
  line-height:27px;
  word-break: break-all;
  word-wrap: break-word;
}


.textoMio{
  right:0px;
  position:relative;
}


.textoServer{
  left:8px;
  position:relative;
}


.fechaMensaje, .fechaMensajeMio{
  color:#7b7b7d;
  font-size:12pt;
  position:relative;
  top:-18px
}


.fechaMensaje{
  left:8px;
}


.fechaMensajeMio{
  right:8px;
}


.enviandoMensaje{
  color:#ffffff;
  font-size:14pt;
}


.telefono, .telefonoActivo{
  font-family:"Roboto-Bold", "serif";
  font-size:16px;
  font-weight:700;

}


.telefonoActivo{
  color:#849036
}


.telefono{
  color:rgba(0, 0, 0, 0.54)
}


.btnNuevoServicio, .btnNuevoServicio:disabled, .btnNuevoServicio:active{
  position:absolute;
  right:40px;
  height:62px;
  width:62px;
  background-color:#849036;
  z-index:2;
  border:none;
  outline:none;
}


.btnNuevoServicio{
  background:url("../../img/btn_nuevo_servicio_normal.png");
  background-size:62px 62px;
  background-repeat:no-repeat;
}


.btnNuevoServicio:active{
  background:url("../../img/btn_nuevo_servicio_press.png");
  background-size:62px 62px;
  background-repeat:no-repeat;
}
.cantidadLlamadas{
float: right;
/* right: 13px; */
margin-right: 5px;
/* top: 10px; */
font-size: 16px;}