@-webkit-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-moz-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-webkit-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@-moz-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:2px solid rgba(0,0,0,.3);background:#fff;padding:20px 20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:.5}.dropzone .dz-message{text-align:center;margin:2em 0}.dropzone .dz-message .dz-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(to bottom, #eee, #ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:#fff}.dropzone .dz-preview.dz-image-preview .dz-details{-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-ms-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:rgba(0,0,0,.9);line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid rgba(200,200,200,.8);background-color:rgba(255,255,255,.8)}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:rgba(255,255,255,.4);padding:0 .4em;border-radius:3px}.dropzone .dz-preview:hover .dz-image img{-webkit-transform:scale(1.05, 1.05);-moz-transform:scale(1.05, 1.05);-ms-transform:scale(1.05, 1.05);-o-transform:scale(1.05, 1.05);transform:scale(1.05, 1.05);-webkit-filter:blur(8px);filter:blur(8px)}.dropzone .dz-preview .dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{-webkit-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-moz-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-ms-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-o-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;-webkit-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-moz-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-ms-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-o-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}.dropzone .dz-preview .dz-success-mark svg,.dropzone .dz-preview .dz-error-mark svg{display:block;width:54px;height:54px}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{-webkit-animation:pulse 6s ease infinite;-moz-animation:pulse 6s ease infinite;-ms-animation:pulse 6s ease infinite;-o-animation:pulse 6s ease infinite;animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:16px;left:50%;top:50%;margin-top:-8px;width:80px;margin-left:-40px;background:rgba(255,255,255,.9);-webkit-transform:scale(1);border-radius:8px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#333;background:linear-gradient(to bottom, #666, #444);position:absolute;top:0;left:0;bottom:0;width:0;-webkit-transition:width 300ms ease-in-out;-moz-transition:width 300ms ease-in-out;-ms-transition:width 300ms ease-in-out;-o-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;-ms-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#be2626;background:linear-gradient(to bottom, #be2626, #a92222);padding:.5em 1.2em;color:#fff}.dropzone .dz-preview .dz-error-message:after{content:"";position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #be2626}

@layer root, resets, base, forms, foundation, overrides;
@font-face {
	font-family: 'inter';
	font-style: normal;
	font-display: block;
	src: url('./vendor-libraries/fonts/inter/Inter.woff2') format('woff2');
}

@font-face {
	font-family: 'inter';
	font-style: italic;
	font-display: block;
	src: url('./vendor-libraries/fonts/inter/Inter-Italic.woff2') format('woff2');
}
@layer root {
	:root {
		--font-family-default: Inter, sans-serif, system-ui;
		--font-weight-regular: 400;
		--font-weight-medium: 500;
		--font-weight-semi-bold: 600;
		--font-weight-bold: 700;
		--size-5: 0.3125rem;
		--size-10: 0.625rem;
		--size-12: 0.75rem;
		--size-14: 0.875rem;
		--size-16: 1rem;
		--size-18: 1.125rem;
		--size-20: 1.25rem;
		--size-21: 1.3125rem;
		--size-24: 1.5rem;
		--size-28: 1.75rem;
		--size-30: 1.875rem;
		--size-34: 2.125rem;
		--size-40: 2.5rem;
		--size-48: 3rem;
		--size-50: 3.125rem;
		--size-56: 3.5rem;
		--size-60: 3.75rem;
		--color-white: hsl(0 0% 100%);
		--color-black: hsl(0 0% 0%);
		--color-blue-1: hsl(212 100% 50%);
		--color-blue-2: hsl(212, 100%, 40%);
		--color-blue-3: hsl(212 100% 20%);
		--color-orange: hsl(28 100% 50%);
		--color-red: hsl(348 100% 50%);
		--color-green: hsl(106 99% 35%);
		--color-gray-10: hsl(0 0% 10%);
		--color-gray-30: hsl(0 0% 30%);
		--color-gray-50: hsl(0 0% 50%);
		--color-gray-70: hsl(0 0% 70%);
		--color-gray-80: hsl(0 0% 80%);
		--color-gray-85: hsl(0 0% 85%);
		--color-gray-90: hsl(0 0% 90%);
		--color-gray-95: hsl(0 0% 95%);
		--color-chart-blue: hsl(210 80% 60%);
		--color-chart-orange: hsl(28 80% 60%);
		--color-chart-red: hsl(350 80% 60%);
		--color-chart-green: hsl(90 60% 60%);
		--color-chart-teal: hsl(170 60% 60%);
		--color-chart-violet: hsl(267 80% 70%);
		--color-default: var(--color-gray-30);
		--color-light: var(--color-white);
		--color-highlight: var(--color-gray-95);
		--color-link: var(--color-gray-50);
		--color-success: var(--color-green);
		--color-error: var(--color-red);
		--color-warning: var(--color-orange);
		--color-info: var(--color-blue-1);
		--color-focus-visible: var(--color-red);
		--radius-2: 2px;
		--radius-badge: var(--radius-2);
		--radius-input: var(--radius-2);
		--radius-button: 4px;
		--radius-pill: 100vw;
		--radius-box: 30px;
		--radius-circle: 50%;
		--border-size-1: 1px;
		--border-size-2: 2px;
		--border-size-4: 4px;
		--border-button: var(--border-size-1);
		--border-box: var(--border-size-2);
		--border-focus-visible: var(--border-size-4);
		--box-shadow: 0 2px 4px hsl(from var(--color-black) h s l / 10%);
		--transition-time: 300ms;
		--loading-animation: 3000ms;

		@media (prefers-reduced-motion: reduce) {
			--transition-time: 0m;
			--loading-animation: 0ms;
		}

		interpolate-size: allow-keywords;
	}
}
@layer resets {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		color: var(--color-default);
		font-family: var(--font-family-default);
		line-height: 1.2;
		scroll-behavior: smooth;
		scrollbar-gutter: stable;
		text-size-adjust: none;
		/* stylelint-disable property-no-vendor-prefix  */
		-webkit-tap-highlight-color: transparent;
		/* stylelint-enable property-no-vendor-prefix  */
	
		&:focus-within {
			scroll-behavior: smooth;
		}
	}
	
	body {
		font-size: var(--size-14);
		margin: 0;
	
		.lock-scroll & {
			overflow: hidden;
		}
	}
	
	/* stylelint-disable selector-no-vendor-prefix  */
	::-moz-selection {
		background: #b3d4fc;
		text-shadow: none;
	}
	/* stylelint-enable selector-no-vendor-prefix  */
	
	::selection {
		background: #b3d4fc;
		text-shadow: none;
	}
	
	/* Remove default margins */
	:where(figure, blockquote, dl, dd) {
		margin: 0;
	}
	
	/* Remove default color */
	a {
		color: var(--color-link);
		transition: color var(--transition-time) ease-in-out, text-decoration-color var(--transition-time) ease-in-out;
		
		&:active,
		&:hover,
		&:focus {
			outline-color: transparent;
		}
		
		&:focus-visible {
			outline: var(--border-focus-visible) solid var(--color-focus-visible);
		}
		
		&:not(.button) {
			text-decoration-color: hsl(from var(--color-underline, var(--color-link) h s l / var(--alpha-underline, 0)));
			text-decoration-skip-ink: auto;
			
			&:hover {
				--alpha-underline: 1;
				--color-link: var(--color-gray-30);
			}
		}
	
		&[disabled] {
			cursor: none;
			pointer-events: none;
		}
	
		.--white-color & {
			--color-link: var(--color-white);
		}
	}
	
	/* Inherit fonts for inputs and buttons */
	:where(input, button, textarea, select, cite, label) {
		font: inherit;
	}
	
	/* Set textarea resize to only be vertical */
	textarea {
		resize: vertical;
	}
	
	/* Remove default button styles */
	button {
		border: none;
		background: none;
		color: inherit;
		cursor: pointer;
		padding: 0;
	
		&:focus-visible {
			outline: var(--border-focus-visible) solid var(--color-focus-visible);
		}
	
		&[disabled] {
			cursor: none;
			pointer-events: none;
		}
	}
	
	[role='button'] {
		cursor: pointer;
	}
	
	/* Set default font weight for strong tag */
	strong {
		font-weight: var(--font-weight-medium);
	}
	
	/**
	* Set default image styles
	*/
	img {
		block-size: auto;
		font-style: italic;
		max-inline-size: 100%;
		vertical-align: middle;
	}
	
	/*
	* Set SVG to be scalable
	*/
	svg {
		block-size: auto;
		display: block;
		inline-size: 100%;
	}

	/*
	* Global class to remove list styles
	*/
	ul[role='list'],
	ol[role='list'] {
		list-style-type: none;
		padding-inline-start: 0;
		margin-block: 0;
	}

	fieldset {
		border: none;
		margin-inline: 0;
		padding: 0;
	}

	legend {
		padding: 0;
	}

	.icon {
		display: inline-block;
		inline-size: var(--icon-inline-size, 20px);
	}
	
	.loading {
		animation: rotate var(--loading-animation) linear infinite;
	}

	@keyframes rotate {
		to {
			rotate: 360deg;
		}
	}
}
@layer base {
	:where(h1, h2, h3, h4, h5, h6, p) {
		margin-block: 0;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		font-size: var(--title-font-size, inherit);
		font-weight: var(--title-font-weight, var(--font-weight-semi-bold));
		text-wrap: balance;

		&:not(:last-child) {
			margin-block-end: var(--title-spacing, 16px);
		}
	}

	p {
		text-wrap: pretty;

		& + p {
			margin-block-start: 12px;
		}

		& a {
			--alpha-underline: 1;
		}
	}

	.title-small {
		--title-font-size: var(--size-14);
		--title-font-weight: var(--font-weight-medium);
	}

	.title-medium {
		--title-font-size: var(--size-16);
	}

	.title-large {
		--title-font-size: var(--size-20);
	}

	.title-extra-large {
		--title-font-size: var(--size-28);
	}

	.text-align-center {
		--text-align: center;
	}

	.text-align-right {
		--text-align: right;
	}

	.accent-orange {
		color: var(--color-orange);
	}

	.accent-red {
		color: var(--color-red);
	}

	.accent-blue {
		color: var(--color-blue-1);
	}

	.accent-green {
		color: var(--color-green);
	}
}
@layer base {
	.grid {
		display: grid;
		gap: 24px;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;

		&.columns-offset-left {
			grid-template-columns: 2fr 1fr;
		}
        &.columns-offset-right {
            grid-template-columns: 1fr 2fr;
        }
	}
}
@layer base {
	.content-group {
		align-items: start;
		display: grid;
		border-block-start: 1px solid var(--color-gray-90);
		gap: 24px;
		padding-block-start: 8px;
	}
}


