/* Common rules */

.centered {
	display: block;
	margin: 0 auto;
}

.hidden {
	display: none;
}

[v-cloak] {
	display: none;
}

body {
	font-family: sans-serif;
	background: linen;
}

button {
	padding: 6px 12px;
}

button:hover:enabled {
	cursor: pointer;
}

button:hover:disabled {
	cursor: not-allowed;
}

/* Main area */

.header {
	font-size: 1.6em;
	color: white;
	background: steelblue;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	padding: 0 0.5em;
}

/* Chat pane */

.message-item {
	border-top: 1px solid black;
	padding: 10px;
	position: relative;
	overflow-wrap: break-word;
	word-wrap: break-word;
	white-space: pre-line;
}

.message-item:first-child {
	border-top: none;
}

.log {
	color: green;
}

.chat.column textarea {
	width: 100%;
	height: 100%;
	font-size: 14px;
	background-color: linen;
	border-color: transparent;
	border-style: none;
	outline: none;
	padding: 0;
	resize: none;
}

.chat.column textarea::-webkit-input-placeholder {
	color: steelblue;
}

.chat.column textarea::-moz-placeholder {
	color: steelblue;
}

.chat.column textarea:-ms-input-placeholder {
	color: steelblue;
}

/* Lobby pane */

.panel {
	margin: 20px 0;
	border: 1px solid transparent;
	border-color: #ddd;
	border-radius: 4px;
}

.panel-heading {
	background-color: lightgray;
	border-color: #ddd;
	padding: 10px 15px;
}

.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 16px;
	color: steelblue;
}

.list-group {
	margin-bottom: 0;
}

.panel>.list-group .list-group-item {
	font-size: 1em;
	border-width: 1px 0;
	border-radius: 0;
	outline: none;
}

.list-group-item {
	position: relative;
	display: block;
	padding: 10px 15px;
	margin-bottom: -1px;
	background-color: white;
	border: 1px solid #ddd;
}

.list-group-item.user {
	background-color: steelblue;
	color: white;
}

button.list-group-item {
	width: 100%;
	text-align: left;
}

button.list-group-item:hover {
	background-color: lightblue;
}

button.list-group-item:disabled {
	color: black;
}

button.list-group-item:hover:disabled {
	background-color: white;
	cursor: default;
}

.button {
	width: 120px;
	margin-left: 10px;
	border: none;
	outline: none;
}

.create.button {
	background-color: steelblue;
	color: white;
}

.leave.button {
	background-color: lightcoral;
	color: black;
}

/* Nickname pane */

.form {
	padding-top: 48px;
	text-align: center;
	font-weight: 100;
}

.error-message {
	color: red;
	font-size: 14px;
}

.form-control {
	width: 300px;
	font-size: 200%;
	letter-spacing: 3px;
	background-color: transparent;
	border: none;
	border-bottom: 2px solid black;
	color: steelblue;
	outline: none;
	padding-bottom: 15px;
	text-align: center;
}