/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 30px;
  height: 30px;
}

.app-brand-logo.demo svg {
  width: 1.7rem;
  height: 1.7rem;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.45px;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.flatpickr-prev-month, .flatpickr-next-month {
	padding-top: 0px !important;
}

.text-right{
  text-align: right !important;
}

.nav-tabs .nav-link.fake-disabled {
  color: var(--bs-nav-link-disabled-color) !important;
}

.breadcrumb-wrapper a {
  font-weight: normal !important;
}

.full-card-spinner {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #e8e8e891;
  z-index: 100;
  border-radius: 5px;
  text-align: center;
  padding-top: 50px;
}


.EventPast{
  color: #b5b5b5 !important;
}

.EventPast .progress {
  opacity: 0.5;
}

.EventPast:hover .progress {
  opacity: 1;
}

.green-icon i {
	color: #39da8a;
	font-size: 36px;
	margin-left: 7px;
}


.btn-minwidth{
  min-width:131px;
}

td.hidden{
  display:none;
}

#logoutForm{
	display:contents
}
.offcanvas-big-icon {
	font-size: 85px;
	color: #ececec;
}

.m-0{
	margin:0px !important;
}

.dropdown-item-danger {
	background-color: var(--bs-danger) !important;
	color: white !important;
}

	.dropdown-item-danger:hover {
		background-color: #ff8687 !important;
		color: white !important;
		cursor:pointer;
	}



.alert-danger-smaller {
	border-color: #ffcece;
	color: #ff5b5c !important;
	margin-top: 5px !important;
	font-size: 80% !important;
	background-color: transparent !important;
	padding: 0px 5px 0px 5px !important;
}


.password-strength {
	display: flex; /* or inline-flex */
	margin-top: 7px;
	margin-bottom: 7px;
	position: relative;
}

.password-strength-slot {
	height: 5px !important;
	flex:auto;
	margin:0px 2px;
	background-color: #eee;
}
.password-strength-text {
	position: absolute;
	right: 5px;
	top: 10px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

.password-strength-1 {
	background-color: #ff9f9a;
}
.password-strength-2 {
	background-color: #ffce5a;
}
.password-strength-3 {
	background-color: #79dce1;
}
.password-strength-4 {
	background-color: #97f258;
}

.muted{
	opacity:0.5;
}



.margin-user-left-event {
	margin-right: 20px;
	width: 2.675rem !important;

}

.list-group-empty {
	border-color: #e4e4e4;
}

.bottom-no-border-radius {
	border-radius: 5px 5px 0px 0px !important;
}


.top-no-border-radius {
	border-radius: 0px 0px 5px 5px !important;
}

.negative-margin-bottom-1px {
	margin-bottom: -1px !important;
}

.z-index-custom-5 {
	z-index: 5 !important;
	position: relative !important;
}

#eventNaam span {
	color: #5A8DEE;
}

.normaltext {
	font-size: 14px !important;
	font-weight: normal !important;
}

.ButtonCollapseOnCard i {
	font-size: 14px;
}

.ButtonCollapseOnCard {
	position: relative;
	top: -38px;
	border-radius: 60px;
	width: 40px;
	height: 40px;
	padding-left: 17px;
	font-size: 12px !important;
}

.plusButton i{
	font-size:20px !important;
}

.label-status {
	font-weight: bold;
}
.label-verwijderd .label-status {
	color: #df5547;
}
.label-verzonden .label-status {
	color: #52b058;
}
.label-concept .label-status {
	color: #b7b7b7;
}

#overviewEvenementen .progress-bar.bg-secondary {
	background-color: #bbbfc8 !important
}

.user-info .companyname {
	margin-bottom: 0px;
}

.user-info .participantname {
	margin-bottom: 0px;
}

#details .ECModalSpan {
	display: flow-root;
	margin-bottom: 15px;
	line-height: 20px;
	border-bottom: solid 1px #e8e8e8;
	padding-bottom: 15px;
}

#details .ECModalSpan:last-child {
	border-bottom: 0px;
	padding-bottom: 15px;
}

.minWidthTime {

}

.float-right{
	float:right;
}


#EventConfirmationModal .bs-stepper.vertical .bs-stepper-header {
	min-width: 15rem;
}


