/*
onze groen nieuw : 	#7bb7ca
onze paars 			#750050;

nieuw blauw: #0066ff
3892F2	lichtblauw
3882F2
076DF2
0554F2
0000FF
0008CD
283583	donkerblauw
f2f2f2	lichtgrijs
DAFF10	geel

*/
:root {
  --buttonbar	: #3882F2;
  --titelbar	: #283583;
  --groepeer	: #9faabd;
}

@font-face {
    font-family	: 'PAfont';
    src			: url('/fonts/OscineRegular.ttf');
}

html, body, #outer {
    height		: 100%;
    width		: 100%;
    margin		: 0px;
}
body {
	background	: #ffffff;
	font-size	: 8pt;
	font-family	: verdana;
	margin		: 0px;
	padding		: 0px;
	border		: 0px;
}
big {
	color			: #33A02B;
	font-weight		: bold;
}
strong {
	color			: var(--titelbar);
	font-weight		: bold;
}

h1 { 
	font			: normal 15pt trebuchet ms, arial; 
	text-align		: left;
	margin-bottom	: 3px;
	color			: var(--titelbar);
}
h2 { 
	font			: bold 12pt verdana; 
	text-align		: left;
	color			: var(--titelbar);
	margin-bottom	: 3px;
}
h4 { 
	font			: 10pt verdana; 
	text-align		: left;
	color			: var(--titelbar);
}
h6 { 
	font			: 8pt verdana; 
	text-align		: center;
	color			: var(--titelbar);
}
.formzoek tr {
	vertical-align	: middle;
}
/* --------------------------------------------------------------*/
img {
	border			: 0px;
}
	
/* ---------------------  FORM TABLE -----------------------------*/
td.label {
	background-color: var(--titelbar);
	color			: White;
	/* width:20%;
    min-width:200px;
	*/
	padding-left: 5px;
	min-width:150px;
	white-space: nowrap;
	}
td.label a{
	color			: white;
	font-weight		: bold;
	}
td.veld {
	background-color	: #eeeff0;
	padding				: 0px;
	width				: 90%;
	}
td.zk {
		width:auto;
}
	
td.veld a.labelknop{
	background-color	: var(--buttonbar);
	color				: white;
	padding				: 2px 5px 2px 5px;
	border-radius		: 3px;
}

td.hr {
	background-color: var(--titelbar);
	color			: white;
	margin			: 2px 0px 2px 0px;
	height			: 22px;
	text-align		: center;
	line-height		: 22px;
	vertical-align	: middle;
}
/* --------------------------------------------------------------*/
	
#aanmaakdatum {
	float		: right;
	display		: inline;
	font-size	: 9px;
	color		: var(--buttonbar);
}

hr {
	color			: var(--titelbar);
}

img.knop {
	border			: 0px;
	text-align		: right;
	width			: 30px;
	height			: 30px;
	margin-left		: 10px;
}

/* --------------------------------------------------------------*/
a:link, 
a:visited { 
	text-decoration			: none; 
}

a.label:link, 
a.label:visited { 
	text-decoration			: underline; 
}
a.label { 
	text-decoration			: underline; 
}

/* --------------------------------------------------------------*/
input {
	font			: 8pt verdana;

}
input[type="text"] {
	margin-top		: 2px;
	height			: 90%;
}
input[type="checkbox"] {
	margin-top		:5px;
	vertical-align	: middle;
}
input[type="radio"] {
	vertical-align		: middle;
	line-height			: 20px;
}
input[type="button"] {
	background-color: var(--buttonbar);
	color			: white;
	padding-top		: 3px;
	padding-bottom	: 3px;
	border-radius	: 9px;
	border			: 0px;
}

input[type="submit"] {
	background-color: var(--titelbar);
	color			: white;
	padding-top		: 3px;
	padding-bottom	: 3px;
	border-radius	: 9px;
	border			: 0px;
}

input[type="file22"] {
    display			: none;
}

input[type="button"].zkdatbtn{
	width			: 110px;
	margin-right	: 30px;
	margin-top		: 5px;
	background-color: var(--titelbar);
	color			: white;
	border-radius	: 3px;
}
.date-input-css {height: 13px;width:70px;}

.custom-file-upload {
      background		: #var(--titelbar);
      border			: 0px;
	  border-top		: 1px solid #ccc;
	  border-left		: 1px solid #ccc;
	  -moz-border-radius: 3px;
	  -webkit-border-radius	: 3px;
	  border-radius		: 9px;
	  color				: white;
	  display			: inline-block;
	  font-size			: 11px;
	  text-decoration	: none;
	  cursor			: pointer;
	  margin-bottom		: 20px;
	  line-height		: normal;
	  padding			: 3px 3px; 
}

textarea {
	font	: 8pt verdana;
	display	: block;
}

