/** WHILE REVAMPING UI: HIDE ELEMENTS */

#ContainerFeedback,
#controlButtonsOld,
#ContainerFooter {
  display: none !important;
}


:root {
  --active: #0352a6;
}


@font-face {
  font-family: Inter;
  src: url('./assets/Inter-VariableFont.ttf');
}

@font-face {
  font-family: MomentumFontIcon;
  src: url('./assets/MomentumFontIcon.woff2');
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 30px;
  box-sizing: border-box;
  background-color: #F0F2F3;
  font-family: Inter;
  overflow: hidden;
}

body:has(dialog[open]) {
  overflow: hidden;
}

/* find icons on https://kyberheimen.com/iconbrowser/ */
.icon {
  background-size: contain;
  color: inherit;
  display: inline-block;
  font-family: MomentumFontIcon;
  font-style: normal;
  overflow: hidden;
  padding: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
}

.icon.wd {
  background-image: url('./assets/images/wd.svg');
}

h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 12px 0;
}

h3 {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 13px;
  margin-bottom: 10px;
}

a {
  color: var(--active);
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}


#ContainerRoomSvg {
  float: left;
  /* width: 60%; */
  width: 100%;
  padding: 20px;
  padding-bottom: 0px;
  transition: all 0.3s;
}

#ContainerForContainerRoom {
  float: none;
  overflow: hidden;
}

#sidebar {
  float: left;
  width: 40%;
  max-width: 400px;
  padding: 15px;
  padding-bottom: 7px;
  /* iPad/iOS Safari Private mode footgun: 100vh evaluates against
     the "large viewport" (excluding browser UI chrome) rather than
     the actual visible viewport, so the sidebar overflows by ~66px
     below the bottom of the screen. iOS Safari then treats that
     overflow as scrollable headroom, scrolls the document up when
     the on-screen keyboard appears, and parks the doc at
     scrollTop=66 when the keyboard hides — which slides the tabs
     row (Room / Equipment / Layers / Details) up behind the fixed
     #ContainerHeader, leaving them unclickable.
     100dvh = "dynamic viewport height", which tracks the actual
     visible viewport and resolves the overflow at the source. The
     calc(100vh - 60px) declaration above is the safety-net fallback
     for browsers older than Safari 15.4 / Chrome 108 / FF 101. */
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  margin-top: 1.3rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.sidebarNone {
  width: 12px;
}

#openSideBar {
  float: left;
  padding-right: 2px;
  margin-top: 2.3rem;
  padding-left: 0px;
  margin-left: 0px;
  width: 30px;
  height: 400px;
  margin-right: 10px;
  border-radius: 0px 10px 10px 0px;
}

#openSideBarBtn {
  position: absolute;
  left: -10px;
  top: 80px;
  padding-left: 0px;
}


#Container2 {
  display: inline-block;
  padding: 1rem 1rem;
  width: 30%;
}

#large-container {
  width: 3000px;
  height: 3000px;
  overflow: hidden;
  border-radius: 10px;
}

#scroll-container {
  /* width: calc(100% - 1px);
  height: calc(100vh + 15px); */
  overflow: auto;
  margin: 0px;
  border-radius: 10px;

}

img {
  -webkit-touch-callout: none;
}


.micButtons {
  padding: 5px;
  margin: 5px;
}

.classDegree {
  font-size: x-large;
}

.ContainerInputsFeedback {
  padding: 1rem;
  width: 100%;
  background-color: white;
  border-radius: 10px;
  min-height: 520px;
}

/* ----------------------------------------------------------------- */
/* Sidebar inputs panel: bound to viewport via #sidebar's flex column */
/* The whole page must NOT scroll - each subtab handles its own       */
/* scrolling internally. This applies at every breakpoint: the        */
/* @media (max-width: 900px) override only repositions the sidebar    */
/* (absolute, full-width overlay over the canvas) but preserves the   */
/* viewport-bound flex layout so the Equipment list still scrolls     */
/* inside #equipmentScrollArea. Mirror behaviour for split view at    */
/* narrow content widths lives in body.svBp900 rules near the bottom. */
/* ----------------------------------------------------------------- */
#ContainerInputs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* overflow: visible (default) so #closeOpenMenu, which uses
     transform: translate(25px, 120px) to float at the right edge of
     the sidebar, is not clipped.  Subtab scrolling is bounded one
     level deeper at #containerInputTabContent. */
  overflow: visible;
}

#ContainerInputs > .tab {
  flex-shrink: 0;
}

#containerInputTabContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ContainerHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: black;
  color: white;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0 20px;
  font-size: 20px;
  gap: 16px;
}

.beta {
  color: #64bffa;
  font-size: 14px;
}

dialog .subtle {
  color: #ccc;
  font-size: 14px;
}

button {
  touch-action: manipulation;
  outline: none;
}

button:not(:disabled) {
  cursor: pointer;
}



.ContainerHeader button {
  border: 0;
  background-color: transparent;
  color: white;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 10px;
}

.ContainerHeader button.primary {
  background-color: white;
  color: black;
  border-radius: 30px;
  padding: 7px 15px;
  gap: 10px;
}

.ContainerHeader button:hover:not(:disabled) {
  background-color: #222;
}

.ContainerHeader button.primary:hover {
  background-color: #ddd;
}

.ContainerHeader button:disabled {
  opacity: 0.6;
}

#ContainerFooter {
  display: inline-block;
  border: 1px solid rgb(12, 6, 30);
  padding: 1rem 1rem;
  background-color: black;
  color: white;
  outline: #000000 solid 10px;
  width: 100%;
}

#lblHeaderTitle {
  font-size: 1.2rem;
  display: block;
}

#lblSubtitle {
  font-size: 16px;
  color: #64bffa;
  margin: 0 9px;
}

.inputWrap {
  display: inline;
  margin: 10px;
}

.inputRow {
  display: flex;
  gap: 20px;
  align-items: center;
}

.inputField {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 18px;
}

.inputFieldRow {
  flex-direction: row;
  max-width: 280px;
}


.inputFieldMaxWdith {
  max-width: 380px;
}

/* configurableColor fill + opacity row (#fillDiv > .fillField). Compact
 * single-row layout: label, color swatch, [opacity label, opacity input,]
 * reset button. Overrides the default `.inputField` column flow + space-
 * between justification — we want a tight left cluster (Color label, swatch,
 * optionally Opacity label + input) with the reset button pinned to the
 * right wall via margin-left:auto. Pinning the reset button keeps the
 * Color → swatch gap constant regardless of whether the opacity controls
 * are visible (per UX request: "maintain the same distance between Color
 * [i] [picker] regardless if there is opacity or not"). */
.fillField {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.fillField > label {
  white-space: nowrap;
}

.fillColorInput {
  width: 38px;
  height: 28px;
  padding: 2px;
  border-radius: 6px;
  border: 2px solid #888;
  background: white;
  cursor: pointer;
  flex: 0 0 auto;
}

.fillResetBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  margin-left: auto;
}

.fillResetBtn:hover {
  color: #000;
}

.fillResetBtn:focus {
  outline: none;
}

.fillOpacityLabel {
  margin-left: 4px;
}

.fillOpacityInput {
  width: 64px;
  flex: 0 0 auto;
}

/* Inline fill swatch button (replaces the native <input type="color">).
 * Shows the chosen color at its chosen opacity over a checkerboard so the
 * transparency reads at a glance. Clicking opens the custom color modal. */
.fillSwatchBtn {
  width: 38px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 2px solid #888;
  cursor: pointer;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  background-color: #fff;
}

.fillSwatchBtn .fillSwatchColor {
  position: absolute;
  inset: 0;
  display: block;
  background-color: #ffffff;
}

.fillSwatchBtn:hover {
  border-color: #555;
}

/* custom color/opacity popover (js/colorPicker.js) */
.colorPickerPopover {
  position: fixed;
  z-index: 100000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* width: 300px;
  max-width: 92vw; */
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
  border: 1px solid #d0d0d0;
  padding: 14px;
  font-size: 14px;
  color: #222;
  user-select: none;
}

.colorPickerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.colorPickerTitle {
  font-weight: 600;
  font-size: 15px;
}

.colorPickerClose {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  color: #555;
  padding: 2px;
  line-height: 1;
}

.colorPickerClose:hover {
  color: #000;
}

