/* === CSS Custom Properties === */
:root {
	--bg-page:        #f0f0f0;
	--bg-content:     #ffffff;
	--bg-header:      #e0e0e0;
	--bg-topbar:      #c5c5c5;
	--bg-sidebar:     #d6dde5;
	--bg-menu:        #f4f4f4;
	--bg-menu-end:    #afafaf;
	--bg-dropdown:    #ffffff;
	--bg-row-alt:     var(--bs-primary-bg-subtle);
	--bg-total:       #cccccc;
	--bg-input:       #ffffff;
	--bg-dropfile:    #eeeeee;
	--bg-ajaxcontent: #dddddd;

	--text:           #000000;
	--text-muted:     #202020;
	--text-error:     #ff0000;
	--text-disabled:  #c5c5c5;

	--border:         #b0b0b0;
	--border-dark:    #444444;
	--border-medium:  #808080;

	--accent:         var(--bs-primary-bg-subtle);
	--accent-text:    var(--bs-body-color);

	--menu-gradient:  linear-gradient(#f4f4f4, #afafaf);

	--bg-th-header:   linear-gradient(to bottom, #f5f5f5, #e0e0e0);
	--bg-th-sort:     linear-gradient(to bottom, var(--bs-primary-bg-subtle), var(--bs-primary-border-subtle));
	--bg-th-pressed:  linear-gradient(to bottom, #e0e0e0, #c4c4c4);
}

[data-theme="dark"] {
	color-scheme: dark;
	--bg-page:        #1c1c1e;
	--bg-content:     #252528;
	--bg-header:      #2e2e32;
	--bg-topbar:      #2a2a2e;
	--bg-sidebar:     #232325;
	--bg-menu:        #232325;
	--bg-menu-end:    #1c1c1e;
	--bg-dropdown:    #2e2e32;
	--bg-row-alt:     var(--bs-primary-bg-subtle);
	--bg-total:       #3a3a3e;
	--bg-input:       #2e2e32;
	--bg-dropfile:    #2e2e32;
	--bg-ajaxcontent: #48484f;

	--text:           #dcdcdc;
	--text-muted:     #dcdcdc;
	--text-error:     #ff6b6b;
	--text-disabled:  #4a4a4a;

	--border:         #3a3a3e;
	--border-dark:    #555555;
	--border-medium:  #4a4a50;

	--accent:         var(--bs-primary-text-emphasis);
	--accent-text:    #1a1a1a;

	--menu-gradient:  linear-gradient(#2a2a2e, #1c1c1e);

	--bg-th-header:   linear-gradient(to bottom, #2e2e32, #252528);
	--bg-th-sort:     linear-gradient(to bottom, var(--bs-primary-border-subtle), var(--bs-primary-text-emphasis));
	--bg-th-pressed:  linear-gradient(to bottom, #252528, #1c1c1e);
}

/* === Base === */

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	-o-box-sizing: inherit;
	-ms-box-sizing: inherit;
	box-sizing: inherit;
}

*
{
	font-family: "Helvetica Neue", "Lucida Grande", "Arial", "Courier", "Monaco", serif;
	margin:0px;
}

div
{
	border-width: 0px;
	border-style: hidden;
}

/* === Print === */

@media print
{
	#menu {
		clear:both;
		visibility: hidden;
		height:1px;
		width:100%;
		padding:0px;
	}

	.zoek {
		clear:both;
		visibility: hidden;
		height:1px;
		width:100%;
		padding:0px;
	}

	#header {
		clear:both;
		visibility: hidden;
		height:1px;
		width:100%;
		padding:0px;
	}

	#header2 {
		clear:both;
		visibility: hidden;
		height:1px;
		width:100%;
		padding:0px;
	}

	#nav {
		clear:both;
		visibility: hidden;
		height:1px;
		width:100%;
	}

	#rechts
	{
		clear: both;
		width: 100%;
		padding: 5px 5px 5px 5px;
		background-color: #f0f0f0;
		border-top:0px;
		border-color: #888;
		border-style: solid;
	}

	.buttons
	{
		clear:both;
		visibility: hidden;
		height:1px;
		width:100%;
	}

	td.fill
	{
		max-width:0px;
	}
}

/* === Layout === */

#links
{
	background: var(--bg-sidebar);
	position: fixed;
	float: left;
	border-width: 0px 1px 0px 0px;
	width: 160px;
	height: 900px;
	line-height: 0.4cm;
	padding: 2px;
}

#printer2
{
	width: 90%;
	height: 50%;
	padding: 5px 5px 5px 10px;
	background: var(--bg-content);
	font-family: "Courier", "Andale Mono", "Courier New", monospace;
}

#rood
{
	color: var(--text-error);
	background-color: transparent;
}

#footer
{
	position: absolute;
	top: 950px;
	left: 150px;
	width: 90%;
	height: 12px;
	border-width: 1px 0px 0px 1px;
	padding: 0px 0px 0px 3px;
	font-size: 11px;
}

#navigation
{
	width: 100%;
	background-color: var(--bg-page);
	font-size: 12px;
	font-weight: bold;
	border-width: 0px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
	display: inline-flex;
}

@media screen
{
	#body
	{
		padding: 0px;
		margin-left: auto;
		margin-right: auto;
		min-width: 800px;
		max-width: 1400px;
		min-height: 800px;
		border-left: 1px solid var(--border);
		border-right: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
	}

	#header
	{
		width: 100%;
		border-style: solid;
		border-width: 1px 0px 1px 0px;
		padding: 5px;
		margin: 0px 0px 0px 0px;
		background: var(--bg-header);
		text-align: center;
		font-weight:bold;
	}

	#header2
	{
		position: relative;
		width: 100%;
		border-style: solid;
		border-width: 1px 0px 0px 0px;
		border-color: var(--border-dark);
		padding: 4px 0px 3px 10px;
		margin: 0px 0px 0px 0px;
		color: var(--text-muted);
		background: transparent;
		text-align: left;
		font-size: 11px;
	}

	#menu
	{
		clear: both;
		top: 0px; left:0px;
		padding: 0px 10px 0px 0px;
		margin: 0px;
		margin-top: 10px;
		border-top: 1px solid var(--border-dark);
		width: 100%;
		height: 21px;
		background-image: url(/gfx/menubar.gif);
		background-repeat: repeat-x;
		background-image: var(--bg-th-header);
	}

	.zoek
	{
		clear: both;
		width: 100%;
		border-top:0px;
		margin:0px;
		padding:3px 5px 3px 9px;
		border-color: var(--border-medium);
		border-style: solid;
		background: var(--bg-topbar);
		background-image: url(/gfx/bgbrush.jpg);
		background-repeat: repeat-x;
		font-weight: bold;
	}

	#rechts
	{
		clear: both;
		width: 100%;
		min-height: 720px;
		padding: 5px 5px 5px 5px;
		background-color: var(--bg-page);
		border-top:1px;
		border-color: var(--border-medium);
		border-style: solid;
	}
}

/* === Typography === */

p
{
	margin: 0px;
	padding: 0px;
	display: inline;
}

a
{
	color: inherit;
	text-decoration: underline;
}

p.red
{
	color: var(--text-error);
}

td a
{
	text-decoration: none;
	border-bottom: 1px solid;
	border-color: var(--border);
}

a.none
{
	text-decoration: none;
	border: 0px solid;
}

a.nav
{
	color: var(--text);
	text-decoration: none;
}

a.nav:visited
{
	text-decoration: none;
}

a:visited
{
	color: var(--text);
	text-decoration: underline;
}

a:hover
{
	color: var(--text-muted);
	text-decoration: underline;
}

a:active
{
	color: var(--text);
	text-decoration: underline;
}

a.header
{
	text-decoration: none;
	display: inline-block;
	padding: 2em;
	margin: -2em;
}

h1
{
	margin-top: 4px;
	margin-bottom: 4px;
	font-size: 28px;
}

h2
{
	margin-top: 4px;
	margin-bottom: 4px;
	font-size: 22px;
}

h3
{
	margin-top: 4px;
	margin-bottom: 4px;
	font-size: 18px;
}

h4
{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 12px;
}

h5 {}

/* === Form elements === */

input
{
	margin-top: 3px;
	margin-bottom: 3px;
	font-size: 11px;
	font-family: "Helvetica Neue", "Lucida Grande", "Arial", "Courier", "Monaco", serif;
	font-weight: normal;
	color: var(--text);
	background-color: var(--bg-input);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="search"]),
