/* 2026-08-04 v1.23
 * - Keeps five-item phone navigation fitted and makes longer admin navigation horizontally scrollable.
 *
 * 2026-08-04 v1.22
 * - Widens the compact desktop navigation so labels remain fully readable.
 *
 * 2026-08-04 v1.21
 * - Restores the compact desktop and tablet navigation while retaining fitted phone items.
 *
 * 2026-08-04 v1.20
 * - Removes the inherited 72px phone navigation anchor basis.
 *
 * 2026-08-04 v1.19
 * - Allows long phone navigation labels to wrap inside their fitted item.
 *
 * 2026-08-04 v1.18
 * - Fits all portal actions inside the phone bottom navigation without clipping labels.
 *
 * 2026-08-03 v1.17
 * - Gives desktop portal navigation labels enough height to render without clipping.
 *
 * 2026-07-24 v1.16
 * - Moved mobile login-navigation positioning to the phone stylesheet.
 *
 * 2026-07-24 v1.14
 * - Added login-navigation avatar sizing and a contained organization-logo variant.
 *
 * 2026-07-19 v1.13
 * - Keeps the login navigation inside the fixed mobile header instead of covering public forms.
 *
 * 2026-06-17 v1.12
 * - Prevented portal nav anchors from inheriting full width through the generic child-width rule.
 * - Limited portal nav list items to a fixed narrow width.
 * - Added explicit max-height/max-width for portal nav icon boxes.
 * - Fixed portal nav icon boxes inheriting full item width through the generic child-width rule.
 * - Tightened portal nav icon/text spacing and prevented selected icons from overlapping nearby labels.
 * - Restored responsive portal navigation as a bottom bar on smaller screens.
 * - Raised the portal navigation above the dashboard content.
 * - Increased the portal navigation icon size for better readability.
*/
.fa { 
	
}
nav.ledenportaal-nav {
	position: fixed;
	top: var(--spacing-2xl,60px);
	left: var(--spacing-2xl,50px);
	z-index: 20;
	/*left: var(--spacing-2xl,50px);*/
	
	padding:  var(--spacing-lg,20px) var(--spacing-md,10px);
	border-radius: var(--spacing-lg,20px); 
	min-width: 120px;
}

nav.ledenportaal-nav,
.portal-wrapper > .card { 
	box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.012), 0px 0px 0px 10px rgba(0,0,0,0.012);
}

nav.ledenportaal-nav,
nav.ledenportaal-nav ul,
nav.ledenportaal-nav ul li,
nav.ledenportaal-nav ul li a {
	display: flex;
	flex-direction: column;
	text-align: center;
}
nav.ledenportaal-nav {
	gap: 0;
}
nav.ledenportaal-nav ul {
	gap: var(--spacing-sm,8px);
}
nav.ledenportaal-nav ul li {
	gap: 0;
	max-width: 110px;
	width: 110px;
	flex: 0 0 110px;
	align-items: center;
}
nav.ledenportaal-nav ul li a {
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs,6px);
	font-size:12px;
	line-height: 1.1;
	min-height: 58px;
	width: 110px;
	max-width: 110px;
	flex: 0 0 110px;
}
nav.ledenportaal-nav ul li a > *[class*="fa"]:active {
	box-shadow: 0px 0px 10px 10px currentColor!important;
}
nav.ledenportaal-nav ul li a > *[class*="fa"] { 
	border-radius: 30px;
	aspect-ratio:1;
	display: inline-flex;
	justify-content: center!important;
	width: 34px;
	height: 34px;
	max-width: 34px;
	max-height: 34px;
	flex: 0 0 34px;
	
}
nav.ledenportaal-nav ul li a > *[class*="fa"] > * {
	margin: auto!important;
}
nav.ledenportaal-nav ul li a *[class*="fa"]  {
	font-size: var(--spacing-lg,22px)!important;
}