.colorPickerColorSection {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.colorPickerSV {
  position: relative;
  flex: 1 1 auto;
  height: 150px;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}

.colorPickerSVWhite,
.colorPickerSVBlack {
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

.colorPickerSVWhite {
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.colorPickerSVBlack {
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.colorPickerSVThumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.colorPickerHue {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 150px;
  writing-mode: vertical-lr;
  direction: rtl;
  border-radius: 9px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: linear-gradient(to top,
      #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.colorPickerHue::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #888;
  cursor: pointer;
}

.colorPickerHue::-moz-range-thumb {
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #888;
  cursor: pointer;
}

.colorPickerHexRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.colorPickerHexLabel {
  font-weight: 600;
  font-size: 12px;
  color: #555;
  cursor: default;
}
.colorPickerHexLabel:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  z-index: 100001;
}

.colorPickerHexInput {
  flex: 1 1 auto;
  text-transform: uppercase;
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.colorPickerCopy {
  border: 2px solid #888;
  background: #fff;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: #555;
  flex: 0 0 auto;
}

.colorPickerCopy:hover {
  color: #000;
}

.colorPickerCopy.colorPickerCopied {
  color: #1a8917;
  border-color: #1a8917;
}

.colorPickerOpacitySection {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.colorPickerOpacityLabel {
  font-weight: 600;
  font-size: 12px;
  color: #555;
  flex: 0 0 auto;
}

.colorPickerOpacitySlider {
  flex: 1 1 auto;
  cursor: pointer;
}

.colorPickerOpacityValueWrap {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.colorPickerOpacityInput {
  width: 53px;
}

.colorPickerOpacityPct {
  color: #555;
  font-size: 12px;
}

.colorPickerFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.colorPickerPreviewWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.colorPickerPreviewLabel {
  font-size: 10px;
  color: #777;
}

.colorPickerPreview {
  width: 34px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #888;
  overflow: hidden;
  position: relative;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

.colorPickerPreviewColor {
  position: absolute;
  inset: 0;
  display: block;
  background: #fff;
}

button.colorPickerReset {
  background: #fff !important;
  border: none !important;
  color: #888 !important;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
button.colorPickerReset i {
  font-size: 20px;
}
button.colorPickerReset:hover {
  color: #444 !important;
}

.colorPickerDone {
  font-size: 13px;
  padding: 6px 16px;
}

.inputField label {
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

input,
textarea,
select {
  background-color: white;
  border: 2px solid #888;
  border-radius: 6px;
  padding: 6px;
}

input:disabled,
textarea:disabled,
select:disabled {
  color: #333333;
  border-color: #e5e5e5;
  opacity: 1;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus {
  border-color: #64bffa;
  outline: 1px solid #64bffa;
}

.unitFeetMeters,
.unitInches,
.classDegree {
  position: absolute;
  top: 2.5em;
  right: 1em;
}

.inputCellLeft1 {
  display: inline-block;
  width: 11rem;
}

.inputCellLeft2 {
  display: inline-block;
  width: 14.5rem;
}

.inputCellLeftShort {
  display: inline-block;
  width: 5rem;
}

.inputCellRight {
  display: inline-block;
}


.inputCellRightWide {
  display: inline-block;
  width: 15rem;
}

.divUpdateButton {
  display: inline-block;
}

input:placeholder-shown {
  font-style: italic;
}

.classCustomSettings {
  background-color: lightgrey;
  padding: 5px;
  margin-top: -10px;
  margin-bottom: 10px;
}

.selectRole {
  width: 100%
}

.button {
  border: 0;
  border-radius: 12px;
  font-size: 0.8rem;
  padding: 8px 24px;
  background-color: black;
  color: white;
  width: fit-content;
  touch-action: manipulation;
  cursor: pointer;
  align-self: center;
}

.button:hover {
  background-color: #222;
}

.button:active {
  box-shadow: 0 1px #777;
}

.button:disabled {
  opacity: 0.6;
  cursor: auto;
}

.button:hover:disabled {
  background-color: black;
}

/* Hyperlink-styled button. Strips all button chrome (background, border,
 * padding, rounded corners) and renders as inline-styled text in the
 * primary blue, with an underline on hover. Used for the
 * "Recent Floor Plans" entry point so it sits inline in the sidebar
 * rather than competing visually with the primary action buttons. */
.linkButton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--active);
  text-decoration: none;
  cursor: pointer;
  width: auto;
  text-align: left;
  align-self: flex-start;
  touch-action: manipulation;
  font-size: 12px;
}

.linkButton:hover,
.linkButton:focus-visible {
  text-decoration: underline;
}

.linkButton:disabled {
  color: #888;
  cursor: default;
  text-decoration: none;
}

.buttonWidth {
  width: 250px;
  margin: 5px;
  margin-top: 10px;
  margin-bottom: 10px;

}

.wallBuilderButton {
  font-size: 12px;
}

.wallBuilderButtonDiv {
  position: relative;
  display: flex;
  /* flex-direction: column; */
  gap: 10px;
  flex-grow: 1;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 20px;
}





.wallButton {
  border: 0px;
  border-radius: 12px;
  font-size: 0.7rem;
  padding: 4px 12px;
  background-color: rgb(199, 199, 199);
  color: black;
  width: max-content;
  touch-action: manipulation;
  cursor: pointer;
  align-self: center;
  position: absolute;
}

.wallButton:hover {
  background-color: #575757;
  color: rgb(199, 199, 199);
}

.wallButton:active {
  box-shadow: 0 1px #777;
  color: white;
}

.wallButton:disabled {
  opacity: 0.6;
  cursor: auto;
}

.wallButton:hover:disabled {
  background-color: black;
}



.wallButtonSelected {
  background-color: #000000;
  color: white;
}

.wallButtonSelected:hover {
  color: white;
  background-color: black;
}


.wallSelection {
  width: 50px;
  height: 50px;
  background-image: url('./assets/images/wallsAll.png');
  position: absolute;
}

.doorSelection {
  width: 150px;
  height: 150px;
  background-image: url('./assets/images/roomBackgroundDoors.png');
  position: absolute;
  /* transform: rotate(90deg) translate(10px, 10px); */
}

.rotateButton {
  border: 0px;
  border-radius: 12px;
  font-size: 0.7rem;
  padding: 4px 12px;
  background-color: rgba(199, 199, 199, 0.683);
  color: black;
  width: max-content;
  touch-action: manipulation;
  cursor: pointer;
  align-self: center;
}

.doorSelectionOuter {
  position: absolute;
}

.doors {
  position: absolute;
  width: 45px;
  opacity: 1;
  padding: 8px;
  border-radius: 4px;
}

.doorButton {
  border: 3px solid white;
  border-radius: 12px;
  font-size: 0.7rem;
  padding: 4px 12px;
  background-color: rgb(199, 199, 199);
  color: black;
  width: max-content;
  touch-action: manipulation;
  cursor: pointer;
  align-self: center;
  position: absolute;
}

.doors:hover {
  background-color: lightgray;
  opacity: 1;
}

.doorSelected {
  opacity: 1;
  border: 3px solid rgb(69, 85, 230);
  border-radius: 4px;
  padding: 5px;
}

.noDoorSelected {
  border: 3px solid white;
  outline: 3px solid rgb(69, 85, 230);
  background-color: black;
  color: white;
}

.parentWallSelection {
  display: flex;
  justify-content: center;
  /* Centers horizontally */
  height: 100px;
  /* height for the parent */
}



.underlineHeader {
  font-weight: bold;
  text-decoration: underline;
}

.dynamicText {
  font-weight: bold;
}

.infoText {
  font-size: small;
  color: #2196F3;
  text-align: center;
}

.keyFOVitem {
  padding-top: 7px;
}

.highlightRed {
  background-color: rgb(232, 197, 197);
  border-style: solid;
  border-color: #000000;
  border-width: 1px;

}

.tip {
  font-size: 12px;
  background-color: #eee;
  border-radius: 1.5em;
  padding: 0.6em 1.5em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  text-align: center;
  margin: 0 auto;
}

.tip2 {
  font-size: 10px;
  background-color: #eee;
  border-radius: 1.5em;
  padding: 0.5em 1.2em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  text-align: center;
  margin: 0 auto;
}

.tab {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1em;
  color: #545454;
  margin-bottom: 1em;
  position: relative;
}

.tablinks,
.subtablinks,
.subtablinks2 {
  border: 0;
  background: transparent;
  color: inherit;
  padding-bottom: 10px;
}

.tablinks.active,
.subtablinks.active,
.subtablinks2.active {
  border-bottom: 3px solid black;
}

.subtablinks,
.subtablinks2 {
  font-size: 0.8em;
}

/* Style the tab content */
.tabcontent {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  /* When openTab() shows a tab it sets style="display: flex" so #Insert
     and #Item act as flex columns whose .tab row stays at the top and
     whose visible .subtabcontent fills the remaining height.  All other
     tabs (Room, Layers) render their children as a vertical stack just
     like display: block, courtesy of flex-direction: column. */
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.tabcontent2 {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* When #Insert / #Item are visible they become flex columns containing:
     1. a .tab row with the sub-tab buttons (flex-shrink: 0)
     2. one visible .subtabcontent / .subtabcontent2 (flex: 1 1 auto)   */
.tabcontent > .tab {
  flex-shrink: 0;
}

/* `.inputField` declares `flex-grow: 1` so multiple input fields share
   the row evenly when nested inside `.inputRow`.  When the field is a
   *direct* child of a flex-column .tabcontent (Room, Layers) that
   grow factor instead spreads the fields vertically, leaving big gaps
   between rows.  Reset grow at this level so each field keeps its
   natural height; nested .inputRow > .inputField still grows. */
.tabcontent > .inputField {
  flex-grow: 0;
}

.subtabcontent,
.subtabcontent2 {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  /* Fill remaining height inside its parent flex-column tab. */
  flex: 1 1 auto;
  min-height: 0;
}

.subtabcontent,
.subtabcontent2,
.button-group,
.menuReach-item,
.menuReach,
.menuReachClearButton {
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}


.selectableMenuItems {
  display: inline-flex;
  -webkit-user-select: initial;
  /* Safari */
  -ms-user-select: initial;
  /* IE 10 and IE 11 */
  user-select: initial;
  /* Standard syntax */
}

.selectableMenuItemDiv {
  display: inline-flex;
}

.selectableHover:hover {
  background-color: #ADD8E6;
  opacity: 0.9;
}

#Insert,
#Item {
  padding: 0px 0px;
}

.static {
  cursor: not-allowed;
}

#svgDiv {
  position: absolute;
  visibility: hidden;
  display: none;
  /* hiddern or visible */
}

#controlButtons {
  position: relative;
  display: flex;
  gap: 10px;
  margin: 1em 0;
  max-width: 800px;
  overflow-x: auto;
}

.mode-status-badge {
  /* Lives as the last flex child inside #controlButtons. Width is
   * fixed at 120px regardless of content so the toolbar's geometry
   * never reshuffles when modes / layer state change. Text inside
   * is auto-shrunk by JS (fitBadgeTextSize) so longer labels still
   * render on a single line — overflow:hidden is the safety net at
   * the JS-floor font-size and also lets scrollWidth correctly
   * report content overflow during the JS shrink loop.
   *
   * align-self:center vertically centers it against the 30px-tall
   * buttons (the toolbar has no align-items, so the default
   * `stretch` would otherwise distort it). */
  flex: 0 0 auto;
  width: 120px;
  box-sizing: border-box;
  overflow: hidden;
  align-self: center;
  background-color: #f6eca6;
  color: #000;
  border-radius: 16px;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  font-weight: 400;
  font-size: small;
}

/* Active drawing/measuring mode (Wall Builder, Measuring Tool, etc.) —
 * swap to blue. Layer-state badge keeps the default yellow. */
.mode-status-badge.mode-status-badge--mode {
  background-color: #64bffa;
}

.mode-status-badge .icon {
  font-size: 1em;
}

.button-group {
  display: flex;
  background-color: white;
  border-radius: 30px;
  align-items: center;
  font-size: 12px;
  padding: 2px 6px;
  column-gap: 4px;
}

.spacer {
  flex-grow: 1;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 0;
  touch-action: manipulation;
}

.btn.active {
  background-color: #d6eaff;
  border-radius: 20px;
  color: #000;

}


/* -----------------------------------------------------------------------
 * Equipment tab — inline search bar and scrolling category pills.
 *
 * Replaces the legacy `.btnItemSearch` floating round button (which used
 * to live in the top-left of every sub-tab panel and opened the Quick
 * Add modal) AND the four hardcoded `.subtablinks` sub-tab buttons.
 *
 * The new layout puts an inline search input at the top of #Insert and
 * a horizontally-scrolling pill row right below it. Search filters
 * tiles across ALL category panels in-place (see onEquipmentSearchChange
 * in js/roomcalc.js); the pill row scales to arbitrarily many
 * categories without breaking on narrow widths thanks to overflow-x.
 *
 * The Space-bar Quick Add modal still exists; it just no longer has a
 * dedicated round button in each panel. Power users keep that flow.
 * --------------------------------------------------------------------- */

#equipmentSearchBar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f3f7;
  border: 1px solid #d8dde4;
  border-radius: 20px;
  padding: 6px 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

#equipmentSearchBar:focus-within {
  border-color: var(--active);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(3, 82, 166, 0.15);
}

#equipmentSearchBar > .icon {
  color: #6e6e6e;
  font-size: 14px;
  flex-shrink: 0;
}

#equipmentSearch {
  border: 0;
  background: transparent;
  outline: none;
  flex: 1 1 auto;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  padding: 2px 0;
  min-width: 0;
  color: #222;
}

/* Hide the browser's native search clear button so the custom button is
 * the only affordance — keeps the look consistent across Chrome/Safari. */
#equipmentSearch::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

#equipmentSearchClear {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #6e6e6e;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

/* The .hasValue class is toggled by onEquipmentSearchChange / clearEquipmentSearch
 * so the X button only appears when there's something to clear. */
#equipmentSearchBar.hasValue #equipmentSearchClear {
  display: flex;
}

#equipmentSearchClear:hover {
  background: #e2e6ec;
  color: #222;
}

/* Category pills row. The wrapper exists so .pillScrollChevron buttons
 * can absolute-position over the start/end of the scrollable row. The
 * 1px bottom border matches the old `.tab` separator below the
 * sub-tabs so the visual rhythm of the Equipment panel is preserved. */
.equipmentCategoryPillsWrap {
  position: relative;
  margin-bottom: 12px;
  padding: 0 24px;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}

.equipmentCategoryPills {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 4px;
  /* Hide the horizontal scrollbar — the chevrons are the affordance.
   * Firefox uses scrollbar-width; Chrome/Safari use the pseudo-element. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.equipmentCategoryPills::-webkit-scrollbar {
  display: none;
}

.equipmentCategoryPill {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #545454;
  padding: 8px 14px 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  /* The -1px margin pulls the active pill's underline over the wrapper's
   * 1px border-bottom so it visually replaces (not stacks under) that
   * separator — same trick the old `.subtablinks.active` used. */
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.equipmentCategoryPill:hover {
  color: #222;
}

.equipmentCategoryPill.active {
  color: #000;
  font-weight: 500;
  border-bottom-color: var(--active);
}

/* Chevron scroll-affordance buttons. Hidden by default; the JS
 * (initEquipmentCategoryPills in js/roomcalc.js) toggles `.visible` on
 * each one based on scrollLeft / scrollWidth. */
.pillScrollChevron {
  position: absolute;
  top: 4px;
  width: 22px;
  height: 26px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #444;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s;
  z-index: 2;
}

.pillScrollChevron.visible {
  opacity: 1;
  pointer-events: auto;
}

.pillScrollChevron:hover {
  background: #f0f3f7;
  color: #000;
}

.pillScrollChevronLeft {
  left: 0;
  /* Small white shadow on the inner edge so the leftmost pill content
   * fades softly under the chevron instead of butting up against it. */
  box-shadow: 4px 0 4px -2px rgba(255, 255, 255, 0.9);
}

.pillScrollChevronRight {
  right: 0;
  box-shadow: -4px 0 4px -2px rgba(255, 255, 255, 0.9);
}

/* Pill that has zero matching items during a search. Muted + non-
 * interactive so the user can see at-a-glance which categories have
 * results without us also auto-hiding pills (preserving the user's
 * sense of "this is the whole list of categories"). Cleared on
 * search-clear by removing the `.disabled` class. */
.equipmentCategoryPill.disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Equipment tab — single long-scroll area.
 *
 * BEFORE: each `.subtabcontent` panel was an independent scroller, and
 * `selectEquipmentCategory()` toggled `display: block` / `none` to
 * switch between them.
 *
 * NOW (May 2026): all five category panels live in a single
 * `#equipmentScrollArea` and are visible at once. The user scrolls
 * through Video Devices → Peripherals → Displays → Furniture → Custom
 * Items in one continuous flow. Clicking a pill scroll-targets the
 * matching panel; the scroll-spy (initEquipmentScrollSpy in
 * js/roomcalc.js) updates which pill carries `.active` as the user
 * scrolls past each panel's top boundary.
 *
 * Implementation note: we scope the panel overrides to
 * `#equipmentScrollArea > .subtabcontent` so the `#Item` tab's panels
 * (Items / Default Walls / Room Floor Plan / Settings) keep the
 * original one-panel-at-a-time behaviour — they're a settings drawer,
 * not a browsing flow, so the long-scroll model doesn't apply there.
 * ------------------------------------------------------------------- */

/* The Equipment tab's own overflow is disabled; the inner scroll area
 * is the single scroller. Hiding `#Insert` overflow prevents the
 * legacy `.tabcontent { overflow-y: auto }` rule from creating a
 * second nested scrollbar. */
#Insert.tabcontent {
  overflow: hidden;
}

#equipmentScrollArea {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  /* Reserve a fixed gutter for the scrollbar so layout doesn't reflow
   * when the scrollbar appears/disappears. */
  scrollbar-gutter: stable;
  /* No dedicated right-edge "touch scroll lane" — the long-press gate
   * in js/roomcalc.js touchStart/touchMove already lets touch users
   * swipe directly on a tile to scroll the list (touchstart does NOT
   * preventDefault on touch devices; a >10px move within 300ms cancels
   * the arming timer and the browser scrolls natively). A previous
   * padding-right: 14px guaranteed a no-tile column on the right, but
   * it ate into the per-row tile budget and at the .containerItems
   * margin-left: 17px setting it pushed the sidebar onto the boundary
   * where the row flips between 3 and 2 columns mid-resize. Removing
   * it adds ~14px of horizontal slack so 3 columns stays stable across
   * the split-view drag range. */
}

/* All category panels visible together. Override the legacy
 * `.subtabcontent { display: none; overflow-y: auto; flex: 1 1 auto }`
 * defaults: they'd otherwise hide every panel and double-scroll.
 * `height: auto !important` defeats the responsive
 * `body.svBp900 .subtabcontent { height: 490px }` rule (line ~3131) —
 * without it Safari (which trips svBp900 at the typical sidebar width)
 * pins every panel to 490px and any panel whose content is taller
 * spills its tiles visually on top of the next panel below. The
 * !important is required because both rules carry an `.svBp900`
 * (or `#equipmentScrollArea`) anchor of equal weight; the cleaner
 * fix would be to rewrite the legacy rule, but it's load-bearing for
 * the #Item tab's settings drawers which still want a fixed height. */
#equipmentScrollArea > .subtabcontent {
  display: block;
  flex: none;
  overflow: visible;
  position: relative;
  height: auto !important;
  /* Padding-top creates breathing space below the sticky pill row when
   * we scroll-into-view to a panel — without it, the scrolled-to
   * heading sits flush against the pills with no visual gap. */
  scroll-margin-top: 12px;
}

/* A panel entirely hidden by search (zero matches across all its
 * sub-sections). The class is toggled by onEquipmentSearchChange. */
#equipmentScrollArea > .subtabcontent.searchHidden {
  display: none;
}

