*, *:after, *:before {
	box-sizing: border-box;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

html.js .no-js {
	display: none;
}

body, input[type=text] {
	font-family: 'Open Sans', 'Helvetica Neue', 'Arial', 'Verdana', sans-serif;
}

input[type=text] {
	-webkit-user-select: auto;
}

.fixed {
	position:fixed;
}

.x-dock {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.x-dock.x-dock-vertical {
	-webkit-box-orient: vertical;
	-webkit-flex-flow: column wrap;
    -moz-flex-flow: column wrap;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
    -ms-flex-flow: column wrap;    
    flex-flow: column wrap;
}

.x-dock.x-sized {
	width:auto;
	height:auto;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

.x-dock-body {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	position: relative;
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(0,0,0);
	overflow-y:auto;
	width:100%;
	height:100%;
}

.x-dock-body * {
	display:block;
}

.x-container {

}

.x-toolbar {
	height: 50px !important;
	background:#033649;
	width:100%;
	z-index:1;
}

.x-toolbar-icon {
	line-height:50px;
	padding:0 20px;
	color:rgba(1.0,1.0,1.0,0.8);
	color:#fff;
}

.x-toolbar .xtoolbar-icon {
	font-family: FontAwesome !important;
}

.x-toolbar input {
	height: 35px;
	font-size: 18px;
	margin-top: 7px;
}

.sb-slidebar {
	background-color:#031634;
}

@media screen and (min-width: 769px) {
	.sb-slidebar {
		width:20%;
		position:absolute;
		visibility: visible;
	}
	#sb-site {
		position:absolute;
		left:20%;
		width:80%;
	}
}

#chatarea {
	overflow-y: scroll;
	word-wrap: break-word;
}

#chatinput input[type=text] {
	width:100%;
}

.roomname {
	color:#fff;
	font-weight:bold;
}

.username {
	color:#fff;
	padding-left:20px;
}

.loginout {
	color:navy;
	font-weight: bold;
}