#tablecontent, #tablecontent div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

#tablecontent .slick-row .active
{    
	background: #d9edf7;
}

#subtablecontent, #subtablecontent div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

#subtablecontent .slick-row .active
{    
	background: #d9edf7;
}

/* Bootbox close button */
.modal-dialog {
	position: relative;
	width: auto;
}

.modal-content {
	position: relative;
	background-color: #ffffff;
	border: 1px solid #999999;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	outline: 0;
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important; 
}

.modal-header {
	padding: 13px;
	background-color: #5e5e5e;
}

.modal-header .close {
	color: white;
	opacity: 1;
	margin-top: -2px;
}

.modal-title {
	margin: 0;
	line-height: 1.42857143;
	color: white;
}

@media print {
	body * {
		visibility: hidden;
	}
	.printbaar, .printbaar * {
		visibility: visible;
	}
	.printbaar {
		position: absolute;
		left: 0;
		top: 0;
		margin-left: -300px;
		width: 1500px;
	}
}

@media (min-width: 768px) {
	.navbar-form {
		width: auto;
		border: 0;
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.modal-dialog {
		width: 600px;
		margin: 0px auto;
	}
	.modal-content {
		-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	}
	.modal-sm {
		width: 300px;
	}
}

@media (max-width: 767px) {
	.navbar-form {
		width: auto;
		border: 0;
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.modal-dialog {
		width: 400px;
		margin: 0px auto;
	}
	.modal-content {
		-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	}
	.modal-sm {
		width: 300px;
	}
}

/* Cel-inhoud kantelen */
.slick-header-columns-right > .slick-header-column.geroteerd > .slick-column-name {
	display: block;
	white-space: nowrap;
	width: 1.5em;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.leslogoklein {
	/* The container has to have a predefined dimension though */
	position: relative;
	border-radius: 4px;
}

.leslogo img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: 200px !important;
	object-fit: contain !important;
}

.orange {
	border-right-color: silver;
	border-right-style: solid;
	background: orange;
	color: black;
}

.pink {
	border-right-color: silver;
	border-right-style: solid;
	background: pink !important;
	color: black;
}

.lightblue {
	border-right-color: silver;
	border-right-style: solid;
	background: lightblue;
	color: black;
}

.purple {
	border-right-color: silver;
	border-right-style: solid;
	background: purple;
	color: white;
}

.yellow {
	border-right-color: silver;
	border-right-style: solid;
	background: yellow;
	color: black;
}

.burlywood {
	border-right-color: silver;
	border-right-style: solid;
	background: burlywood;
	color: black;
}

.chocolate {
	border-right-color: silver;
	border-right-style: solid;
	background: chocolate;
	color: white;
}

.coral {
	border-right-color: silver;
	border-right-style: solid;
	background: coral;
	color: black;
}

.gray {
	border-right-color: silver;
	border-right-style: solid;
	background: gray;
	color: white;
}

.salmon {
	border-right-color: silver;
	border-right-style: solid;
	background: salmon;
	color: white;
}

.notsolightyellow {
	border-right-color: silver;
	border-right-style: solid;
	background: #ffe5ea !important;
	color: black;
}

.lightyellow {
	border-right-color: silver;
	border-right-style: solid;
	background: lightyellow !important;
	color: black;
}

.lightgreen {
	border-right-color: silver;
	border-right-style: solid;
	background: lightgreen;
	color: black;
}

.lightred {
	border-right-color: silver;
	border-right-style: solid;
	background: tomato !important;
	color: black;
}

.darkgreen {
	border-right-color: silver;
	border-right-style: solid;
	background: darkgreen;
	color: white;
}

.groen {
	border-right-color: silver;
	border-right-style: solid;
	background: green;
	color: white;
}

.green {
	border: 3px solid black !important;
	background: green !important;
	color: white;
	height: 20px !important;
}

.mogelijk {
	border: 3px dotted black;
	height: 20px !important;
}

.red {
	border: 3px solid black !important;
	background: red !important;
	color: white;
	height: 20px !important;
}

.toegewezen {
	border-right-color: silver;
	border-right-style: solid;
	background: #ffe5ea;
	color: black;
}

.filler-left {
	border-left-color: black;
	border-left-width: 2px;
	margin-left: -1px;
}

.filler-right {
	border-right-color: black;
}

.readonly {
	border-left-color: silver;
	border-left-style: solid;
	border-right-color: silver;
	border-right-style: solid;
	background: oldlace;
	color: black;
	margin-left:-1px;
}


input.editor-text {
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	background: transparent;
	outline: 0;
	padding: 0;
	font-size: 14px;
}

select.editor-lookup {
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	background: transparent;
	outline: 0;
	padding: 0;
	font-size: 14px;
}

.cell-title {
	font-weight: bold;
}

.cell-effort-driven {
	text-align: center;
}

.cell-pointer {
	cursor: pointer;
}

.cell-selection {
	border-right-color: silver;
	border-right-style: solid;
	background: #f5f5f5;
	color: gray;
	text-align: right;
	font-size: 14px;
}

.slick-row.selected .cell-selection {
	background-color: transparent; /* show default selected row background */
}

.slick-cell.frozen:last-child, .slick-header-column.frozen:last-child {
	border-right: 1.5px dotted darkblue !important;
}

.slick-cell.decimal {
	text-align: right;
}

.slick-cell.selected {
	background-color: lightyellow;
	opacity: 100;
	color: black;
}

.decimal {
	text-align: right;
}

.highlight {
	color: #fff !important;
}

.helder {
	color: yellow !important;
	font-weight: bold;
}

.knipper {
	// color: red !important;
	font-weight: bold;
	animation: blinker 1s linear infinite;
	// filter: invert(100%);
}

.melding {
	color: white !important;
	font-weight: bold;
}

.fout {
	color: red !important;
	font-weight: bold;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

[data-notify="progressbar"] {
	margin-bottom: 0px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 5px;
}

.ui-datepicker-title {
	color: #555;
}

.open> ul>li.hz {
	display: inline-flex !important;
}

.dim {
	animation: blinker 1s linear infinite;
	/* background: black !important; */
	/* color: white !important; */
	/* filter: invert(100%); */
}

.draai {
-webkit-transform: rotate(90deg);	/* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(90deg);	/* IE 9 */
	transform: rotate(90deg);	/* Firefox 16+, IE 10+, Opera */
}

.btn-fit {
	margin-bottom: 0px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 22px;
	border: 0;
	margin: 0;
	outline: 0;
	font-size:15px;
	padding-top: 0px !important;
	padding-left: 3px !important;
        text-align: left !important;
	border-radius: 0px !important;
}

.select-fit {
	padding-left: 0px !important;
}

body {
	overflow: hidden !important;
}

body.subwin {
	background-color: transparent !important;
}

.slick-group-title[level='0'] {
	font-weight: bold;
}

#roosterresult {
	overflow-y: auto;
	height: 200px;
}

.inforows {
	border-right-color: silver;
	border-right-style: solid;
	border-bottom-style: solid;
	background: lightgreen;
	color: black;
	font-weight: bold;
	animation: none;
}

#instellingsnummers {
	overflow-y: auto;
	height: 300px;
	margin-bottom: 0px;
}

#instellingsnummers div {
	animation: scrollSlowly 10s infinite;
	animation-direction: alternate;
	animation-iteration-count: 2;
}

