#filenameinput {
	color: gold;
	background-color: green;
	width: 150px;
	font-size: 1.0em;
	border: 0px;
}

#filenamediv {
	color: gold;
	background-color: darkgreen;
	padding-left: 12px;
}

#loadpage {
	position:fixed;
	top: -100em; /*zodat we 'm niet zien*/
}

nav,.dghbutton,.dghinput {
	color: gold;
	background-color: darkgreen;
	padding: 10px;
/*	margin: 5px;*/
}

.dghbutton,.dghinput,.dghlist {
	font-size: 1.0em;
	border-radius: 5px;
	margin: 10px;
}

.dghlist {
	max-height: 300px;
	/*overflow-y: scroll;*/
	overflow: auto;
	border: 1px solid red;
}

nav a,label,.navbutton,.dropbtn,.dropdown-content {
	color: gold;
	background-color: darkgreen;
	margin: 4px;
	padding: 4px;
	text-decoration: none;
	cursor: pointer;
}

.navbutton {
	font-size: 1.0em;
	padding: 12px 16px;
	border: none;
	display: block;
}

#helppagelink,#page3x4link,#page2x3link,#page1x1link {
	float: right;
}

.flagbutton {
	background-color: transparent;
	height: 30px;
}

nav .flagbutton {
	float: right;
	margin-left: 10px;
}

.flagbutton img {
	height:100%;
}

.colorbutton {
	font-size: 1.0em;
	width: 120px;
	min-height: 16px;
	margin: auto;
	margin-top: 4px;
	margin-bottom: 4px;
}

#toolbar {
	border: 3px solid black;
	display: flex;
	background-color: darkgreen;
	position: fixed;
	bottom: 0;
	margin-bottom: 40px;
	padding-left: 3px;
	padding-right: 3px;
	z-index: 10;
	/*transform: scale(0.8);*/
	max-width: 95vw;
	overflow-x: scroll;
}

#toolbar * {
	vertical-align: middle;
}

#toolbar button {
	height: 60px; /*wordt mee-gescaled*/
/*	min-width: 54px;*/ /*idem*/
	margin: 3px;
	float: left;

}

.fa-chess, .fa-chess-board, .fa-copy, .fa-paste {
	color: red;
}

.itemselected {
      border: 3px solid red;
}

.popupbox {
	/*vrij smal*/
	background-color: green;
	color: gold;
	display: none;
	position: fixed;
	top: 30%;
	left: 35%;
	min-width: 30%;
	max-width: 50%;
	border: 5px solid red;
	z-index: 20;
	padding: 10px;
}

#copypastebox,#createbook {
	/*breder dan gewone popupbox*/
	left: 10%;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	min-width: 150px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content label,.colorbutton {
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content button:hover,label:hover {
	background-color: green;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display:block;
}

.disabledlink {
	pointer-events: none;
	color: gray;
}