/* ws.css
Josh Reed 2020

Primary workspace CSS classes that are more or less unique to the workspace.
*/

/* #region ######################- General Classes -###################### */

/* #region GLOBAL VARS */
:root {
	--trueblack: #000000;
	--nearblack: #101010;
	--black: #1d1d1d;
	--darkest: #2d2d2d;
	--darker: #323232;
	--dark: #3b3b3b;
	--dark-grey: #4b4b4b;
	--mid-grey: #626262;
	--grey: #7e8184;
	--light-grey: #afafaf;
	--lighter-grey: #c9c9c9;
	--orange: #faae1b;
	--white: #ffffff;
	--blue: #0e7bbf;
	--lblue: #7695a8;
	--red: #ff0000;
	--rust: #b7410e;
	--purple: #b700ff;
	--yellow: #ffff00;
	--green: #006400;
	--pale-green: #60b870;
	--transparent: #00000000;
	--pale-red: #b04040;
	--grey-red: #503030;
	--dark-red: #800000;
	--filter-svg-white: brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(17%) hue-rotate(350deg)
		brightness(104%) contrast(100%);
	--filter-svg-orange: brightness(0) saturate(100%) invert(66%) sepia(88%) saturate(737%) hue-rotate(346deg)
		brightness(102%) contrast(96%);
}

img[src*=".png"] {
	--filter-svg-white: hue-rotate(0deg);
	--filter-svg-orange: hue-rotate(0deg);
}

/* #endregion */

/* #region General styling */
/* #region --- Colors --- */
.cbg-trueblack {
	background-color: #000000 !important;
}

.cbg-black {
	background-color: #1d1d1d !important;
}

.cbg-darkest {
	background-color: #2d2d2d !important;
}

.cbg-darker {
	background-color: #323232 !important;
}

.cbg-dark {
	background-color: #3b3b3b !important;
}

.cbg-dark-grey {
	background-color: #4b4b4b !important;
}

.cbg-mid-grey {
	background-color: #626262 !important;
}

.cbg-grey {
	background-color: #7e8184 !important;
}

.cbg-light-grey {
	background-color: #afafaf !important;
}

.cbg-lighter-grey {
	background-color: #c9c9c9 !important;
}

.cbg-orange {
	background-color: #faae1b !important;
}

.cbg-white {
	background-color: #ffffff !important;
}

.cbg-blue {
	background-color: #0e7bbf !important;
}

.cbg-lblue {
	background-color: #7695a8 !important;
}

.cbg-red {
	background-color: #ff0000 !important;
}

.cbg-rust {
	background-color: #b7410e !important;
}

.cbg-purple {
	background-color: #b700ff !important;
}

.cbg-yellow {
	background-color: #ffff00 !important;
}

.cbg-green {
	background-color: #006400 !important;
}

.cbg-pale-red {
	background-color: var(--pale-red) !important;
}

.cbg-dark-red {
	background-color: var(--dark-red) !important;
}

.cbg-grey-red {
	background-color: var(--grey-red) !important;
}

