@import url('https://fonts.cdnfonts.com/css/segoe-ui-4');

:root {
	--textentry-height: 50px; /* Высота div с полем ввода */
	--header-height: 30px; /* Высота хедера */
	--textentry-buttons-height: 25px;
}

@font-face {
    font-family: "Segoe UI";
	/*src: url( "segoeui.ttf" );*/
}
@font-face {
    font-family: "Segoe UI Smiles";
	/*src: url("seguiemj.ttf");*/
}

body {
	font-family: "Segoe UI Smiles", "Segoe UI";
}

#header {
	background-color: rgba( 250, 250, 250, 0.7 );
	height: var(--header-height);
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	padding: 0;
	margin: 2px;
}

#logout {
	position: absolute;
	top: 0px;
	right: 5px;
}

@media only screen and (max-width: 700px) {
	#logout {
		top: var(--header-height);
	}
	#header {
		height: calc(var(--header-height) * 2);
	}
}

#messageNotify {
	background-color: rgb( 200, 200, 200 );
	position: fixed;
	left: 0px;
	bottom: calc(var(--textentry-height) + var(--textentry-buttons-height));
	width: 100%;
	visibility: hidden;
}

/* #textentrysendsection { */
#textentry {
	background-color: rgb( 200, 200, 200 );
	height: calc(var(--textentry-height) + var(--textentry-buttons-height));
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
}

#textentryinput {
	/*width: 80%;*/
	width: 100%;
	height: 45px;
}

#chatbox {
	padding-bottom: calc(var(--textentry-height) + var(--textentry-buttons-height));
	padding-top: var(--header-height);
}

#smiles {
	background-color: rgba( 220, 220, 220, 0.7 );
	position: fixed;
	bottom: calc(var(--textentry-height) + var(--textentry-buttons-height));
	width: 100%;
	visibility: hidden;
	user-select: none;
}

#btnSendMessage {
	position: fixed;
	right: 0px;
}

#error {
	background-color: rgba( 255, 0, 0, 0.9 );
	color: rgb( 255, 255, 255 );
	position: fixed;
	top: 50px;
	margin: 0 auto;
	width: 90%;
	margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
	left: 0;
	right: 0;
	visibility: hidden;
	user-select: none;
	text-align: center;
}