#instellingsnummers:hover div {
	animation: none;
}

.instellingsnummers {
	height: 100px;
}

#releasenotes {
	overflow-y: auto;
	height: 300px;
	margin-bottom: 0px;
}

#releasenotes div {
	animation: scrollSlowly 10s infinite;
	animation-direction: alternate;
	animation-iteration-count: 2;
}

#releasenotes:hover div {
	animation: none;
}

.menukader {
	padding-right: 5px;
	padding-left: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
	background: #f0f0f0;
	border-width:0px;
	border-style:solid;
	border-color:#d0d0d0; /* black; */
	box-shadow: 0 0 10px 0 rgba(100, 100, 100, 1.00) !important;
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important; 
}

.kader {
	border-width:0px;
	border-style:solid;
	border-color:#d0d0d0; /* black; */
	box-shadow: 0 0 10px 0 rgba(100, 100, 100, 1.00) !important;
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important; 
	background-color: lightyellow;
}

.hoeken {
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important; 
}

/* Max editor space in bootbox */
#helptekst {
	margin-bottom: 0px;
	overflow-y: auto;
	height: 600px;
}

#texteditor {
	margin-bottom: 0px;
}

.note-editor {
	margin-bottom: 0px;
}

/* Summernote tweak */
/* Geen close-button (X) in submodal */
.modal .in .close {
	display: none !important;
}

/* Summernote tweak */
/* Geen resize bar en handle */
.note-status-output {
	display: none !important;
}

.note-resizebar {
	display: none !important;
}

@media (max-width: 1428px) {
	#snelknoppen {
		display: none;
	}
}

@media (max-width: 768px) {
	.tekst {
		display: none;
	}
	.ikoon {
		display: block;
	}
}

@media (min-width: 769px) {
	.tekst {
		display: block;
	}
	.ikoon {
		display: none;
	}
}

.dropdown-menu {
	height: auto;
	max-height: 300px;
	overflow-x: hidden;
}

.slick-cell.active {
	border: 3px solid black !important;
	height: 20px !important;
	color: black;
}

.menu-item {
  margin-left: -8px;
  padding-left: 8px;
}

.selectinput {
	z-index: 100;
}

.dropdown-item.active {
	color: white !important;
	background-color: blue !important;
}

.swup-transition-fade {
	transition: 0.4s;
	opacity: 1;
}

html.is-animating .swup-transition-fade {
	opacity: 0;
}

.flash-button {
	background: #31b12a;
	color: #ffffff;

	animation-name: flash;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	//Firefox 1+
	-webkit-animation-name: flash;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	//Safari 3-4
	-moz-animation-name: flash;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
}

