:root {
	--bg: gainsboro;
	--color: black;
	--subheader-bg: #EAEAE7;
	--component-hover: rgb(150, 150, 150);
	--component-active: rgb(100, 100, 100);
	--canvas-bg: white;
	--toolbar-item-border: #c0c0c0;
}

:root[data-dark-mode=true] {
	--bg: #2c2f31;
	--color: white;
	--subheader-bg: #252829;
	--component-hover: #535a5e;
	--component-active: #4b5255;
	--canvas-bg: #93bee2;
	--toolbar-item-border: #42474a;
	color-scheme: dark only;
}
html {
	font-size: 62.5%;
}
body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	font-family: Ubuntu, Arial, Helvetica, sans-serif;
	background: var(--bg);
	transition: background var(--speed) var(--easing);
	touch-action: pan-x pan-y;
}

:root:not([data-dark-loaded]) * {
	transition: none !important;
}

#canvasContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--canvas-bg);
	transition: background var(--speed) var(--easing);
}

canvas {
	width: 100%;
	height: 100%;
	touch-action: manipulation;
}

/* Floating toolbar that follows the selected component */
#selectionToolbar {
	position: fixed;
	z-index: 1098; /* above canvas and componentMenu */
	pointer-events: auto;
	margin-block-start: 0;
	padding: 4px;
	max-height: 4.8rem;
	gap: 0;
}

#selToolEdit {
	display: none;
}

#selectionToolbar.editable > #selToolEdit {
	display: block;
}

#selToolMenuRotate,
#selToolRotate,
#selToolMenuGroup,
#selToolMenuUngroup {
	display: none;
}

#selectionToolbar.rotatable > #selToolRotate {
	display: block;
}

#selectionToolbar.rotatable li#selToolMenuRotate {
	display: flex;
}

#selectionToolbar.ungrouped li#selToolMenuGroup,
#selectionToolbar.grouped li#selToolMenuUngroup {
	display: flex;
}

#selectionToolbar.hidden {
	display: none;
}

#selectionToolbar:not(.locked) > button#selToolUnlock,
#selectionToolbar.locked > button#selToolLock,
#selectionToolbar:not(.locked) menu > li#selToolMenuUnlock,
#selectionToolbar.locked menu > li#selToolMenuLock {
	display: none;
}

#selectionToolbar.locked menu > li.hideOnLock {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
	background-color: unset;
}

#selectionToolbar.locked #selToolEdit,
#selectionToolbar.locked #selToolRotate,
#selectionToolbar.locked #selToolDelete {
	display: none;
}

#selectionToolbar > button {
	width: 4rem;
	height: 4rem;
}

#selectionToolbar > button:hover {
	background: var(--component-hover);
	opacity: 1 !important;
}

#selectionToolbar i.extra {
	--_size: 2.4rem;
}

#toolbar {
	position: fixed;
	box-sizing: content-box;
	top: 10px;
	left: 10px;
	padding: 4px 4px;
	height: 4rem;
	background-color: var(--bg);
	transition: background var(--speed) var(--easing), height .3s ease;
	border: 1px solid black;
	border-radius: 8px;
	z-index: 1010;
}

#apploading,
#notfound,
#exportloading {
	z-index: 1200;
	height: 100vh;
}

#notfound.hidden {
	display: none;
}

#exportloading.hidden {
	display: none;
}

#darkMode-container {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 1000;
}

#darkMode-container *,
#darkMode-container *:after,
#darkMode-container *:before {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#componentMenu {
	position: fixed;
	/* top: calc(5rem + 20px); */
	bottom: 10px;
	left: 10px;
	padding: 7px 7px;
	background-color: var(--bg);
	transition: background var(--speed) var(--easing);
	border: 1px solid black;
	border-radius: 12px;
	z-index: 1000;
	min-height: 6.3rem;
	max-height: 50%;
	min-width: 32rem;
}

