.onf-team-view {
	--onf-team-accent: #054f11;
	color: var(--theme-text-color, inherit);
}

.onf-team-view .onf-team-grid {
	display: grid;
	grid-template-columns: repeat(var(--onf-team-columns-desktop, 3), minmax(0, 1fr));
	gap: var(--onf-team-card-gap, 30px);
}

.onf-team-view .onf-team-card {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-width: 0;
	min-height: 116px;
	padding: var(--onf-team-card-padding, 16px);
	border: 0;
	border-bottom: var(--onf-team-card-line-width, 3px) solid var(--onf-team-card-line, var(--onf-team-accent));
	border-radius: var(--onf-team-card-radius, 0);
	background: var(--onf-team-card-background, var(--theme-background-color, #fff));
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.onf-team-view .onf-team-card:hover {
	background: var(--theme-palette-color-6, #f5f5f5);
}

.onf-team-view .onf-team-card:focus-visible,
.onf-team-view .onf-team-tab:focus-visible,
.onf-team-view .onf-team-dialog-close:focus-visible {
	outline: 2px solid var(--onf-team-accent);
	outline-offset: 3px;
}

.onf-team-view .onf-team-photo-wrap {
	display: block;
	flex: 0 0 var(--onf-team-photo-size, 80px);
	width: var(--onf-team-photo-size, 80px);
	height: var(--onf-team-photo-size, 80px);
	overflow: hidden;
	border-radius: 50%;
	background: var(--theme-palette-color-6, #f2f4f2);
}

.onf-team-view .onf-team-photo {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
}

.onf-team-view .onf-team-photo-placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	color: var(--theme-border-color, #b4bdb6);
}

.onf-team-view .onf-team-photo-placeholder svg {
	width: 44%;
	height: 44%;
}

.onf-team-view .onf-team-card-content {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 6px;
}

.onf-team-view .onf-team-name {
	margin: 0;
	color: var(--onf-team-name-color, var(--theme-heading-color, inherit));
	font-family: inherit;
	font-size: var(--onf-team-name-size, calc(1em + 2px));
	font-weight: var(--onf-team-name-weight, 700);
	font-synthesis: var(--onf-team-name-font-synthesis, auto);
	line-height: 1.25;
	text-align: var(--onf-team-name-align, inherit);
	overflow-wrap: anywhere;
}

.onf-team-view .onf-team-role {
	margin: 0;
	color: var(--onf-team-role-color, var(--theme-text-color, inherit));
	font-family: inherit;
	font-size: var(--onf-team-role-size, calc(1em - 1px));
	font-weight: var(--onf-team-role-weight, inherit);
	font-synthesis: var(--onf-team-role-font-synthesis, auto);
	line-height: 1.4;
	text-align: var(--onf-team-role-align, inherit);
	overflow-wrap: anywhere;
}

.onf-team-view .onf-team-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--onf-team-tab-gap, 10px);
	margin: 0 0 28px;
}

.onf-team-view .onf-team-tablist[hidden],
.onf-team-view .onf-team-panel[hidden] {
	display: none;
}

.onf-team-view .onf-team-tab {
	max-width: 100%;
	min-height: 42px;
	padding: var(--onf-team-tab-padding-y, 9px) var(--onf-team-tab-padding-x, 18px);
	border: 1px solid var(--onf-team-tab-border, var(--onf-team-accent));
	border-radius: var(--onf-team-tab-radius, 999px);
	background: var(--onf-team-tab-background, transparent);
	box-shadow: none;
	color: var(--onf-team-tab-text, var(--onf-team-accent));
	font-family: inherit;
	font-size: var(--onf-team-tab-size, inherit);
	font-weight: var(--onf-team-tab-weight, inherit);
	font-synthesis: var(--onf-team-tab-font-synthesis, auto);
	line-height: 1.35;
	white-space: normal;
	text-align: var(--onf-team-tab-align, inherit);
	overflow-wrap: anywhere;
	cursor: pointer;
}

.onf-team-view .onf-team-tab:hover,
.onf-team-view .onf-team-tab[aria-selected="true"] {
	border-color: var(--onf-team-tab-active-background, var(--onf-team-accent));
	background: var(--onf-team-tab-active-background, var(--onf-team-accent));
	color: var(--onf-team-tab-active-text, #fff);
}

.onf-team-view .onf-team-area-name {
	margin: var(--onf-team-heading-margin-top, 40px) 0 var(--onf-team-heading-margin-bottom, 40px);
	color: var(--onf-team-heading-color, var(--theme-heading-color, inherit));
	font-family: inherit;
	font-size: var(--onf-team-heading-size, inherit);
	font-weight: var(--onf-team-heading-weight, inherit);
	font-synthesis: var(--onf-team-heading-font-synthesis, auto);
	text-align: var(--onf-team-heading-align, inherit);
}

.onf-team-view .onf-team-panel {
	margin: 0 0 32px;
}

.onf-team-view .onf-team-empty {
	margin: 0;
}

.onf-team-dialogs {
	position: relative;
	z-index: 0;
}

.onf-team-dialog {
	position: fixed;
	width: min(var(--onf-team-popup-width, 720px), calc(100vw - 32px));
	max-width: none;
	max-height: min(86vh, 900px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--onf-team-popup-radius, 4px);
	background: var(--onf-team-popup-background, var(--theme-background-color, #fff));
	color: var(--theme-text-color, inherit);
	box-shadow: 0 18px 60px rgb(0 0 0 / 22%);
}

.onf-team-dialog::backdrop {
	background: rgb(0 0 0 / 52%);
}

.onf-team-dialog-content {
	max-height: min(86vh, 900px);
	overflow-y: auto;
	padding: var(--onf-team-popup-padding-y, 40px) var(--onf-team-popup-padding-x, 56px);
	text-align: center;
}

.onf-team-dialog-close {
	position: absolute;
	top: 10px;
	right: 12px;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--onf-team-accent);
	font: inherit;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.onf-team-dialog-photo {
	display: block;
	width: var(--onf-team-popup-photo-size, 148px);
	height: var(--onf-team-popup-photo-size, 148px);
	margin: 0 auto 20px;
	border-radius: 50%;
	object-fit: cover;
}

.onf-team-dialog-photo.onf-team-photo-placeholder {
	background: var(--theme-palette-color-6, #f2f4f2);
}

.onf-team-dialog-name {
	margin: 0 0 8px;
	color: var(--onf-team-popup-name-color, var(--theme-heading-color, inherit));
	font-family: inherit;
	font-size: var(--onf-team-popup-name-size, inherit);
	font-weight: var(--onf-team-popup-name-weight, inherit);
	font-synthesis: var(--onf-team-popup-name-font-synthesis, auto);
	text-align: var(--onf-team-popup-name-align, inherit);
}

.onf-team-dialog-role {
	margin: 0;
	color: var(--onf-team-popup-role-color, var(--theme-text-color, inherit));
	font-family: inherit;
	font-size: var(--onf-team-popup-role-size, inherit);
	font-weight: var(--onf-team-popup-role-weight, inherit);
	font-synthesis: var(--onf-team-popup-role-font-synthesis, auto);
	text-align: var(--onf-team-popup-role-align, inherit);
}

.onf-team-dialog-divider {
	width: min(100%, 150px);
	height: 0;
	margin: 24px auto;
	border: 0;
	border-top: 2px solid var(--onf-team-popup-divider, var(--onf-team-accent));
}

.onf-team-dialog-profile {
	color: var(--onf-team-popup-profile-color, var(--theme-text-color, inherit));
	font-family: inherit;
	font-size: var(--onf-team-popup-profile-size, inherit);
	font-weight: var(--onf-team-popup-profile-weight, inherit);
	font-synthesis: var(--onf-team-popup-profile-font-synthesis, auto);
	text-align: var(--onf-team-popup-profile-align, left);
	text-align-last: var(--onf-team-popup-profile-align-last, auto);
	text-justify: var(--onf-team-popup-profile-text-justify, auto);
	hyphens: var(--onf-team-popup-profile-hyphens, manual);
}

.onf-team-dialog-profile p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.onf-team-view .onf-team-grid {
		grid-template-columns: repeat(var(--onf-team-columns-tablet, 2), minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.onf-team-view .onf-team-grid {
		grid-template-columns: repeat(var(--onf-team-columns-mobile, 1), minmax(0, 1fr));
	}

	.onf-team-view .onf-team-card {
		min-height: 100px;
		padding: var(--onf-team-card-padding, 16px);
	}

	.onf-team-view .onf-team-photo-wrap {
		flex-basis: min(var(--onf-team-photo-size, 80px), 68px);
		width: min(var(--onf-team-photo-size, 80px), 68px);
		height: min(var(--onf-team-photo-size, 80px), 68px);
	}

	.onf-team-view .onf-team-tab {
		flex: 1 1 auto;
	}

	.onf-team-dialog-content {
		padding: var(--onf-team-popup-padding-y, 28px) var(--onf-team-popup-padding-x, 22px);
	}

	.onf-team-dialog-photo {
		width: min(var(--onf-team-popup-photo-size, 148px), 120px);
		height: min(var(--onf-team-popup-photo-size, 148px), 120px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.onf-team-view *,
	.onf-team-dialog * {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
	}
}