html, body {
   overscroll-behavior:none !important;
   /*om te voorkomen dat op mobile de browser een page-refresh gaat doen als je naar boven swipet en er valt niks te scrollen*/
}

* {
	margin: 0;
	box-sizing: border-box;
}

.grid-container {
	display: grid;
	grid-template-areas:
	  'header header header header header header'
	  'menu playerlist playerlist playerlist playerlist details'
	  'footer footer footer footer footer footer';
	grid-template-columns: 18% 12% 12% 12% 12% 34%;
	background-color: var(--bleekgroen);
	padding: 0;
}

div {
	padding: 0.25em;
	font-size: 1.0rem;
  }

.header {
	grid-area: header;
	font-size: xx-large;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#title {
	width: 80%;
	padding: 0 0.5em;
	white-space: nowrap; /*nodig om meer-regelig blok te voorkomen*/
	overflow: hidden;
	text-overflow: ellipsis;
}

#title, #presentcount, #menuhamburger {
	border: 1px solid lightblue;
}

#menuhamburger {
	display: none; /*wordt pas zichtbaar bij width<=700*/
	margin: 0.5rem 0;
}

#presentcount { font-size: small; color: lightgreen; min-width: 8em;}

.footer {
	grid-area: footer;
	font-size: small;
}

.header, .footer {
	background-color: var(--blauwzwart);
	text-align: center;
	color: var(--bleekgroen);
}
  
.menu {
	grid-area: menu;
	display: flex;
	flex-direction: column;
}

.details {
	grid-area: details;
}

.editbox {
	display: grid;
	grid-template-columns: 1fr 2fr;
	row-gap: 0.25lh;
	padding: 1em;
	border: 1px solid black;
}

.buttonbar {
	display: flex;
	flex-direction: row;
	gap: 1em;
}

.shiftright {
	margin-left: auto;
}

.playerlist {
	grid-area: playerlist;
	height: 80vh;
	border: 5px solid var(--grijsgroen);
	background-color: var(--bleekgroen);
	padding: 0;
	color: var(--blauwzwart);
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 1000px) {
	.grid-container {
		grid-template-columns: 18% 16% 16% 16% 16% 18%;
	}
}

@media only screen and (max-width: 700px) {
	/*Bij tablet en telefoon in portrait-mode als onder elkaar.
	  Ter orientatie: het scherm van mijn tablet is 686x1098; dat van mijn telefoon is 384x857
	*/
	.header {grid-area: 1 / span 6;}
	.menu {grid-area: 2 / span 6;}
	.playerlist {grid-area: 3 / span 6;}
	.details {grid-area: 4 / span 6;}
	.footer {grid-area: 5 / span 6;}
	#menuhamburger { display: block;}
	.menu { display: none; }
}

.playerlistitem:nth-child(even) {
	background-color: var(--grijsgroen);
}

.playerlistitem {
	border: 2px solid  var(--blauw);
	padding: 0;
}

.playershifter {
	/*(kleuren en hover-effect is overgenomen van Picnic)*/
	width: 20em; /*width van .playername + 2x width .handle*/
	width: 45%;
	background: var(--bleekgroen);
	color: var(--blauwzwart);
  	display: flex;
	flex-direction: row;
	border: 3px solid var(--blauwzwart);
	border-radius: 2em;
	/*padding: 0 !important;*/
	padding: 0.5em 0.5em;
}

.playershifter:hover {
	box-shadow: inset 0 0 0 99em rgba(255, 255, 255, 0.2);
}

.handle { width: 10%; margin-top: 0.5em; }
.handle.left { color: red; }
.handle.right {	color: green;}

.playername {
	width: 80%;
	padding: 0 0.5em 0 0.5em;
	white-space: nowrap; /*nodig om meer-regelig blok te voorkomen*/
	overflow: hidden;
	text-overflow: ellipsis;
}

@media only screen and (max-width: 500px) {
	/*
	We willen de naam niet teveel inkorten, daarom verkleinen we het playername-font.
	De handles willen we niet verkleinen, dus om die op de goede hoogte te houden moeten we de margin-top wat verkleinen.
	*/
	.handle { margin-top: 0.4em; width: 12%; }
	.playername { font-size: smaller; width: 76%; }
}

.afwezig {
	margin-left: 0;
	margin-right: auto;
}

.defaultafwezig {
	margin-left: 20%;
	margin-right: auto;
}

.defaultaanwezig {
	margin-left: auto;
	margin-right: 20%;
}

.aanwezig {
	margin-left: auto;
	margin-right: 0;
}

dialog {
	margin: auto;
	background-color: var(--grijsgroen);
	& input, button {
		margin-bottom: 0.5em;
		background-color: var(--grijsblauw);
		color: var(--bleekgroen);
	}
}

#fadingmess {
	font-size: large;
	background-color: var(--blauwzwart);
	color: var(--grijsgroen);
	display: none;
	position: fixed;
	bottom: 3vh;
	right: 1vw;
	border: 4px var(--grijsgroen) solid;
	border-radius: 0.2em;
}

input[type=radio] {
	margin: 0.5em;
	height: 1.5em;
	width: 1.5em;
}