/*  -------------------------------------------------------------------  */
/*      KLEUREN                                                          */ 
/*  -------------------------------------------------------------------  */
:root {
  --rood: #E50F36;    /* primary-rood      rgb(229,15,54)   */
  --paars: #522776;   /* secundary-paars      rgb(82,39,118)      */
  --dt-rood: rgba(255,204,204,0.4);   /* datatables rood */
  --dt-groen: rgba(204,255,204,0.4);   /* datatables groen */
  --dt-blauw: rgba(204,255,255,0.4);   /* datatables blauw */
  --f-grijs: #e5e5e5;   /* filters grijs */
}
/*  -------------------------------------------------------------------  */
/*     GLOBAL                                                            */ 
/*  -------------------------------------------------------------------  */
@font-face {
  font-family: 'encode sans';
  src: url('../fonts/EncodeSans-Regular.ttf') format('truetype');       /* Dit is hetzelfde lettertype als op www.csgpm.nl  */
  font-weight: normal;
  font-style: normal;
}
#main-body {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "encode sans", arial, verdana;
	font-size: 14px;
	color: rgba(0,0,0,1);
}
main#container {
	padding-left: 1px;
	padding-right: 1px;
}
/*  -------------------------------------------------------------------  */
/*     NAVBAR                                                            */
/*  -------------------------------------------------------------------  */
div#navbar {
	height: 62px;
	width: 100%;
	background-color: var(--paars);  /* paars */
	box-shadow: 0px 2px 8px #888888;
	margin-bottom: 5px;
	padding: 8px 0 8px 12px;
}
div#navbar-toolbar {
	height: 48px;
	display:table;
	vertical-align:middle;
}
div#navbar-toolbar>a.toolbar-icon {
	width: 48px;
	height: 48px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: rgba(255,255,255,1);
	text-decoration: none;
}
div#navbar-toolbar>a.toolbar-text {
	height: 48px;
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	color: rgba(255,255,255,1);
	font-family: "encode sans", arial, verdana;
	font-size: 2rem;
	text-decoration: none;
	padding-left: 16px;
}
div#navbar-toolbar>a.toolbar-icon>i.fa {
	font-weight: normal;
    font-style: normal;
	font-size: 20px;
}
div#navbar-toolbar>a.toolbar-icon>img {
	height: 24px;
}
div#navbar-toolbar>a.logon {
	position: absolute;
	top: 8px;
	right: 12px;
	width:48px;
	height:48px;
	display:table-cell;
	text-align: center;
	padding-top: 15px;
	color: rgba(255,255,255,1);
	text-decoration: none;
}
div#navbar-toolbar>a.logon>i.fa {
	font-size: 22px;
}
/*  -------------------------------------------------------------------  */
/*     LEFT MENU                                                         */ 
/*  -------------------------------------------------------------------  */
.w3-animate-left{position:relative;animation:animateleft 0.3s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

div#menu-left {
	top: 0;
	left: 0;
	position: absolute;
	width: 250px;     /*  DIT IS DE BREEDTE VAN HET LINKER MENU  */
	height: 100vh;
	background-color: #fff;
	color: #000;
	display: none;
	z-index: 10;
}
div#menu-left-header {
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0px 20px;
	background-color: var(--rood);       /* rood */
	color: #fff;
}
.menu-left-item {
	height: 45px;
	line-height: 45px;
	padding: 0px 20px;
	background-color: #fff;
	color: #000;
	font-weight: 500;
}
.menu-left-item:hover {
	background-color: rgba(82,39,118,0.3);       /* paars */
}
div#menu-left > a {
	text-decoration: none;
}
a:hover > .menu-left-item {
	color: rgba(82,39,118,0.7);       /* paars */
}
a > .menu-left-item > .fa {
	height: 45px;
	width: 30px;
	line-height: 45px;
	margin-right: 20px;
	font-size: 24px;
	text-align: center;
	color: rgba(82,39,118,0.7);       /* paars */;
}
.menu-left-item-divider {
	width: 100%;
	height: 1px;
	background-color: rgba(82,39,118,1);       /* paars */
}
/*  -------------------------------------------------------------------  */
/*     PAGINA MENU                                                         */ 
/*  -------------------------------------------------------------------  */
div#pmenu-left {
	top: 0;
	left: 0;
	position: absolute;
	width: 250px;     /*  DIT IS DE BREEDTE VAN HET PAGINA MENU  */
	height: 100vh;
	background-color: #fff;
	color: #000;
	display: none;
	z-index: 10;
}
div#pmenu-left-header {
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0px 20px;
	background-color: rgba(82,39,118,0.8);       /* paars */
	color: #fff;
}
.pmenu-left-item {
	min-height: 45px;
	line-height: 45px;
	padding: 0px 20px;
	background-color: #fff;
	color: #000;
	font-weight: 500;
	word-wrap: normal;
}
.pmenu-left-item:hover {
	background-color: rgba(229,15,54,0.3);       /* rood */
}
div#pmenu-left > a {
	text-decoration: none;
}
a:hover > .pmenu-left-item {
	color: rgba(229,15,54,0.7);       /* rood */
}
a > .pmenu-left-item > .fa {
	height: 45px;
	width: 30px;
	line-height: 45px;
	margin-right: 20px;
	font-size: 22px;
	text-align: center;
	color: rgba(229,15,54,0.7);       /* rood */;
}
.pmenu-left-item-divider {
	width: 100%;
	height: 1px;
	background-color: rgba(229,15,54,1);       /* rood */
}



