structure.css

/* global defaults */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, #root {
	min-width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}

/* central display */
.central {
	padding: 0 10px;
	margin: 0 20%;
}

@media screen and (max-width: 768px) {
	.central {
		margin: 0;
	}
}

/* components */
.page {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.panel {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-bottom: 1em;
}

.centered {
	/* No, you don't need "display: flex" here. */
	justify-content: center;
}

.middle {
	display: flex; /* But you do need it here */
	align-items: center;
}

.text.left {
	text-align: left;
}

.text.centered {
	text-align: center;
}

.text.right {
	text-align: right;
}

/* flexbox layout tables */
.table {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.table .row {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

@media screen and (max-width: 480px) {
	.table .row {
		flex-direction: column;
	}
}

@media screen and (max-width: 768px) {
	.table .row.tabletCollapse {
		flex-direction: column;
	}
}

.table .row .col {
	flex: 1 1 1%;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.table .row .col.double {
	flex: 2 1 2%;
}

.table .row .col.half {
	flex: 0.5 1 0.5%;
}

@media screen and (max-width: 480px) {
	.table .row .col.double {
		flex: 2 1 2.5%;
	}
}

.table.noCollapse .row, .table .row.noCollapse {
	flex-direction: row;
}

/* mobile control */
.mobile.show {
	display: none;
}

.mobile.show.col {
	display: none;
}

@media screen and (max-width: 480px) {
	.mobile.show {
		display: flex;
	}

	.mobile.hide {
		display: none;
	}

	/* hybrid of table and mobile control */
	.mobile.hide.col {
		display: none;
	}

	.mobile.show.col {
		display: flex;
	}

	.mobile.col.half {
		flex: 0.5;
	}
}

.tablet.show {
	display: none;
}

.tablet.show.col {
	display: none;
}

@media screen and (max-width: 768px) {
	.tablet.show {
		display: flex;
	}

	.tablet.hide {
		display: none;
	}

	/* hybrid of table and tablet control */
	.tablet.hide.col {
		display: none;
	}

	.tablet.show.col {
		display: flex;
	}

	.tablet.col.half {
		flex: 0.5;
	}
}