:root
{
  --bg-color-main:       #858585;
  --bg-color-sub:        #474747;
    
  --bg-color-field:      #F5F5F5;
  --txt-color-field:     #000066;

  --bg-color-title:      var(--bg-color-field);
  --txt-color-title:     #000000;
  --bg-color-title-inv:  #2c3e50;
  --txt-color-title-inv: #FCE8BE;

  --border-color-main:   var(--bg-color-main);
  --a-href-color:        #004266;
  --bg-color-footer:     var(--bg-color-field);
  --txt-color-footer:    var(--txt-color-field);

  --bg-color-header:     #e2e2e2;;
  --txt-color-header:    var(--txt-color-footer);

  --bg-color-row:        #FFFFFF;
  --txt-color-row:       #000000;
  --bg-color-row-inv:    #ebebeb;
  --txt-color-row-inv:   #000000;

}

/* color way changed for the new look */
body, a, li
{
	font-size: 9pt;
	font-family: Arial, helvetica, sans-serif;
	text-decoration: none;
}
/*sidebar */

td
{
	font-size: 9pt;
	font-family: Arial, helvetica, sans-serif;
	text-decoration: none;
	vertical-align: top;
}



form
{
	margin: 0px;
	padding: 0px;
}

input, textarea
{
	background-color: var(--bg-color-field);
    /* font-size: 8pt; */
    border: 1px solid var(--border-color-main);
    border-radius: 2px;
}

input.jQuerySelect {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bg-color-field)),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) calc(1em + -4px),
    calc(100% - 10px) calc(1em + -4px),
    calc(100% - 2em) 0.1em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

.textarea_fit
{
	overflow:visible;
	background-color: var(--bg-color-field);
	font-size: 8pt;
	border-style: solid;
	border-width: 1px;
}

select
{
	font-family: Arial, helvetica, sans-serif;
    color: var(--txt-color-field);
    border: 1px solid var(--border-color-main);
    border-radius: 2px;
    background-color: var(--bg-color-field);

    box-shadow: inset 0 1px 0 rgba(var(--border-color-main),0.7);
    /*height: 15px;*/
    cursor: pointer;
    outline: none;

}

.input_checkbox
{
	background-color: var(--bg-color-sub);
	font-size: 9pt;
	border-style: solid;
	border-width: 0px;
}

.input_radio
{
	background-color: var(--bg-color-sub);
	font-size: 9pt;
	border-style: solid;
	border-width: 0px;
}

.titel
{
  font-size: 18px;
  font-weight: bold;
  color: var(--txt-color-title);
  padding-left: 20px;
  background-color: var(--bg-color-title);
  position: relative;
  z-index: 1;
}

.titel_inverse
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    font-style:	normal;
    font-weight: bold;
    text-decoration: none;
    color: var(--txt-color-title-inv);
    padding: 2px;
    background-color: var(--bg-color-title-inv);
}

.titel_groot
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28pt;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    color: var(--bg-color-sub);
    padding: 2px;
}
.titel_groot_inverse
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28pt;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    color: var(--txt-color-title-inv);
    padding: 2px;
    background-color: var(--bg-color-title-inv);
}

td[background*="img_head_01.jpg"],
td[background*="img_head_02.jpg"] {
  position: relative;
  background-size: cover;
}

td[background*="img_head_01.jpg"]::after,
td[background*="img_head_02.jpg"]::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-color: rgba(0, 0, 0, 0.4); /* semi-transparante donkere overlay */
  z-index: 0;
}
td[background*="logo_klein.jpg"] {
  padding-left: 10px;
}



.veld
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: var(--txt-color-field);
  background-color: var(--bg-color-field);
  padding: 2px;
}

#tableSortering2 td.sortable a {
  color: #000066;
}

.row
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: var(--txt-color-row);
  background-color: var(--bg-color-row);
  padding: 2px;
}

.row_inverse
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: var(--txt-color-row-inv);
  background-color: var(--bg-color-row-inv);
  padding: 2px;
}

.row_radio
{
    background-color: var(--bg-color-sub);
    border-width: 0px;
}

.row_inverse_radio
{
  background-color: var(--bg-color-main);
  border-width: 0px;
}

.row_selected
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: var(--bg-color-sub);
  background-color: #b6b6b6;
  padding: 2px;
}

.row_selected_radio
{
  background-color: #dddddd;
  border-width: 0;
}

.label
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  color: #000066;
  background-color: var(--bg-color-sub);
  padding: 2px;
}

.normaal
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: #000066;
  padding: 2px;
}

.field_title
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: #000066;
  padding: 2px;
}

.inverse
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	padding: 2px;
	background-color: #000066;
}



a,
.dummy_link
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: var(--a-href-color);
}

.toolbar_footer
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  color: var(--txt-color-footer);
  background-color: var(--bg-color-footer);
  padding: 2px;
}

.status_header
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  color: var(--txt-color-header);
  background-color: var(--bg-color-header);
  padding: 2px;
}
 
.status_header fieldset
{
  font-weight: normal;
  color: #000066;
  text-align:left;
}

.status_footer
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  color: black;
  background-color:  transparent, var(--bg-color-main);
  padding: 2px;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #000066;
	background-color: #f4f6f8;
}

.readonly
{
  color: #000066;
    background-color: var(--bg-color-sub);
}

.klein
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #000066;
    padding: 2px;
}

.login_text
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13pt;
    color: #666666;
    font-weight: bold;
}


input:focus, textarea:focus, select:focus, .colorEEEEEE:focus {
  border:1px #000066 solid;
  background-color: #c97c001f
}

.colorEEEEEE{
  background-color:#eeeeee;
}

.fieldErrorStyle{
  border-color:#FF0000;
}

.news_style{
  border:1px solid #000066;
  border-radius: 10px;
  margin-top:20px;
  background-color: #EEEEEE;
  width:750px;
}

.news_box{
  margin-left:auto;
  margin-right:auto;
  padding-top:11px;
}


#login-buttons, #news_style{
    width:740px;
    height:250px;
    margin-right:10px;
    float:left;
}

input:disabled,textarea:disabled, select:disabled{
  border-color:#CCCCCC;
}

.debugMsg
{
  font-size: 14px;
  color: #000000;
  padding-right: 20px;
  font-weight: 500;
}

/* ====== Toolbar button modernisering ====== */



.status_footer{
  color:black;
}

/* Zorg dat de knoppenstructuur zelf (die tabellen bevat) niet breekt */
td.toolbar {

  white-space: nowrap;
}

div.btn, span.btn_center {
  display: inline-block;
}

/* Verberg overbodige spans en tables als mogelijk */
td.toolbar table {
  border-collapse: collapse;
  border: none;
  margin: 0;
  padding: 0;
}

td.toolbar table td {
  padding: 0;
  border: none;
}

/* Optioneel: zorg dat icon-achtige spaties (btn_left, btn_right) minder opvallen */
span.btn_left, span.btn_right {
  width: 4px; /* klein vlakje */
  display: inline-block;
  background-color: transparent;
}

td.toolbar td {
  border: none;
  padding: 0;
  margin: 0;
}



/* ====== Extra fix: ruimte tussen de knoppen ====== */

/* Verwijder extra marges en padding in de toolbar-tabellen */
.toolbar table,
.toolbar tr,
.toolbar td {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}