* {
	margin: 0;
	padding: 0;
}

.clear {
	clear: both;
}

body {
	font-family: 'Lato', sans-serif;
	background: #f6f6f6;
}

table td .invisible {
	visibility: visible !important;
	color: transparent !important;
}

/***************************
*********** TEXT  **********
***************************/

h1, .h1 {
	font-size: 2rem;
}

@media (max-width: 767.98px) {

	h1, .h1 {
		font-size: 1.5rem;
	}
	
	h2, .h2 {
		font-size: 1.3rem;
	}
	
	h3, .h3 {
		font-size: 1.2rem;
	}

}

/***********************************
*********** LOGIN SCHERM  **********
***********************************/

#loginbox {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	background: #06D6A0;
    padding: 1.5rem;
    max-width: 100%;
    width: 360px;
    display: block;
    border-radius: 4px;
    color: #162207;
    box-shadow: 0 0 200px -28px #000;
}

#loginbox h1 {
	text-align: center;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem; /*10px compensatie voor padding van labels*/
	border-bottom: 1px solid #fff;
}

#loginbox label {
	font-size: 16px;
	display: block;
}

#loginbox input[type='text'], #loginbox input[type='password'] {
	width: 100%;
}

#loginbox input[type='submit'] {
	padding: .6rem 1.2rem;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 16px;
    border-radius: 1px;
}

/**********************************
********* ERROR MELDINGEN  ********
**********************************/

.error, .warning, .succes {
	position: relative;
	padding: 14px 20px;
	margin: 10px 0;
	border-radius: 2px;
}

.error p, .warning p, .succes p {
	padding: 5px 0;
    line-height: 20px;
    padding-left: 50px;
    margin-bottom: 0;
}

.error:before, .warning:before, .succes:before {
	font-family: 'EntypoRegular';
    font-size: 50px;
    /*
    float: left;
    margin-right: 20px;
    height: 100%;
    width: 50px;
    */
    line-height: 1;
    position: absolute;
    top: -2px;
    left: 20px;
	color: #fff;
}

.warning a,
.error a,
.succes a {
	color: #fff;
	text-decoration: underline;
}

.error {
	background: #ff5252;
	color: #fff;
}

.error:before {
	content: "[";
}

.warning {
	background: #FCA311;
	color: #fff;
}

.warning:before {
	content: "c";
}

.succes {
	background: #35d235;
}

.succes:before {
	content: "`";
}

/**********************************
************ APPLICATIE ***********
**********************************/

#container {
	/*margin: 0 auto;*/
	/*width: 900px;*/
	/*width: 1200px;*/
	background: #eee;
}

@media (min-width: 1200px) {
	
	.container {
	    max-width: 100%;
	}
	
}

@media (min-width: 1700px) {
	
	.container {
	    max-width: 1700px;
	}
	
}

#header {
	/*width: 820px;*/
	padding: 40px;
	background: #eee;
}

#header img {
	float: left;
	width: 201px;
	height: 101px;
	margin-right: 40px;
}

#header h1 {
	/*float: left;*/
	/*text-align: center;*/
	margin-bottom: 10px;
}

#header p {
	float: left;
	font-size: 18px;
}

@media (max-width: 991.98px) {

	#header {
		position: absolute;
		top: 0;
		padding: 1rem 2.5rem;
	}
	
	#header h1 {
		font-size: 1.2rem;
	}
	
	#header img {
		display: none;
	}

}

@media (max-width: 767.98px) {

	#header {
		padding: 2rem 0 1rem 0;
		max-width: 200px;
	}
	
	#header img {
		float: none;
		margin: 0 0 1rem 0;
	}

}

nav#app-menu {
	padding: 0;
	background-color: #fff;
}

nav#app-menu .navbar-nav {
	background-color: #fff;
}

nav#app-menu .navbar-toggler {
	border-color: #06D6A0;
}

nav#app-menu .navbar-nav.mr-auto .nav-item {
	margin-right: 3px;
}

nav#app-menu .navbar-collapse.show .navbar-nav.mr-auto .nav-item,
nav#app-menu .navbar-collapse.collapsing .navbar-nav.mr-auto .nav-item {
	margin-right: 0;
}

nav#app-menu .navbar-collapse {
	position: relative;
	z-index: 1002;
}

nav#app-menu .nav-link {
	padding: .75rem 1rem;
    display: block;
    color: #000;
    background: #06D6A0;
    -webkit-transition: opacity .5s ease;
	transition: opacity .5s ease;
}

nav#app-menu .nav-link:hover {
	opacity: .6;
}