textarea {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--border);
	outline-offset: 0;
}

input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	border: 1px solid var(--border);
	border-radius: 10px;
	height: 20px;
	padding: 0 8px;
	outline-offset: 0;
}

input[autocomplete="false"]::-webkit-contacts-auto-fill-button,
input[autocomplete="false"]::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	height: 0;
	width: 0;
	margin: 0;
}

input.checkbox
{
	width:12px;
	margin: 0px;
	font-size: 10%;
}

input.text
{
	width: 100%;
}

input.number
{
	width:120px;
}

input.textWide
{
	width:600px;
}

input.button
{
	width:72px;
	height:23px;
	background-image: url(/gfx/bevelActive.png);
	background-color: transparent;
	background-repeat: no-repeat;
	border: 0px;
	border-style: none;
	vertical-align: center;
	font-weight: bold;
	font-size: 12px;
	padding-bottom:3px;
	color: var(--text);
}

input.widebutton
{
	margin: 8px;
	padding: 1px;
	width: 100px;
	background-size: 100% 100%;
}

input.button:active
{
	background-image: url(/gfx/bevelPressed.png);
	background-color: transparent;
	background-repeat: no-repeat;
	border: 1px;
	border-style: none;
	vertical-align: center;
	font-weight:bold;
	font-size: 12px;
	padding-bottom:3px;
}