#componentMenu,
#configurationEditor,
#layerEditor,
#editLayerDialog,
#mobileLayersButton,
#mobileLayerEditor,
#mobileMenu,
#newCustomComponentDialog,
#partInventoryDialog,
#selectionToolbar,
#exportloading,
#notfound,
#newLayoutConfirmDialog,
#subscriptionDialog,
#layoutNameDialog,
#accountMenuButton,
#fileOpenDialog,
#deleteLayoutConfirmDialog,
#renameLayoutDialog,
#profileModal,
#authenticationModal,
#buttonLayoutName,
#fileOpenMenu,
#apploading {
	--primary:#006494;
	--on-primary:#ffffff;
	--primary-container:#cbe6ff;
	--on-primary-container:#001e30;
	--secondary:#50606f;
	--on-secondary:#ffffff;
	--secondary-container:#d3e5f6;
	--on-secondary-container:#0c1d29;
	--tertiary:#65587b;
	--on-tertiary:#ffffff;
	--tertiary-container:#ebdcff;
	--on-tertiary-container:#211634;
	--error:#ba1a1a;
	--on-error:#ffffff;
	--error-container:#ffdad6;
	--on-error-container:#410002;
	--background:#fcfcff;
	--on-background:#1a1c1e;
	--surface:#f9f9fc;
	--on-surface:#1a1c1e;
	--surface-variant:#dde3ea;
	--on-surface-variant:#41474d;
	--outline:#72787e;
	--outline-variant:#c1c7ce;
	--shadow:#000000;
	--scrim:#000000;
	--inverse-surface:#2e3133;
	--inverse-on-surface:#f0f0f3;
	--inverse-primary:#8ecdff;
	--surface-dim:#d9dadd;
	--surface-bright:#f9f9fc;
	--surface-container-lowest:#ffffff;
	--surface-container-low:#f3f3f6;
	--surface-container:#edeef1;
	--surface-container-high:#e8e8eb;
	--surface-container-highest:#e2e2e5;
}

[data-dark-mode=true] #componentMenu,
[data-dark-mode=true] #configurationEditor,
[data-dark-mode=true] #layerEditor,
[data-dark-mode=true] #editLayerDialog,
[data-dark-mode=true] #mobileLayersButton,
[data-dark-mode=true] #mobileLayerEditor,
[data-dark-mode=true] #mobileMenu,
[data-dark-mode=true] #newCustomComponentDialog,
[data-dark-mode=true] #partInventoryDialog,
[data-dark-mode=true] #selectionToolbar,
[data-dark-mode=true] #exportloading,
[data-dark-mode=true] #notfound,
[data-dark-mode=true] #newLayoutConfirmDialog,
[data-dark-mode=true] #subscriptionDialog,
[data-dark-mode=true] #layoutNameDialog,
[data-dark-mode=true] #accountMenuButton,
[data-dark-mode=true] #fileOpenDialog,
[data-dark-mode=true] #deleteLayoutConfirmDialog,
[data-dark-mode=true] #renameLayoutDialog,
[data-dark-mode=true] #profileModal,
[data-dark-mode=true] #authenticationModal,
[data-dark-mode=true] #buttonLayoutName,
[data-dark-mode=true] #fileOpenMenu,
[data-dark-mode=true] #apploading {
	--primary:#8ecdff;
	--on-primary:#00344f;
	--primary-container:#004b70;
	--on-primary-container:#cbe6ff;
	--secondary:#b8c8d9;
	--on-secondary:#22323f;
	--secondary-container:#394956;
	--on-secondary-container:#d3e5f6;
	--tertiary:#d0c0e8;
	--on-tertiary:#362b4a;
	--tertiary-container:#4d4162;
	--on-tertiary-container:#ebdcff;
	--error:#ffb4ab;
	--on-error:#690005;
	--error-container:#93000a;
	--on-error-container:#ffb4ab;
	--background:#1a1c1e;
	--on-background:#e2e2e5;
	--surface:#111416;
	--on-surface:#e2e2e5;
	--surface-variant:#3b3b3b; /* 41474d */
	--on-surface-variant:#ffffff; /* c1c7ce */
	--outline:#8b9198;
	--outline-variant:#41474d;
	--shadow:#000000;
	--scrim:#000000;
	--inverse-surface:#e2e2e5;
	--inverse-on-surface:#2e3133;
	--inverse-primary:#006494;
	--surface-dim:#111416;
	--surface-bright:#37393c;
	--surface-container-lowest:#0c0e11;
	--surface-container-low:#1a1c1e;
	--surface-container:#1e2022;
	--surface-container-high:#282a2d;
	--surface-container-highest:#333537;
}

#componentEditor {
	position: fixed;
	top: 50px;
	right: 10px;
	background-color: var(--bg);
	transition: background var(--speed) var(--easing);
	border: 1px solid black;
	border-radius: 8px;
	z-index: 1000;
	min-height: 32rem;
	max-height: 50%;
	min-width: 20rem;
}

