html, body {
	height: 100%;
	font-size: 14px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 0;
	padding: 0;
	cursor: default;

	overflow:hidden;
}





header {
		width: 36px;
		height: 100%;	z-index:999;
		background-color: #CC0066;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		-webkit-app-region: drag;
		overflow:hidden;
		position: fixed;
		top: 0px;
		text-align:  center;
		align-items: center;
	}

 .app-title {
			-webkit-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			color: #aaa;
			margin: 0;
			padding: 0;
			font-weight: lighter;
			font-size: 1em;
			padding: 10px 0;
			white-space:nowrap;
		}

 .app-title {
	color: #fff;
}

content {
	flex: 1;
	right:  0px;
	display: flex;
	top: 0px;
	flex-direction: column;
	height: 32px;
	width:  100%;
}



	 .app-sys-command-container {
		width: 100%;
	 
		display: flex;
		-webkit-app-region: drag;
		justify-content: flex-end;
	}
	.app-sys-command-container{ 
				transition: all ease-in-out 1000ms;
				z-index:998;
	}
.app-sys-command-container:hover { 
			background-color: #e600737a;
		}

.app-sys-command-container:active { 
			background-color: #E60073;
} 

 
		 .sys-commands {
			list-style: none inside;
			padding: 0;
			margin: 0;
			height: 32px;
			-webkit-app-region: no-drag;
			display: flex;
		}

		 .sys-commands > li {
				display: inline-flex;
				width: 32px;
				background-color: transparent;
				color: #696969;
				align-items: center;
				justify-content: center;
				transition: all ease-in-out 300ms;
				font-size: 0.8em;
			}

	 .app-sys-command-container:hover {
		}

	  .sys-commands > li {
				background-color: #E60073;
				color: #fff;
			}

		  .sys-commands > li:hover {
			background-color: #CC0066;
		}

		 .sys-commands > li:active {
			background-color: #99004C;
		}

		 .sys-commands > li:last-child:hover {
			background-color: #c00;
		}

		 .sys-commands > li:last-child:active {
			background-color: #a00;
			color: #fff;
		}

	 article {
		padding: 10px;
		flex: 1;
		overflow-y: auto;
	}

.app-state-watcher {
	display: flex;
}

	.app-state-watcher > div {
		background-color: #f1f1f1;
		padding: 8px;
	}

		.app-state-watcher > div p {
			color: #666;
			margin: 3px 0;
			line-height: 1.5;
		}

		.app-state-watcher > div:nth-child(2) {
			margin: 0 10px;
		}