/******************************************************************************/
/* Overlays */
/******************************************************************************/
.overlay {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	background: hsla(0, 0%, 10%, 75%);
	box-shadow: inset 0px 0px 6px 3px hsl(0, 0%, 18%);
}

/******************************************************************************/
/* Processing Overlay */
/******************************************************************************/
.overlay>.processing {
	--spinner-color: hsl(0, 0%, 50%);
	--spinner-color-thick: hsla(210, 100%, 60%, 90%);
	--spinner-width: 2px;
	--spinner-width-thick: 8px;
	--spinner-size: 40px;
	--spinner-calc-offset: calc(((var(--spinner-width-thick) - var(--spinner-width)) / 2));
	--spinner-calc-size: calc(var(--spinner-size) - (var(--spinner-calc-offset) * 2));

	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.overlay>.processing>.text {
	color: hsl(0, 0%, 90%);
	font-size: 1.333rem;
	font-weight: normal;
	text-shadow: 0px 2px 6px black;
}

.overlay>.processing>.icon,
.overlay>.processing>.icon>.item {
	box-sizing: border-box;
}

.overlay>.processing>.icon {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	width: var(--spinner-size);
	height: var(--spinner-size);
}

.overlay>.processing>.icon>.item {
	display: inline-block;
	position: relative;
	background: transparent;
	width: var(--spinner-calc-size);
	height: var(--spinner-calc-size);
	margin: var(--spinner-calc-offset);
	border-radius: var(--spinner-calc-size);
	border: var(--spinner-width) var(--spinner-color) solid;
	box-shadow:
		0px 0px 10px -2px var(--spinner-color),
		inset 0px 0px 10px -2px var(--spinner-color);
}

.overlay>.processing>.icon>.item:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 0;
	/* The first part here zeroes the element again, which is necessary. */
	margin: calc((0px - var(--spinner-calc-offset) - var(--spinner-width)));
	background: transparent;
	border-radius: var(--spinner-size);
	border: var(--spinner-width-thick) transparent solid;
	border-top-color: var(--spinner-color-thick);
	box-shadow: 0px -8px 8px -5px var(--spinner-color-thick);

	animation: 1s processing-spinner-rotate infinite linear;
}

@keyframes processing-spinner-rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-360deg);
	}
}