#componentEditor.hidden {
	display: none;
}

#componentEditorHeader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.7rem;
	background-color: var(--subheader-bg);
	border-bottom: 1px solid var(--toolbar-item-border);
	border-radius: 8px 8px 0 0;
}

.componentEditorTitle {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--color);
}

.componentEditorTitleButton {
	cursor: pointer;
}

.componentEditorTitleButton:hover {
	color: var(--component-hover);
}

#componentEditorContent {
	overflow-y: hidden;
	max-height: calc(100% - 3rem);
}

#componentEditorProperties {
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
}

#componentEditorConnections {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--subheader-bg);
	border-top: 1px solid var(--toolbar-item-border);
	border-radius: 0 0 8px 8px;
}

#componentEditorConnectionsHeader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: 1px solid var(--toolbar-item-border);
	padding: 0.5rem 0.7rem;
}

#componentEditorConnectionsList {
	font-size: 1.5rem;
}

#componentEditorConnectionsList li {
	display:block;
	max-width: 100%;
	overflow: hidden;
	line-height: 2rem;
	user-select: none;
}

#componentEditorConnectionsList .instant {
	float: left;
	font-size: 2rem;
	padding: 0 0.5rem;
}

#componentEditorConnectionsList .instant::after {
	content: " \2261";
}

#componentEditorConnectionsList .edit {
	float: right;
	cursor: pointer;
}
#componentEditorConnectionsList .edit::after {
	content: "E";
}
#componentEditorConnectionsList .edit::hover {
	color: var(--component-hover);
}

#componentEditorConnectionsList .delete {
	float: right;
	padding: 0 0.5rem;
	cursor: pointer;
}
#componentEditorConnectionsList .delete::after {
	content: "D";
}
#componentEditorConnectionsList .delete::hover {
	color: var(--component-hover);
}

#connectionEditor {
	position: fixed;
	top: calc(100vh / 2);
	left: calc(100vw / 2);
	background-color: var(--bg);
	transition: background var(--speed) var(--easing);
	border: 1px solid black;
	border-radius: 8px;
	z-index: 1000;
	max-height: 50%;
	min-width: 20rem;
}

#connectionEditor.hidden {
	display: none;
}

#connectionEditorHeader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.7rem;
	background-color: var(--subheader-bg);
	border-bottom: 1px solid var(--toolbar-item-border);
	border-radius: 8px 8px 0 0;
}

#connectionEditorHeader .componentEditorTitleButton:first-child{
	padding-right: 0.5rem;
}

#connectionEditorContent {
	overflow-y: hidden;
	max-height: calc(100% - 3rem);
}

#connectionEditorProperties {
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
}

#connectionMagnitudeLock {
	margin: 0 0 0 0.5rem;
}

.componentEditorActions {
	display: flex;
	flex-direction: row;
	position: absolute;
	bottom: 0;
	width: 100%;
	justify-content: space-evenly;
	border-top: 1px solid var(--toolbar-item-border);
}

.overlay {
	z-index: 1099;
}

.overlay:has(+ #deleteLayoutConfirmDialog, + #renameLayoutDialog) {
	z-index: 1101;
}

#mobileLayersButton {
	top: 3.5rem;
}

#mobileMenu,
#mobileLayerEditor {
	z-index: 1100;
	max-height: 50vh;
}

#mobileLayerAdd.hidden {
	display: none;
}

#mobileButtonCloudSave.hidden,
#buttonCloudSave.hidden {
	display: none;
}

#buttonMenu menu,
#editLayerDialog,
#newCustomComponentDialog,
#newLayoutConfirmDialog,
#subscriptionDialog,
#layoutNameDialog,
#fileOpenDialog,
#profileModal,
#authenticationModal,
#partInventoryDialog {
	z-index: 1100;
}

#fileOpenMenu {
	z-index: 1101;
	transition: all var(--speed2), transform 0s;
	user-select: none;
}

#fileOpenMenu.active {
	transition: all var(--speed2), background-color 0s;
}

#copyLayoutLink {
	display: none;
}

#fileOpenMenu.public #copyLayoutLink {
	display: flex;
}

#renameLayoutDialog,
#deleteLayoutConfirmDialog {
	z-index: 1102;
	transform: translate(-50%, 100%);
}