select {
	font			: 8pt verdana;
	height			: 20px;
	background-color: white;
}
/* --------------------------------------------------------------*/
table.browser {
	font-family		: verdana;
	font-size		: 8pt;
	cursor			: pointer;
	background-color: #E6E6E6;
	empty-cells		: inherit;
}

table.browser td{
	padding			: 0pt;
	border-collapse	: inherit;
	border-style	: inset;
	border			: 1px solid white;
	empty-cells		: inherit;
}

table.browser tr:hover{
	background-color: #CCE7CA;	
}

table.browser td a{
	color			: #000;
	display			: block;
	text-decoration	: none;
	empty-cells		: inherit;
/*	width: 100% */
}

thead.fixedHeader td {
	background-color: var(--buttonbar);
	font-size		: 10pt;
	color			: #FFF;
	padding-top		: 2px;
	padding-bottom	: 2px;
	padding-left	: 0px;
	margin			: 0px;
	text-align		: left;
}

thead.fixedHeader a, 
thead.fixedHeader a:link, 
thead.fixedHeader a:hover, 
thead.fixedHeader a:visited {
	color			: #FFF;
	display			: block;
	text-decoration	: none;
	width			: 100%;
}

tfoot.fixedHeader td {
	background		: #C01060;
	border-left		: 0px solid #EB8;
	border-right	: 0px solid #B74;
	border-top		: 0px solid #EB8;
	font-size		: 10pt;
	font-weight		: normal;
	padding			: 0px 0px;
	text-align		: right
}