@media (max-width: 991.98px) {
	
	nav#app-menu {
		background-color: transparent;
		margin: 0 40px;
		padding-top: 1.5rem;
	}
	
	nav#app-menu .navbar-collapse {
		margin-top: 1rem;
	}

}

@media (min-width: 992px) and (max-width: 1199.98px) {
	
	nav#app-menu .nav-link {
		padding: .5rem .75rem;
	}

}

@media (max-width: 767.98px) {
	
	nav#app-menu {
		background-color: transparent;
		margin: 0;
		padding: 1rem 0 0 0;
	}

}

ul#nav {
	list-style: none;
	background: #eee;
	display: block;
	/*width: 900px;*/
	width: 1200px;
}

ul#nav li {
	display: inline-block;
	background: #06D6A0;
}

ul#nav li.logout {
	float: right;
}

ul#nav li a {
	padding: 12px 20px;
	display: block;
	text-decoration: none;
	color: #000;
}

#content {
	/*width: 820px;*/
	padding: 40px;
	min-height: 200px;
}

#content .calendarbar {
    display: block;
    float: none;
}

@media (max-width: 991.98px) {

	#content .calendarbar {
	    padding-top: 1.5rem;
	    border-top: 2px solid #ddd;
	    margin-top: 2.9rem;
	}

}

#content .page-description {
	overflow: hidden;
	display: block;
	width: 100%;
}

#content .calendarbar h2 {
	display: block;
	line-height: 40px;
}

#content .calendarbar h3 {
	display: inline-block;
	float: right;
	line-height: 42px;
	margin: 0 15px;
}

#content .calendarbar .buttons a {
	display: inline-block;
	color: black;
	text-decoration: none;
	font-family: 'EntypoRegular';
	font-size: 50px;
	margin-top: -6px;
}

#content div.value {
	background: yellow;
	float: left;
	/*width: 342px;*/
	width: 250px;
	height: 180px;
	margin: 15px;
}

#content div.value p {
	text-align: center;
	line-height: 40px;
}

#content div.value span.value {
	font-size: 70px;
	text-align: center;
	display: block;
	line-height: 120px;
}

@media (max-width: 767.98px) {
	
	#content {
		margin: 1rem 0;
		padding: 0 0 20px 0;
	}
	
	#content .calendarbar h3 {
		float: none;
	}

}

.contractEnded {
	color: #999;
}

.btn {
	/*
	padding: 10px 15px 10px 5px;
	display: block;
	width: auto;
	float: left;
	*/
	margin: 10px 10px 10px 0 !important;
}

.btn-primary {
	background-color: #06D6A0;
	color: #000;
    border: 0 none;
    -webkit-transition: opacity .5s ease;
	transition: opacity .5s ease;
}

.btn-primary:hover {
	background-color: #06D6A0;
	color: #000;
    border: 0 none;
    opacity: .6;
}

.btn-default {
	background: #797979;
	color: white;
	text-decoration: none;
	padding: 10px 15px;
}

.btn-approve {
	background: #446915;
	color: white !important;
	text-decoration: none;
	padding: 10px 15px;
}

.btn-reject {
	background: #a5010b;
	color: white !important;
	text-decoration: none;
	padding: 10px 15px;
}

/*
.table-responsive.table-scrolling {
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=1 );
    background-size: 50px 100%;
    background-repeat: no-repeat;
    background-position: right;
}
*/

.floatThead-container {
	overflow-y: hidden;
}

table.spaceOnTheRight {
	/*padding-right: 150px !important;*/
	border-spacing: 0px;
}

.options_column {
	/*padding-left: 50px !important;*/
	text-align: right;
}

.options_column a {
	display: inline !important;
	color: #444 !important;
}

#content table .button_column {
	min-width: 350px;
}

#content table .button_column a.btn {
	display: inline-block !important;
}

#content table .button_column a {
	color: #0000EE;
}

th.rotate {
  /* Something you can count on */
  height: 170px;
  white-space: nowrap;
  /*background: #ECF8DD !important;*/
  padding: 0 7px !important;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 35px;
  margin-bottom: -22px;
}
th.rotate > div > span {
  border-bottom: 2px solid #ECF8DD;
  padding: 8px 5px;
  display: block;
  width: 250px;
  text-align: left;
}

td.competence_score {
	font-size: 18px;
	text-align: center;
}

td.competence_score:last-of-type {
	text-align: left;
	padding-left: 18px !important;
}

.white_border th {
	border-right: 2px solid #ECF8DD;
}

.evalation_open td {
	background: #7C876E;
	font-weight: bold;
}

