/* unvisited link */
a:link {
	color: var(--fontcolor-1);
}

/* visited link */
a:visited {
	color: var(--fontcolor-1);
}

/* mouse over link */
a:hover {
	color: var(--fontcolor-1);
}

/* selected link */
a:active {
	color:var(--fontcolor-1);
}

a {
	text-decoration: none
}	

*, ::before, ::after {
	box-sizing: border-box
}


a:focus {
	border: none;
	outline: none; /* Removes default browser focus outline */
	background-color: var(--highlight-color);
	box-shadow: none; /* Ensures no glow effect */
}

/* HEADER BAR-------------------------------------- START */
/* Header display properties screen 768px or SMALLER*/
.header {
	width: 100%;
	height: var(--header-height);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	padding: 0 1rem 0 0.75rem; /* top,right,bottom,left*/
	background-color: #fff;
	z-index: 15;
	transition: var(--transition);
}

.logo-container {
	display: flex;	
	align-items: center;
}

.FPsuite_logo-icon {
	height: 50px;
	transform: scale(1); /* Ensure a base transform value */
	transform-origin: center center; /* Ensure scaling from the exact center */
	transition: var(--transition); /* Smooth transition */
	-webkit-transition: var(--transition); /* Safari */
	-moz-transition: var(--transition); /* Firefox */
	-o-transition: var(--transition); /* Older Opera */
}

	.FPsuite_logo-icon:hover {
		transform: scale(1);
		-webkit-transform: scale(1); /* Safari */
		-moz-transform: scale(1); /* Firefox */
		-o-transform: scale(1); /* Older Opera */
	}

.header-menu-full {
	display: none;
}


.appDropdown-card {
	top: var(--header-height);
	right: 10%;
	position: fixed;
	border: 1px solid;
	border-color: var(--greybutton-border);
	border-radius: var(--border-radius-button);
	box-shadow: 3px 3px 4px 0 rgba(0,16,34,0.1);
	transition: var(--transition);
	z-index: 15;
	min-width: 200px;
}

.appDropdown-text {
	line-height: 15px;
	padding-bottom: 0px;
	font-size: var(--small-font-size);
	color: var(--fontcolor-1);
}

.appDropdown-icon {
	width: 50px;
	padding-bottom: 10px;
	top: 5px;
	transition: transform 0.2s ease-in-out; /* Animation transition */
}

	.app-icon-dropdown:hover {
		transform: scale(1.1); /* Slightly larger size on hover */
	}

.administratie-select .form-select { /* makes administratie select dropdown at fixed height in any screen size */
	height: 50px
}

.accountDropdown-card {
	top: var(--header-height);
	position: fixed;
	right: 0.75rem;
	border: 1px solid;
	border-color: var(--greybutton-border);
	border-radius: var(--border-radius-button);
	box-shadow: 3px 3px 4px 0 rgba(0,16,34,0.1);
	transition: var(--transition);
	z-index: 15;
}

.accountDropdown-menu {
	padding-top:5px;
	padding-bottom:5px;
}

	.accountDropdown-menu:hover {
		color: var(--fontcolor-1);
		background-color: var(--highlight-color);
	}

	.accountDropdown-menu a:hover {
		text-decoration: none; /* Optional: Remove underline on hover */
		color: inherit !important; /* Inherit the color from the parent element */
	}

.account {
	height: var(--header-height);
	display: flex;
	justify-content: end;
}

.account_img {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--border-radius-button);
	border: 1px solid #d4d4d4;
	padding: 5px;
	margin-left: 5px;
	color: var(--first-color-light);
	height: 50px;
	width: auto;
	overflow: hidden;
}

	.account_img img {
		width: auto;
		height: 50px;
		object-fit: contain;
		display: block;
		padding: 5px;
	}

	.account_img:hover {
		color: var(--highlight-color);
		transform: scale(1);
	}

	.account_img.user {
		border: none;
	}

		.account_img.user img {
			border: 1px solid var(--greybutton-border);
		}


.account_txt {
	font-size: var(--normal-font-size);
	display: none;
	color: var(--fontcolor-1);
}

.account_img_dropdown { /* account image inside account dropdown menu */

	height: 30px;
}
	.account_img_dropdown img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
	}



/* This is the highlighted style of the dropdown*/
.dropdown-item.active {
	background-color: var(--highlight-color);
	color: var(--fontcolor-1);
	pointer-events: none;
}