.cbg-grad-dn-dark-grey {
	background-image: linear-gradient(to bottom, #4b4b4b00, #4b4b4bff);
}

.cbg-grad-up-darkest {
	background-image: linear-gradient(to top, #2d2d2d00, #2d2d2dff);
}

.cb-black {
	border-color: #1d1d1d !important;
}

/* !important is needed so that border-color overrides the border: 1px etc definition. */
.cb-darkest {
	border-color: #2d2d2d !important;
}

.cb-darker {
	border-color: #323232 !important;
}

.cb-dark {
	border-color: #3b3b3b !important;
}

.cb-dark-grey {
	border-color: #4b4b4b !important;
}

.cb-grey {
	border-color: #7e8184 !important;
}

.cb-orange {
	border-color: #faae1b !important;
}

.cb-white {
	border-color: #ffffff !important;
}

.cb-blue {
	border-color: #0e7bbf !important;
}

.cb-transparent {
	border-color: transparent !important;
}

.ct-black {
	color: #1d1d1d;
}

.ct-darkest {
	color: #2d2d2d;
}

.ct-darker {
	color: #323232;
}

.ct-dark {
	color: #3b3b3b;
}

.ct-grey {
	color: #7e8184;
}

.ct-orange {
	color: #faae1b;
}

.ct-white {
	color: #ffffff;
}

.ct-blue {
	color: #0e7bbf;
}

.ct-yellow {
	color: #ffff00;
}

.ct-red {
	color: #ff0000;
}

.ct-purple {
	color: #b700ff;
}

.ct-green {
	color: #006400;
}

.ct-light-grey {
	color: #afafaf;
}

.ct-lighter-grey {
	color: #c9c9c9;
}

.ct-pale-red {
	color: var(--pale-red);
}

.ct-pale-green {
	color: var(--pale-green);
}

.glow-dim-orange-small {
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b80;
}

.glow-orange-small {
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b;
}

.glow-orange {
	box-shadow: 0px 0px 1vw 0.1vw #faae1b !important;
}

/* #endregion */

/* #region --- Hover Behaviors --- */

.hover-ct-white:hover {
	color: #ffffff;
}

.hover-cb-white:hover {
	border-color: #ffffff !important;
}

.hover-cb-grey:hover {
	border-color: #7e8184 !important;
}

.hover-cb-black:hover {
	border-color: #1d1d1d !important;
}

.hover-cb-orange:hover {
	border-color: #faae1b !important;
}

.hover-cbg-darkred:hover {
	background-color: #800000 !important;
}

.hover-cbg-light-grey:hover {
	background-color: #afafaf !important;
}

.hover-cbg-dark:hover {
	background-color: #3b3b3b !important;
}

.hover-cbg-dark-grey:hover {
	background-color: #4b4b4b !important;
}

.hover-cbg-grey:hover {
	background-color: #7e8184 !important;
}

.hover-cbg-highlight:hover {
	background-color: #ffffff18 !important;
}

.hover-glow-orange:hover {
	box-shadow: 0px 0px 1vw 0.1vw #faae1b;
}

.hover-glowconst-orange-small {
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b80;
}

.hover-glowconst-orange-small:hover {
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b;
}

.hover-glowconst-orange-small:disabled {
	opacity: 0.8;
	cursor: not-allowed;
	box-shadow: 0px 0px 0.1vw 0.01vw #faae1b80;
}

.hover-glowconst-white {
	box-shadow: 0px 0px 0.5vw 0.1vw #ffffff80;
}

.hover-glowconst-white:hover {
	box-shadow: 0px 0px 0.5vw 0.1vw #ffffff;
}

.selected-glow-orange:focus-visible,
.selected-glow-orange:focus {
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b;
	outline-width: 0px !important;
}

.hover-tm-underline:hover {
	text-decoration: underline;
}

/* #endregion */

/* #region --- Dropover Behaviors --- */
/* These are used by drag handling to show when something can be dropped */
.dropover-cb-blue {
	border-color: #0e7bbf !important;
}

.dropover-cb-orange {
	border-color: #faae1b !important;
}

.dropover-cbg-orange {
	background-color: #faae1b !important;
}

.dropover-ct-blue {
	color: #0e7bbf;
}

.dropover-ct-orange {
	color: #faae1b;
}

.dropover-bs-blue {
	box-shadow: 0vw 0vw 0vw 0.5vw #0e7bbf;
}

.dropover-tm-underline {
	text-decoration: underline;
}

.th-orange-thin {
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b !important;
}

/* #endregion */

/* #endregion */

/* #region Base tag styling */
a {
	text-decoration: underline;
	color: var(--orange);
	cursor: pointer;
}

/* #endregion

/* #region General utility */

/* --- Tooltips --- */
.tooltip-lux-global {
	background-color: #2d2d2dd0 !important;
	border: 1px solid #faae1b80 !important;
	color: white !important;
	border-radius: 4px !important;
	max-width: 20vw;
	box-shadow: 4px 4px 10px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 10px 0px #faae1b80;
}

/* #region --- Buttons --- */

/* Button properties */

btn {
	overflow: hidden;
	cursor: pointer;

	/*org-noselect*/
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently

	/*org-center*/
	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	position: relative;

	/*color-variables*/
	--glowcolor: #faae1b80;
	--glowcolorhover: var(--orange);
	--bgcolor: var(--orange);
	--textcolor: var(--white);
	--hoverhighlight: #ffffff08;
	--icon-color: var(--filter-svg-white);

	background-color: var(--bgcolor);
	color: var(--textcolor);

	/*font settings*/
	font-family: "BrandonGrotesqueWeb-Regular", sans-serif;
	font-weight: normal;
}

btn > img[src*=".svg"] {
	filter: var(--icon-color);
}

btn:hover::before {
	content: "";
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: var(--hoverhighlight);
	pointer-events: none;
}

btn.disabled {
	opacity: 0.4 !important;
	cursor: default !important;
	pointer-events: none;
}

btn.minimal {
	background-color: unset;
	--hoverhighlight: transparent;
}

btn.rectangle {
	border-radius: 5px;
}

btn.rounded {
	border-radius: 9999px;
}

btn.glowing {
	--glow-radius: 0px 0px 0.5vw 0.1vh;
	box-shadow: var(--glow-radius) var(--glowcolor);
}

btn.glowing:hover {
	--glow-radius: 0px 0px 0.5vw 0.15vh;
	box-shadow: var(--glow-radius) var(--glowcolorhover);
}

btn.grey {
	--bgcolor: var(--dark-grey);
	--textcolor: var(--white);
	--glowcolor: #ffffff80;
	--glowcolorhover: var(--white);
}

btn.light-grey {
	--bgcolor: var(--grey);
	--textcolor: var(--white);
	--glowcolor: #ffffff80;
	--glowcolorhover: var(--white);
}

btn.dark {
	--bgcolor: var(--dark);
	--textcolor: var(--white);
	--icon-color: var(--filter-svg-orange);
}

btn.darker {
	--bgcolor: var(--darker);
	--textcolor: var(--lighter-grey);
	--icon-color: var(--filter-svg-orange);
}

btn.darkest {
	--bgcolor: var(--darkest);
	--textcolor: var(--orange);
	--icon-color: var(--filter-svg-orange);
}

btn.black {
	--bgcolor: var(--black);
	--textcolor: var(--grey);
	--icon-color: var(--filter-svg-orange);
}

/* Btn sizing */
btn.big {
	padding: 1vh 2vw;
	min-width: 8vw;
	font-size: 1.75vw;
	letter-spacing: 2px;
}

btn.medium {
	padding: 0.5vh 2vw;
	font-size: 1.25vw;
	letter-spacing: 1.5px;
}

btn.thin {
	padding: 0.3vh 0.5vw;
	font-size: 1vw;
	letter-spacing: 1px;
}

.btn-disabled {
	opacity: 0.4 !important;
	cursor: default !important;
	pointer-events: none;

	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently */
}

/* The main buttons (usually orange or blue) that we see about the page */
.btn-main-large {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	height: 3vw;
	font-size: 1.5vw;
	border-radius: 1.5vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
	cursor: pointer;
	overflow: hidden;
}

.btn-main-large-icon {
	font-size: 3vw;
	font-weight: 500;
	padding-right: 0.5vw;
}

/* A new, sleek more rectangular button */
.btn-rectangle {
	padding: 0.25vw;
	border-radius: 5px;
	cursor: pointer;
}

/* A new, sleek more rectangular button */
/* Defaults to orange with a white glow */
.btn-rectangle-glow {
	padding: 0.25vw;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;

	/*org-noselect*/
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently

	/*org-center*/
	display: flex;
	align-items: center;
	justify-content: center;

	/* cbg-orange */
	background-color: var(--orange);

	/*hover-glow-const*/
	box-shadow: 0px 0px 0.5vw 0.1vw #ffffff80;

	/*ct-white*/
	color: var(--white);
}

.btn-rectangle-glow:hover {
	box-shadow: 0px 0px 0.5vw 0.1vw var(--white);
}

.btn-rectangle-glow.dark {
	/* cbg-darker */
	background-color: var(--darker);
	color: var(--lighter-grey);

	/* hover-glowconst-orange */
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b80;
}

.btn-rectangle-glow.dark:hover {
	box-shadow: 0px 0px 0.5vw 0.1vw var(--orange);
}

.btn-rectangle-glow.darkest {
	/* cbg-darker */
	background-color: var(--darkest);
	color: var(--light-grey);

	/* hover-glowconst-orange */
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b80;
}

.btn-rectangle-glow.darkest:hover {
	box-shadow: 0px 0px 0.5vw 0.1vw var(--orange);
}

.btn-rectangle-glow.black {
	/* cbg-darker */
	background-color: var(--black);
	color: var(--grey);

	/* hover-glowconst-orange */
	box-shadow: 0px 0px 0.5vw 0.1vw #faae1b80;
}

.btn-rectangle-glow.black:hover {
	box-shadow: 0px 0px 0.5vw 0.1vw var(--orange);
}

.btn-close-region {
	right: 0;
	margin-right: 0.75vw;
	width: 1.75vw;
	height: 1.75vw;
	position: absolute;
	border-radius: 4px;
	overflow: hidden;
	background-color: #00000000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-close-region:hover {
	background-color: #ffffff10;
}

.btn-close-region::after {
	font-size: 3vw;
	font-family: none;
	color: var(--light-grey);
	content: "\00d7";
}

/* A standard style button which will scale to fit the font given to it. Background and text color should be provided. */
.btn-main-autofit {
	border-radius: 0.5em;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	overflow: hidden;
	/* T R B L */
	padding: 0.1em 0.7em 0.1em 0.7em;
	border: 1px solid transparent;
}

.btn-main-autofit.for-link {
	text-decoration: none;
	color: white;
}

/* A main button for regions that scale better vertically */
.btn-main-large-vert {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	height: 5.5vh;
	font-size: 2.75vh;
	border-radius: 2.75vh;
	padding-left: 2.75vh;
	padding-right: 2.75vh;
	cursor: pointer;
	overflow: hidden;
}

/* A standard style button. Just as large as needed for text, similar in size to btn-main, intended to have text and bg colored. */
.btn-std {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3vw;
	font-size: 1.5vw;
	border-radius: 1.5vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
	cursor: pointer;
}

/* A slightly smaller form button, but still full and meant to be colored like btn-std and main-large */
.btn-thin {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2vw;
	font-size: 1.5vw;
	border-radius: 1vw;
	padding-left: 1vw;
	padding-right: 1vw;
	cursor: pointer;
	overflow: hidden;
}

/* Simply a circle of defined width and height. Intended to be colored and have a imgfit plus_white.svg inside.*/
.btn-circle-plus {
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-highlight {
	position: relative;
}

.btn-highlight:hover::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #ffffff10;
	pointer-events: none;
}

.btn-highlight-dim {
	position: relative;
}

.btn-highlight-dim:hover::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #ffffff08;
	pointer-events: none;
}

/* A minimalistic button for a toolbar where hovering your mouse over it will highlight it 
 * Not meant to have its own color background
 */
.btn-simple {
	cursor: pointer;
	border-radius: 20%;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently */
}

.btn-simple:hover {
	background-color: #ffffff18;
}

/* A minimalistic button class that has no styling besides cursor behavior */
.btn-minimal {
	cursor: pointer;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently */
}

/* A button-minimal which should indicate it is a button but also is not ready to be clicked */
.btn-minimal-noclick {
	cursor: no-drop;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently */
}

/* A button for dragging left-right */
.btn-draglr {
	cursor: ew-resize;
}

/* A button for dragging up-down */
.btn-dragud {
	cursor: ns-resize;
}

.btn-help {
	width: 3vw;
	height: 3vw;
	border-radius: 50%;
	border: 2px solid;
	cursor: pointer;
}

.btn-help-inline-small {
	width: 2vh;
	height: 2vh;
	border-radius: 50%;
	border: 1px solid;
	cursor: pointer;
	color: var(--orange);
}

.btn-help-small {
	width: 1.5vw;
	height: 1.5vw;
	border-radius: 50%;
	border: 1px solid;
	cursor: pointer;
}

.btn-tripledot-cont {
	width: 2.5vw;
	height: 2.5vw;
	border-radius: 50%;
	border: 1px solid transparent;
}

.btn-tripledot-dot {
	width: 0.5vw;
	height: 0.5vw;
	border-radius: 50%;
}

/* #endregion */

/* #region --- Scroll handling --- */

/* Will simply hide the scrollbar while forcing scroll behavior */
.scroll-custom-hidden {
	overflow-y: scroll;
}

.scroll-custom-hidden::-webkit-scrollbar {
	display: none;
}

/* 	Apply the standard custom scrollbar to this region.
	Don't forget this region must have dimensions defined along intended scroll directions!!! */
.scroll-custom-reg {
	overflow-y: auto;
}

.scroll-custom-reg::-webkit-scrollbar-thumb {
	width: 0.25vw;
	background: #7e8184;
	border-radius: 2.5vw;
	border: 0.125vw solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	-webkit-border-radius: 0.3vw;
}

.scroll-custom-reg::-webkit-scrollbar {
	width: 0.5vw;
}

.scroll-custom-reg::-webkit-scrollbar-corner {
	background: #00000000;
}

.scroll-custom-reg::-webkit-scrollbar-track {
	background: #00000000;
}

/* Apply the standard custom scrollbar to this region. */
.scrollx-custom-reg {
	overflow-x: auto;
}

.scrollx-custom-reg::-webkit-scrollbar-thumb {
	width: 0.25vw;
	background: #7e8184;
	border-radius: 2.5vw;
	border: 0.125vw solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	-webkit-border-radius: 0.3vw;
}

.scrollx-custom-reg::-webkit-scrollbar {
	height: 0.75vh;
}

.scrollx-custom-reg::-webkit-scrollbar-corner {
	background: #00000000;
}

/* #endregion */

/* #region --- Collapsable containers --- */

.collapsible-container {
	--container-height: 12vh;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;

	max-height: var(--container-height);
	transition: max-height 0.3s linear;
}

.collapsible-container.collapsed {
	max-height: 0;
}

.collapse-arrow {
	transition: transform 0.3s ease-in-out;
}

.collapse-arrow.expanded {
	transform: rotate(90deg);
}

/* #endregion */

/* #region --- Progress Bars --- */

.progress-bar {
	position: relative;
	justify-items: left;
	overflow: hidden;
}

.progress-bar .progress-text-over {
	position: absolute;
	display: flex;

	width: 100%;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.progress-bar .progress-bar-fill {
	transition: width 1s ease-in-out;
	width: 0%;
	height: 100%;
}

/* #endregion */

/* #region --- DROPZONE --- */

.dz-custom-lux {
	width: 100%;
	min-height: unset !important;
	background-color: unset !important;
	border-width: 2px !important;
	border-style: dashed !important;
	border-color: var(--orange) !important;
	border-radius: 10px !important;
	transition: all 0.15s ease;
	opacity: 0.7;
	color: var(--orange);
}

.dz-custom-lux:hover {
	opacity: 1;
}

/* #endregion */

/* #region --- ICONS --- */

img.svg-white {
	filter: invert(100%) sepia(95%) saturate(17%) hue-rotate(350deg) brightness(104%) contrast(100%);
}

img.svg-orange {
	filter: invert(66%) sepia(88%) saturate(737%) hue-rotate(346deg) brightness(102%) contrast(96%);
}

/* #endregion */

/* --- Ribbons --- */
.ribbon-list-entry-left {
	/* A ribbon that sits on the left side of a list entry, total of 0.4vw wide */
	height: 100%;
	width: 0.4vw;
	margin-right: 0.6vw;
	border-radius: 0vw 0.4vw 0.4vw 0vw;
}

/* --- Standard Inputs --- */
.input-text {
	height: 3vw;
	line-height: 2.5vw;
	font-size: 1.5vw;
	border-radius: 0.5vw;
	border: 1px solid;
	align-items: center;
	font-weight: 400;
	letter-spacing: 1px;
	box-shadow: none;
	background-image: none;
}

/* smaller version of input-text */
.input-text-small {
	height: 2vw;
	line-height: 1.5vw;
	font-size: 1.1vw;
	border-radius: 0.4vw;
	border: 1px solid;
	display: flex;
	align-items: center;
	font-weight: 400;
	letter-spacing: 0.5px;
	box-shadow: none;
	background-image: none;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
}


/* Input text designed to work with f-____-title. Only this class (not f-__-title) should be given to <input> */
.input-text-f-title {
	height: 1.5vw;
	line-height: 1vw;
	font-size: 1vw;
	border-radius: 0.2vw;
	border: 1px solid;
	display: flex;
	align-items: center;
	box-shadow: none;
	background-image: none;
	padding-left: 0.2vw;
	padding-right: 0.2vw;
}

/* Input text designed to work with f-____-para. Only this class (not f-__-title) should be given to <input> */
.input-text-f-para {
	height: 1.1vw;
	line-height: 0.8vw;
	font-size: 0.8vw;
	border-radius: 0.2vw;
	border: 1px solid;
	display: flex;
	align-items: center;
	box-shadow: none;
	background-image: none;
	padding-left: 0.2vw;
	padding-right: 0.2vw;
}

/*  This is a text input that has no border except for the bottom line, which the text is drawn on top of
	Will fit it's container with width=100%. Should probably be vertically centered in a row that's >3vw tall */
.input-text-bottomline {
	font-size: 2vw;
	line-height: 2.5vw;
	letter-spacing: 1px;
	width: 100%;
	color: #fff;
	outline: none !important;
	background: transparent !important;
	border-top: transparent !important;
	border-left: transparent !important;
	border-right: transparent !important;
	border-bottom: 1px solid;
}

.input-text-bottomline:focus {
	border-bottom: 2px solid;
}

.input-checkbox {
	width: 1vw;
	height: 1vw;
	font-size: 0.65vw;
	border: 1px solid var(--lighter-grey);
	background-color: var(--black);
	border-radius: 4px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	color: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.input-checkbox:checked {
	background-color: var(--darkest);
	border-color: var(--orange);
	box-shadow: inset 0px 0px 6px 0px var(--orange);
}

.input-checkbox:checked::before {
	content: "\2713";
	display: block;
	color: var(--orange);
}

.input-checkbox.medium {
	width: 1.5vw;
	height: 1.5vw;
	font-size: 0.8vw;
}

input[type="range"] {
	-webkit-appearance: none;
	/* Hides the slider so that custom slider can be made */
	background: transparent;
	/* Otherwise white in Chrome */
}

input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	width: 20px;
	height: 6px;
	border-radius: 3px;
	background: var(--grey);
	box-shadow: 0px 0px 2px 1px var(--black);
}

input[type="range"]::-webkit-slider-thumb {
	box-shadow: 0px 0px 3px 2px #faae1b80;
	height: 10px;
	width: 10px;
	margin-top: -2px;
	border-radius: 5px;
	background: #faae1b;
	-webkit-appearance: none;
}

input[type=number].no-spinner::-webkit-inner-spin-button, 
input[type=number].no-spinner::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
}

/* A cboxlist is a special form of input with a series of radio buttons that may be checked or unchecked. Since this is controlled
in the code, any sequence of them may be checked or unchecked. This sort of list is intended to pop up in overlay fashion much like
a regular <select> object. A template html object for this list is shown below

<div class='input-text-small cbg-darker cb-dark ct-white  btn-minimal'>
	Title (The thing you click on)
</div>
<div class='input-cboxlist-container org-col-left cb-dark cbg-darker ct-white'>
	<div class='input-cboxlist-entry org-row-left'>
		<div class='input-cboxlist-outer'>
			<div class='input-cboxlist-circle cb-grey'>
				<div class='input-cboxlist-check cbg-orange'></div>
			</div>
		</div>
		<div class='input-cboxlist-name f-brandon-para'> Entry Name </div>
	</div>
</div>


*/
.input-cboxlist-container {
	border-radius: 0.5vw;
	border: 1px solid;
	position: fixed;
	padding-left: 0.5vw;
	padding-right: 1vw;
	padding-bottom: 0.5vw;
}

.input-cboxlist-entry {
	cursor: pointer;
	margin-top: 0.5vw;
}

.input-cboxlist-outer {
	width: 2vw;
	height: 2vw;
}

/* This is super complicated because of the truly surprising difficulties involved in making concentric circles in css */
.input-cboxlist-circle {
	border: 1px solid transparent;
	width: 100%;
	height: 0px;
	padding-top: 25%;
	padding-bottom: 75%;
	margin: auto;
	border-radius: 50%;
}

.input-cboxlist-check {
	width: 50%;
	padding-bottom: 50%;
	border-radius: 50%;
	position: relative;
	top: 0px;
	left: 25%;
}

.input-cboxlist-name {
	margin-left: 1vw;
}

.input-select {
	height: 3vw;
	line-height: 2vw;
	font-size: 1.25vw;

	border-radius: 0.5vw;
	border: 1px solid;

	align-items: center;

	box-shadow: none;
	background-image: none;
}

.input-slider1-track {
	/* Goes in outer div */
	width: 3.5vw;
	height: 1.2vw;
	border-radius: 0.6vw;
}

.input-slider1-slider {
	/* Goes in inner div */
	width: 1.75vw;
	height: 1.75vw;
	border-radius: 50%;
}

/* ### Example input-doubleslider Object ###
<div class='input-doubleslider-track cb-dark cbg-darker org-row-flung' style='width: 100%'>
	<div class='input-doubleslider-slider-point'>
		<div class='input-doubleslider-slider cbg-white btn-minimal'></div>
	</div>
	<div class='input-doubleslider-band cbg-orange'></div>
	<div class='input-doubleslider-slider-point'>
		<div class='input-doubleslider-slider cbg-white btn-minimal'></div>
	</div>
</div>
*/

.input-doubleslider-track {
	height: 1vw;
	margin-top: 0.5vw;
	margin-bottom: 0.5vw;
	border-radius: 0.5vw;
	border: 1px solid;
}

.input-doubleslider-slider {
	width: 1.5vw;
	height: 1.5vw;
	border-radius: 50%;
	position: relative;
	top: -0.25vw;
	left: -0.25vw;
}

.input-doubleslider-band {
	height: 100%;
	flex-grow: 1;
}

.input-doubleslider-slider-point {
	height: 1vw;
	width: 1vw;
}

/* A max sized tweaked text area class. Borrowed from www.theroot.tech/static/content/css/general.css */
.input-textarea-full {
	width: 100%;
	height: 100%;
	overflow: auto;
	resize: none;
	outline: none;
	border: 1px solid;
	border-radius: 0.5vw;
}

/* A textarea which acts more like a multi-line input with NO borders. Takes the space of its parent. Borrowed from www.theroot.tech/static/content/css/general.css */
.input-textarea-input {
	overflow: auto;
	resize: none;
	outline: none;
	border: none;
	overflow-y: hidden;
}

/* A text area which approximates the behavior of a div. NOT EDITABLE!. Borrowed from www.theroot.tech/static/content/css/general.css */
.input-textarea-div {
	width: 100%;
	height: 100%;
	overflow: hidden;
	resize: none;
	outline: none;
	border: none;
}

/* Strip an input of all borders, background, and outline. */
.input-stripped {
	border-bottom: transparent !important;
	border-right: transparent !important;
	border-left: transparent !important;
	background: transparent !important;
	border-top: transparent !important;
	outline: none !important;
}

/* Styling which shall cause an input to be treated as a 'dummy'. Dummy inputs shall neither be visible
or interfere with page flow, but also not be display: none so that Chrome will still pick them up
for autofill. */
.input-dummy {
	width: 0;
	height: 0;
	/* Note that visibility: hidden doesn't work here */
	position: absolute;
	left: -9999;
	top: 0;
}

/* --- Indicators (like progress bars) --- */

/* A progress bar that must have its width set. Should be given 'org-row-left' class. Also need to set colors */
.progressbar1-outer {
	height: 2vw;
	border-radius: 1vw;
	border: 1px solid;
}

/* Set the progress bar progress by setting width as a percentage from 0 to 100 */
.progressbar1-inner {
	width: 0%;
	height: 2vw;
	border-radius: 1vw;
	transition: width 0.5s ease;
}

/* #endregion */

/* #region ######################- Region: Home -###################### */

/* #region ---- TOP BAR ---- */
.top-header-bar {
	border-bottom: 1px solid;
}

.search-bar {
	height: 3vw;
	border-radius: 1.5vw;
	border: 1px solid;
}

.search-bar-input {
	align-items: center;
	font-weight: 400;
	letter-spacing: 1px;
	font-size: 90%;
	height: 100%;
	border: none;
	box-shadow: none;
	background-image: none;
	background-color: transparent;
}

.home-tile {
	margin: 0.75vw;
	border: 1px solid;
	overflow: hidden;
	border-radius: 0.5vw;
	cursor: pointer;
}

.home-tile * {
	pointer-events: none;
}

.filepath-foldername {
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	border-radius: 1vw;
	height: 100%;
	border: 1px solid transparent;
	white-space: nowrap;
}

/* #endregion */

/* #region ---- SCENES ---- */
/* Intended to go three-abreast in a 69vw wide div box */
.project-tile {
	width: 21.2vw;
	height: 21.2vw;
}

.project-tile-thumbnail {
	height: 15vw;
	width: 100%;
	border-bottom: 1px solid;
	overflow: none;
}

.project-tile-base {
	width: 100%;
	flex-grow: 1;
	overflow: none;
}

/* Intended to go three-abreast in a 69vw wide div box */
.folder-tile {
	width: 21.2vw;
	height: 5vw;
}

.folder-tile-icon {
	width: 3vw;
	height: 3vw;
	margin: 1vw;
}

.tile-selected {
	background-color: #3b3b3b;
	border-color: #7e8184;
	box-shadow: 0px 0px 1vw 0.1vw #faae1b;
}

.tile-unselected {
	background-color: #3b3b3b;
	border-color: #7e8184;
}

.tile-deleted {
	background-color: var(--dark-red) !important;
	border-color: var(--pale-red) !important;
}

.tile-deleted.tile-selected {
	box-shadow: 0px 0px 1vw 0.1vw #e00000 !important;
}

.tile-deleted.hover-cb-white:hover {
	border-color: #ff3030 !important;
}

/* #endregion */

/* #region ---- MEDIA ---- */
.media-tile {
	position: relative;
	width: 12vw;
	height: 12vw;
}

.media-tile-thumbnail {
	width: 100%;
	height: 8.5vw;
	max-height: 8.5vw;
	min-height: 8.5vw;
}

.media-tile-thumbnail-img {
	max-height: 75%;
	max-width: 85%;
}

.media-tile-base {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	padding: 5px 1vmax;
}

.media-tile-base > .f-brandon {
	width: 100%;
}

/* #endregion */

/* #region ---- PROJECTORS ---- */
.projector-tile {
	margin: 0.75vw;
	border: 1px transparent;
	cursor: pointer;
	border-radius: 0.5vw;
	overflow: hidden;
	width: 12vw;
	height: 12vw;
}

.projector-tile-thumbnail {
	width: 100%;
	height: 8.5vw;
	max-height: 8.5vw;
	min-height: 8.5vw;
}

.projector-tile-base {
	width: 100%;
}

/* Special size modifiers :) */
.projector-tile.small {
	margin: 0.5vw;
	width: 8vw;
	height: 9vw;
}

.small .projector-tile-thumbnail {
	width: 100%;
	height: unset;
	max-height: unset;
	min-height: unset;
}

.projector-tile:hover .h-underline {
	text-decoration: underline;
}

/* #endregion */

/* #region ---- PROJECTOR SETTINGS ---- */
#or_projector_settings {
	background-color: var(--dark);
	color: white;
	border-radius: 8px;
	overflow: hidden;
}