#EventConfirmationModal .text-center p {
	margin-bottom: 2rem;
}

.status-icon {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: gray;
	float: left;
	margin-right: 10px;
	top: 2px;
	position: relative;
}

	.status-icon.status-icon-present {
		background-color: #34bc34;
	}

	.status-icon.status-icon-notpresent {
		background-color: #ef8b63;
	}

.label-verwijderd {
	text-decoration: line-through;
	opacity: 0.5;
	background-color: #ffe5e5 !important;
}

.label-passed .label-status {
	color: #6786b7 !important;
}

.label-passed {
	opacity: 1;
	background-color: #edf4ff !important;
}

.label-verzonden {
	background-color: #f0feee !important;
}

.dashboard-next-event-details-icon {
	font-size: 41px;
	margin-right: 10px;
}

.groupTagItem {
	background-color: rgb(231, 239, 255);
	color: #484848;
	padding: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	line-height: 20px;
	display: block;
	overflow-wrap: normal;
	word-break: keep-all;
	text-align: center;
	border-radius: 5px;
	margin-bottom: 5px;
	font-size: 12px;
}

.onHoverShowPointer:hover{
	cursor:pointer;
}

.logo-company {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;

}










.floating-widget {
	position: fixed;
	top: calc(40% - calc(650px/2));
	right: 40%;
	left: 40%;
	width: 500px;
	background-color: white;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	border-radius: 8px;
	z-index: 9999;
	border: 1px solid #ccc;
	max-height: 80vh;
	overflow-y: auto;
	display: none;
}

	.floating-widget h1 {
		font-size: 1.5em;
		margin-bottom: 15px;
		text-align: center;
	}

	.floating-widget label {
		display: block;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.floating-widget input[type="text"],
	.floating-widget input[type="email"],
	.floating-widget textarea {
		width: calc(100% - 30px); /* Adjust for the button space */
		display: inline-block; /* Align with the button */
		padding: 8px;
		margin-bottom: 15px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		box-sizing: border-box;
		vertical-align: middle; /* Aligns with the button */
	}

	.floating-widget .send-email-btn {
		width: 30px; /* Fixed width */
		height: 35px; /* Fixed height */
		padding: 0; /* Remove extra padding */
		margin-left: 5px;
		display: inline-block;
		background-color: #28a745;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
		text-align: center;
		vertical-align: middle;
		line-height: 35px;
	}

		.floating-widget .send-email-btn:hover {
			background-color: #1e7e34;
		}

	.floating-widget textarea {
		height: 80px;
		resize: vertical;
	}



	.floating-widget .close-btn {
		background-color: #dc3545;
		margin-right: 5px;
	}

		.floating-widget .close-btn:hover {
			background-color: #a71d2a;
		}

	.floating-widget p {
		margin-bottom: 5px;
	}

	.floating-widget button,
	.floating-widget input[type="text"],
	.floating-widget input[type="email"],
	.floating-widget textarea {
		transition: all 0.3s ease;
	}

.close-btn {
	background-color: #f44336;
	color: white;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	float: right;
	border-radius: 3px;
}

.opslaan-btn {
	background-color: green;
	color: white;
	border: none;
	padding: 5px 10px;
	margin-right: 10px;
	cursor: pointer;
	float: right;
	border-radius: 3px;
}

.close-btn:hover {
	background-color: #d32f2f;
}

.opslaan-btn:hover {
	background-color: darkgreen;
}

#new-opmerking-$ {
	user .id
}

{
	height: 150px;
	box-sizing: border-box;
	border-radius: 4px;
	font-size: 16px;
	resize: none;
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

#new-opmerking-$ {
	user .id
}


.change-number-input {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
}

	.change-number-input button {
		background-color: #ccc;
		border: none;
		padding: 5px 10px;
		cursor: pointer;
		font-size: 18px;
		color: #333;
	}

	.change-number-input input {
		min-width: 57px;
		text-align: center;
		font-size: 18px;
		border: 1px solid #ccc;
		margin: 0 5px;
		align-items: end !important;
	}

	.change-number-input button:hover {
		background-color: #bbb;
	}

.change-stoelen-input {
	width: 30% !important;
	text-align: center !important;
}

