body{
margin:0; padding: 0; font-family: 'Open Sans', sans-serif, arial; font-size: 14px;
background: black;
overflow: hidden;
}
*{font-family: 'Open Sans', sans-serif, arial; font-size: 14px; color:#555; }
.main{
max-width:1200px;
display: flex;
flex-flow: wrap;
align-items: center;
margin:auto;
}
.header{
	background: #3B5898;
max-width:100%;
display: block;
margin-bottom:1em;
}
.header > div{
max-width:1200px;
margin:auto;
display: flex;
    flex-flow: wrap;
    align-items: center;
}
.header h1{
padding:0.5em 0;
margin-right:1em;
font-size: 20px;
color: #fff;
text-align: center;
font-weight: 300;
}
.header *{
color:white;
}
.header p{
padding:0.5em 1em;
}
@media(max-width:768px){
.header{
flex-flow: column;
padding:1em;
}
}
.userscreen{margin: auto; text-align: center; margin-top: 24%}
.input-user {
  font-size:16px;
padding:1em;
font-weight: 300;
  transition: border 0.3s;
  width:250px;
border-radius:0;
border:none;
}
.input-user:focus,
.input-user.focus {
  border: solid 2px #726da5;
}

.btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
	background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
	background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
	background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
	background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
	background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
	background-color:#637aad;
	border:1px solid #314179;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family: 'Open Sans', sans-serif, arial;
	font-size:13px;
	padding:6px 12px;
	text-decoration:none;
}
.btn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));
	background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
	background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
	background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);
	background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
	background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7', endColorstr='#637aad',GradientType=0);
	background-color:#5972a7;
}
.btn:active {
	position:relative;
	top:1px;
}

.btn-user{padding:9px 30px; position: relative; top: 0px; font-size: 16px; font-weight: 300}

#result{
width:100%;
padding:10px;
background: #f1f1f1;
max-height: 74vh;
overflow-y:auto;
}

.chatcontrols{
position: fixed;
bottom: 0;
left:0;
width: 100%;
margin-bottom:1em;
}

.chatcontrols form{
margin: 0 auto;
max-width:1200px;
}

#chatbox{
    background: none repeat scroll 0 0 #FCFCFC;
    border: none;
    color: #6C6C6C;
    outline: medium none;
    padding: 1em;
    width: 65.5%;
    font-size: 16px;
    font-weight: 300
}
#chatbox:focus{
    background: none repeat scroll 0 0 white;
    border-color: #555;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset;
    color: #A6A6A6;
 	content:"";
}

.btn-send{
font-size: 16px;
padding: 15px;
font-weight: 300;
}

.logout{float: right; color: #fff; text-decoration: none; font-size: 15px}

input[type=submit]{
font-size:16px;
padding:1em 2em;
}

.btn-clear{
font-size:16px;
padding:1em 2em;
font-weight: 300;
}