/*
	@media queries

	max-width:  567px -> (only) vertical mobile
	max-width:  767px -> (up to) horizontal mobile

	min-width:  568px -> (from) horizontal mobile
	min-width:  768px -> (from) vertical tablet
	min-width: 1024px -> (from) horizontal tablet / PC
	min-width: 1280px -> (from) widescreen PC
*/

/* Global rules */
* { position: relative; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
ul, li { margin: 0; padding: 0; }

/* Some color */
.white { color: white; }
.yellow { color: yellow; }
.orange { color: orange; }
.green { color: green; }
.blue { color: blue; }
.red { color: red; }
.black { color: black; }
.gray { color: gray; }

/* Miscellaneous */
.help { cursor: help; }
.hidden { display: none  }
.nowrap { white-space: nowrap; }
.strike { text-decoration: line-through; }
.bold { font-weight: bold; }
.uppercase { text-transform: uppercase; }

/* <table class="data"> */
> table.data { width: 100%; }

/* <table class="data"> (up to) horizontal mobile */
@media screen and (max-width: 767px) {
	:not(.table-container) > table.data { display: block; }
	:not(.table-container) > table.data > thead { display: none; }
	:not(.table-container) > table.data > tbody { display: table; width: 100%; }
	:not(.table-container) > table.data > tbody > tr { padding: 0.8em; display: block }	
	:not(.table-container) > table.data > tbody > tr > td { display: table-row; }
	:not(.table-container) > table.data > tbody > tr > td::before { display: table-cell; content: attr(data-label) ": "; font-weight: bold; padding: 0.3em; }
	:not(.table-container) > table.data > tfoot { display: none; }

	:not(.table-container) > table.data > thead.show { display: table; width: 100%; }
	:not(.table-container) > table.data > thead.show > tr > th { display: table-row; text-align: left; }
	:not(.table-container) > table.data > thead.show > tr > th:first-child { visibility: hidden; line-height: 2px; }
	:not(.table-container) > table.data > thead.show > tr > th::before { display: table-cell; content: " "; padding: 12px 2px; }
	:not(.table-container) > table.data > thead.show > tr > th:first-child::before { padding: 0; }

	:not(.table-container) > table.data > tfoot.show { display: table; width: 100%; }
	:not(.table-container) > table.data > tfoot.show > tr > td { display: table-row; }
	:not(.table-container) > table.data > tfoot.show > tr > td:first-child { visibility: hidden; line-height: 2px; }
	:not(.table-container) > table.data > tfoot.show > tr > td::before { display: table-cell; content: attr(data-label) ": "; font-weight: bold; padding: 0.5em; }
	:not(.table-container) > table.data > tfoot.show > tr > td:first-child::before { padding: 0; }
}