@layer foundation {
	.accordion {
		& .button-group {
			margin-block-start: 15px;
		}
	}

	.accordion-block {
		border: var(--border-size-1) solid hsl(from var(--color-black) h s 80%)
	}
	
	.accordion-group {
		align-items: start;
		background-color: hsl(from var(--color-black) h s 91%);
		display: grid;
		gap: 20px;
		grid-template-columns: 1fr auto;
		transition: opacity var(--transition-time) ease-in-out;

		&.dragging {
			opacity: .6;
		}

		& + .accordion-group {
			border-top: var(--border-size-1) solid hsl(from var(--color-black) h s 80%)
		}
	}

	.accordion-item {
		overflow: hidden;

		&[open] {
			--accordion-dropdown-height: auto;
			--accordion-arrow-rotate: -180deg;
			--accordion-arrow-translate: -5px;
			--icon-opacity: 0;
			--icon-scale: .7;
		}

		&::details-content {
			block-size: var(--accordion-dropdown-height, 0);
			transition:
				block-size var(--transition-time) ease-in-out,
				content-visibility var(--transition-time) allow-discrete;

			@starting-style {
				--accordion-dropdown-height: 0;
			}
		}
	}
	
	.accordion-button {
		align-items: center;
		cursor: pointer;
		display: flex;
		gap: 15px;

		&::-webkit-details-marker {
			display: none;
		}

		&::before {
			content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93biI+PHBhdGggZD0ibTYgOSA2IDYgNi02Ii8+PC9zdmc+');
			rotate: var(--accordion-arrow-rotate, 0deg);
			translate: 0 var(--accordion-arrow-translate, 0);
			transition: rotate var(--transition-time) ease-in-out, translate var(--transition-time) ease-in-out;
		}
	}

	.accordion-controls-container {
		align-items: center;
		display: grid;
		isolation: isolate;
	}

	.accordion-ellipsis,
	.accordion-controls {
		grid-column: 1;
		grid-row: 1;
		opacity: var(--controls-opacity, 0);
		scale: var(--controls-scale, .7);
		transition: opacity var(--transition-time) ease-in-out, scale var(--transition-time) ease-in-out;
	
		&[aria-hidden='false'] {
			--controls-opacity: 1;
			--controls-scale: 1;
	
			z-index: 1;
		}
	}

	.accordion-ellipsis {
		justify-self: center;
	}

	.accordion-controls {
		align-items: center;
		display: flex;
		padding-block: 5px;
	}

	.accordion-drag {
		cursor: move;
	}
}
@layer foundation {
	.account-user {
		position: relative;
	}

	.account-user-button {
		--user-image-width: 24px;

		aspect-ratio: 1/1;
		background-color: hsl(from var(--color-gray-80) h s l / var(--account-background-alpha, 0));
		block-size: 36px;
		border-radius: var(--radius-badge);
		color: var(--account-color, var(--color-gray-85));
		display: grid;
		place-content: center;
		transition: background-color var(--transition-time) ease-in-out, color var(--transition-time) ease-in-out;

		&:hover,
		&[aria-expanded='true'] {
			--account-background-alpha: 100%;
			--account-color: var(--color-gray-30);
		}
	}

	.account-user-dropdown {
		--user-image-width: 54px;

		background-color: var(--color-gray-80);
		border-radius: var(--radius-badge);
		box-shadow: var(--box-shadow);
		display: none;
		inset: calc(100% + 2px) 0 auto auto;
		min-inline-size: 205px;
		opacity: 0;
		padding: 12px 34px 28px;
		position: absolute;
		text-align: center;
		transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;
		
		&[aria-hidden='false'] {
			display: block;
			opacity: 1;
			
			@starting-style {
				opacity: 0;
			}
		}
	}
	
	.account-user-image {
		--icon-inline-size: 100%;

		margin-inline: auto;
		max-inline-size: var(--user-image-width);

		& .icon {
			inline-size: 100%;
		}
	}

	.account-user-name {
		margin-block: 6px 30px;
	}
}
@layer foundation {
	.alert-group {
		display: grid;
		gap: 15px;
	}
	
	.alert-message {
		display: grid;
		grid-template-columns: 40px var(--alert-column-size, 1fr);
		transition:
			display var(--transition-time) allow-discrete,
			opacity var(--transition-time) ease-in-out,
			grid-template-columns var(--transition-time) ease-in-out;
	
		&[aria-hidden='true'] {
			display: none;
			opacity: 0;
		}

		&:has([aria-expanded='false']) {
			--alert-column-size: 0fr;
			--close-icon-opacity: 0;
	
			transition-delay: var(--transition-time);
		}
	
		&.alert-info {
			--alert-color: var(--color-info);
		}
	
		&.alert-success {
			--alert-color: var(--color-success);
		}
	
		&.alert-warning {
			--alert-color: var(--color-warning);
		}
	
		&.alert-error {
			--alert-color: var(--color-error);
		}
	}
	
	.alert-grid {
		align-items: center;
		background-color: hsl(from var(--alert-color) h s l / 5%);
		border: var(--border-button) solid var(--alert-color);
		border-radius: var(--radius-pill);
		color: var(--alert-color);
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		padding-block: 11px 12px;
		text-align: left;
	
		& p {
			font-size: var(--size-12);
		}
	}

	.alert-button {
		position: relative;
	}

	.alert-close-icon {
		align-items: center;
		display: grid;
		inset: 0 15px 0 auto;
		opacity: var(--close-icon-opacity, 1);
		position: absolute;
		transition: opacity var(--transition-time);
	}
	
	.alert-details {
		max-inline-size: calc(100% - 50px);
		transition: display var(--transition-time) allow-discrete, opacity var(--transition-time);
		
		@starting-style {
			opacity: 0;
		}
		
		&[aria-hidden='false'] {
			--alert-details-opacity: 1;
	
			display: block;
		}
		
		&[aria-hidden='true'] {
			display: none;
			opacity: var(--alert-details-opacity, 0);
		}
	}
	
	.alert-icon-column {
		display: grid;
		grid-column: 1;
		place-content: center;
	
		.icon {
			inline-size: 16px;
		}
	}
}
@layer foundation {
	.author-details {
		--icon-inline-size: 40px;
		
		align-items: start;
		display: flex;
		gap: 18px;
	}
}
@layer foundation {
	.badge-group {
		display: flex;
		gap: 4px;
	
		&.filled {
			--badge-text-color: var(--color-white);
	
			& .badge {
				background-color: var(--badge-color);
			}
		}
	
		&.collapsed {
			& .badge {
				scale: .4;
				background-color: var(--badge-color);
			}
	
			& span {
				opacity: 0;
			}
		}
	}

	.badge {
		border: var(--border-button) solid var(--badge-color);
		border-radius: var(--radius-badge);
		color: var(--badge-text-color, var(--badge-color));
		display: grid;
		font-size: var(--size-12);
		inline-size: var(--size-18);
		padding: 1px 3px;
		place-items: center;
		transition: scale var(--transition-time) ease-in-out;
	
		&.badge-warning {
			--badge-color: var(--color-warning);
		}
	
		&.badge-danger {
			--badge-color: var(--color-error);
		}
	}
}
@layer foundation {
	.breadcrumbs {
		& ul {
			align-items: center;
			display: flex;
			gap: 5px;
		}

		& li {
			align-items: center;
			color: var(--color-gray-50);
			display: flex;
			gap: 5px;

			&:has(a) {
				&::after {
					content: '/';
				}
			}
		}
	}
}
@layer foundation {
    .expandable-button-group-controls {
        display: flex;
        align-items: center;

        &.hide {
            display: none;
            opacity: 0;
        }

        .button-group {
            flex-wrap: nowrap;
        }
    }

	.button-group {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--button-gap, 16px);
		justify-content: var(--button-justify, start);

        &.hide {
            display: none;
            opacity: 0;
        }

		&.large-font {
			--button-font-size: var(--size-16);
		}

		&.justify-center {
			--button-justify: center;
		}

		&.justify-end {
			--button-justify: end;
		}

		&.gap-small {
			--button-gap: 8px;
		}

		&.gap-large {
			--button-gap: 24px;
		}
	}

	.button {
		align-items: center;
		color: var(--button-color, var(--color-link));
		display: inline flex;
		font-size: var(--button-font-size, var(--size-14));
		font-weight: var(--font-weight-medium);
		gap: 8px;
		justify-content: center;
		text-align: center;
		text-wrap: nowrap;

		&[class*='button-'] {
			text-decoration: none;
		}
        &.hide {
            display: none;
            opacity: 0;
        }

		&.button-primary,
		&.button-secondary {
			border: var(--border-button) solid var(--button-border-color, transparent);
			border-radius: var(--radius-button);
			outline: var(--border-box) solid var(--button-outline-color, transparent);
			outline-offset: calc(calc(var(--border-button) + var(--border-box)) * -1);
			padding: 10px;
			transition:
			background-color var(--transition-time) ease-in-out,
			color var(--transition-time) ease-in-out,
			border-color var(--transition-time) ease-in-out,
			outline-color var(--transition-time) ease-in-out;

			&:focus-visible {
				outline: var(--border-focus-visible) solid var(--color-focus-visible);
				outline-offset: 0;
			}
		}
		
		.full-width & {
			@media (width >= 48em) {
				flex: 1;
			}
		}
		
		&.button-primary {
			--button-background-color: var(--color-blue-1);
			--button-color: var(--color-white);
			--button-border-color: var(--color-blue-1);
			
			background-color: var(--button-background-color);

			&:hover,
			a:hover & {
				--button-background-color: var(--color-blue-2);
				--button-border-color: var(--color-blue-3);
				--button-outline-color: var(--button-border-color);
			}

			&.gray {
				--button-background-color: var(--color-gray-50);
				--button-border-color: var(--color-gray-50);

				&:hover,
				a:hover & {
					--button-background-color: var(--color-gray-30);
					--button-border-color: var(--color-gray-25);
				}
			}

            &.green {
                --button-background-color: var(--color-success);
                --button-border-color: var(--color-success);
            }
            &.red {
                --button-background-color: var(--color-error);
                --button-border-color: var(--color-error);
            }
            &.orange {
                --button-background-color: var(--color-warning);
                --button-border-color: var(--color-warning);
            }

			&[disabled] {
				--button-color: hsl(from var(--color-gray-10) h s 65%);
				--button-border-color: hsl(from var(--color-gray-10) h s 85%);
				--button-background-color: var(--color-gray-90);
			}
		}

		&.button-secondary {
			--button-border-color: var(--color-blue-1);
			--button-color: var(--color-blue-1);

			&:hover,
			a:hover & {
				--button-color: var(--color-blue-2);
				--button-border-color: var(--button-color);
				--button-outline-color: var(--button-border-color);
			}

			&.gray {
				--button-color: var(--color-gray-50);
				--button-border-color: var(--button-color);

				&:hover,
				a:hover & {
					--button-color: var(--color-gray-30);
					--button-background-color: var(--color-gray-90);
				}
				
				&[disabled] {
					--button-color: hsl(from var(--color-gray-30) h s l / 30%);
					--button-border-color: hsl(from var(--color-gray-30) h s l / 30%);
				}
			}

            &.green {
                --button-background-color: var(--color-success);
                --button-border-color: var(--color-success);
            }
            &.red {
                --button-background-color: var(--color-error);
                --button-border-color: var(--color-error);
            }
            &.orange {
                --button-background-color: var(--color-warning);
                --button-border-color: var(--color-warning);
            }

			&[disabled] {
				--button-color: var(--color-gray-80);
				--button-border-color: var(--color-gray-80);
			}
		}

		&.button-tertiary {
			--button-color: var(--color-gray-50);

			border-block-end: var(--border-button) solid var(--button-border-color, var(--color-gray-50));
			padding: 10px;
			position: relative;
			transition:
				color var(--transition-time) ease-in-out,
				border-color var(--transition-time) ease-in-out;

			&::after {
				background-color: var(--button-border-color);
				block-size: var(--border-box);
				content: '';
				inset: auto 0 0 0;
				opacity: var(--tertiary-underline-opacity, 0);
				position: absolute;
				transition: opacity var(--transition-time) ease-in-out;
			}

			&:hover,
			a:hover & {
				--button-border-color: var(--color-gray-30);
				--button-color: var(--button-border-color);
				--button-outline-color: var(--button-border-color);
				--tertiary-underline-opacity: 1;
			}
		}

		&.button-tooltip {
			--triangle-height: 6px;

			aspect-ratio: 1;
			background-color: hsl(from var(--button-background-color, var(--color-gray-85)) h s l / var(--button-background-opacity, 0));
			border-radius: var(--radius-button);
			inline-size: 31px;
			position: relative;
			transition: color var(--transition-time) ease-in-out, background-color var(--transition-time) ease-in-out;

			.tag-management-ellipsis & {
				&[aria-expanded='false'] {
					& .icon:first-child {
						--button-icon-display: block;
						--button-icon-opacity: 1;
						--button-icon-scale: 1;
					}
				}
	
				&[aria-expanded='true'] {
					--button-color: var(--color-gray-95);
					--button-background-opacity: 100%;
					--button-background-color: var(--color-gray-50);
	
					&:hover,
					a:hover & {
						--button-color: var(--color-gray-95);
					}
	
					& .icon:last-child {
						--button-icon-display: block;
						--button-icon-opacity: 1;
						--button-icon-scale: 1;
					}
				}

				& .icon {
					display: var(--button-icon-display, none);
					opacity: var(--button-icon-opacity, 0);
					scale: var(--button-icon-scale, .7);
				}
			}

			@media (hover: hover) {
				&:hover,
				a:hover & {
					--button-color: var(--color-default);
					--button-background-opacity: 100%;
					--tooltip-opacity: 1;
					--tooltip-y: 0;
					--tooltip-display: block;
				}
			}

			& .tooltip {
				background-color: var(--color-gray-30);
				box-shadow: var(--box-shadow);
				border-radius: inherit;
				color: var(--color-gray-95);
				display: var(--tooltip-display, none);
				opacity: var(--tooltip-opacity, 0);
				inset-block-end: calc(100% + (var(--triangle-height) + 5px));
				max-inline-size: 120px;
				padding: 4px 8px;
				position: absolute;
				translate: var(--tooltip-x, 0) var(--tooltip-y, 25%);
				transition:
				opacity var(--transition-time) ease-in-out,
				translate var(--transition-time) ease-in-out,
				display var(--transition-time) allow-discrete;

				@starting-style {
					opacity: 0;
					translate: 0 25%;
				}

				&.offset-right {
					inset-inline-end: 0;

					&::before {
						margin-inline: auto 0;
						inset-inline-end: 10px;
					}
				}

				&::before {
					content: '';
					border-style: solid;
					border-width: var(--triangle-height) 5px 0 5px;
					border-color: var(--color-gray-30) transparent transparent transparent;
					block-size: 0;
					inline-size: 0;
					inset: calc(100% - 1px) 0 0 0;
					margin-inline: auto;
					position: absolute;
				}
			}
		}

		&.link {
			--button-color: var(--color-gray-10);

			text-decoration: underline;
			text-decoration-color: hsl(from var(--button-color, var(--color-link)) h s l / var(--alpha-underline, 0));
			text-underline-offset: .5em;

			&:hover,
			a:hover & {
				--alpha-underline: 1;
				--button-color: var(--color-gray-30);
			}

			&.light {
				--button-color: var(--color-gray-70);

				&:hover,
				a:hover & {
					--button-color: var(--color-gray-95);
				}
			}

			&[disabled] {
				--button-color: var(--color-gray-70);
			}
		}
	}

	.button-icon {
		--icon-inline-size: 16px;

		display: grid;
		place-content: center;

        &.hide {
            display: none;
            opacity: 0;
        }

		& .icon {
			grid-column: 1;
			grid-row: 1;
			transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;
		}

		& .hide {
			display: none;
			opacity: 0;
		}

		path {
			stroke: currentColor;
			transition: stroke var(--transition-time) ease-in-out;
		}
	}
}
@layer foundation {
	.definition-list {
		display: grid;
		gap: 5px;
	}

	.definition-list-pair {
		align-items: center;
		display: flex;
		gap: .5ch;

		& dd {
			font-weight: var(--font-weight-bold);
		}
	}
}
@layer foundation {
	.nav-select {
		position: relative;
		
		& button {
			align-items: center;
			background-color: var(--select-background-color, var(--color-gray-30));
			border: none;
			border-radius: var(--radius-input);
			color: var(--select-text-color, var(--color-gray-85));
			display: flex;
			gap: 6px;
			padding: 2px 6px;
			transition: color var(--transition-time) ease-in-out, background-color var(--transition-time) ease-in-out;

			&:hover,
			&[aria-expanded='true'] {
				--select-background-color: var(--color-gray-80);
				--select-text-color: var(--color-gray-10);
			}
		}
	}

	.nav-select-dropdown {
		background-color: var(--color-gray-80);
		border: none;
		box-shadow: var(--box-shadow);
		display: none;
		left: 0;
		min-inline-size: 100%;
		opacity: 0;
		position: absolute;
		top: calc(100% + 2px);
		transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;
		z-index: 1;

		&[aria-hidden='false'] {
			opacity: 1;
			display: block;

			@starting-style {
				opacity: 0;
			}
		}

		& a {
			align-items: center;
			display: flex;
			gap: 6px;
			padding: 8px 16px;

			&:hover {
				color: var(--color-blue-1);
			}
		}
	}
}
@layer foundation {
	.tabs-group {
		display: grid;
		gap: 28px;
	}

	.tabs-list {
		border-block-end: 2px solid var(--color-gray-90);
		display: flex;
		gap: var(--tabs-list-gap, 24px);
		
		& li {
			display: flex;
		}
		
		& button {
			color: var(--tabs-button-color, var(--color-gray-70));
			font-size: var(--size-14);
			padding: 14px;
			position: relative;
			transition: color var(--transition-time) ease-in-out;
			
			&[aria-selected='true'] {
				--tabs-button-color: var(--color-gray-30);
				--button-underline: 1;
			}

			&:hover {
				--tabs-button-color: var(--color-gray-30);
			}

			&::after {
				background-color: currentColor;
				block-size: 2px;
				content: '';
				inset: auto 0 -2px;
				opacity: var(--button-underline, 0);
				position: absolute;
				transition: opacity var(--transition-time) ease-in-out;
			}
		}
	}

	.tabs {
		display: grid;
		isolation: isolate;
	}

	.tabs-panel {
		grid-column: 1;
		grid-row: 1;
		opacity: 1;
		transition:
			opacity var(--transition-time) ease-in-out,
			display var(--transition-time) allow-discrete;
		z-index: 2;

		@starting-style {
			opacity: 0;
		}

		&[hidden] {
			opacity: 0;
			z-index: 1;
		}
	}
}
@layer foundation {
	.title-group {
		& [class*='title-'] {
			align-items: center;
			display: flex;
			gap: 12px;
		}
	}
}
@layer foundation {
	.pill-group {
		display: flex;
		gap: 8px;
	}

	.pill {
		background-color: var(--pill-background-color, var(--color-gray-85));
		border-radius: var(--radius-pill);
		color: var(--pill-color, var(--color-gray-30));
		font-size: var(--size-10);
		inline-size: max-content;
		padding: 4px 8px;

		&.orange {
			--pill-color: var(--color-white);
			--pill-background-color: var(--color-warning);
		}
	
		&.red {
			--pill-color: var(--color-white);
			--pill-background-color: var(--color-error);
		}

		&.green {
			--pill-color: var(--color-white);
			--pill-background-color: var(--color-success);
		}

		&.blue {
			--pill-color: var(--color-white);
			--pill-background-color: var(--color-info);
		}
	}
}
@layer forms {
	.form form {
		margin-block-end: 0;
	}

	.form-grid {
		display: grid;
		gap: 35px;
	}
	
	.form-group {
		display: grid;
		gap: 8px;
		position: relative;

		&:has(:user-invalid) {
			.form-error-icon,
			p {
				display: block;
				opacity: 1;
	
				@starting-style {
					opacity: 0;
				}
			}
		}

		& label {
			color: var(--color-gray-50);
			font-size: var(--size-14);
		}
	}

	.form-field {
		display: grid;

		.input-field {
			grid-column: 1;
			grid-row: 1;
		}
	}

	.form-error-icon {
		align-self: center;
		display: none;
		grid-column: 1;
		grid-row: 1;
		inline-size: 16px;
		justify-self: end;
		margin-inline-end: 16px;
		transition:
			opacity var(--transition-time) ease-in-out,
			display var(--transition-time) allow-discrete;

		svg {
			stroke: var(--color-error);
		}
	}

	.form-error-message {
		color: var(--color-error);
		display: none;
		font-size: var(--size-14);
		right: 0;
		position: absolute;
		top: calc(100% + 6px);
		transition:
			opacity var(--transition-time) ease-in-out,
			display var(--transition-time) allow-discrete;
	}

	.form-set {
		display: grid;
		grid-template-columns: 40px 1fr auto;
		
		& .form-header {
			background-color: hsl(from var(--color-gray-90) h s 88%);
			display: grid;
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
			padding-block: 15px;
		}
		
		& legend {
			color: hsl(0 0% 40%);
			font-size: var(--size-14);
			font-weight: 600;
			grid-column: 2;
		}
		
		& .form-group {
			align-items: center;
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
			padding-block: 15px;

			& + .form-group {
				border-block-start: var(--border-size-1) solid var(--color-gray-80);
			}
		}

		& :is(.radio, .checkbox) {
			justify-self: center;
		}

		& label {
			color: var(--color-gray-50);
			display: grid;
		}
	}

	.input-field,
	textarea {
		background-color: hsl(from var(--color-black) h s 98%);
		border: var(--border-size-1) solid hsl(from var(--color-black) h s 80%);
		border-radius: var(--radius-input);
		inline-size: 100%;
		padding: 15px 16px;
		transition: border-color var(--transition-time) ease-in-out;
	
		&:user-invalid {
			border-color: var(--color-error);
		}
	}

	textarea {
		min-block-size: 100px;
		field-sizing: content;
	}
}
typeahead-text-input {
    .typeahead-options-container {
        background-color: var(--color-gray-85);
        color: var(--color-gray-10);
        padding: 2px;
        .typeahead-suggestion {
            padding: 1em;
            border-radius: 4px;
            background-color: var(--color-gray-90);
            &:hover {
                background-color: var(--color-gray-95);
                color: var(--color-blue-1);
                cursor: pointer;
            }
        }
    }
}
/* Toggle switch: a checkbox drawn as a track and a sliding knob. Used by the toggle field and by
   any field that needs an on/off control of its own (the resource name field's override). */
