.flexcontainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 1em;
}

.flexcontainer.justify-start {
	justify-content: flex-start
}

.flexcontainer.justify-between {
	justify-content: space-between;
}


.flexcolumn {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.flexcolumn.small {
	flex: 0.5;
}

.flexcolumn.x-small {
	flex: 0.25;
}

.flexcolumn.xx-small {
	flex: 0.125;
}

.tablecontainer {

	max-height: 75vh;
	overflow-y: auto;

	& table {
		table-layout: fixed;
		width: 100%;
		border-collapse: collapse;
		border: 1px solid black;
	}
	& th,
	& td {
		/*border: 1px solid var(--tableborder);*/
		padding: 0.25rem;
	}

	& th {
		cursor: pointer;
	}

	& th {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		text-align: left;
	}
	&tbody {
		--tablerowevenbgcolor: white;
		--tablerowoddbgcolor: lightblue;
		--tablerowtextcolor: black;
	}

	& tbody tr {
		color: var(--tablerowtextcolor);
	}

	& tbody tr:nth-child(even) {
		background-color: var(--tablerowevenbgcolor);
	}

	& tbody tr:nth-child(odd) {
		background-color: var(--tablerowoddbgcolor);
	}
}


/* kolom breedtes: (10em is ongeveer 15 lettertekens)*/
.th-icon {
	width: 1em;
}

.th-id {
	width: 5em;
}

.th-naam {
	width: 15em;
}

.th-email {
	width: 20em;
}

.th-club {
	width: 15em;
}

.th-leeftijd {
	width: 3em;
}

.th-rating {
	width: 3em;
}

.th-stap {
	width: 4em;
}

.th-knsbnr {
	width: 6em;
}

.th-aanmelding {
	width: 9em;
}

.arrow {
	border: solid lightblue;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 2px;
	margin: 0 0.5em 0.25em 0;
	/*cursor: pointer;*/
}

.arrow.right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.arrow.left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

.arrow.up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

.arrow.down {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}