/*  -------------------------------------------------------------------  */
/*     BODY CONTAINER                                                    */
/*  -------------------------------------------------------------------  */
div#page-container {
	padding: 0;
/*	overflow-y: auto;
	overflow-x: hidden;  */
	border: 0;
/*	background-color: rgba(128,255,255,0.1);   */
/*	min-height: calc(100vh - 118px - 15px);  /*  header = 62px; footer = 56 px;  18px extra  */
	width: 100%;
	margin: 0;
}
div#body-container {
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
/*	background-color: rgba(128,255,255,0.1);   */
	min-height: calc(100vh - 118px - 15px);  /*  header = 62px; footer = 56 px;  18px extra  */
	max-width: 800px;
	margin: 0 auto;
}
div.container {
	max-width: 792px;
	margin: 0 auto;
	padding: 0 4px 10px 4px;
}
/*  -------------------------------------------------------------------  */
/*     FOOTER                                                            */ 
/*  -------------------------------------------------------------------  */
div#page-footer {
	border-top: 2px solid rgba(229,15,54,1);       /* rood   #dc002d */
	background-color: rgba(82,39,118,1);       /* paars */
	color: rgba(255,255,255,1);
	display: block;
	height: 56px;
	padding: 8px 20px;
	margin: 10px 0 0 0;
	box-shadow: 0px -2px 8px #888888;
}
div#home-link {
	display: inline;
	height: 100%;
	float: left;
	padding: 5px 0 0 0;
}
div#copyright {
	display: inline;
	height: 36px;
	float: right;
	padding: 10px 0 0 0;
	color: rgba(212,212,212,1);
	font-size: 70%
}
a#footer-link {
	color: rgba(255,255,255,1);
	font-size: 1.25rem;
}
a#footer-link>img {
	border: 0; height: 24px
}
/*  -------------------------------------------------------------------  */
/*     BODY                                                              */ 
/*  -------------------------------------------------------------------  */
h1, h2, h3 {
	color: rgba(229,15,54,1);       /* rood */
	margin: .67em 0 .3em 0;
	font-family: "encode sans", arial, verdana !important;
	font-weight: 300;
	line-height: 1.15;
}
h1 {
	font-size: 1.3em;
}
h2 {
	font-size: 1.1em;
}
h3 {
	font-size: 1.05em;
}
h3.comment {
	display: inline-block;
	font-size: 16px;
	text-transform: uppercase;
}
div.row {
	max-width: 792px;
	margin: 0 auto;
}
button.btn-icon-only, a.btn-icon-only {
	height: 22px;
	width: 22px;
	padding: 1px;
}
button.actie-button, a.actie-button {
    height: 36px;
	min-width: 64px;
	display: inline-flex;
	color: #fff;
	line-height: 36px;
	background-color: rgba(229,15,54,1);   /* rood */
	padding: 0 16px 0 16px;
	font-weight: 500;
	font-size: 90%;
    letter-spacing: 0.08929em;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
	vertical-align: middle;
	margin: 8px auto;
	box-shadow: 3px 3px 5px #888888;
}
button.actie-button:hover, a.actie-button:hover {
	background-color: rgba(82,39,118,0.6) !important;       /* paars   0.8*/
    border-color: rgba(82,39,118,1);       /* paars */
}	
.actie-button i.fa {
    font-size: 15px;
	margin-top: 10px;
	margin-right: 4px;
	vertical-align: middle;
}
button.btn-success {
	background-color: rgba(53,170,71,1) !important;    /* groen  */
}
button.btn-primary {
	background-color: rgba(66,139,202,1) !important;    /* blauw  */
}
button.btn-primary:hover {
	background-color: rgba(50,118,177,1) !important;    /* blauw  */
}
button.icon-only {
	min-width: 36px;
	padding-right: 0;
	padding-left: 12px;
}
.cImg {
	border: 0;
	height : 18px;
	width: 18px;
}
input[type="checkbox"] {
	height: 18px;
	width: 18px;
}
/*  -------------------------------------------------------------------  */
/*     DATATABLES                                                        */ 
/*  -------------------------------------------------------------------  */
.cFont {
	color: #fff;
	font-size: 1px;
}
table.dataTable tbody td {
    padding: 2px 5px !important;
}
.filters {
	color: #333333;
	border: 1px solid #e5e5e5;
	width: 100%;
	font-weight: normal;
}
label.control-label {
	font-weight: bold;
}
input.paginate_input {
	max-width: 30px;
}
.dataTables_filter input {
    padding: 0px 5px !important;
}
button.dt-button.btn-primary {
    display: inline-block;
/*    padding: 6px 12px;     */
    padding: 3px 6px;
    margin-bottom: 0;
	margin-right: 1px;
	margin-left: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;

    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

button.dt-button.btn-primary:hover,
button.dt-button.btn-primary:focus,
button.dt-button.btn-primary.focus {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
/*  -------------------------------------------------------------------  */
/*     TABELLEN                                                              */ 
/*  -------------------------------------------------------------------  */
th.dt-center, td.dt-center {
	text-align: center !important;
}
th.dt-right, td.dt-right {
	text-align: right !important;
}
th.dt-left, td.dt-left {
	text-align: left !important;
}