/* Header display properties after the screen reach 768px or BIGGER*/
@media screen and (min-width: 768px) {
	.header {
		height: var(--header-height);
	}

	.header-menu-full {
		display: flex;
	}

	.header-menu-icon {
		font-size: calc(var(--normal-font-size)*1.5);

	}

	.adminSelector-icon {
		display: none;
	}
}


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

	.account_txt {
		display: flex;
	}
}


/* Clickable Dropdown App Icons*/
.fp-clickable-appIcon {
	text-decoration: none; /* Remove underline on link */
	color: inherit; /* Inherit text color */
	cursor: pointer; /* Show pointer cursor on hover */
}

	/* Change text color on hover */
	.fp-clickable-appIcon:hover {
		color: var(--fontcolor-1);
	}

	/* Change text color after clicked */
	.fp-clickable-appIcon:visited {
		color: var(--fontcolor-1);
	}

/* HEADER BAR-------------------------------------- END */


/* MENU TOGGLE------------------------------------- START */

@media (max-width: 768px) {
	.menu_toggle {
		display: none!important;
	}
}

.menu_toggle {
	grid-template-columns: max-content max-content;
	align-items: center;
	opacity: 1;
	z-index: 500;
	display: grid;
	position: fixed;
	top: 5.75rem;
	left: 13.25rem;
	transition: var(--transition);
	color: var(--greybutton-border);	
}

	.menu_toggle::before {
		content: '';
		display: flex;
		position: absolute;
		top: 1px;
		left: 2px;
		width: 1.75rem; /* Adjust the size as needed */
		height: 1.75rem; /* Adjust the size as needed */
		background: #fff;
		border: 1px solid #dee2e6;
		border-radius: 50%;
		opacity: 1; /* Adjust the opacity as needed */
		z-index: -1; /* Set a lower z-index to place it behind the main icon element */
	}

		.menu_toggle:hover {
			color: var(--highlight-color);
			opacity: 1;
		}


.menu_toggle_close {
	grid-template-columns: max-content max-content;
	align-items: center;
	opacity: 1;
	z-index: 500;
	display: grid;
	position: fixed;
	top: 5.75rem;
	left: 3em;
	transition: var(--transition);
}

		.menu_toggle_close::before {
			content: '';
			display: flex;
			position: absolute;
			top: 1px;
			left: 2px;
			width: 1.75rem; /* Adjust the size as needed */
			height: 1.75rem; /* Adjust the size as needed */
			background: #fff;
			border-radius: 50%;
			opacity: 1; /* Adjust the opacity as needed */
			z-index: -1; /* Set a lower z-index to place it behind the main icon element */
		}


.menu_toggle_icon {
	font-size: calc(var(--normal-font-size)*1.25);
	padding:5px;
}



/* MENU TOGGLE------------------------------------- END */


/* FOOTER BAR ------------------------------------- START */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	
}

body {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--header-height)); /* Adjusted this line */
	top: var(--header-height);
	width: 100% ;
	
}

#bodycontent {
	flex: 1 0 auto;
	
}

.content-wrapper:last-of-type {
	flex-shrink: 0;
	position: relative;
}


.footer {
	width: calc(100% + var(--nav-width) + 11px); /*finetuned value - don't modify*/
	display: flex;
	align-items: center;
	height: var(--footer-height);
	padding: 0 0.75rem 0 0.75rem;
	background-color: var(--app-color);
	position: relative;
	z-index: 100;
	margin-left: -11px; /*finetuned value - don't modify*/
	left: calc(-1 * var(--nav-width));
	transition: var(--transition);
}


.footer-fp {
	width: calc(100% + (var(--nav-width) * 3.9) + 12px); /*finetuned value - don't modify*/
	margin-left: -12px; /*finetuned value - don't modify*/
	padding-left: 0.75rem;
	left: calc(-1 * var(--nav-width) * 3.9);
	transition: var(--transition);
}


.footer-static {
	width: 100%;
	display: flex;
	align-items: center;
	height: var(--footer-height);
	padding: 0 0.75rem 0 0.475rem; /*finetuned value - don't modify*/
	background-color: var(--app-color);
	position: relative;
	z-index: 100;
	margin-left: 0px;
	left: 0;
	transition: var(--transition);
}


	.Freepack_logo-icon {
		width: 6.25rem;

	}

	.footer-txt {
		font-size: var(--small-font-size);
		color: #fff;
	}

/* FOOTER BAR ------------------------------------- END */



/* LEFT NAVIGATION BAR */

