#workplace {
	.instance {
		display: grid;
		grid-template-areas:
			"btop btop btop btop btop .... ...."
			"logo titl strt info stop warn dele"
			"logo desc strt info stop warn dele"
			"bbtm bbtm bbtm bbtm bbtm .... ....";
		grid-template-columns: 85px 262px 210px 1fr repeat(3, max-content);
		width: 100%;
		position: relative;

		--brdr: 1px dotted #cacaca;
		.brdr-top {
			grid-area: btop;
			border-top: var(--brdr);
		}

		> .inactive-bg {
			background-color: #f5f5f5a3;
			position: absolute;
			left: 0;
			right: 75px;
			z-index: 1;
			top: 0;
			bottom: 0;
		}

		> .logo {
			grid-area: logo;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}

		> .title {
			grid-area: titl;

			> .admin-note {
				margin-left: 3px;
				position: relative;
				z-index: 2;
				> button {
					color: darkmagenta;
					border: 0;
					padding: 0;
					background: transparent;
					font-weight: normal;
					cursor: pointer;
				}
				> [popover] {
					font-weight: normal;
					max-width: 300px;
					> header {
						color: darkmagenta;
						text-align: center;
						margin-bottom: 0.5em;
					}
				}
			}
		}

		> .description {
			grid-area: desc;

			> .debug {
				margin: 5px 0 5px;
				font-size: 10px;
				position: relative;
				z-index: 2;
				> * {
					color: lightgreen;
					background: black;
					font-family: monospace;
					border-radius: 2px;
					margin: 0 1px;
					font-size: inherit;
					padding: 1px 3px;
					margin-top: 1px;
				}
				> span {
					> * {
						color: inherit;
						font-size: inherit;
					}
					> a:hover {
						text-decoration: underline;
					}
				}
				> input {
					border: 0;
					field-sizing: content;
				}
				> .id {
					color: lightyellow;
				}
				> .app-id {
					color: deepskyblue;
				}
				> .aws-id {
					color: burlywood;
				}
				> .zone {
					color: yellow;
				}
				> .ip {
					color: lightblue;
				}
			}
		}

		.start {
			grid-area: strt;
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-rows: 1fr auto auto 1fr;
			padding: 5px 0px;
			z-index: 2;

			> .action {
				grid-column: 1 / -1;
				grid-row: 2 / -2;
				width: 100%;
			}

			> .rate {
				background: var(--gc-btn-primary-bg);
				border: 1px solid var(--gc-btn-primary-bg);
				color: white;
				cursor: pointer;
				font-size: 11px;
				font-weight: 600;
				line-height: 11px;
				text-align: left;

				&:hover {
					background: rgb(102, 177, 255);
				}

				&.active {
					color: #20a0ff;
					background: white;

					&:hover {
						background: aliceblue;
					}
				}

				&.running {
					grid-row: 2;
					grid-column: 1;
					border-bottom: none;
				}
				&.stopped {
					grid-row: 3;
					grid-column: 1;
					bottom: 0px;
					border-top: none;
				}
				> i.fa {
					font-size: 8px;
				}
			}

			> .top {
				grid-row: 1;
				grid-column: 1 / -1;

				font: 11px monospace;
				line-height: 1em;
				text-align: center;
				padding-bottom: 1px;
			}

			> .clock {
				grid-row: 4;
				grid-column: 1 / -1;

				color: #409eff;
				font-family: monospace;
				font-size: 11px;
				line-height: 1em;
				font-weight: 900;
				text-align: center;
				padding-top: 1px;
			}
		}

		> .info {
			grid-area: info;
			align-self: center;
			padding: 0 10px;
		}

		> .stop {
			grid-area: stop;
			display: flex;
			align-items: center;
			padding-right: 10px;
		}

		> .warn {
			grid-area: warn;
			align-self: center;
			cursor: pointer;
			width: 65px;
			text-align: center;
			> .fa-bell-slash-o {
				color: gray;
			}
		}

		> .delete {
			grid-area: dele;
			cursor: pointer;
			align-self: center;
			width: 1ch;
			&:hover {
				color: red;
			}
			transition: all 0.2s ease-out;
		}

		&.-worker {
			&:last-child > .brdr-bottom {
				grid-area: bbtm;
				border-bottom: var(--brdr);
			}

			> .title {
				display: flex;
				align-items: end;

				font-weight: bold;
				padding: 5px 1em 3px 0;
			}

			> .description {
				display: flex;
				flex-direction: column;
				align-items: start;

				color: #868686;
				font-size: 11px;
				padding: 2px 1em 5px 0;

				> .public {
					display: flex;
					gap: 5px;
					align-items: center;

					> div > .version {
						margin-right: 5px;
					}
				}
			}

			.start {
				> .rate {
					padding: 0 4px;

					&:hover {
						background: rgb(102, 177, 255);
					}

					&.running {
						border-radius: 4px 0 0 0;
					}
					&.stopped {
						border-radius: 0 0 0 4px;
					}
				}
			}

			> .info {
				> .auth {
					display: grid;
					grid-template-columns: max-content auto;
					grid-template-rows: 1fr 1fr;
					gap: 2px;
					> button {
						background: transparent;
						border-radius: 3px;
						border: 1px solid lightgray;
						color: #333;
						cursor: pointer;
						font-family: "open sans", sans-serif;
						font-size: 12px;
						font-weight: 600;
						padding: 1px 3px;
						white-space: nowrap;

						&:hover {
							color: black;
							border: 1px solid gray;
						}
					}
					> input {
						border: 0;
						color: black;
						cursor: pointer;
						font-size: 14px;
						padding: 1px 2px;
						text-overflow: ellipsis;
						width: 100%;
					}
				}
			}
		}

		&.-storage {
			margin: 1rem 0 2rem;

			> .brdr-bottom {
				grid-area: bbtm;
				border-bottom: var(--brdr);
			}

			> .title {
				align-self: end;
				padding-bottom: 3px;

				> button {
					position: relative;
					z-index: 2;
				}
			}

			> .description {
				align-self: start;

				> button {
					position: relative;
					z-index: 2;
				}
			}

			.start {
				> .action {
					border-radius: 3rem;
				}

				> .rate {
					padding: 0 4px 0 8px;

					&:hover {
						background: rgb(102, 177, 255);
					}

					&.running {
						border-radius: 50px 0 0 0;
					}
					&.stopped {
						border-radius: 0 0 0 50px;
					}
				}
			}

			> .info {
				> .ebs {
					font-size: 13px;
					> tbody > tr {
						> td:nth-child(2) {
							padding: 0 0.5em;
							font-weight: bold;
							text-align: right;
						}
						> td:nth-child(3) {
							font-size: 11px;
							text-align: right;
						}
					}
				}

				> .efs {
					padding-left: 20px;
					> button {
						border: 0;
						background: transparent;
						z-index: 2;
					}
				}
			}
		}
	}

	.add-apps {
		margin: 3rem 0;
		text-align: center;
	}
}