@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,900");.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}

/* Carried as a custom property instead of an inline `max-width` so the
   full-screen media query below can win. An inline style could not be
   overridden by a breakpoint at all. */
.popup-card[data-v-8fbf10a0] {
  max-width: var(--popup-max-w);
}
@media (width < 768px) {
.popup-card.is-fullscreen[data-v-8fbf10a0] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.popup-card.is-fullscreen > .popup-header[data-v-8fbf10a0] {
    flex-shrink: 0;
}

  /* The card no longer scrolls as a whole, so the list scrolls inside itself
     and the title stays put. The inset keeps the last row clear of the phone's
     home indicator. */
.popup-card.is-fullscreen > .popup-body[data-v-8fbf10a0] {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding-bottom: env(safe-area-inset-bottom);
}
}
:root {
  --toastify-color-light: #fff;
  --toastify-color-success: rgba(41, 204, 167, 1);
  --toastify-color-warning: rgba(255, 166, 34, 1);
  --toastify-color-error: rgba(255, 82, 82, 1);
  --toastify-text-color-success: rgba(41, 204, 167, 1);
  --toastify-text-color-warning: rgba(255, 166, 34, 1);
  --toastify-text-color-error: rgba(255, 82, 82, 1);
  --toastify-toast-min-height: 50px;
}
.app-toast {
  min-width: 300px;
}
.app-toast > div {
  border-radius: 12px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
  font-size: 12px;
  font-weight: 600;
  font-family: "SF Pro Display", sans-serif !important;
  cursor: default;
  margin-bottom: 0px;
  padding: 0 16px;
  width: fit-content;
}
.app-toast .content {
  display: flex;
  align-items: center;
}
.app-toast .content h5 {
  flex-grow: 1;
  width: max-content;
}
.app-toast .content .undo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 72px;
  height: 34px;
  background-color: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  border-radius: 6px;
  margin-left: 8px;
}
.app-toast .content .divider {
  width: 0px;
  height: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0 20px 0 12px;
}.three-d-model .box-modal,
.main-3d .box-modal,
.unity-viewer .box-modal {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px);
  position: fixed;
  z-index: 99;
}
.three-d-model .box-modal .status-tag,
.main-3d .box-modal .status-tag,
.unity-viewer .box-modal .status-tag {
  padding: 4px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  width: max-content;
  background-color: #636363;
  margin-left: 5px;
  margin-top: -20px;
  position: absolute;
}
.three-d-model .box-modal .status-tag .status-color,
.main-3d .box-modal .status-tag .status-color,
.unity-viewer .box-modal .status-tag .status-color {
  display: inline-block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 7px;
}
.three-d-model .box-modal .status-tag .status-color span,
.main-3d .box-modal .status-tag .status-color span,
.unity-viewer .box-modal .status-tag .status-color span {
  border-radius: 50%;
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  float: left;
}
.three-d-model .box-modal.h-500,
.main-3d .box-modal.h-500,
.unity-viewer .box-modal.h-500 {
  height: 500px;
}
.three-d-model .box-modal .bg-white img,
.main-3d .box-modal .bg-white img,
.unity-viewer .box-modal .bg-white img {
  max-height: 150px;
}
.three-d-model .box-modal .box-modal-header,
.main-3d .box-modal .box-modal-header,
.unity-viewer .box-modal .box-modal-header {
  border-color: rgba(255, 255, 255, 0.2);
}
#compass-container[data-v-f268c090] {
  position: relative;
  z-index: 9;
  pointer-events: none;
}
#compass-container div.compass-position[data-v-f268c090] {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 9;
  pointer-events: auto;
}
#compass-container div.compass-position .compass-content[data-v-f268c090] {
  overflow: hidden;
  display: inline-grid;
  justify-content: center;
  align-items: center;
}
#compass-container div.compass-position .compass-content svg[data-v-f268c090] {
  width: 150px;
  height: 100px;
}
@media screen and (max-width: 1279px) {
#compass-container[data-v-f268c090] {
    text-align: center;
    background-color: transparent;
    height: max-content;
    z-index: 9;
    position: relative;
    margin: 10px auto;
    width: 100%;
}
#compass-container div.compass-position[data-v-f268c090] {
    position: fixed;
    top: 150px;
    width: 100%;
    right: unset;
    bottom: unset;
    text-align: right;
    left: 0;
    z-index: 9;
}
#compass-container div.compass-position .compass-content svg[data-v-f268c090] {
    height: 47px;
    width: 65px;
}
}
/* Position only — the badge itself is the same glyph as above, just moved.
   24px in from the right edge, and 12px under the MobileMenuSheet trigger's
   own bottom edge: that control sits at `top: safe-area + 4px` and is 32px
   tall (see its own file), so 4 + 32 + 12 = 48. Comes after the 1279px block
   above (equal specificity) so it wins at this narrower width without
   touching that block's own tablet-range layout. */
@media screen and (max-width: 768px) {
#compass-container[data-v-f268c090] {
    position: relative;
    z-index: 9;
}
#compass-container div.compass-position[data-v-f268c090] {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 48px);
    right: 24px;
    bottom: unset;
    left: unset;
    width: auto;
    text-align: right;
}
#compass-container div.compass-position .compass-content svg[data-v-f268c090] {
    height: 65px;
    width: 65px;
}
}
/* Figma darkens the render under the compass so the white ticks hold up
   against a bright sky. A corner fade rather than the strip's own box, so it
   has no edge of its own on the render. */
