* { margin: 0px; padding: 0px; }
html, body { height: 100%; }
input, table, th { width: 100%; text-align: center; }
table { table-layout: fixed; }
label { width: 100%; margin: 0px; }

.suggest-div { position: absolute; background-color: white; border: solid black 1px; display: none; }
.card-selected { background-color: gray; }

/*
 * 'top' has a fixed height, while 'bottom' takes the rest.
 */
.flex-main { position: relative; box-sizing: border-box; }
.fixed-top { position: absolute; top: 0px; left: 0px; right: 0px; }
.flex-bottom { height: 100%; }

body { padding-top: 42px; }
.nav { height: 42px; }

#arena-page, #packs-page { padding-top: 160px; }
.arena-trend, .packs-trend { height: 160px; }
.arena-bottom {}
	.arena-left { width: 66.67%; height: 100%; float: left; padding-top: 160px; }
		.arena-wins { height: 160px; }
		.arena-pies {}
			.arena-class-pie, .arena-wins-pie { width: 50%; height: 100%; float: left; }
	.arena-right { width: 33.33%; height: 100%; float: left;  padding-top: 88px; height: 100%; }
		.arena-right-top { height: 88px; }
			.arena-add, .arena-del { width: 50%; float: left; }
		.arena-right-bottom { overflow-y: scroll; }

.packs-left, .packs-right { float: left; width: 50%; height: 100%; }
.packs-left { padding-top: 185px; }
.packs-right { padding-top: 122px; }
	.packs-card-golden, .packs-append { float: left; width: 25%; box-sizing: border-box; }
	.packs-card-name { display: inline-block; float: left; width: 50%; box-sizing: border-box; }
	.packs-right td { width: 8%; }
	.packs-right .packs-day { width: 20%; }
	.packs-add, .packs-del { float: left; width: 50%; }
.packs-right .flex-bottom { overflow-y: scroll; }

#lacks-page { padding-top: 74px; }
.lacks-control { margin: 20px auto; width: 33%; height: 34px; }
	.lacks-card { width: 50%; float: left; }
	.lacks-add, .lacks-del { width: 25%; float: left; }
.lacks-left, .lacks-right { width: 50%; height: 100%; float: left; }
    .lacks-detail tr.detail.hidden { display: none; }
    .lacks-detail td { cursor: pointer; }
.lacks-right { padding-top: 40px; }
    .lacks-names > div { float: left; width: 25%; height: 100%; overflow-y: scroll; }
    .lacks-names label { width: auto; }
.lacks-preview { display: none; position: absolute; }

#export-page { padding-top: 74px; }
.export-control { margin: 20px auto; width: 50%; height: 34px; }
	.export-import, .export-export { float: left; width: 50%; }
.progress-wrapper { margin: 0px auto; width: 50%; height: 20px; position: relative; }
	.progress-title { position: absolute; left: 50%; top: 50%; width: 100px; height: 20px; margin-left: -50px; margin-top: -10px; text-align: center; }
	.progress-bar { height: 100%; width: 0px; background-color: green; }
.export-content { display: block; margin: 0px auto; width: 50%; height: 80%; }