@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@keyframes slidein{
  0%{
	  transform: translateX(-100%);
  }
  100%{
	  transform: translateX(0);
  }
}
:root {
	/*
	--background: 0 0% 100%;
	--foreground: 215 25% 15%;
	--primary: 207 90% 54%;
	--primary-foreground: 0 0% 100%;
	--primary-light: 207 90% 64%;
	--primary-dark: 207 90% 44%;
	--secondary: 174 72% 56%;
	--secondary-foreground: 215 25% 15%;
	--secondary-light: 174 72% 66%;
	--secondary-dark: 174 72% 46%;
	--accent-warning: 42 87% 55%;
	--accent-success: 142 76% 47%;
	--accent-danger: 0 84% 60%;
	--accent-info: 207 90% 77%;
	--muted: 210 17% 95%;
	--muted-foreground: 215 16% 47%;
	--card: 0 0% 100%;
	--card-foreground: 215 25% 15%;
	--popover: 0 0% 100%;
	--popover-foreground: 215 25% 15%;
	--border: 214 15% 91%;
	--input: 214 15% 91%;
	--ring: 207 90% 54%;
	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 100%;
	--gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
	--gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary-light)));
	--gradient-hero: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
	--gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(210 17% 98%));
	--shadow-soft: 0 2px 8px -2px hsl(var(--primary) / .1);
	--shadow-medium: 0 4px 16px -4px hsl(var(--primary) / .15);
	--shadow-strong: 0 8px 32px -8px hsl(var(--primary) / .2);
	--shadow-glow: 0 0 24px hsl(var(--primary) / .15);
	--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);
	--transition-quick: all .15s ease-out;
	--radius: .5rem;
	*/
	--background1: hsl(228 42% 100%);
	--background2: hsl(228 42% 95%);
	--background3: hsl(228 42% 90%);
	--foreground1: hsl(228 10% 0%);
	--foreground2: hsl(228 10% 10%);
	--foreground3: hsl(228 10% 20%);
	--foreground4: hsl(228 10% 30%);
	--foreground5: hsl(228 10% 40%);
	--foreground6: hsl(228 10% 50%);
	--spacing3: 1rem;
	--spacing1: calc(var(--spacing3) * 0.25);
	--spacing2: calc(var(--spacing3) * 0.5);
	--spacing4: calc(var(--spacing3) * 1.5);
	--spacing5: calc(var(--spacing3) * 3);
	--borderColor1: var(--background1); /* hsl(214 15% 91%); */
	--borderColor3: var(--background3);
	--borderRadius3: 0.5rem;
	--borderSize3: 1px;
	--blue: hsl(207 90% 54%);
	--red: hsl(0 84% 60%);
	--green: hsl(142 76% 47%);
	--yellow: hsl(42 87% 55%);
	--purple: var(--bs-purple);
	/* override di bootstrap */
	--bs-primary: #2094f3;
	--bs-primary-rgb: 32, 148, 243;
	--bs-link-color: #2094f3;
	--bs-link-color-rgb: 32, 148, 243;
	--bs-red: #ef4343;
	--bs-danger: #ef4343;
	--bs-danger-rgb: 239, 67, 67;
	--bs-green: #1dd360;
	--bs-success: #1dd360;
	--bs-success-rgb: 29, 211, 96;
	--bs-yellow: #f0b428;
	--bs-warning:  #f0b428;
	--bs-warning-rgb: 240, 180, 40;
}
	body{
		color: var(--foreground2);
		font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
		background: var(--background2);
		/*
		height: 100%;
		background-color: #EEF0F8;
		*/
	}
		a{
			/*
			text-decoration: none;
			text-decoration: underline;
			*/
			color: var(--blue);
		}
		.link{
		}
		.link--block{
			color: inherit;
			text-decoration: none;
		}
		dialog{
			border: 0;
			margin: 0;
			max-width: none;
		}
		h1{
			font-size: 1.75rem;
			font-weight: 700;
			margin: 0;
			padding: 0;
		}
		h2{
			font-size: 1.5rem;
			font-weight: 600;
			margin: 0;
			padding: 0;
		}
		h3{
			font-size: 1.25rem;
			font-weight: 500;
			margin: 0;
			padding: 0;
		}
		h4{
			font-size: 1.125rem;
			font-weight: 400;
			margin: 0;
			padding: 0;
		}
		h5{
			font-size: 1rem;
			font-weight: 300;
			margin: 0;
			padding: 0;
		}
		h6{
			font-size: 1rem;
			font-weight: 200;
			margin: 0;
			padding: 0;
		}
		p{
			margin: 0;
			padding: 0;
		}
		svg{
			display: inline-block;
			height: 1rem;
			margin-right: var(--spacing2);
		}
		ul{
			list-style: none;
			margin: 0;
			padding: 0;
		}
			li{
				display: block;
			}
		h1:not(:first-child),
		h2:not(:first-child),
		h3:not(:first-child),
		h4:not(:first-child),
		h5:not(:first-child),
		h6:not(:first-child),
		p:not(:first-child),
		ul:not(:first-child){
			margin-top: var(--spacing2);
		}
			
		/* bootstrap */
		.btn{
			/*
			--bs-btn-font-size: 0.875rem;
			*/
		}
		.btn-danger{
			background: var(--red);
			color: #ffffff;
			border-color: var(--red);
		}
		.btn-outline-danger{
			border-color: var(--red);
			color: var(--red);
		}
		.btn-outline-danger:hover{
			background: var(--red);
			border-color: var(--red);
			color: #ffffff;
		}
		.btn-primary{
			background: var(--blue);
			color: #ffffff;
			border-color: var(--blue);
		}
		.btn-outline-primary{
			border-color: var(--blue);
			color: var(--blue);
		}
		.btn-outline-primary:hover{
			background: var(--blue);
			border-color: var(--blue);
			color: #ffffff;
		}
		.btn-success,
		.btn-success:hover{
			background: var(--green);
			color: #ffffff;
			border-color: var(--green);
		}
		.btn-outline-success{
			border-color: var(--green);
			color: var(--green);
		}
		.btn-outline-success:hover{
			background: var(--green);
			border-color: var(--green);
			color: #ffffff;
		}
		.modal-title{
			font-size: 1.5rem;
			font-weight: 600;
			margin: 0;
			padding: 0;
		}
		.pagination{
			--bs-pagination-active-bg: var(--blue);
			--bs-pagination-active-border-color: var(--blue);
		}
		.small{
			color: var(--foreground5);
			margin: 0;
		}
		/* fine bootstrap */
		
		/* iti */
		.iti{
			display: block;
		}
		
		.btn-block{
			display: block;
			width: 100%;
		}
		.text-purple{
			color: var(--bs-purple);
		}
		
		.hidden{
			display: none;
		}
		.highlight{
			font-size: 1.25rem;
			font-weight: 600;
		}
		.small + .lead,
		.small + .highlight,
		.lead + .small,
		.highlight + .small{
			margin-top: 0;
		}
		.x-alert{
			background: #ffffff;;
			border-color: inherit;
			border-left-width: var(--spacing2);
			color: inherit;
			left: var(--spacing2);
			position: fixed;
			top: var(--spacing2);
			width: calc(100% - var(--spacing2) * 2);
			z-index: 9999;
		}
		.x-alert--success{
			border-left-color: var(--green);
		}
		.x-alert--error{
			border-left-color: var(--red);
		}
		/* TODO: From previous version. Refactor */
		.wrapper-alert__icon{
			height: 2.25rem;
		}
		.x-card{
			border-radius: var(--borderRadius3);
			padding: var(--spacing3) var(--spacing4);
			/*
			min-height: 100%;
			*/
			outline: var(--borderSize3) solid var(--borderColor3);
			transition: transform 0.5s;
		}
			.x-card__header{
				font-size: 1.5rem;
				font-weight: 500;
			}
			.x-card__header + .x-card__body{
				margin-top: var(--spacing3);
			}
			.x-card__footer{
				margin-top: var(--spacing3);
			}
		.x-card:hover{
			transform: translateY(calc(-1 * var(--spacing1)));
		}
		.x-card--compact{
			padding: var(--spacing2);
		}
		.x-chat{
			width: 100%;
			padding:0rem;
		}
			.x-chat__header{
				display: flex;
				gap: var(--gutter);
				padding: var(--spacing3) var(--spacing4);
				height: 3rem;
				align-items: center;
				border-radius: var(--borderRadius3);
				outline: var(--borderSize3) solid var(--borderColor3);
			}
			.x-chat__body{
				/*
				padding: var(--spacing3) var(--spacing4);
				*/
			}
			.x-chat__messages{
				display: flex; 
				flex-direction: column-reverse; 
				height: calc(100vh - 13.5rem);
				height: calc(100dvh - 13.5rem); 
				overflow-x: hidden;
				overflow-y: scroll;
				gap:var(--spacing2);
				padding: var(--spacing3) var(--spacing4);
			}
				.x-class__message{
					padding: var(--spacing3) var(--spacing3);
					width: 21rem;
					border-radius: 15px;
					word-wrap: break-word;
				}
				.x-class__message--not-owner{
					align-self: flex-start;
					background-color: var(--background2);
					color: var(--foreground3);
					border-top-left-radius: 0;
				}
				.x-class__message--owner{
					background-color: #d1e7ff;
					align-self: flex-end;
					color: var(--bs-primary);
					text-align: left;
					border-top-right-radius: 0;
				}
			.x-chat__footer{
				/* display: flex;
				align-items: center;
				padding: var(--spacing3) var(--spacing3); */
				border-radius: var(--borderRadius3);
				height: 3rem;
				outline: var(--borderSize3) solid var(--borderColor3);
			}
			.x-chat__footer textarea{
				border:0;
				height: 3rem;
				width:100%;
			}
			.x-chat__footer button{
				width:100%;
			}
			.x-chat__footer .x-icon{
				font-size:1.5rem;
				height:auto
			}
			.x-chat .x-chat__send-box{
				--gutter:0rem;
			}
		.x-form{
			/*
			border-radius: var(--borderRadius3);
			padding: var(--spacing3) var(--spacing4);
			outline: var(--borderSize3) solid var(--borderColor3);
			text-align: left;
			*/
			text-align: left;
		}
		.x-form--inline{
			display: inline-block;
		}
		/*
		.x-form--inline{
			display: inline;
			outline: 0;
			padding: 0;
			text-align: auto;
		}
		*/
		.x-grid{
			--gutter: var(--spacing4);
			display: flex;
			/*
			flex-direction: column;
			*/
			flex-wrap: wrap;
			gap: var(--gutter);
		}
			/*
			.x-grid__row{
				display: flex;
				flex-wrap: wrap;
				gap: var(--gutter);
			}
			*/
				.x-grid__cell{
					flex-grow: 0;
					flex-shrink: 0;
					width: 100%;
				}
				.x-grid__cell--align-end{
					align-self: end;
				}
				.x-grid__cell--align-center{
					align-self: center;
				}
				.x-grid__cell--align-start{
					align-self: start;
				}
				.x-grid__cell--size-1{
					width: calc((100% - var(--gutter) * 11) / 12);
				}
				.x-grid__cell--size-2{
					width: calc((100% - var(--gutter) * 11) / 12 * 2 + var(--gutter));
				}
				.x-grid__cell--size-3{
					width: calc((100% - var(--gutter) * 11) / 12 * 3 + var(--gutter) * 2);
				}
				.x-grid__cell--size-4{
					width: calc((100% - var(--gutter) * 11) / 12 * 4 + var(--gutter) * 3);
				}
				.x-grid__cell--size-5{
					width: calc((100% - var(--gutter) * 11) / 12 * 5 + var(--gutter) * 4);
				}
				.x-grid__cell--size-6{
					width: calc((100% - var(--gutter) * 11) / 12 * 6 + var(--gutter) * 5);
				}
				.x-grid__cell--size-7{
					width: calc((100% - var(--gutter) * 11) / 12 * 7 + var(--gutter) * 6);
				}
				.x-grid__cell--size-8{
					width: calc((100% - var(--gutter) * 11) / 12 * 8 + var(--gutter) * 7);
				}
				.x-grid__cell--size-9{
					width: calc((100% - var(--gutter) * 11) / 12 * 9 + var(--gutter) * 8);
				}
				.x-grid__cell--size-10{
					width: calc((100% - var(--gutter) * 11) / 12 * 10 + var(--gutter) * 9);
				}
				.x-grid__cell--size-11{
					width: calc((100% - var(--gutter) * 11) / 12 * 11 + var(--gutter) * 10);
				}
				.x-grid__cell--size-auto{
					width: auto;
				}
				.x-grid__cell--justify-end{
					margin-left: auto;
				}
		.x-grid--compact{
			--gutter: var(--spacing2);
		}
		.x-grid--spacing-0{
			--gutter: 0;
		}
		.x-grid--spacing-1{
			--gutter: var(--spacing2);
		}
		.x-guest__footer{
			margin-top:var(--spacing4);
		}
		.x-icon{
			display: inline-block;
			height: 1.5rem;
			margin-right: var(--spacing2);
			position: relative;
			vertical-align: middle;
			top: -2px;
			width: 1rem;
		}
		.x-icon:after{
			display: inline-block;
		}
		.x-icon:before{
			display: inline-block;
		}
		.x-icon--large{
			height: 1.5rem;
			font-size: 1.25rem;
			line-height: 1.2;
			margin-right: var(--spacing3);
			position: relative;
			width: 1.5rem;
		}
		.x-icon--large:before{
			left: 0;
			position: relative;
			text-align: center;
			top: 0rem;
			width: 100%;
			z-index: 2;
		}
		.x-icon--large:after{
			background: color-mix(in srgb, currentColor, transparent 90%);
			border-radius: 100%;
			content: '';
			height: 166.666666%;
			left: -33.333333%;
			position: absolute;
			top: -33.333333%;
			width: 166.666666%;
		}
		.x-icon--highlight{
			height: 1.5rem;
			font-size: 1.25rem;
			line-height: 1.2;
			margin-right: var(--spacing3);
			position: relative;
			top: 0;
			vertical-align: sub;
			width: 1.5rem;
		}
		.x-icon--highlight:before{
			color: #ffffff;
			display: inline-block;
			left: 0;
			position: relative;
			text-align: center;
			top: 0rem;
			width: 100%;
			z-index: 2;
		}
		.x-icon--highlight:after{
			background: currentColor;
			border-radius: 0.375rem;
			content: '';
			height: 166.666666%;
			left: -33.333333%;
			position: absolute;
			top: -33.333333%;
			width: 166.666666%;
		}
		.x-icon--green{
			color: var(--green);
		}
		.x-icon--red{
			color: var(--red);
		}
		.x-icon--blue{
			color: var(--blue);
		}
		.x-icon--purple{
			color: var(--purple);
		}
		.x-logo{
			color: inherit;
			font-weight: 700;
			text-decoration: none;
		}
			.x-logo__icon{
				color: #ffffff;
				margin-right: var(--spacing2);
				position: relative;
				vertical-align: sub;
				width: 1.5rem;
			}
			.x-logo__icon:after{
				background: var(--blue);
				border-radius: 0.375rem;
				content: '';
				height: 133.333333%;
				left: -16.666666%;
				position: absolute;
				top: -16.666666%;
				width: 133.333333%;
			}
			.x-logo__icon:before{
				color: #ffffff;
				display: inline-block;
				left: 0;
				position: relative;
				text-align: center;
				top: 0rem;
				width: 100%;
				z-index: 2;
				
			}
		.x-menu{
			color: var(--foreground5);
		}
		.x-menu-guest{
			margin-top:var(--spacing4)!important;
		}
			.x-menu__item{
				border-radius: var(--borderRadius3);
			}
				.x-menu a{
					color: inherit;
					display: block;
					padding: var(--spacing2);
					text-decoration: none;
				}
			.x-menu__item--selected{
				background: color-mix(in srgb, var(--blue), transparent 95%);
				color: var(--blue);
			}
			.x-menu__item:not(.x-menu__item--selected):hover{
				background: var(--background2);
			}
		.x-tabs{
		}
			.x-tabs nav{
				margin-bottom: var(--spacing3);
			}
		.y-component{
			display: block;
		}
		.y-datetime{
			display: inline;
		}
		.y-datetime-input-group{
			display: block;
		}
			.y-datetime-input-group > :not(.y-datetime-input-group__group){
				display: none;
			}
		.y-intl-tel-input{
			display: contents;
		}
		.y-password{
			display: contents;
		}
		.y-password:has([type=password]){
		}
			.y-password:has([type=password]) .y-password__toggle--hidden{
				display: none;
			}
			.y-password:has([type=password]) .y-password__toggle--visible{
				display: block;
			}
		.y-password:has([type=text]){
		}
			.y-password:has([type=text]) .y-password__toggle--hidden{
				display: block;
			}
			.y-password:has([type=text]) .y-password__toggle--visible{
				display: none;
			}
		.x-table{
			border-radius: var(--borderRadius3);
			display: block;
			padding: var(--spacing3) var(--spacing4);
			outline: var(--borderSize3) solid var(--borderColor3);
		}
			.x-table td:has(.btn, .x-form){
				width: 0;
				white-space: nowrap;
			}
		.y-data-tables:not(:has(.dt-container)){
			/*
			padding-bottom: 1.5rem;
			padding-top: 1.5rem;
			*/
		}
		.y-component{
			transition: filter 0.5s;
		}
		.y-component--loading{
			filter: blur(3px);
			pointer-events: none;
		}
		.font-bold{
			font-weight: 700;
		}
		.font-semibold,
		.font-medium{
			font-weight: 500;
		}
		.x-sidebar{
		}
			.x-sidebar__toggle{
				margin: 0 auto;
			}
			.x-sidebar__logo{
				color: inherit;
				text-decoration: none;
			}
			.x-sidebar__logout{
				padding: var(--spacing2);
			}
		.x-sidebar--large{
			display: none;
		}
		.x-sidebar--small{
			display: flex;
			justify-content: space-between;
			padding: var(--spacing2);
		}
			.x-sidebar--small .x-sidebar__logo{
				display: inline-block;
				padding: var(--spacing3);
			}
			.x-sidebar--small dialog{
				flex-direction: column;
				min-height: 100vh;
				min-height: 100dvh;
				justify-content: space-between;
				text-align: center;
				width: 100%;
			}
			.x-sidebar--small dialog[open]{
				display: flex;
				animation: slidein 1s forwards;
			}
		.x-page{
			position: relative;
		}
			.x-page__header{
				background: var(--background1);
				margin-bottom: var(--spacing2);
				position: sticky;
				top: 0;
				z-index: 1000;
			}
			.x-page__body{
				background: var(--background1);
				display: flex;
				flex-direction: column;
				gap: var(--spacing4);
				padding: var(--spacing4);
				z-index: 1;
			}
		.x-page--halves{
		}
			.x-page--halves .x-page__body{
				padding: 0;
			}
				.x-page--halves .x-page__body > .x-grid{
					gap: 0;
					min-height: 100vh;
					min-height: 100dvh;
				}
					.x-page--halves .x-page__body > .x-grid > .x-grid__cell{
						align-items: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						text-align: center;
						padding: var(--spacing3);
					}
					.x-page--halves .x-page__body > .x-grid > .x-grid__cell:has(.x-form){
						padding: var(--spacing5);
					}
					.x-page--halves .x-page__body > .x-grid > .x-grid__cell > .x-form{
						margin-top:var(--spacing4);
					}
					.promo{
						display: none !important; /* TODO: do not use important */
					}
		.x-page--halves .x-menu{
			display: flex;
			flex-direction: column;
			gap: var(--spacing3);
			margin-bottom: var(--spacing4);
			text-align: left;
			width: 100%;
		}
			.x-page--halves .x-menu__item{
				border-radius: var(--borderRadius3);
				outline: var(--borderSize3) solid var(--borderColor3);
				padding: 0;
				transition: outline-color 0.5s;
			}
				.x-page--halves .x-menu a{
					display: block;
					padding: var(--spacing4);
				}
			.x-page--halves .x-menu__item:hover{
				outline-color: #000000;
				background: transparent;
			}
			.x-menu__item-success:hover{
				outline-color: var(--bs-success) !important;
				background: transparent;
			}
			.x-menu__item-primary:hover{
				outline-color: var(--bs-primary) !important;
				background: transparent;
			}
		.x-page--survey{
		}
			.x-page--survey .x-page__body{
				padding: 0;
			}