.cloudFileItem {
	cursor: pointer;
	padding: 0.5rem 1rem;
	user-select: none;
}

.cloudFileItem:not(:last-child)::before {
	content: "";
	position: absolute;
	background-color: var(--outline-variant);
	block-size: 0.0625rem;
	inline-size: auto;
	inset: auto 0px 0px;
}

#partInventoryDialog {
	block-size: unset !important;
}

a.buylink {
	color: blue;
	text-decoration: underline;
}

#layerEditor {
	width: 19rem;
	z-index: 1000;
}

#layerEditor button:hover {
	background: var(--component-hover);
	opacity: 1 !important;
}

#layerList,
#mobileLayerList {
	user-select: none;
}

#layerList:is(.readonly) li:nth-child(even),
#mobileLayerList:is(.readonly) li:nth-child(odd) {
	background-color: var(--secondary-container);
}

#layerList i:is(.visible,.edit,.delete),
#mobileLayerList i:is(.visible,.edit,.delete) {
	cursor: pointer;
}

.slider.auto-width {
	inline-size: auto;
}

.slider > .tooltip {
	font-size: 1.2rem !important;
}

.tooltip {
	font-size: 1rem !important;
}

li > .ctrl-key {
	margin-right: -1rem;
}

.tooltip > .ctrl-key,
.tooltip > .del-key {
	margin-inline: -0.5rem;
}

.extra-text {
	font-size: 1.4rem !important;
}

input.extra-text + label {
	font-size: 1.4rem !important;
}

input.extra-text ~ output:not(.invalid) {
	font-size: 1rem !important;
}

input.extra-text ~ output.invalid {
    font-size: 1.4rem !important;
}

.field.label:has(input.extra-text) {
	margin-bottom: 1rem !important;
}

.field output.invalid {
	display: none;
}

.field.invalid output.invalid {
	display: inline;
}

.field>nav {
	gap: 0.75rem;
}

.field>i.large:first-child {
	inset: calc(var(--_middle) - 0.875rem) auto auto 1rem;
}

.field>i.extra {
	inset: calc(var(--_middle) - 1rem) 1rem auto auto;
}

#layoutNameDialog .field.invalid,
#editLayerDialog .field.invalid,
#newCustomComponentDialog .field.invalid {
	margin-block-end: 2rem !important
}

.field.hidden {
	display: none;
}

#componentFontOptions.hidden {
	display: none;
}

button.hidden,
div.hidden {
	display: none;
}

nav.hidden {
	display: none;
}

#circleTypeSelector a {
	transition: background-color 0.2s ease;
}

#circleTypeSelector a.active {
	box-sizing: content-box;
	border: 0.0625rem solid var(--outline);
	box-shadow: none;
}

/* Circle Preview Styling */
#circlePreview {
	--_size: 4rem;
	width: var(--_size);
	height: var(--_size);
	transition: all 0.2s ease;
}

[data-dark-mode=true] #circleTypeSelector a:hover {
	background-color: var(--surface-container-high);
}

[data-dark-mode=true] #circleTypeSelector a.active {
	background-color: var(--primary-container);
	color: var(--on-primary-container);
}

[data-dark-mode=true] #percentageConfiguration .field .label {
	color: var(--on-surface-variant);
}

#saveComponentDialog,
#newCustomComponentDialog.editing #createComponentDialog {
	display: none;
}

#newCustomComponentDialog.editing #saveComponentDialog {
	display: block;
}

#componentColorSelect i.fill:before {
  content: "square";
}

#componentColorSelect li.hidden {
  display: none;
}