.compass-strip[data-v-624f6a44] {
  position: fixed;
  top: 0;
  right: 0;
  /* Level with the side menu: stays sharp above the tutorial overlay. */
  z-index: 120;
  height: 280px;
  width: 360px;
  background: radial-gradient(
    ellipse 100% 100% at 67% 0%,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
}

/* Figma: ring centre 118px in from the right and 99px down; the "N" 37px
   down (62px above the ring centre). The svg is 124 square, so its origin
   sits 62px up and left of the ring centre. */
.compass-dial[data-v-624f6a44] {
  position: absolute;
  top: calc(99px - 62px);
  right: calc(118px - 62px);
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: visible;
  pointer-events: auto;
}
.compass-dial svg[data-v-624f6a44] {
  overflow: visible;
}
.compass-dial__rotor[data-v-624f6a44] {
  transform-box: view-box;
  transform-origin: 62px 62px;
}

/* Figma: bold, ~14px. */
.compass-dial__north[data-v-624f6a44] {
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/* Figma: minor ticks thin and slightly see-through, the cardinal four
   solid and twice the weight. */
.compass-dial__tick[data-v-624f6a44] {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1;
}
.compass-dial__tick.is-major[data-v-624f6a44] {
  stroke: #fff;
  stroke-width: 2;
}

/* Figma (251-wide strip): dial centre 119px in from the right and 100px up
   from the bottom; weather column centred 25px in from the right. The box
   spans from the dial's left edge to the right edge of the viewport. */
.time-dial[data-v-3c50c362] {
  position: fixed;
  right: 0;
  bottom: calc(100px - 75.5px);
  /* Level with the side menu: stays sharp above the tutorial overlay. */
  z-index: 120;
  height: 151px;
  width: calc(119px + 75.5px);
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: #fff;
}

/* Figma: 151px disc, 1px #FFFFFF ~35% rim, dark glass fill. */
.time-dial__face[data-v-3c50c362] {
  position: absolute;
  top: 0;
  left: 0;
  height: 151px;
  width: 151px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: inherit;
  cursor: pointer;
}

/* Figma: three icons 20px below the rim, 26px apart; the current one bright
   with a short tick under it, the two ends dimmed. */
.time-dial__arc[data-v-3c50c362] {
  position: absolute;
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
}
.time-dial__arc-side[data-v-3c50c362] {
  opacity: 0.45;
}
.time-dial__arc-now[data-v-3c50c362] {
  position: relative;
}
.time-dial__arc[data-v-3c50c362]::after {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

/* Figma: rulers 38px either side of centre. */
.time-dial__ruler[data-v-3c50c362] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
}
.time-dial__ruler--left[data-v-3c50c362] {
  left: calc(50% - 38px - 3px);
}
.time-dial__ruler--right[data-v-3c50c362] {
  left: calc(50% + 38px - 3px);
}
.time-dial__mark[data-v-3c50c362] {
  position: absolute;
  left: 0;
  height: 1px;
  width: 5px;
  background: rgba(255, 255, 255, 0.4);
}
.time-dial__mark.is-now[data-v-3c50c362] {
  width: 6px;
  height: 1.5px;
  background: #fff;
}

/* Figma: the hour ~37px bold, centred on the dial. */
.time-dial__hour[data-v-3c50c362] {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 37px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: translateY(-58%);
}

/* Figma: a 117px hairline 17px under centre, fading out at both ends. */
.time-dial__rule[data-v-3c50c362] {
  position: absolute;
  top: calc(50% + 17px);
  left: 50%;
  height: 1px;
  width: 117px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-50%);
}

/* Figma: "AM" ~11px regular, 26px under centre. */
.time-dial__period[data-v-3c50c362] {
  position: absolute;
  top: calc(50% + 26px);
  left: 0;
  right: 0;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}

/* Figma: three options 35px apart, the middle one level with the dial's
   centre. */
.time-dial__weather[data-v-3c50c362] {
  position: absolute;
  top: 50%;
  right: calc(25px - 12.5px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}

/* Figma: the current option in a 25px ring (1.5px solid white); the others
   bare and dimmed. */
.time-dial__weather-btn[data-v-3c50c362] {
  display: flex;
  height: 25px;
  width: 25px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: none;
  color: #fff;
  opacity: 0.45;
}
.time-dial__weather-btn.is-active[data-v-3c50c362] {
  border-color: #fff;
  opacity: 1;
}
.time-dial__weather-btn[data-v-3c50c362]:disabled {
  cursor: default;
}

/* Figma (1083 tall): the track runs from 208px below the top to 209px above
   the bottom — 34px clear of the dial — on the same axis as the compass and
   the dial, 118px in from the right. 36px wide so the whole line is easy to
   press, not just its 1px stroke. */
.height-slider[data-v-56caf2b9] {
  position: fixed;
  top: 208px;
  bottom: 209px;
  right: calc(118px - 18px);
  /* Level with the side menu: stays sharp above the tutorial overlay. */
  z-index: 120;
  width: 36px;
  cursor: pointer;
  touch-action: none;
}
.height-slider__line[data-v-56caf2b9] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

/* Figma: 6px solid white dots capping the line. */
.height-slider__dot[data-v-56caf2b9] {
  position: absolute;
  left: 50%;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.height-slider__dot--top[data-v-56caf2b9] {
  top: 0;
}
.height-slider__dot--bottom[data-v-56caf2b9] {
  top: 100%;
}

/* Figma: a 36px glass disc, 1px light rim, up/down chevrons split by a
   hairline. Glides to its resting spot; follows the pointer exactly while
   dragged. */
.height-slider__handle[data-v-56caf2b9] {
  position: absolute;
  left: 50%;
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  cursor: grab;
  transform: translate(-50%, -50%);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.height-slider__handle.is-dragging[data-v-56caf2b9] {
  cursor: grabbing;
  transition: none;
}
.height-slider__handle[data-v-56caf2b9]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.zoom-box span[data-v-cca1614f] {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  transition: background-color 0.2s ease;
}
.zoom-box span[data-v-cca1614f]:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Figma `Frame 341`: 72 hug x 34 hug, radius 34 (a full pill at this height),
   padding 4, gap 12, fill #FFFFFF 5%. */
.mood-toggle[data-v-ab4cfee7] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.05);
}

/* Figma `Frame 340` / `Frame 344`: each side is a bare 26x26 square holding
   its icon centred — the border/fill below is what turns the *current* one
   into a badge; the other stays exactly this, just dimmed. */
.mood-toggle__side[data-v-ab4cfee7] {
  display: flex;
  height: 26px;
  width: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 15px;
  background: none;
  padding: 0;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.mood-toggle__side img[data-v-ab4cfee7] {
  height: 14px;
  width: 14px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* Figma `Frame 340`: border 1px #FFFFFF 70%, fill #FFFFFF 10%. */
.mood-toggle__side.is-active[data-v-ab4cfee7] {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}
.mood-toggle__side.is-active img[data-v-ab4cfee7] {
  opacity: 1;
}
.mood-toggle__side:not(.is-active):hover img[data-v-ab4cfee7] {
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
.mood-toggle__side[data-v-ab4cfee7],
  .mood-toggle__side img[data-v-ab4cfee7] {
    transition: none;
}
}
.legend-surface[data-v-83cbcd31],
.legend-trigger[data-v-83cbcd31] {
  background-color: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
}
.legend-trigger[data-v-83cbcd31] {
  transition: background-color 0.2s ease;
}
.legend-trigger[data-v-83cbcd31]:hover {
  background-color: rgba(0, 0, 0, 0.75);
}
.legend-search[data-v-83cbcd31] {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
.legend-search input[data-v-83cbcd31]::-webkit-search-cancel-button {
  display: none;
}
.legend-row[data-v-83cbcd31] {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.legend-row[data-v-83cbcd31]:hover, .legend-row[data-v-83cbcd31]:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}
.legend-row.is-active[data-v-83cbcd31] {
  background-color: rgba(255, 255, 255, 0.16);
}
.legend-row.is-active span[data-v-83cbcd31] {
  color: #fff;
}
.legend-foot[data-v-83cbcd31] {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.legend-scroll[data-v-83cbcd31] {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  overscroll-behavior: contain;
}
.legend-scroll[data-v-83cbcd31]::-webkit-scrollbar {
  width: 4px;
}
.legend-scroll[data-v-83cbcd31]::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.legend-panel-enter-active[data-v-83cbcd31],
.legend-panel-leave-active[data-v-83cbcd31] {
  transition: opacity 0.22s cubic-bezier(0.32, 0.72, 0, 1), transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: bottom center;
}
.legend-panel-enter-from[data-v-83cbcd31],
.legend-panel-leave-to[data-v-83cbcd31] {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.legend-panel-enter-active[data-v-83cbcd31],
  .legend-panel-leave-active[data-v-83cbcd31] {
    transition-duration: 0.01ms;
}
.legend-trigger[data-v-83cbcd31],
  .legend-row[data-v-83cbcd31] {
    transition: none;
}
}.seq-actions[data-v-c28a8eff] {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.seq-actions .border-seq-actions[data-v-c28a8eff] {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.seq-actions span[data-v-c28a8eff] {
  transition: background-color 0.2s ease;
}
.seq-actions span[data-v-c28a8eff]:hover {
  background-color: rgba(255, 255, 255, 0.1);
}.sequence-status[data-v-eff25c83] {
  height: 2px;
  overflow: hidden;
}
.sequence-status__bar[data-v-eff25c83] {
  height: 100%;
  width: 100%;
  background: rgb(36, 93, 230);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sequence-status__bar.is-indeterminate[data-v-eff25c83] {
  width: 35%;
  transform: none;
  animation: sequence-status-sweep-eff25c83 1.4s ease-in-out infinite;
}
@keyframes sequence-status-sweep-eff25c83 {
0% {
    transform: translateX(-100%);
}
100% {
    transform: translateX(340%);
}
}
.sequence-status-leave-active[data-v-eff25c83] {
  transition: opacity 400ms ease;
}
.sequence-status-leave-to[data-v-eff25c83] {
  opacity: 0;
}
.sequence-hint[data-v-eff25c83] {
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  background: rgba(20, 20, 20, 0.72);
  backdrop-filter: blur(8px);
}
@media screen and (min-width: 1025px) {
.sequence-hint[data-v-eff25c83] {
    bottom: 1.25rem;
}
}
.sequence-hint-enter-active[data-v-eff25c83],
.sequence-hint-leave-active[data-v-eff25c83] {
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.sequence-hint-enter-from[data-v-eff25c83],
.sequence-hint-leave-to[data-v-eff25c83] {
  opacity: 0;
  transform: translate(-50%, 4px);
}
.sequence-error[data-v-eff25c83] {
  background: rgba(20, 20, 20, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.sequence-error__retry[data-v-eff25c83] {
  background: rgb(36, 93, 230);
  color: #fff;
  transition: transform 160ms ease-out;
}
.sequence-error__retry[data-v-eff25c83]:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.sequence-status__bar.is-indeterminate[data-v-eff25c83] {
    animation: none;
    width: 100%;
    opacity: 0.4;
}
.sequence-hint-enter-active[data-v-eff25c83],
  .sequence-hint-leave-active[data-v-eff25c83],
  .sequence-error__retry[data-v-eff25c83] {
    transition: none;
}
}#image-sequence {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  height: 100%;
  touch-action: pan-y pinch-zoom;
}
#image-sequence .cls-1 {
  fill: unset;
}
#image-sequence.show-opacity {
  opacity: 1;
  transition: opacity 500ms ease-out;
}
#image-sequence .container-image {
  position: relative;
}
#image-sequence .frame-stack {
  position: relative;
}
#image-sequence .frame-stack--night {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 520ms ease;
}
#image-sequence .frame-stack--night.is-visible {
  opacity: 1;
}
#image-sequence .frame-stack--night .frame-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#image-sequence .frame-preview {
  aspect-ratio: 1/1;
  filter: blur(12px);
  transform: scale(1.06);
}
#image-sequence .frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 420ms ease-out;
}
#image-sequence .frame.is-ready {
  opacity: 1;
}
#image-sequence .svg.hovers-hidden {
  opacity: 0;
}
#image-sequence .svg.hovers-hidden > * {
  pointer-events: none;
}
#image-sequence text {
  font-weight: 400;
  font-size: 30px;
  color: #000;
  line-height: 24px;
}
#image-sequence .d-none {
  display: none;
}
#image-sequence .unit-color,
#image-sequence .optionColor {
  fill: rgba(36, 96, 230, 0.4);
  z-index: 999;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2px;
}
#image-sequence .unit-color:hover,
#image-sequence .optionColor:hover {
  fill: rgba(36, 96, 230, 0.8);
}
#image-sequence .active-unit {
  fill: rgba(27, 206, 110, 0.8) !important;
}
#image-sequence path:not(.unit-color,
.unit-color g,
.unit-color path,
.optionColor,
.optionColor g,
.optionColor path,
.compass-content *),
#image-sequence g:not(.unit-color,
.unit-color g,
.unit-color path,
.optionColor,
.optionColor g,
.optionColor path,
.compass-content *) {
  fill: none;
  stroke-width: 7px;
}
#image-sequence path.optionColor,
#image-sequence g.optionColor {
  stroke: rgba(255, 255, 255, 0.5) !important;
  stroke-width: 2px !important;
  z-index: 999;
  cursor: pointer;
}
#image-sequence path.optionColor:hover,
#image-sequence g.optionColor:hover {
  transition: 0.3s;
}
#image-sequence path.Available:hover,
#image-sequence g.Available:hover {
  fill: rgba(27, 206, 110, 0.8) !important;
}
#image-sequence path.Available:hover path,
#image-sequence g.Available:hover path {
  fill: rgba(27, 206, 110, 0.8) !important;
}
#image-sequence path.Sold:hover,
#image-sequence g.Sold:hover {
  fill: rgba(206, 70, 27, 0.8) !important;
}
#image-sequence path.Sold:hover path,
#image-sequence g.Sold:hover path {
  fill: rgba(206, 70, 27, 0.8) !important;
}
#image-sequence path.Unavailable:hover,
#image-sequence g.Unavailable:hover {
  fill: rgba(122, 122, 122, 0.8) !important;
}
#image-sequence path.Unavailable:hover path,
#image-sequence g.Unavailable:hover path {
  fill: rgba(122, 122, 122, 0.8) !important;
}
#image-sequence path.Allocated:hover,
#image-sequence g.Allocated:hover {
  fill: rgba(36, 96, 230, 0.8) !important;
}
#image-sequence path.Allocated:hover path,
#image-sequence g.Allocated:hover path {
  fill: rgba(36, 96, 230, 0.8) !important;
}
#image-sequence path.Reserved:hover,
#image-sequence g.Reserved:hover {
  fill: rgba(93, 77, 193, 0.8) !important;
}
#image-sequence path.Reserved:hover path,
#image-sequence g.Reserved:hover path {
  fill: rgba(93, 77, 193, 0.8) !important;
}
#image-sequence .hide {
  opacity: 0;
}
#image-sequence.model-focus .svg > g[id^=Hover_]:not(.model-match):not(.hide) {
  opacity: 0.12;
}
@media (prefers-reduced-motion: reduce) {
#image-sequence .svg > g[id^=Hover_] {
    transition: none !important;
}
#image-sequence .frame-stack--night,
  #image-sequence .frame {
    transition-duration: 160ms;
}
}
@media screen and (max-width: 1024px) {
#image-sequence .container-image {
    position: absolute;
    left: 0;
    width: 100%;
    transform-origin: 0 50%;
}
}.icon-search-container[data-v-bf8de565] {
  display: inline-block;
  border-radius: 50px;
  position: relative;
  transition: width 0.8s ease-out;
  backface-visibility: hidden;
}
.icon-search-container.active[data-v-bf8de565] {
  width: 300px;
}
@media screen and (max-width: 768px) {
.icon-search-container.active[data-v-bf8de565] {
    width: 230px;
}
.icon-search-container.active .search-input[data-v-bf8de565] {
    width: 190px;
}
}
.icon-search-container.active .fa-times-circle[data-v-bf8de565] {
  opacity: 1;
}
.icon-search-container.active .search-input[data-v-bf8de565] {
  width: 250px;
}
.fa-search[data-v-bf8de565] {
  color: #2980b9;
  font-size: 30px;
  position: absolute;
  top: 7px;
  left: 8px;
  cursor: pointer;
}
.fa-times-circle[data-v-bf8de565] {
  opacity: 0;
  color: #d9d9d9;
  font-size: 20px;
  position: absolute;
  top: 12px;
  right: 8px;
  transition: opacity 0.8s ease-out;
  cursor: pointer;
}
.search-input[data-v-bf8de565] {
  position: absolute;
  cursor: default;
  left: 40px;
  top: 0px;
  width: 0;
  padding: 5px;
  border: none;
  outline: none;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 0);
  transition: width 0.7s ease-out;
  /* transition-delay: 0.3s; */
  transition-delay: unset !important;
}
.search-input[data-v-bf8de565]::placeholder {
  font-size: 14px;
}
@media screen and (max-width: 768px) {
.search-input[data-v-bf8de565]::placeholder {
    font-size: 12px;
}
}
.search-input.active[data-v-bf8de565] {
  /* transition-delay: unset !important; */
  transition-delay: 0.3s;
}button.animate-svg-path svg path {
  stroke: white;
  stroke-width: 1;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  transition: stroke-dashoffset 0.5s ease-in-out;
}
button.animate-svg-path:hover svg path {
  stroke-dashoffset: 0;
  fill: none;
}
button.animate-svg-rotate svg {
  transition: transform 0.6s ease-in-out;
}
button.animate-svg-rotate:hover svg {
  transform: rotate(360deg);
}
.counter-badge[data-v-a7f0db13] {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  height: 24px;
  width: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.loader[data-v-a7f0db13] {
  height: 1.25rem;
  width: 1.25rem;
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  border: 2px solid;
  border-top-color: transparent;
}
button[data-v-a7f0db13]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
[aria-busy=true][data-v-a7f0db13] {
  cursor: wait;
}
@keyframes shine-a7f0db13 {
0% {
    background-position: 200% center;
}
100% {
    background-position: -200% center;
}
}
.hover\:shine[data-v-a7f0db13]:hover {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% auto;
  animation: shine-a7f0db13 1.5s linear infinite;
}
[data-hover-animation=border][data-v-a7f0db13]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
[data-hover-animation=border][data-v-a7f0db13]:hover::before {
  opacity: 1;
}
.hover\:border-animation[data-v-a7f0db13] {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.hover\:border-animation[data-v-a7f0db13]:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
}
.hover\:underline-animation[data-v-a7f0db13] {
  position: relative;
  overflow: hidden;
}
.hover\:underline-animation[data-v-a7f0db13]:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.hover\:underline-animation[data-v-a7f0db13]:hover:after {
  transform: translateX(0);
}
.hover\:glow-animation[data-v-a7f0db13] {
  transition: text-shadow 0.3s ease;
}
.hover\:glow-animation[data-v-a7f0db13]:hover {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}
.hover\:slide-border-animation[data-v-a7f0db13] {
  position: relative;
  overflow: hidden;
}
.hover\:slide-border-animation[data-v-a7f0db13]:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.hover\:slide-border-animation[data-v-a7f0db13]:hover:before {
  transform: translateX(0);
}
.bg-black[data-hover-animation=border][data-v-a7f0db13]::before {
  border-color: theme("colors.black") !important;
}
[data-hover-animation=border][data-v-a7f0db13]::before {
  border-color: var(--border-color, #000000) !important;
}
.hover\:shadow-glow[data-v-a7f0db13] {
  transition: 0.5s ease all;
}
.hover\:shadow-glow[data-v-a7f0db13]:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}
.hover\:mystic-aura[data-v-a7f0db13] {
  outline: 0px solid;
  outline-color: rgba(0, 0, 0, 0.5);
  outline-offset: 0px;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.hover\:mystic-aura[data-v-a7f0db13]:hover {
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
}
.hover\:after\:scale-x-100[data-v-a7f0db13]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.hover\:after\:scale-x-100[data-v-a7f0db13]:hover::after {
  transform: scaleX(1);
}
.hover\:bg-halo[data-v-a7f0db13] {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.hover\:bg-halo[data-v-a7f0db13]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-100%);
  z-index: -1;
}
.hover\:bg-halo[data-v-a7f0db13]:hover::before {
  opacity: 1;
  transform: translateX(0);
}
@keyframes ripple-a7f0db13 {
0% {
    transform: scale(0);
    opacity: 1;
}
100% {
    transform: scale(2);
    opacity: 0;
}
}
.animate-ripple[data-v-a7f0db13] {
  animation: ripple-a7f0db13 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add these hover effect styles */
.hover-scale[data-v-a7f0db13]:hover {
  transform: scale(1.05);
}
.hover-slide[data-v-a7f0db13]:hover {
  transform: translateX(5px);
}
.hover-glow[data-v-a7f0db13]:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}
.hover-underline[data-v-a7f0db13]:hover::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  animation: underlineSlide-a7f0db13 0.3s ease-out;
}
@keyframes underlineSlide-a7f0db13 {
from {
    transform: scaleX(0);
}
to {
    transform: scaleX(1);
}
}
.multi-range-slider * {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
.multi-range-slider {
  display: flex;
  position: relative;
  border: solid 1px gray;
  border-radius: 10px;
  padding: 20px 10px;
  box-shadow: 1px 1px 4px black;
  flex-direction: column;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge,*/
}
.multi-range-slider .bar {
  display: flex;
}
.multi-range-slider .bar-left {
  width: 25%;
  background-color: #f0f0f0;
  border-radius: 10px 0px 0px 10px;
  box-shadow: inset 0px 0px 5px black;
  padding: 4px 0px;
}
.multi-range-slider .bar-right {
  width: 25%;
  background-color: #f0f0f0;
  border-radius: 0px 10px 10px 0px;
  box-shadow: inset 0px 0px 5px black;
}
.multi-range-slider .bar-inner {
  background-color: lime;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: space-between;
  position: relative;
  border: solid 1px black;
  justify-content: space-between;
  box-shadow: inset 0px 0px 5px black;
}
.multi-range-slider .bar-inner-left {
  width: 50%;
}
.multi-range-slider .bar-inner-right {
  width: 50%;
}
.multi-range-slider .thumb {
  background-color: red;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.multi-range-slider .thumb::before {
  content: "";
  background-color: white;
  position: absolute;
  width: 20px;
  height: 20px;
  border: solid 1px black;
  box-shadow: 0px 0px 3px black, inset 0px 0px 5px gray;
  border-radius: 50%;
  z-index: 1;
  margin: -8px;
  cursor: pointer;
}
.multi-range-slider .input-type-range:focus + .thumb::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 11px;
  height: 11px;
  z-index: 2;
  border-radius: 50%;
  border: dotted 1px black;
  box-shadow: 0px 0px 5px white, inset 0px 0px 10px black;
}
.multi-range-slider .caption {
  position: absolute;
  bottom: 35px;
  width: 2px;
  height: 2px;
  left: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  display: none;
}
.multi-range-slider .thumb .caption * {
  position: absolute;
  min-width: 30px;
  height: 30px;
  font-size: 75%;
  text-align: center;
  line-height: 30px;
  background-color: blue;
  border-radius: 15px;
  color: white;
  box-shadow: 0px 0px 5px black;
  padding: 0px 5px;
  white-space: nowrap;
}
.multi-range-slider .thumb:active .caption {
  display: flex;
}
.multi-range-slider .input-type-range:focus + .thumb .caption {
  display: flex;
}
.multi-range-slider .input-type-range {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.multi-range-slider .ruler {
  margin: 10px 0px -5px 0px;
  display: flex;
  /* display: none; */
  overflow: hidden;
}
.multi-range-slider .ruler .ruler-rule {
  border-left: solid 1px;
  border-bottom: solid 1px;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 5px 0px;
}
.multi-range-slider .ruler .ruler-rule:last-child {
  border-right: solid 1px;
}
.multi-range-slider .sub-ruler {
  margin: -2px 0px -5px 0px;
  display: flex; /*
display: none; */
}
.multi-range-slider .sub-ruler .ruler-sub-rule {
  border-left: solid 1px;
  border-bottom: solid 1px;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 3px 0px;
}
.multi-range-slider .sub-ruler .ruler-sub-rule:last-child {
  border-right: solid 1px;
}
.multi-range-slider .labels {
  display: flex;
  justify-content: space-between;
  padding: 0px;
  margin-top: 10px;
  margin-bottom: -20px;
  /* display: none; */
}
.multi-range-slider .label {
  font-size: 80%;
  display: flex;
  width: 1px;
  justify-content: center;
}
.multi-range-slider .label:first-child {
  justify-content: start;
}
.multi-range-slider .label:last-child {
  justify-content: end;
}
.multi-range-slider.zero-ranage-margin .thumb-left {
  right: 12px;
}
.multi-range-slider.zero-ranage-margin .thumb-right {
  left: 8px;
}
.multi-range-slider-black * {
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}
.multi-range-slider-black {
	display: flex;
	position: relative;
	background-color: black;
	border: solid 1px gray;
	padding: 30px 10px 25px 10px;
	flex-direction: column;
	color: white;
	-webkit-touch-callout: none; /* iOS Safari*/
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge,*/
}
.multi-range-slider-black .bar {
	display: flex;
}
.multi-range-slider-black .bar.active * {
	transition: none;
}
.multi-range-slider-black .bar-left {
	width: 25%;
	background-color: gray;
	border-radius: 10px 0px 0px 10px;
	box-shadow: inset 0px 0px 5px black;
	border: solid 1px black;
	padding: 5px 0px;
}
.multi-range-slider-black .bar-right {
	width: 25%;
	background-color: gray;
	border-radius: 0px 10px 10px 0px;
	box-shadow: inset 0px 0px 5px black;
	border: solid 1px black;
}
.multi-range-slider-black .bar-inner {
	background-color: lime;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	justify-content: space-between;
	position: relative;
	border: solid 1px black;
	justify-content: space-between;
	box-shadow: inset 0px 0px 5px black;
}
.multi-range-slider-black .bar-inner-left {
	width: 50%;
}
.multi-range-slider-black .bar-inner-right {
	width: 50%;
}
.multi-range-slider-black .thumb {
	background-color: red;
	position: relative;
	z-index: 1;
	cursor: pointer;
}
.multi-range-slider-black .thumb::before {
	content: '';
	background-color: white;
	position: absolute;
	width: 20px;
	height: 30px;
	border: solid 1px black;
	box-shadow: 0px 0px 5px black, inset 0px 0px 10px gray;
	border-radius: 7px;
	z-index: 1;
	margin: -10px;
	cursor: pointer;
}
.multi-range-slider-black .input-type-range:focus + .thumb::after {
	content: '';
	position: absolute;
	top: -6px;
	left: -6px;
	width: 12px;
	height: 22px;
	z-index: 2;
	border-radius: 7px;
	border: dotted 1px black;
	box-shadow: 0px 0px 5px white, inset 0px 0px 10px black;
}
.multi-range-slider-black .caption {
	position: absolute;
	bottom: 45px;
	width: 2px;
	height: 2px;
	left: 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: visible;
	/* display: none; */
}
.multi-range-slider-black .thumb .caption * {
	position: absolute;
	min-width: 30px;
	height: 30px;
	font-size: 75%;
	text-align: center;
	line-height: 30px;
	background-color: blue;
	border-radius: 15px;
	color: white;
	box-shadow: 0px 0px 5px black;
	padding: 0px 5px;
	white-space: nowrap;
}
.multi-range-slider-black .thumb:active .caption {
	display: flex;
}
.multi-range-slider-black .input-type-range:focus + .thumb .caption {
	display: flex;
}

.multi-range-slider-black .input-type-range {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}
.multi-range-slider-black .ruler {
	margin: 10px 0px -5px 0px;
	display: flex;
	overflow: hidden;
}
.multi-range-slider-black .ruler .ruler-rule {
	border-left: solid 1px;
	border-bottom: solid 1px;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 5px 0px;
}
.multi-range-slider-black .ruler .ruler-rule:last-child {
	border-right: solid 1px;
}

.multi-range-slider-black .sub-ruler {
	margin: -2px 0px -5px 0px;
	display: flex; /*
display: none; */
}
.multi-range-slider-black .sub-ruler .ruler-sub-rule {
	border-left: solid 1px;
	border-bottom: solid 1px;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 3px 0px;
}
.multi-range-slider-black .sub-ruler .ruler-sub-rule:last-child {
	border-right: solid 1px;
}

.multi-range-slider-black .labels {
	display: flex;
	justify-content: space-between;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: -20px;
	/* display:none; */
}
.multi-range-slider-black .label {
	font-size: 80%;
}
.multi-range-slider-black.zero-ranage-margin .thumb-left {
	right: 12px;
}
.multi-range-slider-black.zero-ranage-margin .thumb-right {
	left: 8px;
}
.multi-range-slider-bar-only * {
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}
.multi-range-slider-bar-only {
	display: flex;
	position: relative;
	border: none;
	border-radius: 0px;
	padding: 10px;
	box-shadow: none;
	flex-direction: column;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge,*/
}
.multi-range-slider-bar-only .bar {
	display: flex;
}
.multi-range-slider-bar-only .bar-left {
	width: 25%;
	background-color: #f0f0f0;
	border-radius: 10px 0px 0px 10px;
	box-shadow: inset 0px 0px 5px black;
	padding: 4px 0px;
}
.multi-range-slider-bar-only .bar-right {
	width: 25%;
	background-color: #f0f0f0;
	border-radius: 0px 10px 10px 0px;
	box-shadow: inset 0px 0px 5px black;
}
.multi-range-slider-bar-only .bar-inner {
	background-color: blue;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	justify-content: space-between;
	position: relative;
	border: solid 1px black;
	justify-content: space-between;
	box-shadow: inset 0px 0px 5px black;
}
.multi-range-slider-bar-only .bar-inner-left {
	width: 50%;
}
.multi-range-slider-bar-only .bar-inner-right {
	width: 50%;
}
.multi-range-slider-bar-only .thumb {
	background-color: red;
	position: relative;
	z-index: 1;
	cursor: pointer;
}
.multi-range-slider-bar-only .thumb::before {
	content: '';
	background-color: white;
	position: absolute;
	width: 20px;
	height: 20px;
	border: solid 1px black;
	box-shadow: 0px 0px 3px black, inset 0px 0px 5px gray;
	border-radius: 50%;
	z-index: 1;
	margin: -8px;
	cursor: pointer;
}
.multi-range-slider-bar-only .input-type-range:focus + .thumb::after {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	width: 11px;
	height: 11px;
	z-index: 2;
	border-radius: 50%;
	border: dotted 1px black;
	box-shadow: 0px 0px 5px white, inset 0px 0px 10px black;
}
.multi-range-slider-bar-only .caption {
	position: absolute;
	bottom: 35px;
	width: 2px;
	height: 2px;
	left: 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: visible;
	display: none;
}
.multi-range-slider-bar-only .thumb .caption * {
	position: absolute;
	min-width: 30px;
	height: 30px;
	font-size: 75%;
	text-align: center;
	line-height: 30px;
	background-color: blue;
	border-radius: 15px;
	color: white;
	box-shadow: 0px 0px 5px black;
	padding: 0px 5px;
	white-space: nowrap;
}
.multi-range-slider-bar-only .thumb:active .caption {
	display: flex;
}
.multi-range-slider-bar-only .input-type-range:focus + .thumb .caption {
	display: flex;
}
.multi-range-slider-bar-only .input-type-range {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

.multi-range-slider-bar-only .ruler {
	margin: 10px 0px -5px 0px;
	display: flex;
	display: none;
	overflow: hidden;
}
.multi-range-slider-bar-only .ruler .ruler-rule {
	border-left: solid 1px;
	border-bottom: solid 1px;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 5px 0px;
	display: none;
}
.multi-range-slider-bar-only .ruler .ruler-rule:last-child {
	border-right: solid 1px;
}

.multi-range-slider-bar-only .sub-ruler {
	margin: -2px 0px -5px 0px;
	display: flex;
	display: none;
}
.multi-range-slider-bar-only .sub-ruler .ruler-sub-rule {
	border-left: solid 1px;
	border-bottom: solid 1px;
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 3px 0px;
}
.multi-range-slider-bar-only .sub-ruler .ruler-sub-rule:last-child {
	border-right: solid 1px;
}

.multi-range-slider-bar-only .labels {
	display: flex;
	justify-content: space-between;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: -20px;
	display: none;
}
.multi-range-slider-bar-only .label {
	font-size: 80%;
	display: flex;
	width: 1px;
	justify-content: center;
}
.multi-range-slider-bar-only .label:first-child {
	justify-content: start;
}
.multi-range-slider-bar-only .label:last-child {
	justify-content: end;
}
.multi-range-slider-bar-only.zero-ranage-margin .thumb-left {
	right: 12px;
}
.multi-range-slider-bar-only.zero-ranage-margin .thumb-right {
	left: 8px;
}
.filters[data-v-dc95d8e0] {
  max-height: calc(100vh - 240px);
}
@media screen and (max-width: 768px) {
.filters[data-v-dc95d8e0] {
    max-height: calc(100vh - 170px);
}
}
.sort-by[data-v-dc95d8e0] {
  height: fit-content;
}@keyframes slideIn-7e535922 {
0% {
    width: 200px;
    height: 60px;
}
100% {
    width: 384px;
    height: 50vh;
}
}
@keyframes slideOut-7e535922 {
0% {
    width: 384px;
    height: 50vh;
    display: block;
}
100% {
    width: 200px;
    height: 60px;
    display: none;
}
}
.slideOut[data-v-7e535922] {
  display: none;
}
.filter-container[data-v-7e535922] {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}
.filter-container.slideIn[data-v-7e535922] {
  animation-name: slideIn-7e535922;
}
.filter-container.slideOut[data-v-7e535922] {
  animation-name: slideOut-7e535922;
}
.change-bg {
td[data-v-2ced32d9] {
    opacity: 50%;
}
}

.change-bg[data-v-ce540d51] {
  opacity: 50%;
}
@keyframes slideIn-963161b2 {
0% {
    width: 200px;
    height: 60px;
}
100% {
    width: 384px;
    height: 50vh;
}
}
@keyframes slideOut-963161b2 {
0% {
    width: 384px;
    height: 50vh;
    display: block;
}
100% {
    width: 200px;
    height: 60px;
    display: none;
}
}
.slideOut[data-v-963161b2] {
  display: none;
}
.filter-container[data-v-963161b2] {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}
.filter-container.slideIn[data-v-963161b2] {
  animation-name: slideIn-963161b2;
}
.filter-container.slideOut[data-v-963161b2] {
  animation-name: slideOut-963161b2;
}
.change-bg td[data-v-963161b2] {
  opacity: 50%;
}
.card .change-bg[data-v-963161b2] {
  opacity: 50%;
}
.floorplans.tablePopupWorksheet .vgt-responsive[data-v-963161b2] {
  overflow-x: auto !important;
}
.tablePopupWorksheet table.vgt-table td.\!pb-0[data-v-963161b2] {
  padding-bottom: 0 !important;
}.overlay[data-v-924df377] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.5);
}
.overlay .loader[data-v-924df377],
.overlay .loader[data-v-924df377]:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.overlay .loader[data-v-924df377] {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8-924df377 1.1s infinite linear;
  animation: load8-924df377 1.1s infinite linear;
}
@-webkit-keyframes load8-924df377 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@keyframes load8-924df377 {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
.overlay[data-v-924df377] {
  /* Dark theme */
}
.overlay[data-v-924df377] {
  /* Animations */
}
@keyframes pivot-924df377 {
from {
    transform: rotate(0);
}
to {
    transform: rotate(30deg);
}
}
@keyframes pulse-924df377 {
from, to {
    transform: scale(0.1);
}
50% {
    transform: scale(1);
}
}
.overlay img[data-v-924df377] {
  width: 100px;
}
@keyframes ldio-jgo24qe1hc-924df377 {
0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}
.overlay .ldio-jgo24qe1hc div[data-v-924df377] {
  position: absolute;
  animation: ldio-jgo24qe1hc-924df377 1s linear infinite;
  width: 69px;
  height: 69px;
  top: 34.5px;
  left: 34.5px;
  border-radius: 50%;
  box-shadow: 0 2.346px 0 0 #ffffff;
  transform-origin: 34.5px 35.673px;
}
.overlay .loadingio-spinner-eclipse-fhfii4ea6v[data-v-924df377] {
  width: 138px;
  height: 138px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.overlay .ldio-jgo24qe1hc[data-v-924df377] {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
  /* see note above */
}
.overlay .ldio-jgo24qe1hc div[data-v-924df377] {
  box-sizing: content-box;
}
/* Catches the press that dismisses the keyboard. Undimmed: the design leaves
   the page behind it at full brightness. */
.vk-layer[data-v-3e7afcf9] {
  position: fixed;
  inset: 0;
  /* Above the dialogs it is typed into. */
  z-index: 200;
}

/* 576 × 320, the frame's own size. Same glass as the menu, the media windows
   and the dialogs. */
.vk[data-v-3e7afcf9] {
  position: fixed;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 576px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #000000a6;
  backdrop-filter: blur(120px);
  -webkit-backdrop-filter: blur(120px);
  color: #fff;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  /* The browser must not claim the drag as a scroll of whatever is behind. */
  touch-action: none;
  cursor: grab;
}

/* Once dragged the panel is positioned by its own top/left, so the centring
   translate has to go or it would sit half a keyboard up and to the left. */
.vk.is-placed[data-v-3e7afcf9] {
  transform: none;
}
.vk.is-dragging[data-v-3e7afcf9] {
  cursor: grabbing;
}

/* 240 × 28, 16 down from the top of the panel. */
.vk__value[data-v-3e7afcf9] {
  display: block;
  box-sizing: border-box;
  width: 240px;
  height: 28px;
  margin: 16px auto 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  cursor: text;
}
.vk__value[data-v-3e7afcf9]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* 32 below the value line; rows sit 9 apart, keys 5. */
.vk__keys[data-v-3e7afcf9] {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 32px;
}
.vk__row[data-v-3e7afcf9] {
  display: flex;
  justify-content: center;
  gap: 5px;
}

/* 35 × 32, the design's key. The two wide ones carry their width inline. */
.vk__key[data-v-3e7afcf9] {
  display: flex;
  height: 32px;
  width: 35px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.vk__key[data-v-3e7afcf9]:hover {
  background: rgba(255, 255, 255, 0.16);
}
.vk__key[data-v-3e7afcf9]:active {
  background: rgba(255, 255, 255, 0.28);
}

/* Delete is the one key that spells its job out, and it is set smaller than
   the characters so the word sits comfortably on it. */
.vk__key.is-word[data-v-3e7afcf9] {
  font-size: 12px;
}

/* Divider full width, 15 under the last row, with Done on the right. */
.vk__foot[data-v-3e7afcf9] {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 73px;
  align-items: center;
  justify-content: flex-end;
  padding-right: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 80 × 36, near-black rather than the blue the send dialog's own button uses. */
.vk__done[data-v-3e7afcf9] {
  height: 36px;
  width: 80px;
  border: 0;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.vk__done[data-v-3e7afcf9]:hover {
  background: rgba(0, 0, 0, 0.9);
}
.vk-fade-enter-active[data-v-3e7afcf9],
.vk-fade-leave-active[data-v-3e7afcf9] {
  transition: opacity 0.15s ease;
}
.vk-fade-enter-from[data-v-3e7afcf9],
.vk-fade-leave-to[data-v-3e7afcf9] {
  opacity: 0;
}

/* Figma: radius 20, fill #FFF 5%, and a 1px inner-aligned gradient border
   #FFFFFF4D → #FFFFFF00. border-box keeps that 1px inside the tile's declared
   height rather than adding to it, which is what "inner" means in Figma. */
.tile[data-v-a937b33d] {
  box-sizing: border-box;
  position: relative;
  /* Entries that open a panel render as <button>, which unlike the <a> the
     others use does not stretch to its parent on its own. */
  width: 100%;
  display: flex;
  font: inherit;
  border-radius: 20px;
  background-color: #FFFFFF1A;
  /* border: 1px inset #FFFFFF4D; */
  color: #fff;
  transition: filter 0.2s ease;
  filter: brightness(1.45)
}
.tile[data-v-a937b33d]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* ضخامت border */
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    #FFFFFF4D 0%,
    #FFFFFF00 100%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  pointer-events: none;
}
.tile[data-v-a937b33d]:hover {
  filter: brightness(2.5);
}

/* Only the fill lifts on the current entry — the border keeps the same
   #FFFFFF4D → #FFFFFF00 ramp in every state. */
.tile.is-active[data-v-a937b33d] {
    filter: brightness(3.5);
}

/* Figma: 72px tall, 24px horizontal padding, label left / icon right. The
   label comes first in the DOM for screen readers; order flips it visually. */
.tile--row[data-v-a937b33d] {
  height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.tile--row .tile__icon[data-v-a937b33d] {
  order: 1;
}

/* Figma: 107px tall, icon stacked above the label. */
.tile--card[data-v-a937b33d] {
  height: 107px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* The strip the entries collapse into once a panel takes over the menu:
   icon-only squares, so the panel's content is what the eye lands on. The
   label is kept for assistive tech rather than removed. */
.tile--compact[data-v-a937b33d] {
  height: 56px;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}
.tile--compact .tile__label[data-v-a937b33d] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tile__icon[data-v-a937b33d] {
  flex-shrink: 0;
}

/* Figma: SF Pro Display 400, 16px, line-height 100%, uppercase, #FFFFFF. */
.tile__label[data-v-a937b33d] {
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  text-transform: uppercase;
}

/* Figma (Desktop, AMENITIES panel): a separate glass bar under the panel
   card, not a continuation of it — the card above is rounded all round and
   this sits clear of it with a gap, its own fill, blur and radius. */
.side-menu__strip[data-v-18777435] {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  /* margin-top: 8px; */
  padding: 14px 18px 18px;
  background: transparent;
}
.side-menu__strip > li[data-v-18777435] {
  display: flex;
  min-width: 0;
  flex: 1;
}

/* Gone on a phone. The panels are full-width sheets there, so this would be
   one menu sitting inside another — the thing the mobile design avoids by
   giving a sheet nothing but its grab handle to leave by (see SideMenu.vue).
   A sheet takes the whole width, so it also has nowhere to put six icons. */
@media (max-width: 768px) {
.side-menu__strip[data-v-18777435] {
    display: none;
}
}

.suite-detail__facts[data-v-cb75e9fa] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 0 0 4px;
  margin-top: 16px;
}
.suite-detail__fact[data-v-cb75e9fa] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
}
.suite-detail__fact dt[data-v-cb75e9fa] {
  display: flex;
  align-items: center;
}
.suite-detail__fact dd[data-v-cb75e9fa] {
  color: #fff;
}
.suite-detail__links[data-v-cb75e9fa] {
  margin-top: 12px;
}

/* Ruled, not boxed — a rule between rows, not around them, so the list reads
   as one continuous block rather than three separate controls. The first row
   skips it: the facts above already close off their own block, so a rule
   here would double up rather than separate anything. */
.suite-detail__link[data-v-cb75e9fa] {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  line-height: 1;
}
.suite-detail__link[data-v-cb75e9fa]:first-child {
  border-top: none;
}
.suite-detail__link-icon[data-v-cb75e9fa] {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Pushes the arrow to the far edge whatever the label's length. */
.suite-detail__link-label[data-v-cb75e9fa] {
  margin-right: auto;
}

/* The only thing on the row that takes a click. */
.suite-detail__link-go[data-v-cb75e9fa] {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}
.suite-detail__link-go[data-v-cb75e9fa]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.26);
}

/* Nothing behind this one for this unit — the row still stands, so the list
   keeps the same shape on every card, but its arrow says it leads nowhere. */
.suite-detail__link-go[data-v-cb75e9fa]:disabled {
  cursor: default;
  opacity: 0.3;
}
.sr-only[data-v-cb75e9fa] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Above MobileMenuSheet's own sheet (125) and trigger (130): this page is
   reached *from* a panel (Suites' Show More, a media row's arrow, …) and has
   to sit over it, not behind it. */
.mobile-page[data-v-4ccf7b18] {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  flex-direction: column;
  background: #0a0a0c;
  color: #fff;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

/* See the `raised` prop above. */
.mobile-page.is-raised[data-v-4ccf7b18] {
  z-index: 150;
}

/* Figma's `nav-bar`, the same row the MobileMenuSheet trigger sits on: 42px
   tall at `top: 44` (the status bar's own height, here the safe-area inset),
   padding 4 / 16. */
.mobile-page__bar[data-v-4ccf7b18] {
  display: flex;
  height: 42px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 16px;
  margin-top: env(safe-area-inset-top, 0px);
}
.mobile-page__back[data-v-4ccf7b18],
.mobile-page__menu[data-v-4ccf7b18] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 0;
  background: none;
  padding: 4px 0;
  color: #fff;
  cursor: pointer;
}
.mobile-page__back[data-v-4ccf7b18] {
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}
.mobile-page__back svg[data-v-4ccf7b18] {
  flex-shrink: 0;
}
.mobile-page__back span[data-v-4ccf7b18] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same look as MobileMenuSheet's own trigger — this is the same control,
   just reachable from a page that has hidden that one behind it. */
.mobile-page__menu[data-v-4ccf7b18] {
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  text-transform: uppercase;
}
.mobile-page__menu svg[data-v-4ccf7b18] {
  height: 16px;
  width: 16px;
}

/* Close-only: floats over the content itself (which runs the full height of
   the screen, no bar reserving space above it — see `.mobile-page__content`
   below), at the same corner and inset the trigger/MENU controls elsewhere
   use for their own safe-area clearance. */
.mobile-page__close[data-v-4ccf7b18] {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 16px;
  z-index: 1;
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mobile-page__close[data-v-4ccf7b18]:hover {
  background: rgba(255, 255, 255, 0.26);
}
.mobile-page__content[data-v-4ccf7b18] {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-page__content.is-fill[data-v-4ccf7b18] {
  overflow: hidden;
}

/* Figma `Frame 348`: the column itself — 12px in from the bar above, 32px
   between the unit block and the model list. */
.detail[data-v-814ac238] {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 24px);
}

/* `Frame 345`: 16px side margins, 12px between everything in it. */
.detail__unit[data-v-814ac238],
.detail__more[data-v-814ac238] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
.detail__eyebrow[data-v-814ac238] {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #e3d5bc;
}
.detail__head[data-v-814ac238] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.detail__title[data-v-814ac238] {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

/* `Frame 357`: the pair to the right of the title, 36 tall, 8 apart. */
.detail__actions[data-v-814ac238] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}
.detail__compare[data-v-814ac238] {
  display: flex;
  height: 36px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.detail__compare[data-v-814ac238]:hover {
  background: rgba(255, 255, 255, 0.18);
}
.detail__fav[data-v-814ac238] {
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.detail__fav.is-on[data-v-814ac238],
.detail__fav[data-v-814ac238]:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---- the card treatment (`Frame 212` / `Frame 213`) -------------------- */

/* Radial-gradient fill and a 1px gradient border, the same pair the suite
   cards in the list carry — see SuiteCard, where the border is also a masked
   pseudo-element because a gradient cannot be a `border-color`. */
.detail__stats[data-v-814ac238],
.detail__media[data-v-814ac238] {
  position: relative;
  margin: 0;
  border-radius: 20px;
  background: radial-gradient(
    49.77% 49.77% at 50% 50%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}
.detail__stats[data-v-814ac238]::before,
.detail__media[data-v-814ac238]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* `Frame 212`: padding 16/8 around a `Frame 275` row that spreads four cells
   with `space-between` inside its own 4px side padding. */
.detail__stats[data-v-814ac238] {
  display: flex;
  justify-content: space-between;
  padding: 16px 12px;
}
.detail__stat[data-v-814ac238] {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

/* The hairline between cells, rather than a border on each — only the gaps
   between the four get one (`Vector 45` / `Vector 46` in the file). */
.detail__stat.has-rule[data-v-814ac238] {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.detail__stat-value[data-v-814ac238] {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}

/* `Frame 349` carries one 50% opacity for the icon and its word together. */
.detail__stat-label[data-v-814ac238] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  opacity: 0.5;
}
.detail__stat-label svg[data-v-814ac238] {
  height: 14px;
  width: 14px;
}

/* ---- the plan (`707 807 2`) ------------------------------------------- */
.detail__plan[data-v-814ac238] {
  position: relative;
  display: block;
  height: 232px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f2ec;
  cursor: pointer;
}
.detail__plan img[data-v-814ac238] {
  display: block;
  height: 100%;
  width: 100%;
  /* Figma's own `Scale: Crop`. */
  object-fit: cover;
}
.detail__plan-expand[data-v-814ac238] {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  height: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}

/* ---- the media rows (`Frame 213`) ------------------------------------- */
.detail__media[data-v-814ac238] {
  padding: 8px;
}
.detail__media-row[data-v-814ac238] {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px;
  font-size: 14px;
  line-height: 1;
}

/* Figma's 12px gap between the two rows reads as a rule between them. */
.detail__media-row + .detail__media-row[data-v-814ac238] {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.detail__media-icon[data-v-814ac238] {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
}
.detail__media-label[data-v-814ac238] {
  margin-right: auto;
}
.detail__media-go[data-v-814ac238] {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}
.detail__media-go[data-v-814ac238]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.26);
}
.detail__media-go[data-v-814ac238]:disabled {
  cursor: default;
  opacity: 0.3;
}

/* ---- Download PDF ----------------------------------------------------- */
.detail__pdf[data-v-814ac238] {
  display: flex;
  align-self: flex-end;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}
.detail__pdf svg[data-v-814ac238] {
  flex-shrink: 0;
}

/* ---- More from this model (`Frame 347`) -------------------------------- */
.detail__more-head[data-v-814ac238] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail__more-title[data-v-814ac238] {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
.detail__more-count[data-v-814ac238] {
  display: flex;
  height: 20px;
  min-width: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}

/* The same card as the Suites list's own, so a unit looks like a unit
   wherever it turns up. */
.detail__sibling[data-v-814ac238] {
  position: relative;
  padding: 16px;
  border-radius: 16px;
  background: radial-gradient(
    49.77% 49.77% at 50% 50%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}
.detail__sibling[data-v-814ac238]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.detail__sibling-head[data-v-814ac238] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.detail__sibling-name[data-v-814ac238] {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.detail__sibling-stats[data-v-814ac238] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 18px 0 0;
}
.detail__sibling-stats .detail__stat[data-v-814ac238] {
  flex-direction: row;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
}
.detail__sibling-stats .detail__stat[data-v-814ac238]:first-child {
  padding-left: 0;
}
.detail__sibling-value[data-v-814ac238] {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
}
.detail__view[data-v-814ac238] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 8px 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.detail__view[data-v-814ac238]:hover {
  background: rgba(255, 255, 255, 0.16);
}
.detail__view-go[data-v-814ac238] {
  display: flex;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.detail__view-go svg[data-v-814ac238] {
  height: 12px;
  width: 12px;
}
.sr-only[data-v-814ac238] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.suite[data-v-b0aed286] {
  box-sizing: border-box;
  position: relative;
  padding: 8px;
  border-radius: 20px;
  background: radial-gradient(49.77% 49.77% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 100%);

  /* background: linear-gradient(
      140deg,
      #08080825 0%,
      #35353518 30%,
      #96959518 100%
    )
    border-box; */
  color: #fff;
  filter: brightness(1.45);
}
.suite[data-v-b0aed286]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.suite__head[data-v-b0aed286] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.suite__name[data-v-b0aed286] {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

/* Actions row: Figma "Frame 342", 80 hug x 36 hug, gap 8 — the compare
   (maximize) button and the favourite heart, both the same 36x36 pill. */
.suite__actions[data-v-b0aed286] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}
.suite__icon-btn[data-v-b0aed286] {
  position: relative;
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ffffff1a;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Figma's 153.43° gradient ring (#FFFFFF 30% → transparent). `border-image`
   cannot follow a border-radius, so it is drawn as a masked ::before. */
.suite__icon-btn[data-v-b0aed286]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    153.43deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(102, 102, 102, 0) 83.33%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.suite__icon-btn[data-v-b0aed286]:hover,
.suite__fav.is-on[data-v-b0aed286] {
  background: rgba(255, 255, 255, 0.18);
}

/* Three evenly spread columns rather than a tight row, so the figures line up
   down the list even when one is two digits and the next is one. */
.suite__facts[data-v-b0aed286] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  padding: 0 0 0 4px;
}
.suite__fact[data-v-b0aed286] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
}
.suite__fact dt[data-v-b0aed286] {
  display: flex;
  align-items: center;
}
.suite__fact dd[data-v-b0aed286] {
  color: #fff;
}
/* ---- Show More detail -------------------------------------------------- */

/* No margin: the height tween has to carry every pixel this block occupies,
   and a margin sits outside that box — it would leave a gap hanging under the
   figures while the drawer is still closed. */
.suite__detail[data-v-b0aed286] {
  padding-top: 2px;
}
.suite__more[data-v-b0aed286] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.suite__more[data-v-b0aed286]:hover {
  background: rgba(255, 255, 255, 0.16);
}
.suite__chevron[data-v-b0aed286] {
  display: flex;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: #000;
  transition: transform 0.25s ease;
}
.suite__chevron.is-up[data-v-b0aed286] {
  transform: rotate(180deg);
}
.sr-only[data-v-b0aed286] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Mobile ----------------------------------------------------------- */

/* Figma `suites-mobile` (710:2903), `Frame 212`: tighter padding, a bigger
   radius, and a more visible fill/border than the desktop card carries — a
   sheet's cards read differently against its own translucent surface than
   the render behind the desktop card. */
@media (max-width: 768px) {
.suite[data-v-b0aed286] {
    padding: 8px;
    border-radius: 20px;
    background: radial-gradient(
      49.77% 49.77% at 50% 50%,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 100%
    );
}
.suite[data-v-b0aed286]::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 100%
    );
}

  /* Four figures spread across the full width (space-between) rather than
     three in equal columns — the fourth being the area this breakpoint adds
     (see the template). */
.suite__facts[data-v-b0aed286] {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding: 0 4px;
}

  /* Figma: 107 hug x 34 hug, radius 24, padding 8/8/8/16, gap 8, fill
     #FFFFFF 10% — no border, unlike the desktop pill. */
.suite__more[data-v-b0aed286] {
    margin-top: 16px;
    padding: 8px 8px 8px 16px;
    border: 0;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
}
}

.send[data-v-4a85d1eb] {
  /* The accent the mobile design gives the send button and a ticked item.
     Desktop keeps the ported blue below — no desktop frame has been drawn
     with this colour, so nothing here changes what that one looks like. */
  --send-accent: #5d2ce5;

  position: fixed;
  inset: 0;
  /* Over the menu it was opened from and over any floorplan windows still on
     screen — it is a dialog, so nothing should sit on top of it. */
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.35);
}

/* Same glass as the menu and the media windows. */
.send__panel[data-v-4a85d1eb] {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 640px;
  /* The form, the spinner and the confirmation all stand in the same box, so
     the panel does not resize under the user between them. */
  min-height: 576px;
  max-height: 100%;
  flex-direction: column;
  overflow: hidden;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #000000a6;
  backdrop-filter: blur(120px);
  -webkit-backdrop-filter: blur(120px);
  color: #fff;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

/* No box of its own here: the heading, the fields and the button are the
   panel's own flex children, exactly as they were before the wrapper was
   added for mobile (where it becomes a real card — see the media query). */
.send__card[data-v-4a85d1eb] {
  display: contents;
}

/* Mobile's field label; desktop leaves the field to its placeholder. */
.send__fields-label[data-v-4a85d1eb] {
  display: none;
}
.send__close[data-v-4a85d1eb] {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  display: flex;
  height: 34px;
  width: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.send__close[data-v-4a85d1eb]:hover {
  background: rgba(255, 255, 255, 0.26);
}
.send__head[data-v-4a85d1eb] {
  flex: none;
  margin-top: 44px;
  text-align: center;
}
.send__title[data-v-4a85d1eb] {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}
.send__lede[data-v-4a85d1eb] {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #FFFFFF;
}

/* The only part that scrolls. */
.send__body[data-v-4a85d1eb] {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  margin-top: 40px;
  padding: 0 32px;
}
.send__fields[data-v-4a85d1eb] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.send__field[data-v-4a85d1eb] {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.send__field input[data-v-4a85d1eb] {
  width: 100%;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  text-align: center;
  outline: none;
}
.send__field input[data-v-4a85d1eb]::placeholder {
  color: #FFFFFF;
}

/* Red-ringed, as the old app draws it. */
.send__remove[data-v-4a85d1eb] {
  display: flex;
  height: 24px;
  width: 24px;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  padding: 0;
  border: 1px solid #e5484d;
  border-radius: 999px;
  background: transparent;
  color: #e5484d;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.send__remove[data-v-4a85d1eb]:hover {
  background: rgba(229, 72, 77, 0.18);
}
.send__add-row[data-v-4a85d1eb] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.send__add[data-v-4a85d1eb] {
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.send__add[data-v-4a85d1eb]:hover {
  background: rgba(255, 255, 255, 0.14);
}
.send__hint[data-v-4a85d1eb] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.send__error[data-v-4a85d1eb] {
  margin-top: 16px;
  font-size: 12px;
  text-align: center;
  color: #ff9a8b;
}
.send__items[data-v-4a85d1eb] {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.send__items-title[data-v-4a85d1eb] {
  font-size: 16px;
  font-weight: 500;
}
.send__items-empty[data-v-4a85d1eb] {
  padding: 14px 0;
  font-size: 13px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}
.send__cats[data-v-4a85d1eb] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.send__cat[data-v-4a85d1eb] {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.send__cat-head[data-v-4a85d1eb] {
  display: flex;
  align-items: center;
}

/* One control for the row's checkbox and its label, so a tap anywhere along
   the name ticks it. */
.send__tick[data-v-4a85d1eb] {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.send__box[data-v-4a85d1eb] {
  display: flex;
  height: 18px;
  width: 18px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  color: #16171a;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.send__box.is-checked[data-v-4a85d1eb],
.send__box.is-partial[data-v-4a85d1eb] {
  border-color: #fff;
  background: #fff;
}
.send__box[data-v-4a85d1eb] svg {
  height: 13px;
  width: 13px;
}
.send__cat-label[data-v-4a85d1eb] {
  font-size: 14px;
  font-weight: 500;
}
.send__cat-toggle[data-v-4a85d1eb] {
  display: flex;
  height: 40px;
  width: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.send__cat-toggle.is-open[data-v-4a85d1eb] {
  transform: rotate(180deg);
}
.send__files[data-v-4a85d1eb] {
  display: flex;
  flex-direction: column;
  margin: 0 8px 8px;
  padding: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  list-style: none;
}
.send__file + .send__file[data-v-4a85d1eb] {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.send__file-name[data-v-4a85d1eb] {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.send__foot[data-v-4a85d1eb] {
  display: flex;
  flex: none;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.send__submit[data-v-4a85d1eb] {
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: #2f6df6;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}
.send__submit[data-v-4a85d1eb]:hover:not(:disabled) {
  background: #4a81ff;
}
.send__submit[data-v-4a85d1eb]:disabled {
  cursor: default;
  opacity: 0.45;
}

/* The sending and sent states stand in the same box as the form, so the panel
   does not resize under the user between them. */
.send__state[data-v-4a85d1eb] {
  display: flex;
  min-height: 520px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.send__state-title[data-v-4a85d1eb] {
  margin-top: 26px;
  font-size: 20px;
  font-weight: 400;
}
.send__state-note[data-v-4a85d1eb] {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* Stepped, not smooth: the bars are meant to click round one position at a
   time, which is what makes it read as this indicator rather than a spinner. */
.send__spinner[data-v-4a85d1eb] {
  height: 56px;
  width: 56px;
  animation: send-spin-4a85d1eb 1s steps(12, end) infinite;
}
@keyframes send-spin-4a85d1eb {
to {
    transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.send__spinner[data-v-4a85d1eb] {
    animation-duration: 3s;
}
}
.send__mark[data-v-4a85d1eb] {
  display: flex;
  height: 72px;
  width: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: #16171a;
}
.send__mark svg[data-v-4a85d1eb] {
  height: 42px;
  width: 42px;
}

/* Full width along the bottom of the panel, as the reference has it. */
.send__done[data-v-4a85d1eb] {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  padding: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.send__done[data-v-4a85d1eb]:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ───────────────────────────────────────────────────────────────────────────
   Mobile, at the app's 768px breakpoint (MENU_MOBILE_MAX_WIDTH).

   The design does not centre a dialog on a phone — it gives the send a screen:
   the form on a rounded card at the top, and the item picker on the page
   below it rather than inside the form. Lengths are the design's, at 390pt
   wide: a 16px page gutter, and 16px again inside the card, which is why the
   picker's rows line up with the card's text rather than with its edge. */
@media (max-width: 768px) {
.send[data-v-4a85d1eb] {
    align-items: stretch;
    padding: 0;
    /* Opaque: it covers the favourites screen outright rather than tinting
       it, so there is nothing behind for a veil to show through. */
    background: #0a0a0c;
}

  /* The page. It is what scrolls — the card and the picker travel together,
     which is what puts the picker "below" the form rather than after it in a
     second scrolling area. */
.send__panel[data-v-4a85d1eb] {
    min-height: 0;
    max-width: none;
    overflow-y: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px
      calc(env(safe-area-inset-bottom, 0px) + 24px);
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.send__card[data-v-4a85d1eb] {
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    border-radius: 16px;
    background: #1c1c1e;
}

  /* Into the card's top right corner: 16px of page gutter plus 12px inside
     the card. It scrolls with the card — it belongs to it, not to the
     screen. */
.send__close[data-v-4a85d1eb] {
    top: calc(env(safe-area-inset-top, 0px) + 24px);
    right: 28px;
    height: 32px;
    width: 32px;
    background: rgba(255, 255, 255, 0.12);
}

  /* Ranged left under the close, not centred over the panel. */
.send__head[data-v-4a85d1eb] {
    margin-top: 0;
    padding-right: 40px;
    text-align: left;
}
.send__title[data-v-4a85d1eb] {
    font-size: 19px;
    font-weight: 600;
}
.send__lede[data-v-4a85d1eb] {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
}
.send__body[data-v-4a85d1eb] {
    flex: none;
    overflow: visible;
    margin-top: 20px;
    padding: 0;
}
.send__fields-label[data-v-4a85d1eb] {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.send__fields[data-v-4a85d1eb] {
    gap: 12px;
}

  /* A filled, bordered field rather than desktop's centred underline. */
.send__field input[data-v-4a85d1eb] {
    height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 15px;
    text-align: left;
}
.send__remove[data-v-4a85d1eb] {
    margin-bottom: 12px;
}

  /* The button owns the width of the card here, so there is no row to range
     it to the end of and no rule to hang it under. */
.send__foot[data-v-4a85d1eb] {
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
}
.send__submit[data-v-4a85d1eb] {
    width: 100%;
    padding: 15px 0;
    border-radius: 12px;
    background: var(--send-accent);
    font-size: 15px;
    font-weight: 600;
}
.send__submit[data-v-4a85d1eb]:hover:not(:disabled) {
    background: var(--send-accent);
}

  /* The picker, on the page under the card. Its own 16px matches the card's
     inner padding, so its rows sit on the same line as the card's text. */
.send__sheet-items[data-v-4a85d1eb] {
    padding: 0 16px;
    margin-top: 32px;
}
.send__sheet-title[data-v-4a85d1eb] {
    font-size: 16px;
    font-weight: 600;
}
.send__sheet-list[data-v-4a85d1eb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.send__sheet-tick[data-v-4a85d1eb] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

  /* Round here, where the desktop picker's is a square with a white fill. */
.send__dot[data-v-4a85d1eb] {
    display: flex;
    height: 20px;
    width: 20px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease;
}
.send__dot.is-checked[data-v-4a85d1eb],
  .send__dot.is-partial[data-v-4a85d1eb] {
    border-color: var(--send-accent);
    background: var(--send-accent);
}
.send__dot[data-v-4a85d1eb] svg {
    height: 12px;
    width: 12px;
}

  /* The two states after the form: they no longer have to stand in a fixed
     box, since the page they are on is as tall as the screen either way. */
.send__state[data-v-4a85d1eb] {
    min-height: 70dvh;
}
.send__done[data-v-4a85d1eb] {
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    left: 16px;
}
}
.send-fade-enter-active[data-v-4a85d1eb],
.send-fade-leave-active[data-v-4a85d1eb] {
  transition: opacity 0.2s ease;
}
.send-fade-enter-from[data-v-4a85d1eb],
.send-fade-leave-to[data-v-4a85d1eb] {
  opacity: 0;
}

/* Transparent for the same reason SuitesPanel is: the glass belongs to
   .side-menu, and a second blurred layer inside it reads as a card within a
   card. */
.favourites[data-v-d8dbbb9b] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  backdrop-filter: blur(124px);
  background: #00000033;
  /* A card of its own, rounded all round — the nav strip is a separate bar
     below it (see SideMenuStrip). */
  border-radius: 20px;
}
.favourites__head[data-v-d8dbbb9b] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 24px;
}
.favourites__title[data-v-d8dbbb9b] {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}
.favourites__count[data-v-d8dbbb9b] {
  display: flex;
  min-width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}

/* Mobile's heading second line — the media query below is the only place it
   is shown. */
.favourites__lede[data-v-d8dbbb9b] {
  display: none;
}

/* Pushed to the far end of the heading row, mirroring the entry it replaced. */
.favourites__icon[data-v-d8dbbb9b] {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.9);
}

/* The list is the only thing that scrolls — the heading and the send bar stay
   put while the cards move between them. */
.favourites__list[data-v-d8dbbb9b] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 0 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.favourites__list[data-v-d8dbbb9b]::-webkit-scrollbar {
  width: 4px;
}
.favourites__list[data-v-d8dbbb9b]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}
.favourites__empty[data-v-d8dbbb9b] {
  padding: 24px 4px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

/* Held against the bottom of the panel, where the Suites drawer keeps its
   SEARCH bar. */
.favourites__send[data-v-d8dbbb9b] {
  flex-shrink: 0;
  margin-top: auto;
  padding: 6px calc(var(--menu-inset-x, 18px) - 2px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.favourites__send-button[data-v-d8dbbb9b] {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.favourites__send-button[data-v-d8dbbb9b]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

/* Nothing hearted, nothing to mail. */
.favourites__send-button[data-v-d8dbbb9b]:disabled {
  cursor: default;
  opacity: 0.45;
}
.favourites__send-label[data-v-d8dbbb9b] {
  margin-right: auto;
  font-size: 15px;
  line-height: 1;
}
.favourites__send-go[data-v-d8dbbb9b] {
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Mobile ----------------------------------------------------------- */

/* Unlike SuitesPanel, this one is not a sheet that hugs its content: the
   design gives Favourites the whole screen (MobileMenuSheet's `.is-full`),
   so it reads as a page — heading at the top, cards filling the middle, the
   send bar riding the bottom edge. Lengths are the design's, at 390pt wide. */
@media (max-width: 768px) {
  /* No surface of its own here, same as SuitesPanel: this tint and blur sit
     on top of the sheet's own fill, which left everything below the grab
     handle a shade darker than the handle strip above it — the two read as
     two separate slabs rather than one sheet. */
.favourites[data-v-d8dbbb9b] {
    flex: 1 1 auto;
    border-radius: 0;
    /* The screen behind it is already this colour and opaque; a second glass
       layer over it only costs frames. */
    backdrop-filter: none;
    background: none;
}
.favourites__head[data-v-d8dbbb9b] {
    display: block;
    /* Level with the MENU trigger, which is fixed at the safe area + 4px with
       8px of padding of its own (MobileMenuSheet). The sheet has already
       applied the safe-area inset, so this is measured from there. */
    padding: 10px 16px 0;
}
.favourites__title[data-v-d8dbbb9b] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.favourites__lede[data-v-d8dbbb9b] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.5);
}

  /* Both belong to the drawer's one-line header; the heading above says the
     same things with more room. */
.favourites__count[data-v-d8dbbb9b],
  .favourites__icon[data-v-d8dbbb9b] {
    display: none;
}
.favourites__list[data-v-d8dbbb9b] {
    /* Takes the screen's leftover height and scrolls inside it, rather than
       sizing to its content the way a hugging sheet needs. */
    flex: 1 1 auto;
    gap: 12px;
    padding: 20px 16px 0;
}

  /* Off the bottom edge rather than flush against it, and clear of the home
     indicator — the design floats it over the end of the list. */
.favourites__send[data-v-d8dbbb9b] {
    flex-shrink: 0;
    margin: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
    padding: 6px;
}
}

.group[data-v-07658155] {
  box-sizing: border-box;
  position: relative;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.group__head[data-v-07658155] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.group__icon[data-v-07658155] {
  flex-shrink: 0;
  opacity: 0.8;
}
.group__title[data-v-07658155] {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.group__all[data-v-07658155] {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  background: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.group__check[data-v-07658155] {
  display: flex;
  height: 18px;
  width: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.group__check.is-on[data-v-07658155] {
  border-color: #2f6feb;
  background: #2f6feb;
}
.group__body[data-v-07658155] {
  margin-top: 16px;
}

/* Dimmed and inert, but still laid out — see the note on the Price group in
   SuiteFilterPanel. */
.group.is-disabled[data-v-07658155] {
  opacity: 0.4;
}
.group.is-disabled .group__body[data-v-07658155],
.group.is-disabled .group__all[data-v-07658155] {
  pointer-events: none;
}

.pills[data-v-3a7a667d] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pills__cell[data-v-3a7a667d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pills__pill[data-v-3a7a667d] {
  display: flex;
  height: 38px;
  width: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.pills__pill[data-v-3a7a667d]:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Selected inverts to a solid white pill, as in the design. */
.pills__pill.is-on[data-v-3a7a667d] {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.pills__dot[data-v-3a7a667d] {
  height: 7px;
  width: 7px;
  border-radius: 50%;
}

.range[data-v-ececc415] {
  padding-top: 4px;
}

/* Absolutely placed so each label tracks its own handle rather than sitting
   at a fixed end of the row. Inset from the track's own edges because each
   label is centred on its handle — at 0% and 100% half of it would otherwise
   hang outside the card, which is what made the drawer wider than its box. */
.range__values[data-v-ececc415] {
  position: relative;
  height: 16px;
  margin: 0 24px;
  font-size: 12px;
  color: #fff;
}
.range__values span[data-v-ececc415] {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.range__track[data-v-ececc415] {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}

/* The unfilled rail. */
.range__track[data-v-ececc415]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}
.range__fill[data-v-ececc415] {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}

/* Both inputs sit on top of each other; `pointer-events: none` on the input
   itself with the thumb re-enabled means a click between the handles does
   not jump whichever input happens to be on top. */
.range__track input[data-v-ececc415] {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  height: 20px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range__track input[data-v-ececc415]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  pointer-events: auto;
}
.range__track input[data-v-ececc415]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  pointer-events: auto;
}
.range__track input[data-v-ececc415]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid #2f6feb;
  outline-offset: 2px;
}
.range__ends[data-v-ececc415] {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.filters[data-v-bb0c888f] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0 4px;
}

/* Transparent on purpose. The glass — blur, tint, radius — belongs to
   .side-menu alone; giving this its own layer as well stacked a second
   backdrop-filter inside the first, which read as a separate card sitting
   in the menu rather than a section of it, and made the panel's fade-in pop
   as the two layers re-composited. */
.suites[data-v-5edc4b0e] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
   
  background: #0000001a;
  /* A card of its own, rounded all round — the nav strip is a separate bar
     below it (see SideMenuStrip). */
  border-radius: 20px;
}
.suites__head[data-v-5edc4b0e] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 24px;
  transition: opacity 0.3s ease;
}

/* The filter drawer takes the panel over, so the heading it covers recedes
   rather than competing with it — as in the design, where SUITES sits greyed
   above the open SEARCH card. */
.suites__head.is-dimmed[data-v-5edc4b0e] {
  opacity: 0.45;
}
.suites__title[data-v-5edc4b0e] {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}
.suites__count[data-v-5edc4b0e] {
  display: flex;
  min-width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}

/* Pushed to the far end of the heading row, mirroring the entry it replaced. */
.suites__icon[data-v-5edc4b0e] {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.9);
}
.suites__search[data-v-5edc4b0e] {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  margin: 0 14px;
  padding: 0 14px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}
.suites__search-icon[data-v-5edc4b0e] {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
}
.suites__search input[data-v-5edc4b0e] {
  min-width: 0;
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  outline: none;
}
.suites__search input[data-v-5edc4b0e]::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.suites__clear[data-v-5edc4b0e] {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}
.suites__chips[data-v-5edc4b0e] {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 14px 0;
}
.suites__chip[data-v-5edc4b0e] {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 6px 10px 6px 10px;
  border-radius: 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.suites__chip-remove[data-v-5edc4b0e] {
  display: flex;
  height: 18px;
  width: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.suites__chip-remove[data-v-5edc4b0e]:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* The list is the only thing that scrolls — the heading, the search field and
   the filter bar stay put while the suites move between them. */
.suites__list[data-v-5edc4b0e] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 0 18px 0 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* The drawer's open/close tween changes the panel's height every frame, and
   every one of those frames would otherwise re-lay-out all ~112 cards. These
   two keep that cost flat: `contain` stops a card's internal layout escaping
   to its siblings, and `content-visibility` lets the browser skip layout and
   paint for the cards scrolled out of view entirely. `contain-intrinsic-size`
   is the placeholder height a skipped card reports, so the scrollbar still
   reflects the whole list — it is the resting height of one card. */
.suites__list > li[data-v-5edc4b0e] {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 118px;
}
.suites__list[data-v-5edc4b0e]::-webkit-scrollbar {
  width: 4px;
}
.suites__list[data-v-5edc4b0e]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

/* Zero-height would never intersect the observer's root, so it needs enough
   box to be seen crossing the boundary. */
.suites__sentinel[data-v-5edc4b0e] {
  height: 1px;
  flex-shrink: 0;
}
.suites__empty[data-v-5edc4b0e] {
  padding: 24px 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Breaks out of the menu's own side padding to sit flush with its outer
   edges — the negative margin matches --menu-inset-x, set once on .side-menu
   itself, so this doesn't hardcode that value a second time here. Flush on
   top too: no gap between the last suite card and this bar. */
/* The whole search control — its bar and, once open, the filter groups
   beneath it — is this one box. Opening grows it upward from the bottom of
   the panel, which is what makes it read as the SEARCH button itself getting
   taller instead of a second card stacking above it. */
.suites__filters[data-v-5edc4b0e] {
  display: flex;
  /* Shrinkable on purpose: with `flex-shrink: 0` the open drawer kept its
     full content height and pushed its own bottom edge past the menu card.
     It can shrink because the inner list scrolls; the bar below sets the
     floor, so the closed state is unaffected. */
  flex-shrink: 1;
  flex-direction: column;
  /* Bounded by the space the panel actually has rather than a slice of the
     viewport: a vh cap stopped the drawer well short of the SUITES header on
     tall windows and would have overflowed it on short ones. `.suites` has a
     definite height, so 100% here is exactly "up to the top of the list". */
  max-height: 100%;
  min-height: 0;
  /* Holds the control against the bottom of the panel. Without it, hiding the
     card list on open removed the only thing keeping it down there and the
     whole control jumped to sit under the heading before the tween had run —
     which is what made the bar appear to arrive from the top. */
  margin-top: auto;
  /* margin: 0 calc(var(--menu-inset-x, 18px) * -1); */
  padding: 6px calc(var(--menu-inset-x, 18px) - 2px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* The row that is always visible: it keeps the collapsed bar's height, so
   the closed state is unchanged. */
.suites__filters-bar[data-v-5edc4b0e] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
  min-height: 56px;
}

/* Takes whatever height the control has left after its bar, and scrolls
   inside that. `overflow-x: hidden` because the vertical scrollbar eats a few
   pixels of the content box, which was otherwise enough to make the groups
   overflow sideways and the drawer scroll horizontally. */
.suites__filters .filters[data-v-5edc4b0e] {
  /* Not `flex: 1`: flex-grow stretches the box to fill the row regardless of
     its `height`, so the open/close tween ran on a property the layout was
     ignoring and the drawer snapped to full size on the first frame. Its
     height is driven in JS instead (useFilterDrawerAnimation), which is also
     what keeps that height independent of how many groups are inside. */
  flex: 0 0 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.suites__filters .filters[data-v-5edc4b0e]::-webkit-scrollbar {
  width: 4px;
}
.suites__filters .filters[data-v-5edc4b0e]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}
.suites__filters-toggle[data-v-5edc4b0e] {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.suites__filters-toggle[data-v-5edc4b0e]:hover {
  background: rgba(255, 255, 255, 0.1);
}
.suites__filters-label[data-v-5edc4b0e] {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.suites__filters-reset[data-v-5edc4b0e],
.suites__filters-chevron[data-v-5edc4b0e] {
  display: flex;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.25s ease;
}
.suites__filters-reset[data-v-5edc4b0e]:hover,
.suites__filters-chevron[data-v-5edc4b0e]:hover {
  background: rgba(255, 255, 255, 0.2);
}
.suites__filters-chevron.is-open[data-v-5edc4b0e] {
  transform: rotate(180deg);
}

/* Placeholder for the filter fields — same full-width pill radius as the bar
   above it, per the design reference; the actual controls land here later. */
.suites__filter-drawer[data-v-5edc4b0e] {
  flex-shrink: 0;
  margin-top: 8px;
  min-height: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}
.sr-only[data-v-5edc4b0e] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Mobile ----------------------------------------------------------- */

/* The drawer becomes a sheet that hugs its content there (Figma
   `suites-mobile` 710:2757), so the chain from the sheet down to this list
   has to report a real content height rather than the desktop `flex: 1`,
   whose basis of 0 would leave the sheet with nothing to size itself from.
   The list is the one thing allowed to shrink, so it is what scrolls once the
   sheet hits its cap. Padding follows the sheet's own 16px. */
@media (max-width: 768px) {
  /* No surface of its own here. On desktop this tint sits inside the menu
     card and reads as the drawer; in a bottom sheet it lands on top of the
     sheet's own fill, so everything below the grab handle came out a shade
     darker than the handle strip above it and the two read as two separate
     slabs. The sheet is the only surface on mobile. */
.suites[data-v-5edc4b0e] {
    flex: 1 1 auto;
    border-radius: 0;
    background: none;
}

  /* Figma `Frame 129`: a 32px row at the sheet's own 16px side padding, with
     the sheet's 16px gap above it doing the spacing (see the handle). */
.suites__head[data-v-5edc4b0e] {
    min-height: 32px;
    padding: 0 16px;
}
.suites__list[data-v-5edc4b0e] {
    flex: 0 1 auto;
}

  /* The bar keeps its full height here. On desktop it is shrinkable so the
     open drawer cannot push its own bottom edge past the card; in a sheet
     that is already capped, that same shrink just squashed the closed SEARCH
     row to a third of its height, because the list beside it has a content
     height in the hundreds and takes nothing like a proportional share.
     The drawer is bounded outright instead — `max-height: 100%` cannot do it
     any more, the sheet having no definite height to be a percentage of. */
.suites__filters[data-v-5edc4b0e] {
    flex-shrink: 0;
    max-height: 60dvh;
}


  /* Figma `suites-mobile` `search-bar` (Frame 276): fill 358 hug 34, radius
     24, padding 8/16/8/16, fill #FFFFFF 10%, no border — flatter than the
     desktop pill (which keeps its own 44px/999px/bordered look above this
     breakpoint). The bottom SEARCH toggle bar — `.suites__filters` and its
     reset/chevron buttons — is untouched here on purpose; only this input
     and the chips below it follow the mobile spec. */
.suites__search[data-v-5edc4b0e] {
    height: 34px;
    margin: 16px 16px 0;
    padding: 0 16px;
    /* Figma's own gap between the icon and the placeholder (Frame 318). */
    gap: 8px;
    border-radius: 24px;
    border: 0;
    background: rgba(255, 255, 255, 0.1);
}

  /* Frame 318 carries one opacity for the icon and the placeholder together
     — 50% — rather than each having a colour of its own. */
.suites__search-icon[data-v-5edc4b0e] {
    height: 18px;
    width: 18px;
    color: rgba(255, 255, 255, 0.5);
    stroke-width: 1.5;
}
.suites__search input[data-v-5edc4b0e],
  .suites__search input[data-v-5edc4b0e]::placeholder {
    font-size: 12px;
}
.suites__search input[data-v-5edc4b0e]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

  /* Figma: SF Pro Display 400 12px, underlined, #FFFFFF at 30%. */
.suites__clear[data-v-5edc4b0e] {
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: underline;
    color: rgba(255, 255, 255, 0.3);
}

  /* Figma chip (`Frame 270`): 20px tall (hug), padding 6/10/6/10, radius 20,
     border 0.5px #FFFFFF 30%. */
.suites__chips[data-v-5edc4b0e] {
    margin: 12px 16px 0;
}
.suites__chip[data-v-5edc4b0e] {
    height: 20px;
    border-color: rgba(255, 255, 255, 0.3);
}

  /* Figma `bottom-actions`: 358 fill x 44 hug, padding-top 8, space-between,
     and — unlike the desktop card's — no fill, no border and no radius. It
     is a plain row sitting on the sheet, not a pill on top of it. The reset
     and chevron buttons inside it are left exactly as they are. */
.suites__filters[data-v-5edc4b0e] {
    margin: 0 16px;
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.suites__filters-bar[data-v-5edc4b0e] {
    min-height: 36px;
    padding: 16px 16px 24px;
    gap: 8px;
}
.suites__filters-chevron[data-v-5edc4b0e] {
    display: none;
}
  /* Sits between SEARCH and the two buttons, and gives up its width first —
     the buttons keep theirs on the narrowest screens. */
.suites__filters-hint[data-v-5edc4b0e] {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* A point under Figma's: the design has the whole right half of the row
       to itself, this has to share it with the two buttons. */
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}
}

/* Same glass as the side menu, so the two float over the render as one
   family. Position and size are owned by useMediaViewerBox — the values here
   only cover the frame before its opening tween runs. */
.media[data-v-b56a03be] {
  position: fixed;
  top: 48px;
  left: 563px;
  box-sizing: border-box;
  display: flex;
  width: 565px;
  height: 437px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #000000a6;
  backdrop-filter: blur(120px);
  -webkit-backdrop-filter: blur(120px);
  color: #fff;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

/* Flush with the viewport's top, bottom and right edges (see expandedBox),
   so there is no corner left to round. */
.media.is-expanded[data-v-b56a03be] {
  border-radius: 0;
}
.media__head[data-v-b56a03be] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 16px 0 22px;
  touch-action: none;
}
.media__head.is-draggable[data-v-b56a03be] {
  cursor: grab;
}
.media.is-dragging .media__head[data-v-b56a03be] {
  cursor: grabbing;
}

/* Takes the row so the two controls stay pinned to the far edge. */
.media__title[data-v-b56a03be] {
  margin-right: auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

/* Figma: 36×36, fill #FFFFFF 10%, 1px inner border as a 153.43° gradient
   #FFFFFF 30% → #666666 0% at 83.33%. `border-image` cannot follow a
   border-radius, so the ring is a masked ::before instead. */
.media__action[data-v-b56a03be] {
  position: relative;
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ffffff1a;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.media__action[data-v-b56a03be]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    153.43deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(102, 102, 102, 0) 83.33%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.media__action[data-v-b56a03be]:hover {
  background: rgba(255, 255, 255, 0.18);
}
.media__sheet[data-v-b56a03be] {
  position: relative;
  min-height: 0;
  flex: 1;
  margin: 0 15px 15px;
  border-radius: 10px;
  overflow: hidden;
  /* The gestures are handled in JS, so the browser must not claim them first. */
  touch-action: none;
}

/* A floorplan sits on paper; a panorama fills the frame edge to edge and has
   no ground of its own to show. */
.media__sheet.is-paper[data-v-b56a03be] {
  background: #f5f2ec;
}
.media__sheet.is-grabbable[data-v-b56a03be] {
  cursor: grab;
}
.media__sheet.is-panning[data-v-b56a03be] {
  cursor: grabbing;
}

/* Laid out at its natural size with a top-left origin — the transform owns
   both the framing and the movement (see useImagePanZoom). */
.media__image[data-v-b56a03be] {
  display: block;
  max-width: none;
  transform-origin: top left;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  /* Held back until its natural size has been measured — otherwise it flashes
     once at full size before the framing is worked out. */
  opacity: 0;
}
.media__image.is-ready[data-v-b56a03be] {
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* Only while a zoom step or reset is playing; dragging stays immediate. */
.media__image.is-animating[data-v-b56a03be] {
  transition: transform 0.3s ease-out;
}
.media__tour[data-v-b56a03be] {
  display: block;
  height: 100%;
  width: 100%;
  border: 0;
}

/* Figma `Frame 271` (790:2359): the building's own unit popup, 324 fill x
   154 hug, reused as this window's collapsed shape rather than
   SuiteMediaWindow's wide glass panel — see that component for where the
   two diverge (this one has no separate title bar, no pan/zoom sheet). */
.media[data-v-fb7565cc] {
  position: fixed;
  top: 48px;
  left: 563px;
  box-sizing: border-box;
  display: flex;
  width: 344px;
  flex-direction: column;
  gap: 18px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #000000a6;
  backdrop-filter: blur(120px);
  -webkit-backdrop-filter: blur(120px);
  color: #fff;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
.media__head[data-v-fb7565cc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: grab;
  touch-action: none;
}
.media.is-dragging .media__head[data-v-fb7565cc] {
  cursor: grabbing;
}
.media__title[data-v-fb7565cc] {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.media__actions[data-v-fb7565cc] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

/* Same 36x36 gradient-border pill the card's own favourite/compare buttons
   use (see SuiteCard's `.suite__icon-btn`) — this window is the same design
   language, not the media viewer's flatter `.media__action`. */
.media__icon-btn[data-v-fb7565cc] {
  position: relative;
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ffffff1a;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Figma's 153.43° gradient ring (#FFFFFF 30% → transparent). `border-image`
   cannot follow a border-radius, so it is drawn as a masked ::before. */
.media__icon-btn[data-v-fb7565cc]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    153.43deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(102, 102, 102, 0) 83.33%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.media__icon-btn[data-v-fb7565cc]:hover,
.media__icon-btn.is-on[data-v-fb7565cc] {
  background: rgba(255, 255, 255, 0.18);
}
.media__facts[data-v-fb7565cc] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}
.media__fact[data-v-fb7565cc] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
}
.media__fact dt[data-v-fb7565cc] {
  display: flex;
  align-items: center;
}

/* ---- Show More detail -------------------------------------------------- */
.media__detail[data-v-fb7565cc] {
  padding-top: 2px;
}
.media__more[data-v-fb7565cc] {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.media__more[data-v-fb7565cc]:hover {
  background: rgba(255, 255, 255, 0.16);
}
.media__chevron[data-v-fb7565cc] {
  display: flex;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 0.25s ease;
}
.media__chevron.is-up[data-v-fb7565cc] {
  transform: rotate(180deg);
}
.sr-only[data-v-fb7565cc] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.suite-media-mobile[data-v-69382dc4] {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* The gestures are handled in JS, so the browser must not claim them first. */
  touch-action: none;
}

/* A floorplan sits on paper; a panorama fills the frame edge to edge and has
   no ground of its own to show. */
.suite-media-mobile.is-paper[data-v-69382dc4] {
  background: #f5f2ec;
}

/* Laid out at its natural size with a top-left origin — the transform owns
   both the framing and the movement (see useImagePanZoom). */
.suite-media-mobile__image[data-v-69382dc4] {
  display: block;
  max-width: none;
  transform-origin: top left;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  /* Held back until its natural size has been measured — otherwise it
     flashes once at full size before the framing is worked out. */
  opacity: 0;
}
.suite-media-mobile__image.is-ready[data-v-69382dc4] {
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* Only while a zoom step or reset is playing; dragging stays immediate. */
.suite-media-mobile__image.is-animating[data-v-69382dc4] {
  transition: transform 0.3s ease-out;
}
.suite-media-mobile__tour[data-v-69382dc4] {
  display: block;
  height: 100%;
  width: 100%;
  border: 0;
}

.pick[data-v-8d157797] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 96px);
}
.pick__head[data-v-8d157797] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pick__title[data-v-8d157797] {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.pick__subtitle[data-v-8d157797] {
  margin: 0;
  font-size: 13px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

/* Same card treatment as the stats/media blocks elsewhere (SuiteDetailPage,
   SuiteCard): radial fill, 1px gradient border. */
.pick__primary[data-v-8d157797] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 16px;
  background: radial-gradient(
    49.77% 49.77% at 50% 50%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}
.pick__primary[data-v-8d157797]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.pick__eyebrow[data-v-8d157797] {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #e3d5bc;
}
.pick__primary-row[data-v-8d157797] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pick__primary-name[data-v-8d157797] {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.pick__primary-badge[data-v-8d157797] {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
}
.pick__search[data-v-8d157797] {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}
.pick__search svg[data-v-8d157797] {
  flex-shrink: 0;
}
.pick__search input[data-v-8d157797] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.pick__search input[data-v-8d157797]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.pick__search input[data-v-8d157797]:focus {
  outline: none;
}
.pick__list[data-v-8d157797] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pick__card[data-v-8d157797] {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1.5px solid transparent;
  border-radius: 20px;
  background: radial-gradient(
    49.77% 49.77% at 50% 50%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.pick__card[data-v-8d157797]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.pick__card.is-selected[data-v-8d157797] {
  border-color: #2460e6;
}
.pick__card.is-selected[data-v-8d157797]::before {
  display: none;
}
.pick__plan[data-v-8d157797] {
  height: 68px;
  width: 68px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f2ec;
}
.pick__plan img[data-v-8d157797] {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.pick__info[data-v-8d157797] {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}
.pick__info-head[data-v-8d157797] {
  display: flex;
  flex-direction: column;
}
.pick__name[data-v-8d157797] {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.pick__model[data-v-8d157797] {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pick__stats[data-v-8d157797] {
  display: flex;
  margin: 0;
  gap: 12px;
}
.pick__stat[data-v-8d157797] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}
.pick__stat dt[data-v-8d157797] {
  display: flex;
  height: 12px;
  width: 12px;
}
.pick__stat dt[data-v-8d157797] svg {
  height: 100%;
  width: 100%;
}
.pick__radio[data-v-8d157797] {
  display: flex;
  height: 22px;
  width: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fff;
}
.pick__radio.is-checked[data-v-8d157797] {
  border-color: #2460e6;
  background: #2460e6;
}
.pick__radio svg[data-v-8d157797] {
  height: 12px;
  width: 12px;
}
.pick__footer[data-v-8d157797] {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, #0a0a0c 40%);
}
.pick__confirm[data-v-8d157797] {
  display: flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #2460e6;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pick__confirm[data-v-8d157797]:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.compare[data-v-cc5c9d69] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 84px);
}
.compare__title[data-v-cc5c9d69] {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.compare__units[data-v-cc5c9d69] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.compare__unit[data-v-cc5c9d69] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compare__badge[data-v-cc5c9d69] {
  margin: 0;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
}
.compare__unit-head[data-v-cc5c9d69] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.compare__unit-name[data-v-cc5c9d69] {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.compare__unit-model[data-v-cc5c9d69] {
  margin: 2px 0 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.compare__fav[data-v-cc5c9d69] {
  display: flex;
  height: 30px;
  width: 30px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.compare__fav.is-on[data-v-cc5c9d69],
.compare__fav[data-v-cc5c9d69]:hover {
  background: rgba(255, 255, 255, 0.18);
}
.compare__plan[data-v-cc5c9d69] {
  position: relative;
  display: block;
  height: 110px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f2ec;
  cursor: pointer;
}
.compare__plan[data-v-cc5c9d69]:disabled {
  cursor: default;
}
.compare__plan img[data-v-cc5c9d69] {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.compare__plan-expand[data-v-cc5c9d69] {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  height: 26px;
  width: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.compare__plan-expand svg[data-v-cc5c9d69] {
  height: 14px;
  width: 14px;
}

/* ---- the table ---------------------------------------------------------- */
.compare__table[data-v-cc5c9d69] {
  position: relative;
  border-radius: 16px;
  background: radial-gradient(
    49.77% 49.77% at 50% 50%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}
.compare__table[data-v-cc5c9d69]::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.compare__row[data-v-cc5c9d69] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.3;
}
.compare__row + .compare__row[data-v-cc5c9d69] {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.compare__row--head[data-v-cc5c9d69] {
  font-weight: 500;
  color: #fff;
}
.compare__label[data-v-cc5c9d69] {
  color: rgba(255, 255, 255, 0.55);
}
.compare__value[data-v-cc5c9d69] {
  font-weight: 500;
  color: #fff;
}
.compare__value.is-muted[data-v-cc5c9d69] {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}
.compare__link[data-v-cc5c9d69] {
  border: 0;
  background: none;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- footer -------------------------------------------------------------- */
.compare__footer[data-v-cc5c9d69] {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 12px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, #0a0a0c 40%);
}
.compare__action[data-v-cc5c9d69] {
  display: flex;
  flex: 1;
  height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.compare__action[data-v-cc5c9d69]:hover {
  background: rgba(255, 255, 255, 0.16);
}

.amenity[data-v-398a1506] {
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* The one the tour is showing. */
.amenity.is-active[data-v-398a1506] {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* Name left, still right. */
.amenity__head[data-v-398a1506] {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 0 8px 8px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.amenity__title[data-v-398a1506] {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
}
.amenity__thumb[data-v-398a1506] {
  height: 100%;
  width: 120px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* The hairline under the name/still row, then what this card opens. */
.amenity__foot[data-v-398a1506] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.amenity__media-icon[data-v-398a1506] {
  flex-shrink: 0;
  opacity: 0.85;
}
.amenity__media-label[data-v-398a1506] {
  margin-right: auto;
  font-size: 13px;
  line-height: 1;
}
.amenity__go[data-v-398a1506] {
  display: flex;
  height: 34px;
  width: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.amenity__go[data-v-398a1506]:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Transparent for the same reason the other panels are: the glass belongs to
   .side-menu, and a second blurred layer inside it reads as a card within a
   card. */
.amenities[data-v-7a8c0072] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  backdrop-filter: blur(124px);
  background: #00000033;
  /* A card of its own, rounded all round — the nav strip is a separate bar
     below it (see SideMenuStrip). */
  border-radius: 20px;
}
.amenities__head[data-v-7a8c0072] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 24px;
}
.amenities__title[data-v-7a8c0072] {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

/* Pushed to the far end of the heading row, mirroring the entry it replaced. */
.amenities__icon[data-v-7a8c0072] {
  margin-left: auto;
  height: 20px;
  width: 20px;
  color: rgba(255, 255, 255, 0.9);
}
.amenities__list[data-v-7a8c0072] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 0 18px 8px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.amenities__list[data-v-7a8c0072]::-webkit-scrollbar {
  width: 4px;
}
.amenities__list[data-v-7a8c0072]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

/* ---- Mobile ----------------------------------------------------------- */

/* Same as SuitesPanel: on a phone the drawer is a sheet that hugs its
   content, so this has to size from its own content and let only the list
   shrink (and therefore scroll) once the sheet hits its cap. */
@media (max-width: 768px) {
.amenities[data-v-7a8c0072] {
    flex: 1 1 auto;
    border-radius: 0;
    backdrop-filter: none;
    background: transparent;
}

  /* Cards wider than the heading is inset, which is what lines their titles
     up with it: a card carries 8px of its own padding and its head another 8
     (AmenityCard), so a card sitting 8px off the edge puts its name on the
     heading's 24px line. Keeping the list at the heading's inset instead is
     what left the two out of step by exactly that 16px. */
.amenities__list[data-v-7a8c0072] {
    flex: 0 1 auto;
    gap: 12px;
    padding: 0 8px 8px;
}

  /* Clear of the sheet's grab handle above it — this heading is also all that
     shows once the sheet is minimized down onto it. */
.amenities__head[data-v-7a8c0072] {
    padding: 18px 24px 14px;
}
}

/* `.main-route` has no height of its own, so the page takes the routed area
   the way the Gallery and Neighborhood pages do. */
.amenities-page[data-v-cff0ecf4] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.amenities-page__tour[data-v-cff0ecf4] {
  height: 100%;
  width: 100%;
  border: 0;
  display: block;
}

/* Over the tour, and only where it has to be: the bar itself takes no clicks,
   so a drag that starts on it still reaches the walkthrough underneath —
   only the close does. */
.amenities-page__bar[data-v-cff0ecf4] {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 34px;
  /* The scenes are bright at the top — sky, glass, a lit lobby — and the
     title sits straight on them. */
  background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
.amenities-page__title[data-v-cff0ecf4] {
  margin-right: auto;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.amenities-page__close[data-v-cff0ecf4] {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}
.amenities-page__veil[data-v-cff0ecf4] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #0b0b0b;
}
.amenities-page__spinner[data-v-cff0ecf4] {
  height: 26px;
  width: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: amenities-spin-cff0ecf4 0.7s linear infinite;
}
@keyframes amenities-spin-cff0ecf4 {
to {
    transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.amenities-page__spinner[data-v-cff0ecf4] {
    animation-duration: 2s;
}
}
.amenities-page__label[data-v-cff0ecf4] {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Figma (Frame 95): 374 wide, radius 20, padding 24, fill #000000 40%,
   1px gradient border #FFF 30% → 0% → 30%, background blur. */
.side-menu[data-v-058ba8c0] {
  --menu-inset-x: 18px;

  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 120;
  box-sizing: border-box;
  width: 374px;
  border-radius: 20px;
  overflow: hidden;
  /* border: 1px solid transparent; */
  background: #00000066;
  border: 1px inset #FFFFFF4D;
  backdrop-filter: blur(120px);
  -webkit-backdrop-filter: blur(120px);
  transition: backdrop-filter 0.15s linear;
}

/* Set by the open/close animations for the duration of the tween only.
   The blur and fill are deliberately left alone here: swapping them out for
   a flat colour while the box moved did buy frames back when the panel was
   building all ~112 cards mid-animation, but it also changed the menu's
   appearance for the length of the tween, which read as a flash at both ends.
   With the card count now bounded (see the paging in useSuites) the blur is
   affordable on the frame, so the look stays constant and only `contain` —
   which is invisible — is applied. */
.side-menu.side-menu--animating[data-v-058ba8c0] {
  contain: layout paint;
}
.side-menu[data-v-058ba8c0] {
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
.side-menu__head[data-v-058ba8c0] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 24px;
}

/* Collapsed, the head is the whole visible drawer — clicking anywhere on it,
   not just the burger, should reopen the menu. */
.side-menu__head.is-collapsed[data-v-058ba8c0] {
  cursor: pointer;
}

/* Pushes the burger to the far edge whether or not the spinner is present,
   so the title/spinner pair stays together on the left. */
.side-menu__toggle[data-v-058ba8c0] {
  margin-left: auto;
}
.side-menu__spinner[data-v-058ba8c0] {
  display: block;
  height: 14px;
  width: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: side-menu-spin-058ba8c0 0.7s linear infinite;
}
@keyframes side-menu-spin-058ba8c0 {
to {
    transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.side-menu__spinner[data-v-058ba8c0] {
    animation-duration: 2s;
}
}
.side-menu__toggle[data-v-058ba8c0]:disabled {
  cursor: default;
  opacity: 0.45;
}

/* Inset 0 against the menu's own box, so it always matches the card's current
   size — including mid-animation, when that size is being tweened. Opaque
   enough, and blurred enough, that the card visibly reads as out of action
   rather than merely slightly darker. */
.side-menu__veil[data-v-058ba8c0] {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px) grayscale(1);
  -webkit-backdrop-filter: blur(3px) grayscale(1);
  cursor: not-allowed;
}

/* Above the veil so the title, spinner and word stay legible over it. */
.side-menu__head[data-v-058ba8c0] {
  position: relative;
  z-index: 3;
}

/* Dimmed along with the rest of the card, since it is inert too. */
.side-menu__head .side-menu__title[data-v-058ba8c0],
.side-menu__head .side-menu__toggle[data-v-058ba8c0] {
  transition: opacity 0.2s ease;
}
.side-menu.is-loading .side-menu__title[data-v-058ba8c0],
.side-menu.is-loading .side-menu__toggle[data-v-058ba8c0] {
  opacity: 0.4;
}
.side-menu__loading-label[data-v-058ba8c0] {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.sr-only[data-v-058ba8c0] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.side-menu__title[data-v-058ba8c0] {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.side-menu__toggle[data-v-058ba8c0] {
  display: flex;
  height: 24px;
  width: 24px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* padding-top, not margin-top: GSAP animates this element's own `height`
   (via scrollHeight), and a margin sits outside that box and would leave a
   48px gap floating above the header while the body collapses to nothing. */
.side-menu__body[data-v-058ba8c0] {
  box-sizing: border-box;
  display: flex;
  min-height: 0;
  flex-direction: column;
  /* padding-top: 24px; */
}

/* Figma: 8px between entries. */
.side-menu__list[data-v-058ba8c0] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px;
}
.side-menu__grid[data-v-058ba8c0] {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  padding: 0 18px 24px 18px;
}

/* ---- Panel mode ------------------------------------------------------- */

/* With a panel open the menu stops hugging its entries and grows up the
   viewport, so the suite list has somewhere to scroll. `bottom`/`max-height`
   rather than a fixed height keeps it anchored to the same corner. */
.side-menu.has-panel[data-v-058ba8c0] {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}

/* Without this, .side-menu__body has no flex-grow and only takes the height
   its own content needs — so with few (or zero) suites loaded, everything
   below the list rides up under it instead of the search bar and strip
   staying pinned to the bottom of the now-tall panel. */
.side-menu.has-panel .side-menu__body[data-v-058ba8c0] {
  flex: 1;
  gap: 8px;
}
.side-menu__panel[data-v-058ba8c0] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

/* Carries the panel's own layout, so wrapping one changes nothing about how
   it fills the drawer. */
.side-menu__slot[data-v-058ba8c0] {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

/* Figma `home-landing-mobile` (710:1947) `menu-btn`: hug 65x17, gap 8,
   SF Pro Display 700 14px uppercase, no fill. Sits at the nav-bar's own
   padding (top 4, right 16) rather than the desktop card's corner inset. */
.mobile-menu__trigger[data-v-c41994b1] {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  right: 16px;
  z-index: 130;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 8px 0;
  color: #fff;
  cursor: pointer;
}
.mobile-menu__trigger[data-v-c41994b1]:disabled {
  cursor: default;
  opacity: 0.45;
}
.mobile-menu__trigger-label[data-v-c41994b1] {
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.mobile-menu__trigger svg[data-v-c41994b1] {
  height: 16px;
  width: 16px;
}

/* The sheet itself. Two shapes, switched by `.is-panel` below — never a size
   *between* the two, since the switch only ever happens while the sheet is
   off-screen (see useMobileMenuAnimation's `switchTo`). */
.mobile-menu[data-v-c41994b1] {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  z-index: 125;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0a0c;
  padding-top: env(safe-area-inset-top, 0px);
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

/* Figma `suites-mobile` (710:2757) `bottom-sheet`: 390x480 of an 844-tall
   frame (~57%), rounded top 28, fill #000000 60%, background blur 40, 1px
   top border #FFF 30.2% → 0% → 30.2%. Rounded up from that ratio so a third
   suite card stays in view on a real, usually-taller phone. */
.mobile-menu.is-panel[data-v-c41994b1] {
  top: auto;
  max-height: 72dvh;
  border-radius: 28px 28px 0 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: max-height 0.35s ease;
 
  border-image-source: linear-gradient(91.95deg, rgba(255, 255, 255, 0.301961) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.301961) 100%);
}

/* Favourites (the `amenities-mobile` favourites frame): the one panel drawn
   as a full screen rather than a sheet — its heading sits on the MENU
   trigger's line the way a page's does, and its send bar rides the bottom
   edge. Flat black, not glass: nothing of the app shows through a panel that
   covers the screen, so a blur here would only cost frames. */
.mobile-menu.is-panel.is-full[data-v-c41994b1] {
  top: 0;
  max-height: none;
  border-radius: 0;
  background: #0a0a0c;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: env(safe-area-inset-top, 0px);
}

/* The hairline marks a sheet's top edge against the app behind it; a
   full-screen panel has neither. */
.mobile-menu.is-panel.is-full[data-v-c41994b1]::before {
  content: none;
}

/* Figma `suites-mobile` (710:3022): pressing the handle shrinks the sheet
   down to just the handle and the panel's own heading. Figma's `bottom-sheet`
   in that state is 390x92 (710:3129): the 36px handle row, a 32px heading
   row, and the sheet's own 24px bottom padding.

   A flat, more opaque fill rather than the glass the open sheet has: with
   the cards hidden (below) there is nothing left for a blur to soften, and
   the reference wants a plainer, more solid bar here regardless. */
.mobile-menu.is-panel.is-minimized[data-v-c41994b1] {
  max-height: 92px;
  background: #00000099;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: none;
}

/* Hidden outright rather than left to `max-height` clipping alone: a card's
   own shadow/radius could still show a sliver right at the cut edge, and the
   list stays scrollable underneath (nothing here unmounts it — see the
   template) so a stray touch could otherwise scroll it under the fold.
   `:deep()`, reaching past each panel's own scoped styles, because the
   heading this has to leave alone (`.suites__head` etc.) and the parts this
   hides both live inside that panel's own template, not in this file's. */
.mobile-menu.is-panel.is-minimized[data-v-c41994b1] .suites__search,
.mobile-menu.is-panel.is-minimized[data-v-c41994b1] .suites__chips,
.mobile-menu.is-panel.is-minimized[data-v-c41994b1] .suites__list,
.mobile-menu.is-panel.is-minimized[data-v-c41994b1] .suites__filters,
.mobile-menu.is-panel.is-minimized[data-v-c41994b1] .favourites__list,
.mobile-menu.is-panel.is-minimized[data-v-c41994b1] .favourites__send,
.mobile-menu.is-panel.is-minimized[data-v-c41994b1] .amenities__list {
  visibility: hidden;
}
.mobile-menu.is-panel[data-v-c41994b1]::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.302) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.302) 100%
  );
}
.mobile-menu__veil[data-v-c41994b1] {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px) grayscale(1);
  -webkit-backdrop-filter: blur(3px) grayscale(1);
  cursor: not-allowed;
}

/* Figma `menu` (710:3894) `menu-header`: "MENU" left (SF Pro Display 700
   16px uppercase), close right. */
.mobile-menu__head[data-v-c41994b1] {
  position: relative;
  z-index: 3;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 16px;
}
.mobile-menu__title[data-v-c41994b1] {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.mobile-menu__close[data-v-c41994b1] {
  display: flex;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.mobile-menu__close[data-v-c41994b1]:disabled {
  cursor: default;
  opacity: 0.45;
}
.mobile-menu__spinner[data-v-c41994b1] {
  display: block;
  height: 14px;
  width: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: mobile-menu-spin-c41994b1 0.7s linear infinite;
}
@keyframes mobile-menu-spin-c41994b1 {
to {
    transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.mobile-menu__spinner[data-v-c41994b1] {
    animation-duration: 2s;
}
}
.mobile-menu__loading-label[data-v-c41994b1] {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.mobile-menu__body[data-v-c41994b1] {
  position: relative;
  z-index: 3;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu__list[data-v-c41994b1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
.mobile-menu__grid[data-v-c41994b1] {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

/* Figma `sheet-handle`: a 40x4 pill, radius 2, #FFFFFF 40%, sitting in the
   sheet's own 16px top padding with the sheet's 16px gap under it — hence the
   36px row. Nothing is painted behind it: the sheet is the only surface here,
   so this strip and the panel below it are one continuous colour (the panels
   drop their own tint at this breakpoint for exactly that reason). Its hit
   area is the whole row, not just the pill's own bounds. */
.mobile-menu__handle[data-v-c41994b1] {
  position: relative;
  z-index: 3;
  display: flex;
  height: 36px;
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.mobile-menu__handle[data-v-c41994b1]::before {
  content: '';
  height: 4px;
  width: 40px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
}
.mobile-menu__panel[data-v-c41994b1] {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

/* Carries the panel's own layout, so wrapping one changes nothing about how
   it fills the sheet. */
.mobile-menu__slot[data-v-c41994b1] {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Invisible: everything you can see is the pill inside. Width is owned by
   useLogoutReveal — the value here is only what the first paint uses, before
   the mount tween runs. */
.logout[data-v-97e78ca3] {
  position: fixed;
  top: 24px;
  left: 0;
  /* Same layer as the side menu — see the note there about `.main-route`. */
  z-index: 120;
  box-sizing: border-box;
  height: 52px;
  width: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Same glass as the side menu (Figma: fill #000000 40%, background blur,
   1px light border) so the two corners of the screen belong together. */
.logout__pill[data-v-97e78ca3] {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: block;
  height: 52px;
  width: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left-color: transparent;

  /* Square against the viewport edge, rounded once it has stepped away from
     it. A transition rather than a tween: GSAP would have to interpolate a
     four-value shorthand, and the radius only has to keep up, not lead. */
  border-radius: 0 14px 14px 0;
  background: #00000066;
  backdrop-filter: blur(120px);
  -webkit-backdrop-filter: blur(120px);
  color: #fff;
  transition:
    border-radius 0.35s ease,
    border-left-color 0.35s ease,
    background-color 0.2s ease;
}
.logout.is-open .logout__pill[data-v-97e78ca3] {
  border-radius: 14px;
  border-left-color: rgba(255, 255, 255, 0.14);
}
.logout:hover .logout__pill[data-v-97e78ca3] {
  background: #00000099;
}

/* Pressed and on its way out: the glyph pulses so the two-second wait before
   the reload reads as "working", not as a button that did nothing. */
.logout.is-busy[data-v-97e78ca3] {
  cursor: default;
}
.logout.is-busy .logout__pill[data-v-97e78ca3] {
  animation: logout-pulse-97e78ca3 0.9s ease-in-out infinite;
}
@keyframes logout-pulse-97e78ca3 {
50% {
    opacity: 0.45;
}
}
@media (prefers-reduced-motion: reduce) {
.logout.is-busy .logout__pill[data-v-97e78ca3] {
    animation: none;
    opacity: 0.6;
}
}

/* Absolute so the two glyphs share one spot and can cross-fade, and so
   neither of them nudges the other while the pill is being resized. */
.logout__glyph[data-v-97e78ca3] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gone on a phone: the mobile nav (MobileMenuSheet) puts its own MENU control
   in the opposite corner, and this two-step reveal — a sliver you press once
   to show the button, again to use it — is built for a mouse hovering the
   edge of the screen, not a thumb. */
@media (max-width: 768px) {
.logout[data-v-97e78ca3] {
    display: none;
}
}

/* Beside the menu card: its left edge is 12 + 374 (see SideMenu.vue), with
   the same 16px gap Figma leaves. 70px tall and pinned to the menu's own
   12px bottom inset, so it is centred on the collapsed MENU row. */
.tutorial-btn[data-v-764b73af] {
  position: fixed;
  left: calc(12px + 374px + 16px);
  bottom: 12px;
  /* Over the tutorial overlay (119) and level with the menu. */
  z-index: 121;
  display: flex;
  height: 70px;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  cursor: pointer;
}
.tutorial-btn__icon[data-v-764b73af] {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}

/* Figma: 12px, white, sentence case. */
.tutorial-btn__label[data-v-764b73af] {
  font-size: 12px;
  line-height: 1;
}

/* Below the side menu, the view controls (120) and the tutorial button
   (121), above `.main-route` (100) — the render goes out of focus, the
   controls do not. */
.tutorial[data-v-93718a8d] {
  position: fixed;
  inset: 0;
  z-index: 119;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  cursor: pointer;
}

/* Figma: the two centre hints 25px apart, centred on the viewport. */
.tutorial__centre[data-v-93718a8d] {
  display: flex;
  gap: 25px;
}

/* Figma HOME / LANDING hint pill: ~240×66, radius 12, glass fill, icon then
   a two-line caption. */
.tutorial__hint[data-v-93718a8d] {
  box-sizing: border-box;
  display: flex;
  height: 66px;
  width: 240px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
.tutorial__hint--anchored[data-v-93718a8d] {
  position: fixed;
  transform: translateY(-50%);
}
.tutorial__hint-icon[data-v-93718a8d] {
  flex-shrink: 0;
  height: 32px;
  width: 32px;
}
.tutorial__hint-text[data-v-93718a8d] {
  font-size: 13px;
  line-height: 1.25;
}
.tutorial-fade-enter-active[data-v-93718a8d],
.tutorial-fade-leave-active[data-v-93718a8d] {
  transition: opacity 0.25s ease;
}
.tutorial-fade-enter-from[data-v-93718a8d],
.tutorial-fade-leave-to[data-v-93718a8d] {
  opacity: 0;
}
.floorplan {
  width: 100%;
  height: auto;
}
.svg-block g {
  fill-opacity: 0.2;
}html, body {
  touch-action: manipulation;
}
.mainList .floorplans .vgt-table.bordered th {
  font-size: 16px;
  font-weight: 500;
}
.mainList h3 {
  font-size: 16px !important;
  font-weight: 500 !important;
}
.mainList .vgt-responsive {
  height: 40vh !important;
  min-height: 20vh;
  max-height: calc(100vh - 20.5rem);
}
.mainList .vgt-table {
  width: 100%;
}
.mainList .vgt-table thead th {
  text-align: start;
}
.mainList .vgt-table thead tr th:first-child {
  max-width: 80px;
}
.mainList .vgt-table colgroup col:first-child {
  max-width: 80px;
  width: 80px;
}
.mainList .vgt-table td .grid {
  padding: 16px;
}
.g {
  color: rgba(239, 69, 35, 0.3019607843);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "SF Pro Display", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary: #2460e6;
    --color-primary-200: #d1e2df;
    --color-qooWhite-2: #ccc;
    --color-qooWhite-3: #dbdbdb;
    --color-qooWhite-4: #e5e5e5;
    --color-qooWhite-5: #f2f2f2;
    --color-qooWhite-6: #f6f6f6;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .\!fixed {
    position: fixed !important;
  }

  .\!sticky {
    position: sticky !important;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-x-0 {
    inset-inline: 0;
  }

  .inset-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }

  .-top-px {
    top: -1px;
  }

  .top-0 {
    top: 0;
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-\[-5px\] {
    top: -5px;
  }

  .top-\[12px\] {
    top: 12px;
  }

  .top-auto\! {
    top: auto !important;
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-50 {
    right: calc(var(--spacing) * 50);
  }

  .right-\[16px\] {
    right: 16px;
  }

  .bottom-0 {
    bottom: 0;
  }

  .bottom-0\! {
    bottom: 0 !important;
  }

  .bottom-full\! {
    bottom: 100% !important;
  }

  .left-0 {
    left: 0;
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .left-\[-5px\] {
    left: -5px;
  }

  .left-\[16px\] {
    left: 16px;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-50 {
    z-index: 50;
  }

  .z-150 {
    z-index: 150;
  }

  .z-\[-1\] {
    z-index: -1;
  }

  .z-\[97\] {
    z-index: 97;
  }

  .z-\[98\] {
    z-index: 98;
  }

  .z-\[99\] {
    z-index: 99;
  }

  .z-\[110\] {
    z-index: 110;
  }

  .col-0 {
    grid-column: 0;
  }

  .col-1 {
    grid-column: 1;
  }

  .col-2 {
    grid-column: 2;
  }

  .col-3 {
    grid-column: 3;
  }

  .col-4 {
    grid-column: 4;
  }

  .col-5 {
    grid-column: 5;
  }

  .col-6 {
    grid-column: 6;
  }

  .col-7 {
    grid-column: 7;
  }

  .col-8 {
    grid-column: 8;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .container {
      max-width: 768px;
    }
  }

  @media (min-width: 1025px) {
    .container {
      max-width: 1025px;
    }
  }

  @media (min-width: 1280px) {
    .container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1366px) {
    .container {
      max-width: 1366px;
    }
  }

  @media (min-width: 1460px) {
    .container {
      max-width: 1460px;
    }
  }

  @media (min-width: 1536px) {
    .container {
      max-width: 1536px;
    }
  }

  @media (min-width: 1760px) {
    .container {
      max-width: 1760px;
    }
  }

  @media (min-width: 1920px) {
    .container {
      max-width: 1920px;
    }
  }

  @media (min-width: 2560px) {
    .container {
      max-width: 2560px;
    }
  }

  .m-0 {
    margin: 0;
  }

  .m-auto {
    margin: auto;
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }

  .my-auto {
    margin-block: auto;
  }

  .\!mt-\[34px\] {
    margin-top: 34px !important;
  }

  .mt-0 {
    margin-top: 0;
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }

  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }

  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }

  .mt-\[14px\] {
    margin-top: 14px;
  }

  .mt-\[16px\] {
    margin-top: 16px;
  }

  .mt-\[24px\] {
    margin-top: 24px;
  }

  .mt-\[48px\] {
    margin-top: 48px;
  }

  .-mr-2 {
    margin-right: calc(var(--spacing) * -2);
  }

  .-mr-3 {
    margin-right: calc(var(--spacing) * -3);
  }

  .mr-1 {
    margin-right: var(--spacing);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .\!mb-\[18px\] {
    margin-bottom: 18px !important;
  }

  .-mb-8 {
    margin-bottom: calc(var(--spacing) * -8);
  }

  .mb-0 {
    margin-bottom: 0;
  }

  .mb-0\! {
    margin-bottom: 0 !important;
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-\[6px\] {
    margin-bottom: 6px;
  }

  .mb-\[9px\] {
    margin-bottom: 9px;
  }

  .mb-\[24px\] {
    margin-bottom: 24px;
  }

  .mb-\[40px\] {
    margin-bottom: 40px;
  }

  .mb-\[42px\] {
    margin-bottom: 42px;
  }

  .mb-\[93px\] {
    margin-bottom: 93px;
  }

  .\!ml-3 {
    margin-left: calc(var(--spacing) * 3) !important;
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .ml-1 {
    margin-left: var(--spacing);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-auto {
    margin-left: auto;
  }

  .box-border {
    box-sizing: border-box;
  }

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

  .\!table-cell {
    display: table-cell !important;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .table {
    display: table;
  }

  .aspect-\[0\.54\] {
    aspect-ratio: .54;
  }

  .aspect-\[0\.85\] {
    aspect-ratio: .85;
  }

  .aspect-\[2\.13\] {
    aspect-ratio: 2.13;
  }

  .aspect-\[2\.14\] {
    aspect-ratio: 2.14;
  }

  .aspect-\[25\/22\] {
    aspect-ratio: 25 / 22;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .h-0 {
    height: 0;
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-500 {
    height: calc(var(--spacing) * 500);
  }

  .h-\[6px\] {
    height: 6px;
  }

  .h-\[10px\] {
    height: 10px;
  }

  .h-\[11px\] {
    height: 11px;
  }

  .h-\[20px\] {
    height: 20px;
  }

  .h-\[24px\] {
    height: 24px;
  }

  .h-\[26px\] {
    height: 26px;
  }

  .h-\[32px\] {
    height: 32px;
  }

  .h-\[38px\] {
    height: 38px;
  }

  .h-\[42px\] {
    height: 42px;
  }

  .h-\[48px\] {
    height: 48px;
  }

  .h-\[56px\] {
    height: 56px;
  }

  .h-\[60\%\] {
    height: 60%;
  }

  .h-\[68vh\] {
    height: 68vh;
  }

  .h-\[72px\] {
    height: 72px;
  }

  .h-\[100vh\] {
    height: 100vh;
  }

  .h-\[142px\] {
    height: 142px;
  }

  .h-\[146px\] {
    height: 146px;
  }

  .h-\[calc\(100vh_-_22rem\)\] {
    height: calc(100vh - 22rem);
  }

  .h-fit {
    height: fit-content;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-\[3\.75rem\] {
    max-height: 3.75rem;
  }

  .max-h-\[6rem\] {
    max-height: 6rem;
  }

  .max-h-\[15rem\] {
    max-height: 15rem;
  }

  .max-h-\[25rem\] {
    max-height: 25rem;
  }

  .max-h-\[42px\] {
    max-height: 42px;
  }

  .max-h-\[70vh\] {
    max-height: 70vh;
  }

  .max-h-\[74vh\] {
    max-height: 74vh;
  }

  .max-h-\[80vh\] {
    max-height: 80vh;
  }

  .max-h-\[110px\] {
    max-height: 110px;
  }

  .max-h-\[calc\(100vh_-_150px\)\] {
    max-height: calc(100vh - 150px);
  }

  .max-h-\[calc\(100vh_-_270px\)\] {
    max-height: calc(100vh - 270px);
  }

  .max-h-\[min\(42vh\,17\.5rem\)\] {
    max-height: min(42vh, 17.5rem);
  }

  .min-h-\[1px\] {
    min-height: 1px;
  }

  .min-h-\[50vh\] {
    min-height: 50vh;
  }

  .min-h-\[100px\] {
    min-height: 100px;
  }

  .min-h-\[150px\] {
    min-height: 150px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-full {
    min-height: 100%;
  }

  .\!w-\[127px\] {
    width: 127px !important;
  }

  .\!w-full {
    width: 100% !important;
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/2\! {
    width: 50% !important;
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-11\/12 {
    width: 91.6667%;
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-\[1px\] {
    width: 1px;
  }

  .w-\[7px\] {
    width: 7px;
  }

  .w-\[10px\] {
    width: 10px;
  }

  .w-\[11px\] {
    width: 11px;
  }

  .w-\[12px\] {
    width: 12px;
  }

  .w-\[13px\] {
    width: 13px;
  }

  .w-\[17px\] {
    width: 17px;
  }

  .w-\[20px\] {
    width: 20px;
  }

  .w-\[24px\] {
    width: 24px;
  }

  .w-\[32px\] {
    width: 32px;
  }

  .w-\[40px\] {
    width: 40px;
  }

  .w-\[42px\] {
    width: 42px;
  }

  .w-\[48px\] {
    width: 48px;
  }

  .w-\[75px\] {
    width: 75px;
  }

  .w-\[76px\] {
    width: 76px;
  }

  .w-\[102px\] {
    width: 102px;
  }

  .w-\[110px\] {
    width: 110px;
  }

  .w-\[121px\] {
    width: 121px;
  }

  .w-\[128px\] {
    width: 128px;
  }

  .w-\[132px\] {
    width: 132px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[254px\] {
    width: 254px;
  }

  .w-\[264px\] {
    width: 264px;
  }

  .w-\[372px\] {
    width: 372px;
  }

  .w-\[426px\] {
    width: 426px;
  }

  .w-\[610px\] {
    width: 610px;
  }

  .w-\[calc\(100\%-127px\)\] {
    width: calc(100% - 127px);
  }

  .w-\[min\(calc\(100vw-2\.5rem\)\,19rem\)\] {
    width: min(100vw - 2.5rem, 19rem);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .max-w-\[100\%\] {
    max-width: 100%;
  }

  .max-w-\[384px\] {
    max-width: 384px;
  }

  .max-w-\[644px\] {
    max-width: 644px;
  }

  .max-w-\[calc\(100\%-2\.5rem\)\] {
    max-width: calc(100% - 2.5rem);
  }

  .max-w-\[calc\(100vw-11rem\)\] {
    max-width: calc(100vw - 11rem);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-\[86px\] {
    min-width: 86px;
  }

  .min-w-\[105px\] {
    min-width: 105px;
  }

  .min-w-\[210px\] {
    min-width: 210px;
  }

  .min-w-fit {
    min-width: fit-content;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow, .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .\!border-spacing-0 {
    --tw-border-spacing-x: 0px !important;
    --tw-border-spacing-y: 0px !important;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y) !important;
  }

  .origin-\[37px_36px\] {
    transform-origin: 37px 36px;
  }

  .origin-center {
    transform-origin: center;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-2\/4 {
    --tw-translate-y: calc(calc(2 / 4 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-\[140vh\] {
    --tw-translate-y: calc(140vh * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-0 {
    --tw-scale-x: 0%;
    --tw-scale-y: 0%;
    --tw-scale-z: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .\!cursor-not-allowed {
    cursor: not-allowed !important;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grabbing {
    cursor: grabbing;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .list-none {
    list-style-type: none;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .\!justify-start {
    justify-content: flex-start !important;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

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

  .gap-0 {
    gap: 0;
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  .self-center {
    align-self: center;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\!overflow-auto {
    overflow: auto !important;
  }

  .\!overflow-hidden {
    overflow: hidden !important;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .\!overflow-x-auto {
    overflow-x: auto !important;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .\!rounded-\[10px\] {
    border-radius: 10px !important;
  }

  .\!rounded-none {
    border-radius: 0 !important;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[12px\] {
    border-radius: 12px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[18px\] {
    border-radius: 18px;
  }

  .rounded-\[30px\] {
    border-radius: 30px;
  }

  .rounded-\[32px\] {
    border-radius: 32px;
  }

  .rounded-\[36px\] {
    border-radius: 36px;
  }

  .rounded-\[50\%\] {
    border-radius: 50%;
  }

  .rounded-\[69px\] {
    border-radius: 69px;
  }

  .rounded-\[100vw\] {
    border-radius: 100vw;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .\!rounded-t-none {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  .\!rounded-br-none {
    border-bottom-right-radius: 0 !important;
  }

  .\!rounded-bl-none {
    border-bottom-left-radius: 0 !important;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .\!border-t {
    border-top-style: var(--tw-border-style) !important;
    border-top-width: 1px !important;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .\!border-b {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 1px !important;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .\!border-\[\#ccc\]\/30 {
    border-color: oklab(84.5222% -1.49012e-7 5.96046e-8 / .3) !important;
  }

  .\!border-qooWhite-2 {
    border-color: var(--color-qooWhite-2) !important;
  }

  .border-\[\#E1E1E1\] {
    border-color: #e1e1e1;
  }

  .border-\[\#F6F6F6\] {
    border-color: #f6f6f6;
  }

  .border-black {
    border-color: var(--color-black);
  }

  .border-black\/15 {
    border-color: #00000026;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/15 {
      border-color: color-mix(in oklab, var(--color-black) 15%, transparent);
    }
  }

  .border-black\/20 {
    border-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/20 {
      border-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .border-black\/30 {
    border-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/30 {
      border-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .border-black\/40 {
    border-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/40 {
      border-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .border-primary {
    border-color: var(--color-primary);
  }

  .border-qooWhite-2 {
    border-color: var(--color-qooWhite-2);
  }

  .border-qooWhite-3 {
    border-color: var(--color-qooWhite-3);
  }

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-t-\[\#DBDBDB\] {
    border-top-color: #dbdbdb;
  }

  .\!bg-black\/60 {
    background-color: #0009 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent) !important;
    }
  }

  .\!bg-qooWhite-5 {
    background-color: var(--color-qooWhite-5) !important;
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .bg-\[\#1e1e1e\] {
    background-color: #1e1e1e;
  }

  .bg-\[\#2A2A2A\] {
    background-color: #2a2a2a;
  }

  .bg-\[\#16A34A\] {
    background-color: #16a34a;
  }

  .bg-\[\#506cac\] {
    background-color: #506cac;
  }

  .bg-\[\#BCA280\] {
    background-color: #bca280;
  }

  .bg-\[\#DC2626\] {
    background-color: #dc2626;
  }

  .bg-\[\#EFEFEF\] {
    background-color: #efefef;
  }

  .bg-\[\#F7F7F7\] {
    background-color: #f7f7f7;
  }

  .bg-\[\#ebebeb\] {
    background-color: #ebebeb;
  }

  .bg-\[\#f5f5f5\] {
    background-color: #f5f5f5;
  }

  .bg-\[rgba\(246\,64\,8\,0\.1\)\] {
    background-color: #f640081a;
  }

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

  .bg-black\/30 {
    background-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-black\/70 {
    background-color: #000000b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/70 {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }

  .bg-black\/80 {
    background-color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-inherit {
    background-color: inherit;
  }

  .bg-primary {
    background-color: var(--color-primary);
  }

  .bg-qooWhite-4 {
    background-color: var(--color-qooWhite-4);
  }

  .bg-qooWhite-5 {
    background-color: var(--color-qooWhite-5);
  }

  .bg-qooWhite-6 {
    background-color: var(--color-qooWhite-6);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-transparent\! {
    background-color: #0000 !important;
  }

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

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/12 {
    background-color: #ffffff1f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/12 {
      background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
  }

  .bg-white\/30 {
    background-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/30 {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .bg-none {
    background-image: none;
  }

  .stroke-white {
    stroke: var(--color-white);
  }

  .stroke-\[1px\] {
    stroke-width: 1px;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-center {
    object-position: center;
  }

  .\!p-0 {
    padding: 0 !important;
  }

  .\!p-1 {
    padding: var(--spacing) !important;
  }

  .p-0 {
    padding: 0;
  }

  .p-1 {
    padding: var(--spacing);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-\[2px\] {
    padding: 2px;
  }

  .p-\[5px\] {
    padding: 5px;
  }

  .\!px-4 {
    padding-inline: calc(var(--spacing) * 4) !important;
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-9 {
    padding-inline: calc(var(--spacing) * 9);
  }

  .px-11 {
    padding-inline: calc(var(--spacing) * 11);
  }

  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }

  .px-\[0\.875rem\] {
    padding-inline: .875rem;
  }

  .px-\[16px\] {
    padding-inline: 16px;
  }

  .px-\[25\.25px\] {
    padding-inline: 25.25px;
  }

  .px-\[31px\] {
    padding-inline: 31px;
  }

  .\!py-2 {
    padding-block: calc(var(--spacing) * 2) !important;
  }

  .\!py-4 {
    padding-block: calc(var(--spacing) * 4) !important;
  }

  .\!py-6 {
    padding-block: calc(var(--spacing) * 6) !important;
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-\[1\.375rem\] {
    padding-block: 1.375rem;
  }

  .py-\[2px\] {
    padding-block: 2px;
  }

  .py-\[7px\] {
    padding-block: 7px;
  }

  .py-\[9px\] {
    padding-block: 9px;
  }

  .py-\[10\.37px\] {
    padding-block: 10.37px;
  }

  .py-\[18px\] {
    padding-block: 18px;
  }

  .py-\[32px\] {
    padding-block: 32px;
  }

  .\!pt-0 {
    padding-top: 0 !important;
  }

  .\!pt-4 {
    padding-top: calc(var(--spacing) * 4) !important;
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pt-\[15px\] {
    padding-top: 15px;
  }

  .pt-\[24px\] {
    padding-top: 24px;
  }

  .pr-0 {
    padding-right: 0;
  }

  .pr-1 {
    padding-right: var(--spacing);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .\!pb-0 {
    padding-bottom: 0 !important;
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .\!pl-8 {
    padding-left: calc(var(--spacing) * 8) !important;
  }

  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-\[1\.5rem\] {
    padding-left: 1.5rem;
  }

  .pl-\[5px\] {
    padding-left: 5px;
  }

  .text-center {
    text-align: center;
  }

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

  .text-start {
    text-align: start;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\!text-\[14px\] {
    font-size: 14px !important;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[18px\] {
    font-size: 18px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-\[15px\] {
    --tw-leading: 15px;
    line-height: 15px;
  }

  .leading-\[16px\] {
    --tw-leading: 16px;
    line-height: 16px;
  }

  .\!font-\[500\] {
    --tw-font-weight: 500 !important;
    font-weight: 500 !important;
  }

  .font-\[400\] {
    --tw-font-weight: 400;
    font-weight: 400;
  }

  .font-\[500\] {
    --tw-font-weight: 500;
    font-weight: 500;
  }

  .font-\[600\] {
    --tw-font-weight: 600;
    font-weight: 600;
  }

  .font-\[700\] {
    --tw-font-weight: 700;
    font-weight: 700;
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-\[\#B7B7B7\] {
    color: #b7b7b7;
  }

  .text-\[\#F64108\] {
    color: #f64108;
  }

  .text-\[\#fff\], .text-\[\#ffffff\] {
    color: #fff;
  }

  .text-black {
    color: var(--color-black);
  }

  .text-black\/30 {
    color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-black\/30 {
      color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .text-black\/40 {
    color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-black\/40 {
      color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .text-black\/50 {
    color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-black\/50 {
      color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .text-black\/60 {
    color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-black\/60 {
      color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .text-gray-100 {
    color: var(--color-gray-100);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .text-red-200\! {
    color: var(--color-red-200) !important;
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/20 {
    color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/20 {
      color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .text-white\/30 {
    color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/30 {
      color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .text-white\/45 {
    color: #ffffff73;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/45 {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }

  .text-white\/50 {
    color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/50 {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/85 {
    color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/85 {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .uppercase {
    text-transform: uppercase;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .placeholder-black\/30::placeholder {
    color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder-black\/30::placeholder {
      color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .\!opacity-\[30\%\] {
    opacity: .3 !important;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0px_0px_0px_2px_rgba\(0\,0\,0\,0\.2\)\] {
    --tw-shadow: 0px 0px 0px 2px var(--tw-shadow-color, #0003);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0px_4px_8px_2px_\#0000001A\] {
    --tw-shadow: 0px 4px 8px 2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm, .shadow\/radius {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-\[1\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .\[box-shadow\:0px_0px_0px_2px_rgba\(0\,_0\,_0\,_0\.20\)\] {
    box-shadow: 0 0 0 2px #0003;
  }

  .shadow-primary-200 {
    --tw-shadow-color: #d1e2df;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-primary-200 {
      --tw-shadow-color: color-mix(in oklab, var(--color-primary-200) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-black\/35 {
    --tw-ring-color: #00000059;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-black\/35 {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 35%, transparent);
    }
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .\!filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-\[21px\] {
    --tw-backdrop-blur: blur(21px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[24px\] {
    --tw-backdrop-blur: blur(24px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[height\] {
    transition-property: height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .placeholder\:text-gray-400::placeholder {
    color: var(--color-gray-400);
  }

  .placeholder\:text-white\/40::placeholder {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-white\/40::placeholder {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  @media (hover: hover) {
    .hover\:translate-x-2:hover {
      --tw-translate-x: calc(var(--spacing) * 2);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:bg-\[\#15803D\]:hover {
      background-color: #15803d;
    }

    .hover\:bg-\[\#B91C1C\]:hover {
      background-color: #b91c1c;
    }

    .hover\:bg-black\/90:hover {
      background-color: #000000e6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/90:hover {
        background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
      }
    }

    .hover\:bg-gray-300:hover {
      background-color: var(--color-gray-300);
    }

    .hover\:bg-white\/15:hover {
      background-color: #ffffff26;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/15:hover {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:text-white\/70:hover {
      color: #ffffffb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/70:hover {
        color: color-mix(in oklab, var(--color-white) 70%, transparent);
      }
    }

    .hover\:opacity-70:hover {
      opacity: .7;
    }

    .hover\:after\:scale-x-100:hover:after {
      content: var(--tw-content);
      --tw-scale-x: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-indigo-600:focus {
    --tw-ring-color: var(--color-indigo-600);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus\:ring-inset:focus {
    --tw-ring-inset: inset;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-current:focus-visible {
    outline-color: currentColor;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:transition-none {
      transition-property: none;
    }
  }

  @media not all and (min-width: 1460px) {
    .max-xl2\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 1025px) {
    .max-lg\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 768px) {
    .max-md\:fixed {
      position: fixed;
    }

    .max-md\:top-\[calc\(env\(safe-area-inset-top\,0px\)_\+_4px\)\] {
      top: calc(env(safe-area-inset-top, 0px) + 4px);
    }

    .max-md\:right-0 {
      right: 0;
    }

    .max-md\:right-auto {
      right: auto;
    }

    .max-md\:bottom-0 {
      bottom: 0;
    }

    .max-md\:bottom-\[70px\] {
      bottom: 70px;
    }

    .max-md\:left-4 {
      left: calc(var(--spacing) * 4);
    }

    .max-md\:my-2 {
      margin-block: calc(var(--spacing) * 2);
    }

    .max-md\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }

    .max-md\:mr-2\.5 {
      margin-right: calc(var(--spacing) * 2.5);
    }

    .max-md\:mb-3 {
      margin-bottom: calc(var(--spacing) * 3);
    }

    .max-md\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }

    .max-md\:ml-0 {
      margin-left: 0;
    }

    .max-md\:ml-2 {
      margin-left: calc(var(--spacing) * 2);
    }

    .max-md\:flex {
      display: flex;
    }

    .max-md\:hidden {
      display: none;
    }

    .max-md\:\!h-full {
      height: 100% !important;
    }

    .max-md\:h-\[calc\(100vh_-_64px\)\] {
      height: calc(100vh - 64px);
    }

    .max-md\:h-full {
      height: 100%;
    }

    .max-md\:max-h-\[74vh\] {
      max-height: 74vh;
    }

    .max-md\:max-h-\[100\%\] {
      max-height: 100%;
    }

    .max-md\:min-h-0 {
      min-height: 0;
    }

    .max-md\:\!w-full {
      width: 100% !important;
    }

    .max-md\:w-\[100\%\] {
      width: 100%;
    }

    .max-md\:w-auto {
      width: auto;
    }

    .max-md\:w-fit {
      width: fit-content;
    }

    .max-md\:w-full {
      width: 100%;
    }

    .max-md\:\!max-w-full {
      max-width: 100% !important;
    }

    .max-md\:max-w-\[100\%\], .max-md\:max-w-full {
      max-width: 100%;
    }

    .max-md\:flex-1 {
      flex: 1;
    }

    .max-md\:flex-col {
      flex-direction: column;
    }

    .max-md\:flex-wrap {
      flex-wrap: wrap;
    }

    .max-md\:\!items-start {
      align-items: flex-start !important;
    }

    .max-md\:items-center {
      align-items: center;
    }

    .max-md\:items-stretch {
      align-items: stretch;
    }

    .max-md\:justify-end {
      justify-content: flex-end;
    }

    .max-md\:gap-0 {
      gap: 0;
    }

    .max-md\:overflow-hidden {
      overflow: hidden;
    }

    .max-md\:border-t {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }

    .max-md\:border-black\/30 {
      border-color: #0000004d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .max-md\:border-black\/30 {
        border-color: color-mix(in oklab, var(--color-black) 30%, transparent);
      }
    }

    .max-md\:bg-white {
      background-color: var(--color-white);
    }

    .max-md\:px-2 {
      padding-inline: calc(var(--spacing) * 2);
    }

    .max-md\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .max-md\:px-9 {
      padding-inline: calc(var(--spacing) * 9);
    }

    .max-md\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }

    .max-md\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }

    .max-md\:pr-0 {
      padding-right: 0;
    }

    .max-md\:pr-5 {
      padding-right: calc(var(--spacing) * 5);
    }

    .max-md\:pb-28 {
      padding-bottom: calc(var(--spacing) * 28);
    }

    .max-md\:pb-\[calc\(env\(safe-area-inset-bottom\)\+0\.75rem\)\] {
      padding-bottom: calc(env(safe-area-inset-bottom) + .75rem);
    }
  }

  @media not all and (min-width: 640px) {
    .max-sm\:w-full {
      width: 100%;
    }
  }

  @media (min-width: 640px) {
    .sm\:mx-0 {
      margin-inline: 0;
    }

    .sm\:w-\[346px\] {
      width: 346px;
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:p-9 {
      padding: calc(var(--spacing) * 9);
    }

    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .sm\:leading-6 {
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 768px) {
    .md\:top-9 {
      top: calc(var(--spacing) * 9);
    }

    .md\:top-\[12px\] {
      top: 12px;
    }

    .md\:right-9 {
      right: calc(var(--spacing) * 9);
    }

    .md\:right-\[36px\] {
      right: 36px;
    }

    .md\:left-9 {
      left: calc(var(--spacing) * 9);
    }

    .md\:left-auto {
      left: auto;
    }

    .md\:m-6 {
      margin: calc(var(--spacing) * 6);
    }

    .md\:mx-9 {
      margin-inline: calc(var(--spacing) * 9);
    }

    .md\:mt-0 {
      margin-top: 0;
    }

    .md\:mt-3 {
      margin-top: calc(var(--spacing) * 3);
    }

    .md\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }

    .md\:mr-6 {
      margin-right: calc(var(--spacing) * 6);
    }

    .md\:mb-1 {
      margin-bottom: var(--spacing);
    }

    .md\:mb-3 {
      margin-bottom: calc(var(--spacing) * 3);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:hidden {
      display: none;
    }

    .md\:h-\[calc\(100vh_-_19\.5rem\)\] {
      height: calc(100vh - 19.5rem);
    }

    .md\:h-\[calc\(100vh_-_20\.5rem\)\] {
      height: calc(100vh - 20.5rem);
    }

    .md\:h-fit {
      height: fit-content;
    }

    .md\:\!max-h-\[calc\(100vh_-_400px\)\] {
      max-height: calc(100vh - 400px) !important;
    }

    .md\:max-h-\[70vh\] {
      max-height: 70vh;
    }

    .md\:min-h-\[7\.1rem\] {
      min-height: 7.1rem;
    }

    .md\:min-h-\[250px\] {
      min-height: 250px;
    }

    .md\:w-3\/12 {
      width: 25%;
    }

    .md\:w-fit {
      width: fit-content;
    }

    .md\:max-w-\[360px\] {
      max-width: 360px;
    }

    .md\:max-w-\[370px\] {
      max-width: 370px;
    }

    .md\:max-w-\[384px\] {
      max-width: 384px;
    }

    .md\:min-w-\[300px\] {
      min-width: 300px;
    }

    .md\:origin-center {
      transform-origin: center;
    }

    .md\:-translate-x-\[100vw\] {
      --tw-translate-x: calc(100vw * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .md\:scale-100 {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .md\:flex-col {
      flex-direction: column;
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:justify-start {
      justify-content: flex-start;
    }

    .md\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }

    .md\:rounded-\[30px\] {
      border-radius: 30px;
    }

    .md\:p-1\.5 {
      padding: calc(var(--spacing) * 1.5);
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .md\:py-\[1\.0625rem\] {
      padding-block: 1.0625rem;
    }

    .md\:pt-0 {
      padding-top: 0;
    }

    .md\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .md\:text-\[16px\] {
      font-size: 16px;
    }

    .md\:text-\[20px\] {
      font-size: 20px;
    }

    .md\:opacity-100 {
      opacity: 1;
    }
  }

  @media (min-width: 1025px) {
    .lg\:hidden {
      display: none;
    }

    .lg\:inline {
      display: inline;
    }

    .lg\:h-\[42px\] {
      height: 42px;
    }

    .lg\:w-1\/2 {
      width: 50%;
    }

    .lg\:w-1\/3\! {
      width: 33.3333% !important;
    }

    .lg\:w-2\/3 {
      width: 66.6667%;
    }

    .lg\:w-\[126px\] {
      width: 126px;
    }

    .lg\:rounded-\[30px\] {
      border-radius: 30px;
    }

    .lg\:text-\[16px\] {
      font-size: 16px;
    }
  }

  @media (min-width: 1280px) {
    .xl\:right-6 {
      right: calc(var(--spacing) * 6);
    }

    .xl\:right-50 {
      right: calc(var(--spacing) * 50);
    }

    .xl\:bottom-4 {
      bottom: calc(var(--spacing) * 4);
    }

    .xl\:left-auto {
      left: auto;
    }

    .xl\:mb-0 {
      margin-bottom: 0;
    }

    .xl\:hidden {
      display: none;
    }

    .xl\:w-\[20\.5rem\] {
      width: 20.5rem;
    }

    .xl\:max-w-\[20\.5rem\] {
      max-width: 20.5rem;
    }

    .xl\:max-w-none {
      max-width: none;
    }

    .xl\:items-end {
      align-items: flex-end;
    }
  }

  @media (min-width: 1460px) {
    .xl2\:hidden\! {
      display: none !important;
    }
  }

  @media (min-width: 1536px) {
    .\32 xl\:grid {
      display: grid;
    }

    .\32 xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (min-width: 1760px) {
    .\33 xl\:grid {
      display: grid;
    }

    .\33 xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .\33 xl\:pt-\[50px\] {
      padding-top: 50px;
    }
  }

  @media (min-width: 1920px) {
    .\34 xl\:pt-\[77px\] {
      padding-top: 77px;
    }

    .\34 xl\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }

  .\[\&\>g\]\:pointer-events-auto > g {
    pointer-events: auto;
  }

  .\[\&\>g\]\:cursor-pointer > g {
    cursor: pointer;
  }

  .\[\&\>g\]\:transition-all > g {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .\[\&\>image\]\:pointer-events-auto > image {
    pointer-events: auto;
  }

  .\[\&\>image\]\:cursor-pointer > image {
    cursor: pointer;
  }

  .\[\&\>image\]\:transition-all > image {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .\[\&\>rect\]\:pointer-events-auto > rect {
    pointer-events: auto;
  }

  .\[\&\>rect\]\:cursor-pointer > rect {
    cursor: pointer;
  }

  .\[\&\>rect\]\:transition-all > rect {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  display: none;
}

.hide-scrollbar {
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

div:where(.swal2-container) div:where(.swal2-actions) {
  flex-direction: row-reverse !important;
}

input {
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

input,
textarea {
  width: 100%;
  background-color: transparent;
}

select:invalid,
select option[value=""] {
  color: rgb(156, 163, 175);
}

input[type=text] {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

input[type=checkbox]:checked {
  border-color: transparent;
  background-color: currentColor;
}

input[type=checkbox]:checked::after {
  background-color: white;
}

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: flex;
  height: 15px;
  width: 15px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  padding: 0;
  outline: none;
}

input[type=checkbox] {
  width: 24px;
  height: 24px;
  color: #29cca7;
  vertical-align: middle;
  -webkit-appearance: none;
  background: none;
  border: 0;
  outline: 0;
  flex-grow: 0;
  border-radius: 50%;
  background-color: #ffffff;
  transition: background 300ms;
  cursor: pointer;
}

/* Pseudo element for check styling */
[type=checkbox]::before {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #ccd3d8;
}

/* Checked */
[type=checkbox]:checked {
  background-color: currentcolor;
}

[type=checkbox]:checked::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}

/* Disabled */
[type=checkbox]:disabled {
  background-color: #ccd3d8;
  opacity: 0.84;
  cursor: not-allowed;
}

/* IE */
[type=checkbox]::-ms-check {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #ccd3d8;
}

[type=checkbox]:checked::-ms-check {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0px;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */
  overflow: -moz-scrollbars-none;
}

.error-message {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.875rem;
  color: rgb(127, 29, 29);
  background-color: white;
}

.worksheet form input:focus,
.worksheet form textarea:focus,
.worksheet form select:focus {
  border: 1px solid;
  box-shadow: 0 0 0 2px #d1e2df;
  border-color: var(--color-primary);
}

.worksheet form input.vs__search:focus {
  box-shadow: none !important;
  border: none !important;
}

.worksheet .vs__dropdown-toggle {
  padding: 15px 16px !important;
  border-radius: 8px !important;
  border: 1px solid #ccc;
  height: 100%;
}

input.error,
.error.label-error,
textarea.error,
select.error {
  border: 1px solid #e62b24;
  box-shadow: 0px 0px 0px 2px rgba(230, 36, 36, 0.2);
}

.worksheet .error .vs__dropdown-toggle {
  border: 1px solid #e62b24 !important;
  box-shadow: 0px 0px 0px 2px rgba(230, 36, 36, 0.2);
}

.worksheet .vs__search::placeholder,
.worksheet .vs__search:focus::placeholder {
  color: rgb(156, 163, 175);
}

#onfido-mount .onfido-sdk-ui-Complete-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.qoo-icon:hover p {
  color: white !important;
}

.qoo-icon.qoo-icon-open p {
  color: white !important;
}

.toggleDetails .toggleContainer::before {
  box-shadow: none;
  border: none;
}

.toggleDetails .toggleContainer div {
  padding: 1px 4px;
}

.toggleContainer::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius: 50px;
  background: white;
  padding: 2px;
  box-sizing: border-box;
  transition: all 0.3s;
  border: 2px solid;
  background: #fff;
  box-shadow: 0 0 0 2px #b3cdc9;
  border-color: rgb(36, 93, 230);
}

.shadow-my {
  box-shadow: 0px 0px 0px 2px var(--tw-shadow-color);
}

.sort-by .toggleContainer::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius: 50px;
  padding: 2px;
  box-sizing: border-box;
  transition: all 0.3s;
  border: 0px solid;
  box-shadow: none;
  background-color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
}

.MultiRangeSliderContainer .multi-range-slider .thumb::before {
  margin: -5px !important;
  width: 12px !important;
  height: 12px !important;
  background-color: rgb(36, 93, 230) !important;
  border: 1px solid white !important;
}

.MultiRangeSliderContainer .multi-range-slider .bar-inner {
  background-color: white !important;
  border: none;
  height: 3px;
}

.MultiRangeSliderContainer .multi-range-slider .bar-inner .bar-inner-left {
  background-color: white !important;
}

.MultiRangeSliderContainer .multi-range-slider .bar-inner .bar-inner-right {
  background-color: white !important;
}

.sort-by .toggleCheckbox:checked + .toggleContainer div:first-child {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s;
}

.sort-by .toggleCheckbox:checked + .toggleContainer div:last-child {
  color: white;
  transition: color 0.3s;
}

.sort-by .toggleCheckbox + .toggleContainer div:first-child {
  color: white;
  transition: color 0.3s;
}

.sort-by .toggleCheckbox + .toggleContainer div:last-child {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s;
}

.main-menu {
  background-color: rgb(31, 41, 55);
}

.main-menu ul {
  background-color: white;
}

.main-menu ul li a {
  color: black;
}

.button {
  color: white;
  transition: all 450ms ease-smooth;
}

.button:hover {
  background-color: rgb(229, 231, 235);
}

.button:active {
  background-color: rgb(107, 114, 128);
}

.button.dark {
  background-color: white;
}

.button.dark:hover {
  background-color: rgb(107, 114, 128);
  color: white;
}

.button.dark:active {
  background-color: rgb(229, 231, 235);
  color: white;
}

.animate-pulsePlus {
  animation: pulsePlus 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulsePlus {
  50% {
    opacity: 0.5;
  }
}
.img-drag {
  position: relative;
  height: 20vw;
  max-height: 200px;
  min-height: 150px;
  width: 16vw;
  min-width: 120px;
  max-width: 160px;
  cursor: grab;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.box-animation {
  position: relative;
  border: 1px solid currentColor;
}

.box-animation_2 {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  border: 1px solid currentColor;
}

.stars {
  color: rgb(220, 38, 38);
}

.o-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 2500px;
  padding-left: 8.5vw;
  padding-right: 8.5vw;
}

.p-container {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  height: 100%;
  max-width: 2500px;
  padding-left: 10vw;
  padding-right: 10vw;
}

.carousel-cell {
  position: relative;
  height: 0;
  overflow: hidden;
  background-color: rgb(243, 244, 246);
  padding-bottom: calc(100% / var(--aspect-ratio));
}

.img-unit {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
}

#char-about b {
  font-weight: 300;
  font-style: italic;
}

.is-filtered {
  font-weight: 300;
}

.webkit-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  z-index: 1;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Ultralight-Dvb4Y4p6.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-UltralightItalic-BF1-1SE6.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Thin-Dlj_0ZL0.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-ThinItalic-LU8UAQSN.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Light-aDlMluiV.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-LightItalic-lQTxS1hE.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Regular-DF_3XEGl.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-RegularItalic-CFA72IC_.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Medium-DSttQARu.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-MediumItalic-C8uf2A7q.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Semibold-Dg2-djaL.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-SemiboldItalic-Dj8jjjxr.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Bold-CkqE-6tD.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-BoldItalic-q-NvD6qt.otf") format("opentype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Heavy-Cj-4znqf.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-HeavyItalic-Dt8wbU-f.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-Black-85SZiFK-.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/SF-Pro-Display-BlackItalic-Dr4U8WIP.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
}
@keyframes slideIn {
  0% {
    transform: translateX(calc(-50vw + 9rem));
  }
  50% {
    transform: translateX(calc((-50vw + 9rem) / 2));
    width: 0;
  }
  100% {
    transform: translateX(0);
  }
}
.relative .animation-icon {
  animation: slideIn 0.5s ease-in-out;
}

.toggleContainer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 4px solid rgba(0, 0, 0, 0);
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
}

.toggleCheckbox:checked + .toggleContainer::before {
  left: 50%;
}

.toggleCheckbox:checked + .toggleContainer::after {
  left: calc(50% + 2.7px);
}

.toggleContainer div {
  padding: 4.5px;
  text-align: center;
  z-index: 1;
}

.toggleCheckbox {
  display: none !important;
}

.toggleCheckbox:checked + .toggleContainer div:first-child {
  color: white;
  transition: color 0.3s;
}

.toggleCheckbox:checked + .toggleContainer div:last-child {
  color: #343434;
  transition: color 0.3s;
}

.toggleCheckbox + .toggleContainer div:first-child {
  color: #343434;
  transition: color 0.3s;
}

.toggleCheckbox + .toggleContainer div:last-child {
  color: white;
  transition: color 0.3s;
}

.multi-range-slider {
  border: none !important;
  padding: 1.6rem 0.81rem 1.6rem 0.375rem !important;
  box-shadow: none !important;
}

.multi-range-slider .bar {
  margin-top: 0.5rem !important;
}

.multi-range-slider .bar-right,
.multi-range-slider .bar-left {
  background-color: rgba(255, 255, 255, 0.15) !important;
  height: 1px !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.multi-range-slider .label {
  color: rgba(255, 255, 255, 0.6);
}

.multi-range-slider .thumb:active .caption {
  display: none !important;
}

.button-wrapper {
  position: relative;
  width: 100%;
  text-align: center;
}

.button-wrapper .label {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
}

#upload {
  display: inline-block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  top: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}

.v-popper__arrow-container {
  display: none !important;
}

/* Style */
.v-popper--theme-black .v-popper__inner {
  background: #1c1c1c;
  color: #ffffff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.24);
}

.v-popper--theme-black .v-popper__arrow-outer {
  border-color: #1c1c1c !important;
}

.v-popper--theme-black .v-popper__arrow-outer {
  visibility: visible;
}

.v-popper--theme-black .v-popper__arrow-inner {
  visibility: visible;
}

.v-popper--theme-black .v-popper__arrow-container {
  display: block !important;
}

.my-custom-theme .v-popper__inner {
  background: #1c1c1c;
  color: #ffffff;
  padding: 0px;
  border-radius: 12px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.24);
}

.my-custom-theme .v-popper__arrow-inner {
  border-color: #1c1c1c !important;
}

.my-custom-theme .v-popper__arrow-outer {
  border-color: #1c1c1c !important;
  visibility: visible;
}

.my-custom-theme .v-popper__arrow-inner {
  visibility: visible;
}

.my-custom-theme .v-popper__arrow-container {
  display: block !important;
}

.v-popper--theme-dropdown .v-popper__inner {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* The floor-list popover is mounted inside the list's own scroll area rather
   than on <body>. That is what makes it behave like part of the list: it
   covers the cards, and the scroll area's overflow clips it at the top edge,
   so it slides under the toolbar and the header instead of floating over the
   menu. Fighting this from the body would have meant out-ranking the header,
   and the popover would then always sit on top of it. */
.v-popper__popper.floors-popper {
  z-index: 20;
}

:root {
  --toastify-color-light:#fff;
  --toastify-color-dark:#121212;
  --toastify-color-info:#3498db;
  --toastify-color-success:#07bc0c;
  --toastify-color-warning:#f1c40f;
  --toastify-color-error:#e74c3c;
  --toastify-color-transparent:#ffffffb3;
  --toastify-icon-color-info:var(--toastify-color-info);
  --toastify-icon-color-success:var(--toastify-color-success);
  --toastify-icon-color-warning:var(--toastify-color-warning);
  --toastify-icon-color-error:var(--toastify-color-error);
  --toastify-toast-width:320px;
  --toastify-toast-background:#fff;
  --toastify-toast-min-height:64px;
  --toastify-toast-max-height:800px;
  --toastify-font-family:sans-serif;
  --toastify-z-index:9999;
  --toastify-text-color-light:#757575;
  --toastify-text-color-dark:#fff;
  --toastify-text-color-info:#fff;
  --toastify-text-color-success:#fff;
  --toastify-text-color-warning:#fff;
  --toastify-text-color-error:#fff;
  --toastify-spinner-color:#616161;
  --toastify-spinner-color-empty-area:#e0e0e0;
  --toastify-color-progress-light:linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
  --toastify-color-progress-dark:#bb86fc;
  --toastify-color-progress-info:var(--toastify-color-info);
  --toastify-color-progress-success:var(--toastify-color-success);
  --toastify-color-progress-warning:var(--toastify-color-warning);
  --toastify-color-progress-error:var(--toastify-color-error);
  --toastify-color-progress-colored:#ddd;
}

.Toastify__toast-container {
  box-sizing: border-box;
  color: #fff;
  padding: 4px;
  position: fixed;
  transform: translate3d(0, 0, var(--toastify-z-index) px);
  width: var(--toastify-toast-width);
  z-index: var(--toastify-z-index);
}

.Toastify__toast-container--top-left {
  left: 1em;
  top: 1em;
}

.Toastify__toast-container--top-center {
  left: 50%;
  top: 1em;
  transform: translateX(-50%);
}

.Toastify__toast-container--top-right {
  right: 1em;
  top: 1em;
}

.Toastify__toast-container--bottom-left {
  bottom: 1em;
  left: 1em;
}

.Toastify__toast-container--bottom-center {
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
}

.Toastify__toast-container--bottom-right {
  bottom: 1em;
  right: 1em;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    left: 0;
    margin: 0;
    padding: 0;
    width: 100vw;
  }
  .Toastify__toast-container--top-center, .Toastify__toast-container--top-left, .Toastify__toast-container--top-right {
    top: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-right {
    bottom: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    left: auto;
    right: 0;
  }
}
.Toastify__toast {
  border-radius: 4px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1019607843), 0 2px 15px 0 rgba(0, 0, 0, 0.0509803922);
  box-sizing: border-box;
  cursor: pointer;
  direction: ltr;
  display: flex;
  font-family: var(--toastify-font-family);
  justify-content: space-between;
  margin-bottom: 1rem;
  max-height: var(--toastify-toast-max-height);
  min-height: var(--toastify-toast-min-height);
  overflow: hidden;
  padding: 8px;
  position: relative;
  z-index: 0;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast-body {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  margin: auto 0;
  padding: 6px;
  white-space: pre-wrap;
}

.Toastify__toast-body > div:last-child {
  flex: 1;
}

.Toastify__toast-icon {
  display: flex;
  flex-shrink: 0;
  margin-inline-end: 10px;
  width: 20px;
}

.Toastify__toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
  width: 100%;
}

.Toastify__toast-text-title {
  font-weight: 600;
}

.Toastify__toast-text-content {
  opacity: 0.92;
}

.Toastify--animate {
  animation-duration: 0.7s;
  animation-fill-mode: both;
}

.Toastify--animate-icon {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast {
    border-radius: 0;
    margin-bottom: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--colored.Toastify__toast--default, .Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  background: var(--toastify-color-info);
  color: var(--toastify-text-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  background: var(--toastify-color-success);
  color: var(--toastify-text-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  background: var(--toastify-color-warning);
  color: var(--toastify-text-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  background: var(--toastify-color-error);
  color: var(--toastify-text-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
  background: var(--toastify-color-progress-colored);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  align-self: flex-start;
  background: rgba(0, 0, 0, 0);
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  outline: none;
  padding: 0;
  transition: 0.3s ease;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentcolor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:focus, .Toastify__close-button:hover {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  bottom: 0;
  height: 5px;
  left: 0;
  opacity: 0.7;
  position: absolute;
  transform-origin: left;
  width: 100%;
  z-index: var(--toastify-z-index);
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  left: auto;
  right: 0;
  transform-origin: right;
}

.Toastify__spinner {
  animation: Toastify__spin 0.65s linear infinite;
  border: 2px solid;
  border-color: var(--toastify-spinner-color-empty-area);
  border-radius: 100%;
  border-right-color: var(--toastify-spinner-color);
  box-sizing: border-box;
  height: 20px;
  width: 20px;
}

@keyframes Toastify__bounceInRight {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInLeft {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInUp {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--bottom-left, .Toastify__bounce-enter--top-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--bottom-right, .Toastify__bounce-enter--top-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--bottom-left, .Toastify__bounce-exit--top-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--bottom-right, .Toastify__bounce-exit--top-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__none {
  0%, 60%, 75%, 90%, to {
    animation-duration: 0;
    animation-timing-function: none;
  }
  0% {
    opacity: 1;
    transform: translateZ(0);
  }
  to {
    transform: translateZ(0);
  }
}
.Toastify__none-enter--bottom-center, .Toastify__none-enter--bottom-left, .Toastify__none-enter--bottom-right, .Toastify__none-enter--top-center, .Toastify__none-enter--top-left, .Toastify__none-enter--top-right {
  animation-name: Toastify__none;
}

@keyframes Toastify__zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    animation-timing-function: ease-in;
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotateX(10deg);
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  0% {
    transform: perspective(400px);
  }
  30% {
    opacity: 1;
    transform: perspective(400px) rotateX(-20deg);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  0% {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__slideInLeft {
  0% {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__slideInUp {
  0% {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__slideInDown {
  0% {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__slideOutRight {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(110%, 0, 0);
    visibility: hidden;
  }
}
@keyframes Toastify__slideOutLeft {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(-110%, 0, 0);
    visibility: hidden;
  }
}
@keyframes Toastify__slideOutDown {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, 500px, 0);
    visibility: hidden;
  }
}
@keyframes Toastify__slideOutUp {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, -500px, 0);
    visibility: hidden;
  }
}
.Toastify__slide-enter--bottom-left, .Toastify__slide-enter--top-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--bottom-right, .Toastify__slide-enter--top-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--bottom-left, .Toastify__slide-exit--top-left {
  animation-name: Toastify__slideOutLeft;
}

.Toastify__slide-exit--bottom-right, .Toastify__slide-exit--top-right {
  animation-name: Toastify__slideOutRight;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
}

@keyframes Toastify__spin {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
.floorplans table.vgt-table {
  table-layout: auto;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  border-collapse: separate;
  /* border-collapse: collapse; */
  border-spacing: 0 5px;
}

.floorplans .vgt-table.bordered td,
.floorplans .vgt-table.bordered th {
  border: 0px;
  vertical-align: middle;
  white-space: nowrap !important;
}

.floorplans .vgt-table.bordered td {
  background-color: #fff;
  color: #000;
  font-size: 14px;
  vertical-align: middle;
}

.floorplans .vgt-table.bordered th {
  background: transparent;
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
}

.floorplans table.vgt-table tr th:first-child,
.floorplans table.vgt-table tr td:first-child {
  border-radius: 12px 0 0 12px;
}

.floorplans table.vgt-table tr th:last-child,
.floorplans table.vgt-table tr td:last-child {
  border-radius: 0 12px 12px 0;
}

.floorplans .show-worksheet table.vgt-table tr td:last-child {
  display: flex;
  justify-content: flex-end;
}

.floorplans table.vgt-table td.pt-0 {
  padding-top: 0 !important;
}

.floorplans .Vue-Good-Table .vgt-fixed-header {
  background-color: #F2F2F2;
}

.floorplans .Vue-Good-Table table.vgt-table tbody {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  overflow: -moz-scrollbars-none;
}
.floorplans .Vue-Good-Table table.vgt-table tbody::-webkit-scrollbar {
  display: none;
  width: 0px;
}

.floorplans .Vue-Good-Table .vgt-fixed-header table.vgt-table {
  border-collapse: collapse;
}

.floorplans .Vue-Good-Table .vgt-fixed-header {
  padding-left: 0.72rem;
  padding-right: 0.72rem;
  margin-left: 0.5px;
  margin-top: 0.5px;
  border-radius: 10px;
  padding-bottom: 0.75rem;
  padding-top: 0.5rem;
  margin-right: 1px !important;
  z-index: 2;
}
.floorplans .Vue-Good-Table .vgt-fixed-header table.vgt-table tr th:first-child,
.floorplans .Vue-Good-Table .vgt-fixed-header table.vgt-table tr th:last-child {
  border-radius: 0 !important;
}

.floorplans .vgt-responsive {
  padding: 10px;
  border-radius: 12px;
  overflow-x: hidden !important;
  margin-top: 2px !important;
  border: 1px solid #CCCCCC;
  background: #F2F2F2;
}

.scroll-hidden .Vue-Good-Table .vgt-responsive {
  scrollbar-width: none !important;
}

.floorplans .Vue-Good-Table .vgt-responsive {
  max-height: calc(100vh - 11.5rem);
}
.floorplans .Vue-Good-Table .vgt-responsive thead {
  visibility: hidden;
}

table.vgt-table {
  font-size: 16px;
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  border: 1px solid #e1e1e1;
}
table.vgt-table td {
  padding: 0.75em 0.75em 0.75em 0.75em;
  vertical-align: top;
  border-bottom: 1px solid #e1e1e1;
  color: #000;
}
table.vgt-table tr.clickable {
  cursor: pointer;
}
table.vgt-table tr.clickable:hover {
  background-color: #f5f5f5;
}

/* Available Units (model detail + compare).
 *
 * The rule near the top of this file pins every cell to
 * `white-space: nowrap !important`, so a four-column row could only ever
 * grow past the card. The card clips it (`.vgt-responsive` is
 * `overflow-x: hidden`) with no scrollbar to recover it, so whatever sat in
 * the last column — the worksheet button and its badge — was simply cut in
 * half at the card's edge. Squeezing the columns is not enough: the combined
 * min-content width of the labels, a formatted price and the Balcony View
 * control still exceeds the space. When the list is narrow the row therefore
 * stops behaving like a table row and becomes a wrapping flex line, and cells
 * that do not fit drop to the next line instead of overflowing.
 *
 * Keyed to the list's own width, not the viewport. The pane holding this list
 * is `w-full` on phones but `lg:w-1/3` from 1024px up, so it is at its
 * NARROWEST just above the old `max-width: 1024px` media query — a row with a
 * real price measured 360px inside a 310px card there, and the whole action
 * cluster hung 50px outside the card. One container query covers the phone
 * and the narrow desktop pane with a single row layout.
 *
 * The white background and rounded corners live on the cells in the table
 * layout, so they move up to the row here, otherwise each cell would render
 * as its own detached white block.
 *
 * Two containers under one name, because the two screens that show this list
 * hang the "Available Units" caption in different places: inside the list on
 * compare, alongside it on the detail page. Everything inside the list
 * resolves to the nearer of the two and so is measured against the list
 * itself; the detail page's caption resolves to `.main`, which is the same
 * inline size there.
 */
.floorplans .model-detail .main,
.floorplans .model-detail .Vue-Good-Table {
  container: unit-list/inline-size;
}

/* Per-cell labels ("Suite:", "Orientation:") and the caption only earn their
 * space in the stacked layout; the table layout has the floating column
 * header for that. All three are switched by the one query, so the list can
 * never end up labelled twice or not at all.
 */
.floorplans .model-detail .unit-cell-label,
.floorplans .model-detail .unit-list-caption,
.floorplans .model-detail .unit-balcony-icon {
  display: none;
}

@container unit-list (width < 30rem) {
  .floorplans .model-detail .unit-cell-label,
  .floorplans .model-detail .unit-list-caption {
    display: block;
  }
  /* "Balcony View" becomes the panoramic mark once the row is a card. The
   * words are the widest thing competing with the suite details for the
   * card's one line, and the icon says the same in a fifth of the space.
   * Swapped on the same query that builds the card, so the two can never
   * both show or both vanish; the button keeps its `aria-label` either way.
   * The underline belongs to the words, so it goes with them.
   */
  .floorplans .model-detail .unit-balcony-icon {
    display: block;
  }
  .floorplans .model-detail .unit-balcony-text {
    display: none;
  }
  .floorplans .model-detail button:has(> .unit-balcony-icon) {
    text-decoration: none;
  }
  .floorplans .model-detail .Vue-Good-Table table.vgt-table,
  .floorplans .model-detail .Vue-Good-Table table.vgt-table tbody {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .floorplans .model-detail .Vue-Good-Table {
    /* `nowrap`, so "Balcony View" stays on the suite's own line instead of
     * dropping to a second one and doubling the card's height. Wrapping used
     * to be the escape valve for a row too wide for the card - a unit with a
     * real price measures ~360px inside a 310px card - but it spent the whole
     * card width to solve it. The cells below can absorb that pressure
     * themselves now, so the row holds one line at every width.
     */
  }
  .floorplans .model-detail .Vue-Good-Table table.vgt-table tbody tr {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 5px;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 12px;
  }
  .floorplans .model-detail .Vue-Good-Table table.vgt-table.bordered tbody td {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    /* `min-width: 0` overrides the `auto` minimum a flex item gets from its
     * content, which is what stopped these from shrinking. With the row no
     * longer wrapping, these text cells are what give way when the row runs
     * out of room - `overflow-wrap` above lets their value break - so the
     * action cluster is never the thing pushed out of the card.
     */
    min-width: 0;
  }
  .floorplans .model-detail .Vue-Good-Table {
    /* The action cluster is the one thing in the row that cannot reflow, so
     * it holds its natural width and sits at the end of the line rather than
     * being the cell that gets squeezed.
     */
  }
  .floorplans .model-detail .Vue-Good-Table table.vgt-table.bordered tbody td:last-child {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .floorplans .model-detail .Vue-Good-Table {
    /* Each cell carries its own label here, so the floating column header
     * would just repeat them. Hidden rather than removed: it is what the
     * "Available Units" caption is positioned over, and dropping it out of
     * the box would pull the first row up underneath that caption.
     */
  }
  .floorplans .model-detail .Vue-Good-Table .vgt-fixed-header thead {
    visibility: hidden;
  }
  .floorplans .model-detail .Vue-Good-Table {
    /* Nothing can overflow now, so the sideways scroller is redundant. */
  }
  .floorplans .model-detail .Vue-Good-Table .scroll-table-container {
    overflow-x: hidden;
  }
}
/* Wide enough for the table layout, but the columns are still sized from
 * their content, so a long enough price could push the last column back out
 * of the card. Holding the action column at its natural width makes the text
 * columns absorb the pressure by wrapping instead.
 *
 * `min-width` rather than `width`: the `.show-worksheet` rule above turns
 * this cell into a flex box, so a percentage width is taken literally instead
 * of being read as a table column hint.
 */
@container unit-list (width >= 30rem) {
  .floorplans .model-detail .Vue-Good-Table table.vgt-table.bordered tbody td:last-child {
    min-width: max-content;
    white-space: nowrap !important;
  }
  .floorplans .model-detail .Vue-Good-Table table.vgt-table.bordered tbody td:not(:last-child) {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}