@keyframes flash {  
	0% { opacity: 1.0; }
	50% { opacity: 0.2; }
	100% { opacity: 1.0; }
}

//Firefox 1+
@-webkit-keyframes flash {  
	0% { opacity: 1.0; }
	50% { opacity: 0.2; }
	100% { opacity: 1.0; }
}

//Safari 3-4
@-moz-keyframes flash {  
	0% { opacity: 1.0; }
	50% { opacity: 0.2; }
	100% { opacity: 1.0; }
}

.alert-fixed {
	position:fixed; 
	top: 36px; 
	left: 0px; 
	width: 100%;
	z-index: 9999; 
	border-radius:0px
}

.vet {
	font-weight: bold;
}

tab {
	padding-left: 1em;
}

.bottom-menu {
	position: fixed;
	bottom: 19px;
	left: 7px;
}

.bottom-card {
	margin-left: 4px;
	padding-right: 8px;
}

// TODO: voor uitklapmenu's
.mxenu-card {
	margin-right: 20px !important;
	margin-left: 16px !important;
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important; 
}

.navbar-fixed-side li.has-divider-grijs {
	margin-top: 1.6rem;
}

.navbar-fixed-side li.has-divider-grijs:before, .navbar-fixed-side li.nav-user:before {
	content: '';
	height: 0.1rem;
	position: absolute;
	left: -1.6rem;
	right: 0;
	top: -0.8rem;
	background: #c0c0c0;
}

.strike {
	display: block;
	text-align: center;
	overflow: hidden;
	white-space: nowrap; 
}

.strike > span {
	position: relative;
	display: inline-block;
}

.strike > span:before, .strike > span:after {
	content: '';
	position: absolute;
	top: 50%;
	width: 9999px;
	height: 0.1rem;
	background: #c0c0c0;
}

.strike > span:before {
	right: 100%;
	margin-right: 0px;
}

.strike > span:after {
	left: 100%;
	margin-left: 0px;
}

.caret {
	overflow: hidden;
	// width: auto;
	width: 5px !important;
	right: 2px !important;
}

.filter-option {
	padding-right: 2px !important;
}

.kalender-kader {
	border: 1px solid black;
	background: lightyellow;
	overflow-y: auto;
}

.kalender-vandaag {
	border: 1px solid black;
	background: lightblue;
	overflow-y: auto;
}

.kalender-blank {
	overflow-y: auto;
}

.kalender-maand {
	color: black;
	height: 20px;
	font-weight: bold;
	text-align: center;
}

.kalender-datum {
	color: black;
	height: 20px;
	text-align: center;
}

.kalender-regel {
	border: 1px solid black;
	background: lightgreen;
	color: black;
	height: 20px;
}

.rechtsklik {
	// color: black !important;
	border: 1px dotted gray;
	// border-radius: 5px !important; 
	// font-weight: bold;
	// background: lightyellow;
}

.rechtsklik:hover:after {
	font-family: 'Material Icons';
	content: 'open_in_new';
	position: absolute;
	right: 6px;
}

.selectlijst {
	// color: black !important;
	// border: 1px dotted gray;
	// border-radius: 5px !important; 
	// font-weight: bold;
	// background: lightyellow;
}

.selectlijst:hover:after {
	font-family: 'Material Icons';
	content: 'unfold_more';
	position: absolute;
	right: 0px;
}

@keyframes scrollSlowly {
	100% {
		transform: translateY(calc(-100% + 300px));
	}
}

.balkdeel2 {
	// display: none;
}

#navigatie:hover .balkdeel2 {
	// display: block;
}

.lijnl {
	border-left: 2px dotted black;
}

.lijnr {
	border-right: 2px dotted black;
}

.lijnt {
	border-top: 1px dotted black;
}

.lijnb {
	border-bottom: 2px dotted black;
}

button .kort {
	font-size: inherit;
}

button .lang {
	font-size: 0px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

button:hover .kort {
	font-size: 0px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

button:hover .lang {
	font-size: inherit;
}

.slick-headerrow {
	background: lightyellow;
}

.lijntje {
	padding: 10px;
	border-top: 1px solid #e5e5e5;
}

.hoogte34 {
	height: 34px;
}

.admin {
	border-style:solid;
	border-color: black;
	box-shadow: 0 0 10px 0 rgba(100, 100, 100, 1.00) !important;
}

/* Kleuren voor de kolomtitels */
.lichtgroen {
	background: lightgreen;
	color: black !important;
}

.lichtrood {
	background: tomato;
	color: black !important;
}

.lichtblauw {
	background: #4ba0ea;
	color: black !important;
}

.bootstrap-select .dropdown-menu {
	transform: translateZ(0); /* force GPU compositing → minder rounding bugs */
	will-change: top, left;
}

#menu {
	padding-left: 14px;
}

@view-transition {
	navigation: auto;
}

.card {
	view-transition-name: card;
}

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 200ms cubic-bezier(.4,0,1,1) both fade-out;
}

::view-transition-new(root) {
	animation: 300ms cubic-bezier(0,0,.2,1) both fade-in;
}

@keyframes fade-out {
	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}