#componentColorSelect[data-color=green] > i:first-child,
i.legogreen {
  color: #237841;
}
#componentColorSelect[data-color=red] > i:first-child,
i.legored {
  color: #C91A09;
}
#componentColorSelect[data-color=darkpink] > i:first-child,
i.legodarkpink {
  color: #EF5BB3;
}
#componentColorSelect[data-color=white] > i:first-child,
i.legowhite {
  color: #ffffff;
}
#componentColorSelect[data-color=aqua] > i:first-child,
i.legoaqua {
  color: #B3D7D1;
}
#componentColorSelect[data-color=black] > i:first-child,
i.legoblack {
  color: #000000;
}
#componentColorSelect[data-color=darkazure] > i:first-child,
i.legodarkazure {
  color: #009FE0;
}
#componentColorSelect[data-color=blue] > i:first-child,
i.legoblue {
  color: #0055BF;
}
#componentColorSelect[data-color=lilac] > i:first-child,
i.legolilac {
  color: #7862ce;
}
#componentColorSelect[data-color=tan] > i:first-child,
i.legotan {
  color: #EED9A4;
}
#componentColorSelect[data-color=darktan] > i:first-child,
i.legodarktan {
  color: #B89869;
}
#componentColorSelect[data-color=olivegreen] > i:first-child,
i.legoolivegreen {
  color: #ABA953;
}
#componentColorSelect[data-color=lime] > i:first-child,
i.legolime {
  color: #BBE90B;
}
#componentColorSelect[data-color=yellow] > i:first-child,
i.legoyellow {
  color: #F2CD37;
}
#componentColorSelect[data-color=orange] > i:first-child,
i.legoorange {
  color: #FE8A18;
}
#componentColorSelect[data-color=darkorange] > i:first-child,
i.legodarkorange {
  color: #B35408;
}
#componentColorSelect[data-color=mediumnougat] > i:first-child,
i.legomediumnougat {
  color: #E3A05B;
}
#componentColorSelect[data-color=brown] > i:first-child,
i.legobrown {
  color: #582A12;
}
#componentColorSelect[data-color=darkred] > i:first-child,
i.legodarkred {
  color: #720E0F;
}
#componentColorSelect[data-color=darkgreen] > i:first-child,
i.legodarkgreen {
  color: #184632;
}
#componentColorSelect[data-color=lightbluishgray] > i:first-child,
i.legolightbluishgray {
  color: #A0A5A9;
}
#componentColorSelect[data-color=darkbluishgray] > i:first-child,
i.legodarkbluishgray {
  color: #6C6E68;
}
#componentColorSelect[data-color=brightgreen] > i:first-child,
i.legobrightgreen {
  color: #10CB31;
}

#componentColorSelect[data-color=green] .legogreen:before,
#componentColorSelect[data-color=white] .legowhite:before,
#componentColorSelect[data-color=black] .legoblack:before,
#componentColorSelect[data-color=blue] .legoblue:before,
#componentColorSelect[data-color=yellow] .legoyellow:before,
#componentColorSelect[data-color=orange] .legoorange:before,
#componentColorSelect[data-color=darkorange] .legodarkorange:before,
#componentColorSelect[data-color=mediumnougat] .legomediumnougat:before,
#componentColorSelect[data-color=brown] .legobrown:before,
#componentColorSelect[data-color=darkred] .legodarkred:before,
#componentColorSelect[data-color=darkgreen] .legodarkgreen:before,
#componentColorSelect[data-color=lightbluishgray] .legolightbluishgray:before,
#componentColorSelect[data-color=darkbluishgray] .legodarkbluishgray:before,
#componentColorSelect[data-color=brightgreen] .legobrightgreen:before,
#componentColorSelect[data-color=darkpink] .legodarkpink:before,
#componentColorSelect[data-color=aqua] .legoaqua:before,
#componentColorSelect[data-color=darkazure] .legodarkazure:before,
#componentColorSelect[data-color=lilac] .legolilac:before,
#componentColorSelect[data-color=tan] .legotan:before,
#componentColorSelect[data-color=darktan] .legodarktan:before,
#componentColorSelect[data-color=olivegreen] .legoolivegreen:before,
#componentColorSelect[data-color=lime] .legolime:before,
#componentColorSelect[data-color=red] .legored:before {
  content: "check_box";
}

#componentColorSelect[data-color=white] .legowhite:before {
	background: black;
}

#componentColorMenu {
	z-index: 1101;
	font-size: 1.1rem;
}

#componentColorMenu li {
	gap: 0.5rem;
}

#layerList>li,
#mobileLayerList>li {
	cursor: default !important;
}

#configurationEditor {
	max-width: calc(100% - 5rem - 16px);
	--_margin: calc(5rem + 20px) 0 0 calc(5rem + 16px);
	width: 48rem;
	z-index: 1050;
	transition: background var(--speed) var(--easing);
}

#configurationEditor * {
	transition: background var(--speed) var(--easing);
}

#bgcolorfield *,
#colorfield *,
#subcolorfield * {
  cursor: pointer;
}

