.gremium {
	--gremium-width: 1140px;
	--gremium-header-toggle: 0px;
	--gremium-header-height: 70px;
	container-type: inline-size;
	container-name: gremium;

	> div.content {
		display: grid;
		grid-template-columns: 1fr;

		&:has(aside) {
			grid-template-columns: minmax(400px, 3fr) 1fr;
		}

		&.limit-width {
			max-width: var(--gremium-width);
		}

		> * {
			outline: solid 1px rgba(255, 0, 0, 0.3);
			outline: none;
		}

		& > header {
			height: 60px;
			padding: 15px 10px;
			align-items: center;
			justify-content: center;
			color: var(--root-font-color);
			z-index: 41;
			display: flex;
			justify-content: space-between;
			cursor: default;
			white-space: nowrap;
			transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			justify-content: flex-start;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			background-color: var(--root-background-color);
			background-color: var(--root-background-color_backdrop);
			transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			backdrop-filter: blur(2px);
			-webkit-backdrop-filter: blur(2px);
			-moz-backdrop-filter: blur(2px);

			&.glue {
				position: sticky;
				top: var(--root--menubar-height);
			}

			> h1,
			> cite,
			> ul,
			> a,
			> span {
				font-size: 1.5em;
				line-height: 1.5em;
			}

			> h1 {
				font-weight: normal;
				padding: 0;
				margin: 0;
				overflow-x: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			> cite {
				flex: 1;
				text-align: right;
				font-style: normal;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			> ul {
				list-style: none;
				display: flex;
				padding: 0;
				margin: 0;
			}

			> ul > li {
				padding: 0;
				margin: 0;
				padding-left: 30px;
				position: relative;

				> a {
					color: var(--root-font-lightcolor);
				}

				> a:hover {
					color: var(--root-link-color);
				}

				&::before {
					display: block;
					position: absolute;
					content: "\\";
					left: 10px;
					color: #ccc;
				}
			}

			> a.previous,
			> span {
				position: relative;
				display: inline-block;
				width: 40px;
				min-width: 40px;
				margin-right: 10px;
				outline: none;
				cursor: default;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			> a.previous {
				width: 30px;
				margin-right: 5px;
				text-decoration: none;

				&::before {
					position: absolute;
					display: inline-block;
					font-family: "icomoon";
					color: var(--root-ribbon-font-color);
					content: "\e618";
					padding: 0px;
					padding-left: 7px;
					-webkit-transition: padding 0.2s ease;
					transition: padding 0.2s ease;
				}

				&:active::before,
				&:hover::before {
					color: var(--root-link-color);
					padding-left: 0px;
				}

				&:active,
				&:focus {
					border-radius: 2px;
					outline: solid 2px var(--outline-border-color);
					outline-offset: 1px;
				}

				&:active {
					transform: translateY(0.08rem);
				}
			}

			> span::before {
				position: relative;
				display: inline-block;
				font-family: "icomoon4";
				text-align: center;
				padding: 15px 6px;
				font-size: 1.2em;
			}

			> span.exclamation::before {
				color: red;
				content: "\ea08";
			}

			> span.check::before {
				color: dodgerblue;
				content: "\ea10";
			}

			> span.informative::before {
				color: orange;
				content: "\ea0c";
			}

			> span.xmark::before {
				color: red;
				content: "\ea0f";
			}

			> span.question::before {
				color: limegreen;
				content: "\ea09";
			}
		}

		& > menu {
			padding: 3px 10px 0px 10px;
			margin: 0;
			height: 40px;
			z-index: 40;
			color: var(--root-font-color);
			background-color: var(--root-background-color);
			transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			background-color: var(--root-background-color_backdrop);
			transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			backdrop-filter: blur(2px);
			-webkit-backdrop-filter: blur(2px);
			-moz-backdrop-filter: blur(2px);

			&.btn-set {
				justify-content: flex-start;
			}

			> span {
				color: var(--root-font-color);
			}

			&.glue {
				position: sticky;
			}
		}

		& > legend {
			padding: 0px 10px 10px 10px;
			background-color: var(--root-background-color);
			transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			z-index: 20;
			width: 100%;
			margin-right: 0px;
			margin-left: 0px;
			color: var(--root-font-color);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			/* backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			-moz-backdrop-filter: blur(6px); */
		}

		& > h2 {
			color: var(--root-font-lightcolor);
			padding: 15px 25px;
			font-size: 1.4em;
			width: 100%;
			z-index: 20;
			margin: 0;
			border: 0px;
			white-space: nowrap;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			font-weight: normal;
			background-color: var(--root-background-color_backdrop);
			transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			backdrop-filter: blur(2px);
			-webkit-backdrop-filter: blur(2px);
			-moz-backdrop-filter: blur(2px);

			> * {
				font-weight: normal;
			}
		}

		& > article {
			position: relative;
			color: var(--root-font-color);
			padding: 20px;
			margin: 5px 10px 25px 10px;
			border: none;
			box-shadow: 1px 2px 6px 0px rgba(50, 50, 50, 0.1);
			background-color: var(--root-ribbon-menu-background-color);
			transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			border-radius: 10px;

			& > h1,
			& > form > h1 {
				font-weight: normal;
				padding: 10px 0px 20px 0px;
				margin: 0;
				font-size: 1.3em;
				line-height: 1.3em;
				color: var(--root-font-lightcolor);
				width: 100%;
				margin-right: 0px;
				margin-left: 0px;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			}

			&.nobg {
				padding: 0px 15px;
				background: none;
				border: none;
				box-shadow: none;
				margin: 0;
			}

			&.nopadding {
				padding: 0px;
			}

			&.no-border-radious {
				border-radius: 0px;
			}

			& div.form {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				column-gap: 20px;
				row-gap: 25px;
				padding-bottom: 20px;

				> label {
					flex-grow: 1;
					flex-shrink: 0;
					flex-basis: 0%;

					> .btn-set > span {
						white-space: wrap;
						line-height: 1.5em;
					}

					> h1,
					> div {
						font-weight: normal;
						font-size: 1em;
						margin: 0;
						padding: 0;
					}

					> h1 {
						padding: 5px 0px;
						color: var(--root-font-lightcolor);
						transition: color 0.2s ease-out;
						text-rendering: geometricPrecision;
						-moz-text-transform: uppercase;
						-webkit-text-transform: uppercase;
						text-transform: uppercase;
						font-size: .9em;
						position: relative;
					}

					> div {
						min-width: 120px;
						margin-bottom: 5px;

						&.fit {
							padding: 3px 10px;
							line-height: 1.5em;
						}
					}

					> h1.required:hover::before {
						display: inline-block;
						border-radius: 4px;
						padding: 7px;
						text-transform: capitalize;
						color: black;
						background-color: bisque;
						position: absolute;
						top: 20px;
						z-index: 20;
						content: "Required field!";
						pointer-events: none;
					}

					> h1::after {
						text-transform: lowercase;
						display: inline-block;
						margin-left: 15px;
						text-align: center;
						color: white;
						background-color: red;
						font-weight: bold;
						font-size: 0.9em;
						width: 14px;
						border-radius: 20px;
						content: "i";
						opacity: 0;
						transition: opacity 0.1s ease-in, scale 0.1s ease-in;
					}

					> h1.required::after {
						opacity: 1;
					}

					&:hover > h1,
					&:focus-within > h1 {
						color: var(--root-link-color);
						/* text-decoration: underline; */
					}
				}
			}

			& div.insection-splitview {
				display: flex;
				gap: 20px;
				flex-wrap: wrap;

				> div {
					/* border:solid 1px grey; */
					font-size: 1em;
				}

				> div.limit-height {
					overflow-y: auto;
				}

				> div.limit-height::-webkit-scrollbar {
					width: 5px;
				}

				> div.limit-height:hover::-webkit-scrollbar-thumb {
					background-color: var(--input-hover_border-color);
				}

				> div.limit-height::-webkit-scrollbar-thumb {
					background-color: var(--input_border-color);
				}
			}
		}

		& > aside {
			grid-column: 2;
			grid-row: 1 / 100;
			position: relative;
			color: var(--root-font-color);
			border-radius: 7px;

			> div {
				display: block;
				position: sticky;
				top: var(--root--menubar-height);
				height: calc(100vh - var(--root--menubar-height));
				overflow-y: auto;
				padding-top: 20px;
				margin-left: 15px;
				margin-right: 10px;

				&::-webkit-scrollbar {
					width: 3px;
				}

				&:hover::-webkit-scrollbar-thumb {
					background-color: var(--input-hover_border-color);
				}

				&::-webkit-scrollbar-thumb {
					background-color: var(--input_border-color);
				}

				> h1 {
					padding: 7px 15px 15px 0px;
					margin: 0px;
					font-size: 1.4em;
					line-height: 1.4em;
					color: var(--root-font-lightcolor);
					z-index: 20;
					width: 100%;
					margin-right: 0px;
					margin-left: 0px;
					font-weight: normal;
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-khtml-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
					white-space: nowrap;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		& > * {
			border: solid 1px rgba(0, 0, 0, 0.3);
			border: none;
		}
	}
}

@media only screen and (max-width: 768px) {
	.gremium {
		> div.content {
			header {
				height: 60px;
			}

			/* 
			> header > h1,
			> header > cite,
			> header > ul,
			> header > a,
			> header > span {
				
			} */
			& > menu.btn-set {
				flex-wrap: wrap;
			}

			& > article {
				border-radius: 0;
				padding: 10px;
			}

			& > h2 {
				color: var(--root-font-lightcolor);
			}

			& > article.column {
				border: solid 3px red;
			}
		}
	}
}

@container gremium (max-width: 768px) {
	.links {
		display: none;
	}

	.gremium {
		> div.content {
			display: block;
			grid-template-columns: 1fr;

			& aside {
				grid-column: auto;
				grid-row: auto;

				> div {
					height: auto;
					position: relative;
					top: auto;
				}
			}
		}

		&:has(aside) {
			grid-template-columns: 1fr;
		}
	}
}

@media only print {
	.gremium > div.content > article {
		box-shadow: none;
		border: none;
	}
}