/*
	|--------------------------------------------------------------------------
	| SNOOC moderne huisstijl
	|--------------------------------------------------------------------------
	*/

	:root {
		--sn-bg: #f8f4f5;
		--sn-surface: rgba(255, 255, 255, 0.96);

		--sn-red: #9f1d35;
		--sn-red-dark: #741326;
		--sn-red-darker: #4f0d1b;
		--sn-red-soft: #fff1f3;
		--sn-red-pale: #fbe7eb;

		--sn-navy: #24161a;
		--sn-text: #2d2024;
		--sn-muted: #75636a;

		--sn-border: #eadde0;
		--sn-border-strong: #ddc5ca;

		--sn-success: #087f5b;
		--sn-warning: #b45309;
		--sn-error: #be123c;

		--sn-radius: 18px;

		--sn-shadow:
			0 18px 50px rgba(79, 13, 27, 0.09);
	}

	/*
	|--------------------------------------------------------------------------
	| Reset
	|--------------------------------------------------------------------------
	*/

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

	html {
		min-height: 100%;
		scroll-behavior: smooth;
	}

	body.snooc-app {
		min-height: 100vh;
		margin: 0;

		background:
			radial-gradient(
				circle at 8% 0,
				rgba(159, 29, 53, 0.09),
				transparent 28rem
			),
			radial-gradient(
				circle at 100% 22%,
				rgba(116, 19, 38, 0.07),
				transparent 30rem
			),
			var(--sn-bg);

		color: var(--sn-text);

		font-family:
			Inter,
			Roboto,
			Arial,
			sans-serif;

		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	body.snooc-app::before {
		content: "";

		position: fixed;
		inset: 0;
		z-index: -1;

		pointer-events: none;

		background-image:
			linear-gradient(
				rgba(159, 29, 53, 0.025) 1px,
				transparent 1px
			),
			linear-gradient(
				90deg,
				rgba(159, 29, 53, 0.025) 1px,
				transparent 1px
			);

		background-size: 32px 32px;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
	}

	a {
		color: inherit;
	}

	/*
	|--------------------------------------------------------------------------
	| Content
	|--------------------------------------------------------------------------
	*/

	#content {
		width: min(1500px, calc(100% - 32px)) !important;
		min-height: calc(100vh - 150px);

		margin: 24px auto 50px !important;

		height: auto !important;
	}

	/*
	|--------------------------------------------------------------------------
	| Algemene kaarten
	|--------------------------------------------------------------------------
	*/

	.ui.segment,
	.segmentbg,
	.form_container,
	.card,
	.panel,
	.snooc-card {
		border: 1px solid rgba(234, 221, 224, 0.95) !important;
		border-radius: var(--sn-radius) !important;

		background: var(--sn-surface) !important;

		box-shadow: var(--sn-shadow) !important;
	}

	.ui.segment {
		padding: clamp(16px, 2.3vw, 28px) !important;
	}

	.ui.header,
	.app-light-blue {
		color: var(--sn-red-dark) !important;
	}

	.ui.dividing.header {
		padding-bottom: 14px !important;

		border-bottom:
			1px solid var(--sn-border) !important;
	}

	/*
	|--------------------------------------------------------------------------
	| Buttons
	|--------------------------------------------------------------------------
	*/

	button,
	.button,
	.ui.button,
	input[type="submit"],
	input[type="button"] {
		border-radius: 11px !important;

		font-weight: 700 !important;

		transition:
			transform 0.18s ease,
			box-shadow 0.18s ease,
			filter 0.18s ease !important;
	}

	.ui.primary.button,
	.ui.blue.button,
	input[type="submit"],
	.snooc-primary-button {
		border: 0 !important;

		background:
			linear-gradient(
				135deg,
				var(--sn-red),
				var(--sn-red-dark)
			) !important;

		color: #ffffff !important;

		box-shadow:
			0 9px 22px rgba(159, 29, 53, 0.24) !important;
	}

	button:hover,
	.button:hover,
	.ui.button:hover {
		filter: brightness(1.02);
	}

	.ui.primary.button:hover,
	.ui.blue.button:hover,
	input[type="submit"]:hover,
	.snooc-primary-button:hover {
		transform: translateY(-1px);

		box-shadow:
			0 13px 27px rgba(159, 29, 53, 0.30) !important;
	}

	/*
	|--------------------------------------------------------------------------
	| Inputs
	|--------------------------------------------------------------------------
	*/

	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	input[type="search"],
	select,
	textarea {
		min-height: 44px;

		padding: 10px 12px !important;

		border: 1px solid var(--sn-border-strong) !important;
		border-radius: 11px !important;

		outline: none;

		background: #ffffff !important;
		color: var(--sn-text) !important;

		transition:
			border-color 0.18s ease,
			box-shadow 0.18s ease;
	}

	input:focus,
	select:focus,
	textarea:focus {
		border-color: var(--sn-red) !important;

		box-shadow:
			0 0 0 4px rgba(159, 29, 53, 0.11) !important;
	}

	/*
	|--------------------------------------------------------------------------
	| Tabellen
	|--------------------------------------------------------------------------
	*/

	.table-responsive,
	.snooc-table-wrap {
		width: 100%;

		overflow: auto;

		border: 1px solid var(--sn-border);
		border-radius: 14px;

		background: #ffffff;
	}

	.ui.table,
	table {
		width: 100% !important;

		overflow: hidden;

		border: 1px solid var(--sn-border) !important;
		border-radius: 14px !important;

		border-collapse: separate !important;
		border-spacing: 0 !important;

		background: #ffffff !important;
	}

	.ui.table thead th,
	table thead th {
		position: sticky;
		top: 0;

		border-bottom:
			1px solid var(--sn-border) !important;

		background: #f8ecef !important;
		color: #5f2432 !important;

		font-size: 0.78rem !important;
		font-weight: 800;
		letter-spacing: 0.045em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.ui.table td,
	.ui.table th,
	table td,
	table th {
		padding: 0.78rem 0.85rem !important;
	}

	.ui.table tbody tr,
	table tbody tr {
		transition:
			background 0.16s ease;
	}

	.ui.table tbody tr:hover,
	table tbody tr:hover {
		background: #fff7f8 !important;
	}

	.snooc-sortable {
		cursor: pointer;
		user-select: none;
	}

	.snooc-sortable::after {
		content: " ↕";
		opacity: 0.35;
	}

	.snooc-sortable[data-dir="asc"]::after {
		content: " ↑";
		opacity: 1;
	}

	.snooc-sortable[data-dir="desc"]::after {
		content: " ↓";
		opacity: 1;
	}

	/*
	|--------------------------------------------------------------------------
	| Zoeken en filteren
	|--------------------------------------------------------------------------
	*/

	.snooc-toolbar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;

		margin: 0 0 16px;
	}

	.snooc-live-search {
		position: relative;

		flex: 1;
		min-width: 240px;
	}

	.snooc-live-search input {
		width: 100%;

		padding-left: 42px !important;
	}

	.snooc-live-search::before {
		content: "⌕";

		position: absolute;
		top: 8px;
		left: 14px;
		z-index: 2;

		color: var(--sn-red);

		font-size: 22px;
	}

	.snooc-status {
		color: var(--sn-muted);

		font-size: 0.86rem;
	}

	/*
	|--------------------------------------------------------------------------
	| Progress
	|--------------------------------------------------------------------------
	*/

	#snooc-progress {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;

		width: 0;
		height: 3px;

		opacity: 0;

		background:
			linear-gradient(
				90deg,
				#d85a72,
				var(--sn-red),
				var(--sn-red-dark)
			);

		transition:
			width 0.2s ease,
			opacity 0.25s ease;
	}

	#snooc-progress.active {
		width: 72%;
		opacity: 1;
	}

	/*
	|--------------------------------------------------------------------------
	| Toasts
	|--------------------------------------------------------------------------
	*/

	#snooc-toast-region {
		position: fixed;
		right: 18px;
		bottom: 18px;
		z-index: 99999;

		display: grid;
		gap: 10px;
	}

	.snooc-toast {
		max-width: 390px;

		padding: 13px 16px;

		border-radius: 13px;

		background: var(--sn-red-dark);
		color: #ffffff;

		box-shadow:
			0 18px 45px rgba(79, 13, 27, 0.25);

		animation: snIn 0.2s ease;
	}

	.snooc-toast.success {
		background: var(--sn-success);
	}

	.snooc-toast.error {
		background: var(--sn-error);
	}

	@keyframes snIn {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
	}

	/*
	|--------------------------------------------------------------------------
	| Inline edit
	|--------------------------------------------------------------------------
	*/

	.snooc-inline-editable {
		outline:
			1px dashed rgba(159, 29, 53, 0.42);

		outline-offset: -4px;

		cursor: text;
	}

	.snooc-inline-editable:focus {
		background: #fff8e8 !important;

		outline:
			2px solid var(--sn-red);
	}

	/*
	|--------------------------------------------------------------------------
	| Hoofdnavigatie
	|--------------------------------------------------------------------------
	*/

	#topnav {
		position: sticky;
		top: 0;
		z-index: 5000;

		width: 100%;

		border-bottom:
			1px solid rgba(255, 255, 255, 0.09);

		background:
			linear-gradient(
				110deg,
				#3e0d19 0%,
				#651225 55%,
				#79162b 100%
			);

		box-shadow:
			0 12px 32px rgba(79, 13, 27, 0.24);

		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
	}

	#topnav .snooc-main-nav {
		position: relative;

		display: flex;
		align-items: center;

		width: 100%;
		min-height: 74px;

		margin: 0;
		padding: 9px clamp(16px, 2.2vw, 34px);

		background: transparent !important;
	}

	/*
	|--------------------------------------------------------------------------
	| Logo
	|--------------------------------------------------------------------------
	*/

	#topnav .navbar-brand {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;

		margin: 0 18px 0 0;
		padding: 4px 8px;

		border-radius: 12px;

		text-decoration: none;
	}

	#topnav .navbar-brand:hover,
	#topnav .navbar-brand:focus-visible {
		outline: none;

		background:
			rgba(255, 255, 255, 0.08);
	}

	#topnav .navbar-brand img {
		display: block;

		width: auto;
		height: 48px;
		max-width: 150px;

		object-fit: contain;

		filter:
			drop-shadow(
				0 6px 15px rgba(0, 0, 0, 0.24)
			);
	}

	/*
	|--------------------------------------------------------------------------
	| Navigatie-items
	|--------------------------------------------------------------------------
	*/

	#topnav .navbar-collapse {
		display: flex;
		flex: 1 1 auto;
		align-items: center;

		min-width: 0;
	}

	#topnav .navbar-nav {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: 4px;

		min-width: 0;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	#topnav .nav-item,
	#topnav .dropdown-submenu,
	#topnav .dropdown-menu > li {
		position: relative;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	#topnav .nav-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;

		min-height: 44px;

		padding: 10px 12px !important;

		border: 0;
		border-radius: 12px;

		background: transparent;
		color: rgba(255, 255, 255, 0.82) !important;

		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;

		cursor: pointer;

		transition:
			color 0.18s ease,
			background-color 0.18s ease,
			box-shadow 0.18s ease;
	}

	#topnav .nav-link i,
	#topnav .dropdown-item i {
		display: inline-flex;
		flex: 0 0 19px;
		align-items: center;
		justify-content: center;

		width: 19px;

		border: 0 !important;

		font-size: 15px;
	}

	#topnav .nav-link i {
		color: #f1bcc7;
	}

	#topnav .nav-link:hover,
	#topnav .nav-link:focus-visible,
	#topnav .nav-item.is-open > .nav-link {
		outline: none;

		background:
			rgba(255, 255, 255, 0.11) !important;

		color: #ffffff !important;
	}

	#topnav .nav-link:hover i,
	#topnav .nav-item.is-open > .nav-link i {
		color: #ffffff;
	}

	#topnav .nav-item.active > .nav-link {
		background:
			linear-gradient(
				135deg,
				#c83d58,
				#9f1d35
			) !important;

		color: #ffffff !important;

		box-shadow:
			0 9px 22px rgba(37, 3, 12, 0.30);
	}

	#topnav .nav-item.active > .nav-link i {
		color: #ffffff;
	}

	/*
	|--------------------------------------------------------------------------
	| Dropdownpijlen
	|--------------------------------------------------------------------------
	*/

	#topnav .dropdown-toggle::after {
		content: "";

		display: inline-block;

		width: 7px;
		height: 7px;

		margin-left: 3px;

		border-right:
			2px solid currentColor;

		border-bottom:
			2px solid currentColor;

		transform:
			rotate(45deg)
			translateY(-2px);

		transition:
			transform 0.18s ease;
	}

	#topnav .nav-item.is-open >
	.dropdown-toggle::after {
		transform:
			rotate(225deg)
			translate(-1px, -1px);
	}

	/*
	|--------------------------------------------------------------------------
	| Dropdownmenu
	|--------------------------------------------------------------------------
	*/

	#topnav .dropdown-menu {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		z-index: 5100;

		display: none;

		width: max-content;
		min-width: 245px;
		max-width:
			min(360px, calc(100vw - 24px));

		margin: 0;
		padding: 8px;

		overflow: visible;

		border:
			1px solid var(--sn-border);

		border-radius: 16px;

		background:
			rgba(255, 255, 255, 0.99);

		box-shadow:
			0 22px 55px rgba(79, 13, 27, 0.19);

		list-style: none;
	}

	#topnav .nav-item.is-open >
	.dropdown-menu,
	#topnav .dropdown-submenu.is-open >
	.dropdown-menu {
		display: block;

		animation:
			snoocMenuIn 0.16s ease both;
	}

	@keyframes snoocMenuIn {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	#topnav .dropdown-item {
		display: flex;
		align-items: center;
		gap: 9px;

		width: 100%;
		min-height: 42px;

		padding: 10px 12px !important;

		border: 0;
		border-radius: 10px;

		background: transparent;
		color: #3a2930 !important;

		font-size: 13.5px;
		font-weight: 650;
		line-height: 1.35;
		text-align: left;
		text-decoration: none;
		white-space: normal;

		cursor: pointer;

		transition:
			background-color 0.16s ease,
			color 0.16s ease,
			padding-left 0.16s ease;
	}

	#topnav .dropdown-item i {
		color: #8c6570;
	}

	#topnav .dropdown-item:hover,
	#topnav .dropdown-item:focus-visible,
	#topnav .dropdown-submenu.is-open >
	.dropdown-item {
		padding-left: 15px !important;

		outline: none;

		background:
			var(--sn-red-soft) !important;

		color:
			var(--sn-red) !important;
	}

	#topnav .dropdown-item:hover i,
	#topnav .dropdown-item:focus-visible i,
	#topnav .dropdown-submenu.is-open >
	.dropdown-item i {
		color: var(--sn-red);
	}

	#topnav .dropdown-divider {
		height: 1px;

		margin: 7px 5px;

		border: 0;

		background: var(--sn-border);
	}

	/*
	|--------------------------------------------------------------------------
	| Subdropdown
	|--------------------------------------------------------------------------
	*/

	#topnav .dropdown-submenu >
	.dropdown-toggle {
		padding-right: 34px !important;
	}

	#topnav .dropdown-submenu >
	.dropdown-toggle::after {
		position: absolute;
		top: 50%;
		right: 14px;

		width: 7px;
		height: 7px;

		margin: 0;

		transform:
			translateY(-50%)
			rotate(-45deg);
	}

	#topnav .dropdown-submenu.is-open >
	.dropdown-toggle::after {
		transform:
			translateY(-50%)
			rotate(135deg);
	}

	#topnav .dropdown-submenu >
	.dropdown-menu {
		top: -8px;
		left: calc(100% + 8px);
	}

	/*
	|--------------------------------------------------------------------------
	| Hamburger
	|--------------------------------------------------------------------------
	*/

	#topnav .navbar-toggler {
		display: none;
		flex: 0 0 46px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 5px;

		width: 46px;
		height: 46px;

		margin: 0 0 0 auto;
		padding: 0;

		border:
			1px solid rgba(255, 255, 255, 0.16) !important;

		border-radius: 13px !important;

		background:
			rgba(255, 255, 255, 0.08) !important;

		color: #ffffff;

		box-shadow: none !important;

		cursor: pointer;

		transform: none !important;
	}

	#topnav .navbar-toggler:hover,
	#topnav .navbar-toggler:focus-visible {
		outline: none;

		background:
			rgba(255, 255, 255, 0.15) !important;
	}

	#topnav .snooc-menu-line {
		display: block;

		width: 21px;
		height: 2px;

		border-radius: 99px;

		background: #ffffff;

		transition:
			transform 0.18s ease,
			opacity 0.18s ease;
	}

	#topnav .mobile-open
	.snooc-menu-line:nth-child(1) {
		transform:
			translateY(7px)
			rotate(45deg);
	}

	#topnav .mobile-open
	.snooc-menu-line:nth-child(2) {
		opacity: 0;
	}

	#topnav .mobile-open
	.snooc-menu-line:nth-child(3) {
		transform:
			translateY(-7px)
			rotate(-45deg);
	}

	/*
	|--------------------------------------------------------------------------
	| Gebruiker rechts
	|--------------------------------------------------------------------------
	*/

	#topnav .snooc-user-summary {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 10px;

		max-width: 250px;

		margin-left: 14px;
		padding: 7px 10px;

		border:
			1px solid rgba(255, 255, 255, 0.11);

		border-radius: 14px;

		background:
			rgba(255, 255, 255, 0.07);

		color: #ffffff;
	}

	#topnav .snooc-user-avatar {
		display: flex;
		flex: 0 0 34px;
		align-items: center;
		justify-content: center;

		width: 34px;
		height: 34px;

		border-radius: 11px;

		background:
			linear-gradient(
				135deg,
				#d6556d,
				var(--sn-red)
			);

		color: #ffffff;

		font-size: 12px;
		font-weight: 800;
	}

	#topnav .snooc-user-summary-text {
		display: flex;
		min-width: 0;
		flex-direction: column;

		line-height: 1.2;
	}

	#topnav .snooc-user-summary-text strong,
	#topnav .snooc-user-summary-text small {
		overflow: hidden;

		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#topnav .snooc-user-summary-text strong {
		font-size: 13px;
	}

	#topnav .snooc-user-summary-text small {
		margin-top: 3px;

		color: #e5c4cc;

		font-size: 11px;
	}

	/*
	|--------------------------------------------------------------------------
	| Contextbalk
	|--------------------------------------------------------------------------
	*/

	.snooc-context-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;

		width: 100%;
		min-height: 46px;

		padding:
			9px clamp(16px, 2.2vw, 34px);

		border-bottom:
			1px solid rgba(79, 13, 27, 0.18);

		background:
			linear-gradient(
				90deg,
				#87182e,
				#a9233d
			);

		color: #ffffff;

		box-shadow:
			0 7px 20px rgba(79, 13, 27, 0.20);
	}

	.snooc-context-title,
	.snooc-context-schools {
		display: flex;
		align-items: center;
		gap: 9px;
	}

	.snooc-context-title {
		font-size: 14px;
		font-weight: 800;
	}

	.snooc-context-mark {
		display: block;

		width: 9px;
		height: 9px;

		border-radius: 50%;

		background: #ffffff;

		box-shadow:
			0 0 0 5px rgba(255, 255, 255, 0.15);
	}

	.snooc-context-schools {
		min-width: 0;

		font-size: 12.5px;
	}

	.snooc-context-schools span {
		color: rgba(255, 255, 255, 0.72);
	}

	.snooc-context-schools strong {
		overflow: hidden;

		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*
	|--------------------------------------------------------------------------
	| Notification
	|--------------------------------------------------------------------------
	*/

	.snooc-global-notification {
		position: fixed;
		top: 20px;
		left: 50%;
		z-index: 999999;

		display: flex;
		align-items: flex-start;
		gap: 14px;

		width: calc(100% - 40px);
		max-width: 760px;

		padding: 16px 52px 16px 18px;

		border: 1px solid transparent;
		border-radius: 16px;

		box-shadow:
			0 14px 40px rgba(15, 23, 42, 0.18),
			0 4px 10px rgba(15, 23, 42, 0.08);

		transform: translateX(-50%);

		animation:
			notificationIn 0.25s ease;
	}

	@keyframes notificationIn {
		from {
			opacity: 0;
			transform:
				translate(-50%, -12px);
		}

		to {
			opacity: 1;
			transform:
				translate(-50%, 0);
		}
	}

	.snooc-global-notification-success {
		border-color: #a7f3d0;

		background: #ecfdf5;
		color: #047857;
	}

	.snooc-global-notification-error {
		border-color: #fecdd3;

		background: #fff1f2;
		color: #be123c;
	}

	.snooc-global-notification-warning {
		border-color: #fde68a;

		background: #fffbeb;
		color: #b45309;
	}

	.snooc-global-notification-info {
		border-color: #e9b7c1;

		background: var(--sn-red-soft);
		color: var(--sn-red-dark);
	}

	.snooc-global-notification-icon {
		display: flex;
		flex: 0 0 24px;
		align-items: center;
		justify-content: center;

		width: 24px;
		height: 24px;

		margin-top: 2px;
	}

	.snooc-global-notification-icon svg {
		width: 24px;
		height: 24px;
	}

	.snooc-global-notification-content {
		flex: 1;
		min-width: 0;
	}

	.snooc-global-notification-title {
		margin: 0 0 4px;

		font-size: 15px;
		font-weight: 800;
	}

	.snooc-global-notification-message {
		font-size: 14px;
		line-height: 1.6;
	}

	.snooc-global-notification-message p {
		margin: 0;
	}

	.snooc-global-notification-message a {
		color: inherit;

		font-weight: 700;
	}

	.snooc-notification-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		margin-left: 12px;
		padding: 8px 15px;

		border-radius: 9px;

		color: #ffffff !important;

		font-size: 12px;
		font-weight: 700;
		text-decoration: none !important;

		transition:
			transform 0.18s ease,
			filter 0.18s ease;
	}

	.snooc-global-notification-success
	.snooc-notification-button {
		background: #047857;
	}

	.snooc-global-notification-error
	.snooc-notification-button {
		background: #be123c;
	}

	.snooc-global-notification-warning
	.snooc-notification-button {
		background: #b45309;
	}

	.snooc-global-notification-info
	.snooc-notification-button {
		background: var(--sn-red);
	}

	.snooc-notification-button:hover {
		color: #ffffff !important;

		filter: brightness(0.92);

		text-decoration: none !important;

		transform: translateY(-1px);
	}

	.snooc-global-notification-close {
		position: absolute;
		top: 10px;
		right: 10px;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 34px;
		height: 34px;

		padding: 0;

		border: 0;
		border-radius: 9px;

		background: transparent;
		color: inherit;

		cursor: pointer;
	}

	.snooc-global-notification-close:hover {
		background: rgba(0, 0, 0, 0.08);
	}

	.snooc-global-notification-close svg {
		width: 18px;
		height: 18px;
	}

	/*
	|--------------------------------------------------------------------------
	| Wachtwoordpagina
	|--------------------------------------------------------------------------
	*/

	.snooc-password-page {
		width: 100%;
		min-height: calc(100vh - 80px);

		padding: 28px;

		background:
			radial-gradient(
				circle at top left,
				rgba(159, 29, 53, 0.08),
				transparent 32%
			),
			#f8f4f5;
	}

	.snooc-password-panel {
		display: flex;
		justify-content: center;

		width: 100%;
	}

	.snooc-password-card {
		width: 100%;
		max-width: 720px;

		padding: 34px;

		border: 1px solid var(--sn-border);
		border-radius: 24px;

		background: #ffffff;

		box-shadow:
			0 20px 50px rgba(79, 13, 27, 0.09);
	}

	.snooc-password-header {
		display: flex;
		align-items: center;
		gap: 18px;

		margin-bottom: 28px;
	}

	.snooc-password-header-icon {
		display: flex;
		flex: 0 0 66px;
		align-items: center;
		justify-content: center;

		width: 66px;
		height: 66px;

		border-radius: 19px;

		background: var(--sn-red-soft);
		color: var(--sn-red);
	}

	.snooc-password-header-icon svg {
		width: 30px;
		height: 30px;
	}

	.snooc-password-eyebrow {
		margin: 0 0 5px;

		color: var(--sn-red);

		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.snooc-password-title {
		margin: 0;

		color: var(--sn-text);

		font-size: 29px;
		font-weight: 800;
	}

	.snooc-password-subtitle {
		margin: 7px 0 0;

		color: var(--sn-muted);

		font-size: 14px;
	}

	.snooc-password-errors {
		display: flex;
		gap: 13px;

		margin-bottom: 22px;
		padding: 15px 17px;

		border: 1px solid #fecdd3;
		border-radius: 14px;

		background: #fff1f2;
	}

	.snooc-password-errors-icon {
		display: flex;
		flex: 0 0 22px;

		width: 22px;
		height: 22px;

		color: #e11d48;
	}

	.snooc-password-errors-icon svg {
		width: 22px;
		height: 22px;
	}

	.snooc-password-errors-title {
		margin: 0 0 6px;

		color: #9f1239;

		font-size: 14px;
		font-weight: 800;
	}

	.snooc-password-errors-list {
		margin: 0;
		padding-left: 19px;

		color: #be123c;

		font-size: 13px;
		line-height: 1.55;
	}

	.snooc-password-field {
		margin-bottom: 20px;
	}

	.snooc-password-label {
		display: block;

		margin-bottom: 8px;

		color: #4c383e;

		font-size: 13px;
		font-weight: 700;
	}

	.snooc-password-label span {
		color: var(--sn-red);
	}

	.snooc-password-input-wrap {
		display: flex;
		align-items: stretch;

		width: 100%;
		height: 54px;

		overflow: hidden;

		border: 1px solid var(--sn-border-strong);
		border-radius: 14px;

		background: #ffffff;
	}

	.snooc-password-input-wrap:focus-within {
		border-color: var(--sn-red);

		box-shadow:
			0 0 0 4px rgba(159, 29, 53, 0.11);
	}

	.snooc-password-input-icon {
		display: flex;
		flex: 0 0 54px;
		align-items: center;
		justify-content: center;

		width: 54px;

		color: #9b747e;
	}

	.snooc-password-input-icon svg {
		width: 20px;
		height: 20px;
	}

	.snooc-password-form input[type="password"],
	.snooc-password-form input[type="text"] {
		flex: 1 1 auto;

		min-width: 0;
		height: 52px;

		padding: 0 12px 0 0 !important;

		border: 0 !important;
		border-radius: 0 !important;
		outline: 0;

		background: transparent !important;
		color: var(--sn-text);

		font-size: 15px;

		box-shadow: none !important;
	}

	.snooc-password-visibility {
		position: relative;

		flex: 0 0 52px;

		width: 52px;
		height: 52px;

		padding: 0;

		border: 0 !important;
		border-radius: 0 !important;

		background: transparent !important;
		color: #8c6570;

		cursor: pointer;

		transform: none !important;
	}

	.snooc-password-visibility:hover {
		background: var(--sn-red-soft) !important;
		color: var(--sn-red);
	}

	.snooc-password-visibility span {
		position: absolute;
		top: 50%;
		left: 50%;

		width: 21px;
		height: 21px;

		transform: translate(-50%, -50%);
	}

	.snooc-password-visibility svg {
		width: 21px;
		height: 21px;
	}

	.snooc-visibility-hide {
		visibility: hidden;
		opacity: 0;
	}

	.snooc-password-visibility.is-visible
	.snooc-visibility-show {
		visibility: hidden;
		opacity: 0;
	}

	.snooc-password-visibility.is-visible
	.snooc-visibility-hide {
		visibility: visible;
		opacity: 1;
	}

	.snooc-password-help {
		display: block;

		margin: 7px 2px 0;

		color: var(--sn-muted);

		font-size: 12px;
	}

	.snooc-password-actions {
		display: flex;
		gap: 12px;

		margin-top: 28px;
	}

	.snooc-password-submit,
	.snooc-password-cancel {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		min-height: 50px;

		padding: 13px 22px;

		border-radius: 13px;

		font-size: 14px;
		font-weight: 800;
		text-decoration: none;
	}

	.snooc-password-submit {
		flex: 1;

		border: 0;

		background:
			linear-gradient(
				135deg,
				var(--sn-red),
				var(--sn-red-dark)
			);

		color: #ffffff;

		cursor: pointer;
	}

	.snooc-password-cancel {
		border:
			1px solid var(--sn-border-strong);

		background: #ffffff;
		color: #5d454c;
	}

	/*
	|--------------------------------------------------------------------------
	| Responsive navigatie
	|--------------------------------------------------------------------------
	*/

	/*
	|--------------------------------------------------------------------------
	| Responsive navigatie
	|--------------------------------------------------------------------------
	|
	| Op kleinere desktops en laptops is onvoldoende ruimte voor:
	| - alle hoofdmenu-items;
	| - Beheer en Help;
	| - gebruikersnaam en gebruikersrol.
	|
	| Daarom schakelt de navigatie vanaf 1520px over op het uitklapmenu.
	|--------------------------------------------------------------------------
	*/

	@media (max-width: 1520px) {
		body.snooc-menu-open {
			overflow: hidden;
		}

		/*
		|--------------------------------------------------------------------------
		| Bovenste navigatiebalk
		|--------------------------------------------------------------------------
		*/

		#topnav .snooc-main-nav {
			min-height: 68px;

			flex-wrap: wrap;

			padding: 9px 16px;
		}

		#topnav .navbar-brand {
			margin-right: 12px;
		}

		#topnav .navbar-brand img {
			height: 44px;
			max-width: 140px;
		}

		/*
		|--------------------------------------------------------------------------
		| Hamburgerknop
		|--------------------------------------------------------------------------
		*/

		#topnav .navbar-toggler {
			display: flex;

			margin-left: auto;
		}

		/*
		|--------------------------------------------------------------------------
		| Ingeklapt menu
		|--------------------------------------------------------------------------
		*/

		#topnav .navbar-collapse {
			display: none;
			flex: 0 0 100%;
			align-items: stretch;

			width: 100%;
			max-height: calc(100vh - 86px);

			margin-top: 9px;
			padding: 10px;

			overflow-x: hidden;
			overflow-y: auto;

			border:
				1px solid rgba(255, 255, 255, 0.11);

			border-radius: 16px;

			background:
				rgba(73, 12, 26, 0.99);

			box-shadow:
				0 18px 45px rgba(37, 3, 12, 0.32);
		}

		#topnav
		.snooc-main-nav.mobile-open
		.navbar-collapse {
			display: block;
		}

		/*
		|--------------------------------------------------------------------------
		| Hoofdmenu-items
		|--------------------------------------------------------------------------
		*/

		#topnav .navbar-nav {
			display: block;

			width: 100%;
			min-width: 0;

			margin: 0;
			padding: 0;
		}

		#topnav .nav-item {
			width: 100%;
		}

		#topnav .nav-link {
			display: flex;
			align-items: center;

			width: 100%;
			min-height: 46px;

			margin: 2px 0;
			padding: 11px 12px !important;

			font-size: 14px;
		}

		#topnav .nav-link > span:not(.snooc-dropdown-arrow) {
			min-width: 0;
		}

		#topnav .dropdown-toggle::after {
			flex: 0 0 auto;

			margin-left: auto;
		}

		/*
		|--------------------------------------------------------------------------
		| Dropdownmenu's
		|--------------------------------------------------------------------------
		*/

		#topnav .dropdown-menu,
		#topnav .dropdown-submenu > .dropdown-menu {
			position: static;

			display: none;

			width: 100%;
			min-width: 0;
			max-width: none;

			margin: 4px 0 8px;
			padding: 6px;

			overflow: visible;

			border-color:
				rgba(255, 255, 255, 0.10);

			background:
				rgba(255, 255, 255, 0.98);

			box-shadow: none;

			animation: none;
		}

		#topnav .nav-item.is-open > .dropdown-menu,
		#topnav .dropdown-submenu.is-open > .dropdown-menu {
			display: block;
		}

		#topnav .dropdown-item {
			width: 100%;
			min-width: 0;

			white-space: normal;
		}

		/*
		|--------------------------------------------------------------------------
		| Submenu's
		|--------------------------------------------------------------------------
		*/

		#topnav
		.dropdown-submenu
		> .dropdown-toggle {
			padding-right: 12px !important;
		}

		#topnav
		.dropdown-submenu
		> .dropdown-toggle::after {
			position: static;

			flex: 0 0 auto;

			margin-left: auto;

			transform:
				rotate(45deg)
				translateY(-2px);
		}

		#topnav
		.dropdown-submenu.is-open
		> .dropdown-toggle::after {
			transform:
				rotate(225deg)
				translate(-1px, -1px);
		}

		#topnav
		.dropdown-submenu
		> .dropdown-menu {
			width: calc(100% - 12px);

			margin-left: 12px;
		}

		/*
		|--------------------------------------------------------------------------
		| Gebruikersinformatie
		|--------------------------------------------------------------------------
		*/

		#topnav .snooc-user-summary {
			width: 100%;
			max-width: none;

			margin: 10px 0 0;
			padding: 9px 11px;

			background:
				rgba(255, 255, 255, 0.08);
		}

		#topnav .snooc-user-summary-text {
			flex: 1 1 auto;
		}

		#topnav .snooc-user-summary-text strong,
		#topnav .snooc-user-summary-text small {
			max-width: 100%;
		}

		/*
		|--------------------------------------------------------------------------
		| Contextbalk
		|--------------------------------------------------------------------------
		*/

		.snooc-context-bar {
			align-items: flex-start;
			flex-direction: column;
			gap: 5px;

			padding: 9px 16px;
		}

		.snooc-context-schools {
			width: 100%;

			padding-left: 18px;
		}

		/*
		|--------------------------------------------------------------------------
		| Content
		|--------------------------------------------------------------------------
		*/

		#content {
			width:
				min(calc(100% - 20px), 1500px) !important;

			margin-top: 12px !important;
		}
	}

	/*
	|--------------------------------------------------------------------------
	| Kleinere mobiele schermen
	|--------------------------------------------------------------------------
	*/

	@media (max-width: 620px) {
		#topnav .snooc-main-nav {
			padding: 8px 10px;
		}

		#topnav .navbar-brand {
			margin-right: 8px;
		}

		#topnav .navbar-brand img {
			height: 40px;
			max-width: 125px;
		}

		#topnav .navbar-collapse {
			max-height:
				calc(100dvh - 76px);

			padding: 7px;
		}

		#topnav .dropdown-item {
			font-size: 13px;
		}

		.snooc-context-title {
			font-size: 12.5px;
		}

		.snooc-context-schools {
			align-items: flex-start;
			flex-direction: column;
			gap: 2px;
		}

		.snooc-context-schools strong {
			white-space: normal;
		}

		.snooc-global-notification {
			top: 12px;

			width: calc(100% - 16px);

			padding:
				15px 44px 15px 15px;
		}

		.snooc-notification-button {
			display: inline-flex;

			margin: 10px 0 0;
		}

		.snooc-password-page {
			padding: 14px;
		}

		.snooc-password-card {
			padding: 24px 18px;

			border-radius: 20px;
		}

		.snooc-password-header {
			align-items: flex-start;
		}

		.snooc-password-header-icon {
			flex-basis: 54px;

			width: 54px;
			height: 54px;
		}

		.snooc-password-title {
			font-size: 24px;
		}

		.snooc-password-actions {
			flex-direction: column;
		}

		.snooc-password-submit,
		.snooc-password-cancel {
			width: 100%;
		}
	}

	/*
	|--------------------------------------------------------------------------
	| Mobiele tabellen en formulieren
	|--------------------------------------------------------------------------
	*/

	@media (max-width: 700px) {
		.ui.segment {
			padding: 14px !important;
		}

		.ui.header {
			font-size: 1.25rem !important;
		}

		.form_container .col-25,
		.form_container .col-75 {
			float: none !important;

			width: 100% !important;
		}

		.form_container label {
			padding-bottom: 5px !important;
		}

		.ui.table.responsive-card-table thead,
		table.responsive-card-table thead {
			display: none;
		}

		.ui.table.responsive-card-table,
		.ui.table.responsive-card-table tbody,
		.ui.table.responsive-card-table tr,
		.ui.table.responsive-card-table td,
		table.responsive-card-table,
		table.responsive-card-table tbody,
		table.responsive-card-table tr,
		table.responsive-card-table td {
			display: block;

			width: 100% !important;
		}

		.ui.table.responsive-card-table tr,
		table.responsive-card-table tr {
			width: calc(100% - 20px) !important;

			margin: 10px;
			padding: 7px;

			border:
				1px solid var(--sn-border);

			border-radius: 13px;

			box-shadow:
				0 5px 18px rgba(79, 13, 27, 0.06);
		}

		.ui.table.responsive-card-table td,
		table.responsive-card-table td {
			display: grid !important;

			grid-template-columns:
				minmax(105px, 38%) 1fr;

			gap: 8px;

			padding: 7px 9px !important;

			border: 0 !important;
		}

		.ui.table.responsive-card-table td::before,
		table.responsive-card-table td::before {
			content:
				attr(data-label);

			color: var(--sn-muted);

			font-size: 0.76rem;
			font-weight: 700;
			text-transform: uppercase;
		}

		.snooc-toolbar > * {
			width: 100%;
		}

		.snooc-live-search {
			min-width: 100%;
		}
	}

	@media (max-width: 620px) {
		#topnav .snooc-main-nav {
			padding: 8px 10px;
		}

		#topnav .navbar-brand {
			margin-right: 8px;
		}

		#topnav .navbar-brand img {
			height: 40px;
			max-width: 125px;
		}

		#topnav .navbar-collapse {
			max-height:
				calc(100dvh - 76px);

			padding: 7px;
		}

		#topnav .dropdown-item {
			font-size: 13px;
		}

		.snooc-context-title {
			font-size: 12.5px;
		}

		.snooc-context-schools {
			align-items: flex-start;
			flex-direction: column;
			gap: 2px;
		}

		.snooc-context-schools strong {
			white-space: normal;
		}

		.snooc-global-notification {
			top: 12px;

			width: calc(100% - 16px);

			padding:
				15px 44px 15px 15px;
		}

		.snooc-notification-button {
			display: inline-flex;

			margin:
				10px 0 0;
		}

		.snooc-password-page {
			padding: 14px;
		}

		.snooc-password-card {
			padding: 24px 18px;

			border-radius: 20px;
		}

		.snooc-password-header {
			align-items: flex-start;
		}

		.snooc-password-header-icon {
			flex-basis: 54px;

			width: 54px;
			height: 54px;
		}

		.snooc-password-title {
			font-size: 24px;
		}

		.snooc-password-actions {
			flex-direction: column;
		}

		.snooc-password-submit,
		.snooc-password-cancel {
			width: 100%;
		}
	}

	/*
	|--------------------------------------------------------------------------
	| Print
	|--------------------------------------------------------------------------
	*/

	@media print {
		#topnav,
		.snooc-toolbar,
		#snooc-progress,
		#snooc-toast-region {
			display: none !important;
		}

		body.snooc-app {
			background: #ffffff !important;
		}

		#content {
			width: 100% !important;

			margin: 0 !important;
		}

		.ui.segment {
			border: 0 !important;

			box-shadow: none !important;
		}
	}