input.buttoninactive
{
	width:72px;
	height:23px;
	background-image: url(/gfx/bevelActive.png);
	background-color: transparent;
	background-repeat: no-repeat;
	border: 1px;
	border-style: none;
	vertical-align: center;
	font-weight:bold;
	font-size: 12px;
	padding-bottom:3px;
	color: var(--text);
	opacity: 0.4;
	cursor: default;
}

input.searchText
{
	width:72px;
}

textarea
{
	margin-top: 3px;
	margin-bottom: 3px;
	border: 1px;
	border-style: solid;
	border-color: var(--border);
	background-color: var(--bg-input);
	color: var(--text);
	font-family: "Helvetica Neue", "Lucida Grande", "Arial", "Courier", "Monaco", serif;
	font-size: 11px;
	width: 100%;
}

input.searchTextWide
{
	width:160px;
}

input.date
{
	width:80px;
}

.uploadarea
{
	margin-left: 20px;
}

.dropfile
{
	width: 250px;
	height: 150px;
	border: 3px dashed var(--border-dark);
	background-color: var(--bg-dropfile);
	margin-bottom: 15px;
	text-align: center;
}

input.dropbutton
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	outline:none;
	opacity: 0;
	z-index: 100;
}

.droparea {
	position: relative;
	text-align: center;
	top: -50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	pointer-events: none;
}

select
{
	margin: 3px;
	margin-left: 0px;
	margin-right: 0px;
	width: 140px;
	font-size: 11px;
	font-weight: normal;
	font-family: "Helvetica Neue", "Lucida Grande", "Arial", "Courier", "Monaco", serif;
	color: var(--text);
	background-color: var(--bg-input);
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	border: 1px solid var(--border-medium);
	border-radius: 3px;
	padding-right: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23444'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 10px 6px;
}

select.middle
{
	margin: 3px;
	margin-left: 0px;
	margin-right: 0px;
	width: 240px;
	font-size: 11px;
}

select.breed
{
	margin: 3px;
	margin-left: 0px;
	margin-right: 0px;
	width: 290px;
	font-size: 11px;
}

select.tiny
{
	margin: -3px 0px 0px -2px;
	padding: 0px;
	width: 60px;
	font-size: 9.5px;
}

body
{
	background-color: var(--bg-page);
	font-size: 11px;
	font-family: "Helvetica Neue", "Lucida Grande", "Arial", "Courier", "Monaco", serif;
	margin: 0px 0px 0px 0px;
	color: var(--text);
}

hr
{
	color: var(--text);
	background-color: var(--border);
	border: 1px;
	height:1px;
	width: 100%;
	margin-left: 1px;
}

/* === Table label helpers === */

.t
{
	background-color: var(--bg-total);
	font-weight: bold;
}

.r,
.right { text-align: right; }
.f { padding: 0px; }

.tr
{
	background-color: var(--bg-total);
	font-weight: bold;
	text-align: right;
}

/* === Search bar === */