/* The "Tip: Drag and drop" hint repeats per panel. Useful guidance
 * for first-time users, but redundant when the user is actively
 * searching. Hidden by onEquipmentSearchChange via the `.searching`
 * class on #Insert. */
#Insert.searching .tip2 {
  display: none;
}

/* Empty `.menuDivider` + `.containerItems` pair (e.g. "Cisco Cameras"
 * heading when the user is searching for "mic" and no cameras match).
 * Toggled by the per-divider visibility pass in
 * onEquipmentSearchChange. */
.menuDivider.searchHidden,
.containerItems.searchHidden {
  display: none;
}

/* Search-only panel (currently just the "Other" section that surfaces
 * devices not present in the 5 curated category panels). Always hidden
 * outside of search; revealed only when (a) #Insert.searching is set,
 * AND (b) onEquipmentSearchChange has flagged the panel `.hasMatches`
 * because it populated at least one tile. The double-gate prevents
 * the "Other" header from flashing into view while the user is mid-
 * type and the panel is briefly empty. */
#equipmentScrollArea > .subtabcontent.searchOnlyPanel {
  display: none;
}
#Insert.searching #equipmentScrollArea > .subtabcontent.searchOnlyPanel.hasMatches {
  display: block;
}

/* Empty-state hint inside the Custom Items panel when the library is
 * empty AND inside whichever panel is active when search has zero
 * matches across all categories. Same look in both cases. */