#or_projector_settings .proj-settings-tab {
	position: relative;
	flex-grow: 1;
	padding: 1.5vh 1.5vw;
	box-sizing: border-box;
	width: 100%;
	min-height: 100%;
}

#or_projector_settings .menuoption {
	height: 3vw;
	margin-bottom: 0.5vw;
	width: 100%;
}

#or_projector_settings .menuoption.selected > .ribbon-list-entry-left {
	background-color: var(--orange);
}

#or_projector_settings .btntext {
	transition: 0.2s padding ease-out;
	padding-left: 2vw;
}

#or_projector_settings .menuoption:hover .btntext {
	padding-left: 3vw;
}

/* #region Overview */
.settings-overview-tile {
	padding: 1vw 9vw;
	margin-bottom: 1vw;
	width: 100%;
	box-sizing: border-box;
	border-radius: 0.75vw;
	border-bottom: 1px solid transparent;
	border-top: 1px solid transparent;
}

.settings-overview-panel-left {
	flex-grow: 1;
	height: 100%;
}

.settings-overview-panel-right {
	width: 10vw;
}

.settings-overview-proj-prev {
	width: 8vw;
	height: 6vw;
	border: 1px transparent;
	cursor: pointer;
	border-radius: 0.75vw;
	overflow: hidden;
}