.zoek table
{
	padding: 1px;
	border-color: var(--border-dark);
	border-style: none;
	border-width: 1px;
	border-collapse: collapse;
	background-color: transparent;
	table-layout: fixed;
}

.zoek td.kader
{
	border-collapse: separate;
	border-color: var(--border-dark);
	border-style: solid;
	border-width: 1px;
}

.zoek td  { border-style: none; }
.zoek tr  { border-style: none; }
.zoek th  { border-style: none; }

.zoek hr
{
	background-color: var(--text);
	height: 1px;
}

/* === Login === */

.login
{
	height: 800px;
	background-color: var(--bg-page);
}

.login table
{
	background-color: var(--bg-header);
	border-width: 1px;
	border-color: var(--border-medium);
	border-style: solid;
	background-image: url(/gfx/bgbrush.jpg);
	background-repeat: repeat-x;
}

/* === Invoice table === */

.faktuur
{
	background-color: var(--bg-page);
	border-style: none;
	border-collapse: collapse;
	table-layout: fixed;
}

.faktuur table
{
	padding: 1px;
	border-collapse: collapse;
	table-layout: fixed;
	border-style: none;
}

.faktuur tr
{
	border-style: none;
	font-weight: bold;
}

.faktuur th
{
	background-image: none;
	border: 0px none;
	font-weight: normal;
	text-decoration: underline;
	padding-right: 6px;
}

.faktuur td
{
	border: 0px none;
	border-style: none;
	padding-right: 6px;
}

/* === Buttons header === */

.buttonsHeader
{
	background-color: inherit;
	margin:0px;
	padding:0px;
	display: inline-flex;
}

.buttonsHeader table
{
	background-color: transparent;
	border-style: solid;
	border-collapse: collapse;
	border-width:1px;
	border-color: var(--border);
	padding: 0px;
	margin: 0px;
}

.buttonsHeader td
{
	background-color: var(--bg-page);
	border-width: 0px;
}

/* === Vertical form/display tables === */

.vertical
{
	background-color: transparent;
	margin:0px;
	padding:0px;
	text-align: left;
}

.vertical table
{
	background-color: transparent;
	border-color: var(--border);
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	margin:0px;
	padding:0px;
	min-width: 300px;
}

.vertical hr
{
	border: 1px;
	height:1px;
	margin:0px;
}

.vertical tr
{
	border-color: var(--border);
	border-width: 1px;
	border-style: none;
}

.vertical th
{
	background-color: var(--bg-header);
	border-right-style: solid;
	border-color: var(--border);
	border-width: 1px;
	font-weight: bold;
	text-align: right;
	padding-bottom: 3px;
}

.vertical td
{
	background-color: inherit;
	border-width: 0px;
	margin: 0px;
	padding: 3px;
	padding-left: 1px;
	padding-right: 1px;
	min-width: 30px;
}

.subvertical
{
	background-color: transparent;
	margin: -3px;
	padding: 0px;
}

.subvertical table
{
	border-style: none;
	border-width:0px;
	border-color: var(--border);
	margin: 0px;
	padding:0px;
	width: 100%;
}

.subvertical tr { border-style: none; }

.subvertical th
{
	border-style: solid;
	border-width:1px;
	border-color: var(--border);
	background-color: var(--bg-header);
	margin:0px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:3px;
	padding-right:3px;
	font-weight:normal;
}

.subvertical td
{
	border-style: solid;
	background-color: var(--bg-page);
	margin:0px;
	padding:2px;
	padding-left:3px;
	padding-right:2px;
	min-width: 30px;
}

.subvertical td:first-child
{
	padding-left:3px;
}

/* === File preview / modal === */

.preview
{
	min-height: 80px;
	vertical-align: middle;
	padding: 0px;
	cursor: pointer;
}

.modal
{
	display: none;
	position: fixed;
	z-index: 1;
	padding: 0px;
	padding-top: 30px;
	left: 10px;
	top: 10px;
	width: 80%;
	margin: auto;
	max-width: 900px;
	height: 90%;
	overflow: auto;
	background-color: var(--bg-content);
	border: 1px solid var(--border);
}

.modal-content {
	margin: auto;
	display: block;
	width: 100%;
	max-width: 900px;
	color: var(--accent-text);
}

.modal-content, #caption {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

