:root {
	--kleur-achtergrond: #808080;
	--kleur-form: #c0c0c0; /*windows grijs*/
	--kleur-formtekst: #0055b3; /*blauw*/
	--kleur-button: #c0c0c0; /*windows grijs*/
	--kleur-readonly: #d0d0d0; /*wat lichter grijs*/
	--kleur-buttontekst: #0055b3;
	--kleur-actievetab: #28a745; /*frisgroen*/
	--kleur-tabtekst: #0055b3; /*blauw*/
	--kleur-legend: #008800; /*donkergroen*/
	--kleur-tekstopdonker: white;
	--kleur-hover: #17a2b8;
	--kleur-titelbalk: #28a745; /*frisgroen*/
	--kleur-helph1: #dc3545; /*rodig*/
	--kleur-helph2: #008800; /*donkergroen*/
	--kleur-helph3: mediumorchid;
	--kleur-tekstvak: white;
	--kleur-tekstvaktekst: blue;
	--url-16x16png: url('plaatjes/16x16v12.png');
}

/* deze stijlen worden gebruikt door modaal.ts */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 2500; /* Sit on top NB: 1 is niet genoeg, omdat leaflet bepaalde controls z-index = 7 geeft en zelfs z-index = 1000. 2000 is ook niet genoeg, want dat is het wisselknopje op de mobiel. Modale vensters moeten daar overheen vallen */
	justify-content: center;
	align-items: center;
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: var(--kleur-form);
	color: var(--kleur-formtekst);
	margin: auto;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	max-width: 96%;
	max-height: 98%; /* % werkt hetzelfde als vh, maar is verder achterwaarts compatibel */
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.modal-title {
	flex-grow: 1; /* zodat het kruisje helemaal naar rechts schuift als de titel niet zo breed is */
	font-size: 20px;
	cursor: move;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The Close Button */
.modal-close {
	width: 28px;
	flex-shrink: 0;
	color: var(--kleur-tekstopdonker);
	font-size: 24px;
	font-weight: bold;
	margin-left: 10px;
}

	.modal-close:hover,
	.modal-close:focus {
		color: var(--kleur-form);
		text-decoration: none;
		cursor: pointer;
	}

.modal-header {
	display: flex;
	padding-left: 16px;
	align-items: center;
	background-color: var(--kleur-titelbalk);
	color: var(--kleur-tekstopdonker);
	height: 42px;
	min-width: 0; /* anders kan bij een hele lange titel deze uit het form lopen */
}

.modal-body {
	overflow: auto;
	padding: 16px;
}

.modal-footer {
	text-align: right;
	padding: 16px;
}

	.modal-footer input {
		font-size: large;
		height: initial !important; /*important, omdat anders height 25px de voorkeur krijgt in stijl.css, en dan ziet de treeview er niet uit*/
	}

.modal label {
	vertical-align: top;
}

.modal-help {
	color: var(--kleur-legend);
	font-size: 90%;
	margin-bottom: 5px;
	margin-top: 20px;
}

.modal-uitleg {
	font-size: 100%;
	margin-bottom: 5px;
	margin-top: 20px;
}

/*BEGIN treeview*/
#frmTreeview-regels {
	margin-top: 10px;
	padding: 3px;
	max-height: 60vh;
	overflow-y: auto;
}

.frmTreeview-item {
	display: none;
	color: black;
}

.frmTreeview-item-zichtbaar {
	display: flex;
	align-items: baseline;
}

.frmTreeview-item-plus {
	cursor: pointer;
	flex: 0 0 15px;
}

.frmTreeview-item-tekst {
	cursor: pointer;
	padding: 4px;
	flex: 1 1 auto;
}

.frmTreeview-item-tekst-selected {
	border: 1px solid blue;
	font-weight: bold;
}

.frmTreeview-button {
	margin-left: 10px;
}

/* EINDE treeview*/

/*deze wordt gebruikt door de kilometerpaaltjes*/
.dist-marker {
	font-size: 9px;
	border: 1px solid #777;
	border-radius: 5px;
	text-align: center;
	color: #000;
	background: #fff;
}

/* de oekraiense vlag in de attributie uitschakelen */
.leaflet-attribution-flag {
	display: none !important
}

/* zodat de attributie string op de kaart lekker klein is, is ja niet belangrijk */
.leaflet-control-attribution {
	line-height: 1;
	font-size: 10px;
}

/* BEGIN kaartselectiecontrol (de lijst met kaarten) */
.kaartselectie-inhoud legend {
	color: var(--kleur-helph1);
}

.kaartselectie-sectie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	color: var(--kleur-formtekst);
}

.kaartselectie-groep {
	grid-column: span 2;
	color: var(--kleur-titelbalk);
}
/* EINDE kaartselectiecontrol*/

/* BEGIN als-a (voor een div die zich als een a gedraagt, maar geen href heeft) */
.als-a {
	text-decoration: underline;
	cursor: pointer;
	display: inline-block;
}

	.als-a:hover {
		color: var(--kleur-hover);
	}
/* EINDE als-a*/

label:hover {
	color: var(--kleur-hover);
}