.settings-overview-status-text {
	width: 100%;
	text-align: right;
}

.settings-overview-status-text-link {
	width: 100%;
	text-align: right;
	cursor: pointer;
}

.settings-overview-status-text-link:hover {
	text-decoration: underline;
}

/* #endregion */

/* #region Luxedo Radio */

#ops_setting_radio {
	flex-grow: 1;
	flex-shrink: 1;
	position: relative;
}

.luxradio-panel {
	background-color: var(--darkest);
	border-radius: 6px;
	padding: 1vh 1vw;
	margin-top: 1vw;
}

.luxradio-panel a {
	background-color: var(--black);
	color: var(--orange);
	border-radius: 3px;
	padding: 2px 4px;
	margin: 0 8px;
}

.luxradio-panel.radio-qr-code-container {
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
	min-height: 200px;
	height: 0;
}

.luxradio-panel .radio-qr-code {
	flex-grow: 1;
	flex-shrink: 1;
	aspect-ratio: 1;
	margin: 5px;
	border-radius: 3px;
	overflow: hidden;
}

.luxradio-panel .radio-qr-code > img {
	max-height: 100%;
	max-width: 100%;
}

.radio-qr-code-palette > btn {
	margin: 0.5vh 0.5vw;
	width: 1.5vw;
	height: 1.5vw;
}

.radio-qr-code-palette > btn.orange {
	--glowcolor: white;
	--glowcolorhover: white;
	background-color: var(--orange);
}

.radio-qr-code-palette > btn.true-black {
	--glowcolor: white;
	--glowcolorhover: white;
	background-color: black;
}

.radio-qr-code-palette > btn.white {
	--glowcolor: black;
	--glowcolorhover: black;
	background-color: white;
}

/* #endregion */

/* #endregion */

/* #region ---- LIGHTSHOWS ---- */

/* #region === Container === */

#or_lightshow {
	width: 70vw;
	max-height: 95vh;
	overflow: hidden;
	background-color: var(--dark-grey);
}

#or_lightshow .top-row {
	width: 100%;
	height: 35vh;
	position: relative;
}

/* #endregion */

/* #region === Preview === */

#or_lightshow .preview_container {
	position: relative;
	overflow: hidden;
	width: 65%;
	height: 100%;
	padding-right: 1vw;
	box-sizing: border-box;
}

#or_lightshow .preview_container .label {
	position: absolute;
	margin: 6px;
	pointer-events: none;
}

#or_lightshow .ls_preview {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: var(--darker);
}

#or_lightshow .ls_preview .ls_preview_vid {
	height: 100%;
	max-width: 100%;
	max-height: 100%;

	background-color: black;
}

#or_lightshow .preview_container .controls {
	position: absolute;
	bottom: 8px;
	padding-bottom: 10px;
}

#or_lightshow .preview_container .controls btn {
	margin: 0 4px;
}

#or_lightshow .preview_container .controls img {
	filter: var(--filter-svg-white);
}

/* #endregion */

/* #region === Scene Config === */
#or_lightshow .scene_configuration {
	position: relative;

	border-radius: 6px;
	overflow: hidden;

	padding: 1vh 1vw;
	box-sizing: border-box;

	background-color: var(--darker);
	width: 35%;
	height: 100%;
}

#or_lightshow .ls-scene-config-panel {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	flex-grow: 0;
}

#or_lightshow .ls-scene-config-panel > div {
	flex-shrink: 0;
	flex-grow: 0;
}

#or_lightshow .ls-scene-thumby {
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--black);
	min-width: 50%;
	flex-grow: 1 !important;
	flex-shrink: 1 !important;
}

#or_lightshow .ls-scene-thumby > img[src*=".svg"] {
	filter: var(--filter-svg-orange);
	padding: 3vh;
	box-sizing: border-box;
}

#or_lightshow .ls-scene-title {
	color: var(--orange);
	padding-top: 15px;
}

/* #endregion */

/* #region === Scene Controls === */
#or_lightshow .ls-scene-controls {
	position: relative;
	width: 100%;
	bottom: 0px;

	margin-top: 5vh;
}

#or_lightshow .ls-scene-controls .ls-scene-trim-input {
	display: flex;
	align-items: center;
	text-align: center;

	font-weight: 400;
	font-size: 1vw;
	letter-spacing: 0.5px;
	line-height: 1.5vw;

	height: 1.5vw;
	padding-left: 0.5vw;
	padding-right: 0.5vw;

	border-radius: 0.4vw;
	color: var(--orange);
	border: 1px solid var(--grey);
	box-shadow: none;
	background-image: none;
	background-color: var(--black);
}

#or_lightshow .ls-scene-controls .ls-scene-trim-input:focus {
	outline: none;
	border-color: var(--white);
	background-color: var(--darkest);
}

#or_lightshow input[type="checkbox"] {
	width: 1vw;
	height: 1vw;
	font-size: 0.55vw;
}

#or_lightshow input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
	text-align: center;
}

#or_lightshow .ls-scene-controls .ls-scene-delete {
	position: absolute;
	right: 0px;
	bottom: 0px;
}

/* #endregion */

/* #region === Sequence Editor === */
#or_lightshow .seq_container {
	position: relative;
	width: 100%;
	background-color: var(--darkest);
	border-radius: 6px;
	height: 25vh;
	overflow: hidden;
	padding: 1vh 0.5vw;
	box-sizing: border-box;
}

#or_lightshow .seq_container .seq_scroll {
	--scrollbar_size: 1vh;

	height: 100%;
	box-sizing: border-box;
	flex-grow: 1;

	margin-bottom: calc(-1 * var(--scrollbar_size));
	padding-bottom: 0.2vh;

	position: relative;
	overflow-y: hidden;
	overflow-x: scroll;
}

#or_lightshow .seq_container .seq_scroll::-webkit-scrollbar-thumb {
	background-color: #faae1bc0;
}

#or_lightshow .seq_container .seq_scroll::-webkit-scrollbar {
	height: var(--scrollbar_size);
}

.seq_container .scroll-fade {
	position: relative;
	z-index: 20;
	width: 0;
	height: 100%;
}

.seq_container .scroll-fade > div {
	position: absolute;
	width: 0;
	height: 100%;
	width: 20px;
}

.scroll-fade .scroll-fade-left {
	height: 100%;
	background-image: linear-gradient(to right, var(--darkest), transparent 100%);
}

.scroll-fade .scroll-fade-right {
	right: 0;
	height: 100%;
	background-image: linear-gradient(to left, var(--darkest), transparent 100%);
}

/* Button Add Blocks */
#or_lightshow .scene_sequence_add_buttons {
	position: relative;
	min-width: 150px;
	width: 5vw;

	height: 100%;

	flex-shrink: 0;
	flex-grow: 0;

	padding-left: 0.5vw;
	box-sizing: border-box;
}

#or_lightshow .scene_sequence_add_button {
	height: calc(50% - 0.5vh);
	width: 100%;

	background-color: var(--nearblack);
	border-radius: 8px;
}

#or_lightshow .scene_sequence_add_button img {
	filter: var(--filter-svg-orange);
}

/* #region Sequence Tiles */
#or_lightshow .seq_tiles {
	position: relative;
	height: 100%;
	min-width: 100%;
}

#or_lightshow .seq_tile {
	--width_mod: 1;
	position: relative;
	height: 100%;

	min-width: calc(200px * var(--width_mod));
	width: calc(100% * var(--width_mod));
	max-width: calc(500px * var(--width_mod));

	margin-right: 10px;
	border-radius: 5px;
	cursor: pointer;

	border: solid 0px var(--grey);
	background-color: #00000040;

	--film-strip-width: 16px;
	--film-strip-hole-color: var(--darkest);
}

/* Sequence block contents */
.seq_tile .seq_tile_thumbnail {
	opacity: 50%;
	max-width: 100%;
	max-height: calc(100% - calc(2 * var(--film-strip-width)));
}

.seq_tile .seq_tile_name {
	position: absolute;
	bottom: var(--film-strip-width);
	max-width: 70%;

	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;

	color: var(--orange);
}

#or_lightshow .seq_tile .seq_tile_thumbnail > img {
	width: 0%;
	flex-grow: 1;
}

#or_lightshow .seq_tile.repeats .seq_tile_thumbnail > img {
	object-fit: cover;
	object-position: center;
	min-height: 80%;

	padding: 0px 3px;
	box-sizing: border-box;
}

/* Hover behavior */
#or_lightshow .seq_tile:hover {
	border-color: var(--orange) !important;
	background-color: #00000080;
}

#or_lightshow .seq_tile:hover .seq_tile_thumbnail {
	opacity: 80%;
}

#or_lightshow .seq_tile.dragging {
	opacity: 50%;
	z-index: 101;
}

/* Selection behavior */
#or_lightshow .seq_tile.selected {
	border-color: var(--orange) !important;
	background-color: #00000080 !important;
	--film-strip-hole-color: var(--dark-grey);
}

#or_lightshow .seq_tile.selected .seq_tile_thumbnail {
	opacity: 100% !important;
}

#or_lightshow .seq_tile .playing_overlay {
	position: absolute;
	z-index: 10;

	width: 100%;
	height: 100%;

	background-color: rgba(0, 0, 0, 0.25);
}

#or_lightshow .seq_tile .playing_overlay > img {
	filter: var(--filter-svg-white);
}

/* #endregion */

/* #region Specific sequence blocks */

/* Scene */
#or_lightshow .seq_tile .duration_blip {
	position: absolute;
	border-radius: 4px;
	right: 0.5vw;
	bottom: calc(0.5vh + var(--film-strip-width));

	background-color: #00000080;
	color: var(--lighter-grey);
	padding: 4px 6px;
}

/* Delay */
#or_lightshow .seq_tile.seq_tile_delay {
	--width_mod: 0.75;

	background-color: #00000080 !important;
}

#or_lightshow .seq_tile.seq_tile_delay .seq_tile_thumbnail {
	opacity: 80% !important;
	padding: 5vh 0;
	box-sizing: border-box;
	position: relative;
}