.spinner
{
	text-align: center;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* === AJAX info popup === */

#ajaxcontent {
	font-size: 1.1em;
	position: absolute;
	border: 1px solid var(--border);
	background-color: var(--bg-ajaxcontent);
	color: var(--text);
	white-space: pre-wrap;
	min-width: 200px;
	max-width: 300px;
	display: none;
	padding: 3px;
	-webkit-box-shadow: 3px 5px 3px 0px rgba(0,0,0,0.36);
	-moz-box-shadow: 3px 5px 3px 0px rgba(0,0,0,0.36);
	box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.36);
}

#ajaxcontent p { display: block; }

@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)}
	to   {-webkit-transform:scale(1)}
}

@keyframes zoom {
	from {transform:scale(0)}
	to   {transform:scale(1)}
}

.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: var(--text-error);
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

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

/* === Button cells === */

td.fill
{
	background-color: var(--bg-header);
	vertical-align: top;
	border-left-color: var(--border);
	border-left-width: 1px;
	border-left-style: solid;
}

.buttons
{
	padding: 0px;
	margin: 0px;
	background-color: inherit;
	background-image: inherit;
}

.buttons table
{
	padding: 0px;
	margin: 0px;
	border-width: 0px;
	border-style: hidden;
	border-collapse: collapse;
}

.buttons tr {}

.buttons td
{
	padding: 3px;
	margin: 0px;
	border-width: 0px;
	border-style: none;
	background-color: inherit;
	background-image: inherit;
	background-repeat: inherit;
}

.inlineblock
{
	display: inline-block;
	padding: 0px;
	margin: 0px;
}

.width50 { width: 50%; }

/* === Wide data table === */

.widetable
{
	margin:0px;
	padding:0px;
	background-color: inherit;
	overflow: scroll;
}

.widetable table
{
	width: 100%;
	padding: 1px;
	margin:0px;
	border-color: var(--border);
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	background-color: var(--bg-content);
}

.widetable th
{
	background: var(--bg-th-header);
	font-size: 11px;
	font-weight: normal;
	color: var(--text);
	border-color: var(--border);
	border-right-style: solid;
	border-right-width: 1px;
	border-top-width: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-bottom-width: 0px;
	padding-top: 2px;
	padding-left: 1px;
	padding-right: 2px;
	padding-bottom: 2px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.widetable tr
{
	text-align: left;
	border-width: 0px;
	border-style: none;
}

.widetable td
{
	padding: 1px;
	padding-bottom: 2px;
	font-size: 11px;
	border-width: 1px;
	border-top-style: none;
	border-bottom-style: none;
	border-left-color: var(--border);
	border-left-style: solid;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

tr.header
{
	border-width: 0.5px;
	border-color: var(--border);
	border-style: solid;
}

tr.alternating:nth-child(even) {
	background-color: var(--bg-content);
}

tr.alternating:nth-child(odd) {
	background-color: var(--bg-row-alt);
}

tr.alternating:hover
{
	background-color: var(--accent);
	color: var(--accent-text);
}

tr.alternating td a:hover, tr.alternating td:hover a:visited
{
	color: var(--accent-text);
}

tr.total
{
	background-color: var(--bg-total);
	font-weight: bold;
}

.ajax-table tfoot tr.total td {
	border-top: 2px solid var(--border) !important;
}

tr.total:hover
{
	border-top: 1px solid var(--border);
	background-color: var(--accent);
	color: var(--accent-text);
	font-weight: bold;
}

/* === Form cell alignment === */

td.formLeft          { text-align: left; }
td.formLeftAjax      { text-align: right; }
td.formLeftCondensed { text-align: left; letter-spacing: 0px; }
td.formCenter        { text-align: center; }
td.formRight         { text-align: right; }

td.formRightRed
{
	text-align: right;
	color: var(--text-error);
}

td.formLeftEdit
{
	text-align: left;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 0px;
	padding-bottom: 0px;
}

td.formLeftEditWide { text-align: left; }

td.formLeftAjaxEdit
{
	text-align: left;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 0px;
	padding-bottom: 0px;
}

td.formRightEdit
{
	text-align: right;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 0px;
	padding-bottom: 0px;
}

td.buttonsobsolete
{
	border-width: 1px;
	table-layout: auto;
	background-image: url(/gfx/bgbrush.jpg);
}

/* === Sort column headers === */

th.header:hover  { color: var(--text); }

th.header:active
{
	background: var(--bg-th-pressed);
	color: var(--text);
}

th.sort1,
th.sort2
{
	background: var(--bg-th-sort);
	font-size: 11px;
	font-weight: normal;
	border-right-style: solid;
	padding-top: 2px;
	padding-left: 1px;
	padding-right: 14px;
	padding-bottom: 2px;
	text-align: left;
	position: relative;
}

th.sort1::after {
	content: '▲';
	font-size: 8px;
	position: absolute;
	right: 3px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.7;
}

th.sort2::after {
	content: '▼';
	font-size: 8px;
	position: absolute;
	right: 3px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.7;
}

a.header { flex: 1; }

/* === Login form cells === */

td.label
{
	text-align: right;
	border-style: none;
	padding-top: 10px;
	padding-bottom: 10px;
}

td.textbox
{
	border-style: none;
	padding-right: 5px;
}

/* === Chart / graph tables === */

table.graph
{
	background-color: var(--bg-content);
	padding: 0px;
	margin: 3px;
	border: 1px;
	border-collapse: collapse;
}

td.graph  { background-color: #008000; }
td.line   { background-color: #80f000; }
td.invis  { border: 0px; }

td.ingraph
{
	padding: 0px;
	border-spacing: 0px;
	margin: 0px;
	background-color: var(--bg-content);
	border-collapse: collapse;
}

pre {
	white-space: pre-wrap;
	white-space: -moz-pre-wrap !important;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
	font-family: "Courier New";
	font-size: 14px;
}

/* === Navigation menu === */

/* Scoped to #nav — prevents Bootstrap class rules from interfering */

#nav, #nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: "Helvetica Neue", "Lucida Grande", "Times", serif;
	background-color: transparent;
}

#nav ul {
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

#nav li:hover {
	background-color: var(--accent);
	background-image: none;
	color: var(--accent-text);
	cursor: default;
}

#nav li { background: transparent; }

#nav a {
	font-weight: bold;
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: var(--text);
	padding: 0.2em 10px;
}

#nav li li a:hover {
	border: 1px none;
	border-width: 0 0px;
	background-color: var(--accent);
	color: var(--accent-text);
	cursor: default;
}

