.group {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.row-group {
  align-items: flex-start;
  gap: var(--spacing-12);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.row {
  align-items: flex-start;
  gap: var(--spacing-12);
  align-self: stretch;
  display: flex;
}

.header-text-container {
  align-items: flex-start;
  gap: var(--spacing-8);
  align-self: stretch;
  display: flex;
}

.header-text {
  color: var(--text-strong, #000000e6);
  font-feature-settings: "liga" off, "clig" off;
  font-size: var(--small-text);
  font-style: normal;
  font-weight: var(--font-weight-strong);
  line-height: var(--small-text-line-height);
  letter-spacing: .5px;
  flex: 1 0 0;
}

.uppercase-text {
  color: var(--text-weak);
  font-feature-settings: "liga" off, "clig" off;
  font-size: var(--tiny-text, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--tiny-text-line-height, 20px);
  letter-spacing: 2px;
  text-transform: uppercase;
  flex: 1 0 0;
}

.header-text-flex-container {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  flex: 1 0 0;
  display: flex;
}

.button-box {
  padding: var(--spacing-12);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4);
  border-radius: var(--corner-radius-12);
  border: 1px solid var(--stroke-weak);
  background: var(--background-base);
  cursor: pointer;
  box-sizing: border-box;
  flex-direction: column;
  flex: 1 0 0;
  width: 117px;
  height: 92px;
  display: flex;
  position: relative;
}

.button-box-selected {
  border-radius: var(--corner-radius-12);
  border: 2px solid var(--stroke-selected);
}

.button-box-empty-container {
  width: 117px;
}

.button-box:hover {
  background: var(--fill-hover);
}

.button-box:active {
  background: var(--fill-press);
}

.button-box-image {
  aspect-ratio: 1;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.button-box-text-container {
  align-items: flex-start;
  gap: var(--spacing-8);
  width: 94px;
  display: flex;
}

.button-box-text {
  color: var(--text-strong);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-size: var(--tiny-text);
  font-style: normal;
  font-weight: var(--font-weight-weak);
  line-height: var(--tiny-text-line-height);
  letter-spacing: .5px;
  flex: 1 0 0;
}

.button-box-item {
  aspect-ratio: 1;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  padding: 5.207px 8px 5px;
  display: flex;
}

.button-box-item-image {
  aspect-ratio: 56 / 61.79;
  flex-shrink: 0;
  width: 56px;
  height: 61.793px;
}

.btn-box-selected {
  border-radius: var(--corner-radius-12);
  border: 1px solid var(--stroke-selected);
  background: var(--fill-brand-weak);
}

.header-container {
  height: var(--header-height);
  padding: 0 var(--spacing-32);
  align-items: center;
  gap: var(--spacing-48);
  border-bottom: 1px solid var(--stroke-weak);
  background: var(--background-base);
  display: flex;
}

.header-left {
  align-items: center;
  gap: var(--spacing-48);
  flex: 1 0 0;
  display: flex;
}

.header-right {
  align-items: center;
  gap: var(--spacing-16);
  display: flex;
}

.header-logo-container {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  cursor: pointer;
  height: 48px;
  display: flex;
}

.header-logo {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  padding-bottom: 2px;
  display: flex;
}

.vertical-separator {
  background: var(--stroke-weak);
  width: 1px;
  height: 32px;
}

.button {
  padding: 0 var(--spacing-0);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-0);
  border-radius: var(--spacing-8);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  height: 32px;
  display: flex;
}

.button-medium {
  height: 48px;
}

.button-bordered {
  border: 1px solid var(--stroke-strong);
  background: #ffffff03;
  box-shadow: 0 2px 2px -2px #0000000a, 0 3px 5px -2px #0000000f;
}

.button-brand-bordered {
  border-radius: var(--spacing-8);
  background: var(--gradient, linear-gradient(90deg, #3baa32 0%, #317710 100%));
  box-shadow: 0 2px 2px -2px #0000000a, 0 3px 5px -2px #0000000f;
}

.button-brand-tertiary {
  border-radius: var(--spacing-8);
  border: 1px solid var(--stroke-brand-strong);
  background: #ffffff03;
  box-shadow: 0 2px 2px -2px #0000000a, 0 3px 5px -2px #0000000f;
}

.button-error-tertiary {
  border-radius: var(--spacing-8);
  border: 1px solid var(--stroke-error-strong);
  background: #ffffff03;
  box-shadow: 0 2px 2px -2px #0000000a, 0 3px 5px -2px #0000000f;
}

.button-error {
  border-radius: var(--spacing-8);
  background: var(--fill-error-strong);
}

.button-disabled-tertiary {
  border-radius: var(--spacing-8);
  border: 1px solid var(--stroke-disabled);
  background: #ffffff03;
  box-shadow: 0 2px 2px -2px #0000000a, 0 3px 5px -2px #0000000f;
}

.button-icon {
  width: 16px;
  height: 16px;
}

.button-icon-lg {
  width: 32px;
  height: 32px;
}

.button-state {
  padding: 0 var(--spacing-12);
  border-radius: var(--corner-radius-8);
  justify-content: center;
  align-self: stretch;
  align-items: center;
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .button-state:hover {
    background: var(--fill-hover);
  }
}

.button-state:active {
  background: var(--fill-press);
}

.button-label-container {
  padding: 0 var(--spacing-4);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  display: flex;
}

.button-group-container {
  align-items: flex-start;
  gap: var(--spacing-16);
  display: flex;
}

.horizontal-buttons-container {
  gap: var(--spacing-16);
  flex-direction: row;
  display: flex;
}

.btn-width-large {
  width: 112px;
}

.limit-counter-container {
  padding: var(--spacing-8) var(--spacing-12);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  border-radius: var(--corner-radius-8);
  border: 1px solid var(--stroke-weak);
  background: var(--background-base);
  display: flex;
}

.limit-text {
  letter-spacing: .6px;
  font-size: 13px;
  font-style: normal;
  line-height: 150%;
}

.limit-text-width {
  text-align: right;
  width: 95px;
}

.progress-wrapper {
  width: 20px;
  height: 20px;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-bg {
  fill: none;
  stroke: #000;
  stroke-opacity: .1;
  stroke-width: 4px;
}

.progress-bar {
  fill: none;
  stroke: #34861a;
  stroke-opacity: .8;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-dasharray: 50.27;
  stroke-dashoffset: 50.27px;
  transition: stroke-dashoffset .4s;
}

.segmented-controls-container {
  border-radius: var(--spacing-8);
  border: 1px solid var(--stroke-weak);
  background: var(--fill-weak);
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  align-items: flex-start;
  display: flex;
}

.segmented-control {
  align-items: flex-start;
  display: flex;
}

.segmented-control-item {
  padding: 0 var(--spacing-0);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4);
  height: 48px;
  display: flex;
}

.segmented-control-item-active {
  padding: 0 var(--spacing-0);
  border-radius: var(--corner-radius-8);
  border: 1px solid var(--stroke-strong);
  background: var(--background-overlay);
  box-shadow: 0 2px 2px -2px #0000000a, 0 3px 5px -2px #0000000f;
}

.segmented-control-item-state {
  padding: 0 var(--spacing-16);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--corner-radius-8);
  align-self: stretch;
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .segmented-control-item-state:hover {
    background: var(--fill-hover);
  }
}

.segmented-control-item-state:active {
  background: var(--fill-press);
}

.segmented-control-label-container {
  padding: 0 var(--spacing-4);
  align-items: center;
  gap: var(--spacing-8);
  display: flex;
}

.badge-container {
  padding: 0 var(--spacing-8);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-0);
  border-radius: var(--spacing-16);
  box-sizing: border-box;
  height: 24px;
  display: flex;
}

.badge-success {
  border: 1px solid var(--stroke-success-weak);
  background: var(--fill-success-weak);
}

.badge-inactive {
  border: 1px solid var(--stroke-weak);
  background: var(--fill-weak);
}

.badge-label-container {
  padding: 0 var(--spacing-4);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  display: flex;
}

.dropdown-input-container {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  display: flex;
}

.dropdown-content {
  padding: var(--spacing-8) 1px;
  border-radius: var(--spacing-8);
  border: 1px solid var(--stroke-weak);
  background: var(--background-overlay);
  z-index: 2;
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex-direction: column;
  align-items: flex-start;
  width: 280px;
  max-height: 400px;
  display: flex;
  position: absolute;
  top: 40px;
  left: 0;
  overflow: auto;
  box-shadow: 0 8px 8px -4px #0000000a, 0 20px 24px -4px #0000001a;
}

.dropdown-trigger-active {
  background: var(--fill-press);
}

.dropdown-menu-list-item {
  padding: var(--spacing-12) var(--spacing-16);
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .dropdown-menu-list-item:hover:not(:has(.sidebar-title-icon-container:hover)) {
    background: var(--fill-hover);
  }
}

.dropdown-menu-list-item:active:not(:has(.sidebar-title-icon-container:hover)) {
  background: var(--fill-press);
}

.dropdown-list-item-icon {
  width: 24px;
  height: 24px;
}

.dropdown-menu-list-item-active {
  border-left: 4px solid var(--stroke-selected);
  background: var(--fill-brand-weak);
}

.dropdown-menu-list-item-content {
  align-items: center;
  gap: var(--spacing-12);
  align-self: stretch;
  display: flex;
}

.dropdown-menu-list-item-divider {
  padding: var(--spacing-8) 0;
  flex-direction: column;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}

.dropdown-item-header {
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-4) var(--spacing-16);
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}

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

.height-100 {
  height: 100%;
}

.dropdown {
  height: 48px;
}

.dropdown-button-icon {
  width: 24px;
  height: 24px;
}

.divider {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.divider-line {
  background: var(--stroke-weak);
  align-self: stretch;
  height: 1px;
}

.skeleton-container {
  z-index: 2;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}

.skeleton {
  background: #f5f5f5;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer:after {
  content: "";
  background: linear-gradient(90deg, #fff3 15%, #ffffff4d 25%, #fff3 30%, #ffffff1a 50%, #ffffff4d 60%, #ffffff1a 75%, #ffffff4d 90%, #ffffff1a 100%);
  animation: 1s linear infinite shimmer;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.stretch {
  align-self: stretch;
}

.modal-backdrop, .modal-backdrop-not-closable {
  background: var(--fill-overlay);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.modal-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: var(--spacing-24);
  align-items: flex-start;
  gap: var(--spacing-24);
  border-radius: var(--corner-radius-12);
  border: 1px solid var(--stroke-weak);
  background: var(--background-overlay);
  box-sizing: border-box;
  flex-direction: column;
  width: 500px;
  max-height: calc(100vh - 200px);
  display: flex;
  position: relative;
  overflow: auto;
  box-shadow: 0 8px 8px -4px #0000000a, 0 20px 24px -4px #0000001a;
}

.modal-content {
  align-items: flex-start;
  gap: var(--spacing-24);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.modal-close-button {
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 25px;
}

.sidebar-title-modal-container {
  align-items: flex-start;
  gap: var(--spacing-16);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.sidebar-title-modal-text-container {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.sidebar-title-modal-heading-container {
  padding-right: var(--spacing-48);
  align-items: flex-start;
  gap: var(--spacing-8);
  align-self: stretch;
  display: flex;
}

.text-input-container {
  padding: var(--spacing-0);
  align-items: flex-start;
  gap: var(--spacing-8);
  border-radius: var(--corner-radius-8);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.text-input-label-container {
  flex-direction: column;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}

.text-input-label {
  align-items: baseline;
  gap: var(--spacing-4);
  display: flex;
}

.text-input-field-container {
  align-items: center;
  gap: var(--spacing-8);
  border-radius: var(--corner-radius-8);
  border: 1px solid var(--stroke-strong);
  background: var(--fill-inverse-strong);
  align-self: stretch;
  height: 48px;
  display: flex;
}

.text-input-field-state {
  padding: 0 var(--spacing-16);
  align-items: center;
  gap: var(--spacing-8);
  border-radius: var(--spacing-8);
  flex: 1 0 0;
  align-self: stretch;
  display: flex;
}

.text-input-field-state:disabled {
  background: var(--fill-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .text-input-field-state:hover {
    background: var(--fill-hover);
  }
}

.text-input-field-state:active {
  background: var(--fill-press);
}

.radio-button-container {
  padding: var(--spacing-0);
  align-items: center;
  gap: var(--spacing-12);
  border-radius: var(--corner-radius-8);
  align-self: stretch;
  display: flex;
}

.radio-button {
  cursor: pointer;
  fill: var(--fill-inverse-strong);
  stroke: var(--stroke-strong);
  stroke-width: 1px;
  background-color: #fff;
  border: 1px solid #00000073;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.radio-button-selected {
  background: radial-gradient(circle, #fff 28%, #34861a 25%);
  border: none;
}

@media (hover: hover) and (pointer: fine) {
  .radio-button-container:hover .radio-button:not(.radio-button-selected) {
    background: var(--fill-hover);
  }
}

.radio-button-container:active .radio-button:not(.radio-button-selected) {
  background: var(--fill-press);
}

.label-slider-container {
  padding: var(--spacing-8, 8px) 0 15px;
  align-items: flex-start;
  gap: var(--spacing-20);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.label-slider-component {
  padding: var(--spacing-8) 0;
  align-items: flex-start;
  gap: var(--spacing-20);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.top-container {
  align-items: flex-start;
  gap: var(--spacing-12);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.label-input-container {
  align-items: center;
  gap: var(--spacing-16);
  align-self: stretch;
  display: flex;
}

.text-rotation-container {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  width: 120px;
  display: flex;
}

.text-rotation-field-container {
  align-items: center;
  gap: var(--spacing-8, 8px);
  border-radius: var(--corner-radius-8);
  border: 1px solid var(--stroke-strong);
  background: var(--fill-inverse-strong);
  align-self: stretch;
  height: 48px;
  display: flex;
}

.text-rotation-inner-container {
  padding: 0 var(--spacing-16);
  align-items: center;
  gap: var(--spacing-8);
  flex: 1 0 0;
  align-self: stretch;
  display: flex;
}

.text-field-rotation-text {
  color: var(--text-strong);
  font-feature-settings: "liga" off, "clig" off;
  font-size: var(--small-text);
  font-style: normal;
  font-weight: 400;
  line-height: var(--small-text-line-height);
  letter-spacing: .5px;
  flex: 1 0 0;
}

.card-container {
  padding: var(--spacing-0);
  border-radius: var(--corner-radius-8);
  border: 1px solid var(--stroke-weak);
  background: var(--background-raised);
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  display: flex;
}

.card-state {
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .card-state:hover {
    background: var(--fill-hover);
  }
}

.card-state:active {
  background: var(--fill-press);
}

.card-img {
  border-radius: 11px 11px var(--corner-radius-0) var(--corner-radius-0);
  border-bottom: 1px solid var(--stroke-weak);
  align-self: stretch;
  height: 204px;
}

.card-content {
  padding: var(--spacing-12);
  align-items: flex-start;
  gap: var(--spacing-16);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.card-content-text-container {
  align-items: flex-start;
  gap: var(--spacing-16);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.card-container-text-link-wrapper {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  display: flex;
}

.card-heading {
  align-items: flex-start;
  gap: var(--spacing-4);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.card-text {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.card-button-icon {
  width: 20px;
  height: 20px;
}

.button-icons-container {
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-8);
  align-self: stretch;
  display: flex;
}

.button-icon {
  padding: 0 var(--spacing-0);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-0);
  height: 32px;
  display: flex;
}

.button-icon-state {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4);
  width: 32px;
  height: 32px;
  display: flex;
}

.button-icon-state:hover {
  background: var(--fill-hover);
}

.button-icon-state:active {
  background: var(--fill-press);
}

.button-icon-image {
  cursor: pointer;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.slider-container {
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.slider-input-container {
  flex-direction: column;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.slider-input {
  appearance: none;
  pointer-events: none;
  outline: none;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

.slider-track {
  border-radius: var(--corner-radius-32);
  background: var(--gradient);
  width: 100%;
  height: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.slider-input::-webkit-slider-runnable-track {
  border-radius: var(--corner-radius-32);
  background: none;
  border: 1px solid #0000;
  align-self: stretch;
  height: 6px;
  display: flex;
}

.slider-input::-moz-range-track {
  border-radius: var(--corner-radius-32);
  background: none;
  border: 1px solid #0000;
  align-self: stretch;
  height: 6px;
  display: flex;
  transform: translateY(3px);
}

.left-slider-input::-moz-range-track {
  border: 1px solid var(--stroke-weak);
  background: var(--fill-weak);
  box-shadow: inset 0 1px 4px #00000014;
}

.left-slider-input::-webkit-slider-runnable-track {
  border: 1px solid var(--stroke-weak);
  background: var(--fill-weak);
  box-shadow: inset 0 1px 4px #00000014;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--fill-inverse-strong);
  cursor: pointer;
  pointer-events: auto;
  border: 1px solid #00000073;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin-top: -9px;
}

.slider-input::-moz-range-thumb {
  -webkit-appearance: none;
  background-color: var(--fill-inverse-strong);
  cursor: pointer;
  pointer-events: auto;
  border: 1px solid #00000073;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(3px);
}

.slider-input:active::-webkit-slider-thumb {
  border: 1px solid var(--stroke-brand-strong);
  background-color: #fff;
}

.slider-input:active::-moz-range-thumb {
  border: 1px solid var(--stroke-brand-strong);
  background-color: #fff;
}

.toggle-container {
  padding-right: var(--spacing-12);
  align-items: center;
  gap: var(--spacing-12);
  cursor: pointer;
  width: fit-content;
  display: flex;
}

.toggle-input-container {
  border-radius: var(--spacing-32);
  position: relative;
}

.width {
  width: 48px;
}

.label-text {
  color: var(--text-strong);
  font-size: var(--small-text);
  letter-spacing: var(--letter-spacing-05);
  font-weight: var(--font-weight-weak);
  line-height: var(--small-text-line-height);
}

.track {
  border-radius: var(--corner-radius-32);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: inset 0 1px 4px #00000014;
}

.track-inactive {
  box-sizing: border-box;
  border: 1px solid var(--stroke-strong);
}

.track-active {
  box-sizing: border-box;
  background: var(--fill-selected);
  border: 1px solid #0000;
}

.toggle-button {
  -webkit-user-select: none;
  user-select: none;
}

.toggle-button:active ~ .track-inactive {
  background: var(--fill-press);
}

.slider-btn {
  background: #fff;
  border-radius: 24px;
  position: absolute;
  top: 0;
}

.slider-btn-active {
  z-index: 1;
  background: none;
  position: absolute;
  top: 0;
  right: 0;
}

.size {
  height: 24px;
}

.toggle-text-group {
  align-items: flex-start;
  gap: var(--spacing-4);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.toggle-setting-container {
  padding: var(--spacing-8);
  border-radius: var(--corner-radius-12);
  flex-direction: row;
  align-self: stretch;
  align-items: center;
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .toggle-setting-container:hover {
    background: var(--fill-hover);
  }
}

.toggle-setting-container:active {
  background: var(--fill-press);
}

.collapsible-item-container {
  align-items: flex-start;
  gap: var(--spacing-12);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.collapsible-header-container {
  align-items: center;
  gap: var(--spacing-12);
  align-self: stretch;
  display: flex;
}

.collapsible-icon {
  width: 24px;
  height: 24px;
}

.collapsible-content {
  transition: max-height .3s;
}

.item-row {
  align-items: flex-start;
  gap: var(--spacing-12);
  display: flex;
}

.collapsible-item-img-container {
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 117px;
  height: 92px;
  display: flex;
}

.collapsible-item-img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  display: block;
}

.image-groups {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.two-images {
  align-items: flex-start;
  gap: var(--spacing-8);
  align-self: stretch;
  display: flex;
}

.image-groups-container {
  gap: var(--spacing-16);
  flex-direction: column;
  display: flex;
}

.image-wrapper {
  position: relative;
}

.camera-image {
  aspect-ratio: 1;
  border-radius: var(--corner-radius-12);
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #0000;
  justify-content: flex-end;
  align-items: flex-start;
  width: 115px;
  height: 115px;
  display: flex;
}

.selected-image {
  border: 2px solid var(--stroke-selected);
}

.selected-image-checkmark {
  position: absolute;
  top: 15px;
  left: 10px;
}

.category-title {
  text-align: center;
  justify-content: space-between;
  align-self: stretch;
  align-items: center;
  height: 32px;
  display: flex;
}

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

.dots-image {
  padding: 0 var(--spacing-0);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-0);
  border-radius: var(--spacing-48);
  background: var(--fill-inverse-strong);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
  box-shadow: 0 2px 2px -2px #0000000a, 0 3px 5px -2px #0000000f;
}

.dots-image-inner-container {
  border-radius: var(--spacing-48);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.dots-image-inner-container:hover {
  background: var(--fill-hover);
}

.dots-image-inner-container:active {
  background: var(--fill-press);
}

.dropzone-container {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.dropzone-text-container {
  flex-direction: column;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}

.drop-zone-inner-container {
  padding: var(--spacing-32);
  align-items: center;
  gap: var(--spacing-24);
  border-radius: var(--corner-radius-16);
  border: 1px dashed var(--stroke-strong);
  background: var(--fill-weaker);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.text-label-container {
  align-items: baseline;
  gap: var(--spacing-4);
  display: flex;
}

.drop-zone-info-container {
  align-items: center;
  gap: var(--spacing-16);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.drop-zone-text-container {
  align-items: center;
  gap: var(--spacing-4);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.dropzone-container-drag {
  background: var(--fill-brand-weak);
}

.dropzone-container-error {
  background: var(--fill-error-weak);
}

.dropzone-container-disabled {
  background: var(--fill-disabled) !important;
}

.file-upload-icon {
  object-fit: cover;
  width: 24px;
  height: 24px;
}

.file-upload-item-container {
  align-items: center;
  gap: var(--spacing-8);
  align-self: stretch;
  display: flex;
}

.file-upload-item-container-small {
  padding: var(--spacing-8) var(--spacing-12);
}

.file-upload-item-icon {
  padding: var(--spacing-12);
  align-items: flex-start;
  gap: var(--spacing-8);
  border-radius: var(--spacing-48);
  background: var(--fill-weak);
  display: flex;
}

.loading-bar-container {
  justify-content: center;
  align-self: stretch;
  align-items: center;
  gap: var(--spacing-8);
  flex-direction: column;
  flex: 1 0 0;
  display: flex;
}

.icon {
  width: var(--spacing-24);
  height: var(--spacing-24);
  object-fit: cover;
  border-radius: var(--corner-radius-12);
}

.file-upload-item-text {
  flex-direction: column;
  flex: 1 0 0;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.file-upload-item-text-heading {
  color: var(--text-strong);
  font-size: var(--tiny-text);
  letter-spacing: var(--letter-spacing-05);
  font-weight: var(--font-weight-strong);
  line-height: var(--tiny-text-line-height);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: stretch;
  overflow: hidden;
}

.max-width-loading {
  max-width: 60px;
}

.max-width-not-loading {
  max-width: 250px;
}

.file-upload-item-text-secondary-heading {
  font-size: var(--tiny-text);
  letter-spacing: var(--letter-spacing-05);
  font-weight: var(--font-weight-weak);
  line-height: var(--tiny-text-line-height);
}

.file-upload-item-text-secondary-heading-neutral {
  color: var(--text-weak);
}

.file-upload-item-text-secondary-heading-success {
  color: var(--text-brand);
}

.file-upload-item-text-secondary-heading-error {
  color: var(--text-error);
}

.img-container {
  border-radius: 50%;
  padding: 5px;
  display: flex;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .img-container:hover {
    background: var(--fill-hover);
  }
}

.img-container:active {
  background: var(--fill-press);
}

.loading-bar-inner-container {
  align-items: center;
  gap: var(--spacing-12);
  align-self: stretch;
  display: flex;
}

.track-filled-container {
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 8px;
  display: flex;
  position: absolute;
}

.track-filled {
  background: var(--fill-selected);
  flex-shrink: 0;
  align-items: center;
  height: 8px;
  display: flex;
  box-shadow: inset 0 1px 4px #00000014;
}

.track-left-round {
  border-top-left-radius: var(--spacing-32);
  border-bottom-left-radius: var(--spacing-32);
}

.track-right-round {
  border-top-right-radius: var(--spacing-32);
  border-bottom-right-radius: var(--spacing-32);
}

.track {
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-8);
  flex-direction: column;
  flex: 1 0 0;
  display: flex;
  position: relative;
}

.track-empty {
  padding-left: var(--spacing-4);
  border-radius: var(--spacing-32);
  background: var(--fill-weak);
  align-self: stretch;
  align-items: center;
  height: 8px;
  display: flex;
  box-shadow: inset 0 1px 4px #00000014;
}

.icon-success-container {
  border-radius: var(--spacing-48, 48px);
  border: 0 solid var(--stroke-brand-weak);
  background: var(--fill-brand-weak);
  padding: var(--spacing-12);
  justify-content: center;
  align-items: center;
  display: flex;
}

.toast-container {
  border-radius: var(--spacing-8);
  background: var(--background-inverse);
  align-items: flex-start;
  width: fit-content;
  display: flex;
  position: absolute;
  bottom: 24px;
  right: 24px;
  box-shadow: 0 2px 5px -2px #0000000d, 0 12px 20px -2px #0000000f;
}

.toast-content {
  padding: var(--spacing-16);
  align-items: flex-start;
  gap: var(--spacing-12);
  flex: 1 0 0;
  width: fit-content;
  display: flex;
}

.toast-text-container {
  align-items: flex-start;
  gap: var(--spacing-4);
  flex-direction: column;
  flex: 1 0 0;
  align-self: stretch;
  min-height: 24px;
  padding-top: 2px;
  display: flex;
}

.tooltip-bubble {
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--corner-radius-12);
  background: var(--background-inverse);
  align-items: flex-start;
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
  position: relative;
  box-shadow: 0 8px 8px -4px #0000000a, 0 20px 24px -4px #0000001a;
}

.tooltip-bubble-small {
  max-width: 300px;
}

.tooltip-bubble-large {
  max-width: 700px;
}

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

.buttons-with-text {
  padding: var(--spacing-8) 0 var(--spacing-4) 0;
  align-items: center;
  gap: var(--spacing-8);
  align-self: stretch;
  display: flex;
}

.info-text {
  color: var(--text-inverse-weak);
  font-size: var(--tiny-text);
  font-style: normal;
  font-weight: var(--font-weight-weak);
  line-height: var(--tiny-text-line-height);
  letter-spacing: .5px;
}

#anotherTarget {
  color: #fff;
  background-color: #28a745;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 80px;
  margin: 400px 50px;
  display: flex;
  position: relative;
}

#targetRight {
  color: #856404;
  background-color: #ffc107;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 80px;
  margin: 200px 800px;
  display: flex;
  position: relative;
}

#targetLeft {
  color: #fff;
  background-color: #6f42c1;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 80px;
  margin: 200px 50px;
  display: flex;
  position: relative;
}

.modal-relative-to-target {
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-width: 200px;
  padding: 15px;
  position: relative;
  box-shadow: 0 4px 15px #0003;
}

.modal-arrow {
  z-index: 1;
  border: 8px solid #0000;
  width: 0;
  height: 0;
  position: absolute;
}

.modal-arrow.top {
  border-bottom-color: var(--background-inverse);
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.modal-arrow.bottom {
  border-top-color: var(--background-inverse);
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.modal-arrow.left {
  border-right-color: var(--background-inverse);
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
}

.modal-arrow.right {
  border-left-color: var(--background-inverse);
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
}

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

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

.text-inverse-strong {
  color: var(--text-inverse-strong);
}

.text-inverse-weak {
  color: var(--text-inverse-weak);
}

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

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

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

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

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

.text-600 {
  font-weight: 600;
}

.text-400 {
  font-weight: 400;
}

.text-small {
  font-size: var(--small-text);
  font-style: normal;
  line-height: var(--small-text-line-height);
  letter-spacing: var(--letter-spacing-05);
}

.text-tiny {
  font-size: var(--tiny-text);
  font-style: normal;
  line-height: var(--tiny-text-line-height);
  letter-spacing: var(--letter-spacing-05);
}

.text-underlined {
  text-decoration-skip-ink: none;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
}

.text-heading-3 {
  font-size: var(--heading-3);
  font-style: normal;
  line-height: var(--heading-3-line-height);
  letter-spacing: var(--letter-spacing-04);
}

.text-heading-4 {
  font-size: var(--heading-4);
  font-style: normal;
  line-height: var(--heading-4-line-height);
  letter-spacing: var(--letter-spacing-04);
}

.no-wrap {
  white-space: nowrap;
}

.sidebar-container {
  height: calc(100vh - var(--header-height));
  padding: var(--spacing-20) var(--spacing-16);
  align-items: flex-start;
  gap: var(--spacing-16);
  border-right: 1px solid var(--stroke-weak);
  background: var(--background-base);
  box-sizing: border-box;
  flex-direction: column;
  flex-shrink: 0;
  width: 280px;
  display: flex;
}

.sidebar-buttons-container {
  align-items: flex-start;
  gap: var(--spacing-12);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.sidebar-replaceable-content {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.sidebar-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
  align-self: stretch;
  overflow: hidden scroll;
}

.sidebar-title-badge {
  align-items: flex-start;
  gap: var(--spacing-4);
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.sidebar-title-container {
  align-self: stretch;
  align-items: center;
  gap: 8px;
  display: flex;
}

.sidebar-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 0 0;
  align-items: flex-start;
  width: 207px;
  overflow: hidden;
}

.sidebar-title-icon-container {
  padding: 0 var(--spacing-0);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-0);
  cursor: pointer;
  height: 32px;
  display: flex;
}

.sidebar-icon-dropdown-round {
  border-radius: var(--corner-radius-8);
}

.sidebar-title-icon-container-state {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4);
  border-radius: var(--corner-radius-8);
  width: 32px;
  height: 32px;
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .sidebar-title-icon-container-state:hover {
    background: var(--fill-hover);
  }
}

.sidebar-title-icon-container-state:active {
  background: var(--fill-press);
}

.sidebar-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

#walkModeHelp {
  z-index: 1000000;
  width: 640px;
  height: auto;
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
}

#walkModeHelp.show {
  display: block !important;
}

#walkModeHelp img {
  width: 640px;
}

.level-selector-container {
  align-self: stretch;
  align-items: center;
  gap: 8px;
  display: flex;
}

.level-selector-title-container {
  align-items: flex-start;
  gap: var(--spacing-8);
  flex: 1 0 0;
  display: flex;
}

.summary-list {
  padding: var(--spacing-0);
  border-radius: var(--corner-radius-0);
  border-top: 1px solid var(--stroke-weak);
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}

.summary-list-column {
  flex-direction: column;
  flex: 1;
  align-self: stretch;
  align-items: flex-start;
  max-width: 250px;
  display: flex;
}

.summary-list-column-long {
  flex-direction: row;
  flex: 1;
  align-items: flex-start;
  display: flex;
}

.summary-list-item {
  padding-right: var(--spacing-24);
  align-self: stretch;
  align-items: center;
  height: 64px;
  display: flex;
}

.summary-list-item-long {
  padding-right: var(--spacing-8);
  align-items: center;
  gap: var(--spacing-12, 12px);
  flex: 1;
  justify-content: flex-end;
  align-self: stretch;
  height: 64px;
  display: flex;
}

.gap-item {
  gap: var(--spacing-8);
  display: flex;
}

.loading-icon {
  width: 24px;
  height: 24px;
}

@keyframes spinnerRotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.spinner-img {
  transform-origin: center;
  animation: 1s linear infinite spinnerRotate;
}

.drawer {
  background: var(--fill-overlay);
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100svh;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.drawer-position-container {
  width: 600px;
  height: 100svh;
  position: absolute;
  top: 0;
  right: 0;
}

.drawer-container {
  border: 1px solid var(--stroke-weak);
  background: var(--background-overlay);
  flex-direction: column;
  flex: 1 0 0;
  align-items: flex-start;
  width: 600px;
  height: 100%;
  display: flex;
  position: relative;
  box-shadow: 0 8px 8px -4px #0000000a, 0 20px 24px -4px #0000001a;
}

.drawer-footer-container {
  padding: var(--spacing-24) var(--spacing-32);
  align-items: center;
  gap: var(--spacing-16);
  border-top: 1px solid var(--stroke-weak);
  background: var(--background-overlay);
  align-self: stretch;
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.drawer-header {
  padding: var(--spacing-24);
  align-items: center;
  gap: var(--spacing-16);
  border-bottom: 1px solid var(--stroke-weak);
  align-self: stretch;
  display: flex;
}

.drawer-header-text {
  gap: var(--spacing-8);
  flex: 1 0 0;
  align-items: center;
  display: flex;
}

.drawer-content {
  padding: var(--spacing-24);
  align-items: flex-start;
  gap: var(--spacing-16);
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex-direction: column;
  flex: 1 0 0;
  align-self: stretch;
  padding-bottom: 83px;
  display: flex;
  overflow: auto;
}

.drawer-close-button {
  padding: var(--spacing-8);
  border-radius: var(--corner-radius-8);
}

.drawer-close-button:hover {
  background: var(--fill-hover);
}

.drawer-close-button:active {
  background: var(--fill-press);
}

.share-code {
  white-space: pre;
  color: #172b4d;
  text-wrap: auto;
  -webkit-user-select: text;
  user-select: text;
  box-sizing: border-box;
  background: #f4f5f7;
  border: 1px solid #dfe1e6;
  border-radius: 3px;
  width: 450px;
  padding: 15px 30px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-size: 13px;
  line-height: 1.5;
  display: block;
  position: relative;
}

.copy-icon {
  border-radius: 12px;
  padding: 5px;
  position: absolute;
  top: 5px;
  right: 5px;
}

.copy-icon:hover {
  cursor: pointer;
  background-color: #0000000a;
}

.copy-icon:active {
  cursor: pointer;
  background-color: #0000001a;
}

.share-export-button {
  margin-bottom: 20px;
}

.empty-plan-container {
  gap: var(--spacing-16);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.view-canvas-actions-independent-header {
  z-index: 1000;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
}

.mobile-independent-view-3d {
  display: none;
}

.empty-header-logo {
  cursor: pointer;
}

:root {
  --text-strong: #000000e5;
  --text-weak: #0009;
  --text-brand: #34861a;
  --text-disabled: #0000001a;
  --text-error: #c73a3a;
  --text-warning: #8f6c1a;
  --text-success: #087f40;
  --text-information: #1a74a8;
  --text-inverse-strong: #fff;
  --text-inverse-weak: #ffffffc7;
  --text-inverse-disabled: #ffffff1f;
  --text-weight-strong: 600;
  --text-weight-weak: 400;
  --font-weight-strong: 600;
  --font-weight-weak: 400;
  --stroke-strong: #00000073;
  --stroke-weak: #0000001a;
  --stroke-selected: #34861a;
  --stroke-focus: #34861a;
  --stroke-disabled: #0000001a;
  --stroke-brand-strong: #34861acc;
  --stroke-brand-weak: #34861a33;
  --stroke-error-strong: #c73a3acc;
  --stroke-error-weak: #c73a3a24;
  --stroke-warning-strong: #8f6c1acc;
  --stroke-warning-weak: #8f6c1a33;
  --stroke-success-strong: #087f40cc;
  --stroke-success-weak: #087f4033;
  --stroke-information-strong: #1a74a8cc;
  --stroke-information-weak: #1a74a833;
  --stroke-inverse-strong: #fff9;
  --stroke-inverse-weak: #ffffff1f;
  --stroke-inverse-disabled: #ffffff1f;
  --icon-neutral: #00000073;
  --icon-brand: #34861acc;
  --icon-disabled: #0000001a;
  --icon-error: #c73a3acc;
  --icon-warning: #8f6c1acc;
  --icon-success: #087f40cc;
  --icon-information: #1a74a8cc;
  --icon-inverse: #fff9;
  --icon-inverse-strong: #fff;
  --icon-inverse-disabled: #ffffff1f;
  --fill-strong: #000000e5;
  --fill-weak: #0000000a;
  --fill-weaker: #00000005;
  --fill-hover: #0000000a;
  --fill-press: #0000001a;
  --fill-selected: #34861a;
  --fill-disabled: #0000001a;
  --fill-overlay: #00000073;
  --fill-brand-strong: #34861a;
  --fill-brand-weak: #34861a14;
  --fill-error-strong: #c73a3a;
  --fill-error-weak: #ff4a4a0d;
  --fill-warning-strong: #8f6c1a;
  --fill-warning-weak: #ffc02e0d;
  --fill-success-strong: #087f40;
  --fill-success-weak: #087f400d;
  --fill-information-strong: #1a74a8;
  --fill-information-weak: #26b0ff0d;
  --fill-inverse-strong: #fff;
  --fill-inverse-weak: #ffffff0f;
  --fill-inverse-hover: #ffffff0f;
  --fill-inverse-press: #ffffff1f;
  --fill-inverse-disabled: #ffffff1f;
  --fill-white: #fff;
  --fill-yellow: #fec62e;
  --background-base: #fff;
  --background-raised: #fff;
  --background-overlay: #fff;
  --background-sunken: #f7f7f7;
  --background-alternate: #f7f7f7;
  --background-brand: #34861a;
  --background-inverse: #1a1a1a;
  --brand-light-800: #34861acc;
  --gradient-strong: #317710;
  --gradient-weak: #3baa32;
  --main-color: #34861a;
  --secondary-color: #9ae283;
  --corner-radius-0: 0px;
  --corner-radius-4: 4px;
  --corner-radius-8: 8px;
  --corner-radius-6: 6px;
  --corner-radius-12: 12px;
  --corner-radius-16: 16px;
  --corner-radius-32: 32px;
  --corner-radius-48: 48px;
  --heading-3: 24px;
  --heading-3-line-height: 32px;
  --heading-4: 20px;
  --heading-4-line-height: 28px;
  --small-text: 16px;
  --small-text-line-height: 24px;
  --tiny-text: 14px;
  --tiny-text-line-height: 20px;
  --letter-spacing-02: .2px;
  --letter-spacing-04: .4px;
  --letter-spacing-05: .5px;
  --elevation-level-4: 3;
  --elevation-level-3: 2;
  --elevation-level-2: 1;
  --elevation-level-1: 0;
  --elevation-level-0: -1;
  --elevation-level--1: -2;
  --spacing-0: 0;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-84: 84px;
  --header-height: calc(72px + env(safe-area-inset-top));
  --small-footer-height: 73px;
  --gradient: linear-gradient(90deg, var(--gradient-weak) 0%, var(--gradient-strong) 100%);
}

* {
  font-feature-settings: "liga" off, "clig" off;
  -webkit-tap-highlight-color: transparent;
  font-family: Urbanist, serif;
}

input {
  all: unset;
}

button, input, select, img, label, span, div, h1, h2, h3, h4, h5, h6, i, p, a {
  -webkit-tap-highlight-color: #0000;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -khtml-user-select: none;
}

body {
  margin: 0;
}

:focus {
  outline: none !important;
}

.hidden {
  display: none !important;
}

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

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

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

.position-relative {
  position: relative;
}

.clickable {
  cursor: pointer;
}

.full-width {
  width: 100%;
}

.page-content-container {
  height: calc(100vh - var(--header-height));
  width: 100vw;
  display: flex;
  overflow: hidden;
}

.page-content-container-view {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.page-content-sub-container {
  flex-direction: row;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.canvas-container {
  flex-direction: column;
  flex: 1;
  align-self: stretch;
  display: flex;
}

.error-container {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  display: flex;
}

.canvas-actions-header {
  padding: var(--spacing-24) var(--spacing-32);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.view-canvas-actions-header {
  z-index: 1000;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
}

.view-canvas-actions-header-position {
  top: 15px;
  right: 10px;
}

.view-canvas-actions-header-independent-position {
  top: 11px;
  right: 31px;
}

@media (width <= 480px) {
  .view-canvas-actions-header {
    display: none;
  }
}

.top-bar-actions-container {
  padding: var(--spacing-8);
  align-items: center;
  gap: var(--spacing-8);
  border-radius: var(--corner-radius-12);
  border: 1px solid var(--stroke-weak);
  background: var(--background-base);
  display: flex;
  box-shadow: 0 2px 2px -2px #0000000a, 0 3px 5px -2px #0000000f;
}

.bp3djs-viewer2d, .bp3djs-viewer3d {
  position: absolute;
  top: 171px;
  left: 280px;
}

.bp3djs-viewer2d-view, .bp3djs-viewer3d-view {
  position: absolute;
  top: 0;
  left: 0;
}

.bp3djs-viewer2d-independent-view, .bp3djs-viewer3d-independent-view {
  position: absolute;
  top: 73px;
  left: 0;
}

.bp3d-js-app {
  overflow: hidden;
}

.bp3djs-viewer2d {
  background-color: #fff;
}

canvas {
  display: block;
  overflow: hidden;
}
/*# sourceMappingURL=style.f8b0f047.css.map */