@import url('https://fonts.googleapis.com/css?family=Raleway|Montserrat|Quicksand|Lato|Kufam|Cambay');

:root {
	/* --main-light-color: #f1c6f5;
	--main-dark-color: #8f0857;  	
	--main-hover-color: #faf60c; */

	/* --main-light-color: #B1F8D6;
	--main-dark-color: #139187; 
	--main-hover-color: #15EBA2;  
	--main-datatab-color: #e7e8e9;  */

	/* Green 
	--main-light-color: #d4a6c1;
	--main-dark-color: #542741;
	--main-hover-color: #5fb18f;  */
	
	--main-light-color: #29Bfd8;
	--main-dark-color: #0e3f48;
	--main-hover-color: #b8e9f2;  

	/* Orange   */
	/* --main-light-color: #ffb74c;
	--main-dark-color: #995b00;
	--main-hover-color: #000000; */
	--main-datatab-color: #e7ebf3; 
	--main-splitter-color: #aebbd6;
  }

/* Vanaf hier nieuw */

.form-control {
	height: 25px;
}

label {
	margin-top: 0px;
	margin-bottom: -2px;
}

th { 
	font-size: 14px; 
}
td {
	font-size: 12px; 
	padding: 0px;
}

.even{
	background-color: var(--main-hover-color);
	/* #f5ebf1; */
}

.odd{
	background-color: white;
}

.table {
    border-spacing:0 0px;
}

.toolbar-checkbox {
	width: 150px; 
	height: 26px !important; 
	background-color: var(--main-light-color);
	color: white; 
	border-color: var(--main-dark-color);
	font-size: 12px;
}

.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
    padding: 1px;
}

.btn-detail {
	border: 1px solid var(--main-dark-color);
	padding: 2px 2px;
	background-color: var(--main-light-color);
	color: white;
	border-radius: 2;
	transition: .2s;
	height:25px;
	width: 25px;
} 

.td-detailbtn {
	width: 25px;
}

/* Tot hier nieuw */

#events {
	margin-bottom: 1em;
	padding: 1em;
	background-color: #f6f6f6;
	border: 1px solid #999;
	border-radius: 3px;
	height: 100px;
	overflow: auto;
}

body {
	font: 300 14px/1.4 Raleway;
	letter-spacing: 1.5px;
	color: var(--main-dark-color);
	background-color: #fff;
}

.review {
	font: 300 12px/1.0 Cambay;
	letter-spacing: 1.0px;
	color: black;
	background-color: white;
}

.box {
	margin-left: auto;
	margin-right: auto;
}

.box-border {
	border:1px solid black;
	padding: 10px;  
	border-collapse: collapse;      
}

.rcbox-border {
	border:1px solid black;
	padding: 4px;  
	border-collapse: collapse;      
}

body.waiting * {
    cursor: progress;
}

h3, h4 {
	margin: 10px 0 10px 0;
	letter-spacing: 10px;      
	font-size: 20px;
	color: var(--main-dark-color);;
}

.dt-body-right {
	text-align: right;
}

.extratop {
	margin: 125px 0 10px 0;
}

.myHead {
	color: var(--main-dark-color);
	background-color: var(--main-light-color);
}

.navbar-brand {
	width: 100px;
	left: 5px;
	top: -1px;
	position: relative;
	padding: 0;
}	

.navbar {
	font-family: Raleway;
	margin-bottom: 0;
	background-color: #fff;
	border: 5;
	font-size: 16px !important;
	letter-spacing: 2px;
	opacity: 1;
	margin-top: 0px;
	height:100px;
	background-color: #fff;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
	padding-top: 25px;
}

/* .navbar-collapse.in {
	padding-top: 50px;
	overflow-y: auto;
	background-color: #ddd;
	opacity: 1;
} */
/* .navbar-collapse.out {
	padding-top: 50px;
	overflow-y: auto;
	background-color: #f00;
	opacity: 1;
} */

.navbar li a, .navbar .navbar-brand { 
	color: var(--main-dark-color) !important;
}