.l-navbarfp {
	position: fixed;
	top: 0;
	left: 0%;
	width: var(--nav-width);
	height: 100vh;
	background-color: #FFFFFF;
	transition: var(--transition);
	z-index: var(--z-fixed);
	font-size: var(--normal-font-size);
}

.navfp {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	position: relative;
	margin-top: var(--header-height);
	padding: 0 0 0 0rem; /* top,right,bottom,left */
}

	.navfp > ul {
		padding-left:0;
		list-style: none;
	}

/* Navigation main menu */

.nav_link {
	display: flex;
	align-items: center;
	top: 4.5rem;
	column-gap: 1rem;
	padding: 0.75rem 0 0.75rem 1rem; /* top,right,bottom,left */
	position: relative;
	color: var(--app-color);
	transition: var(--transition);
	font-size: var(--normal-font-size);
	white-space: nowrap; /* Prevent text from wrapping */
	overflow: hidden; /* Hide any overflow text */
}

/*This applies to all icon style properties */
.nav_icon {
	font-size: calc(var(--normal-font-size)*1.5);
	display: flex;
	align-items: center;
	cursor: pointer;
}
	.nav_icon:hover {
		transform: scale(1.1);
	}

a.active .nav_header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	height: 3px;
}

/* Calendar Button Base Styles */
a .bx.bx-calendar.calendar-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

/* Calendar Week Text Styles */
.calendar-week-text {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	position: relative;
	bottom: 0;
}

/* Hide calendar week text for screens under 1000px */
@media screen and (max-width: 999px) {
	.calendar-week-text {
		display: none;
	}
}

a.active .bx.bx-calendar.calendar-btn {
	position: relative;
}


/* Active State Styles */
	a.active .bx.bx-calendar.calendar-btn::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -10px;
		width: 100%;
		height: 3px;
		background-color: var(--fpcolor-1);
	}



.nav_link.active,
.nav_link:hover {
	color: var(--fontcolor-1);
	background-color: var(--highlight-color);
	font-weight: 400;
	font-size: var(--normal-font-size);
}



.submenu_available::before {
	font-family: "FontAwesome";
	content: "\f054";
	position: absolute;
	right: 10px;
}


l-navbarfp.show {
	left: 0;
}

/*===================================*/

/* Mobile Bottom Navigation */
/* Default states */
.l-navbarfp {
	display: block;
}

.m-navbarfp {
	display: none;
}

/* === MOBILE BOTTOM MENU === */
@media (max-width: 768px) {
	/* Hide desktop left menu */
	.l-navbarfp {
		display: none !important;
	}

	/* Show and style mobile bottom nav */
	.m-navbarfp {
		display: block !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60px;
		background-color: white;
		box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
		z-index: 1000;
	}

	.mobile-navfp {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center; /* Center the navigation */
	}

		/* Target the ul that contains mobile_nav_link */
		.mobile-navfp > ul {
			display: flex;
			justify-content: center; /* Center the list items */
			align-items: center;
			height: 100%;
			margin: 0;
			padding: 0;
			list-style: none;
			width: 100%; /* Take full width */
			max-width: 768px;
		}

			/* Target the li elements */
			.mobile-navfp > ul > li {
				flex: 1 1 0; /* Equal width distribution */
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

	.mobile_nav_link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 5px;
		text-decoration: none;
		color: #333;
	}

		/* Style for the icon */
		.mobile_nav_link .nav_icon {
			font-size: 24px;
			margin-bottom: 2px;
		}

		/* Active and hover states */
		.mobile_nav_link.active,
		.mobile_nav_link:hover {
			color: var(--fontcolor-1);
			background-color: var(--highlight-color);
			font-weight: 400;
			font-size: var(--normal-font-size);
		}

	.mobile_nav_text {
		font-size: 11px;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		padding: 0 2px; /* Add small padding for text */
	}
}

/* Optional: Add smooth transitions */
.mobile_nav_link {
	transition: all 0.2s ease-in-out;
}

	.mobile_nav_link .nav_icon,
	.mobile_nav_text {
		transition: color 0.2s ease-in-out;
	}


/* === MOBILE BOTTOM MENU === */

/* SUBMENU */

/* Sub Menu Collapse Container */
	.submenu-slidebar {
		transition: 0.5s;
		bottom: 0;
		left: 0;
		position: fixed;
		z-index: 15;
		margin-left: 0;
		transition: var(--transition);
	}

	.submenu-slidebar-card {
		border: 1px solid #EBEBEB;
		background-color: rgba(250,250,250,0.75);
		box-shadow: 1px 1px 3px 0 rgba(210,210,210,0.75);
		border-radius: 0;
		width: 180px;
		height: 100vh;
		padding: 0 10px 0 10px;
		transition: var(--transition);
	}


