div.blue {
	background-color: white;
	padding: 0px 2rem 0px 2rem;
	position: fixed;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	top: 0px;
	left: 100%;
	margin-left: 2rem;
	height: 100%;
	overflow: hidden scroll;
	z-index: var(--z-index-bluebox);
	box-shadow: 0px 0.5rem 1.5rem black;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
}

div.blue *:not(i) {
	font-family: var(--sans-font);
	cursor: default;
}
div.blue a {
	cursor: pointer;
}

div.blue h1 {
	font-size: 2rem;
	font-weight: bold;
	padding: 1em 0px 0.5em 0px;
	border-bottom: 0.1rem solid silver;
	color: #888;
	position: sticky;
	z-index: 1;
	top: 0px;
	background-color: white;
}

div.blue h1 > i {
	float: right;
	font-size: 1.5rem;
	cursor: pointer;
}
div.blue h1 > i:hover {
	color: black;
}
div.blue h1 > span {
	display: inline-block;
	max-width: calc(100% - 2rem);
	overflow: clip;
	white-space: nowrap;
	text-overflow: ellipsis;
}

div.blue div.blue-viewport {
	max-width: 640px;
}

div.blue div.blue-viewport > div,
div.blue div.blue-viewport div.as-panel {
	padding: 1.25rem 0;
}

div.blue div.blue-viewport > div + div,
div.blue div.blue-viewport div.as-panel {
	border-top: 0.1rem solid silver;
}
div.blue div.blue-viewport > div:last-child {
	padding-bottom: 3rem;
}

div.blue div.blue-viewport > div > p {
	display: block;
	margin-bottom: 1rem;
	font-size: 1rem;
	color: grey;
}

div.blue input,
div.blue button,
div.blue label,
div.blue select {
	font-size: 1rem;
	cursor: pointer;
}
div.blue input[type="button"],
div.blue button {
	padding: 0.1em 1em;
	cursor: pointer;
}
div.blue input[type="button"] + input[type="button"] {
	margin-left: 0.5rem;
}
div.blue button * {
	cursor: pointer;
}
div.blue select {
	padding: 0.2em;
}
div.blue input.rightbound {
	float: right;
}

div.blue label:hover {
	color: #607080;
	background-color: #f0f0f0;
}

div.blue div.two-column-grid {
	display: grid;
	grid-gap: 0px;
	padding: 0px;
	grid-template-columns: min-content auto;
}
div.blue div.two-column-grid > * {
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	display: flex;
	align-items: center;
}

div.blue .notification {
	border: 0.2rem solid;
	padding: 0.3em;
	box-shadow: 0.05em 0.05em 0.2em #00000080;
	margin-top: -0.2em;
	left: 2rem;
	font-weight: normal;
	text-indent: 0;
	border-radius: 0.4em;
	visibility: hidden;
	display: inline-block;
	position: absolute;
}
div.blue .notification.visible {
	visibility: visible;
	animation-name: fadein-fadeout;
	animation-duration: 4s;
}
@keyframes fadein-fadeout {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}