body, html {
  height: 100%;
}
.circulo 
{
font-size:.5em;
     color:#CCC;
     width: -10px;
     height: -10px;
    border-radius: 200px 200px 200px 200px;
}
.offLine
{
 background: #CCC;
 color: #CCC;
}
.onLine
{
 background: green;
 color: green;
}
.mytext{
    border:0;padding:10px;background:whitesmoke;
}
.mytext::placeholder 
{
 color:lightgrey;
}
.text{
    width:98%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
    width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
    width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l
{
    float:left;padding-right:10px;
  word-wrap: break-word;
}        
.text-r
{
    float:right;padding-left:10px;
  word-wrap: break-word;
}
.avatar{
    display:flex;
    justify-content:center;
    align-items:center;
    width:25%;
    float:left;
    padding-right:10px;
}
.macro{
    margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
    float:right;background:#81BEF7
}
.msj{
    float:left;background:whitesmoke;
}
.frame{
    background:#e0e0de;
    height:850px;
    overflow:hidden;
    padding:0;
}
.frame > div:last-of-type{
    position:absolute;bottom:5px;width:100%;display:flex;
}
ul {
    width:100%;
    list-style-type: none;
    padding:18px;
    bottom:32px;
    display:flex;
    flex-direction: column;

}
/*.msj:before{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:-14px;
    position:relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #ffffff transparent transparent;            
}
.msj-rta:after{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:14px;
    position:relative;
    border-style: solid;
    border-width: 13px 13px 0 0;
    border-color: whitesmoke transparent transparent transparent;           
} */ 
input:focus{
    outline: none;
}        
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
    color: #d4d4d4;
}   
 #backButton
 {
  display:none;
 }
 #contenedorChat
 {
  display:block;
 }
.jb_header_chat{
z-index:9;
}
.jb_header_chat ul,.jb_hader_blue_menu ul{
margin:0;
display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content:center;
-o-justify-content:center;
-moz-justify-content:center;
-webkit-justify-content:center;
  -webkit-flex-direction: row;
align-content:center;
width:290px;
padding:0;
}