#bgcolorfield label,
#colorfield label,
#subcolorfield label,
#layerNameField label,
#componentWidthField label,
#componentHeightField label,
#componentColorSelect label,
#componentTextField label,
#componentFontOptions label,
#componentSizeUnitsField label,
#componentBorderColorField label,
#componentBorderField > label {
  font-size: 1.1rem;
}

#bgcolorfield input[type=text],
#colorfield input[type=text],
#subcolorfield input[type=text],
#layerNameField input[type=text],
#componentWidthField input[type=number],
#componentHeightField input[type=number],
#componentColorSelect input[type=text],
#componentTextField input[type=text],
#componentBorderColorField input[type=text] {
  padding-inline-start: 3.4rem;
  font-size: 1.5rem !important;
}

#snapToWhat,
#componentFontOptions :is(input, select),
#componentSizeUnitsField select,
#componentBorderField nav {
  font-size: 1.5rem !important;
}

#bgcolorfield>i,
#colorfield>i,
#subcolorfield>i,
#componentBorderColorField>i {
  inline-size: var(--_size);
  block-size: var(--_size);
  padding-bottom: 1px;
}

#bgcolorfield>i:after,
#colorfield>i:after,
#subcolorfield>i:after,
#componentBorderColorField>i:after {
  border: 1px solid transparent;
  content: "";
  display: block;
  height: 1px;
  inset: 88% 0 0 3%;
  position: absolute;
  width: 80%;
}

#bgcolorfield>i:after {
  background: var(--background-color);
}

#resetbgcolor {
	z-index: 10;
}

#colorfield>i:after {
  background: var(--gridcolor);
}

#subcolorfield>i:after {
  background: var(--gridsubcolor);
}

#componentBorderColorField>i:after {
  background: var(--component-border-color);
}

#componentShapeSelect a.active {
	box-sizing: content-box;
	border: 0.0625rem solid var(--outline);
	box-shadow: none;
}

.toolbarItem {
	width: 4rem;
	height: 4rem;
	padding: 1rem;
	margin: 0;
	color: #000000;
	box-sizing: border-box;
}

.mainbar > .toolbarItem:nth-child(n+3) {
	border-left: 1px solid var(--toolbar-item-border);
	transition: border-left-color var(--speed) var(--easing);
}

.toolbarItem img.icon {
	max-height: 100%;
	max-height: 100%;
	max-inline-size: none;
	margin: 0;
	max-block-size: 100%;
	width: auto;
	height: auto;
}

.toolbarItem:has(> i) {
	padding: 0.5rem !important;
}

.toolbarItem > i {
	--_size: 2.5rem !important;
}

[data-dark-mode=true] .toolbarItem img.icon,
[data-dark-mode=true] .toolbarItem > i,
[data-dark-mode=true] #buttonLayoutName,
[data-dark-mode=true] .componentBrowser img.custom {
	filter: invert(1);
}

#toolbarLayoutName {
    display: inline-block;
    height: 4rem;
    padding: 0.5rem;
    border-radius: 0;
    line-height: 2;
	vertical-align: middle;
    border-left: 1px solid var(--toolbar-item-border);
	transition: border-left-color var(--speed) var(--easing);
}

.tooltip.bottom.medium-space:before {
    content: "▲";
    position: absolute;
    top: -1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--inverse-surface);
}

#toolbarLayoutName > .tooltip {
	background-color: var(--surface);
	color: var(--on-surface);
}

#toolbarLayoutName > .tooltip:before {
	color: var(--surface) !important;
}

#buttonLayoutName {
	color: black;
	--_padding: 0.5rem;
	white-space-collapse: preserve;
}

#buttonLayoutName.hiddenish {
	height: 0px;
	max-height: 0px;
	overflow: hidden;
}

#buttonLayoutName[disabled] ~ .tooltip {
	display: none !important;
}

#inputLayoutName {
	color: black;
	background: none;
	border: none;
	border-bottom: 2px solid var(--primary);
	border-radius: 0;
	font-size: inherit;
	font-family: inherit;
	height: auto;
	line-height: inherit;
	width: calc(100% - 1rem);
	left: 0.5rem;
	position: absolute;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#inputLayoutName.hidden {
	display: none;
}

[data-dark-mode=true] #inputLayoutName {
	color: white;
}

.button,
button{
	display: inline-block;
	border-radius: 0;
	background: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.button:focus-visible,
button:focus-visible {
	outline: none !important;
}

.button:active,
button:active {
	opacity: 0.6;
}

#darkMode-container button {
	block-size: 100%;
	margin: 0;
}

#darktoggle:after {
	opacity: 1;
}

#darktoggle:is(:focus-visible, :hover):after {
	opacity: 1;
	background-size: 100%;
}

#darkMode-container button:active {
	opacity: 1;
}

.toolbarItem[disabled] {
	opacity: 0.5;
}

.button span.label,
button span.label {
	display: none;
}

i + span.label {
	inset: auto auto auto 0.2rem;
	transform: translateY(100%);
}

.componentEditorActions button {
	flex-grow: 1;
	cursor: pointer;
}

.componentEditorActions button:first-child {
	border-right: 1px solid var(--toolbar-item-border);
}

.componentBrowser {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	overflow-y: auto;
	min-height: 9rem;
	min-width: 33rem;
	max-width: 33rem;
	max-height: 16rem;
}
.componentBrowser img.custom,
.componentBrowser img.track {
	max-width: 6rem;
	max-height: 6rem;
	object-fit: contain;
	flex-shrink: 0;
	margin-top: auto;
	margin-bottom: auto;
}

.componentBrowser>button {
	box-sizing: border-box;
	width: 8rem;
	height: 9rem;
	padding: 1rem 1rem 0 1rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.componentBrowser>button>span {
	color: var(--on-secondary-container);
	width: 7.3rem;
	text-align: center;
	line-height: 1.2;
	font-size: 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (hover:hover) {
	.componentBrowser>button:hover {
		background: var(--component-hover);
		opacity: 1;
	}

	#darkMode-container button:hover {
		opacity: 1;
	}
}

.componentBrowser>button:active {
	background: var(--component-active);
	opacity: 1;
}

#categoryDiv,
#categoryDiv + .search {
	width: 50%;
	margin: 0;
	color: var(--on-surface-variant) !important;
}

#categories ~ i {
	inset: calc(var(--_middle) - 1rem) 0.5rem auto auto;
}

#categories,
#searchText {
	font-size: revert;
	padding-left: 0.5rem;
}

#searchText:focus {
	padding-left: 0.5rem;
}

#searchText ~ i {
	inset: calc(var(--_middle) - .75rem) 0.5rem auto auto;
}

.searchIcon {
	display: inline-flex;
}

#searchClearButton {
	z-index: 2;
}

.searchClear {
	display: none;
}

.hasInput ~ .searchClear {
	display: inline-flex;
}

.hasInput ~ .searchIcon {
	display: none;
}

.tabulator-print-fullscreen {
	background-color: white;
	color: black;
}

@page {
	border: 0 none;
	background-color: white;
	@top-left {
		content: "BrickLayouts";
	}
}

@media print {
	body {
		background-color: white !important;
		color: black !important;
	}
}

/* Media query for screens 40rem (640px) and wider - targets larger screens/tablets and desktop */
@media (min-width: 40rem) {
	h1 {
		width: 24rem;
		min-width: 24rem;
		max-width: 24rem;
	}

	#mobileMenu,
	#mobileLayerEditor {
		max-width: 50vw;
	}

	.componentBrowser {
		min-width: 41rem;
		max-width: 41rem;
	}
}

/* Media query for screens 50rem (800px) and narrower - targets tablets and mobile devices */
@media (max-width: 50rem) {
	#configurationEditor {
		max-width: 48rem;
		--_margin: calc(5rem + 20px) 0 0 0;
		width: 100%;
	}

	#newCustomComponentDialog {
		max-width: 30rem;
		width: 100%;
	}

	#circlePreview {
		--_size: 3.5rem;
	}

	#selToolMenu {
		min-inline-size: 16rem;
		inline-size: 100%;
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		min-block-size: auto;
		z-index: 100;
		transform: none !important;
		background-color: var(--surface-variant) !important;
		color: var(--on-surface-variant) !important;
		border-radius: 0;
	}

	.field.border>:is(input,textarea,select) {
		border-width: 0.75px;
		border-left-width: 0.75px;
	}

	#partInventoryDialog {
		inline-size: 100% !important;
	}

	/* Nested media query for screens 30rem (480px) and shorter - targets mobile devices in landscape orientation */
	@media (max-height: 30rem) {
		#configurationEditor {
			--_margin: 0 0 0 0;
		}
	}
}

