style.css

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
}

.app {
	display: flex;
	height: 100%;
}

.column {
	height: 100%;
	min-width: 200px;
	border: 0;
	overflow-y: hidden;
}

.statusbar {
	display: flex;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 22px;
	background-color: rgb(0, 33, 43);
	color: rgb(147, 161, 161);
	/* TODO Don't overlap the editors, but leave a gap at the bottom */
	z-index: 9999;
}

.left-items,
.right-items {
	display: flex;
}

.right-items {
	flex-direction: row-reverse;
}

.statusbar-item {
	margin: 0 10px;
}

.column_name {
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 11px 0;
	left: auto;
	border-right: 1px solid rgb(0, 56, 71);
	background-color: rgb(0, 64, 82);
	color: rgba(147, 161, 161);
	overflow: hidden;
	padding-left: 11px;
	cursor: pointer;
}

.column_name:hover {
	background-color: #347890;
}

.button {
	position: fixed;
	z-index: 9999;
	right: 8px;
	bottom: 31px;
	overflow: hidden;
	border-radius: 4px;
	padding: 22px;
	background: rgb(0, 43, 56);
	color: rgba(147, 161, 161);
	box-shadow: rgba(0, 0, 0, 0.36) 0px 0px 8px 2px;
}

.button:hover {
	background-color: #347890;
	cursor: pointer;
}

.no-select {
	user-select: none;
	-webkit-user-select: none;
	/* Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* IE/Edge */
}