#or_lightshow .seq_tile.seq_tile_delay:hover .seq_tile_thumbnail {
	opacity: 100% !important;
}

#or_lightshow .seq_tile.seq_tile_delay .seq_tile_thumbnail > img {
	width: 100%;
	filter: var(--filter-svg-orange);
}

/* #endregion */

/* #region Lightshow Sequence Block Universal Styling */
.seq_tile .seq_tile_film_strip {
	--film-hole-size: calc(var(--film-strip-width) / 2);

	width: 100%;
	height: var(--film-strip-width);
	position: relative;
	background-color: black;

	display: flex;
	flex-shrink: 0;
	flex-grow: 0;
	align-items: center;
	justify-content: center;
}

.seq_tile .seq_tile_film_strip_holes {
	width: calc(100% + var(--film-strip-width));
	height: 0px;

	border-top: var(--film-hole-size) dashed var(--film-strip-hole-color);
}

/* #endregion */

/* #endregion */

/* #region === Buttons === */

#or_lightshow .ls-buttonrow {
	position: relative;
	width: 100%;
	margin-bottom: -1vw;
	margin-top: 10px;
	height: 5vh;
}

#or_lightshow .ls-buttonrow btn {
	min-width: 8vw;
}

#or_lightshow .ls-buttonrow > div {
	height: 100%;
	position: relative;
}

#or_lightshow .err-box {
	flex-grow: 1;
	border-radius: 5px;
	background-color: var(--darkest);
	margin: 1vh 1vw;
	color: red;
	padding: 0.4vh 0.8vw;

	font-size: 1.7vh !important;
}

#or_lightshow .loading_bar > .render_complete_msg {
	width: 100%;
	height: 100%;
	position: absolute;
}

#or_lightshow .loading_bar {
	margin: 0 1vw;
	width: 100%;
	height: 100%;
	position: relative;
	flex-grow: 1;
	border-radius: 100px;
	background-color: var(--darker);
	overflow: hidden;
}

#or_lightshow .loading_bar_fill {
	height: 100%;
	background-color: var(--orange);

	transition: width 0.5s ease;
}

/* #endregion */

/* #endregion */

/* #endregion */

/* #region ######################- Overlays -###################### */

/* #region ---- GENERAL ---- */
/* Slap this on an overlay to force it to appear on screen during development so we can see what it's doing */
.ovl-dev {
	top: 10vw;
	left: 10vw;
	border: 1px solid red;
}

.ovl-main::after {
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 0.25;
	background-color: #777777;
}

.ovl-main {
	box-shadow: 0 0 13px 0 #191919;
	position: absolute;
	left: -9999;
	border-radius: 5px;
	overflow: visible;
	display: none;
	max-height: 100vh;
	z-index: 100;
	transition: top 0.5s ease-in-out, bottom 0.5s ease-in-out;
	/* Don't forget, z-index is set by the regional framework */
}

.ovl-greyout {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: none;
	opacity: 0.25;
	background-color: #777777;
}

.greyout-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #19191980;
}

.ovl-header {
	position: relative;
	--header-size: 3vw;
	background-color: var(--darker);
	width: 100%;
	height: var(--header-size);
	padding: 0vw 1vh;
	box-sizing: border-box;
}

.ovl-header btn {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	aspect-ratio: 1;
	height: 80%;

	border-radius: 4px;
}

btn.ovl-close {
	background-color: transparent;
}

btn.ovl-close::after {
	font-size: var(--header-size);
	font-family: none;
	color: var(--light-grey);
	content: "\00d7";
}

.ovl-body {
	width: 100%;
	padding: 1vh 2vw 2vw;
	box-sizing: border-box;
}

.fullscreen-drag-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	opacity: 0%;
	z-index: 100;
	display: none;
}

/* #endregion */

/* #region Render Overlay */

#or_render {
	width: 80vw;
	overflow: hidden;
	background-color: var(--black);
	border-radius: 8px;
}

#or_render .ovl_render_body {
	width: 100%;
	height: 75vh;
	position: relative;
	padding: 7vh 4vw;
	box-sizing: border-box;
	flex-grow: 1;
	flex-shrink: 0;
}

/* LEFT PANE */

#or_render .render_left_pane {
	width: 50vw;
	height: 100%;
	position: relative;
	flex-shrink: 0;

	padding-right: 3vw;

	box-sizing: border-box;
}

#or_render #orr_thumbnail_container {
	max-width: 100%;
	max-height: calc(100% - 4vw);
	border-radius: 5px;
	overflow: hidden;
}

/* Left Pane -> Progress bar */

#or_render #orr_progress_cont {
	width: 100%;
	position: relative;
}

#or_render .render_progress_bar {
	margin-top: 2vw;

	height: 1.5vw;
	width: 80%;
	position: relative;

	justify-items: left;
	border-radius: 10vw;
	border: 1px solid white;
	overflow: hidden;
}

#or_render #orr_progress_message {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	color: white;
	mix-blend-mode: soft-light;
	font-size: 1.05vw !important;
}

#or_render #orr_completion_prediction {
	font-size: 1.15vw !important;
}

#or_render #orr_progress_bar {
	width: 0%;
	height: 100%;
	background-color: var(--orange);
	transition: width 1s ease-in-out;
}

/* RIGHT PANE */

#or_render .render_right_pane {
	height: 100%;
	flex-grow: 1;
	flex-shrink: 1;

	padding-left: 3vw;
	box-sizing: border-box;

	border-left: 1px solid var(--orange);
}

#or_render .button_stack {
	width: 80%;
	position: relative;
}

#or_render .button_stack > btn {
	min-width: 100%;
	margin-top: 1vw;
}

/* #endregion */

/* #region Calibration Overlay */

#or_calibrate {
	width: 50vw;
	max-height: 95vh;
	min-height: 45vh;
	overflow: hidden;
	background-color: var(--dark);
}

/* #region --- Config pane --- */
#or_calibrate .cal_config_options {
	--font-size-mult: 1.1;
	margin: 0px 6px;
}

#or_calibrate .cal_config_options > btn {
	width: 18vw;
	padding: 0.3vh 2vw;
	border-radius: 6px;
	overflow: hidden;

	margin: 2px 8px;
	--font-size-mult: 0.9;
	--textcolor: var(--white);
	--bgcolor: var(--black);
	--glowcolor: var(--orange);
}

#or_calibrate .cal_config_options > btn.selected {
	--bgcolor: var(--darkest);
	--textcolor: var(--orange);
	box-shadow: 0px 0px 0.3vw 0.05vh var(--glowcolor);
	z-index: 10;
}

#or_calibrate .cal-adv-opt-box {
	background-color: var(--darkest);
	border-radius: 5px;
	margin-bottom: 10px;
	width: 100%;
	padding: 0 1vw;
	position: relative;
}

/* Projector Spotlight switch */
.cal-spotlight-switch {
	margin-top: 0.5vh;

	--track-h: 3vh;
	--track-w: 7vw;
	--switch-w: 3.6vw;

	height: var(--track-h);
	width: var(--track-w);

	position: relative;

	margin-bottom: 2vh;
}
.cal-spotlight-switch.off {
	background-color: var(--black);
}
.cal-spotlight-switch.on {
	background-color: var(--orange);
}

.cal-spotlight-switch > .switch-head {
	height: calc(var(--track-h) - 8px);
	width: var(--switch-w);
	transition: margin-left 0.4s ease-in-out;
	margin-left: 0;
}
.cal-spotlight-switch.off > .switch-head {
	margin-left: 4px;
}
.cal-spotlight-switch.off > .switch-head::after {
	content: "OFF";
}
.cal-spotlight-switch.on > .switch-head {
	margin-left: calc(var(--track-w) - var(--switch-w) - 4px);
}
.cal-spotlight-switch.on > .switch-head::after {
	content: "ON";
}

#or_amalgam .cal-spotlight-switch {
	margin-top: 0;
	margin-bottom: 0;
	--glow-radius: 0px 0px 0.3vw 0.1vh;
}

/* #endregion */

/* #region --- Calibrating pane --- */

#or_calibrate #oc_pg_calibrate {
	width: 100%;
	position: relative;
}

/* #region Extra Info */

#or_calibrate .cal-info-box {
	background-color: var(--darkest);
	border-radius: 5px;
	width: 100%;
	padding: 1vh 1vw;
	box-sizing: border-box;
	position: relative;
}

#or_calibrate .cal-info-box::before {
	position: absolute;
	width: 100%;
	height: 1.5vh;
	top: 0.5vh;
	left: 0;

	content: "Info & Tips";
	font-family: "BrandonGrotequeWeb-Regular", sans-serif;
	color: var(--light-grey);
	text-align: center;
	font-size: 0.75vmax;
}

.cal-info-box .cal-info-content {
	margin: 1.25vh 0;
	width: calc(100% - 10vmin);
}

.cal-info-box .cal-info-arrow {
	width: 4vmin;
	height: 10vmin;
}

.cal-info-box .cal-info-arrow > img {
	filter: var(--filter-svg-orange);
	width: 100%;
	aspect-ratio: 1;
}

/* #endregion */
#or_calibrate .cal-main-buttons {
	margin-top: 10px;
}

#or_calibrate .cal-main-buttons > btn {
	margin: 0px 6px;
	min-width: 8vw;
}

#or_calibrate .progress-bar {
	width: 80%;
	margin-top: 1vh;

	border-radius: 5vh;
	height: 5vh;
	background-color: var(--black);
	border: 1px solid var(--light-grey);
}

#or_calibrate .progress-bar .progress-text-over {
	height: 100%;
	color: white;
}

#or_calibrate .progress-bar .progress-bar-fill {
	background-color: var(--orange);
	border-radius: 5vh;
	box-sizing: border-box;
	border: 3px solid var(--black);
}

/* #endregion */

/* #region --- Diagnostics pane --- */

/* #region - Image container - */
#or_calibrate .img-panel-container {
	width: 100%;
	padding: 2vh 2vw;
	box-sizing: border-box;

	background-color: var(--black);
	border-radius: 6px;
}

.img-panel-container .diag-img-cont {
	border-radius: 10px;
}
.img-panel-container .diag-img-cont > div:first-of-type {
	position: absolute;
	top: 0.5vh;
}
.img-panel-container .diag-img-cont > div:last-of-type {
	position: absolute;
	bottom: 0.5vh;
}

/* Image search arrows */
#or_calibrate .img-panel-container .cal-diag-arrow {
	width: 4vw;
	height: 4vw;
	cursor: pointer;
	margin: 1vw;
	position: relative;
}
#or_calibrate .img-panel-container .cal-diag-arrow > img {
	width: 100%;
	height: 100%;
	filter: var(--filter-svg-orange);
}
/* #endregion */

/* #region - Help options - */

