/********************************************
*                                           *
*   Vrielink Software
*                                           *
*********************************************/
* {margin: 0; padding: 0; border: none; text-decoration: none}
html {overflow-y: scroll;}

body {
	color: #fff;
	font: 13pt Calibri, Verdana, Tahoma, Arial;
	background-color: rgb(0,0,0);
}

img {
	display: inline-block;
}

#header {
	color: white;
	font: Calibri, Verdana, Tahoma, Arial;
	font-size: 1.5em;
	font-weight: bold;
	height: 40px;
	margin-left: 0px;
	background: rgb(90,30,30)
}

#footer {
	height: 10px;
}

#container {
	width: 700px;
	margin: 0 auto;
	padding: 10px;
	background: rgb(0,0,0);
}

@media screen and (max-width: 500px), only screen and (max-device-width: 500px) {
	#container {
		width: 100%;
		margin-left: 0px;
		background: rgb(0,0,0);
	}
}

.error {
	color: red; 
}

.vertical-menu {
	width: 90%; /* Set a width if you like */
	margin: 5%;
}

	.vertical-menu a {
		background-color: #eee; /* Grey background color */
		color: black; /* Black text color */
		display: block; /* Make the links appear below each other */
		padding: 12px; /* Add some padding */
		text-decoration: none; /* Remove underline from links */
		align-content: center;
		text-align:center;
		margin: 10px;
		height: 50px;
		font-size: 1.5em;
		font-weight: bold;
		border-radius: 5px;
		border-style: solid;
		border-color: darkgray;
		border-width: 1px;
	}

		.vertical-menu a:hover {
			background-color: #ccc; /* Dark grey background on mouse-over */
		}

		.vertical-menu a.active {
			background-color: #ccc; /* Add a green color to the "active/current" link */
			color: white;
		}

label {
	display: block;
	font-size: 1.2em;
	font-weight: 600;
	background: #484848;
}

.gridkolom10 {
	width: 10%;
}
.gridkolom20 {
	width: 20%;
}
input, textarea, select {
	border: 1px solid #e2e2e2;
	color: black;
	font-size: 1.2em;
	margin: 5px 0 6px 0;
	padding: 5px;
}

input[type="text"]:not(.disabled), textarea {
		background-color: white;
		color: black;
	}

input[type="submit"]:not(.disabled), textarea {
	border-radius: 5px;
	background-color: lightgray;
	color: black;
}


div.disabled {
	color: black;
}
input:focus, textarea:focus {
	border: 0px solid #7ac0da;
}

/* styles for validation helpers */
.field-validation-error {
	color: #e80c4d;
	font-weight: bold;
}

.field-validation-valid {
	display: none;
}

.altRow, .disabled {
	background-color: rgb(224,214,143);
}

.MyTable {
	background-color: rgb(224,214,143);
	color: black;
	border: 1px solid;
}

.MyTable td {
	border-bottom: 1px solid #ddd;
}

.button {
	display: block;
	width: 80px;
	height: 20px;
	background: lightgray;
	padding: 10px;
	text-align: center;
	border-radius: 5px;
	border-style: solid;
	border-color: darkgray;
	border-width: 1px;
	color: black;
	font-weight: bold;
	line-height: 20px;
}

/*input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
	background-color: transparent !important;
	-webkit-text-fill-color: black !important;
	-webkit-box-shadow: 0 0 0px 40rem #ffff inset !important;
}
*/

.validation-summary-errors ul {
	list-style: none;
	padding-left: 0;
}


.row {
	display: flex;
	flex-wrap: wrap;
	border-block-end: solid;
	border-block-color: black;
}

.item10 {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 8%;
	background-color: rgb(224,214,143);
	margin: 1px;
	padding: 2px;
	color: black;
	min-width: 50px;
}
.item15 {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 10%;
	background-color: rgb(224,214,143);
	margin: 1px;
	padding: 2px;
	color: black;
	min-width: 100px;
}

.item {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 18%;
	background-color: rgb(224,214,143);
	margin: 1px;
	padding: 2px;
	color: black;
	min-width: 140px;
}

.item30 {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 30%;
	background-color: rgb(224,214,143);
	margin: 1px;
	padding: 2px;
	color: black;
	min-width: 200px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.itembutton {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 18%;
	margin: 1px;
	color: black;
	min-width: 95px;
	max-width: 100px;
}

.flexboxcontainer {
	background: rgb(224,214,143);
}