body {
	background-color: var(--color-body);
	color: var(--color-body-text);
}

code {
	background-color: var(--color-code);
	border-color: var(--color-code-text);
	color: var(--color-code-text);
}

.noscript {
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spacer {
	height: 3rem;
	width: 100%;
}

.hidden {
	display: none !important;
}

section.fullheight {
	min-height: 100vh;
}

footer{
	margin-top: 20rem;
}


.dragDrop {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
	width: 100%;

	background-color: var(--color-loader);
	color: var(--color-loader-text);

	--transition: all 0.25s ease-in-out 0s;
	transition: var(--transition);
	visibility: hidden;
    opacity: 0;

    z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.dragDrop.hover, .dragDrop.loading {
	visibility: visible;
	opacity: 1;
}
.dragDrop.loading {
	background-color: var(--color-loader-hover);
}
/*.dragDrop.loading p:first-child::before {
	content: "⋮";
	
	display: inline-flex;
	width: 1em;
	height: 1em;

    justify-content: center;
    align-items: center;
    align-content: center;
    transform: rotate(0);
}*/

.pc .examples-list {
	border: 1px solid var(--color-controls-button-border);
	margin: 0;
	border-radius: 0 4px 4px 4px;
}

.pc .examples-list table td:first-child {
	padding: 12px 8px 12px 15px;
}

.pc .example-scroller-label {
	display: inline-block;
	margin: 0;
	border: 1px solid var(--color-controls-button-border);
	border-bottom-style: none;
	color: var(--color-controls-button-text);
	border-radius: 4px 4px 0 0;
	padding: 2px 15px;
}

button, .button {
    /* background-color: whitesmoke; */
    color: var(--color-controls-button-text);
    border-color: var(--color-controls-button-border);
}
button:hover, .button:hover{
    color: var(--color-controls-button-text-hover);
}

.button-group {
	margin-bottom: 2em;
}
.button-group > * {
	border-radius: 0;
}
.button-group :first-child {
	border-radius: 4px 0 0 4px;
}
.button-group :last-child {
	border-radius: 0 4px 4px 0;
}

/* HELPERS  */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.level {
  float: left;
  margin-right: 1.5em;
}