/* 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: var(--spacing-3xl,90px);
}

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-md,16px);
}
nav.ledenportaal-nav ul li {
	gap: 0;
	max-width: 60px;
	width: 60px;
	flex: 0 0 60px;
	align-items: center;
}
nav.ledenportaal-nav ul li a {
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs,6px);
	font-size:14px;
	line-height: 1.1;
	min-height: 58px;
	width: 60px;
	max-width: 60px;
	flex: 0 0 60px;
}
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: 88px;
	overflow: hidden;
	text-overflow: ellipsis;
	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 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;
}

@media only screen and (max-width: 820px) {
nav.login-nav {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
nav.login-nav ul {
	width: auto;
	flex-wrap: nowrap;
}
nav.login-nav ul li {
	flex: 0 0 auto;
}
nav.login-nav ul li a {
	width: auto;
	padding-left: var(--spacing-md,10px);
	padding-right: var(--spacing-md,10px);
}
}

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));
}
}

* {
	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%);
}