#or_calibrate .diag-opt-list {
	height: 30vh;
	width: 30vw;
	padding: 5px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;

	background-color: var(--darkest);
	border-radius: 6px;
}

.diag-opt-list .diag-opt-scrollzone {
	padding: 8px;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	overflow-x: hidden;
}

.diag-opt-list .diag-help-opt {
	width: 100%;
	max-height: 100%;
	margin-bottom: 5px;
	padding: 10px 20px;
	--glow-radius: 0px 0px 4px 1px !important;
	color: white;
}

/* Help selected overlay */

#or_calibrate .diag-help-overlay {
	position: absolute;
	z-index: 1;

	transition: right 0.4s ease-in-out;
	right: -70%;
	pointer-events: none;

	width: 65%;
	height: 100%;
	padding: 1vw;
	bottom: 0px;
	box-sizing: border-box;

	background-color: var(--black);
	border-radius: 6px;
	cursor: pointer;
}
#or_calibrate .diag-help-overlay.active {
	right: 0%;
	pointer-events: unset;
}

.diag-help-overlay .helpovl-closebar {
	width: 100%;
	position: relative;
}

.diag-help-overlay .ovl-close {
	width: 1.5vw;
	aspect-ratio: 1;
}

/* #endregion */

/* #endregion */

/* Main settings */

#or_calibrate select {
	min-width: 5vw;
	border-radius: 4px;
	overflow: hidden;
	padding: 3px 5px;

	background-color: var(--black);
	color: white;
	border: 1px solid var(--darkest);
}

/* #region Completion pane */

#or_calibrate .cal-snapshot-thumbs {
	width: 30vw;
	position: absolute;
	bottom: 1vh;
}
#or_calibrate .cal-snapshot-thumbs > btn {
	height: 3.5vmin;
	--glow-radius: 0px 0px 5px 2px;
	--glowcolor: #ffffff80;
	--glowcolorhover: white;
	--icon-color: var(--filter-svg-white);
}
#or_calibrate btn.thumbsup {
	background-color: var(--pale-green);
}
#or_calibrate btn.thumbsdown {
	background-color: var(--pale-red);
}

/* #endregion */

/* #endregion */

/* #region Tutorial/Onboarding */
.ob-grayout {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: #191919;
	opacity: 50%;
	z-index: 150;
}

.ob-target {
	z-index: 300;
}

.ob-target-main {
	position: relative;
	z-index: 300;
}

.ob-unclickable {
	z-index: 100;
}

.ob-bubble-container {
	position: absolute;
	height: 0px;
	overflow: visible;
	z-index: 300;
}

.ob-bubble {
	position: relative;
	z-index: 300;
	border-radius: 1vw;
	background-color: #faae1b;
	color: white;
	width: fit-content;
	padding: 0.75vh 1vw;
	text-align: center;
}

.ob-bubble-tail {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 1vw solid transparent;
	border-top: 1.5vh solid transparent;
	border-bottom: 1.5vh solid transparent;
	z-index: 300;
}

.ob-bubble-tail-left {
	right: 0;
	top: 50%;
	border-left: 2vw solid #faae1b;
	border-right: 0vw solid transparent;
	margin-right: -2vw;
}

.ob-bubble-tail-right {
	left: 0;
	top: 50%;
	border-right: 2vw solid #faae1b;
	border-left: 0vw solid transparent;
	margin-left: -2vw;
}

.ob-bubble-tail-above {
	bottom: 0;
	left: 50%;
	border-top: 2vh solid #faae1b;
	border-bottom: 0vh solid transparent;
	margin-bottom: -2vh;
}

.ob-bubble-tail-below {
	top: 0;
	left: 50%;
	border-bottom: 2vh solid #faae1b;
	border-top: 0vh solid transparent;
	margin-top: -2vh;
}

.ob-bubble-exit {
	position: absolute;
	right: 0.75vw;
	top: 0.75vh;
	color: white;
	font-size: 1.5vw;
	opacity: 50%;
	height: 0.7vw;
	width: 0.7vw;
	overflow: hidden;
	cursor: pointer;
}

.ob-bubble-exit:hover {
	opacity: 100%;
}

.ob-bubble-err {
	animation: ob-bubble-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	perspective: 1000px;
}

@keyframes ob-bubble-shake {
	10%,
	90% {
		transform: translate(-1px, 0);
	}

	20%,
	80% {
		transform: translate(2px, 0);
	}

	30%,
	50%,
	70% {
		transform: translate(-4px, 0);
	}

	40%,
	60% {
		transform: translate(4px, 0);
	}
}

/* #endregion */

/* #region Purchase Overlay */

.prch-plan-tile {
	width: 49vw;
	border-radius: 1vw;
	margin-bottom: 0.25vw;
	overflow: hidden;
}

.prch-tile-name {
	width: 100%;
	padding: 1vw 2vw;
}

.prch-tile-desc {
	width: 200%;
	border-left: 1px solid;
	padding: 0 2vw;
}

/* #endregion */

/* #region Project Rollback Overlay */

.prb-entry {
	margin-left: 1vh;
	padding-left: 1vh;
	margin-top: 0.5vh;
	padding-top: 0.5vh;
	margin-bottom: 0.5vh;
	padding-bottom: 0.5vh;
	border-radius: 0.8vh;
	border: 1px solid transparent;
	width: 50%;
	cursor: pointer;
}

/* #endregion */

/* #region Media Editors Overlay */

.m-editor-trimbar-container {
	border-radius: 6px;
	overflow: hidden;
	border-width: 2px 4px;
	border-style: solid;
	box-sizing: border-box;
	position: relative;
}

.m-editor-trimbar {
	width: 100%;
	height: 100%;
	background-color: #faae1b80;
	border: 1px solid var(--orange);
	border-width: 1px 0px;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.m-editor-trimbar-left {
	left: 0px;
	width: 10%;
	height: 100%;
	min-width: 10px;
	max-width: 40px;
	cursor: pointer;
	border: 0px solid var(--orange);
	border-left-width: 2px;
	border-radius: 6px;
	background-image: linear-gradient(to right, #faae1b80, rgba(0, 0, 0, 0));
	position: absolute;
	box-sizing: border-box;
}

.m-editor-trimbar-left:hover {
	background-image: linear-gradient(to right, #faae1b, rgba(0, 0, 0, 0));
}

.m-editor-trimbar-right {
	right: 0px;
	width: 10%;
	height: 100%;
	min-width: 10px;
	max-width: 40px;
	cursor: pointer;
	border: 0px solid var(--orange);
	border-right-width: 2px;
	border-radius: 6px;
	background-image: linear-gradient(to left, #faae1b80, rgba(0, 0, 0, 0));
	position: absolute;
	box-sizing: border-box;
}

.m-editor-trimbar-right:hover {
	background-image: linear-gradient(to left, #faae1b, rgba(0, 0, 0, 0));
}

.m-editor-control-btn {
	width: 2vw;
	height: 2vw;
	border: 1px solid;
	border-radius: 5px;
	overflow: hidden;
}

#orme_av_trim input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
	text-align: center;
}

#orme_av_trim video {
	min-height: 100%;
	max-width: 100%;
	max-height: 100%;
}

#orme_chromakey canvas {
	min-height: 15vw;
	max-width: 100%;
	max-height: 25vw;
}

#orme_chromakey video {
	min-height: 15vw;
	max-width: 100%;
	max-height: 25vw;
}

#orme_chromakey img {
	min-height: 15vw;
	max-width: 100%;
	max-height: 25vw;
}

/* #region Amalgam Overlay */

.amal-arrange-container {
	width: 65vw;
	height: 100%;
	padding: 4vh 4vw;
	border-width: 2px;
	border-style: dashed;
	border-color: var(--grey);
	border-radius: 5px;
	position: relative;
	box-sizing: border-box;
	margin-right: 1vw;
}

.amal-arrange-info-panel {
	width: 100%;
	flex-grow: 1;
	padding: 1vw;
	background-color: var(--darkest);
	border-radius: 5px;
	position: relative;
	box-sizing: border-box;
}

.amal-arrange-container.notiles {
	width: 24vw;
	height: 13vh;
	margin: 0px 13vw;
}

.amal-arrange-canvas {
	position: relative;
	transform-origin: 0% 0% 0px;
	transform: scale(0.01);
	min-height: 100%;
	min-width: 100%;
	transition: transform 0.5s ease;
}

.amal-arrange-tile {
	width: 1024px;
	height: 768px;
	border: solid var(--light-grey);
	border-radius: 4px;
	background-color: var(--black);
	box-sizing: border-box;
	position: absolute;
	cursor: pointer;
	transition: left 0.4s ease, top 0.4s ease, height 0.5s ease, width 0.5s ease;
}

.amal-arrange-tile.selected {
	border-color: var(--orange);
	background-color: var(--darker);
}

.amal-arrange-tile.dragging {
	transition: unset;
	cursor: grabbing !important;
	opacity: 80%;
}

.amal-arrange-tile-name {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 30px;
	padding: 10px 20px;
	box-sizing: border-box;
	color: var(--white);
	background-color: #19191980;
	font-size: 50 !important;
	max-width: 40%;
	z-index: 1;
}

.amal-arrange-tile-background {
	width: 100%;
	height: 100%;
	position: relative;
	opacity: 80%;
}

.selected > .amal-arrange-tile-background,
.dragging > .amal-arrange-tile-background {
	opacity: 100%;
}

/* #endregion */

/* #endregion */

/* #region New Project Overlay */

.orpn-proj-res-tile {
	width: 100%;
	height: 6vw;
}

.orpn-proj-res-tile .projprompt-tile,
.orpn-proj-res-tile.projprompt-tile {
	height: 6vw;
}

.orpn-proj-icon-cont {
	aspect-ratio: 1;
	padding: 1.5vh;
	box-sizing: border-box;
	height: 100%;
}

.orpn-proj-icon {
	width: 100%;
	height: 100%;
}

.orpn-proj-icon-placeholder {
	aspect-ratio: 1;
	border: 1.5px dashed var(--grey);
	border-radius: 100%;
}

.orpn-toggle-option {
	width: 100%;
	height: 3vh;
	padding: 0.5vh 0.5vw;
	box-sizing: border-box;
	background-color: var(--darker);
	color: var(--lighter-grey);
	border-radius: 9px;
	border: 0px transparent var(--black);
	overflow: hidden;
	cursor: pointer;
}

.orpn-toggle-option:hover {
	background-color: var(--dark);
}

.orpn-toggle-option.selected {
	color: var(--white);
	background-color: var(--dark);
}

.orpn-toggle-option.selected:hover {
	color: var(--lighter-grey);
}

.orpn-toggle-option-bubble {
	background-color: var(--black);
	width: 0.8vw;
	height: 0.8vw;
	border-radius: 100%;
	margin-right: 0.5vw;
}