:root.loading{
	pointer-events: none;
}
@media (min-width: 769px){
html{
}
	body{
	}
		.x-grid{
		}
			.x-grid__row{
			}
				.x-grid__cell--size-md-1{
					width: calc((100% - var(--gutter) * 11) / 12);
				}
				.x-grid__cell--size-md-2{
					width: calc((100% - var(--gutter) * 11) / 12 * 2 + var(--gutter));
				}
				.x-grid__cell--size-md-3{
					width: calc((100% - var(--gutter) * 11) / 12 * 3 + var(--gutter) * 2);
				}
				.x-grid__cell--size-md-4{
					width: calc((100% - var(--gutter) * 11) / 12 * 4 + var(--gutter) * 3);
				}
				.x-grid__cell--size-md-5{
					width: calc((100% - var(--gutter) * 11) / 12 * 5 + var(--gutter) * 4);
				}
				.x-grid__cell--size-md-6{
					width: calc((100% - var(--gutter) * 11) / 12 * 6 + var(--gutter) * 5);
				}
				.x-grid__cell--size-md-7{
					width: calc((100% - var(--gutter) * 11) / 12 * 7 + var(--gutter) * 6);
				}
				.x-grid__cell--size-md-8{
					width: calc((100% - var(--gutter) * 11) / 12 * 8 + var(--gutter) * 7);
				}
				.x-grid__cell--size-md-9{
					width: calc((100% - var(--gutter) * 11) / 12 * 9 + var(--gutter) * 8);
				}
				.x-grid__cell--size-md-10{
					width: calc((100% - var(--gutter) * 11) / 12 * 10 + var(--gutter) * 9);
				}
				.x-grid__cell--size-md-11{
					width: calc((100% - var(--gutter) * 11) / 12 * 11 + var(--gutter) * 10);
				}
				.x-grid__cell--size-md-auto{
					width: auto;
				}
				.x-grid__cell--size-md-justify-end{
					margin-left: auto;
				}

				.x-grid__cell--md-size-1{
					width: calc((100% - var(--gutter) * 11) / 12);
				}
				.x-grid__cell--md-size-2{
					width: calc((100% - var(--gutter) * 11) / 12 * 2 + var(--gutter));
				}
				.x-grid__cell--md-size-3{
					width: calc((100% - var(--gutter) * 11) / 12 * 3 + var(--gutter) * 2);
				}
				.x-grid__cell--md-size-4{
					width: calc((100% - var(--gutter) * 11) / 12 * 4 + var(--gutter) * 3);
				}
				.x-grid__cell--md-size-5{
					width: calc((100% - var(--gutter) * 11) / 12 * 5 + var(--gutter) * 4);
				}
				.x-grid__cell--md-size-6{
					width: calc((100% - var(--gutter) * 11) / 12 * 6 + var(--gutter) * 5);
				}
				.x-grid__cell--md-size-7{
					width: calc((100% - var(--gutter) * 11) / 12 * 7 + var(--gutter) * 6);
				}
				.x-grid__cell--md-size-8{
					width: calc((100% - var(--gutter) * 11) / 12 * 8 + var(--gutter) * 7);
				}
				.x-grid__cell--md-size-9{
					width: calc((100% - var(--gutter) * 11) / 12 * 9 + var(--gutter) * 8);
				}
				.x-grid__cell--md-size-10{
					width: calc((100% - var(--gutter) * 11) / 12 * 10 + var(--gutter) * 9);
				}
				.x-grid__cell--md-size-11{
					width: calc((100% - var(--gutter) * 11) / 12 * 11 + var(--gutter) * 10);
				}
				.x-grid__cell--md-size-auto{
					width: auto;
				}
				.x-grid__cell--md-justify-end{
					margin-left: auto;
				}

		.x-sidebar--small{
			display: none;
		}
		.x-sidebar--large{
			display: block;
		}
			.x-sidebar__section{
				padding: var(--spacing4);
			}
			.x-sidebar__section + .x-sidebar__section{
				border-top: var(--borderSize3) solid var(--borderColor3);
				margin-top: calc(-var(--borderSize3));
			}
			.x-sidebar--large > a{
			}
				.x-sidebar--large h3{
					font-size: inherit;
					margin: 0;
					padding: 0;
					margin-bottom: var(--spacing2);
				}
		.x-table{
		}
			.x-table .x-form{
				display: inline-block;
			}
		.x-page{
		}
			.x-page__header{
				flex: 0 0 16rem;
				height: 100vh;
				height: 100dvh;
				left: 0;
				margin-bottom: 0;
				position: absolute;
				top: 0;
				width: 16rem;
				z-index: 1;
			}
			.x-page__body{
				height: 100vh;
				height: 100dvh;
				overflow-y: auto;
				z-index: auto;
			}
		.x-page:has(.x-page__header){
		}
			.x-page:has(.x-page__header) .x-page__body{
				margin-left: calc(16rem + var(--spacing2));
			}
		.x-page--halves{
		}
			.x-page--halves .x-grid{
			}
				.x-page--halves .x-page__body > .x-grid > .x-grid__cell{
					width: 50%;
				}
					.x-page--halves .x-form{
						outline: 0;
						width: 28rem;
					}
				.promo{
					background: linear-gradient(135deg, hsl(207 90% 54%), hsl(174 72% 56%));
					color: #ffffff;
					display: flex !important; /* TODO: do not use important */
				}
					.promo > p,
					.promo .x-grid{
						max-width: 28rem;
					}
					.promo > p{
						margin: var(--spacing4) 0;
					}
					.promo .x-grid{
					}
						.promo .x-grid__cell{
							width: auto;
						}
		.x-page--survey{
		}
			.x-page--survey .x-page__body{
			}
		.x-page--halves .x-menu{
			width: 28rem;
		}
}
input:user-invalid,
select:user-invalid{
	background: #ffdddd !important;
}