body {
	background-color: #F0F0F0;
}

.picker {
	width: 400px;
}

.picker, .conversation {
	background-color: #F0F0F0;
}

.picker-radiobuttons {
	width: 100%;
	margin-top: 1%;
	text-align: center;
}

.picker-radiobuttons > button {
	width: 49%;
}

.picker-panels {
	min-width: 320px;
}

.status-circle {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: lightgray;
	box-shadow: inset 0 1px 3px -1px;
	vertical-align: middle;
	margin: 4px;
}

.conversation-list-item {
	margin: 6px;
	padding: 8px;
	border-radius: 8px;
	background-image: linear-gradient(to right, rgb(208,208,255), rgba(208,208,255,0));
	box-shadow: inset 0 1px 3px -1px;
}

.conversation-list-item > * {
	display: table-cell;
}

.conversation-content, .buddy-content {
	padding-left: 4px;
	width: 100%;
}

.conversation-image-container {
	vertical-align: middle;
}

.conversation-buddy-name, .buddy-name {
	font-size: 140%;
}

.conversation-last-message, .buddy-status-text {
	width: 225px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.buddy-image {
	border: 2px solid white;
	border-radius: 6px;
	width: 48px;
	height: 48px;
	background-size: cover;
	background-image: url(images/unknown-user.svg);
	box-shadow: 0 2px 4px -2px;
}

.buddy-list-item {
	padding: 8px;
	border-top: 1px solid white;
	border-bottom: 1px solid #C0C0C0;
}

.buddy-list-item > * {
	display: table-cell;
	vertical-align: middle;
}

.panel-shadow {
	box-shadow: -6px 0 6px rgba(0,0,0,0.3);
}

.onyx-input {
	width: 100%;
}

.table-fit > * {
	display: table-cell;
}

.table-fit .onyx-grabber {
	margin: 0 10px 0 4px;
}

.table-fit > .table-fit-fill {
	width: 100%;
}

.message-item {
	margin: 6px;
	padding: 8px;
	background-image: linear-gradient(to left, rgb(255,255,208), rgba(255,255,208,0));
	box-shadow: inset 0 1px 3px -1px;
	border-radius: 10px;
	overflow: hidden;
}

.message-item.outbound {
	background-image: linear-gradient(to right, rgb(208,208,255), rgba(208,208,255,0));
}

.message-image-container {
	height: 100%;
	float: right;
	margin-left: 8px;
}

.outbound .message-image-container {
	float: left;
	margin-right: 8px;
	margin-left: 0;
}

.message-timestamp {
	color: #606060;
	font-size: 70%;
	font-style: italic;
}

.onyx-popup {
	width: 320px;
}

.onyx-popup h2 {
	font-size: 20px;
	margin-top: 0;
}

.onyx-popup .onyx-button {
	width: 100%;
	margin-top: 8px;
}

.error {
	color: red;
}