/* Don't use the main frame div when the error is in a subframe. */
html[subframe] #main-frame-error {
	display: none;
}

/* Don't use the subframe error div when the error is in a main frame. */
html:not([subframe]) #sub-frame-error {
	display: none;
}

#diagnose-button {
	-webkit-margin-start: 0;
	float: none;
	margin-bottom: 10px;
	margin-top: 20px;
}

.icon {
	-webkit-user-select: none;
}

.icon-generic {
	content: -webkit-image-set(
			url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAyCAAAAADkGq1yAAAAAnRSTlMA/1uRIrUAAABLSURBVHhe7dOxDQAgCERRdrza/ScwscNYSKIhWAror9+VR7BjKZbkrSpKeA45K8PQuoYqcUNKbmUzpNkD8kvM/ErlkVFk8necCyU7IotT35DVJRIAAAAASUVORK5CYII=') 1x,
			url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABkCAAAAAAwZDj3AAAAAnRSTlMA/1uRIrUAAABiSURBVHhe7cy7CYAwFABAd8z+HyewskkTW+EFA3kgSu4GuK2ktI71SqWyjeyxirlS2aeMQczfKcuNUjny/1KpPCbKjA+WSqVSqVQqawmy5TlZKpVPQciVSuUEpVKZtVypVF5DHE3/NzR+1AAAAABJRU5ErkJggg==') 2x);
	height: 50px;
	padding-top: 20px;
	width: 41px;
}

.icon-offline {
	content: -webkit-image-set(
			url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAvAgMAAADlfsA8AAAADFBMVEX39/f////39/dTU1NOmoBdAAAAAnRSTlMAAHaTzTgAAAB6SURBVHherc2xDUIxDIThE6UbVmEZ9nN9TUZgJWo3Ju8UhGIrHX/1FScdnr82K+PMoZizbozLsfw+OP9mkpvNARuabB6OG6fIZr4uozi4noqTYrcKHoxi63ZodLBG0a0R0c2M5Uw5Z3rzoavqwNf3CGybKH4gYXTq6wPqOghb2tvIFQAAAABJRU5ErkJggg==') 1x,
			url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABeAgMAAADaoju6AAAADFBMVEX39/f////39/dTU1NOmoBdAAAAAnRSTlMAAHaTzTgAAACDSURBVHhe7dIhDgQhAEPR6jV7urnkN3PEbkIIICCQSdfNl8/UVNe0DA/R0p7BtTzjFkesLO8nX6YUYpj8IcO48Ie+GGa4XSqYYwO4lWUPSpjH4I8s5Vg8Z7RhkeeZE2fRNc/Y5oRtu7NrC26bCKNWktEp2xueT5on/F2yLQlAQGWt+AcZixZ9AfIcYgAAAABJRU5ErkJggg==') 2x);
	height: 47px;
	margin: 0 0 40px;
	position: relative;
	width: 44px;
}

#content-top {
	margin: 20px;
}

#help-box-outer {
	-webkit-transition: height ease-in 218ms;
	overflow: hidden;
}

#help-box-inner {
	background-color: #f9f9f9;
	border-top: 1px solid #EEE;
	color: #444;
	padding: 20px;
	text-align: start;
}

#suggestion {
	margin-top: 15px;
}

#short-suggestion {
	margin-top: 5px;
}

#sub-frame-error-details {
	color: #8F8F8F;
	/* Not done on mobile for performance reasons. */
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

[jscontent=failedUrl] {
	overflow-wrap: break-word;
}

#search-container {
	/* Prevents a space between controls. */
	display: flex;
	margin-top: 20px;
}

#search-box {
	border: 1px solid #cdcdcd;
	flex-grow: 1;
	font-size: 16px;
	height: 26px;
	margin-right: 0;
	padding: 1px 9px;
}

#search-box:focus {
	border: 1px solid rgb(93, 154, 255);
	outline: none;
}

#search-button {
	border: none;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	box-shadow: none;
	display: flex;
	height: 30px;
	margin: 0;
	padding: 0;
	width: 60px;
}