/******************************************************************************/
/* Warning Overlay */
/******************************************************************************/
.overlay>.warning {
	--warning-size: 40px;
	--icon-size: calc(var(--warning-size) * 0.92307692307692307692307692307692);

	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.overlay>.warning>.text {
	color: hsl(0, 0%, 90%);
	font-size: 1.333rem;
	font-weight: normal;
	text-shadow: 0px 2px 6px black;
}

.overlay>.warning>.icon {
	margin: 0px auto;
	font-size: var(--icon-size);
	color: hsl(40, 100%, 50%);
}

/******************************************************************************/
/* Error Overlay */
/******************************************************************************/
.overlay>.error {
	--size: 40px;
	--icon-size: calc(var(--size) * 0.92307692307692307692307692307692);

	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.overlay>.error>.text {
	color: hsl(0, 0%, 90%);
	font-size: 1.333rem;
	font-weight: normal;
	text-shadow: 0px 2px 6px black;
}

.overlay>.error>.icon {
	margin: 0px auto;
	font-size: var(--icon-size);
	color: hsl(40, 100%, 50%);
}

/******************************************************************************/
/* Messages */
/******************************************************************************/

.message {
	display: block;
	position: relative;
	padding: 0.25rem;
	font-size: 1.15rem;
	font-weight: bold;
	line-height: 1.0em;
	text-align: left;
	margin-left: calc(100px);
	max-width: 230px;
	min-height: 26px;
}

.message:before {
	content: " ";
	display: block;
	position: absolute;
	left: -2.0rem;
	top: 0.25rem;
	font-size: 1.5rem;
	width: 1.2em;
	height: 1.2em;
	background-repeat: no-repeat;
}

.message.hint:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M10,8 C9.44771525,8 9,8.42137906 9,8.94117647 L9,14.0588235 C9,14.5786209 9.44771525,15 10,15 C10.5522847,15 11,14.5786209 11,14.0588235 L11,8.94117647 C11,8.42137906 10.5522847,8 10,8 Z M10,5 C9.44771525,5 9,5.44082732 9,5.98461538 L9,6.01538462 C9,6.55917268 9.44771525,7 10,7 C10.5522847,7 11,6.55917268 11,6.01538462 L11,5.98461538 C11,5.44082732 10.5522847,5 10,5 Z'/%3E%3C/svg%3E%0A");
}

.message.warning:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' fill-rule='evenodd' d='M9.03952676,0.746646542 C9.57068894,-0.245797319 10.4285735,-0.25196227 10.9630352,0.746646542 L19.7705903,17.2030214 C20.3017525,18.1954653 19.8777595,19 18.8371387,19 L1.16542323,19 C0.118729947,19 -0.302490098,18.2016302 0.231971607,17.2030214 L9.03952676,0.746646542 Z M10,2.25584053 L1.9601405,17.3478261 L18.04099,17.3478261 L10,2.25584053 Z M10,5.9375 C10.531043,5.9375 10.9615385,6.37373537 10.9615385,6.91185897 L10.9615385,11.6923077 C10.9615385,12.2304313 10.531043,12.6666667 10,12.6666667 C9.46895697,12.6666667 9.03846154,12.2304313 9.03846154,11.6923077 L9.03846154,6.91185897 C9.03846154,6.37373537 9.46895697,5.9375 10,5.9375 Z M10,13.4583333 C10.6372516,13.4583333 11.1538462,13.9818158 11.1538462,14.6275641 L11.1538462,14.6641026 C11.1538462,15.3098509 10.6372516,15.8333333 10,15.8333333 C9.36274837,15.8333333 8.84615385,15.3098509 8.84615385,14.6641026 L8.84615385,14.6275641 C8.84615385,13.9818158 9.36274837,13.4583333 10,13.4583333 Z'/%3E%3C/svg%3E%0A");
	right: 10px;
}

/******************************************************************************/
/* SDPI Patches */
/******************************************************************************/

details.sdpi-item-value {
	padding: 4px 18px 4px 4px;
}

details.sdpi-item-value summary.warning::after {
	/*content: "\26A0\FE0F";*/
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' fill-rule='evenodd' d='M9.03952676,0.746646542 C9.57068894,-0.245797319 10.4285735,-0.25196227 10.9630352,0.746646542 L19.7705903,17.2030214 C20.3017525,18.1954653 19.8777595,19 18.8371387,19 L1.16542323,19 C0.118729947,19 -0.302490098,18.2016302 0.231971607,17.2030214 L9.03952676,0.746646542 Z M10,2.25584053 L1.9601405,17.3478261 L18.04099,17.3478261 L10,2.25584053 Z M10,5.9375 C10.531043,5.9375 10.9615385,6.37373537 10.9615385,6.91185897 L10.9615385,11.6923077 C10.9615385,12.2304313 10.531043,12.6666667 10,12.6666667 C9.46895697,12.6666667 9.03846154,12.2304313 9.03846154,11.6923077 L9.03846154,6.91185897 C9.03846154,6.37373537 9.46895697,5.9375 10,5.9375 Z M10,13.4583333 C10.6372516,13.4583333 11.1538462,13.9818158 11.1538462,14.6275641 L11.1538462,14.6641026 C11.1538462,15.3098509 10.6372516,15.8333333 10,15.8333333 C9.36274837,15.8333333 8.84615385,15.3098509 8.84615385,14.6641026 L8.84615385,14.6275641 C8.84615385,13.9818158 9.36274837,13.4583333 10,13.4583333 Z'/%3E%3C/svg%3E%0A");
	position: absolute;
	margin-left: 6px;
}

details.sdpi-item-value summary {
	font-size: 10pt;
	font-weight: 600;
	min-height: 18px;
}

details.sdpi-item-value:first-child {
	margin-top: 4px;
	margin-left: 0;
	padding-left: 102px;
}

details.sdpi-item-value h1 {
	text-align: left;
}

details.sdpi-item-value>summary::-webkit-details-marker {
	display: none;
}

details:not(.pointer)>summary {
	list-style: none;
}