.customItemsEmpty {
  padding: 24px 16px;
  text-align: center;
  color: #888;
  font-size: 12px;
  background: #fafafa;
  border-radius: 8px;
  margin: 12px 16px;
}

.customItemsEmpty b {
  color: #444;
}

.roleSelectButton {
  outline: none;
  box-shadow: none;
  border: 1px solid black;
  display: flex;
  align-items: center;
  background-color: white;
  color: black;
  border-radius: 30px;
  padding: 7px 15px;
  width: 250px;
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
  gap: 10px;
  text-align: center;
}

.roleSelectButton:hover {
  background-color: #ddd;
}

.roleSelectButton:disabled {
  opacity: 0.6;
}


.dialogWhiteBox {
  border-radius: 20px;
  padding: 19px 70px;
  background-color: white;
  min-width: 400px;
  max-width: 700px;
  /* consider removing this  */
  /* max-height: 700px;  */
  outline: none;
  border: 0.1px solid rgb(161, 161, 161);
  /* overflow-y: hidden; */
  box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);
}

.dialogWhiteBoxHeader {
  background-color: white;
  color: black;
  padding: 0.5em;
  text-align: center;
  font-weight: 500;

}

.dialogFullPage[open] {
  width: 90vw;
  height: 90vh;
  max-width: 1200px;
  max-height: 90vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  margin: auto;
}

.dialogFullPage main {
  flex: 1;
  max-height: none;
  padding: 0;
}

.dialogOpenNewPage {
  position: absolute;
  top: 22px;
  right: 55px;
  font-size: 14px;
}


.holdIndicator {
  width: 5.5px;
  /*width of your image*/
  content: url('./assets/images/expandImageTriangle.png');
  margin: 0;
  /* If you want no margin */
  padding: 0;
  /*if your want to padding */
  font-size: 5px;
  position: relative;
  bottom: -6px;
  left: -4px;
  background-color: transparent;

}

/* MultiRoom overview: coverage buttons (camera / mic / display) are not
   applicable at the floor level. Block interaction outright (pointerdown/up
   listeners ignore the `disabled` attribute) and grey out the button + its
   little hold-to-multi-select triangle. */
.coverageBtnDisabledMultiRoom,
.coverageBtnDisabledMultiRoom.active {
  pointer-events: none;
  opacity: 0.5;
  /* Override the .btn.active blue pill so a remembered selection doesn't stay
     coloured while disabled in the MultiRoom overview. */
  background-color: transparent !important;
  color: #999 !important;
}

.coverageBtnDisabledMultiRoom .holdIndicator {
  filter: grayscale(100%) brightness(1.8);
  opacity: 0.7;
}

#controlButtons button {
  width: 30px;
  height: 30px;
}

#controlButtons button label {
  display: none;
}

.material-symbols-outlined {
  font-size: x-large;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20
}

.downloadButtons {
  text-align: center;
}

/* Following items control the Flex box */
.containerItems {
  margin-left: 17px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 8px;
  cursor: move;
}

.flexItemsTemp {
  padding: 0;
  margin: auto;
  margin-right: 4px;
  margin-left: 4px;
  margin-bottom: 5px;
  list-style: none;
  align-content: center;
  width: 100px;
  height: 140px;
}

.flexItems {
  list-style: none;
  width: 92px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 1em;
  position: relative;
}



.flexItems:hover {
  background-color: #ADD8E6;
  opacity: 0.9;
}

/* Touch long-press "drag armed" cue. Applied by the touchStart timer
 * callback in js/roomcalc.js once the 300 ms long-press threshold
 * fires, removed on touchend/touchcancel. Communicates that the tile
 * is now in drag mode (the floating preview is following the finger)
 * and that releasing will drop on the canvas. The subtle scale-down
 * + outline mirrors common mobile patterns (Files, Photos, etc.). */
.flexItems.flexItems--dragArmed {
  outline: 2px solid var(--active);
  outline-offset: 2px;
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

.flexItemsWallBuilder:hover {
  cursor: pointer;
  background-color: #d2d2d2;
}


.flexSubItemImage {
  margin: auto;
  width: 100%;
  height: 60px;
  object-fit: contain;
  position: relative;
  pointer-events: none;
}

.flexSubItemLabel {
  width: 100%;
  font-size: 11px;
  margin-top: 0px;
  height: 3.55em;
  font-weight: 500;
  overflow-y: hidden;
  text-align: center;
}

.newBadge {
  background-color: #1170cf;
  border-radius: 25px;
  color: #fff;
  font-size: 9px;
  padding: 3px 5px;
  position: absolute;
  right: 3px;
  top: 3px;
}
.menuDivider {
  width: 100%;
  margin-top: 2em;
  font-size: 14px;
  color: #444;
}

#room-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

/* Slight blur over the templates grid until templates.js loads and
 * `populateTemplates()` replaces the seeded `.room-template-placeholder`
 * tiles. The blur is dropped (and pointer events restored) the moment
 * the real tiles are in place. Pairs with the placeholder markup in
 * RoomCalculator.html (`<main id="room-templates" class="templates-loading">`). */
#room-templates.templates-loading {
  filter: blur(2px);
  pointer-events: none;
  transition: filter 0.2s ease-out;
}

/* Hide the placeholder image's blue border while the real templates are
 * still loading — the data-URI src is already transparent, so dropping
 * the border to transparent makes the tile visually empty (the
 * "Loading image" label still shows) without changing the laid-out
 * size. The real `.room-template img` border returns the moment
 * `populateTemplates()` swaps in the real tiles. */
.room-template-placeholder img {
  border-color: transparent;
}

.room-template-placeholder span {
  color: #888;
  font-style: italic;
}

.room-template {
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}

.room-template img {
  /* Explicit width keeps the tile box at its full 122 × 120 footprint
   * even before the image bytes have decoded — without it, a freshly-
   * inserted <img> with an unloaded src renders at 0 × 120, which makes
   * just the 1px border visible as a thin vertical line in the brief
   * window between `populateTemplates()` swapping in the real tiles
   * and the browser finishing the image decode. The width is dropped
   * back to `auto` (matching the original look — each thumbnail rendered
   * at its own aspect ratio with a fixed 120px height) once the image's
   * `load` event fires; see the `.loaded` rule below and the matching
   * handler in `createTemplateButton()`. */
  width: 122px;
  height: 120px;
  max-width: 100%;
  border: 1px solid var(--active);
  object-fit: contain;
}

.room-template img.loaded {
  width: auto;
}

.templateLinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  gap: 10px;
  background-color: transparent;
}

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

.templatelinks:hover {
  background-color: #ADD8E6;
}

/* "Reload last design" tile — surfaced as the first item in the new-room
 * templates grid when the user has a saved design in localStorage and the
 * new-room dialog is being opened for the first time after page load.
 * The tile is sized to match `.room-template img` (120px square) so it
 * lines up with the template thumbnails next to it. */
#btnReloadLastDesign .reloadLastDesignIconWrap {
  height: 120px;
  width: 120px;
  border: 1px solid var(--active);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--active);
  box-sizing: border-box;
}

#btnReloadLastDesign .reloadLastDesignIcon {
  width: 80px;
  height: 80px;
  font-size: 80px;
  line-height: 80px;
  color: var(--active);
}