.change-reservering-tijd-btn {
	background-color: white;
	color: black;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 3px;
}

	.change-reservering-tijd-btn:hover {
		background-color: #f1f1f1;
	}

.status-select {
	min-width: 100px;
	position: relative;
	display: inline-block;
}

	.status-select select {
		width: 135px;
		font-size: 16px;
		padding: 0.675em 1em 0.675em 1em;
		background: #f1f1f1;
		border: 1px solid #caced1;
		border-radius: 0.25rem;
		color: #000;
		cursor: pointer;
	}

.aanwezig-btn {
	background-color: white;
	border: 1px solid #5a8dee !important;
	color: #5a8dee;
	border: none;
	padding: 17px 19px;
	cursor: pointer;
	border-radius: 0.25em;
	text-wrap: nowrap;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	transition: 0.25s
}

	.aanwezig-btn:hover{
		background-color: #5a8dee !important;
        color: white !important;
    transition:0.25s
	}

.BorderColorAnimationSaved {
	transition: border-color 0.25s ease-in-out;
	animation: BorderColorAnimationSaved 7s;
}

@keyframes BorderColorAnimationSaved {
	0% {
		border-color: #08c008;
	}

	100% {
		border-color: #d4d8dd;
	}
}


/* LGR-time-selector is a checkbox, but it needs to appear a bit bigger and give a little bit of space to the right.*/
.LGR-time-selector{
	width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -2px; /* Adjust vertical alignment */

}

.location-dropdown {
	min-width: 180px;
	font-size: 16px;
	padding: 0.675em 1.2em 0.675em 1em;
	background: #f1f1f1;
	border: 1px solid #caced1;
	border-radius: 0.25rem;
	color: #000;
	cursor: pointer;
}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
	background-color: #555;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	position: fixed;
	bottom: 23px;
	right: 28px;
	width: 380px;
}

/* The popup form - hidden by default */
.form-popup {
	display: none;
	/*position: fixed;*/
	bottom: 0;
	right: 15px;
	border: 3px solid #f1f1f1;
	z-index: 9;
}

/* Add styles to the form container */
.form-container {
	max-width: 500px;
	padding: 10px;
	background-color: white;
}

	/* Full-width input fields */
	.form-container input[type=text], .form-container input[type=password], .form-container input[type=email], .form-container input[type=number], .form-container input[type=tel], #userOpmerking {
		width: 100%;
		padding: 15px;
		margin: 5px 0 22px 0;
		border: none;
		background: #f1f1f1;
	}

		/* When the inputs get focus, do something */
		.form-container input[type=text]:focus, .form-container input[type=password]:focus, .form-container input[type=email]:focus, .form-container input[type=number]:focus, .form-container input[type=tel]:focus, #userOpmerking {
			background-color: #ddd;
			outline: none;
		}

	/* Set a style for the submit/login button */
	.form-container .btn {

	}

#_reservering-contactinfoData input{
	margin-bottom:15px !important;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
	background-color: red;
}

	/* Add some hover effects to buttons */
	.form-container .btn:hover, .open-button:hover {
		opacity: 1;
	}

.custom-select {
	min-width: 350px;
	position: relative;
	display: inline-block;
}

	.custom-select select {
		width: 100%;
		font-size: 1.15rem;
		padding: 0.675em 6em 0.675em 1em;
		background: #f1f1f1;
		border: 1px solid #caced1;
		border-radius: 0.25rem;
		color: #000;
		cursor: pointer;
	}

.arrow {
	position: absolute;
	right: 10px; /* Position the arrow to the right */
	top: 50%; /* Center vertically */
	transform: translateY(-50%); /* Adjust for vertical centering */
	pointer-events: none; /* Prevent the arrow from capturing mouse events */
	font-size: 24px; /* Increase the font size to make the arrow bigger */
	line-height: 1; /* Adjust line-height to center the arrow properly */
	color: #333; /* Optional: Change the color of the arrow */
}

.calendar-container {
	display: flex;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	width: 100%; /* Ensure the container takes the full width */
}

#calendar {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	text-align: center;
	margin: 0 auto;
}

	#calendar table {
		width: 100%;
	}

	#calendar td {
		text-align: center; /* Center the text (button) horizontally */
		vertical-align: middle;
		text-align: center;
	}

		#calendar td button {
			width: 100%; /* Make the button take up the full width of the cell */
			height: 70px; /* Adjust the height of the buttons */
			font-size: 14px; /* Adjust the font size */
			cursor: pointer;
			border: none;
		}