.navbar-nav li a:hover {
	color: var(--main-light-color) !important;
	background-color: var(--main-dark-color) !important;
}

.navbar-text {
	padding-top: 25px;
	color: var(--main-dark-color) !important;
}

.navbar-nav li.active a {
	color: var(--main-dark-color) !important;
	background-color: var(--main-light-color) !important;
}	

footer {
	background-color: var(--main-light-color);
	color: var(--main-dark-color);
	padding: 0px;
}

.btn-default {
	border: 1px solid var(--main-dark-color);
	padding: 2px 20px;
	background-color: var(--main-light-color);
	color: var(--main-dark-color);
	border-radius: 2;
	transition: .2s;
	height:25px;
	word-spacing: -8px;
} 

.btn-std {
	border: 1px solid var(--main-dark-color);
	padding: 2px 20px;
	background-color: var(--main-light-color);
	color: var(--main-dark-color);
	border-radius: 2;
	transition: .2s;
	height:25px;
}

.dropdown-toggle {
	font: 300 16px/1.8 Raleway;
	letter-spacing: 1px;
}

.dropdown-menu {
	font: 300 16px/1.8 Raleway;
	letter-spacing: 1px;
}

.btn-default {
	font: 300 px/1.8 Raleway;
	font-size: 14px;
	letter-spacing: 1px;
}

.form-control {
	font: 300 px/1.8 Raleway;
	font-size: 16px;
	letter-spacing: 1px;
}

.btn-default.ingrid {
	border: 0px solid var(--main-dark-color);
	padding: 5px 5px;
	color: #000;
	border-radius: 10;
	transition: .2s;
} 

.btn-std.ingrid {
	border: 0px solid var(--main-dark-color);
	padding: 5px 5px;
	color: #000;
	border-radius: 10;
	transition: .2s;
} 

.btn-default:hover, .btn:focus {
	border: 1px solid var(--main-light-color);
	background-color: var(--main-dark-color);
	color: var(--main-light-color);
}	

.btn-std:hover, .btn:focus {
	border: 1px solid var(--main-light-color);
	background-color: var(--main-dark-color);
	color: var(--main-light-color);
}

.thumbnail {
	padding: 0 0 15px 0;
	border: none;
	border-radius: 0;
}

.thumbnail p {
	margin-top: 15px;
	color: #555;
}

.siteColor{
	background-color: var(--main-light-color);
	color: var(--main-dark-color);
}

.modal {
    overflow-y: auto !important;
}

.modal-title{
	text-align: center;
}

.table-tabs{
	background-color: var(--main-datatab-color);
}

.hr-layout{
	height:4px;
	border-width:0;
	color: var(--main-splitter-color);
	background-color: var(--main-splitter-color);
}

.data-tab-button .active a {
	background-color: blue;
	color: red;
}

.readonlylabel {
	padding: 8px;
	font-family: Raleway;
	background-color: #e7e7e7; 
	color: black;
	border-radius: 5px
}

thead input {
	width: 100%;
}

  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: white !important;
	border: none;
	background-color: #585858;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
	/* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top, #585858 0%, #111 100%);
	/* FF3.6+ */
	background: -ms-linear-gradient(top, #585858 0%, #111 100%);
	/* IE10+ */
	background: -o-linear-gradient(top, #585858 0%, #111 100%);
	/* Opera 11.10+ */
	background: linear-gradient(to bottom, #585858 0%, #111 100%);
	/* W3C */
  }

  .dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
	display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 20;
	right: 20;
  } 
  
  .autocomplete-items div {
	padding: 5px;
	cursor: pointer;
	background-color: #fff; 
	border-bottom: 1px solid #d4d4d4; 
  }
  
  /*when hovering an item:*/
  .autocomplete-items div:hover {
	background-color: var(--main-light-color); 
  }
  
  /*when navigating through the items using the arrow keys:*/
  .autocomplete-active {
	background-color: var(--main-light-color) !important; 
	color: #000000; 
  }