/* CLASES PARA EL CHAT */
.boton_chat {
	/*
	float:right;
	width:50px;
	height:50px;
	position:fixed;
	bottom:0;
	left:30px;
	*/
}

#ver_chat:hover > #div_chat {
	display:block;
}

#div_chat {
	display:none;
	position:fixed;
	width:335px;
	height:578px;
	bottom:5px;
	left:40px;
	z-index:1000;
	box-sizing: border-box;
	font-size:14px;
	line-height:1.42857143;
	overflow: hidden;
	border: 1px solid white;
}

#div_chat:before{
	box-sizing:border-box;
}

#div_chat:after{
	box-sizing:border-box;
}

#browser-window{
	/*background: url("gfx/background.png");*/
	background-color: rgba(27,57,86,0.90);
	height: 500px;
	width: 290px;
	/*padding: 49px 25px 10px 25px;*/
	/*padding: 20px 25px 10px 25px;*/
	margin: auto;
	position:relative;
	border-right:1px solid #1B3956;
	border-bottom:1px solid #1B3956;
}

.chat-cabecera{
	background-color: rgba(27,57,86,1);
	border-bottom: 1px solid white;
	padding-top: 7px;
}

.viewport{
	/*background-color: rgba(57,87,116,1);*/
	background-color: ghostwhite;
	overflow-x:hidden;
	/*overflow-y:scroll;*/
	height: 455px;
}

.chat-bubble-container {
    display: flex;
    width: 100%;
  }
  
.chat-bubble {
    font-size: 18px;
    padding: 0.7rem 0.9rem;
    margin-top: 4px;
    margin-bottom: 4px; 
    border-radius: .9rem;
    width: auto;
    max-width: 250px;
}


/*
#viewport{
	overflow-x:hidden;
	overflow-y:scroll;
	height: 420px;
	margin: 20px 25px 10px 25px;
}
*/

#viewport-content{
	position: relative;
	/*overflow-y:scroll;*/
	/*bottom: -500px;*/
}

.row-chat{
	position:absolute;
	bottom: 20px;
	margin: 0;
	width: 286px;
}

.chat-nuevo{
	background-color: rgba(27,57,86,1);
	border-top:1px solid white;
}

.bubble-container{
	display:block;
	clear: both;
	position:relative;
	margin-bottom:10px;
	min-height: 25px; /*53px;*/
}

.avatar{
	/*border: 2px solid #ffffff;*/
	box-sizing: initial;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.avatar,.avatar img{
	width: 30px;
	height: 30px;
	-webkit-border-radius: 30px; /* Saf3+, Chrome */
	border-radius: 30px; /* Opera 10.5, IE 9 */
	position: relative;
}

.avatar-right{
	float: right;
	left: -35px;
	background-color: lightgray;
/*	width: 30px;*/
}

.avatar-left{
	float: left;
	right: -35px;
	background-color: darkgray;
/*	width: 30px;	*/
}
/*Clases Iván por si hay que recuperarlas*/
/*.avatar{
	border: 2px solid #ffffff;
	box-sizing: initial;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.avatar,.avatar img{
	width: 50px;
	height: 50px;
	-webkit-border-radius: 30px; 
	border-radius: 30px; 
}*/

.fechaChat{
	background-color: rgb(184, 218, 255);
	font-weight: bold;
	border-radius: 10px;
	margin-bottom: 6px;
}

.bubble{
	padding: 13px;
	-webkit-border-radius: .9rem;
	-moz-border-radius: .9rem;
	border-radius: .9rem;
	background: rgba(255, 255, 255, 0.9);
	/*color: #575858;*/
	color: black;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/*.avatar-left:before {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 14px 10px 0;
	border-color: transparent #ffffff;
	display: block;
	width: 0;
	z-index: 1;
	left: 61px;
	top: 13px;
}

.avatar-right:before 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 0 10px 14px;
	border-color: transparent #ffffff;
	display: block;
	width: 0;
	z-index: 1;
	right: 61px;
	top: 13px;
}*/

/* Positionning of the avatar and the bubble */
/*.avatar-left{
	float: left;
	width: 50px;
}*/

.bubble-left{
	overflow: hidden;
	margin-left: 75px;
	background-color: darkgray;
}

/*.avatar-right{
	float: right;
	width: 50px;
}*/

.bubble-right{
	overflow: hidden;
	margin-right: 75px;
	background-color: lightgray;
}

#div_chat p{
	margin:0 0 10px;
}

#viewport{
}

#viewport-content{
}

.bubble-container{
}

.avatar{
}

.bubble{
}

/*
#div_chat form:before{
	content: " ";
	display:table;
	box-sizing:border-box;
}

#div_chat form:after{
	content: " ";
	display:table;
	clear:both;
	box-sizing:border-box;
}

#div_chat form div{
	position:relative;
	display:table;
	border-collapse:separate;
	box-sizing:border-box;
}

#div_chat form div input[type="text"]{
	border-bottom-right-radius:0;
	border-top-right-radius:0;
	display:table-cell;
	position:relative;
	z-index:2;
	float:left;
	width:100%;
	margin-bottom:0;
	height:34px;
	padding:6px 12px;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	transition-property: border-color, box-shadow;
	transition-duration: 0.15s, 0.15s;
	transition-timing-function:ease-in-out, ease-in-out;
	transition-delay: initial, initial;
	font-family: inherit;
	box-sizing:border-box;
}

.input-group-btn{
	position:relative;
	font-size:0;
	white-space:nowrap;
	width:1%;
	vertical-align:middle;
	display:table-cell;
	box-sizing:border-box;
}

.input-group-btn button{
	border-bottom-right-radius: 0;
   	border-top-right-radius: 0;
	margin-left: -1px;
	border-bottom-left-radius: 0;
   	border-top-left-radius: 0;
	position:relative;
	color: #fff;
   	background-color: #428bca;
   	border-color: #357ebd;
	display: inline-block;
   	margin-bottom: 0;
   	font-weight: 400;
   	text-align: center;
   	vertical-align: middle;
   	cursor: pointer;
   	background-image: none;
   	border: 1px solid transparent;
   	white-space: nowrap;
   	padding: 6px 12px;
   	font-size: 14px;
   	line-height: 1.42857143;
   	border-radius: 4px;
	font-family: inherit;
	-webkit-appearance: button;
	text-transform: none;
	overflow: visible;
	margin: 0;
	box-sizing: border-box;
}
*/