.day-button {
	background-color: #edf9f3;
	color: #51c487;
	padding: 24px 24px;
	cursor: pointer;
	float: left;
	width: 100%;
	font-size: 75%;
	table-layout: fixed;
	border: 2px dashed transparent !important;
}

	.day-button:hover {
		background-color: #91d5b3;
		color: #a7f0b9;
	}

	.day-button.selected {
		background-color: #51c487;
		color: #fff;
	}

	.day-button.gelsoten {
		background-color: #ff5a5a9e !important;
		color: #ffffff !important;
		text-decoration: line-through;
		table-layout: fixed;
	}
		.day-button.gelsoten.selected {
			background-color: #ff5c5c !important;
			color: #D6D6D6 !important;
			text-decoration: line-through;
			table-layout: fixed;
		}

	.day-button.vol {
		pointer-events: none;
		background-color: #ff5a5a9e !important;
		color: #D6D6D6 !important;
		text-decoration: line-through;
		table-layout: fixed;
	}

	.day-button.past-days {
		pointer-events: none;
		background-color: #FAFAFA !important;
		color: #D6D6D6 !important;
		table-layout: fixed;
		text-decoration: line-through;
	}

	.day-button.selected {
		border: 2px dashed black !important;
		border-style: dashed !important;
	}

	.empty-space-button {
		pointer-events: none;
		background-color: #FAFAFA !important;
		color: #D6D6D6 !important;
		table-layout: fixed;
		text-decoration: line-through;
	}

.day-button.today {
	background-color: #edf9f3;
	border: 1px solid black !important;
	border-style:solid !important;
	color: #51c487;
	font-weight: bold;
}

		.day-button.today:hover {
			background-color: #91d5b3 !important;
			color: black !important;
			font-weight: bold;
		}

		.day-button.today.selected {
			background-color: #51c487 !important;
			color: black !important;
			font-weight: bold;
		}

	.day-button.partialvol {
		border-bottom: 4px solid #ffdbb0 !important;
	}
	.day-button.reserveringaanwezig {
		background-color: #c9deff !important;
		color: #4a6dd8 !important;
	}

	.day-button.reserveringaanwezig:hover {
		background-color: #a6c8ff !important;
		color: #4a6dd8 !important;
	}

	.day-button.reserveringaanwezig.selected {
		background-color: #307fff !important;
		color: white !important;
	}


.openingstijden-day-button {
	background-color: #edf9f3;
	border: 1px solid #caffca;
	color: #51c487;
	padding: 24px 24px;
	cursor: pointer;
	float: left;
	width: 100%;
	font-size: 75%;
}

	.openingstijden-day-button.selected {
		background-color: #51c487;
		color: #fff;
	}

	.openingstijden-day-button:hover {
		background-color: #91d5b3;
		color: #a7f0b9;
	}

	.openingstijden-day-button.vol.reserveringaanwezig {
		background-color: #f5f5f5 !important;
		color: #0040ff !important;
		text-decoration: line-through;
		pointer-events: initial;
	}

		.openingstijden-day-button.vol.reserveringaanwezig:hover {
			background-color: #658cff !important;
			color: #0040ff !important;
		}

		.openingstijden-day-button.vol.reserveringaanwezig.selected {
			background-color: #3c63fd !important;
			color: white !important;
		}


	.openingstijden-day-button.legendvol.reserveringaanwezig {
		background-color: #f5f5f5 !important;
		color: #0040ff !important;
		text-decoration: line-through;
		pointer-events: initial;
	}

		.openingstijden-day-button.legendvol.reserveringaanwezig:hover {
			background-color: #658cff !important;
			color: #0040ff !important;
		}

		.openingstijden-day-button.legendvol.reserveringaanwezig.selected {
			background-color: #3c63fd !important;
			color: white !important;
		}
	

	.openingstijden-day-button.reserveringaanwezig {
		background-color: #8fbbff !important;
		color: #0040ff !important;
	}

		.openingstijden-day-button.reserveringaanwezig.selected {
			background-color: #3c63fd !important;
			color: white !important;
		}

		.openingstijden-day-button.reserveringaanwezig:hover {
			background-color: #658cff !important;
			color: #0040ff !important;
		}

	.openingstijden-day-button.past-day {
		pointer-events: none;
		background-color: white !important;
		color: #D6D6D6 !important;
	}

	.openingstijden-day-button.today {
		background-color: #edf9f3;
		color: #51c487;
		border: 1px solid black !important;
	}

		.openingstijden-day-button.today:hover {
			background-color: #91d5b3;
			color: #a7f0b9;
		}

	.openingstijden-day-button.gelsoten {
		background-color: #ff8f8f9e !important;
		color: #ff4c4c !important;
		text-decoration: line-through !important;
		pointer-events: initial;
	}

		.openingstijden-day-button.gelsoten:hover {
			background-color: #fd7070 !important;
			color: #ff4c4c !important;
		}

		.openingstijden-day-button.gelsoten.selected {
			background-color: #f93e3e !important;
			color: black;
		}