.jb_header_chat ul{
   justify-content:center;
-o-justify-content:center;
-moz-justify-content:center;
-webkit-justify-content:center;
   align-content:center;
}
.jb_header_chat ul{
        width:auto;
}
.jb_header_chat ul li,.jb_hader_blue_menu ul li{
  position:relative;
        padding:11px 16px;
  .padding:11px 16px;
        height:auto;
        font-family:arial;
list-style-type:none;
text-align:center;
flex-grow: 0;
-o-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
-moz-flex-grow: 0;
color:white;
font-size:11px;
cursor:pointer;
line-height:1;
/*
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=85);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
filter:alpha(opacity=85);
-moz-transition-duration: 0.1s;
-khtml-transition-duration: 0.1s;
-webkit-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
*/
}
.jb_header_chat ul li:hover,.jb_hader_blue_menu ul li:hover{
/*
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
*/
  /* Fallback for web browsers that doesn't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.3);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.jb_header_chat ul li img,.jb_hader_blue_menu ul li img{
border:0;
margin:0 !important;
padding:0 !important;
vertical-align:inherit;
}
.jb_header_chat li div,.jb_hader_blue_menu li div{
  position:absolute;
  margin:0 auto;
  color:white;
  padding:4px;
  background:#2E2E2E;
display:none;
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
-webkit-transition: display 0.3s linear 0.8s, opacity 0.3s linear 0.3s;
-o-transition: display 0.3s linear 0.8s, opacity 0.3s linear 0.3s;
-moz-transition: display 0.3s linear 0.8s, opacity 0.3s linear 0.3s;
transition: display 0.3s linear 0.8s, opacity 0.3s linear 0.3s;
  bottom:-20px;
    -webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.jb_hader_blue_menu li div{
  left:8px;
}
.jb_hader_blue_menu li div:before{
  content:'';
  position:absolute;
  top:-5px;
width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #2E2E2E;
    left:12px;
}
.jb_header_chat li div{
right:8px;
}
.jb_header_chat li div:before{
  content:'';
  position:absolute;
  top:-5px;
width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #2E2E2E;
    right:12px;
}
.jb_hader_blue_menu li:hover > div{
display:block;
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.jb_header_chat li:hover > div{
display:block;
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.jb_contacto_chat,.jb_lista_contactos{
z-index:0;
  position:relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  align-items:center;
-o-align-items:center;
-moz-align-items:center;
-webkit-align-items:center;
-ms-align-items:center;
  padding:0 5px;
  cursor:pointer;
     -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
    transition-delay: 0;
    -webkit-transition-delay: 0;
    -moz-transition-delay: 0;
    -o-transition-delay: 0;
    z-index:0;
border-bottom:1px solid #d8d8d8;
}
.jb_contacto_chat:hover,.jb_lista_contactos:hover{
z-index:1;
}
.jb_contacto_chat{
  padding:6px 4px;
}
.jb_lista_contactos{
padding:8px;
}
.jb_lista_contactos:hover,.jb_contacto_chat:hover{
background-color:#E6E6E6;
z-index:1;
}
.jb_cont_point{
display:none;
padding:0 4px;
}
.jb_point_conectado{
height: 8px;
width: 8px;
background: #D8D8D8;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
behavior: url(css/pie.htc);
display:none;
}
.jb_img_contacto{
flex-grow: 0;
-o-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
-moz-flex-grow: 0;
min-width:44px;
width:42px;
}
.jb_lista_contactos img{
margin-top:0 !important;
}
.jb_img_contacto img{
  width:32px;
  height:32px;
  -webkit-border-radius:100%;
-moz-border-radius: 100%;
border-radius: 100%;
margin-left:3px;
}
.jb_nombre_contacto,.jb_n_contacto{
  flex-grow: 1;
-o-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
-moz-flex-grow: 1;
  font-family:arial;
  font-size:12px;
line-height:1;
}
.jb_nombre_fecha{
 position:relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}
.jb_fecha_cont{
text-align:right;
  font-size:11px;
   color:#A4A4A4;
flex-grow: 0;
-o-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
-moz-flex-grow: 0;
height:10px;
min-width:50px;
}
.jb_nombre_contacto{
padding-right:4px;
width:177px;
}
.jb_name_chat,.jb_n_chat{
  overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
font-weight:bold;
flex-grow: 1;
-o-flex-grow: 1;
-webkit-box-flex: 1;
-ms-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex:1;
}
.jb_n_chat{
padding-right:15px;
}
.jb_ultimo_msj{
  color:#777777;
  width:80%;
  overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
line-height:1;
margin-top:5px;
flex-grow:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-o-box-flex:1;
}
.jb_noti_user
{
    height: 16px;
    background-color: #3191E6;
    color: #FFF;
    margin-top: 2px;
    font-size: 11px;
    padding: 3px;
    line-height: 1 !important;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    flex-grow: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    behavior: url(css/pie.htc);
}
.contenedorConversacion
{
 width:100%;
 height:90%;
 overflow-y:scroll;
}
@media only screen and (max-width:1200px) 
{
 #backButton
 {
  display:block;
 }
 #contenedorChat
 {
  display:none;
 }
}
@media only screen and (max-height:1200px) 
{
 .contenedorConversacion { height:93%}
}
@media only screen and (max-height:800px) 
{
 .contenedorConversacion { height:82%}
}
@media only screen and (max-height:690px) 
{
 .contenedorConversacion { height:70%}
}
@media only screen and (max-height:600px) 
{
 .contenedorConversacion { height:77%}
}
@media only screen and (max-height:400px) 
{
 .contenedorConversacion { height:75%}
}
.textoLargo
{
 word-wrap: break-word;
}
.pointer{
cursor:pointer;
}
.mas{
background:#81BEF7;
height:10%;
}
.mOpc{
text-aling:left;
background:#81BEF7;
border: solid 1px white;
width:40px;
height:40px;
left:1px;
margin:1px;
border-radius: 185px 185px 185px 185px;

}
.mOpc a{
left:-10px;
}

@media screen and (max-width: 768px) {
#selectchat{
    display: none;
  }
}


@media screen and (max-width: 1400px) {
#barra{
    display: none;
  }
}

#barra{
height:15%;
background: #808080;
position: absolute;
border-bottom: solid 10px #FF6600 ;

}
#contJar{
margin-left:4%;
margin-top:3%;
margin-rigth:4%;
height:90%;
padding:0;
border-radius: 11px 11px 11px 11px;
overflow: hidden;
border:solid 2px #81BEF7;
}
@media screen and (max-width: 1400px)   {
#contJar{
margin-left:0%;
margin-top:0%;
margin-rigth:0%;
height:100%;
padding:0;
border-radius: 0px 0px 0px 0px;
overflow: hidden;
border:solid 2px #81BEF7;
}
}
#soltar{
height:500px;
}
#enviarS{
height:10px;
width:10px;
}

#fileOutput{
text-align: center;
}
#headerVisualizacion{
background:grey;margin:0px;height:10%;position: absolute;color:white;
}
#nomVisualizacion{
margin-top:5px;font-size:150%;
}
#cuerpoVisualizacion{
height:350px;margin-top:10%;background-size: cover; text-align: center;
}
#footerVisualizacion{
text-align: center;
}
#footerVisualizacion button{
height:80px;width:80px; background:transparent; border:transparent;
}
.capa_a_ocultar
{
 height:100%;
}

@media screen and (max-width: 400px)   {
 #cuerpoVisualizacion 
 {
 height:350px;margin-top:50%;background-size: cover; text-align: center;
 }
 .capa_a_ocultar
 {
  height:95%; 
 } 
}
@media screen and (max-width: 400px)   {
#nomVisualizacion{
margin-top:5px;font-size:90%;
}
}
.eliminar{
background:transparent; 
border:transparent;

}