html,
body {height: 100%; width: 100%; margin: 0; overflow: auto; background: url(./IMG/NottsLeanderSC_Tile.png);}

html {box-sizing: border-box; font-size: 100%; font-family: sans-serif; line-height: 1.15;}

*,
::after,
::before {-webkit-box-sizing: inherit; box-sizing: inherit;}

body > h1 {text-align: center;}

.container {width: 100%; padding-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center;}
.container > p {margin: 0 0 1rem 0; line-height: 1.5; text-align: center;}

.container > h2,
.container > h3 {margin: 0 0 1.25rem 0; text-align: center;}

.table-group > div {width: 100%;}
.table-group > div > div {overflow-x: auto;}
.table-group h3 {margin-top: 2.5rem; margin-bottom: 0.1rem;}
.table-group h5 {margin-top: 0;}
.table-group table {width: 100%; table-layout: fixed; border-collapse: collapse;}
.table-group th, .table-group td {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #DDDDDD; padding: 0.5rem;}
.table-group thead td {text-align: center; font-weight: bold; background-color: #009F29; color: #FFFFFF;}
.table-group tbody > tr:nth-child(odd) {background-color: #F2F2F2;}
.table-group tbody > tr:nth-child(even) {background-color: #DDDDDD;}
.table-group tbody td:nth-child(1),
.table-group tbody td:nth-child(3),
.table-group tbody td:nth-child(5) {text-align: center;}
.table-group tbody td:nth-child(4) {text-align: right;}
.table-group td:nth-child(2) {width: 40%;}
.table-group td:nth-child(5) {width: 17.5%;}

#select-container {display: flex; justify-content: center; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; padding: 1rem; width: 100%; border-bottom: 1px solid #AAAAAA; z-index: 100;}
#select-container > .input-line {margin-right: 1rem;}
#select-container > .input-line:last-child {margin-right: 0;}
#select-container > .input-line select {padding: 0.5rem; width: 100%;}

/* Screens <= 768px */
@media only screen and (max-width: 48em) {
	html {font-size: 75%;}

	.container > * {max-width: 100%;}
	.container > p {max-width: 80%;}

	.table-group {width: 95%;}
	.table-group table {table-layout: auto;}

	#select-container > .input-line {width: 40%;}
}

/* Screens >= 768 and <= 992 */
@media only screen and (min-width: 48em) and (max-width: 62em) {
	html {font-size: 100%;}

	.container > * {max-width: 90%;}
	.container > p {max-width: 70%;}

	.table-group {width: 85%;}
	.table-group table {font-size: 0.75rem; table-layout: fixed;}

	#select-container > .input-line {width: 35%;}
}

/* Screens >= 992 */
@media only screen and (min-width: 62em) {
	.container > * {max-width: 80%;}
	.container > p {max-width: 60%;}

	.table-group {width: 75%;}
	.table-group table {font-size: 1rem; table-layout: fixed;}

	#select-container > .input-line {width: 30%;}
}