.table-filter-day-button {
	background-color: #edf9f3;
	border: 1px solid #caffca;
	color: #51c487;
	padding: 24px 24px;
	cursor: pointer;
	float: left;
	width: 100%;
	font-size: 75%;
}

	.table-filter-day-button.selected {
		background-color: #51c487;
		color: #fff;
	}

	.table-filter-day-button:hover {
		background-color: #91d5b3;
		color: #a7f0b9;
	}

	.table-filter-day-button.disabled {
		background-color: white;
		color: #D6D6D6;
		text-decoration: line-through;
	}

	.table-filter-day-button.past-day {
		background-color: white;
		color: #D6D6D6;
	}

	.table-filter-day-button.today {
		background-color: #edf9f3 !important;
		border: 1px solid black !important;
		color: #51c487;
		font-weight: bold !important;
	}

		.table-filter-day-button.today:hover {
			background-color: #91d5b3 !important;
			color: black !important;
			font-weight: bold;
		}

		.table-filter-day-button.today.selected {
			background-color: #51c487 !important;
			color: black !important;
			font-weight: bold;
		}

.month-btn {
	font-size: xx-large;
	color: black;
	background-color: transparent;
	border-color: transparent;
	text-align: center;
}

.month-year {
	font-size: xx-large;
	color: black;
	text-align: center;
}

.tijd-group button {
	padding: 10px 24px;
	cursor: pointer;
	background-color: #edf9f3;
	color: #51c487;
	float: left;
	font-size: 75%;
	border: none;
}

	.tijd-group button:not(:last-child) {
		border-right: none;
	}

.tijd-group:after {
	content: "";
	clear: both;
	display: table;
}

.tijd-group button:hover {
	background-color: #91d5b3;
	color: #a7f0b9;
}


.tijd-item.selected {
	background-color: #51c487;
	color: #fff;
}

.overridetijd-item.selected {
	background-color: #51c487 !important;
	color: #fff !important;
}

.overridetijd-item.gesloten {
	background-color: #ff8f8f9e !important;
	color: #fff !important;
}

	.overridetijd-item.gesloten:hover {
		background-color: #fd7070 !important;
		color: #fff !important;
	}

	.overridetijd-item.gesloten.selected {
		background-color: #f93e3e !important;
		color: black;
	}

.tijd-item.disabled {
	pointer-events: none;
	background-color: white;
	color: #D6D6D6;
	text-decoration: line-through;
}

.popup-overlay {
	position: fixed;
	top: 20%;
	right: 20%;
	left: 30%;
	width: 40%;
	background-color: white;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	border-radius: 8px;
	z-index: 9999;
	border: 1px solid #ccc;
	max-height: 80vh;
	display: none;
}

.reservering-popup-overlay {
	position: fixed;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	background-color: white;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	border-radius: 8px;
	z-index: 9999;
	border: 1px solid #ccc;
	max-height: 80vh;
	max-width: 90%;
	width: 550px;
	overflow-y: auto;
	display: none;
}



.openigstijden-popup-overlay {
	position: fixed;
	top: 10%;
	right: 20%;
	left: 30%;
	width: 40%;
	background-color: white;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	border-radius: 8px;
	z-index: 9999;
	border: 1px solid #ccc;
	max-height: 80vh;
	display: none;
	overflow-y: auto; /* Enable vertical scrolling */
}



