/* Settings */

	:root {

		/* Overides */

			--global-scale: 	100;
			--grid-cols-count:	12;
			--gap-default:		1rem;

		/* Text */

			--font-size-default: 1em;

			--font-size:	calc(var(--font-size-default)			* var(--global-scale-factor));
			--font-size-xs: calc(var(--font-size-default) / 3		* var(--global-scale-factor));
			--font-size-sm: calc(var(--font-size-default) / 2		* var(--global-scale-factor));
			--font-size-md: calc(var(--font-size-default) * 1.25	* var(--global-scale-factor));
			--font-size-lg: calc(var(--font-size-default) * 1.5		* var(--global-scale-factor));
			--font-size-xl: calc(var(--font-size-default) * 2		* var(--global-scale-factor));

			font-size: calc(var(--font-size) * var(--global-scale-factor));
			font-family: Gotham;

		/* Transitions */

			/* Transitions . Settings */

				/* Durations */

					--transition-duration-default:	200ms;
					--transition-duration-fast:		calc( var(--transition-duration-default) * 0.5);
					--transition-duration-slow:		calc( var(--transition-duration-default) * 2);

				/* Delays */

					--transition-delay-default:		var(--transition-duration-default);
					--transition-delay-fast:		calc( var(--transition-duration-default) * 0.5);
					--transition-delay-slow:		calc( var(--transition-duration-default) * 2);

				/* Easing */

					--transition-ease-default:		ease-in-out;
					--transition-ease-decelerate:	cubic-bezier(.79,.02,.13,1);
					--transition-ease-slowed: 		cubic-bezier(.17,.67,.7,.99);

			/* Transitions . Presets */

				--transition-resize:	width var(--transition-duration-default) var(--transition-ease-default), height var(--transition-duration-default) var(--transition-ease-default), font-size var(--transition-duration-default) var(--transition-ease-default);
				--transition-transform:	transform var(--transition-duration-default) var(--transition-ease-default);
				--transition-buttons:	all var(--transition-duration-default) var(--transition-ease-default);
				--transition-opacity:	opacity var(--transition-duration-default) var(--transition-ease-default);

		/* App */

			--transition-app: transform var(--transition-duration-slow) var(--transition-ease-decelerate), width var(--transition-duration-slow) var(--transition-ease-decelerate), opacity var(--transition-duration-slow) var(--transition-ease-decelerate);

		/* Header */

			--header-height-default: 56px;
			--header-height: calc((var(--header-height-default) * 1) * var(--global-scale-factor));
			--transition-header: height var(--transition-duration-slow) var(--transition-ease-decelerate), padding var(--transition-duration-slow) var(--transition-ease-decelerate), transform var(--transition-duration-slow) var(--transition-ease-decelerate);

		/* Body */

			--transition-body: transform var(--transition-duration-slow) var(--transition-ease-decelerate), opacity var(--transition-duration-slow) var(--transition-ease-decelerate);
			--transition-asides: max-width var(--transition-duration-slow) var(--transition-ease-decelerate);

		/* Asides */

			--asides-handle-height-default: 36px;
			--asides-handle-height: calc((var(--asides-handle-height-default) * 1) * var(--global-scale-factor));
			--asides-handle-width: var(--asides-handle-height);

			--asides-max-width-default: 350px;

			--asides-max-width: calc((var(--asides-max-width-default) * 1) * var(--global-scale-factor));
			--asides-width-xs: calc(var(--asides-max-width) / 3.5);
			--asides-width-sm: calc(var(--asides-max-width) / 1.5);
			--asides-width-md: calc(var(--asides-max-width) * 1);
			--asides-width-lg: calc(var(--asides-max-width) * 1.2);
			--asides-width-xl: calc(var(--asides-max-width) * 2);

			--asides-left-max-width: var(--asides-max-width);
			--asides-left-width: var(--asides-left-max-width);

			--asides-right-max-width: var(--asides-max-width);
			--asides-right-width: var(--asides-right-max-width);

		/* Footer */

			--footer-height-default: 56px;
			--footer-height: calc((var(--footer-height-default) * 1) * var(--global-scale-factor));
			--transition-footer: height var(--transition-duration-slow) var(--transition-ease-decelerate), min-height var(--transition-duration-slow) var(--transition-ease-decelerate), padding var(--transition-duration-slow) var(--transition-ease-decelerate), transform var(--transition-duration-slow) var(--transition-ease-decelerate);

		/* Decoration */

			--border-color: rgba(0,0,0,0.08);
			--border-width: 1px;

	}

	body:has(#omnibar) {
		--header-height: var(--omnibar-button-height) !important;
	}

	body:not(:has(#omnibar)){

		--omnibar-button-width: 0px;

	}

	@media (max-width: 575.98px) {

		:root {

			--asides-left-max-width: 90vw;
			--asides-right-max-width: 90vw;

		}

	}

	h-flex > * {
		transition: var(--transition-resize);
	}

	button {
		transition: var(--transition-buttons);
	}

	button.on{
		background-color: blue;
	}

	container{
		display: block;
	}

	.pill {
		display: block !important;
		padding: 0px 5px 0px 5px;
		line-height: 20px;
		min-width: 20px;
		font-size: 12px;
		text-align: center;
		color: white;
		border-radius: 10px;
		background-color: red;
	}

/*  */

	body {
		overflow: hidden !important;
	}



/* Layout elements */

	/* Layout elements . App */

		#app {
			z-index: 1;
			position: relative;
			display: flex;
			flex-direction: column;
			height: 100vh;
			width: calc(100% - var(--omnibar-button-width));
			transform: translateX(var(--omnibar-button-width));
			transition: var(--transition-app);
			opacity: 1;
		}

		#app.fullscreen,
		#app.widescreen {
			width: 100%;
			transform: translateX(0);
		}

		body:has(#app.fullscreen) #omnibar-button,
		body:has(#app.widescreen) #omnibar-button {
			opacity: 0;
			pointer-events: none;
		}

		#app.loading {
			opacity: 0;
		}

		#omnibar:not(.closed) + #app {
			transform: translateX(var(--omnibar-max-width));
		}

		/* Extra small only (≤ 576px) */
		@media (max-width: 575.98px) {

			#app {
				width: 100%;
				transform: translateX(0px);
			}

			#omnibar:not(.closed) + #app {
				transform: translateX(var(--omnibar-max-width));
			}

		}

		/* Layout elements . App . Header */

			#app > .header {
				height: var(--header-height);
				padding-left: var(--gap-default);
				padding-right: var(--gap-default);
				transition: var(--transition-header);
				background-color: #37597c;
				color: white;
			}

			#app.fullscreen > .header {
				height: 0px !important;
			}

			/* Extra small only (≤ 576px) */
			@media (max-width: 575.98px) {

				body:has(#omnibar) #app > .header{
					padding-left: var(--omnibar-button-width);
				}

				#omnibar:not(.closed) + #app .header,
				body:has(#omnibar) #app.widescreen > .header  {
					padding-left: var(--gap-default);
				}

			}

			#app > .header.hidden {
				transform: translateY(calc(var(--header-height) * -1));
			}

			#app > .header h-flex {
				height: 100%;
				flex: 1 1 auto;
			}

			/* Layout elements . App . Header . Start */

				#app > .header h-flex > .start {}

					#app > .header h-flex > .start .breadcrumb-menu {
						opacity: 0.7;
						transition: var(--transition-opacity);
					}

					#app > .header h-flex > .start .breadcrumb-menu:hover {
						opacity: 1;
					}

					#app > .header h-flex > .start .breadcrumb-menu .item a {
						color: white;
					}

			/* Layout elements . App . Header . Middle */

				#app > .header h-flex > .middle {}

			/* Layout elements . App . Header . End */

				#app > .header h-flex > .end {}

		/* Layout elements . App . Body */

			#app > .body {
				display: flex;
				flex-direction: column;
				flex: 1 1 auto;
				transition: var(--transition-body);
				overflow: hidden;
			}

			#app > .body.hidden {
				transform: scale(0.95);
				opacity: 0;
			}

			/* Layout elements . App . Body . Header */

				#app > .body .header {
					min-height: var(--header-height);
					padding-left: var(--gap-default);
					padding-right: var(--gap-default);
					border-bottom-width: var(--border-width);
					border-bottom-style: solid;
					border-bottom-color: var(--border-color);
				}

			/* Layout elements . App . Body . Content */

				#app > .body .content {
					display: flex;
					flex-direction: row;
					flex: 1 1 auto;
				}

				#app.mobile .content,
				#app.tablet .content {
					display: block;
					position: relative;
					height: 100%;
					overflow: hidden;
				}

				#app > .body > .content > * {
					flex: 1 1 auto;
				}

				/* Layout elements . App . Body . Container */

					#app > .body > .content > container {
						flex: 1 1 auto;
						flex-grow: 1;
					}

					#app.mobile > .body > .content > container,
					#app.tablet > .body > .content > container {
						height: 100%;
						margin-left: calc(var(--asides-handle-width));
						margin-right: calc(var(--asides-handle-width));
						transition: var(--transition-body);
					}

					#app.mobile.push-right > .body > .content > container{
						transform: translateX(calc((var(--asides-left-max-width) - (var(--asides-handle-width)*1))));
					}

					#app.tablet.push-right > .body > .content > container {
						transform: translateX(calc((var(--asides-left-max-width) - (var(--asides-handle-width)*1))));
					}

					#app.mobile.push-left > .body > .content > container{
						transform: translateX(calc((var(--asides-left-max-width) - (var(--asides-handle-width)*2)) * -1));
					}

					#app.tablet.push-left > .body > .content > container {
						transform: translateX(calc(var(--asides-right-width) * -1));
					}

				/* Layout elements . App . Body . Asides */

					#app > .body > .content > aside,
					#app > .body > .content > aside.open {

						--asides-left-width: var(--asides-left-max-width);
						--asides-right-width: var(--asides-right-max-width);

						transition:	var(--transition-asides);
						overflow: hidden;
						opacity: 1;
					}

					#app.mobile > .body > .content > aside,
					#app.tablet > .body > .content > aside {
						position: absolute;
						top: 0;
						bottom: 0;
						z-index: 3;
						transition: all 0.3s ease;
					}

					/* Layout elements . App . Body . Asides . Handle */

						#app > .body > .content > aside .handle {
							position: relative;
							height: var(--asides-handle-height);
							width: var(--asides-handle-width);
							line-height: var(--asides-handle-height);
							text-align: center;
							font-family: "BasekitSymbols";
							border-radius: calc(var(--asides-handle-height) / 2);
							background-color: white;
							cursor: pointer;
							z-index: 1000;
						}

						#app > .body > .content > aside > .handle:hover {}

						#app > .body > .content > aside > .handle::after {
							display: block;
							height: var(--asides-handle-height);
							width: var(--asides-handle-width);
							text-align: center;
							opacity: 0.2;
						}

						#app > .body > .content > aside > .handle:hover::after {
							opacity: 1;
						}

						#app > .body > .content > aside.locked .handle {
							cursor: default;
						}

						#app > .body > .content > aside.locked > .handle:hover::after {
							opacity: 0.2;
						}

					/* Layout elements . App . Body . Asides . Content */

						#app > .body > .content > aside > .content {
							display: flex;
							flex-direction: row;
							overflow: hidden;
							flex-wrap: nowrap;
							height: 100%;
						}

						#app > .body > .content > aside > .content > container {
							flex: 1 1 auto;
							flex-shrink: 0;
							flex-grow: 1;
						}

					/* Layout elements . App . Body . Asides . Left */

						#app > .body > .content > aside.left,
						#app > .body > .content > aside.left.open {

							width:		var(--asides-left-max-width);
							max-width:	var(--asides-left-max-width);

							background:
							linear-gradient(
								to right,
								white calc(100% - calc(var(--asides-handle-width) / 2) - var(--border-width)),
								var(--border-color) calc(100% - calc(var(--asides-handle-width) / 2) - var(--border-width)),
								var(--border-color) calc(100% - calc(var(--asides-handle-width) / 2)),
								white calc(100% - calc(var(--asides-handle-width) / 2))
							);

						}

						#app.mobile > .body .content aside.left,
						#app.tablet > .body .content aside.left {
							left: 0;
						}

						#app.mobile .content aside.left.open {

							--asides-left-width: var(--asides-left-max-width);

							width: var(--asides-left-max-width);
							max-width: var(--asides-left-max-width) !important;
						}

						#app.tablet .content aside.left.open {

							--asides-left-width: var(--asides-left-max-width);

							width: var(--asides-left-max-width);
							max-width: var(--asides-left-max-width);
						}

						#app > .body > .content > aside.left.closed {

							--asides-left-width: var(--asides-handle-width);

							width: var(--asides-left-max-width);
							max-width: var(--asides-handle-width);
						}

						#app.mobile.push-left > .body > .content > aside.left {
							transform: translateX(calc(var(--asides-handle-width) * -1));
						}

						#app > .body > .content > aside.left .handle {
							float: right;
						}

						#app > .body > .content > aside.left .handle::after {
							content: "±";
						}

						#app > .body > .content > aside.left.closed .handle::after {
							content: "²";
						}

					/* Layout elements . App . Body . Asides . Right */

						#app > .body > .content > aside.right,
						#app > .body > .content > aside.right.open {

							width:		var(--asides-right-width);
							max-width:	var(--asides-right-max-width);

							background:
							linear-gradient(
								to left,
								white calc(100% - calc(var(--asides-handle-width) / 2) - var(--border-width)),
								var(--border-color) calc(100% - calc(var(--asides-handle-width) / 2) - var(--border-width)),
								var(--border-color) calc(100% - calc(var(--asides-handle-width) / 2)),
								white calc(100% - calc(var(--asides-handle-width) / 2))
							);

						}

						#app.mobile > .body > .content > aside.right,
						#app.tablet > .body > .content > aside.right {
							right: 0;
						}

						#app.mobile .content aside.right.open {
							width: var(--asides-right-max-width);
							max-width: var(--asides-right-max-width) !important;
						}

						#app.tablet .content aside.right.open {
							width: var(--asides-right-max-width);
							max-width: var(--asides-right-max-width) !important;
						}

						#app > .body > .content > aside.right.closed {
							--asides-right-width: var(--asides-handle-width);

							width: var(--asides-right-max-width);
							max-width: var(--asides-handle-width);
						}

						#app.mobile.push-right > .body > .content > aside.right {
							transform: translateX(var(--asides-handle-width));
						}

						#app > .body > .content > aside.right .handle {
							float: left;
						}

						#app > .body > .content > aside.right .handle::after {
							content: "²";
						}

						#app > .body > .content > aside.right.closed .handle::after {
							content: "±";
						}

					/* Layout elements . App . Body . Asides . Sizing */

						/* Extra-small */
						#app > .body > .content > aside.extra-small {
							--asides-left-max-width: var(--asides-width-xs) !important;
							--asides-right-max-width: var(--asides-width-xs) !important;
						}

						/* Small */
						#app > .body > .content > aside.small {
							--asides-left-max-width: var(--asides-width-sm) !important;
							--asides-right-max-width: var(--asides-width-sm) !important;
						}

						/* Medium */
						#app > .body > .content > aside.medium {
							--asides-left-max-width: var(--asides-width-md) !important;
							--asides-right-max-width: var(--asides-width-md) !important;
						}

						#app.mobile > .body > .content > aside.medium.open,
						body:has(#app.mobile > .body > .content > aside.medium.open){
							--asides-left-max-width: 70vw !important;
							--asides-right-max-width: 70vw !important;
						}

						#app.tablet > .body > .content > aside.medium.open,
						body:has(#app.tablet > .body > .content > aside.medium.open){
							--asides-left-max-width: 60vw !important;
							--asides-right-max-width: 60vw !important;
						}

						/* Large */
						#app > .body > .content > aside.large {
							--asides-left-max-width: var(--asides-width-lg) !important;
							--asides-right-max-width: var(--asides-width-lg) !important;
						}

						#app.mobile > .body > .content > aside.large.open,
						body:has(#app.mobile > .body > .content > aside.large.open){
							--asides-left-max-width: 90vw !important;
							--asides-right-max-width: 90vw !important;
						}

						#app.tablet > .body > .content > aside.large.open,
						body:has(#app.tablet > .body > .content > aside.large.open){
							--asides-left-max-width: 60vw !important;
							--asides-right-max-width: 60vw !important;
						}

						/* Extra large */
						#app > .body > .content > aside.extra-large {
							--asides-left-max-width: var(--asides-width-xl) !important;
							--asides-right-max-width: var(--asides-width-xl) !important;
						}

						#app.mobile > .body > .content > aside.extra-large.open,
						body:has(#app.mobile > .body > .content > aside.extra-large.open){
							--asides-left-max-width: 90vw !important;
							--asides-right-max-width: 90vw !important;
						}

						#app.tablet > .body > .content > aside.extra-large.open,
						body:has(#app.tablet > .body > .content > aside.extra-large.open){
							--asides-left-max-width: 80vw !important;
							--asides-right-max-width: 80vw !important;
						}

		/* Layout elements . App . Footer */

			#app > .footer {
				height: var(--footer-height);
				padding-left: var(--gap-default);
				padding-right: var(--gap-default);
				transition: var(--transition-footer);
				border-top-width: var(--border-width);
				border-top-style: solid;
				border-top-color: var(--border-color);
			}

			#app.fullscreen > .footer {
				height: 0px !important;
				overflow: hidden;
			}

			#app > .footer.hidden {
				transform: translateY(var(--header-height));
			}

			#app > .footer h-flex {
				height: 100%;
				flex: 1 1 auto;
			}

			/* Layout elements . App . Footer . Start */

				#app > .footer h-flex > .start {}

			/* Layout elements . App . Footer . Start */
				
				#app > .footer h-flex > .middle {}

			/* Layout elements . App . Footer . Start */
			
				#app > .footer h-flex > .end {}

/* Components */

	.breadcrumb-menu {
		display: inline;
		list-style: none;
	}

	.breadcrumb-menu .item {
		display: inline;
	}

	.breadcrumb-menu .item:not(:last-child)::after {
		display: inline-block;
		content: "²";
		font-family: "BasekitSymbols";
		opacity: 0.3;
	}

	.breadcrumb-menu .item:last-child {
		cursor: default;
	}

/* Breakpoints */

	/* Extra small only (≤ 576px) */
	@media (max-width: 575.98px) {}

	/* Small and above (≥ 576px) */
	@media (min-width: 576px) {}

	/* Small only (576px–767.98px) */
	@media (min-width: 576px) and (max-width: 767.98px) {}

	/* Medium and above (≥ 768px) */
	@media (min-width: 768px) {}

	/* Medium only (768px–991.98px) */
	@media (min-width: 768px) and (max-width: 991.98px) {}

	/* Large and above (≥ 992px) */
	@media (min-width: 992px) {}

	/* Large only (992px–1199.98px) */
	@media (min-width: 992px) and (max-width: 1199.98px) {}

	/* Extra large and above (≥1200px) */
	@media (min-width: 1200px) {}