.evalation_open td a {
	padding: 0 !important;
}

.wideTextarea {
	width: 800px !important;
}

#footer {
	width: 100%;
	margin: 20px auto;
	color: #444;
}

@media only screen and (min-width: 1600px) {

	ul#nav {
		width: 1550px;
	}

	#content div.value {
		width: 337px;
	}
	
}

/**********************************
************* TABELLEN ************
**********************************/

#content table {
	margin: 0;
	width: 100%;
	font-size: 14px;
}

#content table th {
	padding: 1rem 1rem 1rem 1rem;
	background: #06D6A0;
}

#content table.compact th {
	padding: 10px 5px;
}

#content table tr.titleRow td {
	padding: 0;
}

#content table tr.titleRow td h3 {
	padding: 1rem 1rem .65rem 1rem;
}

#content table.compact td {
	padding: 5px;
}

#content table.compact tr.titleRow td {
	border: 0 none;
}

#content table.compact tr.titleRow h3 {
	padding: 10px 5px 5px 5px;
}

#content table th.half {
	width: 42%;
}

/*#content table th.employee {*/
/*	display: none;*/
/*}*/

#content table tr > td:last-of-type {
	border-right: 0 none;
}

#content table td {
	padding: .25rem 1rem .25rem 1rem;
	vertical-align: middle;
	overflow: hidden;
	background-color: #f6f6f6;
}

#content table tr > th:last-of-type,
#content table tr > td:last-of-type {
	background-color: #eee;
    border-color: #eee;
}

#content table tr:hover {
	background-color: rgba(0,0,0, .05) !important;
}

#content table th.rotate {
	vertical-align: middle;
}

#content table .titleRow {
	background-color: #eee;
}

#content table .titleRow td {
	background-color: #444 !important;
}

#content table.compact td {
	border: 1px solid #ddd;
}

#content table a {
	display: block;
	margin: 0;
	padding: 10px 10px;
	text-align: center;
    color: #fff;
}

#content table.compact a,
#content table.compact span {
	padding: 10px 3px;
}

#content table.compact span {
	display: block;
}

#content table td span.admin {
	font-family: EntypoRegular;
	float: left;
	display: block;
	overflow: hidden;
	color: #000000;
	width: 25px;
	text-align: center;
	font-size: 40px;
	line-height: 30px;
	margin: -8px 12px 0 5px;
	text-decoration: none;
}

#content table td.onetenth {
	width: 14% !important;
	text-align: center;
}

#content table td.onetenth a {
	display: block;
}

#content table td.small {
	width: 8% !important;
}

#content table td:last-child {
	width: 35%;
}

#content table td.currentday {
	background: #839ddf;
}

#content table td.currentday a.invisible {
	color: #839ddf;
}

#content table td.doesnotexist {
	background: #444;
}

#content table td a.verzuim-ziek {
	color: #444;
	font-weight: bold;
}

#content table tr:nth-child(odd) a.invisible {
	color: #BEE788;
}

#content table tr:nth-child(even) {
	background: transparent;
}

#content table tr:nth-child(even) a.invisible {
	color: #ECF8DD;
}

#content table tr.currentweek {
	background: #83c1df;
}

#content table tr td.currentday a.invisible {
	color: #839ddf;
}

/* Admin view: An employee has to work today */
#content table td.workToday {
	background: #ccc;
}
#content table td.workToday a.invisible {
	color: #ccc;
}

#content table .currentlyLoggedIn td a.invisible {
	color: #5f931d;
}

#content table .currentlyLoggedIn td.workToday a.invisible {
	color: #ccc;
}

/* Employee view: This employee has to work today; this user is not logged in user */
#content table.employee td.workToday {
	background: #ccc;
}

#content table.employee tr a.invisible {
	color: #5f931d;
}

/* Employee must work today; this employee is currently logged in */
#content table.employee .currentlyLoggedIn td.workToday {
	background: #000;
}
#content table.employee td.workToday a.invisible {
	color: #000;
}

#content table tr td.workToday.currentday {
	background: #8690AB !important;
}

#content table tr td.workToday.currentday a.invisible {
	color: #8690AB;
}

#content table.employee tr td.workToday.currentday {
	background: #8690AB;
}

#content table.employee tr td.workToday.currentday a.invisible {
	color: #8690AB;
}

#content table tr.total {
	background: #a9b29f;
}

#content table tr.total td {
	font-weight: bold;
	padding: 10px 5px;
	background: #a9b29f;
}

#content table tr.total td:last-of-type {
	background-color: #eee;
}

#content table a.exists {
	color: #00ff00;
}

