.blueboxwapper {
	position: fixed;
	top: -100vh;
	z-index: var(--z-index-bluebox);
	right: 0;
	left: 0;
	bottom: 0;
	transition: top 0.15s linear;

	.bluebox {
		--menuitem-hover-foreground: #405080;
		--menuitem-hover-background: #ecf4ff;
		display: flex;
		cursor: default;
		font-family: var(--sans-font);
		flex-direction: column;
		padding: 1em 2em;
		background-color: #fff;
		box-shadow: 0 5px 2em #00000080;
		overflow: hidden;
		margin: 0 5%;
		height: 100vh;

		h1 {
			font-size: 2em;
			font-weight: 700;
			padding: 0.5em 0;
			border-bottom: 2px solid silver;
			color: #888;
			overflow: clip;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.close-button {
			position: absolute;
			top: 1.5em;
			right: 2.3em;
			font-size: 1.5em;
			color: #cacccf;
			cursor: pointer;
			background-color: #fff;
			border-radius: 99px;
			padding: 3px;
			&:hover {
				font-weight: 900;
			}
		}

		.client {
			overflow-y: auto;
			padding-top: 1em;
			& > div {
				margin-bottom: 1em;
			}
		}

		h2 {
			font-size: 1.3em;
			font-weight: 600;
			color: #888;
			margin-bottom: 0.5em;
		}

		p {
			display: block;
			font-size: 1em;
			color: grey;
		}

		.buttons {
			display: flex;
			flex-wrap: wrap;
			column-gap: 1ch;
			row-gap: 0.5em;
			align-items: flex-start;
			padding-top: 1em;
			position: sticky;
			bottom: 0;
			button {
				display: flex;
				column-gap: 0.3em;
				padding: 0.5em 1em;
				font-family: var(--sans-font);
				font-size: 1em;
				background-color: #fff;
				border: none;
				border: 1px solid #ddd;
				border-bottom: 5px solid var(--menuitem-hover-foreground);
				cursor: pointer;
				box-shadow: 0 2px 4px #00000042;
				&:hover {
					color: var(--menuitem-hover-foreground);
					background-color: var(--menuitem-hover-background);
				}
				&:hover:active {
					border-bottom-width: 2px;
					margin-bottom: 3px;
					transform: translateY(3px);
				}
			}
		}

		input,
		label,
		select {
			font-size: 1em;
			cursor: pointer;
		}
		select {
			padding: 0.2em;
			min-width: 3em;
		}
		label:hover,
		select:hover {
			color: var(--menuitem-hover-foreground);
			background-color: var(--menuitem-hover-background);
		}

		textarea {
			width: 100%;
			max-width: 100%;
			min-width: 100%;
			height: 30vh;
			font-family: var(--monospace-font);
			font-size: 1em;
			background-color: #f0f0f0;
			border: none;
			padding: 0.5em;
			border-radius: 0.5em;
			cursor: text;
			outline: none;
			word-break: break-all;
		}

		hr {
			height: 0;
			border: none;
			border-bottom: 2px solid #ccc;
			/* margin: 1em 0; */
			margin-bottom: 1em;
		}

		p {
			padding: 0.2em 0;
		}
		label {
			display: flex;
			padding: 0.2em;
			border-radius: 0.2em;
			input {
				margin-right: 0.5em;
			}
		}

		div.two-column-grid {
			display: grid;
			grid-gap: 0.3em 0.5em;
			grid-template-columns: max-content auto;
			align-items: baseline;
			select {
				max-width: max-content;
			}
		}
	}
}

@media (min-width: 1000px) {
	.blueboxwapper {
		.bluebox {
			padding: 2em 4em;
			.close-button {
				top: 1.5em;
				right: 4.5em;
			}
		}
	}
}