#singleShadingDiv button:hover {
  background-color: #eee;
}

.my-blurred-div {
  filter: blur(3px);
}


.tooltip {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  bottom: 115%;
  left: 100px;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 1.4s 0.2s;
}

a.tooltiptext {
  color: lightblue;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}


.tooltipIcon {
  position: relative;
  display: inline-block;
}

.tooltiptextIcon {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
  bottom: 115%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 1.4s 0.2s;
}



.tooltiptextIcon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltipBottom {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.tooltiptextBottom {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 100px;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 1.4s 0.2s;
}

.tooltiptextBottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltiptextLeft {
  left: 17px;
  width: 180px;
}

.tooltipTitle {
  position: relative;
  display: inline-block;
}

.tooltiptextTitle {
  display: none;
}


.tooltipTitle .tooltiptextTitle {

  font-size: x-small;
  min-width: max-content;
  background-color: rgb(207, 207, 207);
  color: #000000;
  text-align: center;
  border-radius: 2px;
  padding: 4px 8px;
  position: absolute;
  bottom: 120%;
  z-index: 100;
  left: -45px;
  margin-left: 0px;
  opacity: 1;
  border: black;
  transition: opacity 200ms 2s;
  height: 28px;
  /* Firefox ignores the min-height, so putting in a minimum height */
  min-height: fit-content;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}




.sliderB {
  appearance: none;
  width: 90%;
  height: 10px;
  background: #AAAAAA;
  border-radius: 12px;
  padding: 0px;
}

/* checkbox toggle CSS swith checkbox*/
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 25.5px;
  touch-action: manipulation;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .5s;
  transition: .5s;
  touch-action: manipulation;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19.5px;
  width: 19.5px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(19.5px);
  transform: translateX(19.5px);
}

.slider.round {
  border-radius: 25.5px;
}

.slider.round:before {
  border-radius: 50%;
}

.whiteUnderlinedLink {
  outline: none;
  color: white;
  text-decoration: underline;
}

#quickSetup {
  display: none;
}

/* .close-button {
  position: absolute;
  top: 1em;
  right: 1em;
  border: 0;
  background: transparent;
} */

.closeOpenButton {
  display: inline;
  padding: 0px;
  padding-right: 0px;
  float: right;
  transform: translate(25px, 120px);

}


dialog {
  border-radius: 20px;
  padding: 0;
  background-color: white;
  min-width: 400px;
  max-width: 700px;
  /* consider removing this  */
  /* max-height: 700px;  */
  outline: none;
  /* overflow-y: hidden; */
  /* box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38); */
}

dialog::backdrop {
  background-color: #90909055;
  backdrop-filter: blur(1px);
}



dialog hr {
  margin: 2em 0;
}

dialog header {
  background-color: black;
  color: white;
  padding: 2em;
  text-align: center;
}

dialog header .buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2em;
}

dialog header button {
  background-color: #222;
  color: white;
  border-radius: 1em;
  padding: 1em 2em;
  border: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

dialog header button:hover {
  background-color: #444;
}

.buttonHighlight {
  /* border: 2px;
  border-color: #2196F3;
  border-style:solid; */
  border-color: #64bffa;
  outline: 2px solid #64bffa;
}

dialog main {
  padding: 2em;
  max-height: 70vh;
  overflow-y: auto;
  min-height: 100px;

}

.dialogAlertModal {
  padding: 10px 20px;
  border: 1px solid rgb(32, 32, 32)
}

.dialogAlertMain {
  padding: 1em;
  font-size: small;
}

/* "Recent Floor Plans" dialog — grid of large thumbnails of every image
 * stored in the IndexedDB bgImages library. Each card is clickable to
 * apply the image and has a small delete button in the top-right corner. */
#dialogRecentFloorPlans {
  width: min(720px, 92vw);
  max-width: 720px;
}

/* Scroll wrapper around the grid. Owns the max-height + overflow so the
 * shared .scrollHintBtn pattern (sticky child of an overflowing element)
 * can attach a scroll-down chevron without becoming a stray grid cell. */
.recentFloorPlansScroll {
  position: relative;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

.recentFloorPlansGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.recentFloorPlanCard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
}

.recentFloorPlanCard:hover,
.recentFloorPlanCard:focus-visible {
  border-color: var(--active);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.recentFloorPlanCard.isCurrent {
  border-color: var(--active);
  border-width: 2px;
}

.recentFloorPlanThumb {
  width: 100%;
  height: 160px;
  background-color: #f5f5f5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.recentFloorPlanMeta {
  padding: 6px 8px;
  font-size: 12px;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid #ececec;
}

.recentFloorPlanName {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recentFloorPlanSub {
  font-size: 11px;
  color: #777;
}

.recentFloorPlanDeleteBtn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #555;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 120ms ease-out, color 120ms ease-out;
}

.recentFloorPlanCard:hover .recentFloorPlanDeleteBtn,
.recentFloorPlanCard:focus-within .recentFloorPlanDeleteBtn {
  opacity: 1;
}

.recentFloorPlanDeleteBtn:hover {
  color: #c00;
}

#dialogQuestions main {
  font-size: 14px;
  font-family: Inter;
}


dialog #quick-setup {
  display: none;
  justify-content: center;
}

dialog.rightClickMenu::backdrop {
  background: none;
  backdrop-filter: unset;
}

body:has(dialog.rightClickMenu[open]) {
  overflow: unset;
}

.dialogLoadingTemplate {
  margin: 10px;
}

.hideScroll {
  overflow: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.hideScroll::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, and Opera */
}

.closeDialogX {
  position: absolute;
  top: 22px;
  right: 22px;
  cursor: pointer;
  color: rgb(145, 137, 137);
}

.closeDialogX:hover {
  color: rgb(255, 255, 255);
}

.closeWallBuilderX {
  position: absolute;
  top: -3px;
  right: 2px;
  cursor: pointer;
  color: rgb(110, 110, 110);
}

.closeWallBuilderX:hover {
  color: rgb(0, 0, 0);
}

#btnToggleUnit {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-color: white;
  border-radius: 20px;
  border-width: thin;
  border-style: solid;

}

.minimizeMaximize {
  position: absolute;
  top: 1px;
  right: 3px;
  cursor: pointer;
  color: rgb(0, 0, 0);
}

/* grey right-click menu */
/*
.rightClickMenu {
  background-color: #ececec;
  width: 200px;
  border-color: #7d7e7d;
  border-width: 1px;
  padding: 6px;
  cursor: default;
  border-radius: 5px;
  font-size:smaller;
  min-width: 250px;
  box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);
} */

.rightClickMenu {
  width: 200px;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 5px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  font-size: small;
  font-size: smaller;
  min-width: 250px;
  cursor: default;
  padding: 0px;
  box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);
  z-index: 500;
}

/* former dark .rightClickMenu */
.pleaseWaitDialog {
  background-color: #333;
  color: white;
  width: 200px;
  border-color: #7d7e7d;
  border-width: 1px;
  padding: 0px;
  cursor: default;
  border-radius: 5px;
  font-size: smaller;
  min-width: 250px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);
}

dialog.pleaseWaitDialogNoBackdrop::backdrop {
  background: none;
  backdrop-filter: unset;
  width: 150px;
  min-width: 140px;
}




.rightClickMenuDiv {
  padding: 6px;
  border-radius: 5px;
  border-width: 1px;
}

.rightClickMenuItem,
.rightClickMenuItemDisable {
  padding-left: 5px;
}

.rightClickMenuItem:hover {
  background-color: #c5c7c8;
}


.rightClickMenuItemDisable {
  color: rgb(163, 162, 162);
  cursor: default;
}

.rightClickMenuShortCutText {
  color: rgb(163, 162, 162);
  float: right;
  padding: 0px;
  padding-right: 6px;
}

hr.rightClickHorizontalLine {
  height: 1px;
  background-color: rgb(105, 104, 104);
  border: none;
  margin: 5px;
}

.menuReach {
  position: absolute;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 5px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  font-size: small;
  min-width: 160px;
}

.menuReach-item {
  display: flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  cursor: pointer;
  user-select: none;
}

.menuReachItem-checkbox {
  margin-right: 8px;
}

.menuReachClearButton {
  padding: 8px 12px;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  color: #000;
  width: 130px;
  margin: 0px 5px;
}

.menuReachClearButton:hover {
  background-color: #d6eaff;
  border-radius: 25px;

}

.menuMore {
  position: absolute;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 5px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  font-size: small;
}

.menuMoreInputField {
  position: relative;
  display: flex;
  /* flex-direction: column; */
  gap: 10px;
  flex-grow: 1;
  /* align-items: stretch; */
  justify-content: space-between;
  margin-bottom: 10px;
}

.menuMoreInputField label {
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}


/* -------------------------------------------------------------- */
/* Per-item ellipse menu (Group / CustomItem actions)             */
/* Sits next to #btnUpdateItemId and #btnMultiUpdateItemId in the */
/* Details / Multiple-Item Details panels. Opens itemActionsMenu  */
/* (built in roomcalc.js → toggleItemActionsMenu()).              */
/* -------------------------------------------------------------- */
.itemEllipseHostRow {
  position: relative;
  align-items: center;
}

.itemEllipseBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  color: var(--active, #0352a6);
}

.itemEllipseBtn:hover {
  background-color: #e6f1fb;
  border-color: var(--active, #0352a6);
}

.itemEllipseBtn .icon {
  font-size: 18px;
  line-height: 1;
}

.itemEllipseBtn[disabled],
.itemEllipseBtn.itemEllipseBtnDisabled {
  color: rgb(163, 162, 162);
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
}

#itemActionsMenu {
  position: fixed;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 4px 0;
  box-shadow: 4px 8px 8px hsl(0deg 0% 0% / 0.38);
  z-index: 1000;
  min-width: 200px;
  font-size: small;
  cursor: default;
}

#itemActionsMenu .itemActionsMenuItem {
  padding: 6px 12px;
  user-select: none;
}

#itemActionsMenu .itemActionsMenuItem:hover {
  background-color: #c5c7c8;
  cursor: pointer;
}

#itemActionsMenu .itemActionsMenuItemDisable {
  padding: 6px 12px;
  color: rgb(163, 162, 162);
  cursor: default;
}

#itemActionsMenu hr.itemActionsMenuDivider {
  height: 1px;
  background-color: rgb(105, 104, 104);
  border: none;
  margin: 4px 0;
}


/* ----------------------------------------------------------------- */
/* Scroll-hint button: a sticky chevron that appears at the bottom of */
/* an overflowing .subtabcontent / .subtabcontent2 panel.  Click      */
/* scrolls the panel down by ~80% of its visible height; the button   */
/* hides automatically when the user reaches the end of the panel.    */
/* See initScrollHints() in roomcalc.js for the wiring.               */
/* ----------------------------------------------------------------- */
.scrollHintBtn {
  position: sticky;
  bottom: 8px;
  margin: 8px auto 4px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d4d4d4;
  background: rgba(255, 255, 255, 0.96);
  color: #555;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  z-index: 5;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.scrollHintBtn:hover {
  background: #ffffff;
  color: #111;
  transform: translateY(-1px);
}

.scrollHintBtn:focus-visible {
  outline: 2px solid #0352a6;
  outline-offset: 2px;
}

.scrollHintBtn i {
  font-size: 16px;
  line-height: 1;
  transform: translate(0px, 3px);
}

.subtabcontent.hasScrollHint > .scrollHintBtn,
.subtabcontent2.hasScrollHint > .scrollHintBtn,
.recentFloorPlansScroll.hasScrollHint > .scrollHintBtn,
#equipmentScrollArea.hasScrollHint > .scrollHintBtn {
  display: flex;
}

.tablinksfake {
  display: none;
}

.pleaseWaitDialog {
  min-width: fit-content;
  min-height: fit-content;
  padding: 12px;
  padding-left: 30px;
  padding-right: 30px;
}


/** keep in DOM but hide for users */
.debug-info {
  display: none;
}


#newRoomDialog {
  max-height: 95vh;
}


.displayWhenLessThan900 {
  display: none;
  background-color: red;
}

/* specificaly for the iPhone SE */
@media screen and (max-width: 405px) {
  dialog header button {
    padding: 1em 1em;
  }


  .closeDialogX {
    right: unset;
    top: 15px;
    left: 10px;
  }
}

@media screen and (max-width: 650px) {
  .ContainerHeader {
    gap: 2px;
  }

  #lblHeaderTitle {
    display: none;
  }

  .ContainerHeader #lblSubtitle {
    display: none;
  }

  .ContainerHeader button span {
    display: none;
    /* only show icons in header buttons */
  }

  .ContainerHeader i {
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 24px;

  }

  .primary i {
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
  }

  dialog header button {
    font-size: 10px;
  }


}

.dropDownJSON,
.dropDownPNG {
  position: relative;
  display: inline-flex;
  overflow: visible;

  gap: 2px;
}

.drpDownBtnMain {
  padding-left: 70px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  width: 300px;
  margin-bottom: 20px;
  border: 1px solid black;
  outline: none;
}

.dropDownBtnWhite {
  outline: none;
  box-shadow: none;
  border: 1px solid black;
  background-color: white;
  color: black;
}

.dropDownBtnWhite:hover {
  background-color: #ddd;
}

.drpDownBtnMainFull {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  width: 338px;
  margin-bottom: 20px;
  outline: none;
}

.drpDownBtnArrow {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 8px 10px;
  border: 1px solid black;
  outline: none;
}

.dropDownBtnMenu {
  display: none;
  /* hide until toggled */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  color: #000000;
  z-index: 1000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  text-align: left;
  padding: 0;
  margin-top: -20px;
  border-radius: 0.25rem;
  border: #000 solid 0.3px;
}


.dropDownMenuItem {
  display: block;
  white-space: nowrap;
  padding: 8px 12px;
  cursor: pointer;
  min-width: 338px;
  font-size: small;

}

.dropDownMenuItem:hover,
.dropDownMenuItem:focus {
  background-color: #dddddd;
  color: #222222;

}

.iconLeftOfText {
  position: absolute;
  left: -23px;
  top: -4px;
}

.showJSONDropDown,
.showPNGDropDown,
.showShareLinkDropDown {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: max-content;
}

#floatingWorkspace {
  display: flex;
  margin: 0;
  padding: 0;
  resize: both;
  overflow: hidden;
  flex-direction: column;
}

#floatingWorkspace>#iFrameFloatingWorkspace {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0
}

@media screen and (max-width: 783px) {

  #newRoomDialog {
    max-height: 0%;
  }

  .ContainerHeader {
    gap: 2px;
  }

  dialog {
    /* max-width: 100vw;
    max-height: 100vh; */
    min-width: 100%;
    min-height: 100%;
    border-radius: 0px;
    max-height: 0px;
  }

  .dialogWhiteBox {
    min-height: initial;
    min-width: initial;
    max-width: 95%;
    border-radius: 30px;
    max-height: 80%;
    padding: 20px;
  }

  h2 {
    margin: 6px 0;
  }


  #newRoomDialog header {
    padding: 0.5em;
    padding-bottom: 1em;
  }

  dialog header .buttons {
    margin-top: 1em;
  }



  .closeDialogX {
    color: white;
    top: 25px;

  }

  dialog::backdrop {
    background-color: #90909055;
    backdrop-filter: blur(3px);
  }


}

.quick-dialog {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 620px;
  max-width: 90vw;
  height: 500px;
  background-color: #222;
  color: white;
  padding: 1.5em;
  flex-direction: column;
  gap: 1em;
  border-radius: 1em;
  z-index: 999;
}

.quick-dialog input {
  background-color: #444;
  color: white;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  gap: 5px;
}

.gallery button {
  list-style: none;
  width: 9em;
  padding: 10px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.3em;
  color: #000000;
  background-color: #f4f4f4;
  border: 2px solid transparent;
}

/* Quick Add: green left-border is a CustomItem-only marker.
 * The green echoes the green CustomItem rect convention used on the
 * canvas (#B6EAB0 fill / green dashed stroke — see "Konva rendering"
 * in CLAUDE.md), so a user familiar with the canvas surface
 * immediately recognizes these tiles as "the bundles I built". 3px is
 * narrow enough not to crowd the 9em tile width but visible against
 * the regular grey tile background. Regular device tiles in the same
 * gallery intentionally do NOT carry this marker. */
.gallery button.customItemTile {
  border-left-color: #0fba0f;
  border-left-width: 3px;
}

/* .gallery button:focus {
  border: 2px solid #52adc7;
  background-color: #296679;
} */

.gallery button img {
  object-fit: contain;
  max-width: 100%;
  height: 70px;
}

.gallery button label {
  text-align: center;
}

.gallery button:hover {
  background-color: #ccc;
}



.wallBuilder {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  max-height: 70vh;
  gap: 5px;
  flex-direction: row;
  align-content: stretch;
  justify-content: center;
}


.wallBuilder button {
  list-style: none;
  /* width: 7em; */
  width: 9em;
  padding: 7px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.3em;
  color: #000000;
  background-color: #f4f4f4;
  border: 1px solid transparent;
}


.wallBuilder button img {
  object-fit: contain;
  max-width: 100%;
  height: 40px;
}

.wallBuilder button label {
  text-align: center;
}

.wallBuilder button:hover {
  background-color: #ccc;
}

.wallBuilderWallSelected {
  border: 2px solid #000000 !important;
  background-color: #d0d0d0 !important;
}


