.demo-app {
    height: 100%;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    cursor: default;
    display: flex;
    width: 100%;
    height: 100%;

}

	.demo-app > header {
		width: 36px;
		height: 100%;
		 z-index:9999;
         position:absolute;
		background-color: rgba(16, 78, 58, 0.72);
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		-webkit-app-region: drag;
	}

		.demo-app > header .app-title {
			writing-mode: vertical-rl;
			color: #fff;
			margin: 0;
			padding: 0;
            font-weight: lighter;
            font-size: 1.1em;
            /* padding: 10px 0; */
            margin: 10px;
      position: absolute;
		}

.app-active .demo-app > header .app-title {
	color:#fff;
}

.demo-app > content {
	flex: 1;
	position: relative;
   
}



.app-sys-command-container {
    position: absolute;
    width: 90px;
    height: 32px;
    display: flex;
    -webkit-app-region: drag;
    justify-content: flex-end;
    z-index: 9999;
    right: 0px;

    top:0px;
}

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

	 .app-sys-command-container > .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 {
		}

				.app-sys-command-container:hover > .sys-commands > li {
				background-color: #09987c;
				color: #fff;
			}

		 .app-sys-command-container > .sys-commands > li:hover {
			background-color: #14a689;
		}

	.app-sys-command-container > .sys-commands > li:active {
			background-color: #d6554b;
		}

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

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

	.demo-app > content > article {
		padding: 10px;
	}

.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;
	}

.mainContent {
    margin: 10px;
    margin-bottom: 0px;
    padding: 0;
}
@media screen and (max-width: 991px) {
    .content-tabs {
        display: none;
    }

    .mainContent {
        margin: 0px;
        margin-bottom: 0px;
        padding: 0;
    }

}

.cmpname {
	float: left;
	font-size: 18px;
	color: #fff;
	line-height: 50px;
	padding-left:30px;
}