.toggle-switch {
    --toggle-track-width: 36px;
    --toggle-track-height: 20px;
    --toggle-knob-size: 16px;
    --toggle-gap: 2px;
    --toggle-off-color: hsl(from var(--color-black) h s 80%);
    --toggle-on-color: var(--color-blue-1, hsl(215 70% 45%));

    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    position: relative;
    user-select: none;

    /* Visually hidden, still focusable and still posted with the form. */
    .toggle-switch-input {
        block-size: 1px;
        inline-size: 1px;
        margin: 0;
        opacity: 0;
        position: absolute;
    }

    .toggle-slider {
        background-color: var(--toggle-off-color);
        block-size: var(--toggle-track-height);
        border-radius: calc(var(--toggle-track-height) / 2);
        flex-shrink: 0;
        inline-size: var(--toggle-track-width);
        position: relative;
        transition: background-color var(--transition-time, 150ms) ease-in-out;

        &::before {
            background-color: white;
            block-size: var(--toggle-knob-size);
            border-radius: 50%;
            box-shadow: 0 1px 2px hsl(0 0% 0% / 25%);
            content: "";
            inline-size: var(--toggle-knob-size);
            inset-block-start: var(--toggle-gap);
            inset-inline-start: var(--toggle-gap);
            position: absolute;
            transition: transform var(--transition-time, 150ms) ease-in-out;
        }
    }

    .toggle-switch-input:checked + .toggle-slider {
        background-color: var(--toggle-on-color);

        &::before {
            transform: translateX(calc(var(--toggle-track-width) - var(--toggle-knob-size) - 2 * var(--toggle-gap)));
        }
    }

    .toggle-switch-input:focus-visible + .toggle-slider {
        outline: 2px solid var(--toggle-on-color);
        outline-offset: 2px;
    }

    /* Only the label for the current state shows. */
    &:has(.toggle-switch-input:checked) .toggle-off-label,
    &:not(:has(.toggle-switch-input:checked)) .toggle-on-label {
        display: none;
    }

    &:has(.toggle-switch-input:disabled) {
        cursor: not-allowed;
        opacity: 0.5;
    }
}
@layer foundation {
	.table {
		& table {
			border-collapse: collapse;
			border-spacing: 0;
			font: inherit;
			inline-size: 100%;
		}

		& tr {
			border-block-end: var(--border-size-1) solid var(--color-gray-90);
		}

		& th {
			padding-block-end: 10px;
		}

		& td {
			padding-block: 10px;

			& > a {
				--alpha-underline: 1;
				--color-link: var(--color-blue-1);
			}
		}

		& :where(th, td) {
			text-align: var(--text-align, left);
			padding-inline: var(--padding-start, 23px) var(--padding-end, 23px);

			&:first-child {
				--padding-start: 8px;

				&:has(img) {
					--padding-end: 8px;

					inline-size: 44px;

					& img {
						aspect-ratio: 1;
						inline-size: 28px;
						object-fit: cover;
					}
				}

				&:has(.icon) {
					--icon-inline-size: 24px;
					--padding-end: 8px;

					inline-size: 44px;
				}
			}

			&:last-child {
				--padding-end: 8px;
			}
		}
	}
}
/*kestros-charts*/
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKmtlc3Ryb3MtY2hhcnRzKi8iXSwiZmlsZSI6Im1haW4uY3NzIn0= */
@layer forms {
	.site-admin-login {
		align-items: center;
		background: center / cover no-repeat var(--background-image-url);
		display: grid;
		grid-template-columns: minmax(15px, 1fr) min(100% - 30px, 487px) minmax(15px, 1fr);
		min-block-size: 100vh;
	}
	
	.site-admin-login-form {
		background-color: hsl(from var(--color-gray-90) h s l / 95%);
		border: var(--border-size-1) solid var(--color-gray-80);
		border-radius: var(--radius-2);
		display: grid;
		gap: 32px;
		grid-column: 2;
		grid-template-rows: auto;
		padding: 32px 24px;
	}
	
	.site-admin-login-header {
		display: grid;
		gap: 28px;
		justify-content: center;
		text-align: center;
	}
	
	.site-admin-login-logo {
		display: grid;
		max-block-size: 128px;
		max-inline-size: 128px;
		place-content: center;
		justify-self: center;
	
		& svg {
			block-size: 100%;
		}

		& img {
			max-block-size: inherit;
		}
	}
}
@layer foundation {
    .page-layout {
        --nav-icon-size: 40px;
        --nav-column-size: 256px;

        display: grid;
        grid-template-rows: auto 1fr;
        min-block-size: 100vh;
    }

    .page-layout-header {
        align-items: center;
        background-color: var(--color-gray-10);
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns:
		[badge-start icon] var(--nav-icon-size)
		[badge-end brand] var(--nav-column-size)
		[links] 1fr
		[utils] auto;
        padding: 2px 11px 2px 0;
    }

    .page-layout-header-badge {
        align-items: center;
        display: grid;
        grid-area: badge;
        grid-column: span 2;
        grid-template-columns: subgrid;

        & .icon {
            --icon-inline-size: 100%;

            display: grid;
            grid-area: icon;
            place-content: center;
        }

        & .brand-name {
            grid-area: brand;
        }
    }

    .page-layout-header-links {
        align-items: center;
        display: flex;
        grid-area: links;

        @media (width < 62em) {
            display: none;
        }
    }

    .page-layout-header-utils {
        align-items: center;
        display: flex;
        gap: 24px;
        grid-area: utils;
    }

    .page-layout-header-details {
        align-items: center;
        color: var(--color-gray-85);
        display: flex;
        gap: 8px;

        & .stage {
            color: var(--color-orange);
        }
    }

    .page-layout-main {
        display: grid;
        grid-template-columns: 296px 1fr;
    }

    .page-layout-aside {
        border-inline-end: var(--border-size-1) solid var(--color-gray-85);
        display: grid;
        overflow: hidden;
        grid-template-columns: calc(var(--nav-icon-size) + var(--nav-column-size)) 0;
        transition: grid-template-columns var(--transition-time) ease-in-out;

        &.nav-collapsed {
            --nav-background: var(--color-gray-80);
            --nav-item-size: 0;
            --subnav-display: block;
            --subnav-opacity: 1;

            grid-template-columns: var(--nav-icon-size) var(--nav-column-size);
        }
    }



    .page-layout-nav {
        background-color: var(--nav-background, var(--color-gray-90));
        padding: 10px 0 10px 2px;
        transition: background-color var(--transition-time) ease-in-out;

        &:not(.nav-closed) {
            height: calc(100vh - 40px);
            overflow: scroll;
        }

        & .title-small {
            color: var(--color-gray-70);
            text-transform: uppercase;
            margin-inline-start: var(--nav-icon-size);
        }

        & ul:not(:last-child) {
            margin-block-end: 24px;
        }

        & ul {
            display: grid;
            gap: 8px;
        }

        & a {
            align-items: center;
            background-color: hsl(from var(--color-gray-90) h s l / var(--nav-link-background-alpha, 0%));
            color: var(--layout-nav-link-color, var(--color-gray-30));
            display: grid;
            font-weight: var(--font-weight-medium);
            grid-template-columns: var(--nav-icon-size) var(--nav-item-size, 1fr);
            overflow: hidden;
            padding-block: 6px;
            text-underline-offset: .5em;
            transition: grid-template-columns var(--transition-time) ease-in-out,
            background-color var(--transition-time) ease-in-out,
            color var(--transition-time) ease-in-out,
            text-decoration-color var(--transition-time) ease-in-out;

            &:hover {
                --layout-nav-link-color: var(--color-gray-10);
            }

            &[aria-current='page'] {
                --layout-nav-link-color: var(--color-blue-1);

                pointer-events: none;

                /* On a drill-in page (a details page under this item) the current item is the
                   page's parent, so it stays a link back to it (#1652). */
                [data-drilled-in='true'] & {
                    pointer-events: auto;
                }
            }

            .nav-collapsed & {
                &[aria-current='page'] {
                    --nav-link-background-alpha: 100%;
                }
            }

            .nav-closed & {
                overflow: visible;
                position: relative;

                &:hover {
                    --nav-item-display: block;
                    --nav-item-opacity: 1;
                    --nav-item-x: 0;

                    & .page-layout-nav-item {
                        background-color: var(--color-gray-30);
                        border-radius: var(--radius-badge);
                        color: var(--color-white);
                        display: var(--nav-item-display, none);
                        font-size: var(--size-12);
                        left: calc(100% + 8px);
                        line-height: 1;
                        opacity: var(--nav-item-opacity, 0);
                        padding: 7px 8px;
                        pointer-events: none;
                        position: absolute;
                        top: 50%;
                        translate: var(--nav-item-x, -10px) -50%;
                        transition: all var(--transition-time) ease-in-out;

                        &::before {
                            background-color: var(--color-gray-30);
                            border-radius: 2px;
                            clip-path: polygon(
                                    100% 0%,
                                    0% 50%,
                                    100% 100%
                            );
                            content: '';
                            inline-size: 10px;
                            inset: 0 100% 0 auto;
                            position: absolute;
                        }

                        @starting-style {
                            translate: -10px -50%;
                        }
                    }
                }
            }
        }
    }

    .page-layout-panel {
        background-color: var(--color-gray-95);
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .page-layout-panel-ribbon {
        align-content: center;
        background-color: var(--color-gray-90);
        block-size: 3rem;
        border-block-end: var(--border-size-1) solid var(--color-gray-85);
        padding-inline: 16px;
    }

    .page-layout-nav-item {
        min-inline-size: max-content;

        .nav-closed & {
            display: none;
        }
    }

    .page-layout-nav-icon {
        place-self: center;
    }

    .page-layout-subnav {
        align-items: start;
        background-color: var(--color-gray-90);
        display: var(--subnav-display, none);
        min-inline-size: max-content;
        opacity: var(--subnav-opacity, 0);
        transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;
    }

    .page-layout-panel-content {
        max-inline-size: 1200px;
        min-inline-size: 700px;
        padding: 16px 11px 48px 37px;
        height: calc(100vh - 88px);
        overflow: scroll;
    }
}
@layer foundation {
	.site-admin-subnav {
		display: grid;
		gap: 20px;
		padding-block: 20px;
	}

	.site-admin-subnav-group {
		display: grid;
		gap: 24px;

		& p {
			color: var(--color-gray-70);
			text-transform: uppercase;
			margin-inline-start: var(--nav-icon-size);
		}


		& ul {
			display: grid;
			gap: 16px;
		}

		& a {
			color: var(--layout-nav-link-color, var(--color-gray-30));
			font-weight: var(--font-weight-medium);
			display: grid;
			grid-template-columns: var(--nav-icon-size) 1fr;
			text-underline-offset: .5em;

			&:hover {
				--layout-nav-link-color: var(--color-gray-10);
			}

			&[aria-current='page'] {
				--layout-nav-link-color: var(--color-blue-1);

				pointer-events: none;
			}
		}

		& .icon {
			place-self: center;
		}
	}
}
@layer foundation {
	.modal {
		background-color: var(--color-gray-95);
		border: none;
		border-radius: 7px;
		box-shadow: var(--box-shadow);
		min-inline-size: min(80vw, 600px);
	}

	.modal-content {
		display: grid;
		gap: 66px;
	}

	.modal-header {
		--title-font-size: var(--size-16);

		display: flex;
		gap: 18px;

		& .close-btn {
			flex-shrink: 0;
		}
	}
}
@layer foundation {
    result-log-modal-dialog {
        .hide {
            display: none;
        }
        ol {
            .status-ok {
                color:green;
            }
            .status-error {
                color: red;
            }
            .status-warn {
                color: orange;
            }
            .status-debug {
                color: grey;
            }
            .status-info {
                color: blue;
            }
        }
    }
}
@property --accordion-arrow-opacity {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@property --single-tag-icon {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

@property --multi-tag-icon {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@property --accordion-dropdown-height {
	syntax: '<length> | auto';
	inherits: false;
	initial-value: 0;
}

@property --accordion-arrow-rotate {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@property --accordion-arrow-translate {
	syntax: '<length>';
	inherits: false;
	initial-value: 0;
}

@layer foundation {
	.tree-navigation {
		border-block-end: var(--border-size-1) solid var(--color-gray-90);
	}

	.tree-navigation-group {
		align-items: start;
		border-block-start: var(--border-size-1) solid var(--color-gray-90);
		display: grid;
		gap: 20px;
		grid-template-columns: 1fr var(--controls-column, 31px);
		isolation: isolate;
		transition: opacity var(--transition-time) ease-in-out, grid-template-column var(--transition-time) ease-in-out;

		&.sortable-chosen {
			background-color: hsl(from var(--color-info) h s l / 10%);
			outline: 2px solid var(--color-info);
			outline-offset: -2px;
		}

		&.sortable-drag {
			background-color: var(--color-gray-90);
			outline: none;
		}

		&:has(> .tree-navigation-controls-container > .tree-navigation-controls[aria-hidden='false']) {
			--controls-column: auto;
		}
	}

	.tree-navigation-item {
		display: grid;
		grid-column: 1 / -1;
		grid-row: 1;
		grid-template-columns: subgrid;
		overflow-block: clip;



        .tree-navigation-item-label {
            display: flex;
            /*fill available*/
            flex: 1 1 auto;
        }
		&:has(> .tree-navigation-dropdown:empty) > .tree-navigation-accordion {
			&::before {
				--accordion-arrow-opacity: 0;
			}

			& > .tree-navigation-icons span {
				&:first-child {
					--single-tag-icon: 1;
				}

				&:last-child {
					--multi-tag-icon: 0;
				}
			}
		}

		&[open] {
			& > .tree-navigation-accordion::before {
				--accordion-arrow-rotate: -180deg;
				--accordion-arrow-translate: -5px;
			}

			&::details-content {
				--accordion-dropdown-height: auto;
			}
		}

		&::details-content {
			block-size: var(--accordion-dropdown-height, 0);
			grid-column: 1 / -1;
			transition:
				block-size var(--transition-time) ease-in-out,
				content-visibility var(--transition-time) allow-discrete;
			z-index: 2;

			@starting-style {
				--accordion-dropdown-height: 0;
			}
		}
	}

	.tree-navigation-accordion {
		align-items: center;
		display: flex;
		gap: 8px;
		grid-column: 1;
		grid-row: 1;
		padding: 10px;

		&::before {
			content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93biI+PHBhdGggZD0ibTYgOSA2IDYgNi02Ii8+PC9zdmc+');
			opacity: var(--accordion-arrow-opacity, 1);
			rotate: var(--accordion-arrow-rotate, 0deg);
			translate: 0 var(--accordion-arrow-translate, 0);
			transition:
				rotate var(--transition-time) ease-in-out,
				translate var(--transition-time) ease-in-out,
				opacity var(--transition-time) ease-in-out;
		}
	}

	.tree-navigation-icons {
		display: grid;

		& .icon {
			grid-column: 1;
			grid-row: 1;
			transition: opacity var(--transition-time) ease-in-out;

			&:first-child {
				opacity: var(--single-tag-icon, 0);
			}

			&:last-child {
				opacity: var(--multi-tag-icon, 1);
			}
		}
	}

	.tree-navigation-controls-container {
		align-items: center;
		display: flex;
		flex-direction: row-reverse;
		gap: 8px;
		grid-column: 2;
		grid-row: 1;
		isolation: isolate;
		reading-flow: flex-visual;
		z-index: 1;
	}

	.tree-navigation-ellipsis,
	.tree-navigation-controls {
		flex-shrink: 0;
		
		&[aria-hidden='false'] {
			--controls-opacity: 1;
			--controls-scale: 1;
			
			z-index: 1;
		}
	}
	
	.tree-navigation-ellipsis {
		justify-self: end;
	}
	
	.tree-navigation-controls {
		align-items: center;
		display: flex;
		opacity: var(--controls-opacity, 0);
		padding-block: 5px;
		scale: var(--controls-scale, .7);
		translate: var(--controls-x, 20px) 0;
		transition:
			opacity var(--transition-time) ease-in-out,
			scale var(--transition-time) ease-in-out,
			translate var(--transition-time) ease-in-out;
		transform-origin: center right;

		&[aria-hidden='false'] {
			--controls-x: 0;
		}
	}

	.tree-navigation-drag {
		cursor: grab;
	}

	.tree-navigation-dropdown {
		padding-inline-start: 22px;
	}
}
@property --accordion-arrow-opacity {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@property --single-tag-icon {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

@property --multi-tag-icon {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@property --accordion-dropdown-height {
	syntax: '<length> | auto';
	inherits: false;
	initial-value: 0;
}

@property --accordion-arrow-rotate {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@property --accordion-arrow-translate {
	syntax: '<length>';
	inherits: false;
	initial-value: 0;
}

@layer foundation {
	.tag-management {
		border-block-end: var(--border-size-1) solid var(--color-gray-90);
	}

	.tag-management-group {
		align-items: start;
		border-block-start: var(--border-size-1) solid var(--color-gray-90);
		display: grid;
		gap: 20px;
		grid-template-columns: 1fr var(--controls-column, 31px);
		isolation: isolate;
		transition: opacity var(--transition-time) ease-in-out, grid-template-column var(--transition-time) ease-in-out;

		&.sortable-chosen {
			background-color: hsl(from var(--color-info) h s l / 10%);
			outline: 2px solid var(--color-info);
			outline-offset: -2px;
		}

		&.sortable-drag {
			background-color: var(--color-gray-90);
			outline: none;
		}

		&:has(> .tag-management-controls-container > .tag-management-controls[aria-hidden='false']) {
			--controls-column: auto;
		}
	}

	.tag-management-item {
		display: grid;
		grid-column: 1 / -1;
		grid-row: 1;
		grid-template-columns: subgrid;
		overflow-block: clip;

		&:has(> .tag-management-dropdown:empty) > .tag-management-accordion {
			&::before {
				--accordion-arrow-opacity: 0;
			}

			& > .tag-management-icons span {
				&:first-child {
					--single-tag-icon: 1;
				}

				&:last-child {
					--multi-tag-icon: 0;
				}
			}
		}

		&[open] {
			& > .tag-management-accordion::before {
				--accordion-arrow-rotate: -180deg;
				--accordion-arrow-translate: -5px;
			}

			&::details-content {
				--accordion-dropdown-height: auto;
			}
		}

		&::details-content {
			block-size: var(--accordion-dropdown-height, 0);
			grid-column: 1 / -1;
			transition:
				block-size var(--transition-time) ease-in-out,
				content-visibility var(--transition-time) allow-discrete;
			z-index: 2;

			@starting-style {
				--accordion-dropdown-height: 0;
			}
		}
	}

	.tag-management-accordion {
		align-items: center;
		display: flex;
		gap: 8px;
		grid-column: 1;
		grid-row: 1;
		padding: 10px;

		&::before {
			content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93biI+PHBhdGggZD0ibTYgOSA2IDYgNi02Ii8+PC9zdmc+');
			opacity: var(--accordion-arrow-opacity, 1);
			rotate: var(--accordion-arrow-rotate, 0deg);
			translate: 0 var(--accordion-arrow-translate, 0);
			transition:
				rotate var(--transition-time) ease-in-out,
				translate var(--transition-time) ease-in-out,
				opacity var(--transition-time) ease-in-out;
		}
	}

	.tag-management-icons {
		display: grid;

		& .icon {
			grid-column: 1;
			grid-row: 1;
			transition: opacity var(--transition-time) ease-in-out;

			&:first-child {
				opacity: var(--single-tag-icon, 0);
			}

			&:last-child {
				opacity: var(--multi-tag-icon, 1);
			}
		}
	}

	/*
	 * The row controls (ellipsis / edit / add) render inside a shared
	 * expandable-button-group whose class is 'tree-navigation-controls-container'
	 * (was 'tag-management-controls-container' before the tree-molecule refactor).
	 * .tag-management-group is a grid with align-items: start, so the controls
	 * column is top-anchored ? the ellipsis floats to the top of the row with
	 * empty space below. Center it in the row. Scoped to the tag panel so the
	 * shared editor tree is untouched.
	 */
	.tag-management-group > .tree-navigation-controls-container {
		align-self: center;
	}

	.tag-management-ellipsis,
	.tag-management-controls {
		flex-shrink: 0;
		
		&[aria-hidden='false'] {
			--controls-opacity: 1;
			--controls-scale: 1;
			
			z-index: 1;
		}
	}
	
	.tag-management-ellipsis {
		justify-self: end;
	}
	
	.tag-management-controls {
		align-items: center;
		display: flex;
		opacity: var(--controls-opacity, 0);
		padding-block: 5px;
		scale: var(--controls-scale, .7);
		translate: var(--controls-x, 20px) 0;
		transition:
			opacity var(--transition-time) ease-in-out,
			scale var(--transition-time) ease-in-out,
			translate var(--transition-time) ease-in-out;
		transform-origin: center right;

		&[aria-hidden='false'] {
			--controls-x: 0;
		}
	}

	.tag-management-drag {
		cursor: grab;
	}

	.tag-management-dropdown {
		padding-inline-start: 22px;
	}
}
@layer foundation {
	.validation-map {
		display: grid;
		gap: 16px;

		& p {
			align-items: start;
			display: flex;
			gap: 8px;
		}

		& .icon {
			flex-shrink: 0;
		}

		& ul {
			display: inherit;
			gap: inherit;
			margin-block-start: 16px;
			margin-inline-start: 22px;
		}
	}
}
.page-layout-editor {
    .page-layout-panel-ribbon {
        z-index: 9;
    }

    .page-layout-panel-content {
        padding: 0px;
    }
}

.page-layout-aside-editor {
    border-inline-end: var(--border-size-1) solid var(--color-gray-85);
    background-color: var(--nav-background, var(--color-gray-90));
    display: grid;
    overflow: hidden;
    height: 100vh;
    overflow: scroll;

    .tree-navigation-group {
        gap: 12px;
    }

    .tree-navigation-accordion {
        gap: 0px !important;
        padding: 4px 8px !important;
    }

    .tree-navigation-item summary .tree-navigation-item-label {
        /* TODO - Update the styles to match the top ribbon action styles */
        gap: 8px;
        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .tree-navigation-item summary.selected .tree-navigation-item-label {
        color: var(--color-blue-1);
    }

    expandable-button-group {
        gap: 0px !important;
        grid-column: 3 !important;

        .button-group {
            gap: 0px !important;
        }
    }


    /*TODO move this to its own library.*/
}
@layer foundation {
	.dynamic-content-area {
		display: grid;

		& > * {
			grid-column: 1;
			grid-row: 1;
		}

		& .error {
			--icon-inline-size: 72px;

			color: var(--color-gray-70);
			display: grid;
			gap: 5px;
			place-content: center;
			justify-items: center;
			z-index: 1;
			
			&[aria-hidden='true'] {
				display: none;
			}
		}
	}

	.dynamic-content {
		align-content: start;
		display: grid;
		gap: var(--dynamic-content-spacing, 32px);
	}

	.dynamic-content-group {
		display: grid;
		gap: 24px;
	}
}
@layer foundation {
	.loader {
		--icon-inline-size: 72px;
		
		background-color: hsl(from var(--color-gray-95) h s l / 90%);
		display: grid;
		place-content: center;
		transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;
		z-index: 1;
		
		&[aria-hidden='true'] {
			display: none;
			opacity: 0;
		}
	}
}
@layer foundation {
	.asset-preview {
		display: grid;
		gap: 12px;
	}
}
@layer foundation {
	.node-list {
		display: grid;
		gap: 56px;
	}

	.node-details {
		display: grid;
		gap: 14px;

		.node-list & {
			border-block-start: 1px solid var(--color-gray-80);
			padding: 16px 8px 0 0;
		}
	}

	.node-details-header {
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.node-details-status {
		align-items: center;
		display: flex;
		gap: 24px;

		&.status-blue {
			color: var(--color-blue-1);
		}
	
		&.status-green {
			color: var(--color-green);
		}
	
		&.status-orange {
			color: var(--color-orange);
		}
	
		&.status-red {
			color: var(--color-red);
		}
	}
}
@layer foundation {
	.node-specs {
		display: grid;
		gap: 16px;
	}

	.node-specs-row {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		max-inline-size: var(--node-specs-inline-size, 564px);

		.content-group & {
			--node-specs-inline-size: auto;
		}
	}
}
@layer foundation {
	/* The size fields sit inside the dialog's form, but in their own element, so they need the
	   form's spacing restated: the mode radio, each question and the summary are one gap apart.
	   A conditional group (the fields of one server type) gets the same gap. */
	.server-size-wizard,
	.server-size-wizard-step-1:not([hidden]),
	.server-size-wizard-step-2:not([hidden]),
	conditional-field-group:not([hidden]) {
		display: grid;
		gap: 24px;
	}

	.server-size-wizard .radio-field {
		border: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 8px 24px;
		margin: 0;
		padding: 0;
	}

	.server-size-wizard .radio-option {
		align-items: center;
		display: flex;
		gap: 8px;
	}

	.server-size-wizard-recommendation:empty,
	.server-size-wizard-summary-specs:empty {
		display: none;
	}

	.server-size-wizard-cost-table {
		border-collapse: collapse;
		font-variant-numeric: tabular-nums;
		inline-size: 100%;

		& th,
		& td {
			padding-block: 4px;
			text-align: end;
		}

		& th:first-child {
			text-align: start;
		}

		& thead th {
			color: hsl(0 0% 40%);
			font-size: var(--size-14, 0.875rem);
			font-weight: 600;
		}

		& .server-size-wizard-cost-total {
			border-block-start: var(--border-size-1, 1px) solid var(--color-gray-80, hsl(0 0% 80%));
			font-weight: 600;
		}
	}

	.server-size-wizard-summary,
	.server-size-wizard-step-2 .server-size-wizard-review {
		border: var(--border-size-1, 1px) solid var(--color-gray-80, hsl(0 0% 80%));
		border-radius: 8px;
		display: grid;
		gap: 4px;
		padding: 16px;

		& p {
			margin: 0;
		}
	}

	.server-size-wizard-step-1[hidden],
	.server-size-wizard-step-2[hidden],
	.server-size-wizard-summary-title {
		color: hsl(0 0% 40%);
		font-size: var(--size-14, 0.875rem);
		font-weight: 600;
	}

	.server-size-wizard-estimate-formula,
	.server-size-wizard-estimate-not-included,
	.server-size-wizard-estimate-credit {
		color: hsl(0 0% 40%);
		font-size: var(--size-14, 0.875rem);
	}
}
@layer foundation {
	.user-summary {
		align-items: center;
		display: flex;
		gap: 16px;

		& figure {
			--icon-inline-size: 96px;
		}
	}

	.user-details {
		--title-spacing: 0;

		display: grid;
		gap: 8px;
	}
}
@layer foundation {
	/*
	 * The theme picker wraps the Framework, Version and Theme fields in a single
	 * element. Left unstyled it is one child of .form-grid, so its three fields
	 * share one grid cell and lose the 35px gap every other dialog field gets.
	 * display: contents lifts them into the grid so they inherit that gap
	 * rather than restating the value here.
	 */
	theme-picker {
		display: contents;
	}
}
resource-name-field {
    display: grid;

    .input-field[readonly] {
        background-color: hsl(from var(--color-black) h s 94%);
        color: var(--color-gray-50);
        cursor: default;
    }

    /* A readonly input is barred from constraint validation, so :user-invalid never matches it.
       The field marks itself instead. */
    &.is-invalid {
        .input-field {
            border-color: var(--color-error);
        }

        .form-error-icon,
        .form-error-message {
            display: block;
            opacity: 1;
        }
    }

    .form-error-message {
        position: static;
    }

    /* The override switch is the forms library's toggle switch (fields/toggle-switch.css). */
    .toggle-switch {
        justify-self: start;
    }
}
@layer foundation {
    .page-layout-editor {
        min-block-size: 100vh;
    }

    .page-layout-editor .page-layout-main {
        min-block-size: 100vh;
    }

    .page-layout-editor .page-layout-panel {
        min-block-size: 100vh;

        > dynamic-content-area {
            display: flex;
            flex-direction: column;
            block-size: 100%;
        }
    }

    .page-layout-editor .page-layout-panel-content {
        display: flex;
        block-size: 100%;
        inline-size: 100%;
    }

    .page-layout-editor .page-layout-panel-content .dynamic-content-area {
        display: flex;
        block-size: 100%;
        inline-size: 100%;
    }

    .page-layout-editor .page-layout-panel-content .dynamic-content {
        display: flex;
        flex-direction: column;
        block-size: 100%;
        inline-size: 100%;
    }

    .page-layout-editor site-editor {
        display: flex;
        flex-direction: column;
        block-size: 100%;
    }

    site-editor object.page-editor--selected-page {
        block-size: 100%;
        inline-size: 100%;
    }
}
kes-editor-overlay {
    pointer-events: none;
    display: flex;
    position: absolute;
    height: 0;
    overflow: hidden;
    font-size: 1rem;
    color: #0182ff;
    align-items: center;
    justify-content: center;

    &.edit-overlay--bordered {
        border: 2px solid;
    }

    &.edit-overlay--transparent-interior {
        background: none !important;
    /*//background-color: transparent !important;*/
    }

    &.edit-overlay--info {
    /*//background-color: rgba(0, 191, 255, 0.5);*/
        /*background-color: transparent;*/
        /*background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230182ff' fill-opacity='0.5' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");*/
        /*border-color: rgba(0, 87, 171, 1);*/
        /*color: rgba(204, 204, 204, 0.5);*/
    }

    &.edit-overlay--success {
        background-color: rgba(0, 255, 191, 0.5);
        border-color: rgba(0, 171, 87, 1);
        color: rgba(204, 204, 204, 0.5);
    }

    &.edit-overlay--danger {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cc0000' fill-opacity='0.5' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
        border-color: rgba(255, 0, 0, 1);
        color: rgba(204, 204, 204, 0.5);
    }

    &.edit-overlay--warning {
        background-color: rgba(255, 191, 0, 0.5);
        border-color: rgba(255, 171, 0, 1);
        color: rgba(204, 204, 204, 0.5);
    }

    &.edit-overlay--muted {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cccccc' fill-opacity='0.5' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
        /*background-color: rgba(204, 204, 204, 0.5);*/
        border-color: rgba(204, 204, 204, 1);
        color: rgba(0, 0, 0, 0.5);
    }

    &.edit-overlay--high-contrast {
        background-color: rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 1);
        color: rgba(0, 0, 0, 0.5);
    }

}
site-editor-toolbar {

    background-color: var(--color-blue-1);
    color: white;
    display: flex;
    position: absolute;
    height: 0;
    overflow: hidden;
    align-items: center;
    font-size: 1rem;
    z-index: 8;
    border-radius: var(--radius-button);

    button {
        color: var(--color-white);
        &:hover {
            background-color: var(--color-blue-2);
        }
        /*disabled*/
        &:disabled {
            color: var(--color-blue-2);
        }
    }

    editor-toolbar--item-name {
        display: flex;
        padding: 0 .5em;
        border-right: 1px solid #0182ff;
        color: var(--color-white);
    }

    &.attached--top {
        /*/ / border-top-left-radius: 10 px;*/
        /*/ / border-top-right-radius: 10 px;*/
    }

    &.attached--bottom {
        /*/ / border-bottom-left-radius: 10 px;*/
        /*/ / border-bottom-right-radius: 10 px;*/
    }

    &.attached {
        height: auto;
        overflow: visible;
        /*/ / transition: top 1 s ease 0 s;*/
    }


    kes-editor-actionbar {
        display: flex;
        /*/ / padding-left: 10 px;*/
        /*/ / padding-right: 10 px;*/
    }

    kes-editor-action, .kes-editor-action {
        display: flex;
        align-items: center;
        color: white;
        padding: 8px;
        /*/ / display: flex;*/
        /*/ / padding-left: 5 px;*/
        /*/ / padding-right: 5 px;*/
        /*/ / padding-top: 7 px;*/
        /*/ / padding-bottom: 7 px;*/
        /*/ / align-items: center;*/
        /*/ / color: white;*/

        &:hover {
            cursor: pointer;
            background-color: #0057ab;
            color: white;
        }
    }
}