/* On screens that are 1180px wide or less, go from four columns to two columns */
@media screen and (max-width: 900px) {

  body {
    height: max-content;
    overflow: auto;
  }

  #ContainerRoomSvg {
    width: calc(100% - 40px);
    min-width: 340px;
    /* padding: 0px; */
    border-color: #000000;
    display: inline;
    vertical-align: top;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 30px;

  }


  #openSideBar {
    position: absolute;
  }

  .subtabcontent,
  .subtabcontent2 {
    position: relative;
    height: 490px;
  }

  /* .classOpenMenuClosed {
    transform: rotate(-90deg);
  } */

  #ContainerForContainerRoom {
    float: unset;
    overflow: unset;
  }

  #sidebar {
    width: 100%;
    padding: 0px;
    max-width: unset;
    position: absolute;
    z-index: 99;
    /* Keep the desktop viewport-bound flex layout (height: calc(100vh
       - 60px); display: flex; flex-direction: column;) so the Equipment
       list scrolls inside #equipmentScrollArea instead of pushing the
       whole page down. Mirrors the body.svBp900 (split-view) behaviour
       — the only differences here are width/max-width/position needed
       for the sidebar to float over the canvas at narrow widths. */
  }

  #controlButtons {
    gap: 5px;
    overflow-x: auto;
  }

  #controlButtons .spacer {
    display: none;
  }

  #Container2 {
    width: 100%;
    padding: 0px;
    padding-bottom: 10px;
    margin: 0px;
  }

  .ContainerInputsFeedback {
    width: 97.5%;
  }

  #ContainerInputs {
    margin-top: 10px;
    margin-right: -30px;
    margin-bottom: 10px;
    margin-left: -5xpx;
    max-width: 370px;
    min-width: 320px;
    border-style: solid;
    border-width: thin;
  }



  .inputCellLeft2 {
    width: 14rem;
  }

  .inputCellLeft1 {
    width: 10.5rem;
  }

  .button:hover {
    box-shadow: 0 1px #777;
  }

  /* #openSideBar {
    height: 45px;
    width: 97%;
    margin-top: 30px;
    padding-top: 10px;

  } */

  .tablinksfake {
    padding-bottom: 0px;
    color: #838282;
    display: inline;
  }

  /* #closeOpenIcon {
    transform: rotate(90deg);
  } */

  /* #openSideBarBtn {

    display: inline;
    padding: 0px;
    padding-right: 0px;
    transform: rotate(90deg);
    position: absolute;
    right: 35px;
    top: 75px;
    left: unset;

  } */


  .displayWhenLessThan900 {
    display: contents;
    color: #888;
  }

}

/* ================================================================ */
/* Split View panel & Preview dropdown button styles                 */
/* ================================================================ */

/* ------------------------------------------------------------------
   Preview split-button group (ContainerHeader)
   Matches the existing .primary pill button style.
------------------------------------------------------------------ */
.previewBtnGroup {
  position: relative;
  display: inline-flex;
  gap: 2px;
}

.previewBtnMain {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-top-left-radius: 30px !important;
  border-bottom-left-radius: 30px !important;
}

.previewBtnArrow {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-top-right-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
  padding: 7px 10px !important;
  min-width: 32px;
  border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.previewDropDownMenu {
  left: 0;
  margin-top: -2px;
  min-width: 220px;
  z-index: 10000;
}

/* Toggle class — mirrors showJSONDropDown / showPNGDropDown */
.showPreviewDropDown {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: max-content;
}

/* ------------------------------------------------------------------
   Split view overlay container
   Fixed panel covering the right portion of the viewport,
   positioned below the 47px ContainerHeader.
   Right panel width is set dynamically via JS.
------------------------------------------------------------------ */
.splitViewContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  z-index: 500;
  pointer-events: none;
}

.splitViewLeft {
  flex-shrink: 0;
  pointer-events: none;
  background: transparent;
  padding-top: 47px;
}

.splitViewBar {
  width: 13px;
  border-style: solid;
  border-color: lightgray;
  background-color: #ffffff;
  cursor: col-resize;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.1s;
  z-index: 501;
  box-shadow: 2px 0 4px rgba(0,0,0,0.15);
}

.splitViewBar:hover,
.splitViewBar.dragging {
  background-color: #e8e8e8;
}

.splitViewBarHandle {
  display: block;
  width: 4px;
  height: 40px;
  border-left: 2px dotted #aaa;
  border-right: 2px dotted #aaa;
}

.splitViewBar.dragging .splitViewBarHandle {
  border-color: #888;
}

/* Reopen tab: fixed to right edge, shown when WSD is closed */
.splitViewReopenTab {
  position: fixed;
  right: 0;
  top: 20%;
  transform: translateY(-50%);
  z-index: 600;
  width: 28px;
  height: 56px;
  background-color: var(--active, #0352a6);
  border: none;
  border-radius: 6px 0 0 6px;  /* rounded on left side only */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: -2px 0 6px rgba(0,0,0,0.3);
  padding: 0;
}

.splitViewReopenTab:hover {
  background-color: #0265c8;
}

.splitViewRight {
  flex: 1;
  position: relative;
  background: #f0f0f0;
  pointer-events: all;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* "Powered by Cisco Workspace Designer" label in top whitespace area */
.splitViewLabel {
  flex-shrink: 0;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* was: center */
  background: #ffffff;
  font-size: 16px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 8px;
  pointer-events: none;
  user-select: none;
  border-bottom-color: #ccccccb6;
  border-bottom-style: solid;
}

/* Center label text stretches to fill space between the two buttons */
.splitViewLabel .splitViewLabelText {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close (X) and Open New Tab buttons in the label bar */
.splitViewLabelBtn {
  pointer-events: all;   /* override parent pointer-events:none */
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.splitViewLabelBtn:hover {
  background-color: #e8e8e8;
  color: #000;
}

.splitViewLabel .splitViewLabelFull  { display: inline; }
.splitViewLabel .splitViewLabelShort { display: none; }
.splitViewLabel .splitViewLabelVRC   { display: none; }


@container splitRight (max-width: 420px) {
  .splitViewLabel .splitViewLabelFull  { display: none; }
  .splitViewLabel .splitViewLabelShort { display: inline; }
}

.splitViewIframe {
  display: block;
  width: 100%;
  flex: 1;        /* fills remaining height below the label */
  border: none;
  min-height: 0;  /* allows flex child to shrink below content size */
}

/* ------------------------------------------------------------------
   Restore button: shown only when right panel is 100% (VRC hidden).
   Anchored to the left edge of the right panel.
------------------------------------------------------------------ */
.splitViewExpandBtn {
  position: absolute;
  left: -7px;
  top: 20%;
  transform: translateY(-50%);
  z-index: 600;
  width: 30px;
  height: 56px;
  background-color: var(--active, #0352a6);
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.3);
  padding: 0;
}

.splitViewExpandBtn:hover {
  background-color: #0265c8;
}


/* Split-view responsive breakpoint classes                                  */
/* These mirror @media queries but fire based on actual content width,       */
/* not viewport width. JS adds svBp* classes to <body> during split view.    */

/* Mirror @media (max-width: 900px) */
body.svBp900 #ContainerRoomSvg {
  width: calc(100% - 40px); min-width: 340px; display: inline;
  vertical-align: top; margin: 0 0 10px 30px;
}
body.svBp900 #openSideBar { position: absolute; }
body.svBp900 .subtabcontent, body.svBp900 .subtabcontent2 { position: relative; height: 490px; }

body.svBp900 #ContainerForContainerRoom { float: unset; overflow: unset; }

/* body.svBp900 #sidebar {
  width: 100%; padding: 0; max-width: unset; position: absolute; z-index: 99;
} */

body.svBp900 #sidebar {
  padding: 0; max-width: 370px; position: absolute; z-index: 99;
}

/* body.svBp900 #sidebar {
  padding: 0; max-width: 400px;
} */

body.svBp900 #controlButtons { gap: 5px; overflow-x: auto; }
body.svBp900 #controlButtons .spacer { display: none; }
body.svBp900 #Container2 { width: 100%; padding: 0; padding-bottom: 10px; margin: 0; }
body.svBp900 .ContainerInputsFeedback { width: 97.5%; }
body.svBp900 #ContainerInputs {
  margin: 10px -30px 10px 0; max-width: 370px; min-width: 320px;
  border-style: solid; border-width: thin;
}
body.svBp900 .displayWhenLessThan900 { display: contents; color: #888; }


/* Mirror @media (max-width: 783px) */

body.svBp783 .ContainerHeader { gap: 2px; }
body.svBp783 #lblHeaderTitle { max-width: 145px; }


/* Mirror @media (max-width: 650px) */
body.svBp650 .ContainerHeader { gap: 2px; }


body.svBp650 .ContainerHeader button span { display: none; }
body.svBp650 .ContainerHeader i {
  padding: 0; width: 28px; height: 28px; line-height: 28px; font-size: 24px;
}
body.svBp650 .primary i {
  padding: 0; width: 20px; height: 20px; line-height: 20px; font-size: 16px;
}

/* Mirror @media (max-width: 405px) */
body.svBp405 #lblHeaderTitle { display: none; }
body.svBp405 .ContainerHeader #lblSubtitle { display: none; }
body.svBp405 .closeDialogX { right: unset; top: 15px; left: 10px; }

/* ---- Layers Tab UI ---- */
.layers-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.layer-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 6px;
  background: transparent;
  transition: background 0.1s;
}

.layer-row:hover {
  background: #f0f4ff;
}

.layer-row.layer-header-row {
  background: #f6f8fb;
  border-bottom: 1px solid #d8dfe8;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-radius: 6px 6px 0 0;
}

.layer-row.layer-header-row:hover {
  background: #f6f8fb;
}

.layer-header-label {
  font-weight: 600;
  color: #333;
  cursor: default !important;
}

.layer-header-label:hover {
  background: transparent !important;
}

.layer-header-spacer {
  /* Reserve space where the per-row delete button sits, so columns align */
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.layer-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  color: #555;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  transition: background 0.1s, border-color 0.1s;
}

.layer-icon-btn:hover {
  background: #e2ebff;
  border-color: #0352a6;
  color: #0352a6;
}

.layer-icon-btn.layer-btn-active {
  background: #dceeff;
  border-color: #0352a6;
  color: #0352a6;
}

.layer-icon-btn.layer-btn-locked {
  background: #fff3dc;
  border-color: #c07000;
  color: #c07000;
}

.layer-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.layer-icon-btn:disabled:hover {
  background: transparent;
  border-color: #ccc;
  color: #555;
}

.layer-name {
  flex: 1;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.layer-name:hover {
  background: #e8efff;
}

.layer-name-hidden {
  color: #aaa;
  font-style: italic;
}

.layer-name-reserved {
  cursor: default;
}

.layer-name-reserved:hover {
  background: transparent;
}

.layer-name-input {
  flex: 1;
  font-size: 0.82rem;
  padding: 2px 4px;
  border: 1px solid #0352a6;
  border-radius: 4px;
  outline: none;
}

.layer-delete-btn {
  color: #999;
}

.layer-delete-btn:hover {
  color: #cc0000;
  border-color: #cc0000;
  background: #ffeaea;
}

/* ----- Per-layer "select items" button --------------------------------------
 * Distinct hover + press feedback so the user can tell the button is
 * interactive AND that their click registered, even on a layer where the
 * resulting selection lands offscreen. The base `.layer-icon-btn` already
 * carries a `transition: background 0.1s, border-color 0.1s` (line 2953)
 * so these states ease in/out smoothly. The `:active` state is what gives
 * the "momentarily change color on click" effect — applies while the mouse
 * is held down, releases back to the hover/active style on mouse-up. */
.layer-select-btn.layer-btn-active:hover {
  background: #b8d9ff;
  border-color: #023f80;
  color: #023f80;
}

.layer-select-btn.layer-btn-active:active {
  background: #7fb6ff;
  border-color: #012b5c;
  color: #012b5c;
  transform: scale(0.94);
}


/* ----- VRC toast primitive ------------------------------------------------
 * Lightweight transient notification used for "Custom Item saved to library",
 * "Custom Item exported", "Imported N Custom Item(s)", etc. The container is
 * created lazily by showToast() on first use and stays in the DOM for the
 * lifetime of the page; individual `.vrc-toast` children animate in, hold,
 * and animate out independently. Pointer-events:none on the container keeps
 * the toast purely informational — it never blocks the canvas underneath. */

#vrcToastContainer {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100000;
  pointer-events: none;
}

.vrc-toast {
  background: rgba(33, 33, 33, 0.92);
  color: #fff;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  max-width: 90vw;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  pointer-events: none;
}

.vrc-toast.vrc-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Shareable Template Hyperlink "copied" banner ----
 * Appears below the #shareLink button inside its .dropDownPNG container
 * (which is position: relative). Absolutely positioned so it overlays
 * adjacent content without reflowing the Save dialog. Hidden by default
 * (opacity 0 + visibility hidden), revealed by JS via the
 * .shareLinkCopiedBanner-visible class for ~3s, then fades. */
.shareLinkCopiedBanner {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: #64bffa;
  color: #04263f;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 0s linear 220ms;
  z-index: 10;
}

.shareLinkCopiedBanner.shareLinkCopiedBanner-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
  visibility: visible;
  transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 0s linear 0s;
}

