@layer themes {
	.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: 9;
				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;
		}
	}
}