#search-image {
	content: -webkit-image-set(
			url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAPCAQAAAB+HTb/AAAArElEQVR4Xn3NsUoCUBzG0XvB3U0chR4geo5qihpt6gkCx0bXFsMERWj2KWqIanAvmlUUoQapwU6g4l8H5bd9Z/iSPS0hu/RqZqrncBuzLl7U3Rn4cSpQFTeroejJl1Lgs7f4ceDPdeBMXYp86gaONYJkY83AnqHiGk9wHnjk16PKgo5N9BUCkzPf5j6M0PfuVg5MymoetFwoaKAlB26WdXAvJ7u5mezitqtkT//7Sv/u96CaLQAAAABJRU5ErkJggg==') 1x,
			url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAQAAACVzLYUAAABYElEQVR4Xr3VMUuVURzH8XO98jgkGikENkRD0KRGDUVDQy0h2SiC4IuIiktL4AvQt1CDBJUJwo1KXXS6cWdHw7tcjWwoC5Hrx+UZgnNO5CXiO/75jD/+QZf9MzjskVU7DrU1zRv9G9ir5hsA4Nii83+GA9ZI1nI1D6tWAE1TRlQMuuuFDthzMQefgo4nKr+f3dIGDdUUHPYD1ISoMQdgJgUfgqaKEOcxWE/BVTArJBvwC0cGY7gNLgiZNsD1GP4EPVn4EtyLYRuczcJ34HYMP4E7GdajDS7FcB48z8AJ8FmI4TjouBkzZ2yBuRQMlsButIZ+dfDVUBqOaIHvavpLVHXfFmAqv45r9gEHNr3y3hcAfLSgSMPgiiZR+6Z9AMuKNAwqpjUcA2h55pxgAfBWkYRlQ254YMJloaxPHbCkiGCymL5RlLA7GnRDXyuC7uhicLoKdRyaDE5Pl00K//93nABqPgBDK8sfWgAAAABJRU5ErkJggg==') 2x);
	margin: auto;
}

.hidden {
	display: none;
}

.suggestions {
	margin-top: 18px;
}

.suggestion-header {
	font-weight: bold;
	margin-bottom: 4px;
}

.suggestion-body {
	color: #777;
}

.error-code {
	color: #A0A0A0;
	margin-top: 15px;
}

/* Increase line height at higher resolutions. */
@media (min-width: 641px) and (min-height: 641px) {
	#help-box-inner {
		line-height: 18px;
	}
}

/* Decrease padding at low sizes. */
@media (max-width: 640px), (max-height: 640px) {
	#content-top {
		margin: 15px;
	}

	#help-box-inner {
		padding: 20px;
	}

	.suggestions {
		margin-top: 10px;
	}

	.suggestion-header {
		margin-bottom: 0;
	}

	.error-code {
		margin-top: 10px;
	}
}

/* Don't allow overflow when in a subframe. */
html[subframe] body {
	overflow: hidden;
}

#sub-frame-error {
	-webkit-align-items: center;
	background-color: #DDD;
	display: -webkit-flex;
	-webkit-flex-flow: column;
	height: 100%;
	-webkit-justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#sub-frame-error:hover {
	background-color: #EEE;
}

#sub-frame-error-details {
	margin: 0 10px;
	visibility: hidden;
}

/* Show details only when hovering. */
#sub-frame-error:hover #sub-frame-error-details {
	visibility: visible;
}

/* If the iframe is too small, always hide the error code. */
@media (max-width: 200px), (max-height: 95px) {
	#sub-frame-error-details {
		display: none;
	}
}

/* details-button is special; it's a <button> element that looks like a link. */
#details-button {
	background-color: inherit;
	background-image: none;
	border: none;
	box-shadow: none;
	min-width: 0;
	padding: 0;
	text-decoration: underline;
}

/* Styles for platform dependent separation of controls and details button. */
.suggested-left > #control-buttons,
.suggested-right > #details-button {
	float: left;
}

.suggested-right > #control-buttons,
.suggested-left > #details-button {
	float: right;
}

#details-button.singular {
	float: none;
}

#buttons::after {
	clear: both;
	content: '';
	display: block;
	width: 100%;
}

.interstitial-wrapper {
	box-sizing: border-box;
	font-size: 1em;
	line-height: 1.6em;
	margin: 50px auto 0;
	max-width: 600px;
	width: 100%;
}

/* Offline page */
.offline .interstitial-wrapper {
	color: #2b2b2b;
	font-size: 1em;
	line-height: 1.55;
	margin: 100px auto 0;
	max-width: 600px;
	width: 100%;
}

.offline .runner-container {
	height: 150px;
	max-width: 600px;
	overflow: hidden;
	position: absolute;
	top: 10px;
	width: 44px;
	z-index: 2;
}

.offline .runner-canvas {
	height: 150px;
	max-width: 600px;
	opacity: 1;
	overflow: hidden;
	position: absolute;
	top: 0;
}

.offline .controller {
	background: rgba(247, 247, 247, .1);
	height: 100vh;
	left: 0;
	position: absolute;
	top: 0;
	width: 100vw;
	z-index: 1;
}

#offline-resources {
	display: none;
}

@media (max-width: 400px) {
	.suggested-left > #control-buttons,
	.suggested-right > #control-buttons {
		float: none;
		margin: 50px 0 20px;
	}
}

@media (max-height: 350px) {
	h1 {
		margin: 0 0 15px;
	}

	.icon-offline {
		margin: 0 0 10px;
	}

	.interstitial-wrapper {
		margin-top: 5%;
	}

	.nav-wrapper {
		margin-top: 30px;
	}
}

@media (max-width: 700px) {
	.interstitial-wrapper {
		padding: 0 10%;
	}
}

@media (max-height: 600px) {
	.interstitial-wrapper {
		margin-top: 5px;
	}
}