.popup-content {
	background-color: #fff;
	text-align: center;
}

#tijdenSluiten-popup .popup-content{
	text-align: left !important;
}
/* Style for the close button */
.close-popup {
	background-color: #e1e1e1;
	color: black;
	position: absolute;
	right: 15px;
	top: 15px;
	font-size: 24px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border: none;
}

	.close-popup:hover {
		background-color: #bbb;
	}

.disable-dates-btn {
	padding: 10px 24px;
	cursor: pointer;
	background-color: #e1e1e1;
	color: black;
	font-size: 75%;
	border: none;
}

	.disable-dates-btn:hover {
		background-color: #bbb;
	}

.custom-number-input {
	display: inline-flex;
	align-items: center;
	text-align: right !important;
}

	.custom-number-input button {
		background-color: #ccc;
		border: none;
		padding: 5px 10px;
		cursor: pointer;
		font-size: 18px;
		color: #333;
	}

	.custom-number-input input {
		width: 7px;
		text-align: center;
		font-size: 18px;
		border: 1px solid #ccc;
		margin: 0 5px;
		background-color: black;
		align-items: end !important;
	}

	.custom-number-input button:hover {
		background-color: #bbb;
	}

	.custom-number-input button:disabled {
		background-color: #eee;
		cursor: not-allowed;
	}

.stoelen-input {
	width: 30% !important;
	text-align: center !important;
}

#userOpmerking {
	height: 150px;
	box-sizing: border-box;
	border-radius: 2px;
	font-size: 16px;
	resize: none;
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: 1px solid #d1d1d1;
	background: #fbfbfb;
}

	#userOpmerking:focus {
		background-color: #f9f9f9;
		outline: none;
	}

.fullwidthbtn{
	width:100%
}

.button-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.open-table-filter-btn {

}

	.open-table-filter-btn:hover {
		background: #bbb;
	}

.open-openingstijden-btn {

}

	.open-openingstijden-btn:hover {
		background: #bbb;
	}

.table-filter-datum-display {
	text-align: left;
	box-sizing: block;
	border-radius: 4px;
	font-size: 16px;
	resize: none;
	padding: 9px 0px;
	margin: 0px;
	border: none;
	background: transparent;
	pointer-events: none;
	font-weight: bold;
	color: #4d4d4d;
}

#table-filter-datum-display:focus {
	outline: none;
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

#roomList {
	list-style-type: none;
	padding: 0;
	margin: 20px 0;
}

	#roomList li {
		margin-bottom: 20px;
	}

.add-room-btn {
	position: absolute;
	bottom: 10px;
	right: 10px;
}



.help-icon {
	position: absolute;
	top: 25px;
	right: 85px;
	background-color: #5a8dee;
	color: white;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 18px;
	cursor: pointer;
	text-align: center;
	line-height: 30px;
}

	.help-icon:hover {
		background-color: #0056b3;
	}

.help-panel {
	position: absolute;
	top: 10px;
	right: -360px; /* Default position next to the popup */
	width: 350px;
	max-height: 80vh; /* Match popup height */
	overflow-y: auto; /* Scrollable help panel */
	border: 1px solid #ccc;
	background-color: #f9f9f9;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	display: none; /* Initially hidden */
	z-index: 10000; /* Ensure it’s above the popup */
	border-radius: 10px;
	padding: 21px;
}

	.help-panel h3 {
		margin-top: 0;
	}

	.help-panel ul {
		padding-left: 20px;
	}

		.help-panel ul li {
			margin-bottom: 10px;
		}