#nav > li {
	float: left;
	position: relative;
	text-align: left;
	cursor: default;
	background-color: transparent;
	border: 0px none;
	font-family: "Helvetica Neue", "Lucida Grande", "Times", serif;
	font-size: 14px;
	padding: 0 10px 0 10px;
}

#nav > li#first { border-left-width: 1em; }
#nav > li#last  { border-right-width: 1em; }

#nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	background-color: var(--bg-dropdown);
	padding: 0;
	border: solid 1px var(--border);
	opacity: .95;
	z-index: 500;
	margin-top: -1px;
}

#nav > li:hover::after {
	content: '';
	position: absolute;
	top: 100%;
	left: -10px;
	right: -10px;
	height: 8px;
	z-index: 499;
}

#nav li > ul { left: 0px; }

#nav li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
	width: 18em;
	padding: 0px;
}

#nav li hr
{
	margin-top: 6px;
	margin-bottom: 6px;
}

#nav li:hover ul, #nav li.over ul
{
	display: block;
	cursor: default;
}

#nav li.grijs {
	color: var(--text-disabled);
	padding: 2px 10px 3px 10px;
}

#nav li.grijs:hover {
	background-color: inherit;
	color: var(--text-disabled);
}

/* === Autocomplete dropdown (ajax-dynamic-list) === */

#ajax_listOfOptions {
	position: absolute;
	width: 240px;
	height: 250px;
	border: 1px solid var(--border-dark);
	background-color: var(--bg-content);
	color: var(--text);
	text-align: left;
	z-index: 100;
}

#ajax_listOfOptions div {
	margin: 0px;
	padding: 0px;
	cursor: pointer;
}

#ajax_listOfOptions .optionDiv {}

#ajax_listOfOptions .optionDivSelected {
	background-color: var(--accent);
	color: var(--accent-text);
}

#ajax_listOfOptions_iframe {
	background-color: #F00;
	position: absolute;
	z-index: 5;
}

#ajax_listOfOptionsWide {
	position: absolute;
	width: 800px;
	height: 250px;
	overflow: auto;
	border: 1px solid var(--border);
	border-top-color: var(--accent);
	background-color: var(--bg-content);
	color: var(--text);
	text-align: left;
	z-index: 100;
	margin: 2px;
	padding: 1px;
}

