html { 
	margin: 0em; 
	padding: 0; 
	height:100%;
	width:100%;
}
a {
	outline:none;
}
body { 
	margin:0;
	padding: 0; 
	font-family: sans-serif,'trebuchet ms','lucida grande','lucida sans unicode',arial,helvetica,sans-serif;
	font-size:15px;
	width:100%;
	height:100%;
	background:#222;
	color:#fff;
}
input:focus, select:focus, textarea:focus, button:focus {
	outline:0;
}
p {
	padding:0;
	margin:0;
}
img {
	border:0px;
}

h1, h2, h3{ 
	margin: 0; 
	padding: 0; 
}
h2 {
	font-size:1.5em;
	margin-bottom:5px;
}
ul {
	margin: 0;
	padding: 0;
	list-style:none;
}
li {
list-style:none;
}
button { 
	border:none;
	font-weight:bold;
}

#container_login {
     position:absolute;
     width:320px;
     height:auto;
     z-index:15;
     top:50%;
     left:50%;
	 padding:20px;
     margin:-250px 0 0 -180px;
	 box-shadow:0 0 10px #000;
	 
}
#header_login img {
	height:70px;
	width:auto;
}
#header_login {
	height:80px;
	width:100%;
	border-bottom:1px solid #000;
}
#content_login {
	width:100%;
	height:auto;
	border-top:1px solid #333;
	text-align:center;
}

#chat_button{
	width:100%;
	padding:5px 0;
	text-align:center;
	margin-top:15px;
	background:transparent;
	color:#fff;
	border:1px solid #333;
	cursor:pointer;
	font-size:17px;
	border-radius:10px;
}
#content_login h3 {
	padding-top:30px;
	padding-bottom:15px;
}




























/* Reverse message order */
.chat_messages, #messages, .messages_list {
    display: flex !important;
    flex-direction: column-reverse !important;
}

/* Message input area layout */
#input_area, .input_area {
    display: flex !important;
    align-items: center;
}
#message_input, .message_input {
    flex: 1;
    padding: 10px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #ccc;
}
#send_button, .send_button {
    padding: 10px 20px;
    border: none;
    background: #0cf;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
}
#send_button:hover, .send_button:hover {
    opacity: 0.9;
}