#content table a.icon {
	font-family: EntypoRegular;
	/*
	float: left;
	display: block;
	*/
	display: inline;
	overflow: hidden;
	color: #000000;
	width: 25px;
	text-align: center;
	font-size: 40px;
	line-height: 28px;
	margin: -8px 12px 0 0;
	padding: 10px 2px 10px 8px;
	text-decoration: none;
}

#content .headingtable h3, #content .headingtable table {
	float: left;
}

#content table.absentvalues {
	padding: 0;
	margin: 0 0 5px;
	width: 40%;
	float: right;
	font-size: 12px;
	text-align: center;
}

#content table.absentvalues th {
	padding: 2px 10px;
	background: #bce784 !important;
}

#content table.absentvalues th.context {
	width: 50% !important;
}

#content table .mutationovertime {
	background: #f1c40f;
	color: #fff;
	text-align: center;
}

#content table .mutationflex {
	background: #2ecc71;
	color: #fff;
	text-align: center;
}

#content table .mutationvacation {
	background: #e74c3c;
	color: #fff;
	text-align: center;
}

#content table .mutationvacation.requestOpen,
#content table .mutationvacation.requestApproved,
#content table .mutationvacation.requestRejected,
#content table .mutationovertime.requestOpen,
#content table .mutationovertime.requestApproved,
#content table .mutationovertime.requestRejected,
#content table .mutationflex.requestOpen,
#content table .mutationflex.requestApproved {
	text-decoration: none;
	border-radius: 50%;
	font-size: 22px;
	line-height: 20px;
	width: 40px;
}

#content table .mutationabsent {
	background: #3498db;
	color: #fff;
	text-align: center;
}

#content table.legenda {
	float: left;
	width: auto;
	min-width: 600px;
}

#content table.legenda_small {
	float: left;
	width: auto;
	min-width: 400px;
}

#content .titleRow td {
	background: #444;
	color: #fff;
}

#content .titleRow td h3 {
	padding: .85rem 1rem .5rem 1rem;
    line-height: 1;
    font-size: 16px;
}

#content .currentlyLoggedIn td {
	background: #5f931d;
	color: #fff;
}

#content .currentlyLoggedIn .contractEnded {
	color: #999;
}

#content .table-vrij-aanvraag table a.btn {
	display: inline-block;
}

#content .table-vrij-aanvraag table a.btn-link {
	color: #007bff;
}

/***********************************
************ FORMULIEREN ***********
***********************************/

#content form {
	margin: 10px 0;
}

#content form label {
	width: 250px;
	height: 28px;
	display: inline-block;
}

#content form label.required:before {
	content: "*";
	color: red;
	font-size: 18px;
}

#content form input[type='text'], 
#content form input[type='password'] {
	width: 220px;
	padding: 3px;
	font-size: 16px;
}

#content form input[type='password'].password {
	margin-top: 10px;
}

#content select {
	padding: 3px;
	width: 230px;
}

#content select.onethird {
	width: 75px;
}

#content select.onefourth {
	width: 51px;
}

#content textarea {
	width: 221px;
	height: 150px;
	padding: 3px;
	font-size: 16px;
}

#content span.totaldays {
	margin-left: 5px;
	/*display: inline-block;
	background: red;*/
}

#content a.cancel {
	margin-left: 8px;
}

/***********************************
************    PRINT    ***********
***********************************/

body.print {
	background: #fff;
	-webkit-print-color-adjust:exact;
}

body.print h1 {
	margin-bottom: 15px;
}

body.print h2 {
	margin: 5px 0;
}

.printTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	page-break-inside:auto
}

.printTable, .printTable th, .printTable td {
	border: 1px solid black;
	padding: 3px;
}

.printTable td.weekend, .printTable th.weekend {
	background: #ccc;
}

.printTable td.worksToday {
	background: #85CC28;
}

.printTable td.currentRequest {
	background: #000;
	color: #fff;
}

.printTable td.worksNormallyButNotToday {
	background: #000;
	color: #fff;
}

.breakPage {
	/*page-break-inside: avoid;*/
	page-break-after: always;
}

.breakPage:first-of-type {
	page-break-after: avoid;
}

.sticky_column table tr {
	/*position: relative;*/
}

.sticky_column .headcol {
	/* height: 53px; */
}

.sticky_column table > tbody tr:not(.titleRow) td:first-of-type {
	position: absolute;
	width: 85px;
}

.sticky_column table>tbody tr:is(.currentlyLoggedIn) td:first-of-type {
	position: absolute;
	width: 85px;
	height: 53px;
}