#ajax_listOfOptionsWide div {
	cursor: pointer;
	margin: 0px 0px 0px 2px;
	padding: 2px;
}

#ajax_listOfOptionsWide .optionDiv {
	background-color: var(--bg-content);
}

#ajax_listOfOptionsWide .optionDivAccent {
	background-color: var(--bg-row-alt);
}

#ajax_listOfOptionsWide .optionDivSelected {
	background-color: var(--accent);
	color: var(--accent-text);
}

form { display: inline; }

/* === Dark mode form element rendering === */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
	color-scheme: dark;
	border: 1px solid var(--border-medium);
}

[data-theme="dark"] select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="search"]),
[data-theme="dark"] textarea {
	-webkit-appearance: none;
	appearance: none;
}

[data-theme="dark"] input[type="search"] {
	box-shadow: none;
	border-radius: 10px;
}

/* === Tom Select dark mode === */

[data-theme="dark"] .ts-control,
[data-theme="dark"] .ts-control input,
[data-theme="dark"] .ts-dropdown,
[data-theme="dark"] .ts-dropdown .option {
	color: var(--text);
}

[data-theme="dark"] .ts-control,
[data-theme="dark"] .full .ts-control {
	background-color: var(--bg-input);
	border-color: var(--border);
}

[data-theme="dark"] .ts-dropdown {
	background-color: var(--bg-dropdown);
	border-color: var(--border);
}

[data-theme="dark"] .ts-dropdown .active {
	background-color: var(--accent);
	color: var(--accent-text);
}

/* === Dark mode image overrides === */

[data-theme="dark"] .widetable th {
	background: var(--bg-th-header);
}

[data-theme="dark"] th.sort1,
[data-theme="dark"] th.sort2 {
	background: var(--bg-th-sort);
}

[data-theme="dark"] .zoek,
[data-theme="dark"] .login table,
[data-theme="dark"] td.buttonsobsolete {
	background-image: none;
}

[data-theme="dark"] input.button {
	background-image: none;
	background-color: #3a3a40;
	border: 1px solid var(--border-medium);
	border-radius: 4px;
}

[data-theme="dark"] input.buttoninactive {
	background-image: none;
	background-color: #3a3a40;
	border: 1px solid var(--border-medium);
	border-radius: 4px;
	color: var(--text);
	opacity: 0.4;
}

[data-theme="dark"] input.button:active {
	background-image: none;
	background-color: #28282e;
}


/* === List tables === */

.ajax-table {
	--bs-table-bg:             var(--bg-content);
	--bs-table-color:          var(--text);
	--bs-table-border-color:   var(--border);
	--bs-table-hover-bg:       var(--accent);
	--bs-table-hover-color:    var(--accent-text);
	border-bottom: 1px solid var(--border);
}

.ajax-table td,
.ajax-table th {
	border-left:   1px solid var(--border);
	border-right:  0;
	border-top:    0;
	border-bottom: 0;
	white-space:   nowrap;
}

.ajax-table td:last-child,
.ajax-table th:last-child {
	border-right: 1px solid var(--border);
}

.ajax-table th {
	background:    var(--bg-th-header);
	font-size:     11px;
	font-weight:   normal;
	color:         var(--text);
	border-left:   1px solid var(--border);
	border-right:  0;
	border-top:    1px solid var(--border) !important;
	border-bottom: 1px solid var(--border) !important;
	padding:       2px 2px 2px 1px;
}

.ajax-table th.ajaxheader {
	cursor: pointer;
}

.ajax-table tbody tr:hover a {
	color: var(--accent-text);
}

.ajax-table th.sort1,
.ajax-table th.sort2 {
	background:    var(--bg-th-sort);
	border-left:   1px solid var(--border) !important;
	border-right:  0 !important;
	border-top:    1px solid var(--border) !important;
	border-bottom: 1px solid var(--border) !important;
}

/* === Theme toggle button === */

#theme-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 1px solid var(--border);
	color: var(--text);
	cursor: pointer;
	font-size: 13px;
	padding: 1px 6px;
	border-radius: 4px;
	line-height: 1.4;
}

#theme-toggle:hover {
	background-color: var(--bg-header);
}