/* ---- Library customItem tile (shared between Equipment-tab sidebar
 * and Quick Add modal) ----
 *
 * Library customItem tiles (.customItemTile) live in two places:
 *   - the Equipment-tab sidebar (#customItemsMenuContainer)
 *   - the Quick Add modal (.quick-dialog .gallery)
 *
 * The green left-border distinguishing-marker (#0fba0f, 3px) is
 * applied ONLY in the Quick Add gallery via `.gallery button.customItemTile`
 * above — it echoes the green CustomItem rect convention used on the
 * canvas (#B6EAB0 fill / green dashed stroke — see "Konva rendering"
 * in CLAUDE.md), so a user familiar with the canvas surface
 * immediately recognizes those tiles as "the bundles I built". The
 * Equipment-tab sidebar copy intentionally omits the green marker so
 * the customItem tiles blend with the surrounding device tiles in the
 * sidebar grid (`cursor: move` is what visually grounds them there
 * instead — see the #customItemsMenuContainer rule below). */
.equipmentItemOnMenu.customItemTile {
  /* Anchor for .customItemTileDeleteBtn — the absolutely-positioned
   * delete glyph nests inside the tile rather than the gallery, so it
   * tracks the tile through wrapping/reorder of search results. */
  position: relative;
}

/* ---- Equipment tab sidebar: Custom Item Library tile cursor ----
 *
 * The Equipment-tab Custom Items pill renders each library tile as a
 * <button> element (see buildCustomItemTile() in js/roomcalc.js), but
 * the surrounding regular device tiles in `.containerItems` are <div>
 * elements that inherit `cursor: move` from their parent. Browser UA
 * stylesheets set an explicit cursor on <button>, which overrides the
 * inherited `cursor: move` from `.containerItems` and leaves the
 * Custom Item tiles showing the default arrow — visually inconsistent
 * with the drag-and-drop affordance the rest of the equipment menu
 * advertises. This rule restores the move cursor on those buttons.
 *
 * Scoped to `#customItemsMenuContainer` so the Quick Add modal copy
 * (which is click-to-insert, not draggable) keeps its `cursor: pointer`
 * inherited from `.gallery button`. */
#customItemsMenuContainer .customItemTile {
  cursor: move;
}

/* ---- Quick Add palette: customItem tile "more" (ellipsis) button ----
 *
 * Small round `...` affordance in the upper-right of every library
 * customItem tile. Originally a trash glyph (delete-only), now an
 * ellipsis that opens the Edit Custom Item dialog (rename / re-author
 * / re-describe + Export / Delete / Remove-From-Library). Modelled on
 * the Recent Floor Plans card's delete button — same shape, same
 * fade-on-hover behaviour — but shrunk to 20px so it doesn't crowd
 * the 70px menuImage thumbnail above the tile's 12px label.
 *
 * The white pill background + drop-shadow lifts the icon off any tile
 * background colour the menuImage might bleed into, so the affordance
 * stays legible regardless of which Custom Item it sits on. The icon
 * itself is the Momentum `icon-more-bold` glyph (matches the global
 * "more menu" trigger in the toolbar).
 *
 * Class name still reads `customItemTileDeleteBtn` for historical
 * reasons — renaming it would require a coordinated change across CSS
 * + JS with no functional benefit. The class is the visual style only;
 * the click handler decides the action. */
.customItemTileDeleteBtn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #555;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 120ms ease-out, color 120ms ease-out;
}

.customItemTileDeleteBtn .icon {
  font-size: 15px;
}

.equipmentItemOnMenu.customItemTile:hover .customItemTileDeleteBtn,
.equipmentItemOnMenu.customItemTile:focus-within .customItemTileDeleteBtn,
.customItemTileDeleteBtn:focus {
  opacity: 1;
}

.customItemTileDeleteBtn:hover {
  /* Neutral darken on hover — the button is no longer destructive
   * (the ellipsis opens an edit dialog), so the previous red hover
   * colour would mislead the user into expecting a delete action. */
  color: #0352a6;
}

/* ------------------------------------------------------------------
 * Webex Cloud Storage Proof of Concept (js/pocLoginCloud.js)
 * Only visible when the page loads with ?testLogin=1.
 * ---------------------------------------------------------------- */

.pocCloudLoginBtn {
  font-size: 13px;
}

.pocCloudAvatarBtn {
  padding: 2px !important;
  border-radius: 50% !important;
  overflow: hidden;
  width: 34px;
  height: 34px;
  background-color: transparent;
}

.pocCloudAvatarBtn img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  background-color: #ccc;
}

.pocCloudUserRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}

.pocCloudUserRow img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #ccc;
  flex: 0 0 auto;
}

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

.pocCloudUserName {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pocCloudUserEmail {
  color: #666;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pocCloudSpaceStatus {
  padding: 8px 10px;
  background-color: #f5f8fb;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}

.pocCloudSaveRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pocCloudSaveStatus {
  font-size: 12px;
  color: #555;
  flex: 1 1 auto;
  min-width: 0;
}

.pocCloudListHeader {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

.pocCloudRoomsList {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 6px;
  background-color: #fafafa;
}

.pocCloudRoomsEmpty {
  padding: 20px;
  text-align: center;
  color: #888;
  font-style: italic;
  font-size: 12px;
}

.pocCloudRoomRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

.pocCloudRoomRow:last-child {
  border-bottom: none;
}

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

.pocCloudRoomName {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pocCloudRoomMeta {
  color: #666;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pocCloudLoadBtn {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 4px 10px !important;
}

/* Destructive action: subtle red tint so the user reads "this
 * removes something" before clicking, but still consistent with the
 * `button dropDownBtnWhite` shape used for the Load button alongside
 * it. The confirm() prompt in deleteRoomFromMap() is the real
 * safety net; this is just a visual cue. */
.pocCloudDeleteBtn {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 4px 10px !important;
  margin-left: 6px;
  color: #b00 !important;
  border-color: #d99 !important;
}
.pocCloudDeleteBtn:hover {
  background: #fbeaea !important;
  border-color: #b00 !important;
}