* {
	font-family: "Tahoma", sans-serif;
	margin: 0;
	padding: 0;
}
:root {
	--white: #ffffff;
	--black: #000000;
	--gray-b5: #333333;
	--gray-b4: #3f3f3f;
	--gray-b3: #4b4b4b;
	--gray-b2: #585858;
	--gray-b1: #636363;
	--gray: #6d6d6d;
	--gray-t1: #808080;
	--gray-t2: #919191;
	--gray-t3: #b3b3b3;
	--gray-t4: #cccccc;
	--gray-t5: #d3d3d3;
	--box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
html,
body {
	zoom: normal;
	margin: 0;
	padding: 0;
	background-color: black;
	position: relative;
}
body {
	font-size: 15px;
	overflow-x: hidden;
	background: var(--black);
	height: 100vh;
}
/* --------------------------------------------------------------------------------------------------- */
#page {
	width: 100vw;
	height: 100%;
	flex-direction: row;
	display: inline-flex;
	justify-content: flex-start;
	overflow-y: scroll;
	overflow-x: hidden;
	position: relative;
}
/* set #page scroll bar width */
#page::-webkit-scrollbar {
	width: var(--scrollbar-width);
	z-index: 99999;
}
/* Track */
#page::-webkit-scrollbar-track {
	background: var(--gray);
}
/* Handle */
#page::-webkit-scrollbar-thumb {
	background: var(--gray-b3);
}
/* Handle on hover */
#page::-webkit-scrollbar-thumb:hover {
	background: var(--gray-b4);
}
/* --------------------------------------------------------------------------------------------------- */
#algorithm-selector {
	display: inline-flex;
	justify-content: right;
	flex-direction: row;
	align-items: flex-start;
	background-color: var(--gray-t3);
	color: var(--black);
	height: 48px;
	z-index: 10;
	font-weight: normal;
	padding: 0 0 0 30px;
	white-space: nowrap;
	width: 505px;
	user-select: none;
}
#algorithm-selector > div:hover {
	text-decoration: underline;
	position: relative;
}
#algorithm-selector > div {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 20px;
	cursor: pointer;
	position: relative;
}
#algorithm-selector .selected {
	background-color: var(--gray-t5);
	color: var(--black);
	font-weight: bold;
	z-index: 27;
}
#algorithm-selector .selected::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: -10px;
	width: 10px;
	height: 20px;
	background-color: var(--gray-t3);
	border-radius: 0 0 10px 0;
	box-shadow: 0 10px 0 0 var(--gray-t5);
}
#algorithm-selector .selected:not(:nth-child(4))::before {
	content: "";
	position: absolute;
	bottom: 0px;
	right: -10px;
	width: 10px;
	height: 20px;
	background-color: var(--gray-t3);
	border-radius: 0 0 0 10px;
	box-shadow: 0 10px 0 0 var(--gray-t5);
}
#algorithm-selector .selected:not(:nth-child(4)) {
	border-radius: 10px 10px 0 0;
}
#algorithm-selector .selected:nth-child(4) {
	border-radius: 10px 0 0 0;
}
/* --------------------------------------------------------------------------------------------------- */
#algorithm-section {
	position: sticky;
	width: 535px;
	transition: width 200ms;
	z-index: 1;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	background: transparent;
	z-index: 20;
	background-color: var(--gray-t3);
	position: sticky;
	top: 0;
}
#algorithm {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: var(--gray-t5);
	box-shadow: var(--box-shadow);
	overflow: hidden;
	z-index: 0;
	border-top-right-radius: 10px;
}
#collapse-arrow {
	position: absolute;
	height: 47px;
	background-color: var(--gray-t2);
	left: 0px;
	z-index: 0;
	border-radius: 0px 5px 5px 0px;
	cursor: pointer;
	color: var(--gray-t5);
	font-weight: bold;
	line-height: 47px;
	padding-left: 57px;
	padding-right: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.0);
}
#collapse-arrow::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 25%;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid var(--gray-t5);
}
#algorithm-section #collapse-arrow::after {
	content: "COLLAPSE";
}
#algorithm-section #collapse-arrow::before {
	transform: translate(-75%, -50%) rotate(180deg);
	transition: transform 0.2s;
}
#algorithm-section.collapsed #collapse-arrow::after {
	content: "EXPAND";
}
#algorithm-section.collapsed #collapse-arrow::before {
	transform: translate(-50%, -50%) rotate(0deg);
	transition: transform 0.2s;
}
#algorithm-section.collapsed {
	width: 0px;
	transition: 0.2s;
}
#algorithm .algorithm-name {
	font-size: 27.75px;
	font-weight: bold;
	margin: 35px 0 20px 0;
	white-space: nowrap;
}
#input-values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	width: 100%;
}
#input-values input[type="number"] {
	border: 0.13vw solid var(--white);
	background-color: transparent;
	color: var(--white);
	border-radius: 0.19vw;
	text-align: left;
	width: 3.32vw;
	max-width: 3.32vw;
	padding-left: 0.32vw;
	font-size: 0.87vw;
	line-height: 1.4em;
	font-weight: bold;
}
#input-values .input-group {
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0.13vw 0.39vw;
	margin: 0.13vw 0.26vw;
	border-radius: 0.32vw;
	background-color: #00000040;
}
#input-values .input-group > div {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.code-container {
	padding-left: 30px;
	width: calc(100% - 40px);
	height: calc(100% - var(--controls-section-height) - 48px + 2.5vw - 1.65vw);
}
.code {
	all: unset;
	display: inline-block;
	width: 100%;
	align-self: center;
	color: var(--black);
	tab-size: 30px;
	position: relative;
	z-index: 0;
	line-height: 20.5px;
	max-height: calc(100% - var(--controls-section-height));
	overflow-y: auto;
	overflow-x: hidden;
	overflow-block: visible;
	padding-bottom: 0.75vw;
}
/* set scroll bar width */
.code::-webkit-scrollbar {
	width: calc(var(--scrollbar-width) * 0.9);
	z-index: 99999;
}
/* Track */
.code::-webkit-scrollbar-track {
	background: var(--gray-t3);
}
/* Handle */
.code::-webkit-scrollbar-thumb {
	background: var(--gray-t1);
}
/* Handle on hover */
.code::-webkit-scrollbar-thumb:hover {
	background: var(--gray);
}
.code .instructions {
	color: #bb5098;
	font-weight: bold;
	white-space: nowrap;
}
.code .comments {
	color: #24972b;
	font-weight: bold;
	white-space: nowrap;
}
.code .parenthesis {
	color: var(--black);
	font-weight: bold;
	white-space: nowrap;
}
.code > div {
	all: unset;
	display: inline-block;
	width: 100%;
	white-space: pre;
}
.code {
	counter-reset: codeline;
}
.code > div:not(:last-child)::before {
	content: counter(codeline)' | ';
	counter-increment: codeline;
	width: 35px;
	color: var(--gray-t3);
	text-align: right;
	display: inline-block;
}
.code .highlight {
	background-color: #ffffff;
	height: 0px;
	width: calc(100%);
	left: 0;
	position: absolute;
	z-index: -1;
	/* NOTE: This vaule is animated by changing the last multiplier number 
	(representing the line number) */
	top: calc(-3px - 20.5px + 20.5px * 1);
	border-radius: 5px;
}
@keyframes highlightAnimation {
	0% {
		top: calc(-3px - 20.5px + 20.5px * 1);
	}
	100% {
		top: calc(-3px - 20.5px + 20.5px * 25);
	}
}
#algorithm .code-container.k-way .algorithm-name::before {
	content: "K-way External Sorting";
	font-size: 1em;
}
#algorithm .code-container.two-way .algorithm-name::before {
	content: "2-way External Sorting";
	font-size: 1em;
}
#algorithm .code-container.double-buffering .algorithm-name::before {
	content: "Double Buffering External Sorting";
	font-size: 0.98em;
}
#algorithm .code-container.replacement-selection .algorithm-name::before {
	content: "Replacement Selection External Sorting";
	font-size: 0.85em;
}
/* --------------------------------------------------------------------------------------------------- */
:root {
	/* --use-horizontal-view: 1; */
	/* --secondary-storage-section-width: calc(var(--use-horizontal-view) * 74% + (1 - var(--use-horizontal-view)) * 53%); */
	--secondary-storage-section-width: 53%;
	--page-dim: 90px;
	--frame-margin-top: 8px;
	--frame-margin-left: 23px;
	--border-thickness: 1.6px;
	--frames-per-row: 2;
	--controls-section-height: 7.16vw;
	--scrollbar-width: 1vw;
}
#visualizer {
	width: 100%;
	display: flex;
	height: fit-content;
	align-items: stretch;
	min-height: 100%;
	overflow-x: hidden;
	background-color: var(--gray-t3);
}
#visualizer > div {
	margin: 0;
	padding: 0;
}
#visualizer .section-title {
	width: 100%;
	text-align: center;
	vertical-align: center;
	line-height: 48px;
	box-shadow: var(--box-shadow);
	font-size: 19px;
	height: 47px;
	font-weight: bold;
}
/* --------------------------------------------------------------------------------------------------- */
#main-memory-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: calc(100% - var(--secondary-storage-section-width));
	background-color: var(--gray-t3);
	height: fit-content;
	flex: flex;
}
#visualizer #main-memory-container .section-title {
	background-color: var(--gray-t3);
	z-index: 10;
	color: var(--gray-t1);
}
#visualizer .blocks-wrapper {
	display: inline-flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: calc(var(--page-dim) * var(--frames-per-row) + var(--frame-margin-left) * 2 * var(--frames-per-row) + var(--border-thickness) * 2 * var(--frames-per-row));
	height: fit-content;
	margin: 35px 0;
	padding: 55px 20px 25px 20px;
	color: var(--black);
	position: relative;
}
#frame-buffer {
	position: relative;
}
#frame-buffer.blocks-wrapper {
	background-color: var(--gray-t2);
	border: var(--border-thickness) solid var(--black);
}
#visualizer .blocks-container {
	width: fit-content;
	margin: 0 auto;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	align-items: flex-start;
}
#visualizer .blocks-container-name {
	top: 19px;
	left: 30px;
	width: calc(100% - 30px * 2);
	text-align: center;
	position: absolute;
	font-weight: bold;
	font-size: 18px;
}
#visualizer .block {
	width: var(--page-dim);
	height: var(--page-dim);
	border: var(--border-thickness) solid var(--black);
	margin: var(--frame-margin-top) var(--frame-margin-left);
	background-color: var(--gray-t2);
	position: relative;
	counter-reset: record;
}
#visualizer .block .block-name {
	position: absolute;
	top: 2.5px;
	left: 3px;
	font-size: 14px;
	font-weight: bold;
	display: block;
	color: var(--black);
	text-shadow: 0 0 15px var(--gray-t2);
	z-index: 20;
	background-color: #b9b9b9cc;
	border-radius: 3px;
	padding: 1px 3px;
}
#visualizer .block .record,
#copies-container .record-copy {
	display: block;
	margin: 0;
	padding-right: 5px;
	border: var(--border-thickness) solid var(--black);
	width: calc(var(--page-dim) - 5px);
	align-self: center;
	position: relative;
	top: 0;
	left: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: break-word;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	z-index: 12;
	user-select: none;
	text-shadow: 0 0 5px #ffffff30;
	transition: transform 0.1s, opacity 0.1s;
}
/* Single column frame buffer (2-way and k-way) */
#frame-buffer.blocks-wrapper.single-column {
	width: calc(var(--page-dim) * 1 + var(--frame-margin-left) * 2 * 1 + var(--border-thickness) * 2 * 1);
	padding-left: calc(var(--page-dim) * 1.21 + var(--frame-margin-left) * 2 * 1 + var(--border-thickness) * 2 * 1);
	min-height: calc(var(--page-dim) * 2 + var(--frame-margin-top) * 2 * 2 + var(--border-thickness) * 2 * 2);
	align-items: flex-start;
}
#frame-buffer.blocks-wrapper:not(.replacement-selection).single-column {
	margin-top: 100px;
}
#frame-buffer.blocks-wrapper:not(.replacement-selection).single-column .block {
	/* Increase margin (to show runs on the left) */
	margin: calc(var(--frame-margin-top) * 2) var(--frame-margin-left);
}
#frame-buffer.blocks-wrapper:not(.replacement-selection).single-column .block:last-child {
	position: absolute;
	top: 55px;
	left: 20px;
}
/* Replacement selection single column */
#frame-buffer.blocks-wrapper.replacement-selection.single-column .block:last-child {
	position: absolute;
	top: calc(55px + var(--frame-margin-top) * 2 + var(--page-dim) + var(--border-thickness) * 2);
	left: 20px;
}
#frame-buffer.blocks-wrapper.replacement-selection.single-column .block:nth-child(1) {
	position: absolute;
	top: 55px;
	left: 20px;
}
#frame-buffer.single-column .blocks-container-name {
	width: 120%;
	left: -10%;
}
/* Class for inactive records */
.block .record.inactive {
	background: linear-gradient(#00000080 0%, #00000080 100%);
}
.block .record:not(.first-active)::after,
.block .record:not(.first-active)::after,
#frame-buffer.replacement-selection:not(.pass-zero) .block::before {
	content: '';
	opacity: 0;
	transition: opacity 0.1s;
}
.block .record.first-active::after,
.block .record.first-inactive::after,
#frame-buffer.replacement-selection.pass-zero .block::before {
	height: 50px;
	padding-top: 5%;
	text-align: left;
	left: -24px;
	width: 19px;
	font-size: 12.5px;
	line-height: 10px;
	top: calc(-1 * var(--border-thickness));
	position: absolute;
	background-repeat: no-repeat;
	background-position: 35% 20px;
	border-top: var(--border-thickness) dashed var(--black);
	color: var(--black);
	opacity: 0.5;
	font-weight: bold;
	padding-right: 3px;
	transition: opacity 0.1s;
	text-align: right;
}
.block .record.first-active::after {
	content: "Q1";
}
.block .record.first-inactive::after {
	content: "Q2";
}
#frame-buffer.replacement-selection.pass-zero .block:last-child::before {
	content: 'OUT';
	margin-left: -7px;
	width: 24px;
}
#frame-buffer.replacement-selection.pass-zero .block:nth-child(1)::before {
	content: 'IN';
	margin-left: -7px;
	width: 24px;
}
/* --------------------------------------------------------------------------------------------------- */
#copies-container .record-copy {
	z-index: 11;
}
#visualizer .block .record .record-value,
#copies-container .record-copy .record-value {
	position: absolute;
	text-align: left;
	width: 50px;
	display: block;
	right: -55px;
}
.record-value.hidden-value {
	visibility: hidden;
}
#frame-buffer .blocks-container {
	counter-reset: frame;
}
#frame-buffer .block .block-name {
	counter-increment: frame;
}
#frame-buffer .block .block-name::before {
	content: 'F' counter(frame);
}
#frame-buffer .block:last-child {
	background-color: var(--gray-t1);
}
#frame-buffer .block:last-child .block-name::before {
	content: 'F' counter(frame);
}
#frame-buffer .block:last-child::after,
#frame-buffer.replacement-selection.pass-zero .block:nth-child(1)::after,
#frame-buffer .frame-run-association-number {
	line-height: 18px;
	font-size: 0.8em;
	position: absolute;
	bottom: 3px;
	left: 3px;
	text-align: center;
	font-weight: bold;
	background-color: #979797b7;
	text-shadow: 0 0 15px var(--gray-t2);
	border-radius: 3px;
	padding: 1px 3px;
	position: absolute;
	z-index: 20;
}
#frame-buffer .frame-run-association-number {
	/* Used to show the run each frame is currently considering records for (when the option is enabled) */
	background-color: #a1a1a1b7;
}
#frame-buffer.hide_frame_run_numbers .frame-run-association-number {
	visibility: hidden;
}
#frame-buffer .block:last-child::after {
	content: 'OUT';
}
#frame-buffer.replacement-selection.pass-zero .block:nth-child(1)::after {
	content: 'IN';
}
#frame-buffer.replacement-selection.single-column .block:nth-child(1) {
	background-color: var(--gray-t1);
}
/* --------------------------------------------------------------------------------------------------- */
#secondary-storage-container {
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	justify-self: stretch;
	align-items: center;
	align-content: center;
	width: var(--secondary-storage-section-width);
	background-color: var(--gray-t2);
	box-shadow: inset 0 25px 15px rgba(0, 0, 0, 0.2);
	min-height: 100%;
	flex: flex;
	position: relative;
}
#visualizer .blocks-container-name-v2 {
	top: 9px;
	width: 100%;
	text-align: center;
	position: absolute;
	font-weight: bold;
	font-size: 18px;
	overflow: hidden;
	white-space: nowrap;
}
#runs-container:not(:has(.transform-to-file)) #run .blocks-container-name-v2::before,
#runs-container-next:not(:has(.transform-to-file)) #run .blocks-container-name-v2::before {
	content: 'RUN ' counter(runc);
	display: inline-block;
	font-weight: bold;
}
#runs-container.transform-to-file #run .blocks-container-name-v2::before,
#runs-container-next.transform-to-file #run .blocks-container-name-v2::before {
	content: 'RUN 1';
}
/* #secondary-storage-container.horizontal-view #runs-container .blocks-container-name-v2::before,
#secondary-storage-container.horizontal-view #runs-container-next .blocks-container-name-v2::before {
	content: "";
}
#secondary-storage-container.horizontal-view #runs-container #run.blocks-wrapper,
#secondary-storage-container.horizontal-view #runs-container-next #run.blocks-wrapper {
	padding-top: 12px;
}
#secondary-storage-container.horizontal-view .blocks-wrapper:not(#file) {
	width: fit-content !important;
	padding: 5px !important;
}
#secondary-storage-container.horizontal-view .blocks-container {
	flex-direction: row;
	width: fit-content;
} */
/* Animate content text to make name appear */
#runs-container.transform-to-file #run .blocks-container-name-v2::before,
#runs-container-next.transform-to-file #run .blocks-container-name-v2::before {
	animation: animateFinalName 1.5s 1s linear forwards;
}
@keyframes animateFinalName {
	0% {
		content: 'RUN 1'
	}
	8% {
		content: 'RUN '
	}
	16% {
		content: 'RU'
	}
	24% {
		content: 'R'
	}
	32% {
		content: ''
	}
	40% {
		content: 'F'
	}
	48% {
		content: 'FI'
	}
	56% {
		content: 'FIL'
	}
	64% {
		content: 'FILE'
	}
	72% {
		content: 'FILE F'
	}
	80% {
		content: 'FILE FO'
	}
	88% {
		content: 'FILE FOR'
	}
	96% {
		content: 'FILE FOR R'
	}
	100% {
		content: 'FILE FOR R'
	}
}
#secondary-storage-container .content {
	width: 100%;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	height: fit-content;
	flex: flex;
	padding-bottom: 100px;
}
#visualizer #secondary-storage-container .section-title {
	background-color: var(--gray-t2);
	color: var(--gray-b1);
	z-index: 9;
}
#runs-container,
#runs-container-next {
	display: inline-flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
	width: fit-content;
	max-width: 50%;
	padding-left: 0 15px;
	position: relative;
}
/* #secondary-storage-container.horizontal-view .content {
	justify-content: flex-start;
	flex-direction: column-reverse;
}
#secondary-storage-container.horizontal-view #file {
	width: calc(100% - 20px * 2);
}
#secondary-storage-container.horizontal-view #file .blocks-container-name-v2 {
	text-align: left;
	margin: 0px calc(20px + var(--frame-margin-top));
	width: calc(100% - (20px + var(--frame-margin-top)) * 2);
}
#secondary-storage-container.horizontal-view #file .blocks-container {
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
}
#secondary-storage-container.horizontal-view .block {
	margin: var(--frame-margin-top) var(--frame-margin-top);
} */
#runs-container .blocks-wrapper,
#runs-container-next .blocks-wrapper {
	display: inline-flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: calc(var(--page-dim) * 1 + var(--frame-margin-left) * 2 * 1 + var(--border-thickness) * 2 * 1);
	height: fit-content;
	margin: 0 0 5px 0;
	padding: 10px 10px 0px 10px;
}
#runs.blocks-wrapper {
	padding-top: 30px;
	padding-bottom: 50px;
}
#run.blocks-wrapper {
	padding-top: 32px;
	padding-bottom: 12px;
	margin-bottom: 25px;
	border: 2px var(--gray-b1);
	border-style: dashed;
}
#file.blocks-wrapper {
	padding-top: 32px;
	padding-bottom: 15px;
	margin-top: 25px;
	width: calc(var(--page-dim) * 1 + var(--frame-margin-left) * 2 * 1 + var(--border-thickness) * 2 * 1);
}
#file .blocks-container {
	counter-reset: pagec;
}
#file .block .block-name {
	counter-increment: pagec;
}
#file .block .block-name::before {
	content: 'P' counter(pagec);
}
#runs-container,
#runs-container-next {
	overflow: hidden;
	width: 0%;
	counter-reset: runc;
}
#runs-container #run,
#runs-container-next #run {
	overflow: hidden;
	counter-increment: runc;
}
#runs-container-next {
	margin-left: 20px;
}
#run .blocks-container {
	counter-reset: runepagec;
}
#run .block .block-name {
	counter-increment: runepagec;
}
*:not(:has(.transform-to-file)) #run .block .block-name::before {
	content: 'R' counter(runc)'-P' counter(runepagec);
}
*.transform-to-file #run .block .block-name::before {
	content: 'R' counter(runc)'-P' counter(runepagec);
	animation: pageNumberFinalAnimation 0.5s 2.5s linear forwards;
}
@keyframes pageNumberFinalAnimation {
	0% {
		content: 'R' counter(runc)'-P' counter(runepagec);
	}
	25% {
		content: counter(runc)'-P' counter(runepagec);
	}
	50% {
		content: '-P' counter(runepagec);
	}
	75% {
		content: 'P' counter(runepagec);
	}
	100% {
		content: 'P' counter(runepagec);
	}
}
/* --------------------------------------------------------------------------------------------------- */
#copies-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* --------------------------------------------------------------------------------------------------- */
#file .block .pointed {
	border-color: var(--white);
	color: var(--white);
	box-shadow: var(--box-shadow);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transform: scale(1.1);
	transform-origin: center;
	z-index: 15;
}
#visualizer .block.invisible {
	border: var(--border-thickness) solid transparent;
	background-color: transparent;
}
#visualizer .block.invisible .block-name {
	visibility: hidden;
}
.pointed .hidden-value {
	visibility: visible;
}
.transform-to-file #run.blocks-wrapper {
	border-color: #00000000;
	transition: border-color 0.5s 0.5s;
}
#canvas {
	background: transparent;
	top: 0;
	left: 0;
	z-index: 99999;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
}
#canvas-container {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
}
/* --------------------------------------------------------------------------------------------------- */
#controls {
	height: var(--controls-section-height);
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, #4b4b4bff 0%, 20%, #4b4b4b00 100%);
	z-index: 9999;
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	padding: 0 0.65vw;
	width: calc(100% - 2 * 0.65vw - var(--scrollbar-width));
	pointer-events: none;
}
#controls .controls-section {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 33%;
	padding: 0 0.65vw;
	overflow: visible;
	position: relative;
	pointer-events: all;
}
#controls .button {
	margin: 0.39vw;
	border-radius: 1000px;
	border: 0.19vw solid var(--gray-t5);
	height: 2.93vw;
	width: 2.93vw;
	box-shadow: var(--box-shadow);
	color: var(--gray-t5);
	font-weight: bold;
	text-align: center;
	line-height: 2.343vw;
	user-select: none;
	position: relative;
}
#controls .button:nth-child(-n+1),
#controls .button:nth-child(n+5) {
	height: 2.343vw;
	width: 2.343vw;
}
#controls .button:hover {
	transform: scale(1.05);
	background-color: #00000040;
}
#controls .button:active {
	transform: scale(1.05);
	background-color: var(--gray-t5);
}
/* ----- Play button ----- */
#controls #play-pause {
	border: 0.19vw solid var(--gray-t5);
	height: 3.58vw;
	width: 3.58vw;
}
#controls #play-pause:not(.paused) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 21 24'%3E%3Cpath fill='%23d3d3d3' d='M3 22v-20l18 10-18 10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 63%;
}
#controls #play-pause.paused {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 1 21 22'%3E%3Cpath fill='%23d3d3d3' d='M4 4h5v16h-5zM12 4h5v16h-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 63%;
}
/* ----- Step forwards and backwards buttons ----- */
#controls #step-forward {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
}
#controls #step-backwards {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	rotate: 180deg;
}
#controls #step-forward::before,
#controls #step-forward::after,
#controls #step-backwards::before,
#controls #step-backwards::after {
	display: block;
	content: "";
	width: 37%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='30' viewBox='0 0 20 25'%3E%3Cpath fill='%23d3d3d3' d='M3 22v-20l18 10-18 10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.1vw 1.95vw;
}
/* ----- Step to start and end button ----- */
#controls #step-to-end {
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	rotate: 180deg;
}
#controls #step-to-start {
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
#controls #step-to-end::before,
#controls #step-to-start::before {
	display: block;
	content: "|";
	width: 12%;
	height: 100%;
	color: var(--gray-t5);
	font-size: 1.1vw;
	font-weight: bold;
	line-height: 2.314vw;
	text-align: right;
	padding-left: 0.39vw;
}
#controls #step-to-end::after,
#controls #step-to-start::after {
	display: block;
	content: "";
	width: 50%;
	height: 100%;
	rotate: 180deg;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='30' viewBox='5 0 20 25'%3E%3Cpath fill='%23d3d3d3' d='M3 22v-20l18 10-18 10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.1vw 1.95vw;
}
#speed.button {
	font-size: 0.78vw;
}
#speed .selected-speed {
	user-select: none;
	pointer-events: none;
}
.button .button-popup {
	position: absolute;
	left: -100%;
	bottom: 3.85vw;
	width: 7.81vw;
	border-radius: 1.465vw;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: #4b4b4bc0;
	font-weight: normal;
	transform-origin: bottom center;
	transform: scale(0);
	transition: 0.1s transform ease-in-out;
	font-size: 0.976vw;
	overflow: hidden;
}
.button-popup > div {
	width: 100%;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.speed-popup > div {
	line-height: 1.82vw;
}
.button-popup > div:nth-child(1) {
	padding-top: 0.13vw;
}
.button-popup > div:last-child {
	padding-bottom: 0.4vw;
}
.speed-popup.showing {
	transform: scale(1);
}
#controls .button:has(.speed-popup.showing) {
	transform: scale(1.05);
	background-color: var(--gray-b1);
}
.speed-popup > div:nth-child(odd):first-child {
	border-radius: 1.63vw 1.63vw 0 0;
}
.button-popup > div:nth-child(odd) {
	background-color: #00000020;
}
.button .speed-popup .selected {
	font-weight: bold;
}
.button .speed-popup .selected::before {
	content: " [ ";
}
.button .speed-popup .selected::after {
	content: " ] ";
}
.button .speed-popup div:hover {
	cursor: pointer;
}
.button .speed-popup div:hover {
	text-decoration: underline;
}
/* ----- Restart button ----- */
#controls #restart {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24px' fill='%23d3d3d3' height='24px'%3E%3Cpath d='M 2 2 L 4.9394531 4.9394531 C 3.1262684 6.7482143 2 9.2427079 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 6.486 17.514 2 12 2 L 12 4 C 16.411 4 20 7.589 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 9.7940092 4.9004767 7.7972757 6.3496094 6.3496094 L 9 9 L 9 2 L 2 2 z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}
/* --------------------------------------------------------------------------------------------------- */
.current-phase-description {
	color: var(--white);
	font-weight: normal;
	font-size: 0.945vw;
	width: 100%;
	height: 100%;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 0.32vw;
	border-radius: 1.63vw 1.63vw 0 0;
	max-height: 5.5em;
	padding: 0.78vw 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: normal;
	line-height: 1.35em;
	line-clamp: 3;
	display: inline-flex;
	transition: transform 100ms;
}
.current-phase-description > div > span {
	position: relative;
	margin: auto 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	vertical-align: center;
	overflow: hidden;
}
.current-phase-description > div {
	position: relative;
	height: 100%;
	width: calc(100% - 1.17vw - 1.3vw);
	margin: 0 auto;
	display: inline-flex;
	background-color: #22222270;
	padding: 0 0.455vw;
	border-radius: 0.65vw;
	box-shadow: var(--box-shadow);
}
.current-phase-description > div:has(#input-values) {
	width: calc(100% - 1.17vw - 1.3vw + 0.65vw);
	padding: 0 0.13vw;
}
.current-phase-description .text-info-note {
	display: inline-flex;
	background-color: rgb(0, 136, 255);
	border: var(--border-thickness) solid var(--white);
	overflow: hidden;
	padding: 0 3px;
	font-weight: bold;
	text-align: center;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	line-height: 17px;
	color: var(--white);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.current-phase-description .description-record {
	display: inline-flex;
	border: var(--border-thickness) solid var(--white);
	padding: 0 0.19vw 0 1.17vw;
	font-weight: bold;
	text-align: right;
	line-height: 1.1vw;
	color: var(--white);
	text-shadow: 0 0 0.65vw rgba(0, 0, 0, 0.4);
}
/* final description */
.final-description > span {
	margin: auto 0;
}
.final-description {
	font-weight: 900;
	font-size: 1.56vw;
	height: 100%;
	display: flex;
	width: 70%;
	margin: auto;
	align-items: flex-end;
	text-transform: uppercase;
	-webkit-text-stroke: 0.065vw var(--white);
	flex-direction: row;
	justify-content: center;
	line-height: 1.95vw;
}
.current-phase-description > div:has(.final-description),
.current-phase-description > div:has(.final-description-alternate) {
	width: calc(100% - 1.17vw - 0.195vw);
	height: 100%;
}
.current-phase-description span:has(.final-description),
.current-phase-description span:has(.final-description-alternate) {
	width: 100%;
	height: 100%;
}
.current-phase-description span:has(.final-description-alternate) {
	display: inline-flex;
}
.final-description-alternate {
	width: 100%;
	margin: auto;
	padding: auto;
	text-align: center;
	font-size: 1.56vw;
	line-height: 1.95vw;
}
#animation-controls-container {
	background-color: #22222270;
	border-radius: 0.65vw;
	max-height: 5.2vw;
	max-width: fit-content;
}
/* ------------------------------- alternate algoritihm selector ------------------------------------------------------------------------------*/
#algorithm-selector-alternate {
	/* display: none; */
	position: absolute;
	z-index: 9999;
	/* top: 1vw; */
	bottom: 6.8vw;
	left: 2.22vw;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	border-radius: 0.45vw;
	width: 30.75vw;
}
/* #algorithm-selector-alternate.horizontal-view #replacement-selection {
	text-decoration: line-through;
	background-color: #00000010;
	color: #ffffff40;
	position: relative;
	overflow: visible;
}
#algorithm-selector-alternate.horizontal-view #replacement-selection:active {
	pointer-events: none;
} */
/* If hover on before, show a after with given text */
/* #algorithm-selector-alternate.horizontal-view #replacement-selection:hover::before {
	position: absolute;
	content: "Not available in horizontal mode";
	border-radius: 0.45vw;
	color: #ffffffaa;
	top: -120%;
	left: calc(-37.5% /2);
	width: calc(100% + 37.5%);
	height: 100%;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #00000020;
	z-index: 9999;
} */
#algorithm-selector-alternate > div {
	font-size: 0.9vw;
	height: 1.4vw;
	overflow: hidden;
	padding: 0.3vw 1vw 0.3vw 1vw;
	margin: 0 0.235vw;
	border-radius: 0.45vw;
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	color: var(--white);
	cursor: pointer;
	user-select: none;
	background-color: #00000020;
}
#algorithm-selector-alternate > div.selected {
	font-weight: bold;
	background-color: #00000050;
}
#algorithm-selector-alternate > div:hover {
	text-decoration: underline;
}
#animation-controls-container .zoom-note {
	position: absolute;
	background-color: transparent;
	font-size: 1vw;
	text-align: center;
	font-weight: normal;
	padding: 0;
	margin: 0;
	color: #ffffff90;
	height: 3vw;
	width: 100%;
	top: -1.6vw
}
/* Other controls section --------------------------------------------------------------------------------------------------------------------------------- */
#other-controls-container.controls-section {
	background-color: #22222270;
	border-radius: 0.65vw;
	max-height: 5.2vw;
	margin-right: 3vw;
	margin-left: 4vw;
	max-width: 25%;
	height: 100%;
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
}
#other-controls-container > div {
	width: 100%;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	color: var(--white);
	font-weight: normal;
	font-size: 0.945vw;
	margin-top: auto;
	margin-bottom: auto;
	line-height: 1.5em;
}
#other-controls-container > div:first-child {
	justify-content: flex-start;
	max-width: 11vw;
}
#other-controls-container > div:last-child {
	justify-content: flex-end;
}
#other-controls-container #other-infos {
	display: inline-flex;
	flex-direction: column;
}
#other-controls-container #other-infos > div {
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 11.2vw;
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0.13vw 0.55vw;
	margin: 0.13vw 0.26vw;
	border-radius: 0.32vw;
	background-color: #00000035;
	color: var(--gray-t5);
}
#options-button.button {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg fill='%23d3d3d3' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='30px' height='24px'%3E%3Cpath d='M 10.490234 2 C 10.011234 2 9.6017656 2.3385938 9.5097656 2.8085938 L 9.1757812 4.5234375 C 8.3550224 4.8338012 7.5961042 5.2674041 6.9296875 5.8144531 L 5.2851562 5.2480469 C 4.8321563 5.0920469 4.33375 5.2793594 4.09375 5.6933594 L 2.5859375 8.3066406 C 2.3469375 8.7216406 2.4339219 9.2485 2.7949219 9.5625 L 4.1132812 10.708984 C 4.0447181 11.130337 4 11.559284 4 12 C 4 12.440716 4.0447181 12.869663 4.1132812 13.291016 L 2.7949219 14.4375 C 2.4339219 14.7515 2.3469375 15.278359 2.5859375 15.693359 L 4.09375 18.306641 C 4.33275 18.721641 4.8321562 18.908906 5.2851562 18.753906 L 6.9296875 18.1875 C 7.5958842 18.734206 8.3553934 19.166339 9.1757812 19.476562 L 9.5097656 21.191406 C 9.6017656 21.661406 10.011234 22 10.490234 22 L 13.509766 22 C 13.988766 22 14.398234 21.661406 14.490234 21.191406 L 14.824219 19.476562 C 15.644978 19.166199 16.403896 18.732596 17.070312 18.185547 L 18.714844 18.751953 C 19.167844 18.907953 19.66625 18.721641 19.90625 18.306641 L 21.414062 15.691406 C 21.653063 15.276406 21.566078 14.7515 21.205078 14.4375 L 19.886719 13.291016 C 19.955282 12.869663 20 12.440716 20 12 C 20 11.559284 19.955282 11.130337 19.886719 10.708984 L 21.205078 9.5625 C 21.566078 9.2485 21.653063 8.7216406 21.414062 8.3066406 L 19.90625 5.6933594 C 19.66725 5.2783594 19.167844 5.0910937 18.714844 5.2460938 L 17.070312 5.8125 C 16.404116 5.2657937 15.644607 4.8336609 14.824219 4.5234375 L 14.490234 2.8085938 C 14.398234 2.3385937 13.988766 2 13.509766 2 L 10.490234 2 z M 12 8 C 14.209 8 16 9.791 16 12 C 16 14.209 14.209 16 12 16 C 9.791 16 8 14.209 8 12 C 8 9.791 9.791 8 12 8 z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	height: 2.343vw;
	width: 2.343vw;
	background-size: 100%;
}
#about-button.button {
	height: 2.343vw;
	width: 2.343vw;
	font-size: 1.5vw;
}
#controls .button-wide {
	width: fit-content !important;
	padding: 0 0.5vw;
	font-size: 0.9em;
}
.button .options-popup {
	width: 18.25vw;
	left: calc(-1 * (18.25vw - 10.4vw));
	transform-origin: bottom center;
	background-color: #505050ea;
}
.options-popup.showing {
	transform: scale(1);
}
.button:has(.options-popup.showing) {
	transform: scale(1.05);
	background-color: var(--gray-b1);
}
.button .options-popup > div {
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 1vw;
	width: calc(100% - 1vw * 2);
	height: 2.7vw;
	position: relative;
	padding-top: 0.1vw;
}
.button .options-popup > div:first-child {
	font-weight: bold;
	text-align: center;
	align-items: center;
	justify-content: center;
}
#other-controls-container .option-description {
	position: absolute;
	top: 2.8vw;
	font-size: 0.8vw;
	left: 0;
	line-height: 0.9vw;
	text-align: left;
	padding: 0 0.8vw 0 1vw;
	width: calc(100% - 0.8vw - 1vw);
	opacity: 0.75;
}
.options-popup > div:nth-child(2) {
	padding-bottom: 2.5vw;
}
.options-popup > div:nth-child(3) {
	padding-bottom: 1.7vw;
}
.options-popup > div:nth-child(4) {
	padding-bottom: 1.9vw;
}
.options-popup > div:nth-child(5) {
	padding-bottom: 1.9vw;
}
.options-popup > div:nth-child(6) {
	padding-bottom: 1.9vw;
}
/* ---------- toggle button ---------- */
/* The switch - the box around the slider */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 3.2vw;
	height: 1.8vw;
	margin: auto 0;
	pointer-events: all;
}
/* Hide default HTML checkbox */
.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
/* The slider toggle-*/
.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: 0.1s;
	transition: 0.1s;
	border-radius: 100vw;
}
.toggle-slider:before {
	position: absolute;
	content: "";
	height: 1.4vw;
	width: 1.4vw;
	left: 0.21vw;
	bottom: 0.21vw;
	background-color: white;
	-webkit-transition: 0.1s;
	transition: 0.1s;
	border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
	background-color: #2ce34b;
}
.toggle-switch input:focus + .toggle-slider {
	box-shadow: 0 0 1px #2ce34b;
}
.toggle-switch input:checked + .toggle-slider:before {
	-webkit-transform: translateX(1.4vw);
	-ms-transform: translateX(1.4vw);
	transform: translateX(1.4vw);
}
/* Instructions popup ----------------------------------------------------------------------------------------------------------------------------------- */
#about-popup:not(.showing) {
	transform: translate(0, 33%) scale(0);
}
#about-popup.showing {
	transform: translate(0, 0) scale(1);
}
#about-popup {
	--popup-width: 47%;
	--popup-height: 35.5vw;
	position: absolute;
	font-size: 0.95vw;
	background-color: var(--gray-t2);
	z-index: 10005;
	top: calc((100% - var(--popup-height)) / 2);
	left: calc((100% - var(--popup-width)) / 2);
	width: var(--popup-width);
	height: var(--popup-height);
	border-radius: 2vw;
	color: var(--white);
	min-height: fit-content;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: var(--box-shadow);
	z-index: 10005;
	transition: transform 0.15s ease-in-out;
}
#about-popup > div {
	padding: 1.2vw 1.8vw 1.8vw 1.8vw;
	text-align: center;
}
#about-popup .text-box {
	display: inline-flex;
	border: var(--border-thickness) solid var(--white);
	overflow: hidden;
	padding: 0 0.2vw;
	font-weight: bold;
	text-align: center;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	color: var(--white);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	margin-left: 0.1vw;
	margin-right: 0.5vw;
	height: 1.2vw;
	max-height: 1.2vw;
	min-height: 1.2vw;
	width: 0.8vw;
	max-width: 0.8vw;
	min-width: 0.8vw;
}
#about-popup div:nth-child(1) > .text-box {
	background-color: rgb(236, 27, 27);
}
#about-popup div:nth-child(2) > .text-box {
	background-color: rgb(238, 201, 15);
}
#about-popup div:nth-child(3) > .text-box {
	background-color: rgb(48, 224, 25);
}
#about-popup div:nth-child(4) > .text-box {
	background-color: rgb(25, 184, 224);
}
#about-popup div:nth-child(5) > .text-box {
	background-color: rgb(42, 25, 224);
}
#about-popup div:nth-child(6) > .text-box {
	background-color: rgb(164, 25, 224);
}
#about-popup div:nth-child(7) > .text-box {
	background-color: rgb(224, 25, 184);
}
.button-icon {
	display: inline-block;
	border: 0.2vw solid var(--white);
	height: 1vw;
	width: 1vw;
	border-radius: 100vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 63%;
	font-size: 0.6em;
	text-align: center;
	align-items: center;
	color: var(--white);
	font-weight: bold;
	line-height: 1.7em;
	overflow: hidden;
}
.play-pause-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 21 24'%3E%3Cpath fill='%23ffffff' d='M3 22v-20l18 10-18 10z'/%3E%3C/svg%3E");
}
.sorting-tree-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='649' height='380' viewBox='0 0 649 473'%3E%3Ctitle%3Ehierarchy%3C/title%3E%3Crect x='240' width='180' height='133' fill='%23ffffff'/%3E%3Crect x='240' y='340' width='180' height='133' fill='%23ffffff'/%3E%3Crect y='340' width='180' height='133' fill='%23ffffff'/%3E%3Crect x='469' y='340' width='180' height='133' fill='%23ffffff'/%3E%3Cpolygon points='132 259.5 306 259.5 306 308 354 308 354 259.5 528 259.5 528 308 576 308 576 211.5 354 211.5 354 163 306 163 306 211.5 84 211.5 84 308 132 308 132 259.5' fill='%23ffffff'/%3E%3C/svg%3E");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 55%;
}
.reset-icon {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24px' fill='%23ffffff' height='24px'%3E%3Cpath d='M 2 2 L 4.9394531 4.9394531 C 3.1262684 6.7482143 2 9.2427079 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 6.486 17.514 2 12 2 L 12 4 C 16.411 4 20 7.589 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 9.7940092 4.9004767 7.7972757 6.3496094 6.3496094 L 9 9 L 9 2 L 2 2 z'/%3E%3C/svg%3E");
	background-size: 70%;
}
.step-forward-icon {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
}
.step-backwards-icon {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	rotate: 180deg;
}
.step-forward-icon::before,
.step-forward-icon::after,
.step-backwards-icon::before,
.step-backwards-icon::after {
	display: block;
	content: "";
	width: 31%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='30' viewBox='0 0 25 25'%3E%3Cpath fill='%23ffffff' d='M3 22v-20l18 10-18 10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.7vw;
}
#about-popup > div > div {
	margin: 0.5vw 0;
}
#about-popup .description {
	text-align: left;
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	color: var(--gray-t4);
}
#about-popup .instructions {
	margin-top: 1vw;
	background-color: #00000030;
	border-radius: 0.8vw;
	text-align: left;
	padding: 0.8vw 1.3vw 0.8vw 1.3vw;
}
#about-popup .instructions > div:nth-child(2) > div {
	margin: 0.15vw 0;
	display: inline-flex;
	flex-direction: row;
	align-items: flex-start;
}
#about-popup .instructions > div:nth-child(2) {
	margin-top: 0.3vw;
}
#about-popup .description > div {
	margin: 0.3vw 0;
	text-align: center;
	width: 100%;
}
#about-popup a {
	text-decoration: underline;
	font-weight: bold;
	color: var(--gray-t5);
}
#black-overlay.showing {
	opacity: 1;
	pointer-events: all;
}
#black-overlay:not(.showing) {
	opacity: 0;
	pointer-events: none;
}
#black-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #00000080;
	z-index: 10000;
	transition: opacity 0.15s;
}
#about-popup > div#close-about-popup-button {
	position: absolute;
	top: 1.5vw;
	right: 1.5vw;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 25 24'%3E%3Cpath fill='%23ffffff' d='M 6.34375 2.28125 L 2.28125 6.34375 L 17.65625 21.71875 L 21.71875 17.65625 L 6.34375 2.28125 z M 2.28125 17.65625 L 6.34375 21.71875 L 21.71875 6.34375 L 17.65625 2.28125 L 2.28125 17.65625 z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90% 90%;
	background-origin: content-box;
	border-radius: 100vw;
	border: 0.2vw solid var(--white);
	width: 2vw;
	height: 2vw;
	padding: 0;
	background-color: #00000030;
	transform-origin: center center;
}
#about-popup > div#close-about-popup-button:hover {
	background-color: #00000050;
	transform: scale(1.05);
}
#other-controls-container #sorting-tree-button.button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='649' height='380' viewBox='0 0 649 473'%3E%3Ctitle%3Ehierarchy%3C/title%3E%3Crect x='240' width='180' height='133' fill='%23d3d3d3'/%3E%3Crect x='240' y='340' width='180' height='133' fill='%23d3d3d3'/%3E%3Crect y='340' width='180' height='133' fill='%23d3d3d3'/%3E%3Crect x='469' y='340' width='180' height='133' fill='%23d3d3d3'/%3E%3Cpolygon points='132 259.5 306 259.5 306 308 354 308 354 259.5 528 259.5 528 308 576 308 576 211.5 354 211.5 354 163 306 163 306 211.5 84 211.5 84 308 132 308 132 259.5' fill='%23d3d3d3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 85%;
	height: 2.93vw;
	width: 2.93vw;
}
/* Sorting Tree ----------------------------------------------------------------------------------------------------------------------------------------- */
#sorting-tree-popup:not(.showing) {
	transform: translate(0, 33%) scale(0);
}
#sorting-tree-popup.showing {
	transform: translate(0, 0) scale(1);
}
#sorting-tree-popup {
	--popup-width: 95%;
	--popup-height: 95%;
	position: absolute;
	font-size: 1.1vw;
	background-color: var(--gray-t2);
	z-index: 10005;
	top: calc((100% - var(--popup-height)) / 2);
	left: calc((100% - var(--popup-width)) / 2);
	width: var(--popup-width);
	height: var(--popup-height);
	border-radius: 2vw;
	color: var(--white);
	min-height: fit-content;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: var(--box-shadow);
	z-index: 10005;
	transition: transform 0.15s ease-in-out;
}
#sorting-tree-popup .sorting-tree-description {
	margin-top: 1vw;
	line-height: 1.3em;
}
#sorting-tree-popup > div {
	padding: 1.2vw 0vw 1.8vw 0vw;
	text-align: center;
	height: 100%;
}
#sorting-tree-popup > div#close-sorting-tree-popup-button {
	position: absolute;
	top: 1.5vw;
	right: 1.5vw;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 25 24'%3E%3Cpath fill='%23ffffff' d='M 6.34375 2.28125 L 2.28125 6.34375 L 17.65625 21.71875 L 21.71875 17.65625 L 6.34375 2.28125 z M 2.28125 17.65625 L 6.34375 21.71875 L 21.71875 6.34375 L 17.65625 2.28125 L 2.28125 17.65625 z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90% 90%;
	background-origin: content-box;
	border-radius: 100vw;
	border: 0.2vw solid var(--white);
	width: 2vw;
	height: 2vw;
	padding: 0;
	background-color: #00000030;
	transform-origin: center center;
}
#sorting-tree-popup > div#close-sorting-tree-popup-button:hover {
	background-color: #00000050;
	transform: scale(1.05);
}
#sorting-tree-container {
	margin-top: 1vw;
	width: 100%;
	height: 80%;
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}
#sorting-tree-container .tree-pass {
	width: calc(100% - 1vw * 2);
	height: fit-content;
	padding: 0.7vw 1vw 1vw 1vw;
	position: relative;
	padding-top: 1.7vw;
	counter-reset: treerunc 0;
}
#sorting-tree-container {
	counter-set: tree-passes -2;
}
#sorting-tree-container .tree-pass::before {
	counter-increment: tree-passes;
	content: "Pass " counter(tree-passes);
	position: absolute;
	top: 0.55vw;
	left: 1vw;
	font-weight: bold;
	display: block;
	font-size: 1.05em;
	color: var(--black);
	z-index: 10010;
	background-color: #b9b9b9aa;
	border-radius: 3px;
	padding: 1px 3px;
}
#sorting-tree-container .tree-pass:last-child {
	padding-bottom: 2vw;
}
#sorting-tree-container .tree-pass:not(:first-child)::before {
	content: "Pass " counter(tree-passes);
}
#sorting-tree-container .tree-pass:first-child::before {
	content: "Unsorted File";
}
#sorting-tree-container .tree-pass:nth-child(even) {
	background-color: #00000018;
}
#sorting-tree-container .tree-pass:nth-child(odd) {
	background-color: #00000010;
}
#sorting-tree-container .tree-block {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 3.5vw;
	height: 3.5vw;
	border: var(--border-thickness) solid var(--black);
	margin: 0.3vw 0.3vw;
	background-color: var(--gray-t2);
	position: relative;
}
#sorting-tree-container .tree-pass .tree-run::before {
	content: "R" counter(treerunc);
	color: var(--black);
	position: absolute;
	top: 0.2vw;
	left: 0.2vw;
	border-radius: 0.2vw;
	z-index: 101;
	font-size: 0.7em;
	font-weight: bold;
	background-color: #b8b8b8db;
	padding: 0.05vw 0.15vw;
	display: block;
	text-align: right;
}
#sorting-tree-container .tree-pass .tree-run {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	border: var(--border-thickness) dashed var(--black);
	padding: 0.1vw 0.1vw;
	margin: 0.7vw 0.7vw 0 0.7vw;
	position: relative;
	counter-increment: treerunc;
}
#sorting-tree-container .tree-pass:last-child .tree-run,
#sorting-tree-container .tree-pass:first-child .tree-run {
	border: var(--border-thickness) dashed #00000000;
}
#sorting-tree-container .tree-pass:last-child .tree-run::before,
#sorting-tree-container .tree-pass:first-child .tree-run::before {
	display: none;
}
#sorting-tree-container .tree-record.empty {
	opacity: 0.2;
	background-color: var(--black);
}
#sorting-tree-container .tree-record {
	border: var(--border-thickness) solid var(--black);
	height: 100%;
	flex: 1;
	margin: calc(-1 * var(--border-thickness) / 2);
	position: relative;
	z-index: 12;
}
/* set scroll bar width */
#sorting-tree-container::-webkit-scrollbar {
	width: calc(var(--scrollbar-width) * 0.9);
	z-index: 99999;
}
/* Track */
#sorting-tree-container::-webkit-scrollbar-track {
	background: var(--gray-t1);
}
/* Handle */
#sorting-tree-container::-webkit-scrollbar-thumb {
	background: var(--gray-b1);
}
/* Handle on hover */
#sorting-tree-container::-webkit-scrollbar-thumb:hover {
	background: var(--gray-b2);
}
/* ------------------------------- media queries -------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1401px) {
	#algorithm-selector-alternate {
		display: none;
	}
	#animation-controls-container .zoom-note {
		display: none;
	}
}
@media screen and (max-width: 1400px) {
	#collapse-arrow {
		visibility: hidden;
		user-select: none;
		pointer-events: none;
	}
	#algorithm-section {
		width: 0px;
	}
}