.selected .orpn-toggle-option-bubble {
	background-color: var(--orange);
}

.orpn-toggle-option-help {
	right: 1vh;
	position: absolute;
	overflow: hidden;
	background-color: var(--black);
}

.orpn-toggle-option-help:hover {
	background-color: var(--dark);
}

/* #endregion */

/* #region New Project Direct Upload Overlay */
.orpd-snapshot-preview {
	max-width: 100%;
	max-height: 40vh;
	width: 100%;
	aspect-ratio: 1.777777;
}

.orpd-snapshot-hovericon {
	position: absolute;
	max-height: 50%;
	max-width: 50%;
	display: none;
}

.orpd-snapshot-preview:hover .orpd-snapshot-hovericon {
	display: block;
}

.orpd-project-preview-wrapper {
	min-height: 40vh;
	border-radius: 8px;
	overflow: hidden;
}

.orpd-project-preview-wrapper > video {
	max-height: 40vh;
	max-width: 100%;
	z-index: 2;
}

/* Dropzone stuff */
form#projectuploadform.dz-started {
	border-style: solid !important;
	cursor: default;
	opacity: 1;
}

form#projectuploadform.processing {
	pointer-events: none;
}

/* #endregion */

/* #region Projector Prompt Overlay */

.projprompt-tile {
	width: 100%;
	height: 7vw;
	background-color: var(--darkest);
	border: 1px solid transparent;
	border-radius: 6px;
	margin-bottom: 0.5vw;
	cursor: pointer;
}

.projprompt-tile:hover {
	background-color: var(--darker);
}

.projprompt-tile.selected {
	border-color: var(--orange);
}

.projprompt-tile.tile-special {
	background-color: var(--black);
	height: 6vw;
}

.projprompt-tile.tile-special:hover {
	background-color: var(--darkest);
	border-color: var(--orange);
}

.projprompt-tile-preview-cont {
	width: 7vw;
	height: 6vw;
	padding: 0.5vw 0;
	margin-left: 1vw;
	position: relative;
}

.projprompt-tile-preview {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	border: 2px dashed var(--light-grey);
}

.projprompt-tile-preview-slot {
	position: absolute;
	border: 40px dashed;
	box-sizing: border-box;
	border-color: var(--orange);
}

.projprompt-tile-devlist {
	width: 95%;
	position: relative;
	background-color: var(--black);
	border-radius: 6px;
	margin-bottom: 1vh;
}

.projprompt-tile-devlist-entry {
	width: 50%;
	height: 2vw;
	padding: 0.2vh 0.2vw;
	box-sizing: border-box;
}

/* #endregion */

/* #region ---- Scene selection overlay ---- */

/* #region === Base Regions === */

#or_scene_nav {
	position: relative;
	width: 56vw;
	display: flex;
	overflow: hidden;
	z-index: 1000 !important;
	background-color: var(--dark-grey);
}

#or_scene_nav .ovl-header {
	--header-size: 2vw;
}

#or_scene_nav .ovl-body {
	position: relative;
	height: 78vh;
	width: 100%;
}

#or_scene_nav .tile-region-container {
	padding: 2vh 1vw;
	box-sizing: border-box;
	width: 100%;
	flex-grow: 1;

	border-radius: 6px;
	background-color: var(--darker);

	--scene-tile-width: 12vw;
}

#or_scene_nav .tile-region {
	width: calc(var(--scene-tile-width) * 4);
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
}

/* #endregion */

/* #region === Path Bar === */

#or_scene_nav .nav-path-bar {
	width: 100%;
	border-radius: 6px;
	background-color: var(--black);
	padding: 3px;

	display: flex;
	flex-direction: row;
	align-content: flex-start;
	flex-wrap: wrap;

	margin-bottom: 1vh;
}

#or_scene_nav .btn_swapviews {
	padding: 5px 1vw;
	width: 8vw;
	box-sizing: border-box;
	margin-left: 1vw;
	margin-bottom: 1vh;
}

#or_scene_nav .filepath-foldername {
	cursor: pointer;
	color: white;
	background-color: var(--dark);
	font-size: 1.2vw;
}

#or_scene_nav #orsnav_root.filepath-foldername {
	background-color: var(--darkest);
	font-size: 1.2vw;
}

/* #endregion */

/* #region === Tiles === */
#or_scene_nav .project-tile-container {
	position: relative;
	width: var(--scene-tile-width);
	height: 24vh;
	padding: 0.5vh 0.5vw;
	box-sizing: border-box;

	pointer-events: none;
}

#or_scene_nav .project-tile {
	position: relative;
	width: 100%;
	max-height: 100%;
	height: auto;
	overflow: hidden;

	--glowcolor: #faae1b60;
	--glowcolorhover: #faae1b90;
	--tile-bg-color: var(--black);

	background-color: var(--tile-bg-color);
	pointer-events: all;
}

#or_scene_nav .selected .project-tile {
	--glowcolor: var(--orange);
	--glowcolorhover: var(--orange);
	--tile-bg-color: var(--darkest);
}

#or_scene_nav .project-tile-thumbnail {
	max-height: 14vh;
	width: 100%;
	border: 0px;
	overflow: hidden;
	background-color: #101010;
}

#or_scene_nav .folder-tile .project-tile-thumbnail {
	background-color: unset;
}

#or_scene_nav .project-tile-base {
	padding: 0.7vh 0.7vw;
	box-sizing: border-box;
	width: 100%;
	min-height: 6vh;
	height: auto;
	max-height: 10vh;
	overflow: hidden;
}

#or_scene_nav .project-tile-base .scene-name {
	color: var(--orange);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

/* #endregion */

/* #region === Buttons === */

#or_scene_nav .main-btn-row {
	margin-top: 1vw;
	width: 100%;
}

#or_scene_nav .main-btn-row > btn {
	min-width: 8vw;
	margin-left: 1vw;
}

/* #endregion */

/* #endregion */

/* #region ######################- Region: Editor -###################### */

/* --- Top bar --- */

.topbar-projector-dropdown {
	width: 18vw;
	border-radius: 1vw;
}

.topbar-projector-dd-header {
	width: 16vw;
	height: 2.5vw;
	border-radius: 1vw;
	padding-left: 1vw;
	padding-right: 1vw;
	cursor: pointer;
	overflow: hidden;
}

.topbar-projector-dd-block {
	width: 16vw;
	height: 2vw;
	border-radius: 1vw;
	padding-left: 1vw;
	padding-right: 1vw;
	cursor: pointer;
	overflow: hidden;
}

/* --- Righthand save section */

.rsxn-save-buttons {
	width: 100%;
	height: 4vh;
	border-radius: 0.5vw;
	cursor: pointer;
	background-color: var(--darker);
	color: var(--white);

	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently */
}

.rsxn-save-buttons:hover {
	background-color: var(--dark);
}

/* --- Righthand Sections */

.rsxn-device-block {
	height: 2.75vw;
	min-height: 2.75vw;
	width: calc(100% - 2px);
	border-radius: 0.3vw;
	margin-top: 0.35vw;
	border: 1px solid transparent;
}

.rsxn-device-status {
	height: 1vw;
	width: 1vw;
	min-height: 1vw;
	min-width: 1vw;
	border-radius: 50%;
	border: 0.25vw solid;
	margin: 0.5vw;
}

.rsxn-shape {
	height: 6.5vw;
	width: 6.5vw;
	border-radius: 0.5vw;
	border: 1px solid;
	margin-right: 1vw;
	margin-bottom: 1vw;
}

.rsxn-shape-img {
	height: 4vw;
	width: 4vw;
}

.rsxn-media-tile {
	height: 6.5vw;
	width: 6.5vw;
	margin-right: 1vw;
	margin-bottom: 1vw;
	border: 1px solid transparent;
	overflow: hidden;
}

.rsxn-media-tile-thumbnail {
	width: 100%;
	height: 5vw;
	max-height: 5vw;
	min-height: 5vw;
}

.rsxn-mask-list-layer-block {
	width: 100%;
	border-top: 1px solid;
	padding-top: 0.4vw;
	padding-bottom: 0.7vw;
}

/* --- Layers --- */
.layers-block {
	position: relative;
	width: 100%;
	margin-bottom: 0.5vw;
}

.layers-row {
	position: relative;
	width: 100%;
	height: 2.5vw;

	--ribbon-width: 0.4vw;
}

.layers-info {
	width: calc(100% - var(--ribbon-width));
	height: 2vw;
	position: relative;
}

.layers-info > div {
	flex-shrink: 0;
}

.layers-row-ribbon {
	height: 100%;
	width: var(--ribbon-width);
}

.layers-icon {
	width: 1vw;
	height: 1vw;
}

.layers-icon-box {
	width: 1.75vw;
	height: 1.75vw;
	margin-left: 0.25vw;
	border: 1px solid;
	box-sizing: border-box;
}

.layers-chevron {
	margin-left: 0.5vw;
	width: 1.5vw;
	height: 1.5vw;
}

.layers-chevron-secondary {
	width: 1.5vw;
	height: 1.5vw;
}

.layers-objname-container {
	overflow: hidden;
	flex-grow: 1;
	flex-shrink: 1 !important;
	position: relative;
}

.layers-objname {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	color: white;
}

.fontselect-rsxn {
	width: 100%;
}

.layers-void {
	width: 100%;
	height: 2.5vw;
}

/* Height should be set by JQUERY to match original boi. */
.layers-block-void {
	width: 100%;
}

.layers-void-inner {
	height: 2vw;
	margin-right: 0.5vw;
	border-radius: 0.5vw;
	width: 10vw;
}

.layers-void-inner-block {
	margin: 0.5vw;
	border-radius: 0.5vw;
	width: 16.5vw;
}

/* --- Canvas --- */

.cv-button {
	width: 3vw;
	height: 3vw;
	overflow: hidden;
}

.cv-button-inner {
	width: 2.2vw;
	height: 2.2vw;
}

.cv-zoom-bar {
	margin-top: 1vw;
	right: 0;

	width: 2.5vw;

	border: 1px solid var(--black);
	border-right: 0px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	overflow: hidden;

	background-color: var(--black);
}

.cv-zoom-btn:not(:first-child) {
	margin-top: 1px;
}

.cv-zoom-btn {
	width: 2.5vw;
	height: 2.5vw;
	position: relative;
}

.cv-zoom-btn img {
	width: 1.5vw;
	height: 1.5vw;
	filter: var(--filter-svg-orange);
}

/* --- Timeline --- */

.tl-tickmark {
	height: 100%;
	width: 1px;
}

.tl-tickmark-longest {
	height: 100%;
	width: 1px;
	background-color: #7e8184;
}

.tl-tickmark-long {
	height: 100%;
	width: 1px;
	background-color: #4b4b4b;
}