tr.fixedHeader td {
	background	: var(--buttonbar);
	border		: 0px;
	font-size	: 10pt;
	font-weight	: normal;
	padding		: 0px 0px;
	text-align	: right
}
/* --------------------------------------------------------------*/
tr.hovered {background-color: #CCE7CA;	}
tr.sel{background-color		: #CCE7CA;
}
th.tot {
	font			: bold 8pt Arial, Helvetica, sans-serif;
	color			: white;
	background-color: #var(--titelbar);
	margin-top		: 12px;
	margin-bottom	: 2px;
	border			: 1px solid white;
}

td.tot {
	font			: bold 8pt Arial, Helvetica, sans-serif;
	color			: white;
	background-color: var(--titelbar);
	margin-top		: 12px;
	margin-bottom	: 2px;
	border			: 1px solid white;
}



.tab {
	font-family		: verdana,arial,helvetica; 
	font-size		: 8pt; 
	line-height		: 11pt; 
	font-weight		: normal;
	position		: relative; 
	text-align		: center; 
	border			: 0px; 
	height			: 28px;
	top				: 0px;
	width			: calc(7%); /* The trick is here! */
	margin-left		: 0px; 
	margin-right	: 3px;
	cursor			: pointer;
	background-color: var(--buttonbar);
	color			: white;
	padding			: 5px 5px 0px 5px;
	float			: left;
	border-top-right-radius	: 0px;
	border-top-left-radius	: 0px;
	box-sizing		: border-box; 
	overflow: hidden;
	display: inline-block; /* for inline elements e.g. span, strong, em etc */
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tab:hover{
	background-color: var(--titelbar);

}
.tab a {
	text-decoration	: none;
	color			: white;
	display			: block;
	padding			: 0px; 
	margin			: 0px; 
	padding-top		: 0px; 
	height			: 22px;
}

.tabsel {
	height				: 30px;
	background-color	: var(--titelbar);
}

.subtabbar {
	background-color	: var(--titelbar); 
	position			: absolute;
	top					: 32px;
	height				: 7px;
}
.panel {
	font-family			: arial,helvetica; 
	font-size			: 10pt; 
	border				: 0px solid var(--titelbar); 
	left				: 0px; 
	top					: 42px;
	margin				: 0px; 
	padding				: 0px; 
	background-color	: white;
	display				: none;
}

.vul {
	position:absolute; 
	border			: 0px; 
	left			: 0px; 
	top				: 38px;
	margin			: 0px; 
	padding			: 0px; 
	background-color: var(--buttonbar);
}

tr.sel{	
	background-color: #aaa;
	color			: white;
}

div.num {
	text-align		: right;
	padding-right	: 4px; 
}
div.eur {
	text-align		: right;
	margin-right	: 4px;
}
div.eur::before {content			: "\20AC ";}

/* ---------------  AUTO SUGGEST  ------------------------ */
.autocomplete-suggestions { 
	border				: 1px solid #999; 
	background			: #FFF; 
	cursor				: default; 
	overflow			: auto;
	-webkit-box-shadow	: 1px 4px 3px rgba(50, 50, 50, 0.64); 
	-moz-box-shadow		: 1px 4px 3px rgba(50, 50, 50, 0.64); 
	box-shadow			: 1px 4px 3px rgba(50, 50, 50, 0.64); 
}
.autocomplete-suggestion 			{ padding		: 2px 5px; white-space			: nowrap; overflow: hidden; }
.autocomplete-no-suggestion 		{ padding		: 2px 5px;}
.autocomplete-selected 				{ background	: #F0F0F0; }
.autocomplete-suggestions strong 	{ font-weight	: bold; color: var(--titelbar); }
                                                                                       
/* ---------------  KNOPPEN ------------------------ */
.PAknop {
	cursor					: pointer;
	background-color		: var(--buttonbar);
	border					: 2px solid white;

	color					: white;
	text-align				: center;
	vertical-align			: middle;
	line-height				: 28px;
	font-size				: 18pt;
	font-family				: Helvetica, sans-serif;
	font-weight				: normal;
	
	height					: 28px; 
	width					: 28px;

	border-radius			: 17px;
	-moz-border-radius		: 17px;
	-webkit-border-radius	: 17px;
	float					: right;
	margin					: 3px 0px 2px 5px;
	
	background-position		: center;
	background-size			: 32px;
}
.PAknopnofloat {
	cursor			: pointer;
	background-color: var(--buttonbar);
	border			: 2px solid white;

	color			: white;
	text-align		: center;
	vertical-align	: middle;
	line-height		: 28px;
	font-size		: 18pt;
	font-family		:Helvetica, sans-serif;
	font-weight		: normal;
	height			: 28px; 
	width			: 28px;

	border-radius			: 17px;
	-moz-border-radius		: 17px;
	-webkit-border-radius	: 17px;
	margin					: 1px 0px 1px 5px;
	
	background-position		: center;
	background-size			: 32px;
}
.PAknop:hover {
    background-color		: var(--titelbar);
}

.PAknop:focus {
	outline: none;
    background-color		: var(--titelbar);
}

.PAtext100 {
	width: 100px;
}

.PAknop.tekst {
	width			: auto;
	padding			: 0px 2px 0px 2px;
	text-align		: center;
	vertical-align	: middle;
	line-height		: 28px;
	font-size		: 18pt;
	font-family		: Helvetica, sans-serif;
	font-weight		: normal;

}

.PAknop.dag {background-image			: url(../img/applicatie/icon_dag.png);}
.PAknop.dup {background-image			: url(../img/applicatie/icon_dupliceer.png);}
.PAknop.euro {background-image			: url(../img/applicatie/icon_euro.png);}
.PAknop.excel {background-image			: url(../img/applicatie/icon_excel.png);}
.PAknop.info {background-image			: url(../img/applicatie/icon_info.png);}
.PAknop.kalender {background-image		: url(../img/applicatie/kalgroot.png);}
.PAknop.label {background-image			: url(../img/applicatie/printlabel.png);}
.PAknop.lijst {background-image			: url(../img/applicatie/lijst.png);}
.PAknop.maand {background-image			: url(../img/applicatie/icon_maand.png);}
.PAknop.nieuw {background-image			: url(../img/applicatie/icon_nieuw.png);}
.PAknop.opslaan {background-image		: url(../img/applicatie/icon_opslaan.png);}
.PAknop.print {background-image			: url(../img/applicatie/icon_print.png);}
.PAknop.refresh {background-image		: url(../img/applicatie/icon_refresh.png);margin-left			: 30px;}
.PAknop.verwijder {background-image		: url(../img/applicatie/icon_verwijder.png);}
.PAknop.vandaag {background-image		: url(../img/applicatie/icon_vandaag.png);}
.PAknop.volgende {background-image		: url(../img/applicatie/icon_vooruit.png);}
.PAknop.vorige {background-image		: url(../img/applicatie/icon_terug.png);}
.PAknop.week {background-image			: url(../img/applicatie/icon_week.png);}
.PAknop.word {background-image			: url(../img/applicatie/icon_word.png);}
.PAknop.zoek {background-image			: url(../img/applicatie/search-glass.png);float			: left;}

/******** http://www.fileformat.info/info/unicode/char/search.htm *********/

.PAknop.mail::before {content			: "\2709";}
.PAknop.check::before {content			: "\2714";}
.PAknop.check {
		font-size	: 14pt;
		font-weight	: bold;
		padding		: 0px;
		}
.PAknop.copy::before {content			: "\274F";}
.PAknop.question::before {content			: "\003F";}

/*---------------- formulier knoppen ------------------------*/
.PAknop.spring {
	line-height	: 18px;
	font-size	: 12px;
	height		: 16px; 
	width		: 16px;
	margin-right: 4px;
	margin-left	: 0px;
}
.PAknop.spring::before {content			: "i";}

.PAknop.verplicht {
	line-height		: 18px;
	font-size		: 12px;
	height			: 16px; 
	width			: 16px;
	color			: white;
	background-color: var(--buttonbar);
	border			: 2px solid white;
	margin-right	: 8px;
}
.PAknop.verplicht::before {content			: "!";}

.knop_small{
	vertical-align			: text-bottom;
	cursor					: pointer;
	background-color		: var(--titelbar);
	color					: white;
	border-radius			: 19px;
	-moz-border-radius		: 19px;
	-webkit-border-radius	: 19px;
}

.knop_small:hover {
    background-color		: var(--titelbar);
}

/*------------------------ popup ------------------------------*/
.popupdiv {
	background-color: #fff;
	border-radius	: 10px 10px 10px 10px;
	box-shadow		: 0 0 25px 5px #999;
	color			: #111;
	display			: none;
	min-width		: 500px;
	padding			: 25px
}
.popupdiv .button {
	background-color	: var(--buttonbar);
	border-radius		: 10px;
	box-shadow			: 0 2px 3px rgba(0,0,0,0.3);
	color				: #fff;
	cursor				: pointer;
	display				: inline-block;
	padding				: 10px 20px;
	text-align			: center;
	text-decoration		: none;
}
.popupdiv .button.small{
		border-radius	: 15px;
		float			: right;
		margin			: 22px 5px 0;
		padding			:6px 15px
		}
.popupdiv .button:hover{background-color: #1e1e1e}
.popupdiv .button>span{font-size: 84%}
.popupdiv .button.b-close,.button.bClose{
	border-radius	: 7px 7px 7px 7px;
	box-shadow		: none;
	font			: bold 131% sans-serif;
	padding			: 0 6px 2px;
	position		: absolute;
	right			: -7px;
	top				: -7px
}

.popupdiv input {
	border-radius:5px;
}

.popuptitle {
	font-size	: 16px;
	font-weight	: bold;
}
.popuptext {
	font-size	: 12px;
}

/* ---------------   ------------------------ */
div.bbar {
    background-color: var(--buttonbar);
	display			: block;
    color			: white;
    border			: 0px;
	height			: 35px;
	width			: 100%;
}
table.bbar {
    background-color: var(--buttonbar);
    color			: white;
    border			: 0px;
}
table.bbar td {
    border	: 0px;
    margin	: 0px;
    }
h1#paginatitel {
	float			: left;
	padding-left	: 10px;
	vertical-align	: middle;
	margin			: 0px;
	color			: white;
}
/* -----------------------------------  tableone ---------------------------------------------------- */
table.tableone {
    width: 100%;
}

table.tableone tbody,
table.tableone thead,
table.tableone tfoot { display			: block;}

table.tableone tbody {
	height			: 20px;
	overflow-y		: auto;
    overflow-x		: hidden;
}

/* -----------------------------------  table PAui ---------------------------------------------------- */
table.PAui {
    border-collapse	: collapse;
    border-spacing	: 0;
    border			: 0px solid white;
	font-size		: 8pt;
    font-family		: verdana;
}
table.PAui thead{
	background-color			: var(--titelbar);
}

table.PAui thead {
    height			: 20px;
    line-height		: 20px;
	font-weight		: normal;
	font-size		: 10pt;
	color			: white;
	margin			: 0px;
	text-align		: left;
	vertical-align	: top;
	height			: 20px;
}

/* ---------------  TR  -------------------------------- */
table.PAui tbody tr {
	border-bottom	: 1px solid white;
	background-color: #eeeff0;
	width			: 100%;
}

table.PAui tbody tr:hover{
	background-color: #3892F2;
	color			: white;
}
table.PAui tbody tr.sel {
    background-color: #3892F2;
    color			: white;
}
/* ---------------  TD  -------------------------------- */

table.PAui td {
	border: 1px solid white;
}

table.PAui tbody td:last-child, thead th:last-child, tfoot th:last-child {
    border-right			: none;
}

table.PAui tbody td div {
    height		: 15px;
    overflow	: hidden;
    /* white-space			: nowrap; */
	/* text-overflow: ellipsis; */
}
/* ---------------  THEAD  -------------------------------- */
table.PAui thead a, thead a:link, thead a:visited {
	color			: white;
	display			: block;
	text-decoration	: none;
}


/* ---------------  TFOOT  -------------------------------- */
table.PAui tfoot{
	background-color: var(--titelbar);
	color			: white;
}
table.PAui tfoot tr th {
    height			: 20px;
    line-height		: 20px;
}


/* ---------------  GROEPREGEL  -------------------------------- */
table.tableone tr.groepregel {
	display			: table-row;
}
table.tableone tr.groepregel:hover {
	cursor			: pointer;
}
table.tableone tr.groepregel td {
	background-color: var(--groepeer);
	color			: white;
	font-size		: 1.1em;
	font-weight		: bold;
	padding			: 4px;
}