/* Sub Menu Styling: */

	.sub-nav-active {
		color: var(--highlight-color);
		background-color: var(--greyscale-color-1);
	}


	.submenu-group {
		grid-template-columns: max-content max-content;
		align-items: center;
		left: 0;
		padding: 0 0 0 0; /* top,right,bottom,left*/
		color: var(--first-color-light);
		width: 100%;
		line-height: 50px;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		background-color: #FFFFFF;
	}

	.submenu_icon {
		font-size: 1.25rem;
		transition: .3s;
		padding: 10px 10px 0 10px; /* top,right,bottom,left*/
	}

	.submenu_name {
		padding-left: 1.25rem;
	}

	.submenu-group li:hover {
		color: var(--highlight-color);
		background-color: var(--greyscale-color-2);
	}

	/* Adjustment each submenu group height aligned with main navigation menu */
	.submenu-bp-2 {
		position: absolute;
		top: 132px;
	}

	.submenu-bp-3 {
		position: absolute;
		top: 224px;
	}


	/*Grey background container - Following Raadhuis Design*/

	.container-RH {
		top: var(--header-height);
		position: fixed;
		width: 100%;
		height: 100%;
		background: var(--greyscale-color-3);
		z-index: -5;
		border-top-left-radius: 25px;
	}

.container-header {
	top: var(--header-height);
	position: fixed;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 10;
	border-top-left-radius: 25px;
	box-shadow: inset 0.25px 1px 10px rgba(0, 0, 0, 0.1);
	pointer-events: none; /* This allows clicks to pass through */
}

	.container-RH-full {
		top: var(--header-height);
		left: 0;
		position: fixed;
		width: 100%;
		height: 100%;
		background: var(--greyscale-color-3);
		z-index: -5;
	
	}


.container-header-full {
	top: var(--header-height);
	position: fixed;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 10;
	box-shadow : inset 0.25px 1px 10px rgba(0, 0, 0, 0.1);
	pointer-events: none; /* This allows clicks to pass through */
}


	/*---------------------------------------------------------*/

	/* Display properties after the screen reach 768px or higher*/

	@media screen and (min-width: 768px) {
		body {
			padding-left: calc(var(--nav-width) + 10.75rem)
		}

        body-full {
            padding-left: 1rem;
        }



		.submenu-slidebar {
			margin-left: var(--nav-width);
		}

		.l-navbarfp {
			left: 0;
			padding: 0 0 0 0;
		}

		.t-navbarfp {
			padding-left: 70px;
		}

		.nav_logo-name {
			color: var(--highlight-color);
			display: flex;
			transition: var(--transition);
		}

		.nav_link_top.active {
			left: 0;
		}
	}

	/* MENU SHOW BEHAVIOUR */

	/*show navbar and add padding to the elements on toggle - Small Screen below 768px*/


	.l-navbarfp.show {
		width: calc(var(--nav-width) * 1)
	}

	.submenu-fix {
		margin-left: calc(var(--nav-width) * 1) /*submenu class when toggle-menu is activated at smaller screen*/
	}

	.body-fp {
		padding-left: 0px;
	}

	.suite-fp {
		margin-left: calc(var(--nav-width) + 0px);
	}

	.topmenu-dropdown {
		width: 30px !important;
		display: flex;
		justify-content: center !important;
		padding-left: 0;
		padding-right: 0;
		margin-left: 15px
	}




	/*show navbar and add padding to the elements on toggle and hover - Bigger Screen above 768px*/

	@media screen and (min-width: 768px) {
		.l-navbarfp.show {
			width: calc(var(--nav-width) * 3.9)
		}

		.submenu-fix {
			margin-left: calc(var(--nav-width) * 3.25) /*submenu class when toggle-menu is activated at bigger screen*/
		}

		.body-fp {
			padding-left: calc(var(--nav-width) + 0.5rem);
		}

		.body-full {
			padding-left: 0;
		}



		.suite-fp {
			margin-left: calc(var(--nav-width) * 3.25);
		}

		.topmenu-dropdown {
			margin-left: 0px;
		}

		.nav_link_top.active:after {
			top: calc(var(--header-height) - 0.6rem );
		}

		.full-page {
			margin-left: -190px;
		}


		/*show navbar and add padding to the elements on mouseover*/
		.show-over {
			width: calc(var(--nav-width) * 3.25)
		}

		.body-fp-over {
			padding-left: calc(var(--nav-width) + 180px)
		}

		.suite-fp-over {
			margin-left: calc(var(--nav-width) *3.25);
		}
	}


	.topmenu-dropdown {
		display: none;
	}

	@media screen and (max-width: 768px) {

		.nav_link_top {
			display: none;
		}

			.nav_link_top.active {
				display: flex;
				left: 10px !important;
				text-transform: uppercase;
			}

				.nav_link_top.active:after {
					display: none;
				}


		.topmenu-dropdown {
			color: var(--first-color);
			font-size: 1.5rem;
			width: 50px;
			display: flex;
			justify-content: start;
		}

		/*body container styling on mobile*/
		body {
			padding-left: 0px
		}
		.container-RH {
			border-top-left-radius: 0px;
		}

		.container-header {
			
			border-top-left-radius: 0px;
			
		}
		/*==============================*/

		
		.footer {
			width: calc(100% + var(--nav-width));
			display: flex;
			align-items: center;
			height: var(--footer-height);
			padding: 0 0.75rem 0 0.75rem; 
			background-color: var(--app-color);
			position: relative;
			z-index: 100;
			margin-left: calc(3 * (var(--nav-width)) - 11px);
			transition: var(--transition);
		}
	
		
		.footer-static {
			width: 100%;
			margin-left: 0;
			left: 0;			
		}

	}


	.custom-link {
		color: #000 !important; /* Set the desired text color */
		text-decoration: none; /* Remove underlines or decorations */
	}

	.page-link :after {
		color: #000 !important; /* Set the desired text color */
		text-decoration: none; /* Remove underlines or decorations */
	}


	.breadcrumb-item {
		font-size: calc(var(--normal-font-size));
		color: var(--greyscale-color-3);
		padding-top: 5px;
	}


		.breadcrumb-item.active {
			font-weight: 500;
			color: var(--highlight-color);
		}

		.breadcrumb-item + .breadcrumb-item::before {
			font-family: "Font Awesome 5 Free";
			content: "|";
		}