.tl-tickmark-med {
	height: 2vh;
	width: 1px;
	background-color: #4b4b4b;
}

.tl-tickmark-short {
	height: 1vh;
	width: 1px;
	background-color: #4b4b4b;
}

.tl-tickmark-scrub {
	height: 0.5vh;
	width: 1px;
	background-color: #afafaf;
}

.tl-timemark {
	position: relative;
	width: 1px;
}

.tl-tlb-row-block

/* Container for a group of timeline rows, matches layers-block */ {
	position: relative;
	/* Needed so that tlb's (also pos-rel) at 100% actually line up right */
	width: 100%;
	margin-bottom: 0.5vw;
}

.tl-tlb-divider

/* A wide divider to show layer */ {
	height: 0.2vh;
	width: 100%;
}

.tl-tlb-divider-ball-left {
	width: 0.8vw;
	height: 0.8vw;
	border-radius: 50%;
	position: relative;
	left: -0.4vw;
}

.tl-tlb-divider-ball-right {
	width: 0.8vw;
	height: 0.8vw;
	border-radius: 50%;
	position: relative;
	left: 0.4vw;
}

.tl-tlb-row

/* Container for timeline block stuff, height matches layer-row */ {
	height: 2.5vw;
	width: 100%;
}

.tl-tlb-row-divider

/* Container for timeline block stuff, height matches layer-row */ {
	height: 1vw;
	margin-top: 1.5vw;
	margin-bottom: 1.5vw;
	width: 100%;
}

.tl-tlb

/* Root class for the tlb block (of any height and color) */ {
	position: absolute;
	cursor: pointer;
}

.tl-tlb-handle {
	height: 100%;
	width: 1vw;

	background-color: white;
}

.tl-tlb-heavy

/* Sets the height for a heavy tlb */ {
	height: 1.75vw;
}

.tl-tlb-light

/* Sets height for light tlb */ {
	height: 1.25vw;
}

.tl-tlb-kf {
	width: 0vw;
	height: 0vw;
	position: absolute;
}

.tl-tlb-kf-cont {
	position: relative;
	width: 1vw;
	left: -0.5vw;
	height: 3.25vw;
	top: -2.625vw;
}

.tl-tlb-kf-del {
	width: 1.25vw;
	height: 1.25vw;
	border: 1px solid;
	border-radius: 20%;
	margin: 0.25vw;
}

.tl-tlb-kf-del:hover {
	background-color: red;
}

.tl-tlb-kf-img {
	width: 0.75vw;
	height: 1.25vw;
	/* Matches tlb-light */
}

/* The divider line that appears to show where internal video loops end. */
.tl-tlb-vid-loop-line {
	width: 1px;
	height: 100%;
	position: absolute;
}

.tl-tlb-vid-loop-tri {
	position: absolute;
	left: calc(-0.6vw + 1px);
	width: 0;
	height: 0;
	border-left: 0.6vw solid transparent;
	border-right: 0.6vw solid transparent;
	/* Unfortunately the color must be set here. */
	border-top: 0.6vw solid white;
}

.tl-tlb-selected {
	background: repeating-linear-gradient(45deg, #aaaaaa, #aaaaaa 2px, #09456a 2px, #09456a 10px);
}

.tl-tlb-comp-deleted {
	background: repeating-linear-gradient(45deg, #000000, #000000 24px, #7e0000 1px, #7e0000 48px);
}

.tl-tlb-selected.tl-tlb-comp-deleted {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 2px solid #7e0000;

	background: repeating-linear-gradient(45deg, #000000, #000000 24px, #b80000 1px, #b80000 48px);
}

.tl-tlb-comp-deleted .tl-tlb-handle {
	background-color: unset;
}

.tl-tlb-comp-deleted .tl-tlb-title {
	color: var(--light-grey);
}

.tl-tlb-comp-deleted .tl-tlb-title::after {
	content: " (Deleted)";
}

.tl-viewport-wrapper {
	width: inherit;
	height: inherit;
	position: relative;
}

.tl-abs-scrollable {
	position: absolute;
}

.tl-scrubber-top {
	width: inherit;
	height: 1vh;
	position: fixed;
	z-index: 1;
}

.tl-btn-zoom {
	z-index: 1;
	border-radius: 0.75vh 0 0 0.75vh;
	width: 2vh;
	height: 2vh;
	opacity: 0.5;
	overflow: hidden;
}

.tl-btn-zoom:hover {
	opacity: 1;
}

/* --- Calendar --- */

/** Set position with top:  */
.cal-block {
	position: absolute;
	border-radius: 0.5vw;
	width: 100%;
}

.cal-block-vhandle {
	width: 100%;
}

.cal-lined-row {
	height: 5vw;
	width: 100%;
}

/* This is half the height of cal-lined-row */
.cal-lined-spacer {
	height: 2.5vw;
	width: 100%;
}

.cal-lined-horizontal {
	border-bottom: 1px solid;
}

.cal-lined-vertical {
	border-right: 1px solid;
	height: 100%;
}

.cal-lined-short {
	width: 0.75vw;
}

.cal-lined-long {
	flex-grow: 1;
}

.cal-week-button {
	border-radius: 0.5vw;
	border: 1px solid;
}

.cal-week-header-width {
	width: calc(14.28% - 1px);
}

.cal-week-col-width {
	width: 14.28%;
}

.cal-weekday-circle {
	width: 2.9vw;
	height: 2.9vw;
	border-radius: 1.5vw;
	border: 1px solid;
	margin-right: 0.5vw;
}

.bluetooth-paired-entry {
	height: 2.5vw;
	width: 100%;
	border-radius: 0.5vw;
	margin-top: 0.5vw;
	border: 1px solid transparent;
}

.co-snapshot-tile {
	position: relative;
	border: 1px solid;
	border-radius: 0.5vw;
	width: 9.4vw;
	height: 7.05vw;
	margin-left: 1vw;
	margin-top: 1vw;
	cursor: pointer;
	overflow: hidden;
	border-color: var(--lighter-grey);
	background-color: var(--grey);
}

.co-snapshot-tile:hover {
	border-color: var(--orange);
}

.co-snapshot-tile.isdefault {
	border-color: var(--orange);
}

.co-snapshot-tile.isdefault:hover {
	border-color: var(--white);
}

.co-snapshot-tile.mismatched_resolution {
	border-color: var(--pale-red) !important;
	cursor: default;
}

.co-snapshot-tile.mismatched_resolution:hover {
	border-color: var(--red) !important;
}

.co-snapshot-tile.notowned {
	border-color: var(--grey);
}

.co-snapshot-tile.notowned:hover {
	border-color: var(--orange);
}

.co-ss-tile-button-overlay {
	position: absolute;
	width: inherit;
	height: inherit;
}

.co-ss-tile-button {
	position: absolute;
	margin-left: 70%;
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	border: 1px solid transparent;
}

.co-ss-tile-btcheck {
	top: 10%;
	border-radius: 20%;
}

.co-ss-tile-btsave {
	bottom: 10%;
	border-radius: 20%;
}

.co-sstc-image {
	margin-top: 0;
	height: 100%;
	width: 100%;
}

.co-ss-tile-res {
	position: absolute;
	height: 1vw;
	bottom: 0;
	left: 0;
	background-color: #3f3f3fb0;
	border-radius: 3px;
	padding: 3px 3px;
	color: var(--white);
}

.mismatched_resolution .co-ss-tile-res {
	color: var(--pale-red);
}

/* #endregion */

/* #region ######################- Standardized Flow -#################### */
/* These serve the purpose of standardizing what looks "good" in page flow for common elements */
.std-subheader {
	margin-top: 2vh;
	margin-bottom: 1vh;
}

.std-box-cont {
	border-radius: 8px;
	overflow: hidden;
	padding: 1vh 1vw;
	box-sizing: border-box;
	position: relative;
}

.std-box-cont.tabbed {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.std-box-tab {
	--std-tab-color: var(--darkest);
	--std-tab-selected-color: var(--dark);
	background-color: var(--std-tab-color);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	overflow: hidden;
	color: var(--light-grey);
	width: 100%;
	height: 100%;
	cursor: pointer;
	margin: 0px 1px;
}

.std-box-tab.selected {
	background-color: var(--std-tab-selected-color);
	color: var(--white);
}

.std-box-tab.unavailable {
	color: var(--grey);
	cursor: not-allowed;
}

/* #endregion */

/* #region Atom styles */

/* Switch */

.atom-switch-container-base {
	overflow: hidden;
}

.atom-switch-container-def {
	height: 3vh;
	width: 100%;
	border-radius: 1.5vh;
}

.atom-switch-option-base {
	flex-grow: 1;
	height: 100%;
	cursor: pointer;
	text-align: center;
	padding: 10px 20px;
	border-right: 1px solid var(--transparent);
}

.atom-switch-option-def {
	border-color: var(--dark-grey);
	background-color: var(--darkest);
	color: var(--light-grey);
}

.atom-switch-selected-def {
	border-color: var(--dark-grey);
	background-color: var(--dark-grey);
	color: var(--orange);
}

/* Loading Bar */

.atom-loadingbar-container {
	width: 100%;
	height: 100%;
	border: 1px solid var(--black);
	background-color: var(--black);
	box-sizing: border-box;
	border-radius: 0.75vw;
	overflow: hidden;
	position: relative;
}

.atom-loadingbar-bar {
	width: 0%;
	height: 100%;
	transition: width 0.5s ease;
	background-color: var(--orange);
}

.atom-loadingbar-bar .error {
	background-color: var(--red);
}

.atom-loadingbar-embeddedprogress {
	width: 100%;
	height: 100%;
	justify-content: center;
	text-align: center;
	color: white;
	position: absolute;
	top: 0;
}

/* #endregion */

/* #region Library overloads */

.ptro-wrapper {
	border-radius: 6px;
	overflow: hidden;
}

.ptro-scroller {
	overflow: auto;
}

.ptro-scroller::-webkit-scrollbar-thumb {
	width: 0.25vw;
	height: 0.5vh;
	background: #faae1bc0;
	border-radius: 2.5vw;
	border: 0.125vw solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	-webkit-border-radius: 0.3vw;
}

.ptro-scroller::-webkit-scrollbar {
	width: 0.5vw;
	height: 1vh;
	background-color: rgba(0, 0, 0, 0);
}

.ptro-scroller::-webkit-scrollbar-corner {
	background: rgba(0, 0, 0, 0);
}

.ptro-scroller::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0);
}

/* #endregion */

/* #region Animations */

@keyframes rotate-loader {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}

.const-rotation {
	animation: rotate-loader infinite 1.5s linear;
}

.rotate90cw {
	transform: rotate(90deg);
}

@keyframes flickerAnimation {
	/* flame pulses */
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.animate-flicker {
	opacity: 1;
	animation: flickerAnimation 1s infinite;
}

/* #endregion */

/* #endregion */