/* System Tool CSS */



body{
    font: 75% "Trebuchet MS", sans-serif;
    margin: 15px 50px 25px; 
}
.demoHeaders {
    margin-top: 2em;
}
#dialog-link {
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    position: relative;
}
#dialog-link span.ui-icon {
    margin: 0 5px 0 0;
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
}
#icons {
    margin: 0;
    padding: 0;
}
#icons li {
    margin: 2px;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    float: left;
    list-style: none;
}
#icons span.ui-icon {
    float: left;
    margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
    position: absolute;
}

  /* Breedte selectmenu */
/* Waar gebruikt, uitgezet, te algemeen gedefinieerd
select {
    width: 200px;
}
*/

  /* --------------------------------*/
.Headers1 {
    margin-top: 2em;
  }
  .lokHeaders {
    margin-top: 1em;
  }
  .Headers2 {
    margin-top: 0em;
}
.marked {
    background-color: #FFF4F4;
    border: 1px red solid;
}
.pointer{
    background-color: lightyellow;
    border: 1px red solid;
}
.container{
    display:table;
    width:90%;
    border-collapse: collapse;
}
.heading {
   display:table-row;
   /*background => Dynamic CSS*/
   text-align: center;
   line-height: 25px;
   font-size: 14px;
   color:#fff;
}
.table-row {
    display:table-row;
    text-align: left;       /* center*/
}
.table-row-data {
 display:table-row;
 text-align: left;       /* center*/
}
.table-row-data-hl {
    background-color: #F5F5F5  /*rgb(247, 247, 247);*/
}
.table-col-left {
    display:table-cell;
    text-align: left;
    border: 1px solid #CCC;
    vertical-align: middle;
    padding: 5px 5px 5px 5px;
}
.table-col-center {
    display:table-cell;
    text-align: center;
    border: 1px solid #CCC;
    vertical-align: middle;
    padding: 5px 5px 5px 5px;
}
.table-col-button {
    display:table-cell;
    text-align: right;
    vertical-align: middle;
    padding: 5px 5px 5px 5px;
}
.ui-textfield {
    font: inherit;
    color: inherit;
    background: none;
    text-align: inherit;
    outline: none;
    cursor: text;
}

.PowerdBy {
    text-align: right;
    padding-right: 10px;
    color: #CCC;
}
a.PowerdByLink:link {
    color:#9E9E9E;
    text-decoration: none;
}
a.PowerdByLink:visited {
    color:#9E9E9E;
}
a.PowerdByLink:hover {
    /*color => Dynamic CSS*/
    font-weight: bold;
    font-size:150%;
    text-decoration: underline;
}
a.PowerdByLink:active {
    color:#9E9E9E;
    text-decoration: none;
}
.VersionNumberLeft {
    text-align: left;
    padding-left: 10px;
    color: #CCC;
}
.VersionNumberRight {
    text-align: right;
    padding-right: 10px;
    color: #CCC;
}


/* Header tabs - selection */
.TabHeader {
    -webkit-margin-before: -1em;
    /* -webkit-margin-after: 2em; */
    /*color => Dynamic CSS*/
    font-weight: bolder;
}


