[wui-opts~="flex"],
	[wui$=container], [wui$="panel"], [wui$="menu"], [wui="chat-box"]
	{ display: flex; }

[wui-opts~="inline-flex"],
	[wui$="block"], [wui$="tile"], [wui$="button"], [wui$="list"], [wui$="checkbox"], [wui$="group"], [wui$="radio"]
	{ display: inline-flex; }

[wui-opts~="flex-column"],
	[wui$=container], [wui$="block"], [wui$="panel"], [wui$="list"], [wui="chat-box"] {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}

[wui-opts~="flex-row"],
	[wui$="menu"], [wui$="tile"], [wui$="button"], [wui$="checkbox"], [wui$="radio"] {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
	}

[wui-opts~="pad"],
	[wui$="panel"], [wui$="tile"], [wui$="menu"], [wui="drop-list"], [wui$="checkbox"], [wui="chat-box"], [wui$="radio"]
	{ padding: 0.125rem; }

[wui-opts~="pad-vertical"] { padding: 0.125rem 0; }
[wui-opts~="pad-horizontal"] { padding: 0 0.125rem; }

[wui-opts~="space"],
	[wui$="tile"], [wui$="button"], [wui$="checkbox"], [wui$="radio"], textarea
	{ margin: 0.125rem; }

[wui-opts~="space-vertical"],
	[wui$="panel"]
	{ margin: 0.125rem 0; }

[wui-opts~="space-horizontal"],
	[wui$="icon"], [wui$="label"]
	{ margin: 0 0.125rem; }

[wui-opts="no-break"],
	[wui$="label"], [wui="checkbox"], [wui$="button"], [wui$="tile"], [wui="radio"]
	{ white-space: nowrap; flex-wrap: nowrap;}

[wui-opts~="border"],
	[wui$="tile"], [wui$="button"], [wui$="panel"], [wui="checkbox"], [wui="radio"]
	{ border: 1px solid #777777; border-radius: 0.125rem; }

[wui="menu"] { align-items: center; }
[wui$="tile"] { align-items: baseline; }

[wui-opts~=orient-vertical] > [wui$="panel"]:last-child { border-radius: 0.125rem 0.125rem 0 0; margin-bottom: 0; }
[wui-opts~=orient-vertical] > [wui$="panel"]:first-child { border-radius: 0 0 0.125rem 0.125rem; margin-top: 0; }
[wui-opts~=orient-horizontal] > [wui$="panel"]:last-child { border-radius: 0.125rem 0 0 0.125rem; margin-right: 0; }
[wui-opts~=orient-horizontal] > [wui$="panel"]:first-child { border-radius: 0 0.125rem 0.125rem 0; margin-left: 0; }


[wui$="button"], li [wui="checkbox"], li [wui="radio"], .button {
	justify-content: center;

	font-weight: bold;
	text-align: center;
	outline: none;
	text-decoration: none;
	align-items: baseline;

	color: #EEEEEE;
	background-color: #00AA00;

	padding: 0.25rem;
	border-radius: 0.25rem;


	cursor: pointer;
	user-select: none;
	transition: 0.3s;
}
[wui="btn-icon"] { min-width: 1em; }

[wui="checked-icon"] { display: none; }
[wui="unchecked-icon"] { display: inline-block; }
input:checked ~ [wui="checked-icon"] { display: inline-block; }
input:checked ~ [wui="unchecked-icon"] { display: none; }
[wui="checkbox"], [wui="radio"] { user-select: none; }
[wui="checkbox"] > input[type="checkbox"], [wui="radio"] > input[type="radio"] { display:none; height: 0; width: 0; }


[wui="dropdown"], [wui="popup"] { position: relative; }

[wui="drop-list"], [wui="pop-content"] {
	position: absolute;
	top: 100%;
	left: 0.125rem;
	z-index: 100000;
	background-color: #777777;
	border-radius: 0.25rem;
	min-width: calc(100% - 0.25rem);
	align-items: stretch;
	justify-content: inherit;
}
[wui="pop-content"] {
	top: unset;
	bottom: 100%;
}
[wui="menu"] [wui="drop-list"] { top: calc(100% + 0.125rem); }
[wui="drop-list"] > li { display: inline-flex; }
[wui="drop-list"] > li > * {flex-grow: 1; }
[wui="dropdown"][wui-opts~="align-end"] [wui="drop-list"] { left: unset; right: 0.125rem; }

[wui="chat-block"], [wui="chat-box"] { 
	background-color: #777777;
	min-height: 10em;
	min-width: 200px;
	border: 0.1rem solid #777777;
}

[wui="chat-output"] { 
	flex: 1 1;
	background-color: #DDDDDD;
	margin: 0.125rem;
	overflow-y: auto;
	/*max-height: 100%;*/

	scrollbar-width: none;
	-ms-overflow-style: none;
} [wui="chat-output"]::-webkit-scrollbar { display: none; }

[wui="chat-input"] {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
}

[wui="chat-title-bar"] { display: flex; justify-content: space-between; align-items: center;}

[wui="chat-content"] {
	flex-grow: 1;
	font: inherit;
}

.message {
	color: black;
	align-items: flex-start;
	padding: 0.125rem;
}
.message.owner { align-items: flex-end; }
.msg-bubble {
	width: 90%;
	border-radius: 0.25rem 0.75rem 0.25rem 1rem;
	padding: 0.25rem;
	background-color: #7799FF;
}

.owner > .msg-bubble {
	background-color: #55CC55;
	border-radius: 0.75rem 0.25rem 1rem;
}
.msg-content { padding: 0.125rem 0.5rem; }
.msg-time { color: #777777;  font-size: 87.5%; padding: 0.25rem 0.5rem; align-self: center; }
[wui$="pop-content"] {flex: 1 1;}
[wui$="pop-content"] [wui="chat-box"] { height: 100%; }

[wui="split"] {
	display: flex;
	flex: 1 1;
}
[wui="split"] > [wui^="split"] { flex: 1 1; }
[wui="gutter"] {
	display: flex;
	justify-content: center; align-items: center;

	z-index: 1; 
	min-width: 1rem; min-height: 1rem;
	margin: -0.5rem;
	
	cursor: row-resize;
	/*background-color: rgba(191, 191, 0, 0.5);*/
}
[wui-opts="orient-horizontal"] > [wui="gutter"] { cursor: col-resize; }


[wui-opts~="justify-start"] { justify-content: flex-start; }
[wui-opts~="justify-end"] { justify-content: flex-end; }
[wui-opts~="justify-inherit"] { justify-content: inherit; }
[wui-opts~="justify-space-between"] { justify-content: space-between; }
[wui-opts~="align-start"] { align-items: flex-start; }
[wui-opts~="align-end"] { align-items: flex-end; }
[wui-opts~="align-inherit"] { align-items: inherit; }
[wui-opts~="orient-horizontal"] { flex-direction: row; justify-content: space-between; }
[wui-opts~="orient-vertical"] { flex-direction: column; align-items: stretch; }
[wui-opts~="orient-inherit"] { flex-direction: inherit; }
[wui-opts~="darken"] { background-color: rgba(63,63,63, 0.33); }
[wui-opts~="lighten"] { background-color: rgba(191,191,191, 0.67); }

li > * { min-width: calc(100% - 0.25rem); }
[wui-display='false'] { display: none !important; }