:root {
	--u1-window-width: 960px;
	--u1-window-min-width: 320px;
	--u1-window-body-padding: 1.6rem;
}

.u1-window-modal {
	position: fixed;
	background: var(--u1-window-modal-bg);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--u1-window-modal-z-index); /*Just to have it above other stuff on the same level?*/
	overscroll-behavior: contain;
}

.u1-window {
	background: hsl(0, 0%, 96%);
	color: #000;
	display: grid;
	grid-auto-rows: max-content;
	position: fixed;
	top: 1vh; /*Windows at the top of the screen by default:
	WHY: Because some windows expand after loading, and center to expanding is jarring.
	 Also, some small windows seem lost in the middle of the screen, but not at the top.*/
	left: 50%;
	width: var(--u1-window-width);
	min-width: var(--u1-window-min-width);
	min-width: 320px;
	max-width: 100%;
	height: auto;
	min-height: 20vh;
	max-height: 97vh;
	overflow: auto;
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
	overscroll-behavior: contain;
}
.u1-window.u1-window-loading {overflow:hidden;/*Don't allow interaction with this window while loading*/}


.u1-window-modal > .u1-window,
.u1-window-center {
	/* -50.1% is a hack for Chrome, at -50% it makes the text blurry.*/
	/* Only center MODAL windows by default */
	/* transform: translate(-50%, -50.1%); */
	transform: translate(-50%, 0%);
}

.u1-window-open {
	animation: u1_window_fade 0.3s;
}

@keyframes u1_window_fade {
	0% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}

.u1-window-close {}

.u1-window-header {
	background: var(--u1-window-header-bg);
	border: 1px solid var(--u1-window-header-bg); /*HACK: to make background color not jitter on .5 pixel renders */
	display: grid;
	grid-template-columns: 1fr max-content;
	color: #fff;
	position: sticky;
	z-index: 10;
	top: 0;
	padding: 0.8rem 1rem;
	/*
	Why: Grid gap is useful because it only adds space if there is something there. So no exceptions are needed
	or extra classes "depending" on the content of the header. For example a toolbar can be added and it will be
	spaced ok, and if not, then no space is created. Win, win, win... :)
	*/
	grid-gap: 0.6rem;
}

.u1-window-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.u1-window-body {
	padding: var(--u1-window-body-padding) var(--u1-window-body-padding) calc(var(--u1-window-body-padding) * 2) var(--u1-window-body-padding);
	display: grid;
	grid-gap: 12px;
}

.u1-window-side-right {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	z-index: 100; /*Just to have it above other stuff on the same level?*/
}

.u1-window-side-right {
	/* Only affect the immediate child window, as there may be modals or other windows inside of this one */
	top: 0%;
	left: unset;
	right: 0%;
	width: var(--u1-window-width);
	min-width: var(--u1-window-min-width);
	height: 100vh;
	max-height: 100vh;
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}

.u1-window.u1-window-maximized,
.u1-window.u1-window-maximized-with-margin {
	left: 0;
	top: 0;
	height: 100%;
	max-height: 100vh;
	width: 100%;
	border-radius: 0;
	transform: none;
}

.u1-window.u1-window-maximized-with-margin {
	left: 1rem;
	top: 1rem;
	height: calc(100% - 2rem);
	max-height: calc(100vh - 2rem);
	width: calc(100% - 2rem);
}

@media (max-width: 960px) {
	.u1-window,
	.u1-window-modal > .u1-window,
	.u1-window-center,
	.u1-window-side-right {
		left: 0;
		top: 0;
		height: 100%;
		max-height: 100vh;
		width: 100%;
		border-radius: 0;
		transform: none;
	}
}