/* Classes used input fields, no UI button objects */
label, input {
    display:block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

/* ====== Invoervelden nieuw ================================================================ */

.my-text-field,
.my-text-field-small {
    margin-bottom:2px;
    width:400px;
    padding: .4em;
    margin-top:6px
}

.my-text-field-small {
    width:160px;
}

.my-date-field {
    margin-top: 6px;
    width: 160px;
    text-align: inherit;
    /*font: inherit;*/
}

.my-select-field {
    margin-top: 6px;
    width: 160px;
    text-align: inherit;
    /*font: inherit;*/
}

.my-checkbox-field-small {
  display:inline;
  vertical-align: -2px;
}

.my-inline-label {
  display:inline
}

.DivGroep {
  padding: .6em .6em .6em .6em;
  border: 1px solid #d8dcdf;
  border-radius: 6px;
  background: rgba(238, 238, 238, 0.3);
  color: #004276;    /* #2e2e2e; */
  margin-top: 12px;
}


/* === Validation =============================*/

.ValidationError {
   border-color: #E56154;
    border-width: 2px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT1JREFUeNpi/P//PwMpgImBRMACY/x7/uDX39sXt/67cMoDyOVgMjBjYFbV/8kkqcCBrIER5KS/967s+rmkXxzI5wJiRSBm/v8P7NTfHHFFl5mVdIzhGv4+u///x+xmuAlcdXPB9KeqeLgYd3bDU2ZpRRmwH4DOeAI07QXIRKipYPD35184/nn17CO4p/+cOfjl76+/X4GYAYThGn7/g+Mfh/ZZwjUA/aABpJVhpv6+dQUjZP78Z0YEK7OezS2gwltg64GmfTu6i+HL+mUMP34wgvGvL78ZOEysf8M1sGgZvQIqfA1SDAL8iUUMPIFRQLf+AmMQ4DQ0vYYSrL9vXDz2sq9LFsiX4dLRA0t8OX0SHKzi5bXf2HUMBVA0gN356N7p7xdOS3w5fAgcfNxWtn+BJi9gVVBOQfYPQIABABvRq3BwGT3OAAAAAElFTkSuQmCC);
    background-position: right top;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
}

/*
input:required:invalid, input:focus:invalid {
    background-image: url(http://www.the-art-of-web.com/images/invalid.png);
    background-position: right top;
    background-repeat: no-repeat;
  }
input:required:valid {
    background-image: url(http://www.the-art-of-web.com/images/valid.png);
    background-position: right top;
    background-repeat: no-repeat;
  }
*/

input:required:invalid, input:focus:invalid {
    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);*/
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT1JREFUeNpi/P//PwMpgImBRMACY/x7/uDX39sXt/67cMoDyOVgMjBjYFbV/8kkqcCBrIER5KS/967s+rmkXxzI5wJiRSBm/v8P7NTfHHFFl5mVdIzhGv4+u///x+xmuAlcdXPB9KeqeLgYd3bDU2ZpRRmwH4DOeAI07QXIRKipYPD35184/nn17CO4p/+cOfjl76+/X4GYAYThGn7/g+Mfh/ZZwjUA/aABpJVhpv6+dQUjZP78Z0YEK7OezS2gwltg64GmfTu6i+HL+mUMP34wgvGvL78ZOEysf8M1sGgZvQIqfA1SDAL8iUUMPIFRQLf+AmMQ4DQ0vYYSrL9vXDz2sq9LFsiX4dLRA0t8OX0SHKzi5bXf2HUMBVA0gN356N7p7xdOS3w5fAgcfNxWtn+BJi9gVVBOQfYPQIABABvRq3BwGT3OAAAAAElFTkSuQmCC);
    background-position: right top;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
  }
/*
  input:required:valid {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);

    background-position: right top;
    background-repeat: no-repeat;
  }
*/



/* Invoervelden - oud */
input.text {
    margin-bottom:2px;
    width:400px;
    padding: .4em;
    margin-top:6px
}
input.text_small {
    margin-bottom:2px;
    width:150px;
    padding: .4em;
    margin-top:6px
}
.input_blok {
    float: left;
    margin-right: 10px;
}
.input_regel {               /* opheffen float */
    clear: both;
}
.ui-selectmenu-button {
    margin-top: 6px;
}
.margin_top {                /* zelf in HTML toevoegen */
    margin-top: 6px;
}
fieldset {
    padding:0;
    border:0;
    margin-top:25px;
}
.ui-menu {
    width: 200px;
}

/* Format fields in tab */

.tab_fields label, .tab_fields input {
    display:inline-block;
}

.tab_fields label {
    width:150px; /* or whatever size you want them */
}

/* spaties behouden in DataTable */
.data a, .data span, .data tr, .data td {
    white-space: pre;
}


/* ====== Datatable hover row color (td.sorting_1 first col) ======= */
#tbLijstDeelnemers tr.even:hover {
    background-color: lightyellow;
}
#tbLijstDeelnemers tr.even:hover td.sorting_1 {
    background-color: lightyellow;
}
#tbLijstDeelnemers tr.odd:hover {
    background-color: lightyellow;
}
#tbLijstDeelnemers tr.odd:hover td.sorting_1 {
    background-color: lightyellow;
}
/* Overwrite for selected row */
#tbLijstDeelnemers tr.even.selected:hover {
    background-color: #b0bed9;
}
#tbLijstDeelnemers tr.even.selected:hover td.sorting_1{
    background-color: #b0bed9;
}
#tbLijstDeelnemers tr.odd.selected:hover {
    background-color: #b0bed9;
}
#tbLijstDeelnemers tr.odd.selected:hover td.sorting_1{
    background-color: #b0bed9;
}


.StartDisplayNone {
    display: none;
}


/* === DataTables - ColumnFilter Add-in ===================*/

.number_range_filter {
    width: 20px;
}
.date_range_filter {
    width: 5.5em;
}
.search_init {
    color: #999999;
}
/* Uitloijnen select-filter in footer */
.select_filter {
    margin-top: 13px;
    height: 21px;
}
/* label en invoerveld Search op een regel */
/* Ongedaan maken eerdere Css regel: label, input {display:block; .....} */
.dataTables_filter input {
    display: inline;
}