/* reset alle elementen */

* { box-sizing: border-box; padding: 0; margin: 0; }
html { font-family: Arial, sans-serif; }
.htmlclass { font-family: Arial, sans-serif; }

body {  width:100%; padding:10px; }
header {  width:100%; }
main { width:100%; margin: auto; align-items :center; }
inputb { font-weight: bold; font-size: 16px; }
input { font-size: 16px; }
input[type=button], input[type=submit], input[type=reset] {
  -webkit-appearance: none;
  background-color: #EEEEEE !important;
  text-decoration-color: #0000FF !important;
  color: #000000 !important;
  border: 1px;
  border-style: solid;
  border-color: black;
  padding: 5px 15px;
  cursor: pointer;
}

h1 { font-size: 24px;  }
 
/* top of page - header styles */

.container { display: flex; flex-wrap: nowrap; }

.container > div { flex-direction: row; }

.text_align_left  { flex-direction: row; width:20%; text-align: left; }
.text_align_right { flex-direction: row; width: 100%; text-align: right; padding-bottom:5px; padding-top:15px;
}

/* 2 dimentional input grid */

.filler30 { display:inline; width:20%; }
.block60  { display:block; margin: auto; max-width:500px; justify-content: left; align-items: left; text-align: left;}

.ccenter { margin:auto; width:100%; padding: 10px; }

.input_grid { display: grid; grid-template-columns: min-content min-content; padding: 0px; }

.label_f { grid-column-start:1; grid-column-end:1; white-space: nowrap; padding-right:10px; } 
.input_f { grid-column-start:2; grid-column-end:2; white-space: nowrap; padding-bottom: 10px; }
.label_g1 { grid-column-start:1; grid-column-end:2; white-space: nowrap; padding-right:10px; }
.label_g { white-space: nowrap; padding-right:10px; width:100%}

footer { display:flex; width:100%; }

/* on smaller devices, use only one column */

@media only screen and (max-width: 700px) {
.input_f { grid-column-start:1; grid-column-end:1; }
.input_g { grid-column-start:1; grid-column-end:1; }
.filler30 { display:none; }
 }
 
 /* ---------------------
 ** dropdown persoon etc
 ** --------------------- */
 
 .plabel {
	 margin-bottom: 10px;
 }
 
 .pdropdown select {
	 font-size: 20px;
 }
 
 .pdropdown submit {
	 text-decoration: none;
 }
 
 .pdropdown select option {
	 font-size: 16px;
 }
 
 .hide {
	 display: none;
 }

/* --------------------
** Dropdown menu styles
** -------------------- */

.dropbtn {
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff; */
  min-width: 160px;
  overflow: auto;
  border: 1px solid;
  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 6px 6px;
  text-decoration: none;
  display: block;
  margin: 0;
}

.dropdown a:hover {background-color: #ddd;}


/* dropdown voor rollen
*/

.dropdown-rollen {
  display: none;
  position: absolute;
  background-color: #ffffff; */
  min-width: 160px;
  overflow: auto;
  border: 1px solid;
  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 1;
}


.dropdown-rollen li {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {display: block;}

/* ----
**
*/

.kop {
	padding-top: 4px;
	padding-bottom: 4px;
}


/*
** Deelnemers tabel
*/

table {
  border-collapse: collapse;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
  border-color: #448cd6;
  
  /* width: 100%; */
}

th { background: #448cd6;
 text-align: left;
  padding: 3px;
		color: #FFFFFF; }

td {
	/* background: #448cd6; */
  text-align: left;
  vertical-align: top;
  padding: 3px;
}

tr:nth-child(even) {background-color: #f2f2f2;}

tr:hover {background-color: #fcfcfc; cursor=pointer; }

/*
** links
*/

a, a:link, a:visited, a:active { color:black; background-color:transparent; text-decoration: none; }

a div { color:black; background-color:transparent; text-decoration: none; }
a div:hover  { color:white; background-color: #888cd6; cursor=pointer; }

/*
** Allerlei
*/

.inverse_header { background: #448cd6;
 text-align: left;
  padding: 3px;
  color: #FFFFFF; 
  margin-bottom: 10px;  
}
		
.knoplijst {
	display: flex;
	flex-direction: row;
	width:90%;
	text-align: center;
}

.knop {
	flex: 1;
	margin: 10px;
	margin-bottom: 10px;
	padding: 5px;
	background-color: #448cd6;
}

#app {
            width: 90%;
            height: 90%;
            background: white;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }