.sMConfigOption>span:not(.material-symbols-outlined, .toolTip) {
  font-size: 1rem;
  top: 2px;
  position: relative;
}

nav#sMConfigBar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.2rem;
  background: var(--hotbarColor);
  width: max-content;
  position: fixed;
  top: 50%;
  right: 1rem;
  left: auto;
  bottom: auto;
  transform: translateY(-50%) translateX(0) scale(var(--sm-app-zoom));
  transform-origin: right center;
  height: max-content;
  z-index: 1001;
  transition:
    transform 0.28s ease,
    opacity 0.22s ease,
    top 0.28s ease,
    bottom 0.28s ease;
}

nav#sMConfigBar[data-position="right"],
nav#sMConfigBar:not([data-position]) {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  top: 50%;
  right: 1rem;
  left: auto;
  bottom: auto;
  width: max-content;
  max-width: none;
  overflow: visible;
  transform: translateY(-50%) translateX(0) scale(var(--sm-app-zoom));
  transform-origin: right center;
}

nav#sMConfigBar[data-position="bottom"],
nav#sMConfigBar[data-position="top"] {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 0.35rem;
  right: auto;
  left: 50%;
  width: max-content;
  max-width: calc((100vw - 2rem) / var(--sm-app-zoom));
  height: max-content;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.25rem;
  scrollbar-width: thin;
}

nav#sMConfigBar[data-position="bottom"] {
  top: auto;
  bottom: 1rem;
  transform: translateX(-50%) scale(var(--sm-app-zoom));
  transform-origin: bottom center;
}

nav#sMConfigBar[data-position="top"] {
  top: 1rem;
  bottom: auto;
  transform: translateX(-50%) scale(var(--sm-app-zoom));
  transform-origin: top center;
}

nav#sMConfigBar[data-position="bottom"]::-webkit-scrollbar,
nav#sMConfigBar[data-position="top"]::-webkit-scrollbar {
  height: 0.45rem;
}

nav#sMConfigBar[data-position="bottom"] .sMConfigOption,
nav#sMConfigBar[data-position="top"] .sMConfigOption {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  padding: 0.65rem 0.9rem;
}

nav#sMConfigBar[data-position="bottom"] .historyBar,
nav#sMConfigBar[data-position="top"] .historyBar {
  flex: 0 0 auto;
  width: auto;
  padding-top: 0;
  gap: 0.25rem;
}

nav#sMConfigBar[data-position="bottom"] .historyButton,
nav#sMConfigBar[data-position="top"] .historyButton {
  width: 2.6rem;
  min-width: 2.6rem;
  height: auto;
  align-self: stretch;
}

nav#sMConfigBar[data-position="bottom"] #panelSelect {
  top: auto;
  bottom: calc(100% + 0.5rem);
  right: auto;
  left: 0;
}

nav#sMConfigBar[data-position="top"] #panelSelect {
  top: calc(100% + 0.5rem);
  bottom: auto;
  right: auto;
  left: 0;
}

nav#sMConfigBar[data-position="bottom"].invisible {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%) scale(var(--sm-app-zoom));
  transform-origin: bottom center;
}

nav#sMConfigBar[data-position="top"].invisible {
  top: 1rem;
  right: auto;
  left: 50%;
  bottom: auto;
  transform: translateX(-50%) scale(var(--sm-app-zoom));
  transform-origin: top center;
}

nav#sMConfigBar[data-position="bottom"].invisible #hideConfig,
nav#sMConfigBar[data-position="top"].invisible #hideConfig {
  min-width: max-content;
}

:root[data-theme="dark"] .sMConfigOption:not(.selected) {
  background: rgba(var(--baseColor), 0.1);
}

.sMConfigOption {
  background: rgba(var(--baseColor), 0.25);
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
  transition: 0.25s ease-in-out;
  cursor: pointer;
  position: relative;
  font-family: "Inter";
  color: var(--textColor);
  line-height: 1;
  min-width: 12rem;
}

.sMConfigOption .configIcon,
.sMModalTitle .configIcon {
  height: 1.25rem;
  width: 1.25rem;
  object-fit: contain;
}

:root:not([data-theme="dark"]) .templateIcon {
  filter: invert(1);
}

.sMConfigOption.selected {
  background: var(--selectedColor);
  transition: 0s;
}

@media (max-width: 768px) {
  nav#sMConfigBar[data-position="bottom"],
  nav#sMConfigBar[data-position="top"] {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  nav#sMConfigBar[data-position="bottom"]::-webkit-scrollbar,
  nav#sMConfigBar[data-position="top"]::-webkit-scrollbar {
    display: none;
  }

  nav#sMConfigBar[data-position="bottom"] .sMConfigOption,
  nav#sMConfigBar[data-position="top"] .sMConfigOption {
    flex: 0 0 auto;
    padding: 0.35rem;
    gap: 0.15rem;
  }

  nav#sMConfigBar[data-position="bottom"] .sMConfigOption>span:not(.material-symbols-outlined),
  nav#sMConfigBar[data-position="top"] .sMConfigOption>span:not(.material-symbols-outlined) {
    display: none;
  }
}

.historyBar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding-top: 0.15rem;
}

.historyButton {
  width: 2.6rem;
  height: 2.6rem;
  min-width: 2.6rem;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(var(--baseColor), 0.25);
  color: var(--textColor);
  border: 0;
  cursor: pointer;
  transition: 0.15s ease-in-out;
}

.historyButton:hover:enabled {
  background: var(--hoverColor);
}

.historyButton .material-symbols-outlined {
  font-size: 1.3rem;
  line-height: 1;
}

nav#sMConfigBar.invisible .historyBar {
  display: none;
}

.sMModal {
  max-width: min(90vw, 80rem);
  background: var(--hotbarColor);
  display: none;
  min-width: min(45rem, 90vw);
  width: max-content;
  height: max-content;
  z-index: 2000;
  box-sizing: border-box;
}

.sMModal.exitTabConfig,
.sMModal.subPanelConfig,
.sMModal.guideArrowConfig {
  min-width: 40rem;
  max-width: min(90vw, 78rem);
}

.sMModalContent {
  padding: 1rem;
  max-height: 80vh;
  overflow: auto;
  box-sizing: border-box;
}


html[data-config-position="top"] .modals {
  top: 4.75rem;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  max-height: calc(100vh - 6.25rem);
}
html[data-config-position="bottom"] .modals {
  top: 1.5rem;
  right: 1.5rem;
  bottom: 5rem;
  left: 1.5rem;
  max-height: calc(100vh - 6.5rem);
}

.modals {
  width: max-content;
  inset: 1.5rem;
  position: fixed;
  height: max-content;
  max-height: 87.5%;
}

#export {
  background-color: rgba(255, 0, 0, 0.25);
}

#export.hover {
  background-color: rgba(255, 0, 0, 0.5);
}

span.toolTip {
  position: fixed;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.2rem 0.5rem;
  font-size: 13px;
  opacity: 1;
  transition: 0.25s ease-in-out transform, 0.25s ease-in-out opacity;
  z-index: 3;
  font-family: "Inter", sans-serif;
  width: max-content;
  max-width: 200px;
}

label>.toolTip {
  font-family: "Inter";
}

.modals label {
  position: relative;
}

label span.toolTip,
.listNavOptions button .toolTip {
  width: 8rem;
  text-align: right;
  left: 4rem;
  height: max-content;
  top: 0.5rem;
  background: rgba(0, 0, 0, 0.8);
}

@keyframes appear {
  from {
    display: none;
    opacity: 0;
  }

  to {
    display: block;
    opacity: 1;
  }
}

.sMConfigOption:not(.selected):hover {
  background: var(--hoverColor);
}

#panelSelect {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 12rem;
  min-height: 10rem;
  position: absolute;
  background-color: var(--hotbarColor);
  top: 0;
  right: calc(100% + 0.5rem);
  left: auto;
  padding: 0.5rem;
  gap: 0.5rem;
  z-index: 2;
  box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.2);
  border-radius: 0;
  font-family: "Inter", sans-serif;
}

.panelPopoverHeader {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem;
  width: 100%;
}

.panelPopoverHeader h5 {
  margin: 0;
  font-family: inherit;
}

.panelPopoverHint {
  font-size: 0.65rem;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.8;
  font-family: inherit;
}

.panelActions {
  display: flex;
  width: 100%;
  gap: 0.25rem;
}

.panelActions button {
  flex: 1 1 auto;
  padding: 0.25rem 0.35rem;
  border-radius: 0;
}

#panelList {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  max-height: 8.5rem;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.panelListButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.25rem 0.4rem;
  font-size: 0.75rem;
  background: rgba(var(--baseColor), 0.3);
  border-radius: 0;
  cursor: grab;
  position: relative;
  user-select: none;
  border: 1px solid transparent;
}

.panelListButton.active {
  border-color: var(--selectedColor);
  background: rgba(var(--baseColor), 0.6);
}

.panelListButton.panelWiggle {
  animation: textEditorBlockWiggle 0.12s ease-in-out infinite alternate;
  animation-delay: var(--wiggle-delay, 0s);
}

.panelListButton.dragging {
  opacity: 0.5;
  cursor: grabbing;
  animation: none !important;
}

.panelListButton.dropBefore::before,
.panelListButton.dropAfter::after {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  height: 0.15rem;
  background: var(--selectedColor);
  border-radius: 0.15rem;
  pointer-events: none;
}

.panelListButton.dropBefore::before {
  top: -0.1rem;
}

.panelListButton.dropAfter::after {
  bottom: -0.1rem;
}

.panelListRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.panelListRow:last-child {
  margin-bottom: 0;
}

.panelListRow .panelListButton {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.panelDeleteButton {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
  background: #111;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.panelDeleteButton .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

.panelSpacingControl {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

.panelSpacingControl label {
  font-size: 0.75rem;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0.85;
  font-family: inherit;
}

.panelSpacingInputs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}

.panelSpacingInputs input[type="range"] {
  flex: 1 1 auto;
}

.panelSpacingInputs input[type="number"] {
  width: 3.5rem;
  padding: 0.2rem;
  border-radius: 0;
}

.postThicknessControl {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.postThicknessControl label {
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
  width: auto;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}

.postThicknessControl input {
  width: 4.5rem;
  padding: 0.25rem;
}

.hitbox {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}

.listNav>.scrollMenu {
  display: flex;
  flex-direction: row;
  justify-content: left;
  width: 10rem;
  white-space: nowrap;
  overflow-x: auto;
  gap: 4px;
  margin-left: -8px;
}

/* Minimalistic scrollbar */
.scrollMenu {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.sMModalContent>div:not(#sMSPSettings),
#sMSPSettings>div {
  width: max-content;
  flex-grow: 1;
  height: 100%;
}

legend {
  font-family: "Inter" !important;
  text-align: center;
  width: max-content !important;
  padding: 0 0.5rem;
  font-size: 16px;
}

nav.sMModalBar {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  height: max-content;
  background-color: rgba(var(--baseColor), 0.5);
}

:root[data-theme="dark"] nav.sMModalBar {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  height: max-content;
  background-color: rgb(50, 75, 255, 1);
}

:root {
  --sm-app-zoom: 0.6667;
}

main {
  transform: scale(var(--sm-app-zoom));
  transform-origin: center center;
}

.top-right-links {
  transform: scale(var(--sm-app-zoom));
  transform-origin: top right;
}


.modals {
  transform: scale(var(--sm-app-zoom));
  transform-origin: top left;
}

#signMakerSettingsModal .settingsModalWindow {
  transform: scale(var(--sm-app-zoom));
  transform-origin: center center;
}

nav.sMModalBar *:not(.material-symbols-outlined, select, button, input) {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

nav.sMModalSubBar {
  padding: 0.2rem;
}

:root[data-theme="dark"] div.sMModalTitle {
  background-color: rgb(50, 50, 200, 1);
}

div.sMModalTitle {
  background-color: rgba(var(--baseColor), 0.75);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.75rem;
  gap: 0.25rem;
  margin-right: 0.5rem;
}

div.sMModalTab {
  padding: 0rem 0.5rem;
  font-size: 15px;
  cursor: pointer;
}

div.sMModalTab.selected {
  text-decoration: underline;
}

div.sMModalTitle *,
div.sMModalTitle {
  font-size: 16px;
}

.tabHidden {
  display: none !important;
}

div#sMPanelPadding,
div#sMExitTabSetting,
div#sMSPSettings,
div#sMAPL {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: start;
  gap: 1rem;
}

input[type="number"] {
  border: 0;
  margin: 0.25rem;
}

.listNav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.listNavOptions {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.5rem;
  flex-wrap: wrap;
}

.listNavOptions button,
.listNavOptions label {
  width: max-content;
  position: relative;
}

.listNavOptions .listNavLabel {
  flex-basis: 100%;
  text-align: right;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

#exitTabNumber,
#subPanelNumber {
  width: 3rem;
}

.listNav .scrollMenu {
  flex-grow: 1;
  flex-direction: row;
  justify-content: left;
  width: 10rem;
}

#subPanelList {
  gap: 0.25rem;
  align-items: stretch;
}

.subPanelTabGroup {
  display: inline-flex;
  align-items: stretch;
  background: #000;
  color: #fff;
}

.subPanelTabGroup.emptyGlobalTab,
.subPanelTabGroup.lockedSubPanelTab {
  background: rgba(var(--baseColor), 0.35);
}

#subPanelList .subPanelTabButton,
#subPanelList .subPanelTabDeleteButton {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: "Inter", sans-serif;
  line-height: 1;
}

#subPanelList .subPanelTabButton {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
}

#subPanelList .subPanelTabDeleteButton {
  width: 1.1rem;
  min-width: 1.1rem;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#subPanelList .subPanelTabDeleteButton .material-symbols-outlined {
  font-size: 0.75rem;
  line-height: 1;
}

#subPanelList .subPanelTabDeleteButton:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.resetClass {
  background-color: rgb(255, 0, 0, 20%);
  padding: 0.3rem;
}

.resetClass:hover {
  background-color: rgb(255, 0, 0, 30%);
}

div#modalHolder {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
}

::backdrop {
  background-color: rgb(0, 0, 0, 0.3);
  z-index: 2;
}

dialog {
  border: 0;
  padding: 1rem;
  width: 80vw;
  max-width: 800px;
  max-height: 85vh;
  background: white;
  color: black;
  display: none;
  flex-direction: row;
  gap: 16px;
  overflow: auto;
  margin: 0;
  position: relative;
  z-index: 4001;
}


#welcomeToSignMaker {
  width: 70%;
}

#welcomeToSignMaker img {
  width: 100%;
}

#welcomeToSignMaker {
  position: relative;
  width: min(70vw, 56rem);
  max-height: 85vh;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 1.25rem;
  box-sizing: border-box;
  overflow: auto;
}

#welcomeToSignMaker img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

#welcomeToSignMaker h3,
#welcomeToSignMaker p {
  margin: 0;
}

#welcomeToSignMaker .options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

div.options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid black;
}

#downloadContent {
  position: relative;
}

div.options button {
  padding: 0.5rem;
  font-size: 1.25rem;
}

div.options a {
  color: black;
}

.SMSPNewElementHolder {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background-color: rgb(var(--baseColor), 0.4);
}

.SMSPNewElementHolder>span {
  font-size: 0.7rem;
}

/* OLD - TO CONFIGURE */

.exitTabButton.active,
.exitTabNestedButton.active {
  background-color: rgb(200, 200, 200);
}

:root[data-theme="dark"] .exitTabButton.active,
:root[data-theme="dark"] .exitTabSelect.active,
:root[data-theme="dark"] .exitTabNestedButton.active {
  background-color: rgb(0, 0, 255);
}

:root[data-theme="dark"] .scrollMenu button:not(.active),
:root[data-theme="dark"] .scrolMenu button:not(.active) {
  background-color: var(--black);
}

input,
select,
textarea {
  width: rem;
  margin: 0.25rem;
  padding: 0.25rem;
  border: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

label {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  width: 7.5rem;
  text-align: right;
  display: inline-block;
  pointer-events: none;
}

label .resetBtn,
label button,
label input,
label select,
label textarea,
label .material-symbols-outlined {
  pointer-events: auto;
}

label.noLabelAlignment {
  width: max-content;
}

label:hover {
  font-weight: 600;
}

select {
  background: rgb(240, 240, 240) url(../img/other-symbols/select.svg) no-repeat right;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 17px;

  cursor: pointer;
}

select:hover,
select:focus {
  background-color: rgb(var(--baseColor));
  font-weight: 700;
}

input,
select {
  background-color: rgb(var(--inputColor));
  color: var(--textColor);
}

:root[data-theme="dark"] .listNavOptions input,
:root[data-theme="dark"] .listNavOptions button {
  background-color: rgb(40, 40, 255);
}

select.fontPreviewSelect {
  font-family: inherit;
  height: 1.35rem;
  min-height: 1.35rem;
  line-height: 1.1;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.25rem;
  padding-right: 17px;
  box-sizing: border-box;
}

button,
input[type="button"] {
  display: flex;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: 0.15s ease-in-out;
  border: 0;
  width: max-content;
  background-color: rgb(var(--inputColor));
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: var(--textColor);
}

button:not(.textEditorBlock, .sMControlRow .sMConfigOption):enabled:hover,
input[type="button"]:not(.textEditorblock,
  .sMControlRow,
  .sMConfigOption):enabled:hover {
  background-color: var(--selectedColor);
}

button:disabled,
input[type="button"]:disabled {
  cursor: default;
}

.textEditorBlock {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999rem;
  cursor: grab;
  user-select: none;
  transform-origin: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.textEditorBlock:active {
  cursor: grabbing;
}

.textEditorBlock.blockWiggle {
  animation: textEditorBlockWiggle 0.12s ease-in-out infinite alternate;
  animation-delay: var(--wiggle-delay, 0s);
}

.textEditorBlock.dragging {
  opacity: 0.45;
  cursor: grabbing;
  animation: none;
}

.textEditorBlock.dropBefore::before,
.textEditorBlock.dropAfter::after {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 0.2rem;
  border-radius: 0.2rem;
  background: var(--selectedColor);
  pointer-events: none;
}

.textEditorBlock.dropBefore::before {
  left: -0.2rem;
}

.textEditorBlock.dropAfter::after {
  right: -0.2rem;
}

/* Compact block type dropdown inside block label pills */
.textEditorBlock {
  position: relative;
  display: inline-grid;
  grid-template-columns: max-content 0.75rem;
  align-items: center;
  justify-content: center;
  column-gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  line-height: 1;
  box-sizing: border-box;
}

.textEditorBlockLabel {
  display: block;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
}

.textEditorBlock .blockTypeChevron {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.75rem;
  height: 0.75rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  transform: translateY(0.02rem);
}

.textEditorBlock .blockTypeInlineSelect {
  position: absolute;
  top: 0;
  right: 0.35rem;
  width: 1.25rem;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
}

.textEditorBlock .blockTypeInlineSelect:focus {
  outline: none;
}

.sMControlRow.dropActive {
  background-color: rgba(var(--baseColor), 0.35);
}

#sMSPCreateRow.dropActive {
  outline: 2px dashed var(--selectedColor);
  background-color: rgba(var(--baseColor), 0.45);
}

@keyframes textEditorBlockWiggle {
  from {
    transform: rotate(-2deg) scale(1.02);
  }

  to {
    transform: rotate(2deg) scale(1.02);
  }
}

.sdArrow_rotationButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
  justify-content: center;
}

.sdArrow_rotationButtons>* {
  font-size: 20px;
  width: 10%;
}

#sdArrow_flipButton {
  font-size: 24px;
  margin-top: 0.5rem;
  width: 10rem;
  justify-self: center;
}

[data-property="sdArrow"] .sdArrowTopControlRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0.25rem 0 0.35rem 0;
}

[data-property="sdArrow"] .sdArrowInlineControl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: max-content;
}

[data-property="sdArrow"] .sdArrowInlineControl label {
  width: max-content;
  min-width: 0;
  white-space: nowrap;
  margin: 0;
}

[data-property="sdArrow"] #sdArrow_rotation {
  width: 8rem;
  margin: 0;
}

[data-property="sdArrow"] #sdArrow_rotationVal {
  width: 3.25rem;
  margin: 0;
}

[data-property="sdArrow"] #sdArrow_size {
  width: 4.25rem;
  margin: 0;
}

[data-property="sdArrow"] .sdArrowPickerRow {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: left;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0.35rem;
}

[data-property="sdArrow"] .sdArrowPickerRow label {
  width: max-content;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

[data-property="sdArrow"] #sdArrow_chooseBtn {
  margin: 0;
}

[data-property="sdArrow"] #sdArrow_selectedLabel {
  white-space: nowrap;
}

.sMControlRow:hover {
  cursor: pointer;
}

textarea {
  min-width: 15rem;
  min-height: 5rem;
  max-width: 25rem;
  transition: none;
}

#shieldBacksLabel {
  width: auto;
}

.shields div {
  border-radius: 0.25rem;

  width: -moz-max-content;
  width: -webkit-max-content;
  width: intrinsic;
}

.shields div:nth-child(odd) {
  background-color: rgba(var(--baseColor), 0.33);
}

.shields div:nth-child(even) {
  background-color: rgba(var(--baseColor), 0.11);
}

.shields label,
.shields select:first-of-type {
  width: auto;
}

.shields label {
  margin: 0;
}

.clear:hover {
  background-color: rgb(247, 176, 176) !important;
}

#controlCitiesLabel {
  position: relative;
  top: -5rem;
}

#guideArrowLanes {
  width: 2.25rem;
}

#actionMessage,
#g_actionMessage {
  width: 15.75rem;
}

#guideArrowLanes {
  width: 3rem;
}

#oSNum {
  margin-left: 8.5rem;
}

#currentPanel {
  width: auto;
  background: linear-gradient(to bottom,
      rgba(var(--baseColor), 0.2),
      rgba(var(--baseColor), 0.4));
  border-radius: 0rem 0rem 1rem 2rem;
  padding: 0.4rem;
  display: table;
}

#panelNumber {
  background-color: rgb(var(--baseColor));
  text-align: center;
  padding: 0.1rem;
  border-radius: 0;
  width: 3rem;
}

#panelNumberTitle {
  font-size: 1.3rem;
  padding: 0.2rem;
}

#downloadContent {
  position: relative;
  background-color: rgb(226 236 255);
  padding: 1rem;
  width: 90%;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 1.25rem;
  height: 55%;
}

#downloadContent h3 {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  width: max-content;
  z-index: 1;
}

#downloadContents {
  width: 33%;
  position: static;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#downloadPreview {
  width: 67%;
  min-width: 0;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#downloadPreview img,
#downloadPreview iframe {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

.downloadCloseButton {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  min-width: 2.2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.downloadCloseButton .material-symbols-outlined {
  font-size: 1.2rem;
  line-height: 1;
}

#downloadContent .options.downloadActionButtons {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.downloadPrimaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: #8f5a69;
  color: #fff;
  padding: 0.75rem 1rem;
  width: 100%;
  min-width: 0;
  font-size: 1.05rem;
}

.downloadPrimaryButton:hover {
  background: #9b6574;
}

.downloadPrimaryButton .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}

.downloadEntirePostRow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 4.1rem;
  margin-bottom: 0.5rem;
}

.downloadEntirePostRow #entirePostLabel {
  width: auto;
  text-align: left;
  margin: 0;
}

.downloadEntirePostRow #entirePost {
  margin: 0;
  vertical-align: middle;
}

#downloadContents > #entirePostLabel {
  display: inline-block;
  width: auto;
  text-align: left;
  margin-top: 4.25rem;
  margin-right: 0.35rem;
}

#downloadContents > #entirePost {
  vertical-align: middle;
  margin-top: 4.25rem;
}

.downloadPreviewLoading {
  font-family: "Inter", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 0.85;
  animation: downloadPreviewPulse 0.9s ease-in-out infinite alternate;
}

@keyframes downloadPreviewPulse {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

#singularPanel {
  display: none;
}

:root[data-theme="light"] .activated {
  background-color: rgb(200, 200, 200);
}

:root[data-theme="dark"] .activated {
  background-color: rgb(100, 100, 100);
}

html[data-theme="dark"] select {
  color-scheme: dark;
}
html[data-theme="dark"] select {
  background-color: #000;
  color: #fff;
  border-color: #666;
}
html[data-theme="dark"] select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  padding-right: 2rem;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.controlTextArea {
  font-size: 0.8rem;
  font-family: "Clearview 4W";
}

.radioOption {
  width: auto;
}

.exitTabGroup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 0 0 auto;
}

.exitTabButton,
.exitTabNestedButton {
  background: rgb(230, 230, 230);
  border-radius: 0;
  min-width: 6rem;
  padding: 0.25rem 0.5rem;
  flex: 0 0 auto;
  position: relative;
}

.exitTabNestedButton {
  font-size: 0.75rem;
  margin-left: 0.5rem;
  min-width: 5rem;
}

.exitTabButton:hover,
.exitTabNestedButton:hover {
  background: rgb(200, 200, 200);
}

.exitTabButton.blockWiggle {
  animation: textEditorBlockWiggle 0.12s ease-in-out infinite alternate;
  animation-delay: var(--wiggle-delay, 0s);
}

.exitTabButton.dragging {
  opacity: 0.6;
  animation: none;
  cursor: grabbing;
}

.exitTabButton.dropBefore::before,
.exitTabButton.dropAfter::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  width: 0.2rem;
  background: var(--selectedColor);
  pointer-events: none;
}

.exitTabButton.dropBefore::before {
  left: -0.25rem;
}

.exitTabButton.dropAfter::after {
  right: -0.25rem;
}


nav#sMConfigBar.invisible {
  top: auto;
  bottom: 1rem;
  right: 1rem;
  left: auto;
  width: max-content;
  transform: translateY(0) translateX(0);
}

nav#sMConfigBar .sMConfigOption {
  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    background-color 0.25s ease-in-out;
}

nav#sMConfigBar.invisible .sMConfigOption:not(#hideConfig) {
  opacity: 0;
  transform: translateX(0.9rem);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

nav#sMConfigBar.invisible #hideConfig {
  display: flex;
  opacity: 1;
  transform: none;
  visibility: visible;
}

nav#SMConfigBar.invisible>.sMConfigOption:not(#hideConfig) {
  display: none;
}

#smSPTextEditor,
#smSPShieldEditor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(var(--baseColor), 0.2);
  padding: 1rem;
  gap: 1rem;
}

#sMSPCreate,
#smSPElement,
#smSPShieldHeader,
#smSPShieldList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  background-color: rgb(var(--baseColor), 0.3);
  width: 100%;
}

#smSPElement,
#smSPShieldList {
  gap: 1rem;
}

#sMSPCreate>span,
#sMSPElement>span,
#smSPShieldHeader>span,
#smSPShieldList>span {
  font-size: 16px;
}

#sMSPTextList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  background-color: rgb(var(--baseColor), 0.15);
  padding: 0.5rem;
  width: 100%;
}

.smControlRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background-color: rgb(var(--baseColor), 0.15);
  padding: 0.25rem;
  width: 100%;
  height: m;
}

:root[data-theme="dark"] .smControlRow.selected {
  background-color: rgb(var(--baseColor), 0.25);
}

.smControlRow.selected {
  background-color: rgb(var(--baseColor), 0.5);
}

.sMControlRow.rowWiggle {
  animation: textEditorBlockWiggle 0.12s ease-in-out infinite alternate;
  animation-delay: var(--wiggle-delay, 0s);
}

.sMControlRow.dragging {
  opacity: 0.5;
  animation: none;
  cursor: grabbing;
}

.sMControlRow.dropBefore::before,
.sMControlRow.dropAfter::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  height: 0.2rem;
  border-radius: 0.2rem;
  background: var(--selectedColor);
  pointer-events: none;
}

.sMControlRow.dropBefore::before {
  top: -0.15rem;
}

.sMControlRow.dropAfter::after {
  bottom: -0.15rem;
}

.smControlRow * {
  font-size: 16px;
  padding: 4px 8px;
}

.smControlRow *.selected {
  text-decoration: none;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.4);
}

.sdCtrlText {
  background-color: var(--green);
  color: white;
}

.sdBlocker {
  background-color: white;
  color: black;
}

.sdShield {
  background-color: var(--blue);
  color: white;
}

.sdAdvisory {
  background-color: var(--yellow);
  border-radius: 8px;
}

.sdTollLogo {
  background-color: var(--purple);
  color: white;
}

.sdIcon {
  background-color: var(--brown);
  color: white;
}

.sdBeacon {
  background-color: var(--black);
  color: var(--yellow);
}

.sdActionMessage {
  background-color: var(--green);
  color: white;
}


.sdShieldTopRow,
.sdShieldSecondRow,
.sdShieldThirdRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0;
}

.sdShieldTopRow,
.sdShieldSecondRow,
.sdShieldThirdRow,
.sdShieldFontRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0;
}

.sdShieldTopRow {
  column-gap: 0.3rem;
}

.sdShieldTopRow label[for="sdShield_shieldType"] {
  margin-left: 0.25rem;
}

.sdShieldTopRow label[for="sdShield_shieldSize"] {
  margin-left: 0.2rem;
}

.sdShieldScaleLabel {
  width: 11.5rem;
  white-space: nowrap;
  line-height: 1;
}

.sdShieldBannerCustomInput {
  width: 8rem;
}

.sdShieldPositionLabel {
  margin-left: 0;
  width: 3.6rem;
}

.sdShieldCapLabel {
  width: 5.1rem;
  line-height: 1.02;
  text-align: right;
  margin-left: 0;
}

.sdShieldBannerFontSizeLabel {
  width: 10.5rem;
  white-space: nowrap;
  margin-left: 0.4rem;
}

.sdShieldRouteNumberInput,
.sdShieldNumericInput,
#sdBlock_topPaddingVal,
#sdBlock_bottomPaddingVal {
  font-size: 1.1rem;
}

.sdShieldRouteNumberInput {
  width: 7rem;
}

.sdShieldCountyTextInput {
  width: 7rem;
}


.sdShieldBannerGroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.45rem 0;
}

label[for="sdBlock_bottomPadding"] {
  width: 10rem;
  white-space: nowrap;
}

.sdShieldRouteNumberInput {
  width: 7rem;
  font-size: 1.1rem;
}

.sdShieldCountyTextInput {
  width: 7rem;
}

.sdShieldCountyHidden {
  display: none !important;
}

.sdShieldBannerGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0.35rem 0;
}

.sdElectronicSign {
  background-color: var(--black);
  color: var(--orange);
}

#smSPProperties,
#smSPBlockProperties,
#smSPShieldProperties {
  background-color: rgb(var(--baseColor), 0.225);
  padding: 0.5rem;
  width: 100%;
}

.sdCtrlTextTopRow,
.sdCtrlTextSecondRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  width: 100%;
}

.sdCtrlTextTopRow {
  margin-bottom: 0.35rem;
}

.sdCtrlTextLayout br {
  display: none;
}

.sdCtrlTextSettingsRow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 0.35rem;
}

.sdCtrlTextTopRow label,
.sdCtrlTextSecondRow label {
  width: max-content;
  min-width: 0;
  text-align: right;
}

.sdTextEditorContentCompact {
  width: 10rem;
  min-width: 0;
  flex: 0 0 10rem;
}

.sdTextEditorFontCompact {
  width: 8.5rem;
  min-width: 0;
  flex: 0 0 8.5rem;
}

.sdTextEditorWide {
  width: 70%;
}

.sdTextEditorSmall {
  width: 3rem;
}

.hidden {
  display: none;
}

.smSPShieldVisual {
  height: 30px;
  width: auto;
}

.smSPShieldLargeVisual {
  height: 90px;
  width: auto;
}

.smSPShieldRow,
.smSPShieldGroup {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(var(--baseColor), 0.5);
  cursor: pointer;
}

.smSPShieldRow:hover,
.smSPShieldGroup:hover {
  background-color: rgb(200, 200, 200, 0.5);
}

.smSPShieldRow.selected {
  background-color: rgb(var(--baseColor), 1);
}

.smSPShieldGroupHolder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
}

.newBlock {
  background-color: rgb(0, 0, 0, 0.3);
  color: white;
  width: 100%;
  padding: 0.25rem;
  text-align: center;
  font-weight: bold;
  height: 1.5rem;
  border: 3px dashed black;
}

.smSPShieldBlock {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  flex-grow: 1;
  padding: 0.25rem;
}

.dragIndicator {
  height: stretch;
  aspect-ratio: 1 / 1;
  display: none;
  background: none;
}

.dragIndicator:hover {
  background-color: rgb(0, 0, 0, 0.2) !important;
}

.smSPShieldRow.selected .dragIndicator,
.smSPShieldGroup.selected>.dragIndicator {
  display: block;
}

#smSPShieldList {
  flex-direction: column;
}

#smSPShieldImgConfig {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: rgb(var(--baseColor), 0.25);
  padding: 1rem;
}

#smSPShieldImgConfig>div {
  background-color: rgb(var(--baseColor), 0.125);
  height: stretch;
}

#smSPShieldImgConfig>div:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
}

#smSPShieldImgConfig>div:nth-child(2) {
  padding: 0.5rem;
}

#changeImgBtn,
#smSPShieldAdvanced {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

#advancedMenu {
  padding: 0.5rem;
  margin-top: 0.5rem;
  background-color: rgb(var(--baseColor), 0.2);
}

#shieldImgSelector {
  background: none;
  padding: 0;
  flex-direction: row;
  width: 50%;
  height: 80%;
}

#shieldImgSelector>div {
  padding: 1rem;
}

#shieldImgSelector>div {
  background: canvas;
}

.shieldLibrary {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shieldLibrary>header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#shieldImgSelectorClose {
  font-size: 20px;
  padding: 0.125rem 1rem;
  background-color: rgb(255, 0, 0, 0.2);
}

#shieldImgSelectorClose:hover {
  background-color: rgb(255, 0, 0, 0.6);
}

.shieldLibrary>nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.shieldLibrary>nav button {
  font-size: 24px;
  padding: 0.5rem 2rem;
}

.shieldLibrary>nav button.selected {
  background-color: rgb(0, 0, 255, 0.7);
  color: white;
}

.shieldLibrary[data-tab="presetShieldList"] #uploadShield {
  display: none;
}

.shieldLibrary[data-tab="uploadShield"] #presetShieldList,
.shieldLibrary[data-tab="uploadShield"] #presetShieldSearch {
  display: none;
}

.shieldLibrary>nav button.selected:hover {
  background-color: rgb(0, 0, 255, 1) !important;
}

.shieldLibrary>nav button:not(.selected):hover {
  background-color: rgb(0, 0, 255, 0.125) !important;
}

.shieldPicker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 13rem;
  font-family: "Inter", sans-serif;
}

.shieldPickerTrigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.2rem 0.45rem;
  border: none;
  background-color: rgb(var(--inputColor));
  color: var(--textColor);
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-weight: 600;
}

.shieldPickerTriggerIcon {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  flex: 0 0 auto;
  background: rgba(255,255,255,0);
}

.shieldPickerTriggerLabel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
}

.shieldPickerTriggerCaret {
  flex: 0 0 auto;
  opacity: 0.85;
  transition: transform 0.18s ease;
}

.shieldPicker.open .shieldPickerTriggerCaret {
  transform: rotate(180deg);
}

.shieldPickerPopover {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  z-index: 5000;
  background: rgb(var(--inputColor));
  color: var(--textColor);
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 18rem;
  max-width: min(90vw, 28rem);

  max-height: 0;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.2rem);
  transition:
    max-height 0.24s ease,
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.24s;
}

.shieldPicker.open .shieldPickerPopover {
  max-height: min(88vh, 52rem);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    max-height 0.24s ease,
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}

.shieldPickerTree {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.15rem 0;
}

.shieldPickerTreeRow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.shieldPickerTreeChildren {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.12rem);
  transition:
    max-height 0.24s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.shieldPickerTreeChildren.expanded {
  max-height: 120rem;
  opacity: 1;
  transform: translateY(0);
}

.shieldPickerItem {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.26rem 0.5rem;
  padding-left: calc(0.5rem + (var(--shieldPickerDepth, 0) * 1.75rem));
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  min-height: 1.75rem;
  width: 100%;
  font-size: 0.88rem;
}

.shieldPickerItem:hover {
  background: rgba(var(--baseColor), 0.25);
}

.shieldPickerItem.selected {
  background: var(--selectedColor);
  color: white;
}

.shieldPickerItem.disabled {
  opacity: 0.55;
  cursor: default;
}

.shieldPickerItemIcon {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.shieldPickerItemLabel {
  flex: 1 1 auto;
  min-width: 0;
}

.shieldPickerItemCaret {
  flex: 0 0 auto;
  opacity: 0.8;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.shieldPickerItem.expanded .shieldPickerItemCaret {
  transform: rotate(-90deg);
}

#presetShieldList {
  overflow: auto;
  flex-grow: 1;
}

.shieldItemImg {
  height: 70px;
  background: rgb(0, 0, 255, 0.8);
  padding: 0.25rem;
}

.shieldCategoryType {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  cursor: pointer;
}

.shieldCategoryType.selected,
.customShieldItem.selected {
  background-color: rgb(0, 0, 255, 0.1);
}

.shieldCategoryType.selected .shieldItemName {
  font-weight: 600;
}

.shieldCategoryHead {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
  background-color: rgb(0, 0, 255, 0.5);
  padding: 0.5rem;
  color: white;
  margin-left: -1rem;
  cursor: pointer;
}

.shieldCategory {
  padding-left: 1rem;
}

.shieldCategoryHead:hover {
  background-color: rgb(0, 0, 255, 0.75);
}

.shieldItemName {
  font-size: 24px;
  text-align: center;
}

.shieldCategoryType:not(.selected):nth-child(odd),
.customShieldItem:not(.selected):nth-child(odd) {
  background-color: rgb(0, 0, 0, 0.075);
}

.shieldCategoryType:not(.selected):nth-child(even),
.customShieldItem:not(.selected):nth-child(even) {
  background-color: rgb(0, 0, 0, 0.025);
}

.shieldCategoryType:hover,
.customShieldItem:hover {
  background-color: rgb(0, 0, 255, 0.2) !important;
}

#presetShieldSearch {
  width: 100%;
  border: 1px solid black;
  padding: 0.75rem;
  margin: 0;
  font-size: 20px;
}

.shieldPreview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.selectedShieldPreview {
  height: 164px;
  background-color: var(--shieldBackColor, rgb(0, 0, 255, 0.8));
  border-radius: var(--shieldBackRadius);
}

.selectedShieldName {
  font-size: 24px;
  font-weight: 600;
}

.shieldPreview>footer {
  margin-top: auto;
}

#setShield {
  font-size: 24px;
  padding: 0.25rem 2rem;
}

#uploadShield {
  flex-grow: 1;
  overflow: auto;
}

#shieldUploadField {
  background-color: rgb(0, 0, 0, 0.1);
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

#shieldUploadField>span.material-symbols-outlined {
  font-size: 64px;
}

#shieldUploadField {
  cursor: pointer;
}

#shieldUploadField:hover {
  background-color: rgb(0, 0, 0, 0.2);
  border-color: #666;
}

#shieldUploadField.dragover {
  background-color: rgba(76, 175, 80, 0.1);
  border-color: #4caf50;
}

.shieldUploadDisclaimer {
  font-size: 12px;
  padding: 0.25rem;
  color: rgb(100, 100, 100);
}

.customShieldMakerOpenButton {
  width: 100%;
  margin: 0.65rem 0;
  padding: 0.65rem 0.8rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  background: rgba(var(--baseColor), 0.18);
  color: var(--textColor);
  border: 0;
  cursor: pointer;
}

.customShieldMakerOpenButton:hover {
  background: var(--hoverColor);
}

#customShieldMaker {
  width: min(94vw, 42rem);
  max-width: none;
  height: max-content;
  max-height: 88vh;
  margin: auto;
  padding: 0;
  position: fixed;
  inset: 0;
  background: var(--hotbarColor);
  color: var(--textColor);
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

#customShieldMaker[open] {
  display: flex;
}

.customShieldMakerShell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
}

.customShieldMakerHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(var(--baseColor), 0.25);
}

.customShieldMakerHeader h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  color: var(--textColor);
}

#customShieldMakerClose {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 0, 0, 0.22);
  color: var(--textColor);
  border: 0;
  cursor: pointer;
}

#customShieldMakerClose:hover {
  background: rgba(255, 0, 0, 0.45);
}

.customShieldMakerBody {
  display: grid;
  grid-template-columns: 24rem 12rem;
  gap: 0.8rem;
  padding: 0.85rem;
  overflow: auto;
}

.customShieldMakerPreviewPanel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.customShieldMakerPreviewFrame {
  --customShieldPreviewScale: 6;
  position: relative;
  width: 24rem;
  height: 18rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(45deg, rgba(var(--baseColor), 0.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(var(--baseColor), 0.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(var(--baseColor), 0.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(var(--baseColor), 0.12) 75%);
  background-size: 1.2rem 1.2rem;
  background-position: 0 0, 0 0.6rem, 0.6rem -0.6rem, -0.6rem 0;
  border: 1px solid rgba(var(--baseColor), 0.28);
  overflow: hidden;
}

.customShieldMakerPreviewStage {
  position: relative;
  display: inline-block;
  line-height: 0;
  transform: scale(var(--customShieldPreviewScale));
  transform-origin: center;
}

#customShieldMakerPreviewImg {
  display: block;
  height: 3rem;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

#customShieldMakerRouteNumber {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  font-family: "Series D", sans-serif;
  font-size: 2.2em;
  font-weight: 1;
  font-variation-settings: "wght" 1;
  text-align: center;
  letter-spacing: 0;
  color: black;
}

#customShieldMakerEmptyPreview {
  position: absolute;
  inset: auto;
  padding: 0.4rem 0.65rem;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  background: rgba(var(--baseColor), 0.12);
  color: var(--textColor);
  pointer-events: none;
}

#customShieldMakerUploadButton {
  width: max-content;
  padding: 0.6rem 0.85rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  background: var(--selectedColor);
  color: var(--textColor);
  border: 0;
  cursor: pointer;
}

#customShieldMakerUploadButton:hover {
  background: var(--hoverColor);
}

.customShieldMakerControls {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.45rem;
  width: 12rem;
  min-width: 0;
}

.customShieldMakerField {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  font-family: "Inter", sans-serif;
  color: var(--textColor);
}

.customShieldMakerField span {
  font-size: 0.75rem;
  opacity: 0.85;
}

.customShieldMakerField input,
.customShieldMakerField select {
  width: 100%;
  height: 2.15rem;
  min-height: 2.15rem;
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  line-height: 1.1;
  background: rgba(var(--baseColor), 0.12);
  color: var(--textColor);
  border: 1px solid rgba(var(--baseColor), 0.28);
}

.customShieldMakerField select {
  appearance: auto;
}

.customShieldMakerField select option {
  color: black;
}

:root[data-theme="dark"] .customShieldMakerField select option {
  color: white;
  background: rgb(35, 35, 35);
}

@media (max-width: 720px) {
  #customShieldMaker {
    width: min(94vw, 28rem);
  }

  .customShieldMakerBody {
    grid-template-columns: 1fr;
  }

  .customShieldMakerPreviewFrame {
    width: 100%;
    height: 16rem;
    --customShieldPreviewScale: 5;
  }

  .customShieldMakerControls {
    width: 100%;
  }
}

#linkUpload {
  width: 15rem;
  border: 1px solid black;
}

#savedCustomShieldsList {
  display: flex;
  flex-direction: column;
}

.customShieldItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem;
}

.deleteCustomShieldBtn {
  background: none;
}

#uploadShield h3 {
  margin-bottom: 0.5rem;
}

dialog:not([open]) {
  display: none;
}

.shieldCategory:not(.open) .shieldCategoryType,
.shieldCategory:not(.open)>.shieldCategory {
  display: none;
}

#selectedBackRoudness {
  background-color: rgb(0, 0, 0, 0.05);
}

.smallVal {
  width: 3rem;
  display: inline-block;
}


.iconGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(var(--baseColor), 0.1);
}

.iconGridItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: center;
  background-color: rgba(128, 128, 128, 0.2);
}

.iconGridItem:hover {
  background-color: var(--selectedColor);
}

.iconGridItem img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.iconGridItem span {
  display: none;
}

#iconSearch {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}

#arrowGrid .iconGridItem img {
  filter: invert(1);
}

/* APL Divider Controls */
.aplDividerRadioGroup {
  display: flex;
  flex-direction: row;
  gap: 12px;
  font-size: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.aplDividerRadioLabel {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  width: auto;
}

.aplDividerButton {
  min-width: 2.5rem;
  min-height: 1.9rem;
  margin: 2px;
  font-size: 1rem;
}

.aplArrowListItem {
  margin: 4px 0;
  padding: 6px;
  gap: 10px;
}

.aplArrowListItem button {
  padding: 8px 12px;
  font-size: 0.9rem;
}

:root[data-theme="dark"] .aplDividerButton,
:root[data-theme="dark"] .aplDividerButton.active,
:root[data-theme="dark"] .aplArrowListItem button,
:root[data-theme="dark"] #aplArrowFlip {
  background-color: rgb(var(--inputColor));
}

#aplArrowFlip,
#aplArrowFlipButton {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
}

.aplArrowControls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.aplArrowControls label {
  width: auto;
}

.aplArrowControls select,
.aplArrowControls button {
  padding: 0.25rem 0.5rem;
}

.aplSelectedSubpanelStatus {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  padding: 0.35rem 0.55rem;
  background: rgba(var(--baseColor), 0.25);
  width: max-content;
}

.aplSubpanelPromptOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.aplSubpanelPrompt {
  background: rgb(45, 68, 120);
  color: white;
  padding: 1rem;
  min-width: 22rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.aplSubpanelPromptActions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.aplSubpanelPromptActions button,
.aplSubpanelSection button,
.aplDividerSection button,
.aplArrowDeleteButton {
  background: #111;
  color: white;
  border: none;
  padding: 0.35rem 0.6rem;
  font-weight: 700;
}

.aplSubpanelSection,
.aplDividerSection {
  margin: 0.65rem 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.14);
}

.aplSubpanelSection.selected {
  outline: 2px solid rgba(255, 255, 255, 0.35);
}

.aplSubpanelSectionHeader,
.aplDividerSectionHeader {
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.aplArrowDropZone {
  border: 1px dashed rgba(255, 255, 255, 0.35);
  padding: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  opacity: 0.75;
}

.aplArrowDropZone.dragOver,
.aplArrowListItem.dragOver {
  outline: 2px solid #4da3ff;
}

.aplArrowListItem {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 9rem auto auto;
  gap: 0.35rem;
  align-items: center;
  margin: 0.35rem 0;
  cursor: grab;
}

.aplArrowListItem.dragging {
  opacity: 0.5;
}

.aplArrowSelectButton {
  width: 100%;
}

.aplInlineTypeSelect {
  min-width: 8rem;
}

.aplArrowSpacingRow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr 4.5rem;
  gap: 0.5rem;
  align-items: center;
  margin: 0.25rem 0 0.45rem 0;
}
.aplArrowListItem {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(13rem, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  margin: 0.35rem 0;
  cursor: grab;
}

.aplInlineTypeSelect {
  width: 100%;
  min-width: 10rem;
}

.aplArrowSizeControl {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) 4.5rem;
  gap: 0.35rem;
  align-items: center;
}

.aplArrowSpacingRow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr) 4.5rem;
  gap: 0.5rem;
  align-items: center;
  margin: 0.25rem 0 0.45rem 0;
}

/* APL arrow editor containment fix */
#aplArrowList {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.aplSubpanelSection,
.aplDividerSection {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.aplArrowListItem {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(14rem, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0.35rem 0;
}

.aplArrowListItem > * {
  min-width: 0;
  box-sizing: border-box;
}

.aplInlineTypeSelect {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.aplArrowSizeControl {
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) 4.5rem;
  gap: 0.35rem;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.aplArrowSizeControl span {
  white-space: nowrap;
}

.aplArrowSizeSlider,
.aplArrowSpacingSlider {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.aplArrowSpacingRow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) 4.5rem;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0.25rem 0 0.45rem 0;
}

.aplArrowSpacingRow label {
  white-space: normal;
}

.aplArrowDeleteButton {
  white-space: nowrap;
}

.aplArrowListItem {
  grid-template-columns: 2.25rem minmax(10rem, 14rem) minmax(14rem, 1fr) auto auto;
}

.aplArrowDragHandle {
  cursor: grab;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  text-align: center;
  user-select: none;
}

.aplArrowDragHandle:active {
  cursor: grabbing;
}

.aplArrowListItem input,
.aplArrowListItem select,
.aplArrowListItem label,
.aplArrowListItem .aplArrowSizeControl,
.aplArrowListItem .aplArrowSpacingRow {
  -webkit-user-drag: none;
  user-select: auto;
}

.aplBetweenArrowSpacingRow {
  margin: 0.35rem 0 0.65rem 2.5rem;
  padding: 0.35rem 0;
  border: none;
}

.aplBetweenArrowSpacingRow label {
  white-space: nowrap;
}

.aplBetweenArrowSpacingRow .aplArrowSpacingSlider {
  width: 100%;
}

/* APL menu sizing and formatting cleanup */
.sMModal.guideArrowConfig {
  max-height: calc(100vh - 2rem);
}

.sMModal.guideArrowConfig .sMModalContent {
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overflow-x: hidden;
}

#aplArrowList {
  width: min(56rem, calc(100vw - 4rem));
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.aplSubpanelSection,
.aplDividerSection {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.aplArrowListItem {
  display: grid;
  grid-template-columns: 2rem 14rem 14rem 6.5rem 4.75rem;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0.4rem 0;
}

.aplArrowDragHandle {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
}

.aplInlineTypeSelect {
  width: 14rem;
  max-width: 14rem;
  min-width: 0;
}

.aplArrowSizeControl {
  display: grid;
  grid-template-columns: auto 6.5rem 3.8rem;
  gap: 0.35rem;
  align-items: center;
  width: 14rem;
  max-width: 14rem;
  min-width: 0;
  overflow: hidden;
}

.aplArrowSizeControl span {
  white-space: nowrap;
}

.aplArrowSizeSlider {
  width: 6.5rem;
  max-width: 6.5rem;
  min-width: 0;
}

.aplBetweenArrowSpacingRow {
  display: grid;
  grid-template-columns: 5.5rem 18rem 3.8rem;
  gap: 0.45rem;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 2.5rem);
  margin: 0.35rem 0 0.65rem 2.5rem;
  padding: 0.25rem 0;
  overflow: hidden;
  box-sizing: border-box;
}

.aplBetweenArrowSpacingRow label {
  white-space: nowrap;
  text-align: right;
}

.aplBetweenArrowSpacingRow .aplArrowSpacingSlider {
  width: 18rem;
  max-width: 18rem;
  min-width: 0;
}

.aplBetweenArrowSpacingRow span {
  white-space: nowrap;
}

.aplArrowDeleteButton {
  width: 4.75rem;
  min-width: 4.75rem;
  white-space: nowrap;
}

/* APL menu final sizing: natural height, wider rows, scroll only when needed */
.sMModal.guideArrowConfig {
  width: 50rem !important;
  min-width: 50rem !important;
  max-width: min(90vw, 50rem) !important;
  height: max-content !important;
  max-height: calc(92vh / var(--sm-app-zoom, 1)) !important;
  overflow: hidden !important;
}

.sMModal.guideArrowConfig .sMModalContent {
  height: max-content !important;
  max-height: calc((92vh - 2.5rem) / var(--sm-app-zoom, 1)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#sMAPL,
#aplArrowList {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.aplSubpanelSection,
.aplDividerSection {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.6rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.aplArrowListItem {
  display: grid !important;
  grid-template-columns: 2rem 14rem 12.5rem 5.75rem 4.25rem !important;  gap: 0.45rem !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0.35rem 0 !important;
}

.aplArrowDragHandle {
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  padding: 0 !important;
}

.aplInlineTypeSelect {
  width: 14rem !important;
  max-width: 14rem !important;
  min-width: 0 !important;
}

.aplArrowSizeControl {
  display: grid !important;
  grid-template-columns: auto 5.5rem 3.6rem !important;
  gap: 0.3rem !important;
  align-items: center !important;
  width: 12.5rem !important;
  max-width: 12.5rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.aplArrowSizeControl span {
  white-space: nowrap !important;
}

.aplArrowSizeSlider {
  width: 5.5rem !important;
  max-width: 5.5rem !important;
  min-width: 0 !important;
}

.aplExitOnlyInlineLabel {
  width: 5.75rem !important;
  max-width: 5.75rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.aplArrowDeleteButton {
  width: 4.25rem !important;
  min-width: 4.25rem !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  white-space: nowrap !important;
}

.aplBetweenArrowSpacingRow,
.aplBeforeArrowSpacingRow {
  display: grid !important;
  grid-template-columns: 4.75rem 13rem 3.5rem !important;
  gap: 0.4rem !important;
  align-items: center !important;
  width: max-content !important;
  max-width: calc(100% - 2.4rem) !important;
  margin: 0.3rem 0 0.55rem 2.35rem !important;
  padding: 0.15rem 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.aplBetweenArrowSpacingRow label,
.aplBeforeArrowSpacingRow label {
  width: 4.75rem !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.aplBetweenArrowSpacingRow .aplArrowSpacingSlider,
.aplBeforeArrowSpacingRow .aplArrowSpacingSlider {
  width: 13rem !important;
  max-width: 13rem !important;
  min-width: 0 !important;
}

.aplBetweenArrowSpacingRow span,
.aplBeforeArrowSpacingRow span {
  width: 3.5rem !important;
  white-space: nowrap !important;
}

.aplInlineTypePickerHost,
.aplInlineTypePicker {
  width: 14rem !important;
  max-width: 14rem !important;
  min-width: 14rem !important;
}

.aplInlineTypePicker .shieldPickerTrigger {
  width: 14rem !important;
  min-height: 2rem !important;
  height: 2rem !important;
  display: grid !important;
  grid-template-columns: 1.6rem 1fr 1rem !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.25rem 0.45rem !important;
  background: #050505 !important;
  color: white !important;
  border: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.aplInlineTypePicker .shieldPickerTriggerLabel {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.aplInlineTypePicker .shieldPickerTriggerIcon,
.aplInlineTypePicker .arrowPickerIconHolder {
  width: 1.35rem !important;
  min-width: 1.35rem !important;
  height: 1.35rem !important;
}

.aplInlineTypePicker .arrowPickerIconImage,
.aplArrowPickerIconImage {
  width: 1.35rem !important;
  height: 1.35rem !important;
  object-fit: contain !important;
  display: block !important;
}

.aplInlineTypePicker .shieldPickerPopover {
  min-width: 16rem !important;
  width: 16rem !important;
  z-index: 100000 !important;
}

.aplInlineTypePicker .shieldPickerItem {
  min-height: 2.2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.aplInlineTypePicker .shieldPickerItem .arrowPickerIconHolder {
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  height: 1.5rem !important;
}

.aplInlineTypePicker .shieldPickerItem .arrowPickerIconImage {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

:root:not([data-theme="dark"]) .aplInlineTypePicker .shieldPickerTrigger {
  background: #eeeeee !important;
  color: #000 !important;
}

/* Template Management Styles */
.templateSaveSection {
  margin-bottom: 1rem;
  max-width: 42rem;
}

.templateSaveSection h4,
.templateListSection h4 {
  margin: 0 0 0.75rem 0;
}

.templateSaveInput,
.templateSearchSortRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.templateSaveInput input,
.templateSearchSortRow input {
  width: 15rem;
  min-width: 15rem;
  flex: 0 0 15rem;
}

.templateSaveInput button,
.templateSearchSortRow select {
  flex: 0 0 auto;
}

.templateSearchSortRow select {
  width: 10.5rem;
}

.templateListSection {
  max-width: min(72rem, 100%);
}

#savedTemplatesList {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 0.25rem;
}

.templateEmptyMessage {
  padding: 1rem;
  opacity: 0.75;
  margin: 0;
}

.templateItem {
  display: grid;
  grid-template-columns: minmax(13rem, 18rem) max-content;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  background: rgba(var(--baseColor), 0.12);
}

.templateItemInfo {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.templateNameRow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.templateItemName {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.templateRenameBtn {
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.62;
  background: rgba(0, 0, 0, 0.28);
}

.templateRenameBtn:hover {
  opacity: 1;
}

.templateRenameBtn .material-symbols-outlined {
  font-size: 1.05rem;
}

.templateItemDate {
  font-size: 0.85rem;
  opacity: 0.7;
}

.templateItemActions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.templateLoadBtn,
.templateDeleteBtn {
  padding: 0.35rem 0.5rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.templateLoadBtn .material-symbols-outlined,
.templateDeleteBtn .material-symbols-outlined {
  font-size: 1.1rem;
}

.templateDeleteBtn {
  width: 2rem;
  min-width: 2rem;
  padding: 0;
}

.templates .sMModalContent hr {
  margin: 1rem 0;
}

@media (max-width: 980px) {
  .templateItem {
    grid-template-columns: 1fr;
  }

  .templateItemActions {
    justify-content: flex-start;
  }
}

:root[data-theme="dark"] .aplDividerIcon {
  filter: invert(1);
}

#signMakerSettingsModal.settingsCenteredModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1003;
  pointer-events: auto;
}

.settingsModalCard {
  width: min(46rem, 90vw);
  max-height: 82vh;
  overflow-y: auto;
  background: #304b8a;
  color: #fff;
  border: 0.18rem solid rgba(255, 255, 255, 0.18);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.38);
  padding: 1.35rem 1.4rem 1.2rem;
  position: relative;
}

.settingsModalCard h2 {
  margin: 0 0 1rem 0;
  text-align: center;
  font-size: 1.5rem;
}

.settingsModalCard h3 {
  margin: 1.35rem 0 0.7rem 0;
  font-size: 1.05rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 0.9rem;
}

.settingsModalCard h3:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0.25rem;
}

.settingsCloseButton {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.1rem;
  height: 2.1rem;
  min-width: 2.1rem;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settingsCloseButton .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}

.settingsField {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: center;
  margin-bottom: 0.7rem;
}

.settingsField label {
  text-align: left;
  margin: 0;
  width: auto;
}

.settingsControlRow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.settingsControlRow input[type="range"] {
  flex: 1 1 auto;
}

.settingsControlRow span {
  min-width: 3rem;
  text-align: right;
}

.settingsControlsActions {
  margin-top: 1.35rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

#settingsResetControlsDefaults {
  min-width: 13rem;
  min-height: 2.35rem;
  padding: 0.45rem 1.1rem;
  font-size: 1rem;
}

#signMakerSettingsModal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 3000;
  pointer-events: none;
}

#signMakerSettingsModal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.settingsModalWindow {
  position: relative;
  width: 76rem;
  max-width: calc(100vw - 2rem);
  min-height: min(34rem, 160vh);
  max-height: 160vh;
  padding: 1rem 0.75rem 1rem 0.5rem;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
  background: rgba(48, 75, 138, 0.98);
  border: 0.18rem solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.28);
  color: var(--textColor);
  font-family: "Inter", sans-serif;
  pointer-events: auto;
}

.settingsMainTitle {
  margin: 0.9rem 0 0.35rem 0;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
}

.settingsCloseButton {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 2.6rem;
  min-width: 3rem;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}

.settingsCloseButton .material-symbols-outlined {
  font-size: 1.8rem;
  line-height: 1;
}

.settingsLayout {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.6rem;
  height: calc(100% - 4rem);
  box-sizing: border-box;
  padding: 0.65rem 0.4rem 0.8rem 0;
}

.settingsSideNav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 10.5rem;
  height: 100%;
}

.settingsSideTab {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.8rem;
  text-align: left;
  border: 0.18rem solid rgba(255, 255, 255, 0.12);
  background: rgba(var(--baseColor), 0.18);
  color: var(--textColor);
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.settingsSideTabGroup {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.settingsSideTab.active {
  background: rgba(200, 210, 245, 0.55);
  font-weight: 700;
}

.settingsSideActions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
}

.settingsSideActions button {
  width: 100%;
  min-height: 3.4rem;
  background: #111;
  color: #fff;
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  padding: 0.45rem 0.5rem;
  text-align: center;
  cursor: pointer;
}

.settingsPageArea {
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  padding-right: 0;
}

.settingsPage {
  display: none;
}

.settingsPage.active {
  display: block;
}

/* GENERAL PAGE */

#settingsGeneral {
  width: max-content;
  min-width: 0;
}

.settingsGeneralStack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
}

.settingsGeneralGrid,
.settingsPostGrid {
  display: grid;
  grid-template-columns: 12.5rem 14rem;
  column-gap: 0.9rem;
  row-gap: 0.85rem;
  align-items: center;
  width: max-content;
}

.settingsGeneralGrid {
  margin-top: 0.4rem;
}

.settingsGeneralGrid label,
.settingsPostGrid label {
  width: auto;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  margin: 0;
}

.settingsGeneralGrid select,
.settingsPostGrid select,
.settingsPostGrid input[type="number"] {
  width: 14rem;
  min-width: 14rem;
  max-width: 14rem;
  min-height: 2.15rem;
  margin: 0;
  font-size: 1rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  box-sizing: border-box;
}

.settingsPostPanel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.35rem;
  min-width: 0;
}

.settingsPostPanel h3 {
  width: 100%;
  margin: 0 0 0.75rem 0;
  padding-left: 13.4rem;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: left;
}

.settingsPostGrid input[type="checkbox"] {
  width: auto;
  justify-self: start;
  margin: 0;
}

.settingsGeneralActions {
  display: flex;
  align-items: flex-start;
  margin-top: 1.2rem;
  margin-left: 13.4rem;
}

.settingsGeneralActions button {
  min-width: 12.5rem;
  min-height: 4rem;
  background: #111;
  color: #fff;
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
  padding: 0.55rem 0.7rem;
}
/* INTERFACE PAGE */
.settingsInterfaceGrid {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  column-gap: 1rem;
  row-gap: 0.9rem;
  align-items: center;
  width: min(38rem, 100%);
  margin-top: 0.5rem;
}

.settingsInterfaceGrid label {
  width: auto;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

.settingsInterfaceGrid select {
  width: 100%;
  max-width: 20rem;
  min-height: 2.15rem;
  margin: 0;
  font-size: 1rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

.settingsSegmentedRow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.settingsSegmentButton {
  width: 6.2rem;
  min-width: 6.2rem;
  height: 2.15rem;
  margin: 0;
  padding: 0.3rem 0.7rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.75);
  background: #111;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.settingsSegmentButton.active {
  background: rgba(200, 210, 245, 0.35);
  color: #fff;
}

.settingsPostPanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 18rem;
}

.settingsPostPanel h3 {
  margin: 0 0 1rem 0;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.settingsPostGrid {
  display: grid;
  grid-template-columns: max-content 12rem;
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.7rem;
}

.settingsPostGrid label {
  width: auto;
  text-align: right;
  margin: 0;
}

.settingsPostGrid select,
.settingsPostGrid input[type="number"] {
  width: 12rem;
  box-sizing: border-box;
}

.settingsPostGrid input[type="checkbox"] {
  width: auto;
  justify-self: start;
  margin-left: 0.25rem;
}

/* DEFAULTS PAGE */
.settingsDefaultsGrid {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 3rem;
  row-gap: 1.8rem;
  align-items: start;
  width: max-content;
  min-width: 54rem;
  margin-top: 0.35rem;
}

.settingsDefaultsColumn {
  display: grid;
  grid-template-columns: 9.5rem 15.5rem;
  column-gap: 0.9rem;
  row-gap: 0.8rem;
  align-items: center;
  min-width: max-content;
}

.settingsDefaultsColumn h3 {
  grid-column: 1 / -1;
  margin: 0 0 0.2rem 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
}

.settingsDefaultsColumn label {
  width: auto;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

.settingsDefaultsColumn input,
.settingsDefaultsColumn select {
  width: 100%;
  min-height: 2.15rem;
  margin: 0;
  font-size: 1rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  box-sizing: border-box;
}

#settingsDefaultsFavoriteShields {
  grid-column: 1 / -1;
  min-height: 2.5rem;
  margin-top: 0.2rem;
  background: #111;
  color: #fff;
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
}

.settingsDefaultsActions {
  margin-top: 1.35rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

#settingsResetDefaultsButton {
  min-width: 13rem;
  min-height: 2.35rem;
  padding: 0.45rem 1.1rem;
  font-size: 1rem;
}

.settingsDefaultsSliderRow {
  display: grid;
  grid-template-columns: minmax(0, 12rem) auto;
  align-items: center;
  column-gap: 0.65rem;
  width: max-content;
}

.settingsDefaultsSliderRow input[type="range"] {
  width: 12rem;
}

.settingsDefaultsSliderRow span {
  display: inline-block;
  min-width: 3.5rem;
  text-align: left;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .settingsDefaultsGrid {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
    row-gap: 1.25rem;
  }

  .settingsDefaultsColumn {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .settingsDefaultsColumn label {
    text-align: left;
  }
}

/* SPLIT DEFAULTS PAGES */
.settingsDefaultsSinglePage {
  width: max-content;
  min-width: 0;
  margin-top: 0.35rem;
}

.settingsDefaultsSinglePage .settingsDefaultsColumn {
  margin-top: 0;
}

.settingsDefaultsSinglePage .settingsDefaultsColumn h3 {
  text-align: left;
  padding-left: 10.4rem;
  box-sizing: border-box;
}

.settingsDefaultsPageActions {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.35rem;
  margin-left: 10.4rem;
}

.settingsDefaultsPageReset {
  min-width: 13rem;
  min-height: 2.35rem;
  padding: 0.45rem 1.1rem;
  font-size: 1rem;
}

.settingsDefaultsExitTabPage {
  width: max-content;
}

.settingsDefaultsExitTabPage .settingsDefaultsSectionHeading {
  text-align: center;
  margin-top: 0;
}

.settingsDefaultsExitTabActions {
  justify-content: center;
  margin-left: 0;
  width: 100%;
}

.settingsSideTabGroup {
  max-height: calc(100vh - 16rem);
  overflow-y: auto;
  padding-right: 0.15rem;
}

/* DEFAULTS FONT BUTTONS */
.settingsDefaultsFontNativeSelect {
  display: none !important;
}

.settingsDefaultsFontButtonGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.18rem;
  align-items: center;
  width: max-content;
  margin: 0.25rem;
}

.settingsDefaultsFontButtonGroup[hidden] {
  display: none !important;
}

.settingsDefaultsFontButton {
  width: max-content;
  min-width: max-content;
  height: 1.55rem;
  padding: 0.15rem 0.22rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgb(var(--inputColor));
  color: var(--textColor);
  box-sizing: border-box;
}

.settingsDefaultsFontButton.active {
  background-color: var(--selectedColor);
  color: var(--textColor);
}

.settingsDefaultsFontButton:hover {
  background-color: var(--hoverColor);
}

/* BLOCK ELEMENT DEFAULTS PAGES */
.settingsDefaultsBlockElementPage {
  width: max-content;
  min-width: 0;
}

.settingsDefaultsBlockElementColumn {
  grid-template-columns: 12.5rem max-content;
  column-gap: 0.9rem;
  row-gap: 0.75rem;
}

.settingsDefaultsBlockElementColumn h3 {
  grid-column: 1 / -1;
  text-align: left;
  padding-left: 13.4rem;
  box-sizing: border-box;
}

.settingsDefaultsPickerRow {
  display: inline-grid;
  grid-template-columns: max-content max-content max-content;
  align-items: center;
  column-gap: 0.55rem;
  width: max-content;
}

.settingsDefaultsChooseButton {
  min-height: 2.15rem;
  min-width: 8.5rem;
  padding: 0.35rem 0.75rem;
  background: #111;
  color: #fff;
  font-size: 0.95rem;
}

.settingsDefaultsCurrentLabel {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--textColor);
  white-space: nowrap;
}

.settingsDefaultsCurrentValue {
  min-width: 7.5rem;
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.5rem;
  background-color: rgb(var(--inputColor));
  color: var(--textColor);
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  box-sizing: border-box;
}

.settingsDefaultsRotationRow {
  display: inline-grid;
  grid-template-columns: 4.5rem max-content 2.15rem;
  align-items: center;
  column-gap: 0.45rem;
  width: max-content;
}

.settingsDefaultsRotationRow input[type="text"] {
  width: 4.5rem;
  min-width: 4.5rem;
}

.settingsDefaultsPresetButtonGroup,
.settingsDefaultsSegmentedButtonGroup {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: max-content;
}

.settingsDefaultsPresetButton,
.settingsDefaultsSegmentedButton {
  min-height: 2.15rem;
  padding: 0.35rem 0.65rem;
  background-color: rgb(var(--inputColor));
  color: var(--textColor);
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  box-sizing: border-box;
}

.settingsDefaultsRotationButtonGroup .settingsDefaultsPresetButton {
  min-width: 3rem;
}

.settingsDefaultsSegmentedButton {
  min-width: 5.25rem;
}

.settingsDefaultsPresetButton.active,
.settingsDefaultsSegmentedButton.active {
  background: var(--selectedColor);
}

.settingsDefaultsPresetButton:hover,
.settingsDefaultsSegmentedButton:hover,
.settingsDefaultsChooseButton:hover {
  background: var(--hoverColor);
}

.settingsDefaultsSliderRowWithReset input[type="range"] {
  width: 12rem;
}

.settingsDefaultsSliderRowWithReset {
  grid-template-columns: minmax(0, 12rem) 3.5rem 2.25rem;
  align-items: center;
}

.settingsDefaultsInlineReset {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  margin: 0;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  line-height: 1;
  box-sizing: border-box;
  overflow: hidden;
}

.settingsDefaultsInlineReset .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  font-family: "Material Symbols Outlined";
  font-size: 1.22rem;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  transform: translateY(0.015rem);
}

.settingsDefaultsCheckboxField {
  display: inline-flex;
  align-items: center;
  min-height: 2.15rem;
}

.settingsDefaultsCheckboxField input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
}

.settingsDefaultsBlockElementColumn select {
  width: 15.5rem;
}

/* CONTROLS PAGE*/
.settingsControlsGrid {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1.4rem;
  row-gap: 1rem;
  align-items: start;
  width: max-content;
  min-width: 62rem;
}

.settingsControlsColumn {
  display: grid;
  grid-template-columns: 15.5rem 12rem;
  column-gap: 0.9rem;
  row-gap: 0.75rem;
  align-items: center;
  min-width: max-content;
}

.settingsShortcutField {
  display: grid;
  grid-template-columns: 12rem 1.2rem 1.2rem;
  column-gap: 0.35rem;
  align-items: center;
  width: max-content;
  min-width: max-content;
  position: relative;
  z-index: 2;
}

.settingsShortcutField input[type="text"] {
  width: 12rem;
  min-width: 12rem;
  min-height: 2.05rem;
  margin: 0;
  box-sizing: border-box;
}

.settingsShortcutResetButton,
.settingsShortcutDeleteButton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.settingsShortcutResetButton:hover,
.settingsShortcutResetButton:focus,
.settingsShortcutDeleteButton:hover,
.settingsShortcutDeleteButton:focus {
  background: transparent;
  color: #fff;
  opacity: 0.8;
}

.settingsShortcutResetButton .material-symbols-outlined,
.settingsShortcutDeleteButton .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

.settingsControlsColumn label {
  width: max-content;
  justify-self: end;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: normal;
  line-height: 1.1;
}

.settingsControlsColumn input {
  width: 100%;
  min-height: 2.15rem;
  margin: 0;
  font-size: 1rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .settingsControlsGrid {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
    row-gap: 1.25rem;
  }

  .settingsControlsColumn {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .settingsControlsColumn label {
    text-align: left;
  }

  .settingsShortcutField {
    grid-template-columns: minmax(0, 1fr) 1.2rem 1.2rem;
    width: 100%;
    min-width: 0;
  }

  .settingsShortcutField input[type="text"] {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1000px) {
  .settingsModalWindow {
    width: 95vw;
    height: 92vh;
  }

  .settingsLayout {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.6rem;
    height: calc(100% - 4rem);
    box-sizing: border-box;
    padding: 0.65rem 0.4rem 0.8rem 0;
  }

  /* INTERFACE PAGE */
  .settingsInterfaceGrid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .settingsInterfaceGrid label {
    text-align: left;
  }

  .settingsInterfaceGrid select {
    max-width: none;
  }

  .settingsSegmentedRow {
    justify-content: flex-start;
  }
}


#signMakerSettingsModal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

#signMakerSettingsModal .settingsModalCard {
  width: 100vw;
  max-width: none;
  min-width: 0;
  height: 100vh;
  min-height: 100vh;
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 1.5rem 1.75rem 2rem 1.75rem;
  background: rgba(48, 75, 138, 0.98);
  position: relative;
}

#signMakerSettingsModal .settingsCloseButton {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3001;
}

#signMakerSettingsModal select,
#signMakerSettingsModal input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .settingsModalCard {
    width: 94vw;
    max-height: 88vh;
  }

  .settingsField {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* Dark mode for dialog modals */
:root[data-theme="dark"] dialog {
  background-color: rgb(30, 30, 30);
  color: white;
}

:root[data-theme="dark"] div.options {
  border-top-color: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .iconGrid {
  background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .iconGridItem {
  background-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .iconGridItem:hover {
  background-color: var(--selectedColor);
}

:root[data-theme="dark"] #iconSearch,
:root[data-theme="dark"] #arrowSearch,
:root[data-theme="dark"] #tollLogoSearch {
  background-color: rgb(50, 50, 50);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] #iconGrid .iconGridItem img {
  filter: invert(1);
}

:root[data-theme="dark"] #downloadContent {
  background-color: rgb(28, 34, 52);
  color: rgb(235, 240, 255);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] #downloadContents,
:root[data-theme="dark"] #downloadContent h3,
:root[data-theme="dark"] #downloadContent label,
:root[data-theme="dark"] #downloadContent #fileTypeLabel,
:root[data-theme="dark"] #downloadContent #entirePostLabel,
:root[data-theme="dark"] #downloadContent #selectPanelLabel {
  color: rgb(235, 240, 255);
}

:root[data-theme="dark"] #downloadContent .options {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] #downloadContent button {
  background-color: rgb(10, 14, 24);
  color: rgb(245, 248, 255);
}

:root[data-theme="dark"] #downloadContent button:hover {
  background-color: rgb(24, 30, 44);
}

:root[data-theme="dark"] #downloadContent button.activated,
:root[data-theme="dark"] #downloadContent button.active {
  background-color: rgb(95, 102, 118);
  color: white;
}

:root[data-theme="dark"] #downloadContent input,
:root[data-theme="dark"] #downloadContent select {
  background-color: rgb(18, 22, 32);
  color: rgb(245, 248, 255);
}

:root[data-theme="dark"] #downloadPreview {
  background: transparent;
}

:root[data-theme="dark"] #downloadPreview img,
:root[data-theme="dark"] #downloadPreview iframe {
  display: block;
  margin: 0 auto;
}


#sdCtrlText_fontSize,
#sdAdvisory_fontSize,
#sdActionMessage_fontSize {
  width: 10rem;
}

#sdCtrlText_fontSizeVal,
#sdAdvisory_fontSizeVal,
#sdActionMessage_fontSizeVal {
  width: 3.5rem;
}

.guideArrowPickerHost,
.exitOnlyDirectionPickerHost {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: visible;
  z-index: 1;
}

.guideArrowPickerHost:has(.arrowPicker.open),
.exitOnlyDirectionPickerHost:has(.arrowPicker.open) {
  z-index: 99998;
}

.arrowPicker {
  position: relative;
  display: inline-block;
  width: fit-content;
  z-index: 1;
}

.arrowPicker.open {
  z-index: 99999;
}

.arrowPicker .shieldPickerPopover {
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 0;
  z-index: 100000;
  min-width: 16rem;
  max-width: 20rem;
  max-height: min(75vh, 24rem);
  overflow: hidden;
}

.arrowPickerList {
  max-height: min(75vh, 24rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.arrowPickerIconHolder {
  width: 1.1rem;
  min-width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.arrowPickerIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.95rem;
  line-height: 1;
  color: white;
  font-style: normal;
}

.arrowPickerIcon.placeholder {
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
}

.guideArrowPickerHost,
.exitOnlyDirectionPickerHost {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: visible;
  z-index: 0;
}

.arrowPicker {
  position: relative;
  display: inline-block;
  width: fit-content;
  z-index: 1;
}

.arrowPicker.open {
  z-index: 9999;
}

.arrowPicker .shieldPickerPopover {
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 0;
  z-index: 10000;
  max-height: min(75vh, 24rem);
  overflow: hidden;
}

.guideArrowPickerHost .arrowPicker.open,
.exitOnlyDirectionPickerHost .arrowPicker.open {
  isolation: isolate;
}

.arrowPickerList {
  max-height: min(75vh, 24rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.arrowPicker .shieldPickerTrigger {
  min-height: 1.6rem;
  height: 1.6rem;
  padding: 0.08rem 0.35rem;
  gap: 0.28rem;
}

.arrowPicker .shieldPickerTriggerLabel {
  font-size: 0.92rem;
  line-height: 1;
}

.arrowPicker .shieldPickerTriggerCaret {
  line-height: 1;
  font-size: 0.8rem;
}

.arrowPicker .arrowPickerIconHolder,
.arrowPicker .shieldPickerTriggerIcon {
  width: 0.9rem;
  min-width: 0.9rem;
  height: 0.9rem;
}

.arrowPicker .arrowPickerIconImage {
  width: 0.9rem;
  height: 0.9rem;
  object-fit: contain;
  display: block;
}

.arrowPicker .shieldPickerItem {
  min-height: 1.75rem;
  padding-top: 0.18rem;
  padding-bottom: 0.18rem;
}

.arrowPicker .shieldPickerPopover {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  min-width: 16rem;
  max-width: none;
  overflow: hidden;
}

.arrowPickerList {
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.arrowPickerSpecialSvg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  line-height: 1;
}

.arrowPickerSpecialSvg.dual {
  width: 1.9rem;
}

.arrowPickerSpecialSvg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.arrowPickerSpecialSvg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  line-height: 1;
}

.arrowPickerSpecialSvg.dual {
  width: 2rem;
  gap: 0.08rem;
}

.arrowPickerSpecialSvgBox {
  width: 0.92rem;
  height: 0.92rem;
  min-width: 0.92rem;
  min-height: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.arrowPickerSpecialSvgBox.yellow {
  background: #f4d329;
}

.arrowPickerSpecialSvgBox.green {
  background: #0b7a43;
}

.arrowPickerSpecialSvgBox .arrowPickerIconImage {
  width: 0.72rem;
  height: 0.72rem;
  object-fit: contain;
  display: block;
}

.arrowPickerSpecialSvg.dual {
  width: 1.55rem;
  gap: 0.04rem;
}

.arrowPickerSpecialSvg.dual .arrowPickerSpecialSvgBox {
  width: 0.72rem;
  height: 0.72rem;
  min-width: 0.72rem;
  min-height: 0.72rem;
}

.arrowPickerSpecialSvg.dual .arrowPickerSpecialSvgBox .arrowPickerIconImage {
  width: 0.5rem;
  height: 0.5rem;
}

.settingsDefaultsSectionFull {
  grid-column: 1 / -1;
}

.settingsDefaultsSectionHeading {
  margin: 0 0 1rem 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
}

.settingsDefaultsExitTabGrid {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 3rem;
  align-items: start;
  justify-content: center;
  width: max-content;
  margin: 0 auto;
}

.settingsDefaultsExitTabInputs {
  display: grid;
  grid-template-columns: 9.5rem 15.5rem;
  column-gap: 0.9rem;
  row-gap: 0.8rem;
  align-items: center;
  min-width: max-content;
}

.settingsDefaultsExitTabInputs > label {
  width: auto;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

.settingsDefaultsExitTabInputs > input,
.settingsDefaultsExitTabInputs > select {
  width: 100%;
  min-height: 2.15rem;
  margin: 0;
  font-size: 1rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  box-sizing: border-box;
}

.settingsDefaultsExitTabInputs > .settingsDefaultsSliderRow {
  grid-column: 2;
  width: max-content;
}

.settingsDefaultsExitTabInputs > .settingsDefaultsSliderRow input[type="range"] {
  width: 12rem;
}

.settingsDefaultsExitTabInputs > .settingsDefaultsSliderRow span {
  min-width: 3.5rem;
  text-align: left;
  white-space: nowrap;
}

.settingsDefaultsCheckboxColumn {
  display: grid;
  grid-template-columns: 9.5rem 1.5rem;
  column-gap: 0.9rem;
  row-gap: 0.8rem;
  align-items: center;
  min-width: max-content;
}

.settingsDefaultsCheckboxRow {
  display: contents;
}

.settingsDefaultsCheckboxColumn label {
  width: auto;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

.settingsDefaultsCheckboxColumn input[type="checkbox"] {
  margin: 0;
  width: auto;
  min-height: auto;
  justify-self: start;
}

/* Exit Tab defaults: make it line up like the working Defaults sliders */
.settingsDefaultsSectionFull {
  width: 100%;
}

.settingsDefaultsExitTabGrid {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  align-items: start;
  column-gap: 3rem;
  width: 54rem;
  max-width: 100%;
  margin: 0 auto;
}

.settingsDefaultsExitTabGrid > .settingsDefaultsColumn {
  display: grid;
  grid-template-columns: 13rem 15.5rem;
  column-gap: 0.9rem;
  row-gap: 0.8rem;
  align-items: center;
  width: max-content;
  min-width: 0;
}

.settingsDefaultsExitTabGrid > .settingsDefaultsColumn > label {
  width: auto;
  text-align: right;
  white-space: normal;
  line-height: 1.15;
}

.settingsDefaultsExitTabGrid > .settingsDefaultsColumn > input,
.settingsDefaultsExitTabGrid > .settingsDefaultsColumn > select {
  width: 100%;
  min-height: 2.15rem;
  margin: 0;
  font-size: 1rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  box-sizing: border-box;
}

.settingsDefaultsExitTabGrid > .settingsDefaultsColumn > .settingsDefaultsSliderRow {
  display: grid;
  grid-template-columns: 12rem auto;
  align-items: center;
  column-gap: 0.65rem;
  width: max-content;
}

.settingsDefaultsExitTabGrid > .settingsDefaultsColumn > .settingsDefaultsSliderRow input[type="range"] {
  width: 12rem;
}

.settingsDefaultsExitTabGrid > .settingsDefaultsColumn > .settingsDefaultsSliderRow span {
  min-width: 3.5rem;
  text-align: left;
  white-space: nowrap;
}

.settingsDefaultsCheckboxColumn {
  display: grid;
  grid-template-columns: 13rem 1.5rem;
  column-gap: 0.9rem;
  row-gap: 0.8rem;
  align-items: center;
  justify-self: end;
  width: max-content;
}

.settingsDefaultsCheckboxColumn label {
  width: auto;
  text-align: right;
  white-space: normal;
  line-height: 1.15;
}

.settingsDefaultsCheckboxColumn input[type="checkbox"] {
  margin: 0;
  width: auto;
  min-height: auto;
  justify-self: start;
}

.exitTabMainSettingsGrid {
  display: grid;
  grid-template-columns: max-content 8rem 6rem 5rem 5rem 8rem;
  column-gap: 0.55rem;
  row-gap: 0.55rem;
  align-items: center;
  width: max-content;
}

.exitTabMainSettingsGrid label {
  width: auto;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.exitTabMainSettingsGrid input,
.exitTabMainSettingsGrid select {
  margin: 0;
  min-width: 0;
}

.exitTabMainTextLabel {
  grid-column: 1;
  grid-row: 1;
}

.exitTabMainTextInput {
  grid-column: 2;
  grid-row: 1;
  width: 8rem;
}

.exitTabVariantSelect {
  grid-column: 3;
  grid-row: 1;
  width: 6rem;
}

.exitTabPositionSelect {
  grid-column: 4;
  grid-row: 1;
  width: 5rem;
}

.exitTabWidthSelect {
  grid-column: 5;
  grid-row: 1;
  width: 5rem;
}

.exitTabColorSelect {
  grid-column: 6;
  grid-row: 1;
  width: 8rem;
}

.exitTabBottomTextLabel {
  grid-column: 1;
  grid-row: 2;
}

.exitTabBottomTextInput {
  grid-column: 2;
  grid-row: 2;
  width: 8rem;
}

.exitTabMainSettingsGrid.bilingualMode .exitTabColorSelect {
  grid-column: 3 / span 2;
  grid-row: 2;
  width: 8rem;
}

.exitTabMainSettingsGrid:not(.bilingualMode) .exitTabBottomTextLabel,
.exitTabMainSettingsGrid:not(.bilingualMode) .exitTabBottomTextInput {
  display: none;
}

#exitTabBilingualLabel {
  display: inline-block;
  width: 8rem;
  margin-left: -0.47rem;
  text-align: right;
  white-space: nowrap;
}

.exitTabSliderValue {
  text-align: left;
  margin: 0;
  font-size: 2rem;
  width: auto;
}

.exitTabSliderReset {
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.exitTabSliderReset .material-symbols-outlined {
  font-size: 1.2rem;
  line-height: 1;
}

.exitTabSliderGrid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 2.5rem;
  row-gap: 1rem;
  align-items: start;
  justify-content: start;
  margin-top: 0.5rem;
}

.exitTabSliderGroup {
  display: grid;
  grid-template-columns: max-content 12rem max-content max-content;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0;
  width: max-content;
}

.exitTabSliderGroup > label:first-child {
  text-align: right;
  line-height: 1.1;
  margin: 0;
}

.exitTabSliderGroup input[type="range"] {
  width: 12rem;
  margin: 0;
}

.exitTabSliderValue {
  text-align: left;
  margin: 0;
  font-size: 2rem;
  width: auto;
  min-width: 2.5rem;
  line-height: 1;
}

.exitTabSliderReset {
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.exitTabSliderReset .material-symbols-outlined {
  font-size: 1.2rem;
  line-height: 1;
}

.exitTabSliderStack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  margin-top: 0.5rem;
}

/* LIGHT MODE SETTINGS MODAL */
:root[data-theme="light"] #signMakerSettingsModal .settingsModalWindow,
:root[data-theme="light"] #signMakerSettingsModal .settingsModalCard {
  background: rgb(211, 220, 241);
  border: 0.18rem solid rgba(120, 140, 185, 0.55);
  box-shadow: 0 0.6rem 2rem rgba(30, 45, 80, 0.16);
  color: #000;
}

:root[data-theme="light"] #signMakerSettingsModal .settingsMainTitle,
:root[data-theme="light"] #signMakerSettingsModal .settingsPage h2,
:root[data-theme="light"] #signMakerSettingsModal .settingsPage h3,
:root[data-theme="light"] #signMakerSettingsModal .settingsPage label,
:root[data-theme="light"] #signMakerSettingsModal .settingsPage span,
:root[data-theme="light"] #signMakerSettingsModal .settingsLayout,
:root[data-theme="light"] #signMakerSettingsModal .settingsPageArea,
:root[data-theme="light"] #signMakerSettingsModal .settingsPage {
  color: #000;
}

/* Left side page buttons */
:root[data-theme="light"] #signMakerSettingsModal .settingsSideTab {
  background: rgb(140, 156, 201);
  color: #000;
  border: 0.18rem solid rgba(110, 130, 175, 0.55);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSideTab:hover {
  background: rgb(156, 170, 210);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSideTab.active {
  background: rgb(242, 244, 250);
  color: #000;
  border-color: rgba(110, 130, 175, 0.65);
}

/* Bottom-left import/export buttons */
:root[data-theme="light"] #signMakerSettingsModal .settingsSideActions button {
  background: rgb(239, 239, 239);
  color: #000;
  border: 1px solid rgba(110, 130, 175, 0.55);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSideActions button:hover {
  background: rgb(248, 248, 248);
}

/* Main action buttons */
:root[data-theme="light"] #signMakerSettingsModal .settingsGeneralActions button,
:root[data-theme="light"] #signMakerSettingsModal #settingsDefaultsFavoriteShields,
:root[data-theme="light"] #signMakerSettingsModal #settingsResetDefaultsButton {
  background: rgb(239, 239, 239);
  color: #000;
  border: 1px solid rgba(110, 130, 175, 0.55);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsGeneralActions button:hover,
:root[data-theme="light"] #signMakerSettingsModal #settingsDefaultsFavoriteShields:hover,
:root[data-theme="light"] #signMakerSettingsModal #settingsResetDefaultsButton:hover {
  background: rgb(248, 248, 248);
}

/* Interface page segmented buttons */
:root[data-theme="light"] #signMakerSettingsModal .settingsSegmentButton {
  background: rgb(239, 239, 239);
  color: #000;
  border: 1px solid rgba(110, 130, 175, 0.55);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSegmentButton:hover {
  background: rgb(248, 248, 248);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSegmentButton.active {
  background: rgb(255, 255, 255);
  color: #000;
  border-color: rgba(110, 130, 175, 0.7);
}

/* Inputs and dropdowns */
:root[data-theme="light"] #signMakerSettingsModal select,
:root[data-theme="light"] #signMakerSettingsModal input[type="text"],
:root[data-theme="light"] #signMakerSettingsModal input[type="number"] {
  background: rgb(239, 239, 239);
  color: #000;
  border: 1px solid rgba(110, 130, 175, 0.45);
}

/* Slider readouts */
:root[data-theme="light"] #signMakerSettingsModal .settingsDefaultsSliderRow span,
:root[data-theme="light"] #signMakerSettingsModal .settingsControlRow span,
:root[data-theme="light"] #signMakerSettingsModal .settingsShortcutField {
  color: #000;
}

/* Small reset/delete shortcut buttons */
:root[data-theme="light"] #signMakerSettingsModal .settingsShortcutResetButton,
:root[data-theme="light"] #signMakerSettingsModal .settingsShortcutDeleteButton {
  color: #000;
}

:root[data-theme="light"] #signMakerSettingsModal .settingsShortcutResetButton:hover,
:root[data-theme="light"] #signMakerSettingsModal .settingsShortcutDeleteButton:hover {
  color: rgba(0, 0, 0, 0.7);
  background: transparent;
}

/* Close button */
:root[data-theme="light"] #signMakerSettingsModal .settingsCloseButton {
  background: rgb(239, 239, 239);
  color: #000;
  border: 1px solid rgba(110, 130, 175, 0.55);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsCloseButton:hover {
  background: rgb(248, 248, 248);
}


/* Light mode dropdown arrows */
:root[data-theme="light"] #signMakerSettingsModal select {
  color: #000;
  background-color: rgb(239, 239, 239);
  background-image:
    linear-gradient(45deg, transparent 50%, #000 50%),
    linear-gradient(135deg, #000 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) 50%,
    calc(100% - 0.65rem) 50%;
  background-size:
    0.35rem 0.35rem,
    0.35rem 0.35rem;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
}

:root[data-theme="light"] .shieldPickerPopover {
  background: rgb(239, 239, 239);
  color: #000;
  border: 1px solid rgba(110, 130, 175, 0.55);
}

:root[data-theme="light"] .shieldPickerTrigger {
  background: rgb(239, 239, 239);
  color: #000;
  border: 1px solid rgba(110, 130, 175, 0.45);
}

:root[data-theme="light"] .shieldPickerItem {
  color: #000;
}

:root[data-theme="light"] .shieldPickerItem:hover {
  background: rgba(120, 140, 185, 0.22);
}

:root[data-theme="light"] .shieldPickerItem.selected {
  background: rgb(255, 255, 255);
  color: #000;
}

:root[data-theme="light"] .shieldPickerItem.disabled {
  color: rgba(0, 0, 0, 0.45);
}


/* Subpanels menu sizing cleanup */
.sMModal.subPanelConfig {
  width: max-content;
  max-width: min(90vw, 64rem);
  height: auto;
  max-height: calc((100vh - 3rem) / var(--sm-app-zoom));
}

.sMModal.subPanelConfig .sMModalContent {
  max-height: calc((100vh - 6rem) / var(--sm-app-zoom));
  overflow-y: auto;
  overflow-x: hidden;
}

/* Keep only Shield and Control Text narrower. Do not affect Action Message. */
#smSPProperties > [data-property="sdCtrlText"],
#smSPProperties > [data-property="sdShield"] {
  width: 52rem;
  max-width: 52rem;
  box-sizing: border-box;
}

/* Make the rows actually obey the narrower width */
.sdCtrlTextLayout,
#smSPProperties > [data-property="sdShield"] {
  box-sizing: border-box;
}

.sdCtrlTextTopRow,
.sdCtrlTextSecondRow,
.sdCtrlTextSettingsRow,
.sdShieldTopRow,
.sdShieldSecondRow,
.sdShieldThirdRow,
.sdShieldFontRow,
.sdShieldBannerGroup {
  max-width: 100%;
  box-sizing: border-box;
}

/* Control Text compact layout */
.sdCtrlTextTopRow,
.sdCtrlTextSecondRow,
.sdCtrlTextSettingsRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0.35rem 0;
}

.sdCtrlTextTopRow label,
.sdCtrlTextSecondRow label,
.sdCtrlTextSettingsRow label {
  width: 6.25rem;
}

#sdCtrlText_textContent {
  width: 13.5rem;
}

#sdCtrlText_fontFamily {
  width: 10.5rem;
}

#sdCtrlText_backgroundColor,
#sdCtrlText_textColor,
#sdCtrlText_alignment {
  width: 8rem;
}

#sdCtrlText_spacing {
  width: 4rem;
}

#sdCtrlText_fontSize {
  width: 8.5rem;
}

#sdCtrlText_lineHeight {
  width: 7.5rem;
}

#sdCtrlText_fontSizeVal,
#sdCtrlText_lineHeightVal,
.sdTextEditorSmall {
  width: 4rem;
}

.sdCtrlTextSmallCapsLabel {
  margin-left: 0.6rem;
}

/* Shield compact layout */
.sdShieldTopRow,
.sdShieldSecondRow,
.sdShieldThirdRow,
.sdShieldFontRow,
.sdShieldBannerGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0.35rem 0;
}

.sdShieldTopRow label,
.sdShieldSecondRow label,
.sdShieldThirdRow label,
.sdShieldFontRow label,
.sdShieldBannerGroup label {
  width: 6.6rem;
}

.sdShieldTopRow label[for="sdShield_shieldType"] {
  margin-left: 0;
}

/* Pull Variant and Shield Size left by making their controls smaller */
#sdShield_shieldBasePicker,
#sdShield_shieldBase,
#sdShield_shieldBaseButton {
  width: 10.5rem;
}

#sdShield_shieldType {
  width: 6.8rem;
}

#sdShield_shieldSize {
  width: 4rem;
}

.sdShieldRouteNumberInput {
  width: 10.5rem;
}

.sdShieldCountyTextInput {
  width: 10.5rem;
}

#sdShield_bannerType,
#sdShield_bannerType2,
#sdShield_bannerPosition,
#sdShield_bannerPosition2,
#sdShield_specialBannerType {
  width: 7.5rem;
}

.sdShieldBannerCustomInput {
  width: 10rem;
}

.sdShieldScaleLabel,
.sdShieldCapLabel,
.sdShieldPositionLabel {
  width: max-content;
  min-width: 0;
}

/* Shared width for the main block editor property panels */
#smSPProperties {
  --sm-block-property-width: 38rem;
}

/* Make Control Text, Shield, and Action Message property boxes the same width */
#smSPProperties > [data-property="sdCtrlText"],
#smSPProperties > [data-property="sdShield"],
#smSPProperties > [data-property="sdActionMessage"] {
  width: var(--sm-block-property-width) !important;
  max-width: var(--sm-block-property-width) !important;
  min-width: var(--sm-block-property-width) !important;
  box-sizing: border-box;
}

/* Keep Control Text from stretching wider than that shared width */
#smSPProperties > [data-property="sdCtrlText"] .sdCtrlTextTopRow,
#smSPProperties > [data-property="sdCtrlText"] .sdCtrlTextSecondRow,
#smSPProperties > [data-property="sdCtrlText"] .sdCtrlTextSettingsRow {
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Compact Control Text inputs */
#sdCtrlText_textContent {
  width: 13.5rem !important;
}

#sdCtrlText_fontFamily {
  width: 10.5rem !important;
}

#sdCtrlText_backgroundColor,
#sdCtrlText_textColor {
  width: 8.5rem !important;
}

#sdCtrlText_spacing {
  width: 4.25rem !important;
}

#sdCtrlText_alignment {
  width: 8rem !important;
}

#sdCtrlText_fontSize,
#sdCtrlText_lineHeight {
  width: 8rem !important;
}

#sdCtrlText_fontSizeVal,
#sdCtrlText_lineHeightVal {
  width: 4rem !important;
}

/* Compact labels so the row does not push wider */
#smSPProperties > [data-property="sdCtrlText"] label {
  width: 7rem !important;
  white-space: normal;
}

/* Keep Small Capitals with the bottom checkbox row */
#smSPProperties > [data-property="sdCtrlText"] .sdCtrlTextSmallCapsLabel {
  width: 6.75rem !important;
  margin-left: 0.5rem;
}

/* Prevent any child row from making the Shield panel wider */
#smSPProperties > [data-property="sdShield"] > div,
#smSPProperties > [data-property="sdActionMessage"] > div {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Manual banner toggle layout */
.sdShieldManualBannerLabel {
  width: max-content !important;
  min-width: 0 !important;
  margin-left: 0.75rem;
}

#sdShield_manualBanners {
  margin-right: 0.75rem;
}

/* Do not reserve space for hidden banner controls */
#sdShield_bannerType[hidden],
#sdShield_bannerType2[hidden],
#sdShield_bannerCustomText[hidden],
#sdShield_bannerCustomText2[hidden] {
  display: none !important;
}

/* Since only one banner input mode is visible at once, the visible one can be wider */
#sdShield_bannerType,
#sdShield_bannerType2,
.sdShieldBannerCustomInput {
  width: 10rem !important;
}

/* Keep Shield editor compact, same general width as the Action Message editor */
#smSPProperties > [data-property="sdShield"] {
  width: 42rem !important;
  max-width: 42rem !important;
  min-width: 42rem !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* Prevent Shield rows from forcing the panel wider */
#smSPProperties > [data-property="sdShield"] > div {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Narrow banner controls */
#sdShield_bannerType,
#sdShield_bannerType2,
#sdShield_bannerCustomText,
#sdShield_bannerCustomText2 {
  width: 6.5rem !important;
  max-width: 6.5rem !important;
  min-width: 6.5rem !important;
}

/* Narrow banner position dropdowns */
#sdShield_bannerPosition,
#sdShield_bannerPosition2 {
  width: 6.5rem !important;
  max-width: 6.5rem !important;
  min-width: 6.5rem !important;
}

/* Narrow banner font controls */
#sdShield_bannerFont {
  width: 9rem !important;
  max-width: 9rem !important;
  min-width: 9rem !important;
}

#sdShield_bannerFontSize,
#sdShield_bannerFontSizeVal {
  width: 3.5rem !important;
  max-width: 3.5rem !important;
  min-width: 3.5rem !important;
}

/* Stop the banner font size label/input from pushing past the right edge */
label[for="sdShield_bannerFontSize"] {
  width: 8.5rem !important;
  max-width: 8.5rem !important;
  white-space: normal !important;
  line-height: 1.05;
}

/* Compact the capitalize labels */
.sdShieldCapitalizeLabel,
.sdShieldCapitalizeLabel2 {
  width: 6.5rem !important;
  max-width: 6.5rem !important;
  white-space: normal !important;
  line-height: 1.05;
}

/* Keep manual banner toggle from stretching the row */
.sdShieldManualBannerLabel {
  width: max-content !important;
  max-width: 9rem !important;
  white-space: normal !important;
  line-height: 1.05;
}

/* Hidden banner mode should not reserve space */
#sdShield_bannerType[hidden],
#sdShield_bannerType2[hidden],
#sdShield_bannerCustomText[hidden],
#sdShield_bannerCustomText2[hidden] {
  display: none !important;
}

/* Give the Shield font row its own layout so it does not follow the banner-row columns */
#smSPProperties > [data-property="sdShield"] .sdShieldFontRow {
  display: grid !important;
  grid-template-columns: 7rem 10rem 9.5rem 3.5rem;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
  align-items: center;
  justify-content: start;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Reset the generic Shield label widths just for this row */
#smSPProperties > [data-property="sdShield"] .sdShieldFontRow label {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1.05;
}

/* Banner font dropdown */
#sdShield_bannerFontFamily {
  width: 10rem !important;
  min-width: 10rem !important;
  max-width: 10rem !important;
}

/* Banner font size label */
#smSPProperties > [data-property="sdShield"] .sdShieldBannerFontSizeLabel {
  width: auto !important;
  text-align: right;
  justify-self: end;
  white-space: nowrap !important;
  margin-left: 0 !important;
}

/* Banner font size input */
#sdShield_fontSize {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
}

#smSPProperties > [data-property="sdShield"] .sdShieldFontRow {
  grid-template-columns: 7rem 10rem max-content 3.5rem !important;
  width: max-content !important;
  max-width: 100% !important;
}

#sdShield_fontSize {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
  box-sizing: border-box;
}

#smSPProperties > [data-property="sdShield"] .sdShieldBannerFontSizeLabel {
  width: max-content !important;
  max-width: max-content !important;
}

/* Custom font dropdowns */
.fontPicker {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  vertical-align: middle;
  z-index: 20;
}

.fontPicker.hidden {
  display: none !important;
}

.fontPickerNativeSelect {
  display: none !important;
}

.fontPickerTrigger {
  width: 100%;
  min-width: 12rem;
  height: 2.2rem;
  padding: 0 0.55rem;
  border: 0;
  background: #050505;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.fontPickerTriggerLabel {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fontPickerTriggerCaret {
  flex: 0 0 auto;
  font-family: "Material Symbols Outlined";
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.fontPicker.open .fontPickerTriggerCaret {
  transform: rotate(180deg);
}

.fontPickerMenu {
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(28rem, 80vw);
  max-height: min(34rem, 75vh);
  overflow-y: auto;
  background: #101010;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.32);
  z-index: 5000;

  opacity: 0;
  transform: translateY(-0.25rem) scaleY(0.96);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.fontPicker.open .fontPickerMenu {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

.fontPickerFamilyBlock {
  display: block;
}

.fontPickerFamilyHeader {
  padding: 0.45rem 0.65rem;
  font-weight: 800;
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.fontPickerFamilyChildren {
  display: flex;
  flex-direction: column;
}

.fontPickerItem {
  width: 100%;
  min-width: 14rem;
  border: 0;
  background: transparent;
  color: white;
  padding: 0.45rem 0.75rem;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.1;
  box-sizing: border-box;
}

.fontPickerFontItem {
  padding-left: 1.25rem;
}

.fontPickerItem:hover {
  background: rgba(255, 255, 255, 0.14);
}

.fontPickerItem.selected {
  background: rgba(255, 255, 255, 0.28);
}

.fontPickerItem.selected::before {
  content: "✓";
  display: inline-block;
  width: 1.1rem;
  margin-left: -1.1rem;
  opacity: 0.9;
}

.fontPicker-family .fontPickerItem {
  min-width: 13rem;
  font-size: 1rem;
}

.fontPicker-familyFont .fontPickerItem {
  min-width: 13rem;
}

.fontPicker-allFontsGrouped .fontPickerTrigger {
  min-width: 12rem;
}

.fontPicker-allFontsGrouped .fontPickerMenu {
  min-width: 18rem;
}

.fontPicker-allFontsGrouped .fontPickerItem {
  font-size: 1rem;
}

.fontPicker-allFontsGrouped .fontPickerFamilyHeader {
  font-size: 0.85rem;
}

/* Keep the current closed-dropdown footprint in the subpanel editor */
#sdCtrlText_fontFamily + .fontPicker .fontPickerTrigger,
#sdAdvisory_fontFamily + .fontPicker .fontPickerTrigger,
#sdActionMessage_fontFamily + .fontPicker .fontPickerTrigger {
  min-width: 12rem;
}

/* Defaults page closed dropdowns */
#settingsDefaultsControlTextFontFamily + .fontPicker .fontPickerTrigger,
#settingsDefaultsAdvisoryFontFamily + .fontPicker .fontPickerTrigger,
#settingsDefaultsActionFontFamily + .fontPicker .fontPickerTrigger,
#settingsDefaultsControlTextFont + .fontPicker .fontPickerTrigger,
#settingsDefaultsAdvisoryFont + .fontPicker .fontPickerTrigger,
#settingsDefaultsActionFont + .fontPicker .fontPickerTrigger {
  min-width: 17rem;
}

/* Light mode */
:root[data-theme="light"] .fontPickerTrigger {
  background: #efefef;
  color: #050505;
}

:root[data-theme="light"] .fontPickerMenu {
  background: #f4f4f4;
  color: #050505;
  border-color: rgba(0, 0, 0, 0.2);
}

:root[data-theme="light"] .fontPickerFamilyHeader {
  background: rgba(0, 0, 0, 0.07);
}

:root[data-theme="light"] .fontPickerItem {
  color: #050505;
}

:root[data-theme="light"] .fontPickerItem:hover {
  background: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .fontPickerItem.selected {
  background: rgba(0, 0, 0, 0.22);
}

/* font picker cleanup */
.fontPicker {
  position: relative;
  z-index: 20;
}

.fontPickerMenu {
  left: 0;
  right: auto;
  z-index: 100000;
  min-width: 100%;
  max-width: 22rem;
}

/* closed buttons a bit narrower */
#sdCtrlText_fontFamily + .fontPicker .fontPickerTrigger,
#sdAdvisory_fontFamily + .fontPicker .fontPickerTrigger,
#sdActionMessage_fontFamily + .fontPicker .fontPickerTrigger {
  min-width: 10.75rem;
}

#settingsDefaultsControlTextFontFamily + .fontPicker .fontPickerTrigger,
#settingsDefaultsAdvisoryFontFamily + .fontPicker .fontPickerTrigger,
#settingsDefaultsActionFontFamily + .fontPicker .fontPickerTrigger,
#settingsDefaultsControlTextFont + .fontPicker .fontPickerTrigger,
#settingsDefaultsAdvisoryFont + .fontPicker .fontPickerTrigger,
#settingsDefaultsActionFont + .fontPicker .fontPickerTrigger {
  min-width: 14rem;
}

.fontPicker-allFontsGrouped .fontPickerMenu {
  min-width: 14.5rem;
}

.fontPicker-family .fontPickerMenu,
.fontPicker-familyFont .fontPickerMenu {
  min-width: 14rem;
}

/* left-align everything */
.fontPickerTrigger,
.fontPickerTriggerLabel,
.fontPickerFamilyHeader,
.fontPickerItem {
  text-align: left;
}

.fontPickerFamilyHeader,
.fontPickerItem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.fontPickerFamilyHeader {
  padding: 0.45rem 0.75rem;
}

.fontPickerItem {
  padding: 0.45rem 0.75rem;
}

.fontPickerFontItem {
  padding-left: 0.9rem;
}

/* remove the checkmark */
.fontPickerItem.selected::before {
  content: none !important;
  display: none !important;
}

.fontPickerItem.selected {
  background: rgba(255, 255, 255, 0.28);
}

/* Font picker should layer over the form, not move the form */
.fontPicker {
  position: relative !important;
  display: inline-block !important;
  z-index: 50;
}

/* Only the open picker gets a high stacking layer */
.fontPicker.open {
  z-index: 999999 !important;
}

/* The menu overlays everything below it */
.fontPickerMenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;

  z-index: 1000000 !important;

  min-width: 100% !important;
  width: max-content !important;
  max-width: 22rem !important;

  max-height: min(34rem, 75vh) !important;
  overflow-y: auto !important;

  pointer-events: none;
}

/* Only clickable when opened */
.fontPicker.open .fontPickerMenu {
  pointer-events: auto !important;
}

/* Do NOT let the menu affect layout height */
.fontPickerMenu {
  margin: 0 !important;
}

/* Closed trigger keeps its normal size */
.fontPickerTrigger {
  position: relative !important;
  z-index: 2;
}

/* Let custom font dropdowns escape the subpanels modal */
.sMModal.subPanelConfig,
.sMModal.subPanelConfig .sMModalContent,
.sMModal.subPanelConfig #sMSPSettings,
.sMModal.subPanelConfig #smSPProperties,
.sMModal.subPanelConfig #smSPBlockProperties,
.sMModal.subPanelConfig #smSPShieldProperties {
  overflow: visible !important;
}

/* Do not make the modal grow to contain the dropdown */
.sMModal.subPanelConfig .fontPickerMenu {
  position: absolute !important;
  top: calc(100% + 0.15rem) !important;
  left: 0 !important;
  z-index: 9999999 !important;

  max-height: min(34rem, 85vh) !important;
  overflow-y: auto !important;
}

/* Keep the open picker above everything inside the modal */
.sMModal.subPanelConfig .fontPicker.open {
  z-index: 9999998 !important;
}

/* ---------- Subpanels Control Text / Advisory / Action layout cleanup ---------- */

/* Let the first row use exact column sizes instead of flex spacing */
#smSPProperties .sdCtrlTextTopRow {
  display: grid !important;
  grid-template-columns: 5.6rem 13rem 4rem 13rem !important;
  column-gap: 0.55rem !important;
  align-items: center !important;
  justify-content: start !important;
  width: max-content !important;
}

/* Keep these labels compact so they do not create wasted space */
#smSPProperties .sdCtrlTextTopRow label[for$="_textContent"] {
  width: 5.6rem !important;
  min-width: 5.6rem !important;
  text-align: right !important;
}

#smSPProperties .sdCtrlTextTopRow label[for$="_fontFamily"] {
  width: 4rem !important;
  min-width: 4rem !important;
  text-align: right !important;
}

/* Content input: wider, taller, larger text */
#smSPProperties input.sdTextEditorContentCompact,
#sdCtrlText_textContent,
#sdAdvisory_textContent,
#sdActionMessage_textContent {
  width: 13rem !important;
  min-width: 13rem !important;
  max-width: 13rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  font-size: 1.08rem !important;
  line-height: 1.2 !important;
  padding: 0.35rem 0.45rem !important;
  box-sizing: border-box !important;
}

/* Override the old compact input class that was forcing 10rem */
#smSPProperties .sdTextEditorContentCompact {
  width: 13rem !important;
  min-width: 13rem !important;
  max-width: 13rem !important;
  flex: 0 0 13rem !important;
}

/* Font dropdown: same position, capped width */
#smSPProperties .fontPicker,
#smSPProperties .fontPickerTrigger {
  width: 13rem !important;
  max-width: 13rem !important;
  min-width: 13rem !important;
  box-sizing: border-box !important;
}

#smSPProperties .fontPickerTrigger {
  height: 2rem !important;
  min-height: 2rem !important;
}

/* Only truncate the text inside the closed font dropdown */
#smSPProperties .fontPickerTriggerLabel {
  min-width: 0 !important;
  max-width: 10.5rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Taller real shield picker dropdown */
.shieldPickerPopover {
  max-height: min(760px, 92vh) !important;
  overflow-y: auto !important;
}

.shieldPicker.open .shieldPickerPopover {
  max-height: min(760px, 92vh) !important;
}


/* Narrower Exit Tabs menu */
.exitTabConfig {
  width: 40rem;
  max-width: 40rem;
}

.exitTabConfig .sMModalContent {
  overflow-x: hidden;
}

.exitTabConfig .sMModalTitle {
  min-width: 5rem;
  white-space: nowrap;
  box-sizing: border-box;
}

.exitTabConfig .sMModalTitle span:not(.material-symbols-outlined) {
  white-space: nowrap;
}

.exitTabSliderStack {
  width: 100%;
}

.qcExitMarkerControls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.6rem;
}

.qcExitMarkerControls legend {
  margin-bottom: 0.15rem;
}

.qcExitMarkerRow {
  display: grid;
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.35rem;
}

.qcExitMarkerTopRow {
  grid-template-columns: 9.5rem auto 4.5rem 9rem;
}

.qcExitMarkerSecondRow {
  grid-template-columns: 9.5rem 8.5rem 10.5rem auto;
}

.qcExitMarkerSizeRow {
  grid-template-columns: 9.5rem 12rem 3rem;
}

.qcExitMarkerControls label {
  width: auto;
  margin: 0;
  text-align: right;
}

#qcExitMarkerNumber {
  width: 8rem;
}

#qcExitMarkerPosition {
  width: 8.5rem;
}

#qcExitMarkerSize {
  width: 12rem;
}

#qcExitMarkerSizeValue {
  width: 3rem;
  text-align: left;
  margin: 0;
}

/* Narrow Exit Tabs menu itself */
.exitTabConfig {
  width: 40rem !important;
  max-width: 40rem !important;
  min-width: 0rem !important;
}

/* Keep the header controls inside the narrower menu */
.exitTabConfig .sMModalBar {
  max-width: 100%;
  box-sizing: border-box;
}

.exitTabConfig .listNav {
  max-width: 100%;
  box-sizing: border-box;
}

.exitTabConfig .listNavOptions {
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

/* Keep content from forcing the whole menu wider */
.exitTabConfig .sMModalContent {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.exitTabConfig #sMExitTabSetting {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- Guide Arrows menu width cleanup ---------- */

/* Stop every Guide Arrows menu from being forced to 50rem */
.sMModal.guideArrowConfig {
  width: max-content !important;
  min-width: 0 !important;
  max-width: 56rem !important;
}

/* Standard Arrows can be much narrower than APL */
.sMModal.guideArrowConfig[data-current-menu="sMStandardArrows"] {
  width: 40rem !important;
  max-width: 40rem !important;
}

/* APL still needs more room, but not the old full 50rem */
.sMModal.guideArrowConfig[data-current-menu="sMAPL"] {
  width: 44rem !important;
  max-width: 44rem !important;
}

/* Keep modal content from forcing extra width */
.sMModal.guideArrowConfig .sMModalContent {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* Shield picker: expanded folders must not clip long nested lists.
   The popover itself handles scrolling. */
.shieldPickerTreeRow.expanded,
.shieldPickerTreeChildren.expanded {
  overflow: visible !important;
}

.shieldPickerTreeChildren.expanded {
  max-height: none !important;
}

.shieldPickerItem[data-node-value="__customShieldMaker"] {
  font-weight: 700;
  border-bottom: 1px solid rgba(var(--baseColor), 0.35);
  margin-bottom: 0.25rem;
}

.shieldPickerItem[data-node-value="__customShieldMaker"] .shieldPickerItemLabel {
  letter-spacing: 0.01em;
}

/* Image asset selector dialogs: icon, toll logo, arrow */
dialog.assetSelectorDialog {
  width: min(52rem, 90vw);
  max-width: min(52rem, 90vw);
  max-height: min(42rem, 88vh);
  padding: 0;
  border: 0;
  background: var(--hotbarColor);
  color: var(--textColor);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45);
  overflow: hidden;
  flex-direction: column;
  gap: 0;
}

dialog.assetSelectorDialog[open] {
  display: flex !important;
}

dialog.assetSelectorDialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.assetSelectorHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem 0.75rem;
  background: rgba(var(--baseColor), 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.assetSelectorHeader h3 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1.25rem;
  line-height: 1.1;
}

.assetSelectorHeader p {
  margin: 0.25rem 0 0;
  opacity: 0.75;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: normal;
}

.assetSelectorClose {
  width: 2.2rem;
  height: 2.2rem;
  min-width: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: var(--textColor);
  cursor: pointer;
}

.assetSelectorClose:hover {
  background: var(--hoverColor);
}

.assetSelectorSearch {
  margin: 0.85rem 1rem 0;
  width: calc(100% - 2rem);
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: var(--textColor);
  font-family: "Inter", sans-serif;
  font-size: 1rem;
}

.assetPickerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.75rem;
  max-height: min(30rem, 62vh);
  overflow-y: auto;
  padding: 1rem;
  background: transparent;
}

.assetPickerItem {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: var(--textColor);
  min-height: 7.25rem;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.55rem;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  text-align: center;
}

.assetPickerItem:hover {
  background: var(--hoverColor);
}

.assetPickerItem.selected {
  outline: 2px solid var(--selectedColor);
  background: rgba(var(--baseColor), 0.45);
}

.assetPickerPreview {
  height: 4.25rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.assetPickerPreview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.assetPickerLabel {
  display: block !important;
  font-size: 0.78rem;
  line-height: 1.15;
  opacity: 0.95;
  overflow-wrap: anywhere;
}

.assetPreviewMissing .assetPickerPreview {
  font-size: 1.4rem;
  opacity: 0.6;
}

.assetPickerEmpty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  opacity: 0.75;
  font-family: "Inter", sans-serif;
}

#arrowGrid .assetPickerPreview img,
.arrowPickerPreviewImage {
  filter: invert(1);
}

:root[data-theme="dark"] #iconGrid .assetPickerPreview img {
  filter: invert(1);
}

:root[data-theme="dark"] dialog.assetSelectorDialog {
  background-color: rgb(28, 34, 52);
  color: rgb(235, 240, 255);
}

:root[data-theme="dark"] .assetSelectorSearch {
  background-color: rgb(20, 24, 36);
  color: white;
}


/* Toll logo picker: full-screen layout */
#tollLogoSelectorModal.assetSelectorDialog {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#tollLogoSelectorModal.assetSelectorDialog[open] {
  display: flex !important;
  flex-direction: column;
}

#tollLogoSelectorModal .assetSelectorHeader {
  flex: 0 0 auto;
}

#tollLogoSelectorModal .assetSelectorSearch {
  flex: 0 0 auto;
}

#tollLogoSelectorModal .assetPickerGrid {
  flex: 1 1 auto;
  max-height: none !important;
  height: auto;
  overflow-y: auto;

  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  align-content: start;
  padding: 1rem;
}

/* Keep huge/wide toll logos from blowing up the cards */
#tollLogoSelectorModal .assetPickerPreview {
  height: 4.5rem;
  max-height: 4.5rem;
  padding: 0.35rem;
  box-sizing: border-box;
}

#tollLogoSelectorModal .assetPickerPreview img,
#tollLogoSelectorModal .tollLogoPickerPreviewImage {
  max-width: 6.5rem !important;
  max-height: 3.5rem !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Make toll logo cards consistent */
#tollLogoSelectorModal .assetPickerItem {
  min-height: 7.5rem;
  max-width: 11rem;
  justify-self: stretch;
  overflow: hidden;
}

#tollLogoSelectorModal .assetPickerLabel {
  min-height: 1.8rem;
}

/* Toll Logo block editor: streamlined control layout */
.sMModal.subPanelConfig [data-property="sdTollLogo"]:not(.hidden) {
  display: grid !important;
  grid-template-columns: 8rem minmax(6rem, 11rem) 8rem minmax(6rem, 13rem);
  grid-auto-rows: minmax(2rem, auto);
  align-items: center;
  gap: 0.45rem 0.7rem;

  width: min(100%, 50rem);
  max-width: 100%;
  min-width: 0;

  padding: 0.85rem;
  margin: 0 auto;

  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.sMModal.subPanelConfig [data-property="sdTollLogo"] br {
  display: none !important;
}

.sMModal.subPanelConfig [data-property="sdTollLogo"] label {
  width: auto;
  max-width: 8rem;
  margin: 0;
  text-align: right;
  line-height: 1.1;
  white-space: normal;
  font-size: 0.88rem;
}

.sMModal.subPanelConfig [data-property="sdTollLogo"] input,
.sMModal.subPanelConfig [data-property="sdTollLogo"] select,
.sMModal.subPanelConfig [data-property="sdTollLogo"] button {
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.sMModal.subPanelConfig [data-property="sdTollLogo"] input[type="number"],
.sMModal.subPanelConfig [data-property="sdTollLogo"] select {
  width: 100%;
  min-width: 0;
  padding: 0.28rem 0.35rem;
}

.sMModal.subPanelConfig [data-property="sdTollLogo"] input[type="checkbox"] {
  justify-self: start;
  width: 1rem;
  height: 1rem;
}

/* Hide the stored value input */
#sdTollLogo_logo {
  display: none !important;
}

/* Row 1: logo picker */
label[for="sdTollLogo_logo"] {
  grid-column: 1;
  grid-row: 1;
}

#sdTollLogo_chooseBtn {
  grid-column: 2;
  grid-row: 1;
  width: max-content;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
}

#sdTollLogo_selectedLabel {
  grid-column: 3 / 5;
  grid-row: 1;

  display: block;
  min-width: 0;
  max-width: 100%;

  padding: 0.35rem 0.55rem;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 0.2rem;

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

/* Row 2: size and spacing */
label[for="sdTollLogo_logoHeight"] {
  grid-column: 1;
  grid-row: 2;
}

#sdTollLogo_logoHeight {
  grid-column: 2;
  grid-row: 2;
}

label[for="sdTollLogo_spacing"] {
  grid-column: 3;
  grid-row: 2;
}

#sdTollLogo_spacing {
  grid-column: 4;
  grid-row: 2;
}

/* Row 3: alignment and background */
label[for="sdTollLogo_alignment"] {
  grid-column: 1;
  grid-row: 3;
}

#sdTollLogo_alignment {
  grid-column: 2;
  grid-row: 3;
}

label[for="sdTollLogo_background"] {
  grid-column: 3;
  grid-row: 3;
}

#sdTollLogo_background {
  grid-column: 4;
  grid-row: 3;
}

#sdTollLogo_backgroundColor:not(.hidden) {
  grid-column: 4;
  grid-row: 3;
  width: calc(100% - 1.7rem);
  margin-left: 1.7rem;
}

/* Row 4: square icon and only block */
label[for="sdTollLogo_squareIcon"] {
  grid-column: 1;
  grid-row: 4;
}

#sdTollLogo_squareIcon {
  grid-column: 2;
  grid-row: 4;
}

label[for="sdTollLogo_hasOnlyBlock"]:not(.hidden) {
  grid-column: 3;
  grid-row: 4;
}

#sdTollLogo_hasOnlyBlock:not(.hidden) {
  grid-column: 4;
  grid-row: 4;
}

/* Row 5: border radius and horizontal padding */
label[for="sdTollLogo_borderRadius"]:not(.hidden) {
  grid-column: 1;
  grid-row: 5;
}

#sdTollLogo_borderRadius:not(.hidden) {
  grid-column: 2;
  grid-row: 5;
}

label[for="sdTollLogo_horizontalPadding"]:not(.hidden) {
  grid-column: 3;
  grid-row: 5;
}

#sdTollLogo_horizontalPadding:not(.hidden) {
  grid-column: 4;
  grid-row: 5;
}

/* Row 6: vertical padding */
label[for="sdTollLogo_verticalPadding"]:not(.hidden) {
  grid-column: 3;
  grid-row: 6;
}

#sdTollLogo_verticalPadding:not(.hidden) {
  grid-column: 4;
  grid-row: 6;
}

/* Keep hidden controls hidden even with explicit grid placement */
.sMModal.subPanelConfig [data-property="sdTollLogo"] .hidden {
  display: none !important;
}

/* Icon picker: full-screen layout */
#iconSelectorModal.assetSelectorDialog {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#iconSelectorModal.assetSelectorDialog[open] {
  display: flex !important;
  flex-direction: column;
}

#iconSelectorModal .assetSelectorHeader {
  flex: 0 0 auto;
}

#iconSelectorModal .assetSelectorSearch {
  flex: 0 0 auto;
}

#iconSelectorModal .assetPickerGrid {
  flex: 1 1 auto;
  max-height: none !important;
  height: auto;
  overflow-y: auto;

  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  align-content: start;
  padding: 1rem;
}

/* Keep icon cards consistent */
#iconSelectorModal .assetPickerItem {
  min-height: 7.5rem;
  max-width: 11rem;
  justify-self: stretch;
  overflow: hidden;
}

#iconSelectorModal .assetPickerPreview {
  height: 4.5rem;
  max-height: 4.5rem;
  padding: 0.35rem;
  box-sizing: border-box;
}

#iconSelectorModal .assetPickerPreview img,
#iconSelectorModal .iconPickerPreviewImage {
  max-width: 4rem !important;
  max-height: 3.6rem !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Do not invert icon colors in dark mode */
:root[data-theme="dark"] #iconGrid .assetPickerPreview img,
:root[data-theme="dark"] #iconSelectorModal .assetPickerPreview img,
:root[data-theme="dark"] #iconSelectorModal .iconPickerPreviewImage {
  filter: none !important;
}


/* =========================
   Image picker dialogs
   Icon, Toll Logo, Arrow
   ========================= */

#iconSelectorModal,
#tollLogoSelectorModal,
#arrowSelectorModal {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: rgb(31, 40, 66);
  color: white;
}

#iconSelectorModal[open],
#tollLogoSelectorModal[open],
#arrowSelectorModal[open] {
  display: grid !important;
  grid-template-rows: auto auto 1fr auto;
}

#iconSelectorModal h3,
#tollLogoSelectorModal h3,
#arrowSelectorModal h3 {
  margin: 0;
  padding: 1rem 1.25rem 0.35rem;
  font-size: 1.45rem;
  line-height: 1.1;
  font-family: "Inter", sans-serif;
}

#iconSearch,
#tollLogoSearch,
#arrowSearch {
  width: calc(100% - 2.5rem);
  margin: 0 1.25rem 1rem;
  padding: 0.8rem 0.95rem;
  font-size: 1rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.22);
  color: white;
}

#iconGrid,
#tollLogoGrid,
#arrowGrid {
  display: grid !important;
  justify-content: start;
  align-content: start;
  gap: 0.9rem;
  padding: 1rem 1.25rem 1.25rem;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none !important;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

#iconGrid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 112px));
}

#tollLogoGrid {
  grid-template-columns: repeat(auto-fill, minmax(138px, 138px));
}

#arrowGrid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 112px));
}

.assetGridCard {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  border-radius: 0;
  transition: background-color 0.15s ease, outline-color 0.15s ease;
  font-family: "Inter", sans-serif;
}

.iconGridCard,
.arrowGridCard {
  grid-template-rows: 82px auto;
  width: 112px;
  min-height: 132px;
}

.tollLogoGridCard {
  grid-template-rows: 82px auto;
  width: 138px;
  min-height: 132px;
}

.assetGridCard:hover,
.assetGridCard:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  outline: 1px solid rgba(255, 255, 255, 0.2);
}

.assetGridCard.selected {
  outline: 2px solid var(--selectedColor);
  background: rgba(var(--baseColor), 0.35);
}

.assetGridPreview {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  box-sizing: border-box;
  overflow: hidden;
}

.assetGridPreview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none !important;
}

.tollLogoGridCard .assetGridPreview img {
  max-width: 6.5rem;
  max-height: 3.2rem;
  width: auto;
  height: auto;
}

.arrowGridCard .assetGridPreview img {
  max-width: 4.5rem;
  max-height: 4.5rem;
  width: auto;
  height: auto;
  filter: invert(1) !important;
}

.assetGridLabel {
  font-size: 0.78rem;
  line-height: 1.15;
  min-height: 2.1rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.assetGridEmpty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  opacity: 0.75;
  font-family: "Inter", sans-serif;
}

.missingPreview {
  font-size: 1.7rem;
  opacity: 0.7;
}

#iconSelectorModal .options,
#tollLogoSelectorModal .options,
#arrowSelectorModal .options {
  margin: 0;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}

/* Keep the old picker styles from interfering */
#iconGrid .iconGridItem,
#tollLogoGrid .iconGridItem,
#arrowGrid .iconGridItem {
  all: unset;
}

/* Dark mode should not invert icon or toll-logo previews */
:root[data-theme="dark"] #iconGrid .assetGridPreview img,
:root[data-theme="dark"] #tollLogoGrid .assetGridPreview img {
  filter: none !important;
}

/* Arrows should stay visible on the dark preview cards */
:root[data-theme="dark"] #arrowGrid .assetGridPreview img {
  filter: invert(1) !important;
}

/* =========================
   Image picker light/dark theme fix
   Icon, Toll Logo, Arrow
   ========================= */

:root {
  --assetPickerDialogBg: #eef3ff;
  --assetPickerHeaderBg: #dbe6ff;
  --assetPickerGridBg: #e7eeff;
  --assetPickerCardBg: rgba(255, 255, 255, 0.78);
  --assetPickerCardHoverBg: rgba(255, 255, 255, 0.95);
  --assetPickerPreviewBg: rgba(0, 0, 0, 0.035);
  --assetPickerText: #121827;
  --assetPickerMutedText: rgba(18, 24, 39, 0.72);
  --assetPickerInputBg: #ffffff;
  --assetPickerInputBorder: rgba(0, 0, 0, 0.28);
  --assetPickerCloseBg: rgba(0, 0, 0, 0.08);
  --assetPickerCloseHoverBg: rgba(0, 0, 0, 0.16);
}

:root[data-theme="dark"] {
  --assetPickerDialogBg: rgb(31, 40, 66);
  --assetPickerHeaderBg: rgb(18, 23, 38);
  --assetPickerGridBg: rgba(255, 255, 255, 0.04);
  --assetPickerCardBg: rgba(255, 255, 255, 0.08);
  --assetPickerCardHoverBg: rgba(255, 255, 255, 0.16);
  --assetPickerPreviewBg: rgba(255, 255, 255, 0.05);
  --assetPickerText: #ffffff;
  --assetPickerMutedText: rgba(255, 255, 255, 0.72);
  --assetPickerInputBg: rgba(0, 0, 0, 0.22);
  --assetPickerInputBorder: rgba(255, 255, 255, 0.18);
  --assetPickerCloseBg: rgba(0, 0, 0, 0.35);
  --assetPickerCloseHoverBg: rgba(255, 255, 255, 0.12);
}

#iconSelectorModal,
#tollLogoSelectorModal,
#arrowSelectorModal {
  background: var(--assetPickerDialogBg) !important;
  color: var(--assetPickerText) !important;
}

#iconSelectorModal .assetSelectorHeader,
#tollLogoSelectorModal .assetSelectorHeader,
#arrowSelectorModal .assetSelectorHeader {
  background: var(--assetPickerHeaderBg) !important;
  color: var(--assetPickerText) !important;
}

#iconSelectorModal h3,
#tollLogoSelectorModal h3,
#arrowSelectorModal h3,
#iconSelectorModal p,
#tollLogoSelectorModal p,
#arrowSelectorModal p {
  color: var(--assetPickerText) !important;
}

#iconSelectorModal p,
#tollLogoSelectorModal p,
#arrowSelectorModal p {
  color: var(--assetPickerMutedText) !important;
}

#iconSearch,
#tollLogoSearch,
#arrowSearch {
  background: var(--assetPickerInputBg) !important;
  color: var(--assetPickerText) !important;
  border-color: var(--assetPickerInputBorder) !important;
}

#iconSearch::placeholder,
#tollLogoSearch::placeholder,
#arrowSearch::placeholder {
  color: var(--assetPickerMutedText) !important;
}

#iconGrid,
#tollLogoGrid,
#arrowGrid {
  background: var(--assetPickerGridBg) !important;
}

.assetGridCard,
#iconGrid .iconGridCard,
#tollLogoGrid .tollLogoGridCard,
#arrowGrid .arrowGridCard {
  background: var(--assetPickerCardBg) !important;
  color: var(--assetPickerText) !important;
}

.assetGridCard:hover,
.assetGridCard:focus-visible,
#iconGrid .iconGridCard:hover,
#tollLogoGrid .tollLogoGridCard:hover,
#arrowGrid .arrowGridCard:hover {
  background: var(--assetPickerCardHoverBg) !important;
}

.assetGridPreview,
.iconGridCardPreview {
  background: var(--assetPickerPreviewBg) !important;
}

.assetGridLabel,
.iconGridCardLabel {
  color: var(--assetPickerText) !important;
}

.assetSelectorClose,
#closeIconSelector,
#closeTollLogoSelector,
#closeArrowSelector {
  background: var(--assetPickerCloseBg) !important;
  color: var(--assetPickerText) !important;
}

.assetSelectorClose:hover,
#closeIconSelector:hover,
#closeTollLogoSelector:hover,
#closeArrowSelector:hover {
  background: var(--assetPickerCloseHoverBg) !important;
}

/* Light mode: do not invert any picker previews */
:root[data-theme="light"] #iconGrid img,
:root[data-theme="light"] #tollLogoGrid img,
:root[data-theme="light"] #arrowGrid img {
  filter: none !important;
}

/* Dark mode: icons/logos stay normal, arrows invert so they remain visible */
:root[data-theme="dark"] #iconGrid img,
:root[data-theme="dark"] #tollLogoGrid img {
  filter: none !important;
}

:root[data-theme="dark"] #arrowGrid img {
  filter: invert(1) !important;
}

/* Toll logo picker: fixed square previews, no overflow */
#tollLogoGrid {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 8.5rem)) !important;
  gap: 1rem !important;
  align-content: start;
}

#tollLogoGrid .tollLogoGridCard,
#tollLogoGrid .assetGridCard {
  width: 8.5rem !important;
  height: 8.5rem !important;
  min-height: 8.5rem !important;
  display: grid !important;
  grid-template-rows: 5.8rem 1.7rem !important;
  padding: 0.55rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#tollLogoGrid .assetGridPreview {
  width: 100% !important;
  height: 5.8rem !important;
  aspect-ratio: auto !important;

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

  padding: 0.25rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#tollLogoGrid .assetGridPreview img,
#tollLogoGrid .tollLogoPickerPreviewImage {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;
  filter: none !important;
}

#tollLogoGrid .assetGridLabel {
  min-height: 0 !important;
  height: 1.7rem !important;

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

  font-size: 0.78rem !important;
  line-height: 1.05 !important;

  overflow: hidden !important;
  text-align: center !important;
}

/* Shield block editor: Road Name banner field */
#smSPProperties > [data-property="sdShield"] .sdShieldRoadNameRow {
  display: grid !important;
  grid-template-columns: 7rem minmax(12rem, 18rem) 1fr;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
  align-items: center;
  justify-content: start;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#smSPProperties > [data-property="sdShield"] .sdShieldRoadNameRow label {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: right;
  white-space: nowrap !important;
  line-height: 1.05;
}

#sdShield_roadName {
  width: 18rem !important;
  min-width: 12rem !important;
  max-width: 18rem !important;
  box-sizing: border-box;
}

/* SETTINGS INTERFACE CONTROLS */
#settingsInterface .settingsInterfaceGrid {
  display: block;
}

#settingsInterface .settingsInterfaceStack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  width: min(38rem, 100%);
  margin-top: 0.5rem;
}

#settingsInterface .settingsInterfaceControlRow {
  display: grid;
  grid-template-columns: 10.5rem 22rem;
  align-items: center;
  column-gap: 1rem;
  width: 100%;
}

#settingsInterface .settingsInterfaceControlRow > label {
  width: auto;
  margin: 0;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

#settingsInterface .settingsInterfaceSelect {
  width: 20rem;
  min-width: 20rem;
  max-width: 20rem;
  min-height: 2.15rem;
  margin: 0;
  box-sizing: border-box;
}

#settingsInterface .settingsRangeControl {
  display: grid;
  grid-template-columns: 16rem 4rem;
  align-items: center;
  column-gap: 0.75rem;
  width: 20rem;
}

#settingsInterface .settingsInterfaceRange {
  width: 16rem;
  margin: 0;
}

#settingsInterface .settingsRangeValue {
  display: inline-block;
  width: 4rem;
  min-width: 4rem;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

#settingsInterface .settingsSegmentedRow {
  width: 20rem;
}

#settingsInterface .settingsThemeModeButtons {
  display: flex;
  gap: 0.35rem;
  width: 20rem;
}

#settingsInterface .settingsThemeModeButtons .settingsSegmentButton {
  flex: 1 1 0;
  min-width: 0;
}

/* Left side page buttons */
:root[data-theme="light"] #signMakerSettingsModal .settingsSideTab {
  background: rgb(242, 244, 250);
  color: #000;
  border: 0.18rem solid rgba(110, 130, 175, 0.55);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSideTab:hover {
  background: rgb(232, 236, 247);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSideTab.active {
  background: rgb(169, 181, 214);
  color: #000;
  border-color: rgba(85, 105, 155, 0.75);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSideTab.active:hover {
  background: rgb(128, 145, 195);
}


.globalBlockControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  background: rgba(0, 0, 0, 0.12);
}

.globalBlockControls[hidden] {
  display: none !important;
}

.globalBlockControls label {
  margin: 0;
  width: auto;
  white-space: nowrap;
}

.globalBlockControls select {
  width: 8rem;
}

/* SETTINGS SIDEBAR DEFAULT GROUPS */
#signMakerSettingsModal .settingsSideTabGroup {
  gap: 0.32rem;
}

#signMakerSettingsModal .settingsSideHeading {
  width: calc(100% - 0.2rem);
  margin: 0.55rem 0 0.12rem 0.1rem;
  padding: 0.1rem 0.15rem;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--textColor);
  opacity: 0.86;
  text-align: left;
  pointer-events: none;
}

#signMakerSettingsModal .settingsSideTab.settingsSideTabSmall {
  width: calc(100% - 0.85rem);
  min-height: 2.08rem;
  margin-left: 0.85rem;
  padding: 0.28rem 0.55rem;
  box-sizing: border-box;
  border-width: 0.13rem;
  font-size: 0.82rem;
  line-height: 1.05;
  white-space: nowrap;
}

#signMakerSettingsModal .settingsSideTab.settingsSideTabSmall.active {
  font-weight: 700;
}

#signMakerSettingsModal .settingsDefaultsBlankPage {
  width: max-content;
  min-width: 24rem;
  margin-top: 0.35rem;
}

#signMakerSettingsModal .settingsDefaultsBlankPageContent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

#signMakerSettingsModal .settingsDefaultsBlankPageContent h3 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--textColor);
}

:root[data-theme="light"] #signMakerSettingsModal .settingsSideHeading {
  color: #000;
}

#customShieldMaker {
  width: min(96vw, 41rem);
  max-width: none;
  height: max-content;
  max-height: 88vh;
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background: var(--hotbarColor);
  color: var(--textColor);
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

#customShieldMaker[open] {
  display: flex;
}

#customShieldMaker .customShieldMakerShell {
  width: 100%;
  max-height: 88vh;
}

#customShieldMaker .customShieldMakerHeader {
  padding: 0.55rem 0.7rem;
}

#customShieldMaker .customShieldMakerHeader h2 {
  font-size: 1.1rem;
}

#customShieldMaker .customShieldMakerBody {
  display: grid;
  grid-template-columns: 24rem 12rem;
  grid-template-areas:
    "name name"
    "preview controls"
    "footer footer";
  gap: 0.6rem;
  padding: 0.65rem;
  overflow: auto;
}

#customShieldMaker .customShieldMakerNameRow {
  grid-area: name;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 0.55rem;
  width: 100%;
}

#customShieldMaker .customShieldMakerNameField {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  width: min(100%, 26rem);
}

#customShieldMaker .customShieldMakerNameField span {
  font-size: 0.9rem;
  opacity: 1;
}

#customShieldMaker .customShieldMakerNameField input {
  width: 100%;
  margin: 0;
}

#customShieldMaker .customShieldMakerSaveButton,
#customShieldMaker .customShieldMakerDeleteButton {
  height: 1.9rem;
  min-height: 1.9rem;
  padding: 0.25rem 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

#customShieldMaker .customShieldMakerSaveButton {
  background: var(--selectedColor);
}

#customShieldMaker .customShieldMakerFooter {
  grid-area: footer;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

#customShieldMaker .customShieldMakerDeleteButton {
  background: rgba(255, 0, 0, 0.28);
}

#customShieldMaker .customShieldMakerDeleteButton:hover:enabled {
  background: rgba(255, 0, 0, 0.48);
}

#customShieldMaker .customShieldMakerPreviewPanel {
  grid-area: preview;
  gap: 0.55rem;
}

#customShieldMaker .customShieldMakerPreviewFrame {
  --customShieldPreviewScale: 4.75;
  width: 24rem;
  height: 15.25rem;
}

#customShieldMaker .customShieldMakerPreviewDropdowns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
  align-items: end;
}

#customShieldMaker .customShieldMakerControls {
  grid-area: controls;
  width: 12rem;
  gap: 0.35rem;
}

#customShieldMaker .customShieldMakerField {
  gap: 0.12rem;
}

#customShieldMaker .customShieldMakerField span {
  font-size: 0.7rem;
}

#customShieldMaker .customShieldMakerField input,
#customShieldMaker .customShieldMakerField select {
  height: 1.9rem;
  min-height: 1.9rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
}

#customShieldMaker .customShieldMakerPreviewDropdowns select {
  width: 100%;
}

#customShieldMakerRouteNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
  text-align: center;
}

#customShieldMakerRouteNumber .customShieldMakerRouteChar {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 680px) {
  #customShieldMaker {
    width: min(96vw, 25rem);
  }

  #customShieldMaker .customShieldMakerBody {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "preview"
      "controls"
      "footer";
  }

  #customShieldMaker .customShieldMakerPreviewFrame {
    width: 100%;
    height: 14rem;
    --customShieldPreviewScale: 4.25;
  }

  #customShieldMaker .customShieldMakerControls {
    width: 100%;
  }

  #customShieldMaker .customShieldMakerPreviewDropdowns {
    grid-template-columns: 1fr;
  }
}

#customShieldMaker .customShieldMakerShieldShell {
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 0;
}

#customShieldMaker #customShieldMakerPreviewImg {
  display: block;
  height: 3rem;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

#customShieldMaker #customShieldMakerRouteNumber {
  position: absolute;
  width: max-content;
  left: 50%;
  top: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0;
}



/* Custom shield picker entries */
.shieldPickerTreeRow.customShieldPickerSavedRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: stretch;
}

.shieldPickerTreeRow.customShieldPickerSavedRow > .shieldPickerItem {
  min-width: 0;
}

.shieldPickerEditCustomShield {
  width: 2rem;
  min-width: 2rem;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--baseColor), 0.16);
  color: var(--textColor);
  border: 0;
}

.shieldPickerEditCustomShield:hover:enabled {
  background: var(--hoverColor);
}

.shieldPickerEditCustomShield .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

/* Custom shield maker variant controls */
#customShieldMaker .customShieldMakerVariantSection {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  width: 100%;
  font-family: "Inter", sans-serif;
  color: var(--textColor);
}

#customShieldMaker .customShieldMakerVariantHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.9;
}

#customShieldMakerCurrentVariantLabel {
  font-size: 0.68rem;
  opacity: 0.75;
}

#customShieldMaker .customShieldMakerVariantButtons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
  width: 100%;
}

#customShieldMaker .customShieldMakerVariantButton {
  width: 100%;
  min-width: 0;
  padding: 0.38rem 0.25rem;
  background: rgba(var(--baseColor), 0.18);
  color: var(--textColor);
  border: 1px solid rgba(var(--baseColor), 0.28);
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
}

#customShieldMaker .customShieldMakerVariantButton.selected,
#customShieldMaker .customShieldMakerVariantButton[aria-pressed="true"] {
  background: var(--selectedColor);
  border-color: rgba(255, 255, 255, 0.28);
}

#customShieldMaker .customShieldMakerVariantButton.currentVariant {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: -2px;
}

#customShieldMaker .customShieldMakerVariantStatus {
  min-height: 1rem;
  font-size: 0.64rem;
  line-height: 1.2;
  opacity: 0.78;
}

#customShieldMakerRouteNumber .customShieldMakerRouteChar,
.customShieldMakerRenderedContainer .routeNumber .routeChar {
  display: inline-block;
  line-height: 1;
}

#customShieldMaker .customShieldMakerCustomColorControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.9rem;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.25rem;
}

#customShieldMaker .customShieldMakerCustomColorControls[hidden] {
  display: none !important;
}

#customShieldMaker #customShieldMakerRouteCustomColor {
  width: 100%;
  min-width: 0;
  height: 1.9rem;
  min-height: 1.9rem;
  padding: 0.1rem;
  box-sizing: border-box;
}

#customShieldMaker .customShieldMakerRouteCustomColorSwatch {
  display: inline-block;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: #000000;
  box-sizing: border-box;
}


/* Custom icons inside the icon picker */
#iconSelectorModal .customIconUploadToolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.25rem 0.35rem;
  box-sizing: border-box;
}

#iconSelectorModal .customIconUploadButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: max-content;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.16);
  color: white;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

#iconSelectorModal .customIconUploadButton:hover {
  background: rgba(255, 255, 255, 0.25);
}

#iconSelectorModal .customIconUploadButton .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}

#iconSelectorModal .customIconGridCard {
  position: relative;
}

#iconSelectorModal .customIconDeleteButton {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: rgba(95, 39, 76, 0.95);
  color: white;
  cursor: pointer;
  z-index: 3;
}

#iconSelectorModal .customIconDeleteButton:hover {
  background: rgba(140, 43, 95, 1);
}

#iconSelectorModal .customIconDeleteButton .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}


/* Settings keybind mode buttons and settings panel spacing slider */
#signMakerSettingsModal .settingsKeybindModeButtons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  width: 24rem;
  max-width: 24rem;
}

#signMakerSettingsModal .settingsKeybindModeButtons .settingsSegmentButton {
  width: auto;
  min-width: 0;
  height: 2.15rem;
  padding: 0.25rem 0.45rem;
  white-space: nowrap;
  font-size: 0.82rem;
}

#signMakerSettingsModal .settingsPanelSpacingControl {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 4.5rem;
  align-items: center;
  gap: 0.45rem;
  width: 14rem;
  min-width: 14rem;
  max-width: 14rem;
}

#signMakerSettingsModal .settingsPanelSpacingControl input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0;
}

#signMakerSettingsModal .settingsPanelSpacingControl input[type="number"] {
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
  min-height: 2.15rem;
  margin: 0;
  box-sizing: border-box;
}


.subPanelDividerSettings {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  background: rgba(var(--baseColor), 0.12);
  border-top: 1px solid rgba(var(--baseColor), 0.25);
  border-bottom: 1px solid rgba(var(--baseColor), 0.25);
  font-family: "Inter", sans-serif;
  color: var(--textColor);
}

.subPanelDividerSettings[hidden] {
  display: none;
}

.subPanelDividerSettingsLabel {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
}

.subPanelDividerToggleList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.subPanelDividerToggle {
  border: 1px solid rgba(var(--baseColor), 0.35);
  background: rgba(var(--baseColor), 0.18);
  color: var(--textColor);
  padding: 0.35rem 0.6rem;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.subPanelDividerToggle.active {
  background: var(--selectedColor);
  border-color: rgba(255, 255, 255, 0.75);
}

.subPanelDividerToggle:not(.active) {
  opacity: 0.72;
  text-decoration: line-through;
}

.subPanelDividerToggle:hover {
  background: var(--hoverColor);
  opacity: 1;
}

/* Icon block editor layout
   Width controls for this editor:
   --sd-icon-left-column-width: controls the left options column.
   --sd-icon-preview-column-width: controls the right preview/padding column.
   --sd-icon-label-width: controls the label column inside the left options column. */
.sMModal.subPanelConfig [data-property].hidden,
.sdIconEditorLayout.hidden {
  display: none !important;
}

.sdIconEditorLayout:not(.hidden) {
  --sd-icon-left-column-width: 28.5rem;
  --sd-icon-preview-column-width: 12rem;
  --sd-icon-label-width: 5.9rem;
  display: grid;
  grid-template-columns: var(--sd-icon-left-column-width) var(--sd-icon-preview-column-width);
  column-gap: 0.8rem;
  row-gap: 0.45rem;
  align-items: start;
  width: calc(var(--sd-icon-left-column-width) + var(--sd-icon-preview-column-width) + 0.8rem) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.sdIconMainColumn,
.sdIconPreviewColumn {
  min-width: 0;
  box-sizing: border-box;
}

.sdIconMainColumn {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.sdIconPreviewColumn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.48rem;
}

.sdIconControlRow {
  display: grid;
  grid-template-columns: var(--sd-icon-label-width) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.38rem;
  row-gap: 0.18rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.sdIconControlRow > label {
  width: var(--sd-icon-label-width);
  min-width: 0;
  text-align: right;
  font-size: 0.95rem;
  line-height: 1.08;
  white-space: normal;
}

.sdIconPickerRow {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.55rem;
}

#sdIcon_chooseBtn {
  white-space: nowrap;
  min-height: 1.85rem;
  padding: 0.32rem 0.65rem;
}

#sdIcon_selectedLabel {
  font-size: 0.95rem;
  padding: 0;
  opacity: 0.95;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdIconSizeRow,
.sdIconPaddingHorizontalRow {
  grid-template-columns: var(--sd-icon-label-width) minmax(8rem, 1fr) 4rem 1.8rem;
}

.sdIconSizeInput,
.sdIconPaddingRow .smallVal {
  width: 4rem;
  min-width: 0;
  box-sizing: border-box;
}

.sdIconControlRow > select,
.sdIconControlRow > input[type="number"] {
  max-width: 100%;
}

.sdIconControlRow > select:not(.sdIconAlignmentSelectHidden) {
  min-width: 0;
}

.sdIconAlignmentSelectHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sdIconAlignmentButtons {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  max-width: 100%;
}

.sdIconAlignmentButtons button,
.sdIconResetButton {
  border: 0;
  background: black;
  color: white;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.sdIconAlignmentButtons button {
  min-width: 3.25rem;
  padding: 0.32rem 0.44rem;
  margin: 0;
}

.sdIconAlignmentButtons button + button {
  margin-left: 0.12rem;
}

.sdIconResetButton {
  width: 1.8rem;
  height: 1.8rem;
  min-width: 1.8rem;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sdIconResetButton .material-symbols-outlined {
  font-size: 1.05rem;
  line-height: 1;
}

.sdIconAlignmentButtons button.active,
.sdIconAlignmentButtons button[aria-pressed="true"] {
  background: var(--selectedColor);
}

.sdIconAppearanceRow {
  grid-template-columns: var(--sd-icon-label-width) minmax(0, 1fr);
}

.sdIconAppearanceControls {
  display: grid;
  grid-template-columns: minmax(6.6rem, 1fr) auto auto;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  width: 100%;
}

.sdIconAppearanceControls select {
  width: 100%;
  min-width: 0;
}

.sdIconInlineCheckbox {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.22rem;
  min-width: 0;
  width: auto;
  white-space: nowrap;
  font-size: 0.82rem;
  text-align: left !important;
}

.sdIconInlineCheckbox span {
  white-space: nowrap;
}

.sdIconInlineCheckbox input[type="checkbox"] {
  margin: 0;
}

.sdIconAppearanceRow > #sdIcon_borderColor,
.sdIconAppearanceRow > #sdIcon_borderRadius {
  display: none;
}

.sdIconPreviewBox {
  width: 8.6rem;
  height: 8.6rem;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: rgba(var(--baseColor), 0.18);
  border: 0.12rem solid rgba(var(--baseColor), 0.35);
  margin: 0 auto;
}

.sdIconPreviewBox img {
  max-width: 72%;
  max-height: 72%;
  object-fit: contain;
  display: block;
}

.sdIconPreviewBox img.sdIconPreviewInvert {
  filter: invert(1);
}

.sdIconPaddingRow input[type="range"],
.sdIconSizeRow input[type="range"] {
  width: 100%;
  min-width: 0;
}

.sdIconPaddingVerticalRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 1.8rem;
  row-gap: 0.25rem;
  column-gap: 0.35rem;
  align-items: center;
  width: 100%;
}

.sdIconPaddingVerticalRow > label {
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  min-height: 1.7rem;
  display: flex;
  align-items: end;
  justify-content: center;
}

.sdIconPaddingVerticalRow input[type="range"] {
  grid-column: 1;
}

.sdIconPaddingVerticalRow .smallVal {
  grid-column: 2;
}

.sdIconPaddingVerticalRow .sdIconResetButton {
  grid-column: 3;
}

#smSPProperties > [data-property="sdIcon"] {
  width: calc(28.5rem + 12rem + 0.8rem) !important;
  max-width: 100% !important;
  min-width: 0 !important;
}





/* Stacked top/bottom panel controls in the Subpanels menu */
.sMModalSubBar {
  gap: 0.5rem;
}

.stackedPanelList {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.35rem;
  margin-left: 0.35rem;
}

.stackedPanelTabGroup {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  background: rgba(var(--baseColor), 0.18);
}

.stackedPanelTabGroup.active {
  background: var(--selectedColor);
}

.stackedPanelTabGroup.emptyStackedPanelSlot {
  opacity: 0.92;
}

.stackedPanelTabButton,
.stackedPanelDeleteButton {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--textColor);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  cursor: pointer;
}

.stackedPanelTabButton {
  padding: 0.45rem 0.7rem;
  min-width: max-content;
}

.stackedPanelDeleteButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  padding: 0;
}

.stackedPanelDeleteButton:disabled {
  opacity: 0.35;
  cursor: default;
}

.stackedPanelDeleteButton .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

/* Stacked bottom panel settings dropdown */
.stackedPanelTabGroup {
  position: relative;
}

.stackedPanelOptionsWrapper {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.stackedPanelOptionsButton {
  width: 1.45rem;
  min-width: 1.45rem;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  color: var(--textColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.stackedPanelOptionsButton .material-symbols-outlined {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.16s ease;
}

.stackedPanelOptionsWrapper.open .stackedPanelOptionsButton .material-symbols-outlined {
  transform: rotate(180deg);
}

.stackedPanelOptionsDropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: max-content;
  min-width: max-content;
  max-width: none;
  white-space: nowrap;
  padding: 0;
  background: var(--hotbarColor);
  color: var(--textColor);
  box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.28);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.25rem) scale(0.98);
  max-height: 0;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.16s ease, padding 0.16s ease;
}

.stackedPanelOptionsWrapper.open .stackedPanelOptionsDropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  max-height: 8rem;
  padding: 0.55rem;
}

.stackedPanelOptionsRow,
.stackedPanelOptionsCheckboxRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.stackedPanelOptionsRow > span,
.stackedPanelOptionsCheckboxRow > span {
  white-space: nowrap;
}

.stackedPanelSpacingInput {
  width: 4.6rem;
  min-width: 4.6rem;
  height: 1.85rem;
  box-sizing: border-box;
}

.stackedPanelOptionsCheckboxRow input[type="checkbox"] {
  margin: 0;
}