.status-legend {
	list-style: none;
	padding: 0;
	margin: 0;
}

	.status-legend li {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

/* Style the buttons */
.status-button {
	width: 100px;
	height: 70px;
	font-size: 14px;
	border: none;
	padding: 24px;
	text-align: center;
	pointer-events: none; /* Disable button interactions */
	margin-right: 10px; /* Add space between button and text */
	border-radius: 4px; /* Optional: Make buttons slightly rounded */
}

/* Style the text */
.status-text {
	font-size: 14px;
	margin: 0; /* Remove default margin for <p> */
	color: #333; /* Default text color */
}

.add-reservering-icon {

}

	.add-reservering-icon:hover {
		background-color: #0056b3;
	}

#_reservering-stap-een.passed {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

.reservering-stap-btn {
	width: 100%;
	height: 60px;
	position: relative;
	padding-right: 30px;
	background-color: #7ea1e5;
	color: white;
	cursor: pointer;
	text-align: center;
	align-items: center;
	justify-content: space-between;
	border-radius: 0px;
	border: 1px solid #3b66b7;
	margin-bottom: 21px;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: bold;
}



#addUserWidget label{
	font-size:18px;
	color:black;
	margin-bottom:7px;
	font-weight:bold;
}

#addUserWidget .custom-select{
	margin-bottom:15px;
}

.custom-select {
	min-width: 100%;
	position: relative;
	display: inline-block;
}

.custom-number-input button {

	min-height: 58px;
}

.tijd-group {
	margin-bottom: 20px;
}

#addUserWidget input:not(input[type="checkbox"]) {
	width: 100%;
	padding: 15px;
	margin: 0px;
	border: none;
	background: #f9f9f9;
	border: 1px solid #cdcdcd;
}


.dropdown-arrow {
	font-size: 14px; /* Adjust size of the arrow */
	margin-left: 5px;
	pointer-events: none; /* Prevent interaction with the arrow */
}


.button-date-container {
	float: left;
}

.layout-menu {
	background-color: white !important;
}


.inputfieldSearch {
	float: right;
	margin-bottom: 5px;
	padding: 13px 23px;
	border-radius: 5px;
	border: 1px solid #b2b2b2;
}

.reserveringResults {
	clear: both;
}

.button-collection-container {
	float: left;
}

.darkend-overlay {
	content: "";
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	position: fixed;
	background-color: rgba(0,0,0,0.3);
	z-index: 9998;
	display: none;
	pointer-events: none;
}

	.darkend-overlay[style="display: block;"] {
		pointer-events: all;
	}


.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-start; /* Start bovenin zodat je kunt scrollen */
	overflow-y: auto; /* Scrollen inschakelen */
	padding: 40px 0; /* Ruimte boven en onder */
	box-sizing: border-box;
	z-index: 9999;
}

.modal-content {
	background: white;
	padding: 20px;
	border-radius: 5px;
	width: 470px;
	text-align: center;
	box-sizing: border-box;
}

	.modal-content input {
		width: 100%;
		margin-bottom: 10px;
		padding: 5px;
	}

.close-popup {
	background-color: #e1e1e1;
	color: black;
	position: absolute;
	right: 15px;
	top: 15px;
	font-size: 24px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border: none;
}

	.close-popup:hover {
		background-color: #bbb;
	}

#roomList {
	list-style-type: none;
	padding: 0;
	margin: 20px 0;
}

	#roomList li {
		margin-bottom: 10px;
	}


#reservationTypeList {
	list-style-type: none;
	padding: 0;
	margin: 20px 0;
}

	#reservationTypeList li {
		margin-bottom: 10px;
	}

.add-room-btn {
	position: absolute;
	bottom: 10px;
	right: 10px;
}


#settingsPopup{
	padding:40px;
}

.custom-width-input{
	width:200px;
	float:left;
	margin-left:10px
}

.form-check-container {
	width: 140px;
	float: left;
	display:flex;
	margin-left:15px;
	padding-top:7px;
}

#newRoomForm {
	margin-bottom: 20px;
	border-top: 1px solid #e3e3e3;
	padding-top: 20px;
}

	.form-check-container input {
		float: left;
		width: 20px;
		display: block;
	}
	.form-check-container label {
		float: right;
		width: 120px;
		display: block;
	}


.ml-1{
	margin-left:10px;
}
.mr-1 {
	margin-right: 10px;
}

.footer-login-text {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #b5b5b5;
	font-weight: normal;
	padding: 0px 10px;
}

div.authentication-bg{
	position:relative;
}
.menu-vertical .app-brand {
	padding-top: 12px;
}


html:not([dir="rtl"]).layout-menu-collapsed .menu-vertical .app-brand {
	padding-right: 1.25rem;
	padding-left: 1.5rem;
}

