body {
	background-color: #fcfcfc;
	color: #666;
	margin: 0;
	/* stylelint-disable-next-line font-family-name-quotes */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.8;
}

a {
	text-decoration: none;
}

a:hover {
	color: #a071ce;
}

/* Start footer link in a new line */
footer a {
	clear: left;
	float: left;
}

h1,
h2 {
	color: #222;
}

h2 {
	margin-top: 0;
}

h2.section {
	color: #222;
	margin-top: 2em;
	margin-bottom: 0;
}

legend {
	background-color: #fff;
	display: inline-block;
	margin-top: -1.8em;
	margin-left: -0.25em;
	margin-bottom: 1em;
}

nav {
	padding: 0.5em;
}

p {
	margin-top: 1em;
}

pre {
	background-color: #fff;
	padding: 1em;
	box-shadow: 1px 1px 8px #bbb;
}

pre + p {
	margin-top: 3em;
}

/* Override PrismJS default */
:not( pre ) > code[ class*='language-' ],
pre[ class*='language-' ] {
	background: #fff;
}

/* Override PrismJS default */
pre[ class*='language-' ] {
	margin: 2em 0;
}

span.red {
	color: #b32424;
	font-weight: bold;
}

/*
* Table styles
*/
table {
	width: 100%;
	margin-top: 2em;
	border-collapse: collapse;
	box-shadow: 1px 1px 8px #bbb;
}

td,
th {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}

th {
	background-image: linear-gradient( to bottom right, #052a74, #a8c1f9 );
	background-color: #36c; /* fallback */
	color: #fff;
	text-transform: uppercase;
}

tr {
	background-color: #fefefe;
}

.box-container {
	padding-top: 2em;
}

.box {
	float: left;
	width: 10%;
}

.box-wide {
	float: left;
	width: 45%;
}

.header {
	margin-top: 0;
}

.intro {
	background-color: #fff;
	color: #222;
	margin-top: 3em;
	border-radius: 4px;
	padding: 2em;
	box-shadow: 2px 2px 20px #bbb;
	font-size: 120%;
}

.container {
	margin-left: 16%;
	margin-bottom: 2%;
	margin-right: 16%;
}

.inline-code {
	background-color: #fff;
	color: #b32424;
	border: 1px solid #d3d3d3;
	padding: 0.25em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}

.embed-app {
	background-color: #fff;
	width: 60%;
	margin: auto;
	margin-top: 2.5em;
	margin-bottom: 2.5em;
	border-radius: 2px;
	padding: 0.75em;
	box-shadow: 3px 3px 18px #36c;
}

.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
	width: 5.5em;
	color: #36c;
	box-shadow: 1px 2px 12px;
}

.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
	margin-bottom: 0;
	padding-left: 6px;
}

/* Borrowed from Core Apex CSS */
.oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected {
	background-color: #80ccff;
}

/* Borrowed from Core Apex CSS */
.oo-ui-optionWidget-highlighted {
	background-color: #b9e3ff;
}

.no-highlights .oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected,
.no-highlights .oo-ui-optionWidget-highlighted {
	background-color: #fff;
}

.tutorials-footer {
	background-color: #fcfcfc;
	margin-top: 6em;
}

.tutorials-footer-content,
.tutorials-footer-top {
	padding-left: 16%;
	padding-right: 16%;
}

.tutorials-footer-content {
	height: 20em;
}

.tutorials-footer h3 {
	color: #222;
}

.tutorials-footer-top {
	background-image: linear-gradient( to bottom right, #052a74, #a8c1f9 );
	background-color: #36c; /* fallback */
	color: #f8f9fa;
	height: 8em;
	padding-top: 2em;
}

.tutorials-footer-top h1 {
	color: #fff;
	text-align: center;
}

.tutorials-toolbar-tutorials {
	top: 14px;
	width: 50%;
}

.tutorials-toolbar-tutorials .oo-ui-dropdownWidget {
	top: 10px;
	left: 0;
	width: 16em;
	padding: 0;
}

/*
* Back to top button
* Taken from https://codepen.io/desirecode/pen/MJPJqV/
* with minor adjustments.
*/
.scroll {
	background-color: #222;
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	border-radius: 60px;
	text-indent: -9999px;
	cursor: pointer;
}

.scroll span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin-top: -18px;
	margin-left: -12px;
	border: 12px solid transparent;
	border-bottom-color: #fff;
}

.scroll:hover {
	background-color: #b32424;
	opacity: 1;
}

/*
* Make footer fit smaller sized screens
*/
@media only screen and ( max-width: 860px ) {
	.box,
	.box-wide {
		width: 100%;
		margin-bottom: 2em;
	}

	.tutorials-footer-top h1 {
		margin-top: 1em;
		font-size: 165%;
	}
}

@media only screen and ( max-width: 462px ) {
	.tutorials-footer-top h1 {
		font-size: 155%;
	}
}