/* Media query for screens 30rem (480px) and shorter - targets mobile devices in landscape orientation, or smaller mobile devices */
@media (max-height: 50rem) {
	.componentBrowser {
		max-height: 9rem;
	}
}

/* Media query for screens 28rem (448px) and narrower - targets small mobile devices */
@media (max-width: 28rem) {
	button[data-tab=appearance] {
		font-size: 1rem !important;
	}

	#circlePreview {
		--_size: 3rem;
	}
}

/* Account Menu Styles */
#topRightControls {
	z-index: 1000;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

#darkMode-container {
	position: static;
	top: auto;
	right: auto;
}

#accountMenu-container {
	position: relative;
}

#accountMenuButton {
	cursor: pointer;
}

#accountMenuButton i {
	--_size: 2.5rem;
}

#accountMenuButton:hover {
	background: var(--component-hover);
}

#accountDropdownMenu {
	min-width: 12rem;
	z-index: 1100;
}

#accountDropdownMenu li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	font-size: 1.4rem;
	color: var(--on-surface);
	transition: background-color 0.2s ease;
}

#accountDropdownMenu li:hover {
	background: var(--surface-container-high);
}

#accountDropdownMenu li i {
	--_size: 2rem;
	color: var(--on-surface-variant);
}

[data-dark-mode=true] #accountDropdownMenu {
	background: var(--surface-container);
	border-color: var(--outline);
}

[data-dark-mode=true] #accountDropdownMenu li:hover {
	background: var(--surface-container-high);
}

#cloudSnackbar {
	z-index: 1200;
	background-color: var(--snackbar) !important;
	gap: 0.8rem;
}

#cloudSnackbar.success {
  --snackbar: #A5D6A7;
}

#cloudSnackbar.error {
  --snackbar: var(--error);
}

#cloudSnackbar.info {
  --snackbar: var(--secondary);
}

/* Authentication Modal View Switching */
#authenticationModal .authModal-title,
#authenticationModal .authModal-view {
  display: none;
}

#authenticationModal.mode-login .authModal-login-title,
#authenticationModal.mode-login .authModal-login-view {
  display: block;
}

#authenticationModal.mode-signup .authModal-signup-title,
#authenticationModal.mode-signup .authModal-signup-view {
  display: block;
}

#authenticationModal.mode-presignup .authModal-signup-title,
#authenticationModal.mode-presignup .authModal-presignup-view {
  display: block;
}

#authenticationModal.mode-success .authModal-success-title,
#authenticationModal.mode-success .authModal-success-view {
  display: block;
}

#authenticationModal.mode-confirm .authModal-confirm-title,
#authenticationModal.mode-confirm .authModal-confirm-view {
  display: block;
}

#authenticationModal.mode-forgotpw .authModal-forgotpw-title,
#authenticationModal.mode-forgotpw .authModal-forgotpw-view {
  display: block;
}

#authenticationModal.mode-resetpw .authModal-resetpw-title,
#authenticationModal.mode-resetpw .authModal-resetpw-view {
  display: block;
}

/* Profile Modal View Switching */
#profileModal .profileModal-title,
#profileModal .profileModal-view {
  display: none;
}

#profileModal.view-profile .profileModal-title-profile,
#profileModal.view-profile .profileModal-view-profile {
  display: block;
}

#profileModal.view-editProfile .profileModal-title-editProfile,
#profileModal.view-editProfile .profileModal-view-editProfile {
  display: block;
}

#profileModal.view-changePassword .profileModal-title-changePassword,
#profileModal.view-changePassword .profileModal-view-changePassword {
  display: block;
}

#profileModal.view-deleteAccount .profileModal-title-deleteAccount,
#profileModal.view-deleteAccount .profileModal-view-deleteAccount {
  display: block;
}

#profileModal.view-loading .profileModal-view-loading {
  display: block;
}

#profileModal.view-error .profileModal-view-error {
  display: block;
}

#profileModal.view-verifyEmail .profileModal-title-verifyEmail,
#profileModal.view-verifyEmail .profileModal-view-verifyEmail {
  display: block;
}

#profileModal #verifiedIcon.verified {
  cursor: default;
  opacity: 1;
}

#profileModal.social-user #editProfileBtn,
#profileModal.social-user .profileModal-passwordBtn {
  display: none;
}