body {
	font-family: arial;
	font-size: 16px;
	}

header {
	background: #eee;
	color: #333;
	padding: 5px;
	filter: drop-shadow(0 1px 1px #777);
	}

.content {
	height: 100vh; background: cyan;
	display: grid;
	grid-template-rows: auto 1fr auto;
	}

main {
	display: grid;
	background: #eee;
	color: #333;
	overflow-y: scroll;
	}

.content .log {
	align-self: end;
	background: none;
	word-break: break-word;
	}

.activate-dialog {
	height: 100vh;
	display: grid;
	text-align: center;
	place-content: center;
	}

.activate-dialog .action {
	margin-top: 50px;
	font-size: 12px;
	}


.log {color: #555; padding: 15px;}
.log .item {margin-bottom: 7px;}

footer .to {display: grid; grid-template-columns: auto 1fr; grid-gap: 5px; align-items: center; background: #444; color: #999;}
footer .to .tag {opacity: 0.3;}
footer .to input {font-size: 16px; padding: 5px; background: #444; border: none; outline: none; box-sizing: border-box;}

footer .control {display: grid; grid-template-columns: 1fr auto; grid-gap: 3px; align-items: center; background: #444; color: #eee;}
footer .control input {font-size: 16px; padding: 5px; background: #444; border: none; outline: none; box-sizing: border-box; color: #fafafa;}
footer .control button {padding: 5px; height: 100%;}

input:empty {opacity: 0.5;}



body:not(.active) .show-on-active {display: none;}
body.active .hide-on-active {display: none;}
body:not(.active) {cursor: pointer;}



body:not(.loading) .show-on-loading {display: none;}
body.loading .hide-on-loading {display: none;}