html:not([dir="rtl"]).layout-menu-collapsed:not(.layout-menu-hover) .menu-vertical .app-brand {
	padding-right: 0px;
	padding-left: 15px;
}

html.layout-menu-collapsed:not(.layout-menu-hover) .logo-text {
	display:none !important;
}

@media (min-width: 1400px) {
	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1800px;
	}
}


.sortableTable  th.sortable {
	cursor: pointer;
}

	.sortableTable th.sortable::after {
		content: '';
		margin-left: 5px;
	}

	.sortableTable th.sortable.asc::after {
		content: ' ▲';
	}

	.sortableTable th.sortable.desc::after {
		content: ' ▼';
	}


.tijd-item-openingstijd-container{
	width:100% !important;
	display:block;
	clear:both;
}

.t-input-tijd {
	width: 37% !important;
	float: left;
	height:40px;
	margin-right:3%;
}
.t-input-type {
	width: 40%;
	float: left;
	height: 40px;
}
.t-input-public {
	width: 20% !important;
	float: left;
position:relative;
top:13px
}

.edit-tijden-header .tijdslot {
	width: 37% !important;
	float: left;
	height: 40px;
	margin-right: 3%;
	font-weight: bold;
	text-align: left;
}

.edit-tijden-header .tijdtype {
	width: 40%;
	float: left;
	height: 40px;
	font-weight: bold;
	text-align: left;
}

.edit-tijden-header .tijdpubliek {
	width: 20% !important;
	float: left;
	position: relative;
	height: 40px;
	font-weight:bold;
	text-align:center;
}


.button-smallcollection-container {
	float: left;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 13px;
}

.btn-right{
	float:right;
	margin-left:5px;
}

.table-normal-text{
	color:black !important;
}

#endDate.form-control {
	max-width: 170px;
}
#startDate.form-control {
	max-width: 170px;
}

#addOverrideTijdenForm label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}

#overridetijd-groups button {
	padding: 10px 24px;
	cursor: pointer;
	background-color: #edf9f3;
	color: #51c487;
	font-size: 16px;
	border: none;
}

.LGR-time-header {
	display: block;
	width: 100%;
	position: relative;
	clear: both;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}

#overridetijd-groups > div {
	margin-bottom: 20px;
}

.searchInput_input {
	width: 79%;
	height: 40px;
	padding: 10px;
	border-radius: 4px;
	border: 1px solid #ccc;
	font-size: 16px;
	box-sizing: border-box;
	float: left;
}

.searchInput_button{
	width: 20%;
    height: 40px;
    background-color: #5a8dee;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
	float:right;
	box-shadow:none;
}

.search-status-afgezegd {
	color: #e65555;
}


.overflow-hidden-css {
	overflow-x: hidden;
}

.searchTable{
width: 100%;
    border-collapse: collapse;
}

    .searchTable th, .searchTable td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    .searchTable th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    .searchTable tr:hover {
        background-color: #f5f5f5;
		}

.searchButton {
	outline: none;
	background-color: transparent;
	border: 1px solid #5a8dee !important;
	color: #5a8dee;
	padding: 10px 20px;
	cursor: pointer;
	font-size: 16px;
	border-radius: 4px;
	float: right;
	margin-left: 10px;
}

.searched-for-this-reservation {
	background-color: #e3ffe3;
}

@media screen and (max-width:1480px) {
	.openigstijden-popup-overlay {
		left: calc(50% - calc(563px/2));
		width: 563px;
	}

	.change-number-input input {
		min-width: 40px;
		font-size: 16px;
	}

	.table > :not(caption) > * > * {
		padding: 0.525rem 0.8rem;
	}

	.location-dropdown {
		min-width: unset;
		width: 130px;
		font-size: 14px;
	}

	.status-select select {
		width: 85px;
		font-size: 14px;
	}

	.aanwezig-btn {
		padding: 17px 8px;
		font-size: 11px;
	}

	.reserveringResults > .col-12 {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.container-xxl {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}

	.content-wrapper .container-p-y:not([class^="pt-"]):not([class*=" pt-"]) {
		padding-top: 0px !important;
	}

	.floating-widget {
		top: calc(50% - calc(650px/2)) !important;
		left: calc(50% - calc(512px/2)) !important;
	}
}