nav.ledenportaal-nav > *,
nav.ledenportaal-nav ul > *,
nav.ledenportaal-nav ul li > *:not(a) {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

nav.ledenportaal-nav ul li a > *[class*="fa"] {
	width: 34px!important;
	height: 34px!important;
	max-width: 34px;
	max-height: 34px;
	min-width: 34px;
	flex: 0 0 34px;
	margin-left: auto;
	margin-right: auto;
}

nav.ledenportaal-nav ul li a .text {
	display: block;
	width: 100%;
	max-width: 110px;
	overflow: visible;
	overflow-wrap: anywhere;
	text-overflow: clip;
	white-space: normal;
	line-height: 1.1;
}

nav.ledenportaal-nav ul li:hover a > *:not(span),
nav.ledenportaal-nav:not(:hover) ul li.selected a > *:not(span),
nav.ledenportaal-nav ul li.selected a *[class*="fa-"] {
	transform: scale(1.12,1.12);
}

nav.login-nav {
	display: flex;
}
nav.login-nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
}
nav.login-nav ul li {
	display: flex;
	flex-direction: row;
	flex: 1 1 0;
}
nav.login-nav ul li a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md,10px);
	width: 100%;
}
nav.login-nav .avatar {
	display: block;
	width: 34px;
	height: 34px;
	min-width: 34px;
	max-width: 34px;
	max-height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	object-fit: cover;
}
nav.login-nav .avatar-logo {
	border-radius: 8px;
	object-fit: contain;
}
nav.login-nav ul li a > *[class*="fa"] { 
	border-radius: 30px;
	aspect-ratio:1;
	display: inline-flex;
	justify-content: center!important;
}
nav.login-nav ul li a > *[class*="fa"] > * {
	margin: auto!important;
}

main {
	padding:  var(--spacing-2xl,60px);
}

@media only screen and (max-width: 1280px) {
nav.ledenportaal-nav {
	top: auto;
	left: 50%;
	right: auto;
	bottom: var(--spacing-md,10px);
	transform: translateX(-50%);
	width: calc(100% - (var(--spacing-md,10px) * 2));
	max-width: calc(100% - (var(--spacing-md,10px) * 2));
	min-width: 0;
	padding: var(--spacing-sm,8px) var(--spacing-md,10px);
	box-sizing: border-box;
	overflow: hidden;
}

nav.ledenportaal-nav > div {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

nav.ledenportaal-nav,
nav.ledenportaal-nav ul,
nav.ledenportaal-nav ul li {
	flex-direction: row;
	align-items: center;
}

nav.ledenportaal-nav ul {
	justify-content: flex-start;
	gap: var(--spacing-md,10px);
	min-width: max-content;
}

nav.ledenportaal-nav ul li {
	flex: 0 0 auto;
	max-width: 60px;
	width: 60px;
	align-items: center;
}

nav.ledenportaal-nav ul li a {
	gap: var(--spacing-xs,6px);
	min-height: 48px;
	font-size: 12px;
	width: 60px;
	max-width: 60px;
	flex: 0 0 60px;
}

nav.ledenportaal-nav ul li a *[class*="fa"] {
	font-size: var(--spacing-lg,20px)!important;
}

main {
	padding-bottom: calc(var(--spacing-2xl,60px) + var(--spacing-3xl,90px));
}
}

@media only screen and (min-width: 821px) and (max-width: 1280px) {
nav.ledenportaal-nav ul {
	justify-content:center;
}
}

@media only screen and (max-width: 820px) {
nav.ledenportaal-nav > div {
	overflow-x:hidden;
}

nav.ledenportaal-nav ul {
	width:100%;
	min-width:0;
	gap:2px;
}

nav.ledenportaal-nav ul li {
	display:flex!important;
	flex:1 1 0!important;
	width:auto;
	min-width:0;
	max-width:none;
}

nav.ledenportaal-nav ul li a {
	width:100%;
	min-width:0!important;
	max-width:none;
	flex:1 1 auto!important;
}

nav.ledenportaal-nav ul li a .text {
	max-width:100%;
	font-size:10px;
	overflow:visible;
	overflow-wrap:anywhere;
	text-overflow:clip;
	white-space:normal!important;
}

nav.ledenportaal-nav:has(li:nth-child(6)) > div {
	overflow-x:auto;
}

nav.ledenportaal-nav:has(li:nth-child(6)) ul {
	width:max-content;
	min-width:max-content;
	gap:4px;
}

nav.ledenportaal-nav:has(li:nth-child(6)) ul li,
nav.ledenportaal-nav:has(li:nth-child(6)) ul li a {
	flex:0 0 72px!important;
	width:72px;
	max-width:72px;
}

nav.ledenportaal-nav:has(li:nth-child(6)) ul li a .text {
	font-size:9px;
	overflow-wrap:normal;
}
}

* {
	line-height: 1.25;
}
*:is(main, main div):has( > *:is(h1, h2, h3, p)) {
	display: flex;
	flex-direction: column;
	gap:10px;
}


.button-group label:first-child {
	margin-right: 10px;
}

.button:is(.selected, :active), tr:has(input[type="checkbox"]:checked) td {
	background-color: rgba(96, 186, 244, 0.15)!important;
}

.content-padding {
	padding: 30px;
}

div:not(:hover) > .no-hover-hidden {
	filter: opacity(0%);
}