/*==============================*/

/* Melding Icon & Dropdown */

.melding-container {
	position: relative;
}

.melding-badge {
	position: absolute;
	bottom: 0.8rem;
	left: 0.8rem;
	background: red;
	color: white;
	font-size: 0.65rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 ;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	cursor: pointer;
}

	.melding-badge.expand {
		border-radius: 10px;
		right: 0px;
	}

.melding-dropdown {
	display: none; /* Ensure it's hidden by default */
	position: absolute;
	top: 3rem;
	right: 0;
	width: 350px;
	max-height: 500px;
	background: white;
	border: 1px solid;
	border-color: var(--greybutton-border);
	border-radius: var(--border-radius-button);
	box-shadow: 3px 3px 4px 0 rgba(0, 16, 34, 0.1);
	transition: var(--transition);
	padding: 10px 15px 20px 15px;
	z-index: 1000;
	flex-direction: column;
}

	.melding-dropdown hr {
		margin: 0;
	}

	.melding-dropdown .divider {
		height: 1px;
		background-color: #dee2e6;
		margin: 0.5rem -1rem;
	}

	.melding-dropdown.active {
		display: flex;
	}
.melding-header {
	font-weight: 500;
	position: sticky;
	top: 0;
	background: white;
	padding-bottom: 0px;
	z-index: 10;
}

.melding-items-container {
	flex-grow: 1;
	overflow-y: auto;
}

.melding-item {
	padding: 20px 8px;
}

	.melding-item:hover {
		background-color: var(--fpcolor-list-highlight);
	}

	.melding-item:last-child {
		border-bottom: none;
	}

.melding-item-title {
	font-weight: 500;
	font-size: var(--medium-font-size);
	display: block;
}

.melding-item-text {
	font-weight: 300;
	font-size: var(--medium-font-size);
	display: block;
	margin-bottom: 5px;
}

.melding-item-actions {
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.melding-item-actions .link-txt {
		font-size: var(--small-font-size);
		text-decoration: none;
	}

		.melding-item-actions .link-txt:hover {
			color: var(--fpcolor-1);
		}

a.btn-inline-dropdown {
	font-size: var(--small-font-size);
	font-weight: 300;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 5px;
	background-color: var(--fpcolor-1);
	color: white;
	border: none;
}

	a.btn-inline-dropdown:hover {
		background-color: var(--fpcolor-1-highlight);
	}

/*==============================*/


.h-submenu {
	height: var(--h-submenu-height)
}