/* IDE */
.ide {
	background: #1E1E1E;
	height: calc(100vh - 144px);
}
.ide.expanded {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	border: none;
}
.ide .btn-shrink { display: none; }
.ide.expanded .btn-expand { display: none; }
.ide.expanded .btn-shrink { display: block; }


/* Tabs */
.ide .tab-bar {
	width: 100%;
	background: #373737;
	color: #ccc;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	height: 38px;
	user-select: none;
}
.ide .tab-bar .tab {
	cursor: pointer;
	padding: 12px;
	display: inline-block;
	float: left;
	background: #373737;
	border-right: solid 1px #262626;
}
.ide .tab-bar .tab.output {
	float: right;
	border-left: solid 1px #111;
	border-right: none;
}
.ide .tab-bar .tab:hover { background: #2A2D2E; }
.ide .tab-bar .tab.active { background: #1E1E1E; text-decoration: underline; }
.ide .tab-bar .tab.active:hover { background: #1E1E1E; }


/* Panes */
.ide .pane-holder { height: calc(100% - 38px); width: 100%; }
.ide .pane-holder .pane { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; }
.ide .pane-holder .pane.active { visibility: visible; }
.ide .pane-holder .pane iframe {
	border: none;
	outline: none;
	display: block;
	background: #1E1E1E;
	width: 100%;
	height: 100%;
	resize: none;
}