.ant-popover-inner-content {
  width: auto;
}

.ant-dropdown .ant-dropdown-menu, .ant-dropdown-menu-submenu .ant-dropdown-menu {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 2px 2px 10px rgba(0, 0, 0, .15);
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-group-list, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-group-list {
  margin: 0;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-group-list [role="menuitem"]:not(.ant-dropdown-menu-submenu), .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-group-list .ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-title, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-group-list [role="menuitem"]:not(.ant-dropdown-menu-submenu), .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-group-list .ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-title {
  padding-left: 24px;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item {
  padding-left: 12px;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item, .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title {
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 22px;
  transition: all;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title {
  justify-content: space-between;
  padding-right: 20px;
  display: flex;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title > .ant-dropdown-menu-title-content, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title > .ant-dropdown-menu-title-content {
  flex-shrink: 0;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:hover, .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover {
  background: #f0f2f5;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-arrow, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-arrow {
  margin-left: 20px;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-arrow svg, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-arrow svg {
  width: 9px;
  height: 9px;
}

.ant-input:focus, .ant-input-number-focused {
  box-shadow: none;
}

.ant-btn-primary:disabled {
  opacity: .5;
  color: #fff;
  background-color: #04a4f4;
  border-color: #04a4f4;
}

.ant-btn-primary:disabled:hover {
  color: #fff;
  background-color: #04a4f4;
  border-color: #04a4f4;
}

.tag-select .ant-select.textboxlike .ant-select-selector, .labeled-item .ant-select.textboxlike .ant-select-selector, [data-plasmic-role="labeled-item"] .ant-select.textboxlike .ant-select-selector, .labeled-item .ant-input-number, [data-plasmic-role="labeled-item"] .ant-input-number, .labeled-item .ant-input, [data-plasmic-role="labeled-item"] .ant-input {
  background-color: #f3f3f2;
  border-radius: 6px;
  height: 32px;
  min-height: 32px;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  padding: 6px 6px 6px 8px !important;
}

.tag-select .ant-select.textboxlike .ant-select-selector:hover, .labeled-item .ant-select.textboxlike .ant-select-selector:hover, [data-plasmic-role="labeled-item"] .ant-select.textboxlike .ant-select-selector:hover, .labeled-item .ant-input-number:hover, [data-plasmic-role="labeled-item"] .ant-input-number:hover, .labeled-item .ant-input:hover, [data-plasmic-role="labeled-item"] .ant-input:hover {
  background-color: #eeeeec;
}

.tag-select .ant-select.textboxlike, .labeled-item .ant-select.textboxlike, [data-plasmic-role="labeled-item"] .ant-select.textboxlike {
  border-radius: 6px;
}

.tag-select .ant-select.textboxlike:focus-within {
  box-shadow: 0 0 0 1px rgba(0, 145, 255, .5) !important;
}

.labeled-item .ant-select.textboxlike:focus-within {
  box-shadow: 0 0 0 1px rgba(0, 145, 255, .5) !important;
}

[data-plasmic-role="labeled-item"] .ant-select.textboxlike:focus-within {
  box-shadow: 0 0 0 1px rgba(0, 145, 255, .5) !important;
}

:where(.labeled-item .ant-input-number-input)::placeholder {
  color: #90908c;
  opacity: 1;
}

:where([data-plasmic-role="labeled-item"] .ant-input-number-input)::placeholder {
  color: #90908c;
  opacity: 1;
}

:where(.labeled-item .ant-input)::placeholder {
  color: #90908c;
  opacity: 1;
}

:where([data-plasmic-role="labeled-item"] .ant-input)::placeholder {
  color: #90908c;
  opacity: 1;
}

.tag-select .ant-select.textboxlike .ant-select-selector, .labeled-item .ant-select.textboxlike .ant-select-selector, [data-plasmic-role="labeled-item"] .ant-select.textboxlike .ant-select-selector {
  height: 32px;
  min-height: 32px;
}

.labeled-item input, [data-plasmic-role="labeled-item"] input, .labeled-item textarea, [data-plasmic-role="labeled-item"] textarea {
  padding-right: 0 !important;
  font-family: Inter, Helvetica, Arial, sans-serif !important;
}

.labeled-item .ant-input-number-sm input, [data-plasmic-role="labeled-item"] .ant-input-number-sm input {
  height: 18px;
  padding: 0;
}

.ant-checkbox {
  top: 4px;
}

.loader-container {
  height: 200px;
}

.loader, .loader:before, .loader:after {
  background: silver;
  width: 1em;
  height: 4em;
  animation: 1s ease-in-out infinite load1;
}

.loader:before, .loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.loader:before {
  left: -1.5em;
}

.loader {
  text-indent: -9999em;
  margin: 8em auto;
  font-size: 11px;
  animation-delay: -.16s;
  position: relative;
}

.loader:after {
  animation-delay: -.32s;
  left: 1.5em;
}

@keyframes load1 {
  0%, 80%, 100% {
    height: 4em;
    box-shadow: 0 0 #fff;
  }

  40% {
    height: 5em;
    box-shadow: 0 -2em #fff;
  }
}

.text-xsm {
  font-size: 10px;
}

.text-sm {
  font-size: 11px;
}

.text-m {
  font-size: 12px;
}

.text-xlg {
  font-size: 14px;
  line-height: 20px;
}

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

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

.fg, .SidebarSectionListItem {
  color: #1b1b18 !important;
}

.dimfg, .SidebarSectionListItem__actionIcon {
  color: #90908c !important;
}

.dimdimfg {
  color: #dbdbd7 !important;
}

.strong, .defined-indicator__prop__label, .ant-popover.defined-indicator__popover .ant-popover-title, .recording-badge, .spacing-control__label, .SidebarSection__Title, .ToolbarButton, .SelectorsControl__CustomOptionLabel, .variant-group-panel .variant-group-panel__add-variant, .pane-title, .raised-label, .beefy-menu-item__title, .list-box-section__title, .hilite-tabs, .on-off-switch__label, .panel-heading-row, .panel-heading, .table-details__field-label, .table-list__title, .tbl__th, .issue-counter__count, .major-sub-tab__link--active, .create-project__icon, .data-scope__tag-desc, .tree-node__select-child-hint, .panel-section__title, .match__prefix, .gallery__group-heading, strong {
  font-weight: 600;
}

.regular {
  font-weight: normal !important;
}

.no-line-height, .SidebarSectionListItem__actionIcon {
  line-height: 0;
}

.tight-line-height, .select-dropdown.ant-select .ant-select-arrow {
  line-height: 1em;
}

.uppercase {
  text-transform: uppercase;
}

.inverse-fg {
  color: #dbdbd7;
}

.inverse-dimfg {
  color: #868682;
}

.inverse-brightfg {
  color: #eeeeec;
}

.component-dimfg {
  color: #d3b4ed !important;
}

.component-fg {
  color: #8e4ec6 !important;
}

.variant-dimfg {
  color: #f3b0a2 !important;
}

.variant-fg {
  color: #e54d2e !important;
}

.frame-dimfg {
  color: #96c7f2 !important;
}

.frame-fg, .tag-fg {
  color: #0091ff !important;
}

.code, .spacing-control__num, .sketch-picker input.textbox--code, .select-dropdown.ant-select .ant-select-selection.textbox--code, .select-dropdown__button.textbox--code, .dropdown-container.textbox--code, .color-control__container.textbox--code, .ant-input-number.form-control.textbox--code, .textbox.textbox--code, textarea.form-control.textbox--code {
  font-family: IBM Plex Mono, monospace;
}

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

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

.mixin-fg {
  color: #12a594 !important;
}

.mixin-bg {
  color: #e7f9f5;
}

.token-fg {
  color: #f5d90a !important;
}

.data-token-fg {
  color: #3e63dd;
}

.function-fg {
  color: #05a2c2 !important;
}

.added-fg {
  color: #46a758;
}

.removed-fg {
  color: #e54d2e;
}

.white-bg {
  background-color: #fff !important;
}

.white-bg-unimp {
  background-color: #fff;
}

.mixin-bg {
  background-color: #e7f9f5 !important;
}

.mixin-strongbg {
  background-color: #12a594 !important;
}

.inverse-bg, .inverse-dimbg, .inverse-dimdimbg {
  background-color: #1b1b18 !important;
}

.flex, .SidebarSectionListItem {
  display: flex;
}

.flex > *, .SidebarSectionListItem > * {
  min-width: 0;
}

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

.flex-vcenter, .SidebarSectionListItem {
  align-items: center;
}

.flex-vcenter-important {
  align-items: center !important;
}

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

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

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

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

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

.flex-col, .custom-caret-container {
  flex-direction: column;
  display: flex;
}

.flex-col > *, .custom-caret-container > * {
  min-height: 0;
}

.flex-col.flex-hcenter, .flex-hcenter.custom-caret-container {
  align-items: center;
}

.flex-col.flex-vcenter, .flex-col.SidebarSectionListItem, .flex-vcenter.custom-caret-container, .custom-caret-container.SidebarSectionListItem {
  justify-content: center;
}

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

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

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

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

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

.flex-no-shrink, .flex-children-no-shrink > * {
  flex-shrink: 0;
}

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

.flex-col-vcenter {
  justify-content: center;
}

.flex-push-right {
  margin-left: auto;
}

.flex-full-basis {
  flex-basis: 100%;
}

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

.flex-no-shrink-children > * {
  flex-shrink: 0;
}

.flex-even-children > *, .flex-even-child {
  flex: 1 1 0;
}

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

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

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

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

.absolute {
  position: absolute;
}

.grid {
  display: grid;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.col-start-9 {
  grid-column-start: 9;
}

.col-start-auto {
  grid-column-start: auto;
}

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

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

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

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

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

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

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

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

.col-end-9 {
  grid-column-end: 9;
}

.col-end-10 {
  grid-column-end: 10;
}

.col-end-auto {
  grid-column-end: auto;
}

.row-auto {
  grid-row: auto;
}

.row-span-1 {
  grid-row: span 1 / span 1;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.row-span-3 {
  grid-row: span 3 / span 3;
}

.row-span-4 {
  grid-row: span 4 / span 4;
}

.row-span-5 {
  grid-row: span 5 / span 5;
}

.row-span-6 {
  grid-row: span 6 / span 6;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-start-8 {
  grid-row-start: 8;
}

.row-start-9 {
  grid-row-start: 9;
}

.row-start-auto {
  grid-row-start: auto;
}

.row-end-1 {
  grid-row-end: 1;
}

.row-end-2 {
  grid-row-end: 2;
}

.row-end-3 {
  grid-row-end: 3;
}

.row-end-4 {
  grid-row-end: 4;
}

.row-end-5 {
  grid-row-end: 5;
}

.row-end-6 {
  grid-row-end: 6;
}

.row-end-7 {
  grid-row-end: 7;
}

.row-end-8 {
  grid-row-end: 8;
}

.row-end-9 {
  grid-row-end: 9;
}

.row-end-auto {
  grid-row-end: auto;
}

.nowrap {
  white-space: nowrap;
}

.wrap-word {
  white-space: normal;
  word-break: break-word;
}

.pre {
  white-space: pre;
}

.text-ellipsis, .defined-indicator__source-value, .defined-indicator__source-name, .variant-chip .variant-chip__text, .tpltree__nodeLabel .tpltree__nodeLabel__summary, .tpltree__nodeLabel .tpltree__nodeLabel__name {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.text-ellipsis-wrappable {
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.text-wrap {
  overflow-wrap: break-word;
  min-width: 0;
  overflow: hidden;
}

.text-one-line {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.text-two-lines {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.gap-xsm {
  gap: 4px;
}

.gap-sm {
  gap: 6px;
}

.gap-m {
  gap: 8px;
}

.gap-lg {
  gap: 12px;
}

.gap-xlg {
  gap: 16px;
}

.gap-xxlg {
  gap: 20px;
}

.gap-xxxlg {
  gap: 24px;
}

.spacer-xsm {
  flex-shrink: 0;
  width: 4px;
  display: inline-block;
}

.spacer-sm {
  flex-shrink: 0;
  width: 6px;
  display: inline-block;
}

.spacer-m {
  flex-shrink: 0;
  width: 8px;
  display: inline-block;
}

.spacer-lg {
  flex-shrink: 0;
  width: 12px;
  display: inline-block;
}

.spacer-xlg, .spacer-icon {
  flex-shrink: 0;
  width: 16px;
  display: inline-block;
}

.spacer-icon-sm {
  flex-shrink: 0;
  width: 22px;
  display: inline-block;
}

.spacer-ch {
  flex-shrink: 0;
  width: 1ch;
  display: inline-block;
}

.spacerv-xsm {
  flex-shrink: 0;
  height: 4px;
}

.spacerv-sm {
  flex-shrink: 0;
  height: 6px;
}

.spacerv-m {
  flex-shrink: 0;
  height: 8px;
}

.spacerv-lg {
  flex-shrink: 0;
  height: 12px;
}

.spacerv-xlg, .spacerv-icon {
  flex-shrink: 0;
  height: 16px;
}

.width-auto {
  width: auto;
}

.width-half {
  width: 50%;
}

.mb-xsm:not(:last-child), .mv-xsm:not(:last-child) {
  margin-bottom: 4px;
}

.mb-sm:not(:last-child), .mv-sm:not(:last-child), .m-sm:not(:last-child) {
  margin-bottom: 6px;
}

.mb-m:not(:last-child), .mv-m:not(:last-child), .m-m:not(:last-child) {
  margin-bottom: 8px;
}

.mb-lg:not(:last-child), .mv-lg:not(:last-child) {
  margin-bottom: 12px;
}

.mb-xlg:not(:last-child), .mv-xlg:not(:last-child) {
  margin-bottom: 16px;
}

.mb-p:not(:last-child) {
  margin-bottom: 1em;
}

.mt-xsm, .mv-xsm {
  margin-top: 4px;
}

.mt-sm, .mv-sm, .m-sm {
  margin-top: 6px;
}

.mt-m, .mv-m, .m-m {
  margin-top: 8px;
}

.mt-lg, .mv-lg {
  margin-top: 12px;
}

.mt-xlg, .mv-xlg {
  margin-top: 16px;
}

.mt-xxlg {
  margin-top: 20px;
}

.ml-ch {
  margin-left: 1ch;
}

.ml-xsm, .mh-xsm {
  margin-left: 4px;
}

.ml-m, .mh-m, .m-m {
  margin-left: 8px;
}

.ml-xlg, .mh-xlg {
  margin-left: 16px;
}

.mr-ch {
  margin-right: 1ch;
}

.mr-xsm, .mh-xsm {
  margin-right: 4px;
}

.mr-sm, .mh-sm, .m-sm {
  margin-right: 6px;
}

.mr-m, .mh-m, .m-m {
  margin-right: 8px;
}

.mr-lg, .mh-lg {
  margin-right: 12px;
}

.mr-xlg, .mh-xlg {
  margin-right: 16px;
}

.m0 {
  margin: 0;
}

.ml-sm, .mh-sm, .m-sm {
  margin-left: 6px;
}

.ml-lg, .mh-lg {
  margin-left: 12px;
}

.pb-xsm {
  padding-bottom: 4px;
}

.pb-sm {
  padding-bottom: 6px;
}

.pb-m {
  padding-bottom: 8px;
}

.pt-xsm {
  padding-top: 4px;
}

.pt-sm {
  padding-top: 6px;
}

.pt-m {
  padding-top: 8px;
}

.pt-lg {
  padding-top: 12px;
}

.pt-xlg {
  padding-top: 16px;
}

.pt-xxlg {
  padding-top: 20px;
}

.pv-sm {
  padding-top: 6px;
  padding-bottom: 6px;
}

.pv-m {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pv-lg {
  padding-top: 12px;
  padding-bottom: 12px;
}

.pv-xlg {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pv-xsm {
  padding-top: 4px;
  padding-bottom: 4px;
}

.ph-sm {
  padding-left: 6px;
  padding-right: 6px;
}

.ph-m {
  padding-left: 8px;
  padding-right: 8px;
}

.ph-lg {
  padding-left: 12px;
  padding-right: 12px;
}

.ph-xlg {
  padding-left: 16px;
  padding-right: 16px;
}

.ph-xxlg {
  padding-left: 20px;
  padding-right: 20px;
}

.ph-xsm {
  padding-left: 4px;
  padding-right: 4px;
}

.pr-lg {
  padding-right: 12px !important;
}

.pr-xlg {
  padding-right: 16px !important;
}

.pr-xxlg {
  padding-right: 20px !important;
}

.pr-xxxlg {
  padding-right: 24px !important;
}

.p-sm {
  padding: 6px;
}

.p-m {
  padding: 8px;
}

.p-lg {
  padding: 12px;
}

.p-xlg {
  padding: 16px;
}

.p-xxlg {
  padding: 20px;
}

.pl-m {
  padding-left: 8px;
}

.pl-lg {
  padding-left: 12px;
}

.pl-xxlg, .with-connector-line {
  padding-left: 20px;
}

.p0 {
  padding: 0;
}

.bb-dimfg {
  border-bottom: 1px solid #90908c;
}

.bb-lightener2 {
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.b-dashed-lightener2 {
  border: 1px dashed rgba(0, 0, 0, .2);
}

.bt-dim {
  border-top: 1px solid #f3f3f2;
}

.overflow-hidden {
  overflow: hidden;
}

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

.overflow-scroll {
  overflow: auto;
}

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

.inline-center {
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.rel, .with-connector-line, .SidebarSectionListItem {
  position: relative;
}

.hang-right {
  position: absolute;
  right: 0;
  transform: translate(100%);
}

.fill-width {
  width: 100%;
}

.fill-height {
  height: 100%;
}

.flex-child-min {
  min-width: 0;
  min-height: 0;
}

.group .show-on-group-hover, .SidebarSectionListItem .show-on-group-hover {
  display: none;
}

.group .visible-on-group-hover, .group .SidebarSectionListItem__actionIcon, .SidebarSectionListItem .visible-on-group-hover, .SidebarSectionListItem .SidebarSectionListItem__actionIcon {
  visibility: hidden;
}

.group .opaque-on-group-hover, .SidebarSectionListItem .opaque-on-group-hover {
  opacity: 0;
}

.group:hover .show-on-group-hover, .SidebarSectionListItem:hover .show-on-group-hover {
  display: block;
}

.group:focus-within .show-on-group-hover {
  display: block;
}

.SidebarSectionListItem:focus-within .show-on-group-hover {
  display: block;
}

.group:hover .visible-on-group-hover, .group:hover .SidebarSectionListItem__actionIcon, .SidebarSectionListItem:hover .visible-on-group-hover, .SidebarSectionListItem:hover .SidebarSectionListItem__actionIcon {
  visibility: visible;
}

.group:focus-within .visible-on-group-hover {
  visibility: visible;
}

.group:focus-within .SidebarSectionListItem__actionIcon {
  visibility: visible;
}

.SidebarSectionListItem:focus-within .visible-on-group-hover {
  visibility: visible;
}

.SidebarSectionListItem:focus-within .SidebarSectionListItem__actionIcon {
  visibility: visible;
}

.group:hover .opaque-on-group-hover, .SidebarSectionListItem:hover .opaque-on-group-hover {
  opacity: 1;
}

.group:focus-within .opaque-on-group-hover {
  opacity: 1;
}

.SidebarSectionListItem:focus-within .opaque-on-group-hover {
  opacity: 1;
}

.hlist-gap-xsm > * + * {
  margin-left: 4px;
}

.vlist-gap-xsm > * + * {
  margin-top: 4px;
}

.vlist-gap-sm > * + * {
  margin-top: 6px;
}

.vlist-gap-m > * + * {
  margin-top: 8px;
}

.vlist-gap-lg > * + * {
  margin-top: 12px;
}

.vlist-gap-xlg > * + * {
  margin-top: 16px;
}

.vlist-gray-border > * + * {
  border-top: 1px solid #f3f3f2;
}

ul.disc-list {
  padding-left: 15px;
}

ul.disc-list > li {
  list-style-type: disc;
}

.vlist-scrollable-descendant {
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.pointer {
  cursor: pointer;
}

.ew-resize {
  cursor: ew-resize;
}

.ns-resize {
  cursor: ns-resize;
}

.grabbable {
  cursor: grab;
}

.cursor-text {
  cursor: text;
}

.form-control-transition, .sketch-picker input, .list-box-item__handle, .select-dropdown.ant-select .ant-select-selection, .select-dropdown__button, .dropdown-container, .toggle-button > span, .icon-button, .color-control__container, .toolbar__saving-indicator, .ant-input-number.form-control, .textbox, textarea.form-control {
  transition: all .2s;
}

.display-none {
  display: none;
}

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

.cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.no-select {
  -webkit-user-select: none !important;
  user-select: none !important;
}

.auto-pointer-events {
  pointer-events: auto;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.max-scrollable {
  flex-direction: column;
  height: 100%;
  display: flex;
}

.no-caret {
  caret-color: rgba(0, 0, 0, 0);
}

.restore-normal-formatting > :last-child {
  margin-bottom: 0;
}

.restore-normal-formatting ol, .restore-normal-formatting ul {
  list-style: initial;
  margin-bottom: 0;
  padding-left: 16px;
}

.restore-normal-formatting ol {
  list-style-type: decimal;
}

.restore-normal-formatting li {
  list-style-type: inherit;
}

:root {
  --hoverBoxTagHeight: 25px;
}

body {
  font-size: 12px;
  line-height: 1.5;
}

:focus, button:focus, input:focus {
  outline: none;
}

.col-1 {
  width: 8.3333%;
  padding: 0 10px;
  display: inline-block;
}

.col-1:first-child {
  padding-left: 0;
}

.col-1:last-child {
  padding-right: 0;
}

.col-2 {
  width: 16.6666%;
  padding: 0 10px;
  display: inline-block;
}

.col-2:first-child {
  padding-left: 0;
}

.col-2:last-child {
  padding-right: 0;
}

.col-3 {
  width: 24.9999%;
  padding: 0 10px;
  display: inline-block;
}

.col-3:first-child {
  padding-left: 0;
}

.col-3:last-child {
  padding-right: 0;
}

.col-4 {
  width: 33.3332%;
  padding: 0 10px;
  display: inline-block;
}

.col-4:first-child {
  padding-left: 0;
}

.col-4:last-child {
  padding-right: 0;
}

.col-5 {
  width: 41.6665%;
  padding: 0 10px;
  display: inline-block;
}

.col-5:first-child {
  padding-left: 0;
}

.col-5:last-child {
  padding-right: 0;
}

.col-6 {
  width: 49.9998%;
  padding: 0 10px;
  display: inline-block;
}

.col-6:first-child {
  padding-left: 0;
}

.col-6:last-child {
  padding-right: 0;
}

.col-7 {
  width: 58.3331%;
  padding: 0 10px;
  display: inline-block;
}

.col-7:first-child {
  padding-left: 0;
}

.col-7:last-child {
  padding-right: 0;
}

.col-8 {
  width: 66.6664%;
  padding: 0 10px;
  display: inline-block;
}

.col-8:first-child {
  padding-left: 0;
}

.col-8:last-child {
  padding-right: 0;
}

.col-9 {
  width: 74.9997%;
  padding: 0 10px;
  display: inline-block;
}

.col-9:first-child {
  padding-left: 0;
}

.col-9:last-child {
  padding-right: 0;
}

.col-10 {
  width: 83.333%;
  padding: 0 10px;
  display: inline-block;
}

.col-10:first-child {
  padding-left: 0;
}

.col-10:last-child {
  padding-right: 0;
}

.col-11 {
  width: 91.6663%;
  padding: 0 10px;
  display: inline-block;
}

.col-11:first-child {
  padding-left: 0;
}

.col-11:last-child {
  padding-right: 0;
}

.col-12 {
  width: 99.9996%;
  padding: 0 10px;
  display: inline-block;
}

.col-12:first-child {
  padding-left: 0;
}

.col-12:last-child {
  padding-right: 0;
}

.row {
  margin: 8px 0;
}

.row:first-child {
  margin-top: 0;
}

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

.row--separated {
  border-top: 1px solid rgba(0, 0, 0, .1);
  padding-top: 8px;
}

.row--fill {
  height: 100%;
}

.full-panel-width {
  margin-left: -16px;
  margin-right: -20px;
}

.panel-col-1 {
  width: 8.3333%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-1:first-child {
  padding-left: 0;
}

.panel-col-1:last-child {
  padding-right: 0;
}

.panel-col-2 {
  width: 16.6666%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-2:first-child {
  padding-left: 0;
}

.panel-col-2:last-child {
  padding-right: 0;
}

.panel-col-3 {
  width: 24.9999%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-3:first-child {
  padding-left: 0;
}

.panel-col-3:last-child {
  padding-right: 0;
}

.panel-col-4 {
  width: 33.3332%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-4:first-child {
  padding-left: 0;
}

.panel-col-4:last-child {
  padding-right: 0;
}

.panel-col-5 {
  width: 41.6665%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-5:first-child {
  padding-left: 0;
}

.panel-col-5:last-child {
  padding-right: 0;
}

.panel-col-6 {
  width: 49.9998%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-6:first-child {
  padding-left: 0;
}

.panel-col-6:last-child {
  padding-right: 0;
}

.panel-col-7 {
  width: 58.3331%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-7:first-child {
  padding-left: 0;
}

.panel-col-7:last-child {
  padding-right: 0;
}

.panel-col-8 {
  width: 66.6664%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-8:first-child {
  padding-left: 0;
}

.panel-col-8:last-child {
  padding-right: 0;
}

.panel-col-9 {
  width: 74.9997%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-9:first-child {
  padding-left: 0;
}

.panel-col-9:last-child {
  padding-right: 0;
}

.panel-col-10 {
  width: 83.333%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-10:first-child {
  padding-left: 0;
}

.panel-col-10:last-child {
  padding-right: 0;
}

.panel-col-11 {
  width: 91.6663%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-11:first-child {
  padding-left: 0;
}

.panel-col-11:last-child {
  padding-right: 0;
}

.panel-col-12 {
  width: 99.9996%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.panel-col-12:first-child {
  padding-left: 0;
}

.panel-col-12:last-child {
  padding-right: 0;
}

.panel-row {
  align-items: center;
  width: 100%;
  min-height: 32px;
  display: flex;
}

.panel-row--separated {
  border-top: 1px solid rgba(0, 0, 0, .1);
  padding-top: 8px;
}

.panel-row--extra {
  margin-top: 16px;
}

.panel-row--autoHeight {
  height: auto;
  min-height: auto;
}

.panel-row + .panel-row {
  margin-top: 8px;
}

.panel-col--narrow-gap:not(:first-child) {
  padding-left: 2px;
}

.panel-col--narrow-gap:not(:last-child) {
  padding-right: 2px;
}

.panel-content {
  padding: 12px 20px 12px 16px;
}

.panel-content--hug-top {
  margin-top: -4px;
}

.panel-dim-block {
  background: #f3f3f2;
  border-radius: 4px;
  padding: 8px 12px;
  position: relative;
}

.panel-block--eat-vert {
  margin-top: -8px;
  margin-bottom: -8px;
}

.panel-block-placeholder {
  padding-top: 12px;
  padding-bottom: 12px;
}

* {
  box-sizing: border-box;
}

html, body {
  overscroll-behavior: none;
  height: 100%;
}

body {
  background-color: #fff;
}

.panning-grabbable {
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=) 10 7, default;
}

.panning-grabbing {
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=) 10 7, default;
}

body, .dev-env {
  color: #1b1b18;
  z-index: 1;
  background-color: #fff;
  font-family: Inter, Helvetica Neue, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-family: Inter, Helvetica Neue, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica, Arial, sans-serif;
  font-size: 32px;
}

h2 {
  font-family: Inter, Helvetica Neue, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica, Arial, sans-serif;
  font-size: 18px;
}

ul {
  margin: 0;
  padding: 0;
}

a.fg, a.SidebarSectionListItem {
  color: #1b1b18;
}

a.dimfg, a.SidebarSectionListItem__actionIcon {
  color: #90908c;
}

code {
  font-family: IBM Plex Mono, monospace;
  line-height: 1.5;
}

ul {
  list-style: none;
}

button {
  color: #1b1b18;
  background: none;
  padding: 5px;
}

.focused, .sketch-picker input:focus, .select-dropdown.ant-select.ant-select-focused .ant-select-selection, .select-dropdown.ant-select .ant-select-selection:focus, .select-dropdown__button:focus, .dropdown-container--focused, .dropdown-container:focus, .color-control__container:focus, .ant-input-number.form-control:focus, .ant-input-number.textboxlike.ant-input-number-focused, .ant-select.textboxlike.ant-select-focused .ant-select-selector, .textbox:focus, textarea.form-control:focus {
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.monaco-editor .focused, .monaco-editor .sketch-picker input:focus, .sketch-picker .monaco-editor input:focus, .monaco-editor .select-dropdown.ant-select.ant-select-focused .ant-select-selection, .select-dropdown.ant-select.ant-select-focused .monaco-editor .ant-select-selection, .monaco-editor .select-dropdown.ant-select .ant-select-selection:focus, .select-dropdown.ant-select .monaco-editor .ant-select-selection:focus, .monaco-editor .select-dropdown__button:focus, .monaco-editor .dropdown-container--focused, .monaco-editor .dropdown-container:focus, .monaco-editor .color-control__container:focus, .monaco-editor .ant-input-number.form-control:focus, .monaco-editor .ant-input-number.textboxlike.ant-input-number-focused, .monaco-editor .ant-select.textboxlike.ant-select-focused .ant-select-selector, .ant-select.textboxlike.ant-select-focused .monaco-editor .ant-select-selector, .monaco-editor .textbox:focus, .monaco-editor textarea.form-control:focus {
  box-shadow: none !important;
}

.focused-input-bg, .sketch-picker input:focus, .select-dropdown.ant-select .ant-select-selection:focus, .select-dropdown__button:focus, .dropdown-container:focus, .color-control__container:focus, .ant-input-number.form-control:focus, .textbox:focus, textarea.form-control:focus {
  background-color: #fff !important;
}

textarea.form-control {
  color: #1b1b18;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  min-height: 32px;
  padding: 8px;
}

textarea.form-control::placeholder {
  color: #dbdbd7;
}

textarea.form-control:disabled {
  color: #90908c;
}

textarea.form-control:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

textarea.form-control:focus {
  color: #1b1b18 !important;
}

textarea.form-control:disabled:hover {
  cursor: not-allowed;
}

textarea.form-control.textbox--transparent {
  background: none;
}

textarea.form-control.textbox--seamless {
  width: 100%;
  height: auto;
  min-height: auto;
  color: inherit;
  padding: 0;
}

textarea.form-control.textbox--seamless:focus {
  box-shadow: none !important;
  color: inherit !important;
  background: none !important;
}

textarea.form-control.textbox--inverse {
  color: #dbdbd7;
  background: none;
}

textarea.form-control.textbox--right {
  text-align: right;
}

textarea.form-control.textbox--listitem {
  border-radius: 0;
  width: 100%;
}

.fg-placeholder::placeholder {
  color: #1b1b18;
}

.textbox-container {
  align-items: center;
  display: flex;
  position: relative;
}

.textbox {
  color: #1b1b18;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  min-height: 32px;
  padding: 8px;
}

.textbox::placeholder {
  color: #dbdbd7;
}

.textbox:disabled {
  color: #90908c;
}

.textbox:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

.textbox:focus {
  color: #1b1b18 !important;
}

.textbox:disabled:hover {
  cursor: not-allowed;
}

.textbox.textbox--transparent {
  background: none;
}

.textbox.textbox--seamless {
  width: 100%;
  height: auto;
  min-height: auto;
  color: inherit;
  padding: 0;
}

.textbox.textbox--seamless:focus {
  box-shadow: none !important;
  color: inherit !important;
  background: none !important;
}

.textbox.textbox--inverse {
  color: #dbdbd7;
  background: none;
}

.textbox.textbox--right {
  text-align: right;
}

.textbox.textbox--listitem {
  border-radius: 0;
  width: 100%;
}

.textbox {
  width: 100%;
}

textarea.textbox-unset, .select-dropdown__button.textbox--unset, .textbox--unset {
  color: #dbdbd7;
}

input[type="text"].textbox--unset {
  color: #dbdbd7;
}

.ant-tooltip {
  pointer-events: none;
}

.ant-tooltip-inner {
  min-height: 0;
}

.preset-preview-tooltip {
  width: auto;
  max-width: 500px;
  max-height: 350px;
}

.preset-preview-tooltip-outer {
  max-width: 550px;
  max-height: 400px;
}

.ant-tooltip .ant-tooltip-arrow {
  display: none;
}

.ant-tooltip.show-ant-tooltip-arrow .ant-tooltip-arrow {
  display: initial;
}

.ant-select.textboxlike {
  cursor: pointer;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.ant-select.textboxlike .ant-select-selector {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  align-items: center;
  height: auto;
  min-height: 32px;
  padding: 0 8px;
  display: flex;
}

.ant-select.textboxlike .ant-select-selection-item {
  line-height: inherit;
  align-items: center;
  display: flex;
}

.ant-select.textboxlike .ant-select-selection-search {
  left: 8px;
}

.ant-select.textboxlike .ant-select-arrow {
  color: #90908c;
  width: auto;
  height: auto;
  margin: auto 6px auto 0;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.ant-select.textboxlike:hover .ant-select-selector {
  box-shadow: inset 0 0 0 2px rgba(0, 145, 255, .5);
}

.ant-select.textboxlike.textboxlike--white .ant-select-selector {
  color: #90908c;
  background-color: #fff;
}

.ant-select.textboxlike.text-right .ant-select-selection-item {
  justify-content: flex-end;
}

.ant-select.textboxlike.seamless {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.ant-select.textboxlike.seamless .ant-select-selector {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  align-items: center;
  height: auto;
  min-height: 32px;
  padding: 0 8px;
  display: flex;
}

.ant-select.textboxlike.seamless .ant-select-selection-item {
  line-height: inherit;
}

.ant-select.textboxlike.seamless .ant-select-selection-search {
  left: 8px;
}

.ant-select.textboxlike.seamless .ant-select-arrow {
  width: auto;
  height: auto;
  margin: auto 0;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.ant-select.textboxlike.seamless.ant-select-focused .ant-select-selector, .ant-select.textboxlike.seamless:hover .ant-select-selector {
  box-shadow: none !important;
}

.ant-select-item-option-grouped.ant-select-item-option-grouped--noindent {
  padding-left: 12px;
}

.ant-select-item-option-content {
  align-items: center;
  display: flex;
}

.ant-input-number.textboxlike .ant-input-number-input {
  text-align: left;
}

.ant-input-number.textboxlike .ant-input-number-handler-wrap {
  display: none;
}

.textbox__icon {
  color: #dbdbd7;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 8px;
  left: 8px;
}

.ant-input-number.form-control {
  color: #1b1b18;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  min-height: 32px;
  padding: 8px;
}

.ant-input-number.form-control::placeholder {
  color: #dbdbd7;
}

.ant-input-number.form-control:disabled {
  color: #90908c;
}

.ant-input-number.form-control:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

.ant-input-number.form-control:focus {
  color: #1b1b18 !important;
}

.ant-input-number.form-control:disabled:hover {
  cursor: not-allowed;
}

.ant-input-number.form-control.textbox--transparent {
  background: none;
}

.ant-input-number.form-control.textbox--seamless {
  width: 100%;
  height: auto;
  min-height: auto;
  color: inherit;
  padding: 0;
}

.ant-input-number.form-control.textbox--seamless:focus {
  box-shadow: none !important;
  color: inherit !important;
  background: none !important;
}

.ant-input-number.form-control.textbox--inverse {
  color: #dbdbd7;
  background: none;
}

.ant-input-number.form-control.textbox--right {
  text-align: right;
}

.ant-input-number.form-control.textbox--listitem {
  border-radius: 0;
  width: 100%;
}

.ant-input-number.form-control input {
  height: auto;
}

input.transparent {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.sidebar-searchbox-container {
  padding: 8px 5px;
}

textarea {
  color: #1b1b18;
  border: none;
}

li {
  list-style-type: none;
}

h5, h6 {
  font-size: 1em;
}

.routine-editor > * {
  vertical-align: top;
}

.gallery__group-heading {
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin: .5em 0;
  font-size: 11px;
}

.gallery__item {
  cursor: pointer;
  padding: 2px 8px 2px 16px;
}

.gallery__item:hover {
  color: rgba(255, 255, 255, .5);
  background: #2f69a3;
}

.gallery__group-items {
  color: #1b1b18;
  border: none;
}

.gallery__list {
  color: #1b1b18;
  border: none;
  flex: 1;
  overflow-y: scroll;
}

.gallery__drag-handle {
  background: #000;
  width: 200px;
  height: 50px;
  position: absolute;
}

.block-editor {
  padding: 8px 0;
  overflow: auto;
}

.stmt-block {
  cursor: pointer;
  border-left: 8px solid #444858;
  padding: 8px 8px 8px 12px;
  line-height: 1.6em;
  position: relative;
}

.stmt-block--disabled {
  opacity: .7;
}

.stmt-block--hovered {
  border-left-color: #0091ff;
}

.stmt-block--selected {
  background: #2e3f48;
  border-left-color: #0091ff;
}

.stmt-block__menu-button-icon {
  cursor: pointer;
  border: 8px solid gray;
  border-color: rgba(0, 0, 0, 0) gray gray rgba(0, 0, 0, 0);
}

.stmt-block__menu-button-icon:hover {
  border-bottom: 8px solid #9a9a9a;
  border-right: 8px solid #9a9a9a;
}

.stmt-block__menu-button {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.stmt-block__menu {
  z-index: 1;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .3);
  width: 300px;
  margin-top: -10px;
  margin-right: 10px;
  padding: 10px;
  box-shadow: 1px 2px 9px 3px rgba(0, 0, 0, .4);
}

.menu-item {
  cursor: pointer;
}

.menu-item:hover {
  background: #666;
}

.block-editor__placeholder {
  cursor: pointer;
  border-left: 8px solid #444858;
  padding: 8px 8px 8px 12px;
}

.routine-editor {
  flex: 1;
  width: 800px;
  overflow-y: hidden;
}

.routine-editor__main {
  color: #1b1b18;
  border: none;
  height: 100%;
  padding: 0 8px;
  overflow-y: scroll;
}

.fill-height {
  vertical-align: top;
  height: 100%;
}

.todo {
  content: "TODO";
  background: #744;
}

.indented {
  padding-left: 0;
}

.modal {
  background: #fff;
  flex-direction: column;
  height: 100%;
  display: flex;
  box-shadow: 2px 2px 40px #000;
}

.modal:before, .modal:after {
  content: " ";
  display: table;
}

.modal:after {
  clear: both;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

.modal-ftr {
  padding: 20px;
}

.rel-editor__col {
  margin-right: 20px;
  display: inline-block;
}

.rel-editor {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

.query-editor__collection {
  color: #bbb;
  background: #333;
  border: 1px solid #333;
  padding: 5px;
}

.centered__container-outer {
  width: 100%;
  height: 100%;
  display: table;
}

.centered__container-middle {
  display: table-row;
}

.centered__container-inner {
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}

.centered {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.removable-pill {
  margin: 0 15px;
  display: inline-block;
}

.list-menu__item {
  cursor: pointer;
}

.style-prop--set {
  color: #0ff;
}

.path-browser__type-header {
  color: gray;
  font-style: italic;
}

.image-picker-placeholder__thumbnail {
  max-width: 50px;
  max-height: 50px;
}

.scroller {
  height: 100%;
  overflow: scroll;
}

::-webkit-input-placeholder {
  color: rgba(187, 187, 187, .5);
}

::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0);
  width: 7px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb {
  background-color: #dbdbd7;
  border-radius: 7px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e3e3e0;
}

#scrollable::-webkit-scrollbar-corner {
  background-color: rgba(0, 0, 0, 0);
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.node-outline-tag {
  background: var(--selectionControlsColor);
  color: #fff;
  white-space: nowrap;
  pointer-events: auto;
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=) 10 7, default;
  border-radius: 3px;
  align-items: center;
  margin-right: auto;
  padding: 2px 8px 2px 6px;
  display: flex;
  position: absolute;
  bottom: 100%;
}

.resize-handle {
  pointer-events: auto;
}

.top, .bottom, .left, .right {
  background-color: var(--selectionControlsColor);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .left, .monaco-editor .suggest-widget .monaco-list .monaco-list-row .right {
  background-color: inherit;
}

.top-left, .top-right, .bottom-left, .bottom-right {
  background-color: #fff;
  width: 16px;
  height: 16px;
  display: none;
}

.hoverbox {
  transform-origin: 0 0;
  pointer-events: none;
  position: absolute;
}

.hoverbox .top, .hoverbox .bottom-center {
  height: 1px;
}

.hoverbox .bottom {
  clear: both;
}

.hoverbox .left, .hoverbox .right {
  width: 1px;
  height: 100%;
}

.hoverbox .left, .hoverbox .top-left, .hoverbox .bottom-left {
  float: left;
}

.hoverbox .right, .hoverbox .top-right, .hoverbox .bottom-right {
  float: right;
}

.templates {
  display: none;
}

.hlabel {
  display: inline-block;
}

.hlabel .hlabel-label {
  vertical-align: middle;
  width: 40px;
  font-size: 11px;
  display: inline-block;
}

.hlabel .hlabel-control {
  vertical-align: middle;
  width: 100px;
  display: inline-block;
}

.dropdown-button {
  cursor: pointer;
  background-position: -64px -16px;
  border-width: 1px;
  width: 20px;
  height: 20px;
}

.styles, .matching-styles {
  border: 2px solid gray;
}

.styles .ruleset .rule, .styles .ruleset .selstr, .matching-styles .ruleset .rule, .matching-styles .ruleset .selstr {
  border-bottom: 1px solid #eee;
}

.styles .ruleset .rule .style-key, .matching-styles .ruleset .rule .style-key {
  vertical-align: top;
  width: 200px;
  margin-left: 15px;
  display: inline-block;
}

.styles .ruleset .rule .style-key .value-display, .matching-styles .ruleset .rule .style-key .value-display {
  width: 100%;
  display: inline-block;
}

.styles .ruleset .rule .style-key .value-input-bundle input, .matching-styles .ruleset .rule .style-key .value-input-bundle input {
  width: 100%;
}

.style-completions-container {
  z-index: 2000;
  position: absolute;
}

.style-completions-container .style-completions {
  background: #fff;
  padding: 2px;
  list-style: none;
  position: absolute;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, .3);
}

.style-completions-container .style-completions .style-completion:hover {
  background: #eee;
}

.flowgraph {
  border: 10px solid silver;
  width: 500px;
  height: 400px;
}

.flowgraph .block {
  background-color: #98a490;
  width: 50px;
  height: 50px;
  position: absolute;
}

.dot {
  background: #0091ff;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin: 4px 4px 3px 6px;
  display: inline-block;
}

.dock-panel {
  z-index: 1000;
  margin: initial;
  left: initial;
  background: #fff;
  display: block;
  position: fixed;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, .3);
}

.DragItem__Handle {
  pointer-events: none;
  z-index: 10;
  position: absolute;
}

.component-drag-handle {
  opacity: .5;
  color: #fff;
  background-color: #0091ff;
  border-radius: 4px;
  align-items: center;
  padding: 4px 8px;
  display: flex;
}

.component-drag-handle .create-item__icon {
  color: #fff;
}

.component-insertion-menu {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 2px;
  padding: 4px 0;
  box-shadow: 1px 2px 9px 3px rgba(0, 0, 0, .4);
}

.component-insertion-menu__item {
  cursor: pointer;
  padding: 4px 10px;
}

.component-insertion-menu__item:hover {
  background-color: #444858;
}

.matching-styles-panel {
  width: 500px;
  top: 64px;
  right: 64px;
}

.styles-panel {
  width: 500px;
  top: 96px;
  right: 96px;
}

.tpltree-panel {
  width: 500px;
  top: 128px;
  right: 32px;
}

.domtree-panel {
  display: none !important;
}

.structure {
  border: 1px dashed rgba(0, 0, 0, .5);
  margin: 10px;
  padding: 10px;
}

.crumb {
  color: #eee;
  cursor: pointer;
  background: #777;
  margin-right: 3px;
  padding: 3px;
}

.dnd__drag-ghost {
  border: 1px solid var(--selectionControlsColor);
  pointer-events: none;
  transform-origin: 0 0;
  display: none;
  position: absolute;
}

.dnd__adoptee {
  transform-origin: 0 0;
  border: 1px solid purple;
  position: absolute;
}

.dnd__drop-marker {
  pointer-events: none;
  background: var(--selectionControlsColor);
  box-shadow: 0 0 0 2px var(--selectionControlsColor);
  transform-origin: 0 0;
  position: absolute;
}

.dnd__container {
  pointer-events: none;
  border: 1px dashed var(--selectionControlsColor);
  transform-origin: 0 0;
  position: absolute;
}

.dnd__container-tag {
  align-items: center;
  display: flex;
}

.dnd__container-tag--error {
  color: #ccc;
  background-color: #873737;
}

.dnd__container-tag__icon {
  margin-right: 5px;
  line-height: 0;
}

.dnd__container--error {
  background: repeating-linear-gradient(45deg, rgba(255, 0, 0, .1), rgba(255, 0, 0, .1) 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px);
  border-color: #873737;
}

.dnd__replace {
  background: rgba(var(--selectionControlsColor), .05);
}

.control-group {
  margin: 0 10px;
  display: inline-block;
}

.create-table-grid {
  display: table;
}

.create-table-row {
  display: table-row;
}

.create-table-block {
  background: #fff;
  border: 1px solid silver;
  width: 32px;
  height: 32px;
  display: table-cell;
}

.filled-table-block {
  background: #80b5f2;
}

.Dashboard__Project {
  cursor: pointer;
}

.Dashboard__ProjectAction {
  line-height: 1;
}

.Dashboard__ProjectName__Editor__Container {
  align-items: center;
  display: flex;
}

.vsplit-container {
  flex: 1;
  width: 100%;
  position: relative;
}

.vsplit {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vsplit-content {
  flex: 1;
}

.main-pane__switcher {
  height: 100%;
}

.matching-classes {
  margin-bottom: 10px;
}

.removeable, .removeable .fixed {
  margin-right: 5px;
}

.new-class-container {
  display: none;
}

.new-class {
  width: 100px;
}

.toolbar__container {
  height: 100%;
}

.toolbar {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  display: flex;
  position: relative;
}

.toolbar__chunk {
  align-items: center;
  display: flex;
}

.toolbar__chunk--middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.toolbar__chunk--left {
  margin-right: auto;
}

.toolbar__chunk--right {
  margin-left: auto;
}

.toolbar__live-controls {
  background-color: #1b1b18;
  border-radius: 12px;
}

.toolbar__live-controls .icon-link-btn.icon-link-btn--inverse {
  color: #dbdbd7;
}

.toolbar__saving-container {
  padding-left: 4px;
  position: absolute;
  left: 100%;
}

.toolbar__saving-indicator {
  opacity: 0;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.toolbar__saving-indicator--dirty {
  opacity: 1;
  background-color: #90908c;
}

.toolbar__saving-indicator--unlogged {
  opacity: 1;
  background-color: #dbdbd7;
}

.crumbs {
  display: inline-block;
}

.display-controls {
  margin: 0 20px;
  display: inline-block;
}

.default-editable-label {
  cursor: pointer;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  overflow: hidden;
}

.fill-space {
  width: 100%;
  height: 100%;
  position: absolute;
}

.fill-flex-space {
  flex: 1;
}

.tabs {
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.tab-content {
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.advanced-toggle {
  float: right;
  font-size: smaller;
}

.advanced-toggle input {
  vertical-align: top;
}

.hgroup > * {
  vertical-align: middle;
  margin-right: 10px;
  display: inline-block;
}

.dropdown-list {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .3);
  padding: 4px 0;
  box-shadow: 1px 2px 9px 3px rgba(0, 0, 0, .4);
}

.dropdown-list-item {
  cursor: pointer;
  padding: 4px 10px;
}

.dropdown-list-item:hover {
  background-color: #444858;
}

.size-picker {
  width: 50px;
}

.color-picker {
  margin: -10px 10px 10px -10px;
}

.color-picker-separator {
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.color-picker__add-token {
  color: #dbdbd7;
  background-color: #f3f3f2;
  border: none;
  border-radius: 50%;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
}

.color-picker__add-token:hover {
  background-color: #e9e9e6;
  border: none;
}

.color-control__container {
  color: #1b1b18;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  min-height: 32px;
  padding: 8px;
}

.color-control__container::placeholder {
  color: #dbdbd7;
}

.color-control__container:disabled {
  color: #90908c;
}

.color-control__container:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

.color-control__container:focus {
  color: #1b1b18 !important;
}

.color-control__container:disabled:hover {
  cursor: not-allowed;
}

.color-control__container.textbox--transparent {
  background: none;
}

.color-control__container.textbox--seamless {
  width: 100%;
  height: auto;
  min-height: auto;
  color: inherit;
  padding: 0;
}

.color-control__container.textbox--seamless:focus {
  box-shadow: none !important;
  color: inherit !important;
  background: none !important;
}

.color-control__container.textbox--inverse {
  color: #dbdbd7;
  background: none;
}

.color-control__container.textbox--right {
  text-align: right;
}

.color-control__container.textbox--listitem {
  border-radius: 0;
  width: 100%;
}

.color-control__container {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.color-control--unset {
  color: #dbdbd7;
}

a.plain-link, .non-link-btn, a.plain-link:hover, .non-link-btn:hover {
  color: #1b1b18;
}

a.plain-link, .non-link-btn {
  cursor: pointer;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

a.inverted {
  color: rgba(255, 255, 255, .8);
}

a.inverted:hover {
  color: #fff;
}

a.btn-link, a.btn-link:hover, .non-link-btn {
  color: inherit;
}

.non-link-btn:focus {
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.non-link-btn--disabled, a.plain-link--disabled {
  color: #000;
  cursor: initial;
}

.non-link-btn--disabled:hover, a.plain-link--disabled:hover {
  color: #000;
}

.icon-link-btn {
  color: #90908c;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 4px 6px;
  line-height: 1em;
  display: inline-flex;
  display: flex !important;
}

.icon-link-btn:hover {
  color: #1b1b18;
}

.icon-group--vert .icon-link-btn {
  padding: 6px;
}

.icon-group--vert .icon-link-btn:first-child {
  margin-left: unset;
}

.icon-group--vert .icon-link-btn:last-child {
  margin-right: unset;
}

.icon-link-btn--active, .icon-link-btn--active:hover {
  color: #0091ff;
}

.icon-link-btn--disabled {
  opacity: .5;
  cursor: not-allowed !important;
  color: #90908c !important;
}

.icon-link-btn--inverse {
  color: #868682;
}

.icon-link-btn--inverse:hover {
  color: #dbdbd7;
}

.icon-link-btn--inverse.icon-link-btn--active {
  color: #eeeeec;
  background-color: #1b1b18;
}

.icon-link-btn--inverse.icon-link-btn--active:hover {
  color: #eeeeec;
}

.icon-link-btn--inverse .icon-link-btn__label {
  color: #dbdbd7;
}

.icon-link-btn--inverse .non-link-btn {
  color: #868682;
}

.icon-link-btn--inverse:hover .non-link-btn {
  color: #dbdbd7;
}

.toolbar-icon + .icon-link-btn__label {
  margin-left: 0;
}

.icon-link-btn__with-menu {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.icon-link-btn__dropdown {
  margin-left: -4px;
  margin-right: -8px;
}

div .icon-group--vert .icon-link-btn__dropdown {
  padding: 0 0 4px 4px;
}

.icon-link-btn + .icon-link-btn__dropdown {
  margin-left: -10px;
}

.dial {
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=) 10 7, default;
  background-size: 100% 100%;
  width: 40px;
  height: 40px;
}

.dial :active {
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=) 10 7, default;
}

.outset-button {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.outset-button:hover:not(:disabled) {
  color: #1b1b18;
}

.outset-button:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.icon-button {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.icon-button:hover:not(:disabled) {
  color: #1b1b18;
}

.icon-button:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.icon-button {
  vertical-align: middle;
  color: #90908c;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
}

.icon-button:hover {
  color: #1b1b18;
  border-color: #f3f3f2;
}

.icon-button.icon-button--inverse {
  color: #868682;
}

.icon-button.icon-button--inverse:hover {
  color: #dbdbd7;
  border-color: #1b1b18;
}

.icon-button:focus {
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.icon-button--large {
  width: 40px;
  height: 40px;
}

.icon-button--disabled {
  opacity: .5;
}

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

.icon-button--seamless {
  width: auto;
  height: auto;
  padding: 0;
  line-height: 0;
}

.icon-button--seamless:hover {
  border-color: none;
}

.border-color-summary {
  text-overflow: ellipsis;
  max-width: 90px;
  overflow: hidden;
}

.larger-icon {
  font-size: 16px;
}

.largest-icon {
  font-size: 20px;
}

.icon-button--spaced {
  margin-left: 4px;
  margin-right: 4px;
}

.flex-sizing-container {
  position: relative;
}

.flex-order-container {
  width: 33%;
}

.flex-sizing-btn {
  flex-shrink: 0;
  width: 32px;
}

.grow-label {
  left: 25%;
}

.shrink-label {
  left: 75%;
}

.icon-button--vfit {
  height: auto;
  padding-top: 4px;
  padding-bottom: 4px;
}

.icon-button--hug {
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
}

.icon-button--flex-start {
  text-align: start;
  justify-content: flex-start;
  align-items: flex-start;
}

.icon-button-flex {
  flex: 1;
}

.icon-nudge {
  position: relative;
  top: 2px;
}

.icon-button--active {
  background-color: #eeeeec;
}

.plain-active-context .icon-button--active {
  color: #1b1b18;
}

.button--active {
  background-color: #eeeeec;
}

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

.toggle-button input {
  display: none;
}

.toggle-button > span {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.toggle-button > span:hover:not(:disabled) {
  color: #1b1b18;
}

.toggle-button > span:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.toggle-button > span {
  vertical-align: middle;
  color: #90908c;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
}

.toggle-button > span:hover {
  color: #1b1b18;
  border-color: #f3f3f2;
}

.toggle-button > span.icon-button--inverse {
  color: #868682;
}

.toggle-button > span.icon-button--inverse:hover {
  color: #dbdbd7;
  border-color: #1b1b18;
}

.toggle-button > span:focus {
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.toggle-button input:checked + span {
  color: #fff;
  background: #000;
}

.svg-symbol {
  fill: #1b1b18;
  stroke: #1b1b18;
  width: 12px;
  height: 12px;
}

.svg-symbol--large {
  width: 90%;
  height: 90%;
}

.nav-tabs {
  border-bottom: 1px solid #eeeeec;
  align-items: flex-end;
  width: 100%;
  display: flex;
}

.nav-tab {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.nav-tab:hover:not(:disabled) {
  color: #1b1b18;
}

.nav-tab:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.nav-tab {
  padding: 10px 5px;
}

.nav-tab--active {
  color: #1b1b18;
  border: none;
}

.nav-tab--pull-right {
  margin-left: auto;
}

.dropdown-pill {
  box-shadow: none;
  white-space: nowrap;
  color: #1b1b18;
  background-color: rgba(0, 0, 0, .08);
  border-radius: 2px;
  align-items: center;
  margin-bottom: 1px;
  margin-right: 4px;
  line-height: 1;
  display: inline-flex;
}

.no-selector-placeholder {
  color: #90908c;
}

.dropdown-pill--tight {
  margin: 0 4px 0 0;
}

.dropdown-pill__contents {
  cursor: pointer;
  text-overflow: ellipsis;
  padding: 4px 8px;
  overflow: hidden;
}

.dropdown-pill__deleter {
  padding: 0;
  line-height: 0;
}

.dropdown-pill__contents:not(:first-child) {
  padding-left: 0;
}

.dropdown-pill--selected {
  color: #fff;
  background: #0091ff;
}

.dropdown-pill--selected .icon-link-btn {
  color: #fff;
}

.dropdown-pill--inline-block {
  box-shadow: none;
  white-space: nowrap;
  color: #1b1b18;
  background-color: rgba(0, 0, 0, .08);
  border-radius: 2px;
  align-items: center;
  margin-bottom: 1px;
  margin-right: 4px;
  line-height: 1;
  display: inline-block;
}

.dropdown-container {
  color: #1b1b18;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  min-height: 32px;
  padding: 8px;
}

.dropdown-container::placeholder {
  color: #dbdbd7;
}

.dropdown-container:disabled {
  color: #90908c;
}

.dropdown-container:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

.dropdown-container:focus {
  color: #1b1b18 !important;
}

.dropdown-container:disabled:hover {
  cursor: not-allowed;
}

.dropdown-container.textbox--transparent {
  background: none;
}

.dropdown-container.textbox--seamless {
  width: 100%;
  height: auto;
  min-height: auto;
  color: inherit;
  padding: 0;
}

.dropdown-container.textbox--seamless:focus {
  box-shadow: none !important;
  color: inherit !important;
  background: none !important;
}

.dropdown-container.textbox--inverse {
  color: #dbdbd7;
  background: none;
}

.dropdown-container.textbox--right {
  text-align: right;
}

.dropdown-container.textbox--listitem {
  border-radius: 0;
  width: 100%;
}

.dropdown-container {
  cursor: text;
  z-index: 3;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 8px;
  display: flex;
  position: relative;
}

.dropdown-container--bordered {
  box-shadow: inset 0 0 0 1px #eeeeec;
}

.dropdown-container--bordered:hover {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

.dropdown-container-vstack {
  flex-direction: column;
}

.xmultiselect-arrow {
  color: #706f6c;
}

.dropdown-input-container {
  white-space: nowrap;
  flex: 1;
  display: flex;
}

.dropdown-input-container > input {
  flex: 1;
  width: 0;
}

.down-triangle-template {
  display: none;
}

.fixed-mixins-container {
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 8px;
  font-family: IBM Plex Mono, monospace;
  display: flex;
  position: relative;
}

.fixed-mixins-pill {
  box-shadow: none;
  white-space: nowrap;
  color: #1b1b18;
  background-color: rgba(0, 0, 0, .08);
  border-radius: 2px;
  align-items: center;
  margin-bottom: 1px;
  margin-right: 4px;
  line-height: 1;
  display: inline-flex;
}

.fixed-mixins-pill__contents {
  padding: 4px;
}

.down-triangle {
  fill: #1b1b18;
  width: 10px;
  height: 5px;
  display: inline-block;
}

.dropdown-arrow-container {
  cursor: pointer;
  height: 90%;
  top: 0;
  right: 0;
}

.dropdown-arrow-table {
  border-spacing: 0;
  width: 100%;
  height: 100%;
  display: table;
}

.dropdown-arrow {
  margin: 0 5px;
  display: inline-block;
}

.dropdown-arrow:first-child {
  margin-left: 0;
}

.dropdown-arrow:last-child {
  margin-right: 0;
}

.dropdown-arrow {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.dropdown-arrow svg {
  vertical-align: middle;
}

.svg-sym-cache {
  width: 0;
  height: 0;
  overflow: hidden;
}

.disabled__style__context__menu:hover, .disabled__style__context__menu {
  background-color: #777;
}

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

.select-dropdown__dropdown {
  position: relative;
}

.select-dropdown__container {
  display: flex;
  position: relative;
}

.select-dropdown__selected {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  display: block;
  overflow: hidden;
}

.select-dropdown__button {
  color: #1b1b18;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  min-height: 32px;
  padding: 8px;
}

.select-dropdown__button::placeholder {
  color: #dbdbd7;
}

.select-dropdown__button:disabled {
  color: #90908c;
}

.select-dropdown__button:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

.select-dropdown__button:focus {
  color: #1b1b18 !important;
}

.select-dropdown__button:disabled:hover {
  cursor: not-allowed;
}

.select-dropdown__button.textbox--transparent {
  background: none;
}

.select-dropdown__button.textbox--seamless {
  width: 100%;
  height: auto;
  min-height: auto;
  color: inherit;
  padding: 0;
}

.select-dropdown__button.textbox--seamless:focus {
  box-shadow: none !important;
  color: inherit !important;
  background: none !important;
}

.select-dropdown__button.textbox--inverse {
  color: #dbdbd7;
  background: none;
}

.select-dropdown__button.textbox--right {
  text-align: right;
}

.select-dropdown__button.textbox--listitem {
  border-radius: 0;
  width: 100%;
}

.select-dropdown__button {
  padding-right: 0;
  overflow: hidden;
}

.select-dropdown__button--small {
  padding: 3px;
}

.select-dropdown.ant-select .ant-select-selection {
  color: #1b1b18;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  min-height: 32px;
  padding: 8px;
}

.select-dropdown.ant-select .ant-select-selection::placeholder {
  color: #dbdbd7;
}

.select-dropdown.ant-select .ant-select-selection:disabled {
  color: #90908c;
}

.select-dropdown.ant-select .ant-select-selection:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

.select-dropdown.ant-select .ant-select-selection:focus {
  color: #1b1b18 !important;
}

.select-dropdown.ant-select .ant-select-selection:disabled:hover {
  cursor: not-allowed;
}

.select-dropdown.ant-select .ant-select-selection.textbox--transparent {
  background: none;
}

.select-dropdown.ant-select .ant-select-selection.textbox--seamless {
  width: 100%;
  height: auto;
  min-height: auto;
  color: inherit;
  padding: 0;
}

.select-dropdown.ant-select .ant-select-selection.textbox--seamless:focus {
  box-shadow: none !important;
  color: inherit !important;
  background: none !important;
}

.select-dropdown.ant-select .ant-select-selection.textbox--inverse {
  color: #dbdbd7;
  background: none;
}

.select-dropdown.ant-select .ant-select-selection.textbox--right {
  text-align: right;
}

.select-dropdown.ant-select .ant-select-selection.textbox--listitem {
  border-radius: 0;
  width: 100%;
}

.select-dropdown.ant-select .ant-select-selection {
  align-items: center;
  height: auto;
  display: flex;
}

.select-dropdown.ant-select .ant-select-selection__rendered {
  line-height: inherit;
  text-align: right;
  flex: 1;
  margin: 0;
  padding: 0;
}

.select-dropdown.ant-select .ant-select-arrow {
  vertical-align: middle;
  margin: 0;
  position: relative;
  top: auto;
  right: auto;
}

.panel-section__toggle-icon {
  float: right;
}

.panel-section__title {
  cursor: pointer;
  vertical-align: middle;
  background: #f3f3f2;
  margin: 0;
  padding: 8px 20px;
}

.EmptyTabPlaceholder {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.list-box {
  color: #1b1b18;
  border: none;
  width: 100%;
}

.list-box__add-placeholder {
  justify-content: center;
  align-items: center;
  display: flex;
}

.list-box__add-placeholder > :not(:first-child) {
  margin-left: 5px;
}

.list-box-item-focusable:focus {
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.list-box-item {
  align-items: center;
  width: 100%;
  min-height: 32px;
  margin: 2px auto;
  display: flex;
}

.list-box-item--clickable {
  cursor: pointer;
}

.list-box-item--highlighted {
  color: rgba(255, 255, 255, .5);
  background: #2f69a3;
}

.list-box-item__img {
  color: #1b1b18;
  border: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 48px;
  height: 32px;
  margin-right: 10px;
  display: flex;
  overflow: hidden;
}

.list-box-item__img-grid {
  width: 84px;
  margin-right: 8px;
}

.list-box-item__handle {
  cursor: grab;
  color: #dbdbd7;
  width: 20px;
  padding: 0 5px;
  font-size: 16px;
}

.list-box-item__label {
  flex: 1;
}

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

.list-box-item-full-height {
  margin-top: -5px;
  margin-bottom: -5px;
}

.list-box-item--top > * {
  align-items: flex-start;
}

.list-box-header__spacer {
  flex: none;
  width: 48px;
}

.list-item-height {
  min-height: 32px;
}

.private__variant__adder {
  background-color: #1b1f22;
  justify-content: center;
  align-items: center;
  height: 28px;
  display: flex;
}

.private__variant__adder > :not(:first-child) {
  margin-left: 5px;
}

.number-spinner__textbox {
  width: 50px;
}

.number-spinner__decr {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.number-spinner__decr:hover:not(:disabled) {
  color: #1b1b18;
}

.number-spinner__decr:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.number-spinner__incr {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.number-spinner__incr:hover:not(:disabled) {
  color: #1b1b18;
}

.number-spinner__incr:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.number-spinner {
  white-space: nowrap;
  display: inline-block;
}

.drag-guard {
  z-index: 1000;
  background: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.floating-window-screen {
  z-index: 900;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.floating-window {
  --anchor-top: calc(3rem + 10px);
  top: var(--anchor-top);
  pointer-events: auto;
  flex-direction: column;
  min-width: 300px;
  max-width: 100vw;
  min-height: 200px;
  max-height: 100vh;
  display: flex;
  position: absolute;
  right: 313px;
}

.floating-window--focused {
  --anchor-top: calc(3rem + 50px + 10px);
}

.floating-window__content {
  flex-direction: column;
  flex: auto;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.floating-window__content > * {
  flex: auto;
  min-height: 0;
}

.floating-window {
  opacity: .75;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
  transition: opacity .15s, filter .15s;
}

.floating-window:hover, .floating-window.floating-window--force-active {
  opacity: 1;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .2));
}

.floating-window:focus-within {
  opacity: 1;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .2));
}

.floating-window.floating-window--hidden-by-modal {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .15s, visibility 0s linear .15s;
}

.floating-window--resizer--n {
  cursor: ns-resize;
  height: 8px;
  position: absolute;
  top: -4px;
  left: 8px;
  right: 8px;
}

.floating-window--resizer--s {
  cursor: ns-resize;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 8px;
  right: 8px;
}

.floating-window--resizer--e {
  cursor: ew-resize;
  width: 8px;
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -4px;
}

.floating-window--resizer--w {
  cursor: ew-resize;
  width: 8px;
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -4px;
}

.floating-window--resizer--ne {
  cursor: nesw-resize;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -4px;
  right: -4px;
}

.floating-window--resizer--nw {
  cursor: nwse-resize;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -4px;
  left: -4px;
}

.floating-window--resizer--se {
  cursor: nwse-resize;
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: -4px;
  right: -4px;
}

.floating-window--resizer--sw {
  cursor: nesw-resize;
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: -4px;
  left: -4px;
}

.hover-outline:hover {
  box-shadow: inset 0 0 0 1px #0091ff;
}

.hover-outline--variant:hover {
  box-shadow: inset 0 0 0 1px #e54d2e;
}

.hover-outline--component:hover {
  box-shadow: inset 0 0 0 1px #8e4ec6;
}

.tpltree__ul {
  color: #1b1b18;
  padding-left: 0;
}

.tpltree__li {
  position: relative;
}

.tpltree__label {
  cursor: pointer;
  align-items: center;
  min-height: 32px;
  display: flex;
  position: relative;
}

.tpltree__label:hover .tpltree__label__menu {
  opacity: 1;
}

.tpltree__draggable {
  cursor: pointer;
  height: 32px;
}

.tpltree__label__expander {
  flex-shrink: 0;
  width: 16px;
}

.tpltree__label__expander svg {
  width: 16px;
  height: 16px;
}

.tpltree__label__expander {
  text-align: center;
  color: #90908c;
  align-items: center;
  line-height: 1em;
  display: flex;
}

.tpltree__label__expander:hover {
  color: #1b1b18;
}

.tpltree__label--focused {
  color: #1b1b18;
  background: #edf6ff;
}

.tpltree__label--hovered {
  box-shadow: inset 0 0 0 1px #0091ff;
}

.tpltree__label--focused-descendant {
  background: #fbfdff;
}

.tpltree__label--out-of-context {
  background: rgba(0, 0, 0, .1);
}

.tpltree__label--drilled-descendant {
  background-color: #fdfaff;
}

.tpltree__label--drilled-descendant.tpltree__label--focused {
  background-color: #f9f1fe;
}

.tpltree__label--hidden {
  opacity: .5;
  text-decoration: line-through;
}

.tpltree__label__content {
  flex: 1;
  align-items: center;
  min-width: 0;
  display: flex;
}

.tpltree__label__icon {
  color: #dbdbd7;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  line-height: 1em;
}

.tpltree__label__icon > svg {
  width: 100%;
  height: 100%;
}

.tpltree__label__icon.tpltree__label__icon--frame {
  color: #96c7f2;
}

.tpltree__label__icon.tpltree__label__icon--component {
  color: #d3b4ed;
}

.tpltree__label__icon.tpltree__label__icon--tag {
  color: #96c7f2;
}

.tpltree__label__icon.tpltree__label__icon--slot, .tpltree__label__icon.tpltree__label__icon--prop {
  color: #d3b4ed;
}

.tpltree__label__icon.tpltree__label__icon--focused.tpltree__label__icon--frame {
  color: #0091ff;
}

.tpltree__label__icon.tpltree__label__icon--focused.tpltree__label__icon--component {
  color: #8e4ec6;
}

.tpltree__label__icon.tpltree__label__icon--focused.tpltree__label__icon--tag {
  color: #0091ff;
}

.tpltree__label__icon.tpltree__label__icon--focused.tpltree__label__icon--slot, .tpltree__label__icon.tpltree__label__icon--focused.tpltree__label__icon--prop {
  color: #8e4ec6;
}

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

.tpltree__label__action-icon {
  color: #90908c;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  display: none;
}

.tpltree__label:hover .tpltree__label__action-icon {
  visibility: visible;
  display: flex;
}

.tpltree__label__action-icon--narrow {
  width: 8px;
}

.tpltree__label__action-icon--visible {
  display: flex;
}

.tpltree__label__action-icon--take-space {
  visibility: hidden;
  display: flex;
}

.tpltree__label__action-icon--take-space.tpltree__label__action-icon--visible {
  visibility: inherit;
}

.tpltree__label__indicator {
  position: absolute;
  left: -2px;
}

.tpltree__label__visibility:hover, .tpltree__label__lock:hover {
  color: #1b1b18;
}

.tpltree__label__setting {
  display: none;
}

.tpltree__label__setting:hover {
  color: #1b1b18;
}

.tpltree__label__setting.tpltree__label__setting--showing, .tpltree__label:hover .tpltree__label__setting {
  display: block;
}

.tpltree__dragged {
  background-color: #edf6ff;
  border-radius: 10px;
  padding: 5px 10px;
}

.tpltree__dragged .tpltree__dragged__label {
  color: #1b1b18;
}

.tpltree__drop-container {
  pointer-events: none;
  z-index: 100;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.tpltree__drop {
  width: 100%;
  height: 100%;
}

.tpltree__drop.tpltree__drop--dnd-parent {
  border: 1px dashed #0091ff;
}

.tpltree__drop.tpltree__drop--dnd-above {
  border-top: 2px solid #0091ff;
  margin-top: -1px;
}

.tpltree__drop.tpltree__drop--dnd-below {
  border-bottom: 2px solid #0091ff;
  margin-top: 1px;
}

.tpltree__drop.tpltree__drop--dnd-parent--error {
  border: 2px solid #873737;
}

.tpltree__drop.tpltree__drop--dnd-above--error {
  border-top: 2px solid #873737;
  margin-top: -1px;
}

.tpltree__drop.tpltree__drop--dnd-below--error {
  border-bottom: 2px solid #873737;
  margin-top: 1px;
}

.tpltree__drop__error {
  color: #ccc;
  background-color: #873737;
  padding: 0 5px;
  position: absolute;
}

.tpltree__drop--dnd-parent--error .tpltree__drop__error {
  top: 100%;
}

.tpltree__drop--dnd-above--error .tpltree__drop__error {
  bottom: 100%;
}

.tpltree__drop--dnd-below--error .tpltree__drop__error {
  top: 100%;
}

.tpltree__nodeLabelContainer {
  flex: 1;
  min-width: 0;
  padding-right: 5px;
  display: flex;
}

.tpltree__nodeLabel {
  flex-direction: row;
  column-gap: 1ch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  overflow: hidden;
}

.tpltree__nodeLabel .tpltree__nodeLabel__name {
  color: #1b1b18;
  max-width: 100%;
  font-weight: 600;
  position: relative;
}

.tpltree__nodeLabel .tpltree__nodeLabel__name + .tpltree__nodeLabel__summary, .tpltree__nodeLabel .tpltree__nodeLabel__customLabel + .tpltree__nodeLabel__summary {
  color: #00254d;
  opacity: .5;
}

.tpltree__nodeLabel .tpltree__nodeLabel__summary {
  width: auto;
  min-width: 0;
  display: inline-block;
}

.tpltree__nodeLabel .tpltree__nodeLabel__content {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.tpltree__nodeLabel .tpltree__nodeLabel__customLabel {
  opacity: .5;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.tpltree__nodeLabel .tpltree__nodeLabel__name + .tpltree__nodeLabel__content:before, .tpltree__nodeLabel .tpltree__nodeLabel__summary + .tpltree__nodeLabel__content:before {
  content: "- ";
}

.tpltree__nodeLabel.tpltree__nodeLabel--hasName .tpltree__nodeLabel__summary {
  display: none;
}

.tpltree__label:hover .tpltree__nodeLabel.tpltree__nodeLabel--hasName .tpltree__nodeLabel__summary, .tpltree__label--focused .tpltree__nodeLabel.tpltree__nodeLabel--hasName .tpltree__nodeLabel__summary {
  display: inline-block;
}

.tpltree__label--droptarget {
  border-bottom: 3px solid #0091ff;
}

.tpltree__label--hidden .tpltree__nodeLabel__name {
  color: #90908c;
}

.content-settings__tree-ul--nested {
  padding-left: 10px;
}

.content-settings__tree-node--underlined {
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.content-settings__tree-node-content--clickable {
  cursor: pointer;
}

.content-settings__tree-node-content--clickable:hover {
  color: #fff;
}

.content-settings__tree-node {
  margin-top: 8px;
  display: flex;
}

.content-settings__tree-node-content {
  padding: 2px 0;
}

.content-settings__tree-node-content:first-child {
  flex: 1;
}

.tree-node__select-child-hint {
  padding-top: 4px;
  font-size: 11px;
}

.modify-panel {
  color: #90908c;
  flex-direction: column;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.modify-panel__sections {
  flex: 1;
}

.fixed-panel-header {
  border-bottom: 1px solid #000;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, .3);
}

.dim-spinner {
  white-space: nowrap;
}

.dim-spinner__dropdown {
  width: 50px;
}

.border-style-demo__container {
  vertical-align: middle;
}

.border-style-demo__label, .border-style-demo__demo {
  width: 50px;
  display: inline-block;
}

.updated-element {
  background: rgba(255, 255, 255, .2);
}

.ant-dropdown-menu-root, .ant-dropdown-menu-sub {
  max-height: 80vh;
  overflow: auto;
}

.component-insertion__item, .layout-insertion__item {
  cursor: pointer;
  height: 24px;
}

.data-scope {
  margin: 16px 0;
}

.data-scope__tag-desc {
  cursor: pointer;
  background: #222;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 2px 0;
}

.data-scope__expr-and-vals {
  display: inline-block;
}

.data-scope__remove-binding-btn {
  vertical-align: top;
}

.data-scope__cond, .data-scope__rep, .data-scope__let {
  margin-bottom: 8px;
}

.binding-name {
  width: 50px;
}

.btn {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.btn:hover:not(:disabled) {
  color: #1b1b18;
}

.btn:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.btn--thin {
  padding: 4px;
}

.table-editor__cell {
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  padding: 2px 4px;
}

.field-editor__label {
  border: 1px solid rgba(0, 0, 0, 0);
}

.field-editor__label--editable:hover {
  border: 1px solid #777;
}

.table-editor__header {
  background: rgba(0, 0, 0, .5);
}

.table-editor__row--pending {
  background: rgba(255, 255, 0, .2);
}

.logical__conds {
  border-left: 4px solid gray;
  padding: 4px;
}

.logical__cond, .query-builder__row {
  margin-bottom: 4px;
}

.placeholder {
  color: rgba(200, 200, 200, .5);
  font-style: italic;
}

.add-rel__col {
  width: 200px;
  display: inline-block;
}

.flex-accessor {
  border: 1px solid gray;
}

.flex-accessor__scroller {
  max-width: 400px;
  height: 240px;
  display: inline-block;
  overflow-x: auto;
}

.flex-accessor__inner {
  white-space: nowrap;
  height: 220px;
  display: inline;
}

.flex-accessor__list {
  width: 150px;
  height: 200px;
  margin: 8px;
  display: inline-block;
  overflow: auto;
}

.rich-accessor__level {
  min-width: 150px;
  height: 200px;
  margin: 8px;
  display: inline-block;
  overflow-y: scroll;
}

.flex-accessor__item {
  cursor: pointer;
  padding: 2px 8px 2px 16px;
}

.flex-accessor__item--highlighted {
  color: rgba(255, 255, 255, .5);
  background: #2f69a3;
}

.flex-accessor__item--browsed {
  background: rgba(255, 255, 255, .05);
}

.flex-accessor__item--selected {
  background: #2f69a3;
  border-left: 4px solid #0091ff;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
}

.routine-builder__steps {
  display: table;
}

.routine-builder__step {
  display: table-row;
}

.routine-builder__step-spec, .routine-builder__step-example {
  display: table-cell;
}

.env-builder__bindings {
  display: table-row-group;
}

.env-builder__binding {
  display: table-row;
}

.env-builder__binding-name, .env-builder__binding-expr, .env-builder__binding-example {
  display: table-cell;
}

.env-explorer__table, .env-builder__table, .record-editor__table {
  border-collapse: separate;
  border-spacing: 10px;
  display: table;
}

.env-explorer__table th, .env-builder__table th, .record-editor__table th {
  text-align: left;
}

.env-explorer__expander {
  width: 10px;
  display: inline-block;
}

.preview-table__head {
  background: rgba(0, 0, 0, .5);
}

.preview-table__cell {
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  padding: 2px 4px;
}

.elastic {
  width: 100%;
}

.method-form__title {
  margin: 8px 0;
}

.method-form__title:first-child {
  margin-top: 0;
}

.method-form__title:last-child {
  margin-bottom: 0;
}

.method-form__desc {
  width: 49.9998%;
  padding: 0 10px;
  display: inline-block;
}

.method-form__desc:first-child {
  padding-left: 0;
}

.method-form__desc:last-child {
  padding-right: 0;
}

.method-form__ret {
  width: 49.9998%;
  padding: 0 10px;
  display: inline-block;
}

.method-form__ret:first-child {
  padding-left: 0;
}

.method-form__ret:last-child {
  padding-right: 0;
}

.method-form__ret {
  color: rgba(255, 255, 255, .4);
  text-align: right;
  font-size: 11px;
}

.method-form__param {
  margin: 8px 0;
}

.method-form__param:first-child {
  margin-top: 0;
}

.method-form__param:last-child {
  margin-bottom: 0;
}

.method-form__param-name {
  width: 33.3332%;
  padding: 0 10px;
  display: inline-block;
}

.method-form__param-name:first-child {
  padding-left: 0;
}

.method-form__param-name:last-child {
  padding-right: 0;
}

.method-form__param-name {
  padding-left: 8px !important;
}

.method-form__param-val {
  width: 66.6664%;
  padding: 0 10px;
  display: inline-block;
}

.method-form__param-val:first-child {
  padding-left: 0;
}

.method-form__param-val:last-child {
  padding-right: 0;
}

.method-form__param-val--full {
  width: 99.9996%;
  padding: 0 10px;
  display: inline-block;
}

.method-form__param-val--full:first-child {
  padding-left: 0;
}

.method-form__param-val--full:last-child {
  padding-right: 0;
}

.method-form__continue-container {
  margin: 8px 0;
}

.method-form__continue-container:first-child {
  margin-top: 0;
}

.method-form__continue-container:last-child {
  margin-bottom: 0;
}

.method-form__continue-container {
  text-align: right;
}

.env-accessor__fields {
  width: 100%;
  display: table;
}

.env-accessor__field-name {
  display: table-cell;
}

.env-accessor__field-type {
  color: rgba(255, 255, 255, .4);
  text-align: right;
  font-size: 11px;
  display: table-cell;
}

.table-editor__cell--unpadded {
  padding: 0;
}

.toggle-check {
  width: 20px;
  height: 20px;
  display: block;
}

.toggle-check:hover {
  background: rgba(255, 255, 255, .1);
}

.wab-logo {
  font-family: Stencil;
}

.project {
  margin-bottom: 30px;
  margin-right: 30px;
}

.project-thumbnail {
  cursor: pointer;
  background: #fff;
  width: 300px;
  height: 200px;
  margin-bottom: 10px;
  transition: background .5s;
  position: relative;
}

.project-caption {
  width: 100%;
}

.project-thumbnail--create-btn {
  background: #d8d8d8;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.project-thumbnail__hover {
  opacity: 0;
  background: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100%;
  transition: opacity .5s;
  position: absolute;
}

.create-project__icon {
  z-index: 1;
  margin-top: -50px;
  margin-bottom: -10px;
  font-size: 144px;
}

.project-thumbnail:hover .project-thumbnail__hover {
  opacity: 1;
}

.project__name-link {
  color: #515148;
}

.project__main-btn {
  text-transform: uppercase;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.project__main-btn:hover {
  color: #515148;
}

.project__btn-row {
  width: 100%;
  padding: 20px;
  position: absolute;
  bottom: 0;
}

.user-avatar {
  margin-right: 5px;
}

.major-tab-bar {
  background: #2b3237;
  width: 100%;
}

.major-tab {
  padding: 15px;
  display: inline-block;
}

.major-tab:hover {
  background: #202529;
}

.major-tab--active, .major-tab--active:hover {
  background: #000;
}

.major-sub-tab {
  display: inline-block;
  position: relative;
}

.major-sub-tab__link {
  z-index: 1;
  padding: 15px;
  display: inline-block;
}

.major-sub-tab__link:hover {
  color: #292924;
}

.major-sub-tab__link--active {
  color: #b8b8b8;
}

.major-sub-tab--active:before, .major-sub-tab:hover:before {
  content: "";
  pointer-events: none;
  border: 12px solid rgba(0, 0, 0, 0);
  border-bottom-color: #fff;
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  left: calc(50% - 12px);
}

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

.site-mgr__title-adjunct {
  margin-left: 32px;
  display: inline-block;
}

.icon-warning, .invalid-arg-icon {
  color: #f7a700;
}

.issue-counter__count {
  color: #fff;
  background: #f7a700;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 12px;
  display: inline-block;
  position: relative;
  top: -2px;
}

.major-icon {
  text-align: center;
  width: 20px;
  margin-right: 5px;
  font-size: 20px;
  display: inline-block;
}

.toolbar-icon {
  text-align: center;
  min-width: 14px;
  font-size: 14px;
  display: inline-block;
}

.minor-icon {
  margin: 0 5px;
  display: inline-block;
}

.minor-icon:first-child {
  margin-left: 0;
}

.minor-icon:last-child {
  margin-right: 0;
}

.padded {
  margin: 0 10px;
  display: inline-block;
}

.padded:first-child {
  margin-left: 0;
}

.padded:last-child {
  margin-right: 0;
}

.section {
  margin-top: 20px;
}

.section:before, .section:after {
  content: " ";
  display: table;
}

.section:after {
  clear: both;
}

.section:first-child {
  margin-top: 0;
}

.tbl {
  width: 100%;
  margin: 20px 0;
}

.tbl__th, .tbl__td {
  height: 50px;
  padding: 6px;
}

.tbl__th {
  text-align: left;
}

.tbl__th--clickable {
  cursor: pointer;
}

.tbl__tr:nth-child(odd) {
  background: #282f34;
}

.tbl__tr:hover {
  filter: brightness(110%);
}

.tbl__td--squeeze {
  white-space: nowrap;
  width: 1%;
}

.circle-btn {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.circle-btn:hover:not(:disabled) {
  color: #1b1b18;
}

.circle-btn:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.circle-btn {
  border-radius: 16px;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  padding: 4px;
}

.checkbox {
  display: inline-block;
}

.checkbox__box {
  color: #3bbfff;
  text-align: center;
  cursor: pointer;
  background: #f2f2f2;
  border: 2px solid #000;
  width: 1.5em;
  height: 1.5em;
  margin-right: .5em;
  display: inline-block;
}

.checkbox__box > input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.plain-active-context .checkbox__box {
  color: #1b1b18;
}

.checkbox__repr {
  visibility: hidden;
}

input[type="checkbox"]:checked + .checkbox__repr {
  visibility: visible;
}

.home-logo {
  filter: brightness(80%);
  width: 32px;
  height: 32px;
  margin-top: 12px;
  padding-top: 4px;
}

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

.rotated--45 {
  transform: rotate(-45deg);
}

.rotated-0 {
  transform: rotate(0);
}

.rotated-45 {
  transform: rotate(45deg);
}

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

.rotated-135 {
  transform: rotate(135deg);
}

.rotated-180 {
  transform: rotate(180deg);
}

.rotated-225 {
  transform: rotate(225deg);
}

.rotated-270 {
  transform: rotate(270deg);
}

.rotated-315 {
  transform: rotate(315deg);
}

.flip-horiz {
  transform: scaleX(-1);
}

.flip-vert {
  transform: scaleY(-1);
}

.h-nav-item {
  display: inline-block;
}

.table-columns {
  display: flex;
}

.table-list {
  width: 180px;
  margin-right: 20px;
  padding-left: 10px;
}

.table-list__list {
  margin: 8px 0;
  position: relative;
  left: -6px;
}

.table-list__table {
  border-radius: 3px;
  padding: 8px 6px;
  display: block;
}

.table-list__table:hover {
  background: #444858;
}

.table-list__create {
  font-size: 12px;
  font-style: italic;
}

.table-list__table--active {
  background: #393c4a;
}

.table-list__create {
  float: left;
}

.table-list__icons {
  float: right;
}

.table-view-filter {
  float: left;
}

.table-view-summary {
  float: right;
}

.table-view-btn {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.table-view-btn:hover:not(:disabled) {
  color: #1b1b18;
}

.table-view-btn:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.table-view-btn {
  margin: 0 10px;
  display: inline-block;
}

.table-view-btn:first-child {
  margin-left: 0;
}

.table-view-btn:last-child {
  margin-right: 0;
}

.table-details {
  flex: 1;
}

.table-details__field {
  margin-bottom: 10px;
  display: block;
}

.table-details__field-label {
  text-align: right;
  width: 100px;
  margin-right: 10px;
  display: inline-block;
}

.table-details__input, .table-details__textarea {
  width: 500px;
}

.major-sub-tab-bar {
  background: #000;
  height: 45px;
}

.normal-layout {
  font-size: 14px;
}

.normal-layout-content {
  max-width: 960px;
  height: 100%;
  margin: 0 auto;
}

.normal-layout-content--top-bar {
  display: flex;
}

.normal-layout__top-bar {
  background-color: #1b1b18;
  height: 50px;
}

.normal-layout__top-bar-right {
  display: flex;
}

.normal-layout__top-bar-right > :not(:first-child) {
  margin-left: 24px;
}

.normal-layout__top-bar-right {
  align-items: center;
  margin-left: auto;
}

.normal-layout__user {
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  height: 100%;
  display: flex;
}

.normal-layout__mark {
  width: 32px;
  height: 32px;
}

.id-summary__container {
  cursor: pointer;
}

.id-summary {
  text-overflow: ellipsis;
  width: 50px;
  height: 1em;
  display: inline-block;
  overflow: hidden;
}

.icon-group {
  align-items: center;
  display: flex;
}

* + .icon-group {
  margin-left: 8px;
}

.icon-group--vert {
  flex-direction: column;
  align-items: center;
}

* + .icon-group--vert {
  margin-left: unset;
  margin-top: 8px;
}

.icon-group--sep-left {
  border-left: 1px solid #1b1b18;
  padding-left: 8px;
}

.expander-icon {
  text-align: center;
  width: 14px;
  font-size: 14px;
  display: inline-block;
}

.expander-icon--hoverable:hover {
  color: #fff;
}

.expr-placeholder {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.expr-placeholder:hover:not(:disabled) {
  color: #1b1b18;
}

.expr-placeholder:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.expr-placeholder {
  text-align: left;
  width: 100%;
  padding: 4px;
  display: block;
}

.expr-setting {
  margin-bottom: 12px;
}

.expr-setting__label {
  margin-bottom: 4px;
  display: block;
}

.expr-setting__expr {
  text-align: left;
  color: #f6a623;
  width: 100%;
  display: block;
}

.selector__label {
  width: 24.9999%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.selector__label:first-child {
  padding-left: 0;
}

.selector__label:last-child {
  padding-right: 0;
}

.selector__select {
  width: 74.9997%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.selector__select:first-child {
  padding-left: 0;
}

.selector__select:last-child {
  padding-right: 0;
}

.selector__controls {
  align-items: center;
  width: 100%;
  min-height: 32px;
  display: flex;
}

.selector__control {
  margin-right: 20px;
}

.panel-heading {
  text-transform: uppercase;
  margin: 0;
  font-size: 11px;
  position: relative;
}

.panel-heading__text {
  padding-right: 10px;
  display: inline-block;
  position: relative;
}

.panel-heading__line {
  background: rgba(0, 0, 0, .2);
  width: 100%;
  height: 1px;
  display: none;
  position: absolute;
  top: calc(50% - 1px);
}

.svg-icon {
  vertical-align: middle;
}

.custom-svg-icon {
  vertical-align: middle;
  flex-shrink: 0;
  width: auto;
  height: 16px;
}

.custom-svg-icon--lg {
  height: 24px;
}

.custom-svg-icon--xlg {
  height: 36px;
}

.custom-svg-icon--xxlg {
  height: 48px;
}

.InlineIcon {
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  transform: translateY(-5%);
}

.object__position__control__row {
  display: flex;
}

.labeled-item {
  flex: 1;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  margin-left: 0;
  padding: 0;
  transition: all .2s;
  display: flex;
  position: relative;
}

.labeled-item.textbox--unset {
  color: #706f6c;
  opacity: 1;
}

:where(.labeled-item > *) {
  min-width: 0;
  min-height: 0;
}

.labeled-item--horizontal--flushtop {
  align-items: flex-start;
}

:where(.labeled-item--horizontal--flushtop > *) {
  align-items: center;
  min-height: 32px;
  display: flex;
}

.labeled-item--horizontal--vcenter {
  align-items: center;
}

.labeled-item--vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.labeled-item--auto {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: auto;
}

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

.labeled-item + .labeled-item, .labeled-item + .style-wrapper {
  margin-left: 10px;
}

.labeled-item__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1b1b18;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.labeled-item__label-and-defined-container {
  flex-shrink: 0;
  align-items: center;
  display: flex;
  position: relative;
}

.labeled-item__label--horizontal {
  width: 84px;
}

.labeled-item__label--small {
  width: 46px;
}

.labeled-item__label--icon {
  line-height: 0;
}

.labeled-item__defined-container {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translate(0, -50%);
}

.labeled-item__defined-container--tight {
  position: absolute;
}

.labeled-item__input {
  flex: 1;
  display: flex;
}

.labeled-item__menu {
  cursor: pointer;
  margin-left: -4px;
  padding: 4px 8px;
  display: none;
  position: absolute;
  left: 100%;
}

.labeled-item:hover .labeled-item__menu {
  display: block;
}

.labeled-item__text {
  padding: 4px 0;
}

.labeled-item__value-vpadding {
  padding: 7px 0;
}

.label-col {
  width: 84px;
  margin-right: 8px;
}

.fallback__label .labeled-item__label {
  padding-left: 16px;
}

.labeled-item__item-position {
  margin-left: 84px;
  padding: 0 5px 0 8px;
  display: flex;
}

.input-pill {
  cursor: pointer;
  background-color: #fdfdfc;
  border-radius: 4px;
  margin: -4px 2px;
  padding: 4px 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}

.input-pill:hover {
  background-color: #f9f9f8;
}

.right-panel-input-background__no-height {
  background-color: #f3f3f2;
  border-radius: 6px;
  padding: 6px;
}

.right-panel-input-background__no-height:hover {
  background-color: #eeeeec;
}

.right-panel-input-background, .code-editor-input {
  background-color: #f3f3f2;
  border-radius: 6px;
  min-height: 32px;
  padding: 6px;
}

.right-panel-input-background:hover, .code-editor-input:hover, .right-panel-input-background-selected {
  background-color: #eeeeec;
}

.code-chip-like {
  color: #299764;
  cursor: pointer;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  padding: 0 2px;
  font-family: IBM Plex Mono, monospace;
  font-weight: bold;
}

.code-chip-like:hover {
  background-color: #e9f9ee;
}

.templated-string-input {
  color: #1b1b18;
  cursor: initial;
  border: 1px solid var(--qb-select-input-border-color);
  overflow-wrap: break-word;
  background-color: #f3f3f2;
  border-radius: 6px;
  max-height: 100px;
  padding: 6px;
  overflow: auto;
  min-height: 32px !important;
}

.templated-string-input.templated-string-input--multiLine {
  min-height: 64px !important;
}

.templated-string-input:hover {
  background: #eeeeec;
}

.templated-string-input .code-chip {
  color: #299764;
  cursor: pointer;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  padding: 0 2px;
  font-family: IBM Plex Mono, monospace;
  font-weight: bold;
}

.templated-string-input .code-chip {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  vertical-align: middle;
  -webkit-box-orient: vertical;
  display: -webkit-inline-box;
  overflow: hidden;
}

.templated-string-input .code-chip:hover {
  background-color: #e9f9ee;
}

.templated-string-input .code-chip.right-panel-input-background-selected {
  color: #fff;
  background-color: #0091ff;
}

.templated-string-input .code-chip.right-panel-input-background-selected:hover {
  color: #fff;
  background-color: #5eb0ef;
}

@keyframes caret-animation {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes caret-animation2 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.custom-caret-container {
  --caret-color: #0091ff;
  --caret-width: 2px;
  z-index: 1000;
  align-items: center;
  width: 0;
  height: 0;
  animation: none;
  position: fixed;
  top: 0;
  left: 0;
}

.templated-string-input:not(:-webkit-any(:hover, :focus, :focus-within)) {
  --caret-color: black;
  --caret-width: 1px;
}

.templated-string-input:not(:is(:hover, :focus, :focus-within)) {
  --caret-color: black;
  --caret-width: 1px;
}

.custom-caret {
  flex: none;
  width: 0;
  height: 1.3em;
}

.caret-button {
  --webkit-appearance: none;
  box-shadow: none;
  cursor: pointer;
  background: none;
  border: none;
  flex: none;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  display: flex;
}

.caret-button .caret-button-inner {
  transform-origin: top;
  transition: all .1s;
  transform: translateY(10px);
}

.caret-button .caret-button-shape {
  background-color: var(--caret-color);
  box-sizing: border-box;
  color: #fff;
  border-radius: 0 24px 24px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
  transform: rotate(45deg);
}

.caret-button .caret-button-icon {
  justify-content: center;
  align-items: center;
  display: flex;
  transform: rotate(-45deg);
}

.custom-caret-container {
  transform-origin: 50% 0;
}

.custom-caret-container:not(:-webkit-any(:hover, :focus)) .caret-button-inner {
  transform: scale(.3);
}

.custom-caret-container:not(:is(:hover, :focus)) .caret-button-inner {
  transform: scale(.3);
}

.custom-caret-container:not(:-webkit-any(:hover, :focus)) {
  transform: translateY(0);
}

.custom-caret-container:not(:is(:hover, :focus)) {
  transform: translateY(0);
}

.custom-caret-container:not(:-webkit-any(:hover, :focus)) .caret-button-shape {
  opacity: .5;
}

.custom-caret-container:not(:is(:hover, :focus)) .caret-button-shape {
  opacity: .5;
}

.templated-string-input:not(.templated-string-input--moved) .caret-button-shape {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 100000px;
}

.templated-string-input:not(.templated-string-input--moved) .caret-button-icon {
  opacity: 0;
}

.code-editor-input {
  -webkit-line-clamp: 8;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  -webkit-box-orient: vertical;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: auto;
  font-family: IBM Plex Mono, monospace;
  display: flex;
  overflow: hidden;
}

.code-editor-input .text-set {
  color: #299764;
  cursor: pointer;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  padding: 0 2px;
  font-family: IBM Plex Mono, monospace;
  font-weight: bold;
}

.code-editor-input .text-set:hover {
  background-color: #e9f9ee;
}

.code-editor-input span {
  -webkit-line-clamp: 8;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  -webkit-box-orient: vertical;
  display: -webkit-inline-box;
  overflow: hidden;
}

.generic-prop-editor {
  align-items: center;
  width: 100%;
  min-height: 32px;
  display: flex;
}

.generic-prop-editor .ant-input-number, .generic-prop-editor .ant-input, .generic-prop-editor .code-editor-input {
  box-shadow: inset 0px 0px 0px 1px var(--token-eBt2ZgqRUCz);
  background: none;
  border-width: 0;
  border-radius: 6px;
  padding: 8px;
  font-family: inherit;
}

.generic-prop-editor .ant-input-number:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.generic-prop-editor .ant-input:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.generic-prop-editor .code-editor-input:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.generic-prop-editor .ant-input-number-input {
  height: auto;
  padding: 0;
}

.screen__variants__dim__controls {
  margin-left: 8px;
  display: flex;
}

.screen__variants__dim__controls .labeled-item + .labeled-item {
  padding-left: 20px;
}

.screen__variants__dim__label {
  width: 30px;
}

.panel-heading-row {
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  background: #000;
  margin: 10px -20px;
  padding: 8px 20px;
  font-size: 11px;
}

.form-control {
  width: 100%;
}

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

.attributes-menu:before {
  top: 0;
  bottom: 0;
}

.textbox--block {
  width: 100%;
  display: block;
}

.positioning-label {
  width: 33.3332%;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}

.positioning-label:first-child {
  padding-left: 0;
}

.positioning-label:last-child {
  padding-right: 0;
}

.invalid-arg-warning.invalid-arg-warning {
  color: #faad14;
}

.invalid-arg-icon {
  z-index: 50;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: -10px;
}

.typography__text-decoration {
  text-align: right;
}

.typography__underline-icon {
  text-decoration: underline;
}

.typography__line-through-icon {
  text-decoration: line-through;
}

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

.float-right {
  float: right;
}

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

.panel-group {
  color: #868682;
  background: #fff;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 32px;
  margin-left: -12px;
  margin-right: -12px;
  padding: 12px;
  display: flex;
}

.on-off-switch {
  cursor: pointer;
  color: rgba(0, 0, 0, .3);
  margin-right: -6px;
}

.on-off-switch__label {
  text-transform: uppercase;
  margin-right: 6px;
  padding: 2px 0;
  font-size: 11px;
  display: inline-block;
}

.on-off-switch__label--active {
  border-bottom: 1px solid #1b1b18;
}

.on-off-switch__space {
  color: #1b1b18;
  vertical-align: middle;
  border: none;
  width: 19px;
  height: 17px;
  margin: 0 2px;
  display: inline-block;
  position: relative;
}

.on-off-switch__switch {
  background: rgba(151, 151, 151, .5);
  width: 7px;
  height: 12px;
  display: block;
  position: absolute;
  top: 3px;
}

.on-off-switch__switch--on {
  left: 3px;
}

.on-off-switch__switch--off {
  right: 3px;
}

.data-control-block {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0);
  margin: 0 -12px;
  padding: 8px 12px;
}

.data-control-block--has-top-neighbor {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.data-control-block--expanded {
  border-top: 1px solid rgba(0, 0, 0, 0);
  margin-top: 16px;
  margin-bottom: 16px;
}

.data-control-block--expanded + .data-control-block--has-top-neighbor {
  border-top: 1px solid rgba(0, 0, 0, 0);
}

.toolbar__taper-container {
  width: 10px;
  height: 100%;
}

.toolbar__taper-shape {
  fill: #fff;
}

.hilite-tabs {
  padding: 0 8px;
}

.hilite-tabs--no-border {
  border-bottom-color: rgba(0, 0, 0, 0);
}

.hilite-tab {
  cursor: pointer;
  color: #90908c;
  height: 40px;
  padding: 0 8px;
  font-weight: 600;
  position: relative;
}

.hilite-tab:hover:after {
  content: "";
  background: #868682;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 8px;
  right: 8px;
}

.hilite-tab:focus:after {
  content: "";
  background: rgba(0, 145, 255, .5);
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 8px;
  right: 8px;
}

.hilite-tab--active {
  color: #1b1b18;
}

.hilite-tab--active:after {
  content: "";
  background: #868682;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 8px;
  right: 8px;
}

.hilite-tab--tight {
  height: 32px;
}

.style__assets__adder__container {
  height: 24px;
}

.style__assets__adder {
  padding-top: 8px;
  position: absolute;
  right: 25px;
}

.style__assets__item__label {
  width: 80%;
  display: inline-block;
}

.style__assets__label__menu {
  cursor: pointer;
  display: inline-block;
}

.style__assets__item__container {
  margin-top: 5px;
  padding: 2px;
}

.style__assets__item__label__row {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 4px;
  display: flex;
}

.style__assets__item__label__row:hover {
  background: #393c4a;
}

.style__assets__item__settings {
  display: inline-block;
}

.style__assets__item__preview__container {
  padding-left: 20px;
  display: block;
}

.style__assets__typography__preview {
  all: initial;
}

.style__assets__typography__preview * {
  all: revert;
}

.style__assets__typography__preview {
  cursor: pointer;
  background-color: #fff;
  max-width: 100%;
  max-height: 200px;
  display: block;
  overflow: auto;
}

.completions {
  flex-direction: column;
  height: 240px;
  display: flex;
}

.completions__list {
  color: rgba(255, 255, 255, .5);
  background: #f7f7f7;
  flex: 1;
  overflow-x: clip;
  overflow-y: scroll;
}

.list-box-section {
  cursor: pointer;
}

.list-box-section__title {
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin: .5em 0;
  font-size: 11px;
}

.completion--selected {
  background: #0091ff;
}

.completion__label {
  width: 50%;
  display: inline-block;
}

.completion__detail {
  text-align: right;
  color: rgba(255, 255, 255, .4);
  width: 50%;
  display: inline-block;
}

.hint {
  color: rgba(27, 27, 24, .7);
  font-style: italic;
}

.completions__type-hint {
  color: rgba(27, 27, 24, .7);
  margin-top: 8px;
  font-style: italic;
}

.link-btn-space {
  margin: 0 20px;
}

.right-panel-dropdown {
  font-size: 12px;
}

.grab-handle {
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=) 10 7, default;
}

.grab-handle:active {
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=) 10 7, default;
}

.mad-lib {
  border-bottom: 4px solid rgba(0, 145, 255, .3);
}

.mad-lib:hover:not(:disabled) {
  border-bottom: 4px solid rgba(0, 145, 255, .5);
}

.mad-lib--placeholder:link {
  color: rgba(0, 145, 255, .7);
  font-style: italic;
}

.input-box {
  color: #1b1b18;
  border: none;
  padding: 4px 6px;
  display: block;
}

.input-box:hover {
  background: #fff;
}

.panel-row + .value-preview-row {
  margin-top: 4px;
}

.value-preview {
  color: #7938b2;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  border: none;
  -webkit-box-orient: vertical;
  align-self: flex-start;
  max-width: 100%;
  font-weight: 500;
  display: -webkit-inline-box;
  overflow: hidden;
}

.value-preview--error {
  color: #e5484d;
}

.value-preview--loading {
  color: #9d5bd2;
  font-style: italic;
}

.value-preview--clickable:hover {
  color: #9d5bd2;
  text-decoration: underline;
}

.value-preview--editable {
  cursor: pointer;
}

.value-preview--editable:hover {
  background: #fff;
}

.light-error {
  color: #e5484d;
}

.error-bg {
  color: #ccc;
  background: #873737;
}

.error-boundary {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  color: #fff;
  background: #c85a5a;
  -webkit-box-orient: vertical;
  max-width: 100%;
  margin-left: 4px;
  padding: 2px;
  font: 11px Helvetica;
  display: -webkit-inline-box;
  position: relative;
  overflow: hidden;
}

.ArenaNavigator {
  min-width: 200px;
}

.ArenaNavigator__List {
  max-height: 500px;
  margin: 10px -16px 0;
  overflow: auto;
}

.ArenaNavigator__Item:hover {
  box-shadow: inset 0 0 0 1px #0091ff;
}

.ArenaNavigator__Item {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  height: 30px;
  margin-left: -16px;
  margin-right: -20px;
  padding: 0 20px;
  display: flex;
}

.arenas-arena-separator {
  padding-top: 8px;
  padding-bottom: 8px;
}

.create-item:hover {
  box-shadow: inset 0 0 0 1px #0091ff;
}

.create-item {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  height: 30px;
  margin-left: -16px;
  margin-right: -20px;
  padding: 0 20px;
  display: flex;
}

.create-item--selected {
  background: #393c4a;
}

.create-item__icon {
  color: #dbdbd7;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  line-height: 1;
  display: flex;
}

.create-item__label {
  flex: 1;
}

.create-item__icons {
  opacity: 0;
  margin-left: auto;
  margin-right: -10px;
  display: flex;
}

.create-item:hover .create-item__icons {
  opacity: 1;
}

.create-item--disabled {
  color: #90908c;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.status--valid {
  color: green;
}

.exported-code {
  border: 1px solid gray;
  width: 500px;
  height: 300px;
}

.type-disp {
  color: rgba(27, 27, 24, .7);
  text-align: right;
  font-style: italic;
}

.expr-val {
  color: #1b1b18;
  border: none;
  margin-left: -6px;
  margin-right: -6px;
}

.expr-val__sep {
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  line-height: 4px;
  display: flex;
}

.expr-val__sep-line {
  background: rgba(255, 255, 255, .1);
  flex: 1;
  height: 1px;
}

.expr-val__sep-sym {
  color: rgba(255, 255, 255, .2);
  padding: 0 10px;
}

.drop-overlay {
  color: #006adc;
  opacity: .75;
  background-color: #edf6ff;
  border: 2px dashed #0091ff;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.drop-overlay.drop-overlay--dragover {
  opacity: 1;
  border-width: 3px;
}

.file-uploader {
  border: 1px dashed #dbdbd7;
  border-radius: 8px;
  align-self: stretch;
  position: relative;
}

.file-uploader:hover {
  background-color: #eeeeec;
}

.file-uploader .fake-upload {
  color: rgba(125, 125, 125, .2);
  border: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  font-size: 20px;
  display: flex;
}

.file-uploader .file-uploader__drop-overlay {
  border-radius: inherit;
  text-align: center;
  pointer-events: none;
  flex-wrap: wrap;
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
}

.image-paster {
  resize: none;
  border: 1px dashed #dbdbd7;
  border-radius: 8px;
  height: 60px;
}

.opaque-file-uploader {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: inherit;
}

.overriding {
  color: #0091ff;
}

.beefy-menu-item {
  margin-top: 4px;
  margin-bottom: 4px;
  display: flex;
}

.beefy-menu-item__icon {
  text-align: center;
  width: 40px;
  margin-top: 10px;
  margin-right: 10px;
}

.beefy-menu-item__main-content {
  flex: 1;
}

.beefy-menu-item__desc {
  white-space: normal;
}

.bg-size-switch-container {
  padding: 0;
}

.bg-layer-linear {
  background: linear-gradient(#bbb, #5e5e5e);
  width: 26px;
  height: 21px;
}

.bg-layer-radial {
  background: radial-gradient(#bbb, #5e5e5e);
  width: 26px;
  height: 21px;
}

.bg-layer-image {
  background-color: #fff;
  background-size: 100%;
  width: 26px;
  height: 21px;
}

.bg-layer__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 2px;
  font-family: IBM Plex Mono, monospace;
  overflow: hidden;
}

.image-preview {
  cursor: pointer;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.image-preview .image-preview__msg-overlay {
  background-color: rgba(0, 0, 0, .3);
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.image-preview .image-preview__msg {
  color: #fff;
  background-color: rgba(0, 0, 0, .9);
  border-radius: 4px;
  padding: 5px 10px;
}

.image-preview:hover .image-preview__msg-overlay {
  display: flex;
}

.img-thumb__checkers {
  width: 100%;
  height: 100%;
}

.img-thumb__checkers--shown {
  background-image: linear-gradient(45deg, #ddd 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, #ddd 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, #ddd 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, #ddd 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.img-thumb {
  background: center / cover no-repeat;
  width: 100%;
  height: 100%;
}

.img-thumb-border {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}

.shadow-thumb {
  background-color: #f3f3f2;
  width: 30px;
  height: 15px;
}

.image-selector-root {
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.vcenter {
  vertical-align: middle;
}

.angle-dial {
  vertical-align: top;
  justify-content: center;
  align-items: center;
  height: 50px;
  display: flex;
  position: relative;
}

.angle-dial__dial-img {
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.angle-dial__dial {
  cursor: pointer;
}

.angle-dial__ticks-sheet {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.angle-dial__ticks {
  background: red;
  position: relative;
  top: -40px;
  left: -40px;
}

.angle-dial__tick-container {
  position: absolute;
}

.angle-dial__tick {
  text-align: center;
  pointer-events: initial;
  width: 32px;
  height: 9px;
  font-size: 9px;
  line-height: 1;
  display: block;
  position: absolute;
  top: -4.5px;
  left: -16px;
}

.spaced-above {
  margin-top: 10px;
}

.color-stops {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.color-stops__bar-container {
  cursor: pointer;
  height: 50px;
}

.color-stops__bar {
  width: 100%;
  height: 32px;
}

.color-stops__stops {
  pointer-events: none;
  width: 100%;
  height: auto;
  position: absolute;
  top: 28px;
  left: 0;
}

.color-stop__container {
  position: absolute;
}

.color-stop {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: initial;
  color: #dbdbd7;
  filter: drop-shadow(0 0 1px #000);
  position: absolute;
  top: -6px;
  left: -12px;
}

.color-stop--selected, .color-stop:hover {
  color: #0091ff;
}

.color-stop--removing {
  opacity: .3;
}

.color-stop--ghost {
  pointer-events: none;
}

.color-stop__color-chip {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 10px;
  left: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}

.color-stop__icon {
  width: 24px;
  height: 24px;
  display: block;
}

.color-stop__fill {
  border: 1px solid #000;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 8px;
  left: 2px;
}

.sketch-picker {
  box-shadow: none !important;
  background: none !important;
}

.sketch-picker span {
  color: #1b1b18 !important;
}

.sketch-picker input {
  color: #1b1b18;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
  min-height: 32px;
  padding: 8px;
}

.sketch-picker input::placeholder {
  color: #dbdbd7;
}

.sketch-picker input:disabled {
  color: #90908c;
}

.sketch-picker input:hover:not(:focus) {
  box-shadow: inset 0 0 0 1px #f3f3f2;
}

.sketch-picker input:focus {
  color: #1b1b18 !important;
}

.sketch-picker input:disabled:hover {
  cursor: not-allowed;
}

.sketch-picker input.textbox--transparent {
  background: none;
}

.sketch-picker input.textbox--seamless {
  width: 100%;
  height: auto;
  min-height: auto;
  color: inherit;
  padding: 0;
}

.sketch-picker input.textbox--seamless:focus {
  box-shadow: none !important;
  color: inherit !important;
  background: none !important;
}

.sketch-picker input.textbox--inverse {
  color: #dbdbd7;
  background: none;
}

.sketch-picker input.textbox--right {
  text-align: right;
}

.sketch-picker input.textbox--listitem {
  border-radius: 0;
  width: 100%;
}

.sketch-picker input {
  font-family: IBM Plex Mono, monospace;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(255, 255, 255, .2) !important;
}

.sketch-picker > div:nth-child(2) > div > div {
  background: #fff;
}

.sketch-picker > .flexbox-fix:last-child {
  border-top: none !important;
}

.ellipse-control {
  background: #f3f3f2;
  width: 100px;
  height: 100px;
  margin: 10px auto 0;
  display: block;
}

.ellipse-control__svg {
  width: 100px;
  height: 100px;
  display: block;
}

.ellipse-control__ellipse {
  fill: none;
  stroke: #dbdbd7;
  stroke-width: 1px;
}

.ellipse-control__line {
  stroke: #dbdbd7;
  stroke-width: 1px;
}

.ellipse-control__center, .ellipse-control__knob {
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=) 10 7, default;
}

.ellipse-control__center:active, .ellipse-control__knob:active {
  cursor: url(data:application/octet-stream;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=) 10 7, default;
}

.ellipse-control__center, .ellipse-control__knob {
  fill: #dbdbd7;
}

.svg-small-icon {
  vertical-align: middle;
}

.select-option__text, .select-option__value {
  vertical-align: top;
  width: 40%;
  margin-right: 10%;
  display: inline-block;
  position: relative;
}

.raised-label {
  text-transform: uppercase;
  opacity: .5;
  font-size: 9px;
  position: absolute;
  top: -12px;
}

.component-ctx-spotlight {
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.component-ctx-spotlight__shadow {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 0 10000000px rgba(0, 0, 0, .15);
}

.component-ctx-spotlight__controls {
  white-space: nowrap;
  color: #1b1b18;
  transform-origin: 0 0;
  pointer-events: auto;
  z-index: 1;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 4px;
  padding: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  transform: translate(0, 10px)scale(1);
}

.component-ctx-spotlight__controls button.ant-switch {
  background-color: #868682;
}

.component-ctx-spotlight__controls button.ant-switch.ant-switch-checked {
  background-color: #0091ff;
}

.component-ctx-spotlight__slots__slot {
  background: rgba(0, 0, 0, .25);
  position: absolute;
}

.menu {
  background: #fff;
  padding: 12px 0;
}

.menu-item__link {
  padding: 5px 20px;
  display: block;
}

.menu-item__link:hover {
  background: rgba(0, 0, 0, .1);
}

.studio {
  height: 100vh;
  display: flex;
}

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

.studio__nav-menu-item {
  margin: 10px;
  font-size: 16px;
  display: inline-block;
}

.studio__main-area {
  flex: 1;
  position: relative;
}

.dark-mask, .dark-mask-right, .dark-mask-bottom, .dark-mask-left, .dark-mask-top {
  z-index: 200000;
  pointer-events: none;
  background-color: rgba(0, 0, 0, .6);
  display: flex;
  position: absolute;
}

.right-pane__mask {
  z-index: 2000;
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pane-title {
  text-transform: uppercase;
  background: #000;
  margin-top: 2px;
  padding: 8px 20px;
}

.canvas-editor {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.canvas-editor__frames--background {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.canvas-editor__outer-main-area {
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.canvas-editor__right-pane {
  z-index: 2;
  background-color: #fff;
  border-left: 1px solid #e3e3e0;
  flex-direction: column;
  flex-shrink: 0;
  width: 303px;
  margin-left: auto;
  font-size: 12px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.canvas-editor__disable-right-pane {
  opacity: .3;
  cursor: not-allowed;
  z-index: 100;
  background: #f3f3f2;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.canvas-editor__top-pane {
  pointer-events: none;
  z-index: 2;
  flex: 1;
  grid-area: clipper;
  overflow: hidden;
}

.canvas-editor__top-pane__floating-elements-container {
  padding: 8px 20px;
}

.canvas-editor__left-pane-container {
  background-color: rgba(0, 0, 0, 0);
}

.canvas-editor__right-pane__top {
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.canvas-editor__right-pane__top.canvas-editor__right-pane__top--with-bottom {
  z-index: 3;
  max-height: 50%;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .15);
}

.canvas-editor__right-pane__bottom {
  flex-direction: column;
  flex: 1;
  padding-top: 10px;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.canvas-editor__right-pane__bottom__scroll {
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.canvas-editor__right-stack-pane {
  background-color: #fff;
  flex-direction: column;
  max-height: 100%;
  padding-top: 10px;
  display: flex;
}

.canvas-editor__right-stack-pane:not(:first-child) {
  border-top: 1px solid #f3f3f2;
}

.canvas-editor__right-stack-pane > div {
  max-height: 100%;
}

.canvas-editor__right-float-pane {
  background-color: #fff;
  border-radius: 8px;
  flex-direction: column;
  margin: 8px;
  display: flex;
}

.canvas-editor__right-float-pane:not(:last-child) {
  margin-bottom: 0;
}

.canvas-editor__right-pane__scroll {
  flex-direction: column;
  padding: 8px;
  display: flex;
  overflow-y: auto;
}

.canvas-editor__right-pane__scroll > * + * {
  margin-top: 8px;
}

.canvas-editor__right-float-pane--affixable {
  transition: all .15s;
}

.canvas-editor__right-float-pane--affixed {
  background-color: #fff;
  border-radius: 0;
  margin-left: -8px;
  margin-right: -8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.canvas-editor__recording-panel-container {
  flex: 1;
  justify-content: center;
  margin-left: 8px;
  display: flex;
}

.canvas-editor__top-bar {
  z-index: 2;
  flex-shrink: 0;
}

.canvas-editor__hsplit {
  flex-direction: row;
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

.canvas-editor__alert-banner-container {
  pointer-events: auto;
  margin-bottom: 8px;
}

.canvas-editor__scaler {
  transform-origin: 0 0;
  position: absolute;
  transform: scale(1);
}

.canvas-editor__scaler__popup_live {
  width: 100%;
  height: 100%;
}

.canvas-editor__floating-msg {
  z-index: 1;
  pointer-events: auto;
  width: 300px;
  margin-top: 30px;
}

.CopilotCodePromptDialog {
  z-index: 10;
}

.canvas-editor__canvas {
  -webkit-user-select: none;
  user-select: none;
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
}

.canvas-editor__canvas__popup_live {
  width: 100%;
  height: 100%;
}

.canvas-editor__bottom-pane {
  flex-shrink: 0;
  height: 0;
}

.canvas-editor__bottom-pane--expanded {
  height: 200px;
  overflow: scroll;
}

.canvas-editor__canvas-clipper {
  grid-area: clipper;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: auto;
}

.canvas-editor__canvas-clipper-grid {
  z-index: 1;
  transform-origin: 0 0;
  pointer-events: none;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 1px);
  background-size: 0 0;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.topbar__preview__frame__name {
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.canvas-editor__canvas-container {
  z-index: 0;
  background: #f9f9f8;
  grid-template: "clipper"
  / 100%;
  justify-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.canvas-editor__canvas-container > * {
  position: relative;
}

.canvas-editor__canvas-container__focus_mode {
  grid-template-rows: 50px auto;
  grid-template-areas: "topbar"
                       "clipper";
}

.canvas-editor__watch-mode {
  z-index: 55;
  position: absolute !important;
}

.canvas-editor__canvas-container-popup-live {
  border: 0;
}

.canvas-editor__error-overlay {
  text-align: center;
  background: #000;
}

.canvas-editor__viewport {
  background: #fff;
  border: none;
  width: 100%;
  height: 100%;
}

.app--dragging .canvas-editor__viewport {
  pointer-events: none;
}

.canvas-editor__viewport-click-guard {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.canvas-dnd-overlay {
  z-index: 99;
  pointer-events: none;
  background-color: rgba(237, 246, 255, .75);
  gap: 12px;
  font-size: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.canvas-editor__hoverbox-scroller {
  position: absolute;
}

.hidden-image-selector {
  display: none;
}

.pane-content {
  flex: 1;
  position: relative;
}

.abs {
  position: absolute;
  top: 0;
  left: 0;
}

.app-container, .app {
  height: 100%;
}

.root {
  background: #fff;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.show-controls-button {
  color: #fff;
  z-index: 99999;
  background: #0091ff;
  border-radius: 18px;
  padding: 8px 16px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .5);
}

.creation-lasso {
  display: hidden;
  border: 2px solid green;
  position: absolute;
}

.step-plot {
  vertical-align: middle;
  width: 100px;
  display: table-cell;
}

.step-plot__step {
  width: 10px;
  height: 10px;
  display: inline-block;
}

.step-plot__step--active {
  background: red;
}

.stmt-row {
  margin-bottom: 12px;
}

.stmt-row:last-child {
  margin-bottom: 0;
}

.code-editor {
  border: 1px solid gray;
  width: 500px;
  height: 200px;
}

.code-preview {
  border: 1px solid #e9e9e6;
  display: flex;
  position: relative;
}

.code-preview-inner {
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 8px;
  top: 0;
  left: 0;
  overflow: auto;
}

.text-reset {
  text-transform: initial;
  font-weight: normal;
}

.sub {
  display: inline-block;
}

.canvas-editable-area {
  height: 100%;
  position: relative;
}

.link-btn-group {
  flex-direction: row;
  justify-content: flex-end;
  display: flex;
}

.link-btn-group > * {
  margin-right: 8px;
}

.link-btn-group > :last-child {
  margin-right: 0;
}

.var-control, .behavior-control {
  padding: 8px 0;
}

.var-control:not(:first-child), .behavior-control:not(:first-child) {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.var-control:first-child, .behavior-control:first-child {
  padding-top: 0;
}

.var-control:last-child, .behavior-control:last-child {
  padding-bottom: 0;
}

.var-control__header-toggle {
  cursor: pointer;
}

.expr-display--code {
  font-family: IBM Plex Mono, monospace;
}

.xselect .ant-dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
}

.xselect .ant-dropdown-menu-item, .xselect .ant-dropdown-menu-submenu-title {
  padding: 0;
}

.xselect .ant-dropdown-menu-item > *, .xselect .ant-dropdown-menu-submenu-title > * {
  padding: 5px 12px;
}

.ant-dropdown-menu-item-selected, .ant-dropdown-menu-submenu-title-selected, .ant-dropdown-menu-item-selected > a, .ant-dropdown-menu-submenu-title-selected > a {
  color: #1b1b18;
}

.ant-dropdown-menu-item--not-selectable:hover {
  background: none;
}

.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-popup.ant-dropdown-menu {
  box-shadow: none;
  background: none;
  border: none;
}

.panel-popup {
  z-index: 10;
  background: #fff;
  flex-direction: column;
  width: 270px;
  font-size: 12px;
  display: flex;
  overflow: hidden;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, .3);
}

.panel-popup-title {
  align-items: center;
  padding: 12px 16px;
  display: flex;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.panel-popup-content {
  flex: 1;
  overflow-y: auto;
}

.panel-popup .panel-popup--no-padding {
  padding: 0 !important;
}

.panel-popup .panel-popup--no-min-width {
  min-width: 0 !important;
}

.labeled-icon__icon, .labeled-icon__label {
  display: inline-block;
}

.input--error.input--error {
  border-bottom-color: red;
}

.validation-error {
  color: red;
  margin-top: 10px;
}

.mini-collapse {
  background: none;
  border: none;
}

.mini-collapse.ant-collapse > .ant-collapse-item {
  border: none;
}

.mini-collapse.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 0;
}

.mini-collapse .ant-collapse-content {
  background: none;
  border: none;
}

.mini-collapse .ant-collapse-content > .ant-collapse-content-box {
  padding: 0;
}

.panel-btn {
  cursor: pointer;
  text-align: center;
  padding: 10px 20px;
  display: inline-block;
}

.panel-btn:hover:not(:disabled) {
  color: #1b1b18;
}

.panel-btn:disabled {
  color: rgba(27, 27, 24, .5);
  cursor: not-allowed;
  border: 1px solid rgba(0, 0, 0, 0);
}

.panel-btn {
  vertical-align: middle;
  width: 100%;
  height: 28px;
}

.GridControls__Collapse.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 5px;
  line-height: 1.5;
}

.GridControls__TrackSizeInput {
  padding-bottom: 10px;
}

.MiniLabel__label {
  white-space: nowrap;
  margin-bottom: 2px;
  font-size: 9px;
  line-height: 1;
}

.style-wrapper {
  align-items: center;
  display: flex;
  position: relative;
}

.style-wrapper__icon {
  width: 21px;
}

.style-wrapper__defined-container {
  position: absolute;
  left: -14px;
}

.style-wrapper__defined-container--right {
  left: unset;
  right: -8px;
}

.VariantControls__StatusContainer {
  width: 12px;
  height: 12px;
}

.VariantControls__StatusContainer:hover .VariantControls__ActualStatus {
  display: none;
}

.VariantControls__StatusHover {
  color: #90908c;
  display: none;
}

.VariantControls__StatusContainer:hover .VariantControls__StatusHover {
  display: block;
}

.VariantControls__VariantLabel {
  width: 100%;
  display: block;
}

.variant-group-panel {
  background-color: #f9f9f8;
  border-radius: 4px;
  margin-bottom: 8px;
}

.variant-group-panel .variant-group-panel__header {
  background-color: #eeeeec;
  border-radius: 4px 4px 0 0;
}

.variant-group-panel .variant-group-panel__add-variant {
  color: #1b1b18;
  background-color: #f3f3f2;
}

.variant-group-panel:last-child {
  margin-bottom: 0;
}

.highlighted-text {
  color: #fff;
}

.highlighted-text::selection {
  background: #0074b8;
}

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

.VariantControls__ItemContent {
  align-items: baseline;
  margin-left: -8px;
  display: flex;
}

.VariantControls__ItemContent > * {
  margin-left: 8px;
}

.VariantControls__ItemContent_StyleVariant {
  margin-left: 4px;
}

.VariantControls__OnOffSwitch {
  color: rgba(255, 255, 255, .7);
}

.VariantControls__Controls {
  text-align: right;
  justify-content: flex-end;
  align-items: baseline;
  padding-left: -8px;
  display: inline-flex;
}

.VariantControls__Controls > * {
  margin-left: 8px;
}

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

.VariantControls__Cond {
  color: rgba(255, 255, 255, .7);
  font-family: IBM Plex Mono, monospace;
  font-size: 10px;
}

.lighter-clickable {
  color: rgba(255, 255, 255, .5);
}

.lighter-clickable:hover {
  color: #fff;
}

.VariantControls__Eye {
  display: none;
}

.VariantControls__Eye:hover {
  color: #fff;
}

.VariantControls__Variant:hover .VariantControls__Eye {
  display: unset;
}

.VariantControls__Eye__Set {
  display: unset;
  color: #fff;
}

.invisible {
  visibility: hidden;
}

.FreestyleBox__guard {
  cursor: crosshair;
  width: 999999px;
  height: 999999px;
  position: absolute;
  top: -500000px;
  left: -500000px;
}

.FreestyleBox__box {
  transform-origin: 0 0;
  border: 1px solid #0091ff;
  position: absolute;
}

.DragInsertState {
  cursor: crosshair;
  width: 999999px;
  height: 999999px;
  position: absolute;
  top: -500000px;
  left: -500000px;
}

.MeasureTool__Line {
  transform-origin: 0 0;
  pointer-events: none;
  border: .5px solid #e54d2e;
  position: absolute;
}

.MeasureTool__Label {
  color: #fff;
  pointer-events: none;
  background: #e54d2e;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  font-size: 12px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.HoverBox__Dims {
  background: var(--selectionControlsColor);
  color: #fff;
  white-space: nowrap;
  border-radius: 2px;
  padding: 2px 4px;
  font-family: IBM Plex Mono, monospace;
  font-size: 10px;
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
}

.HoverBox__DragGuard {
  pointer-events: initial;
  width: 999999px;
  height: 999999px;
  position: absolute;
  top: -500000px;
  left: -500000px;
}

.HoverBox__DragGuard__TopLeft {
  cursor: nwse-resize;
}

.HoverBox__DragGuard__TopRight, .HoverBox__DragGuard__BottomLeft {
  cursor: nesw-resize;
}

.HoverBox__DragGuard__BottomRight {
  cursor: nwse-resize;
}

.HoverBox__Resizer__Top, .HoverBox__Resizer__Bottom {
  cursor: ns-resize;
}

.HoverBox__Resizer__Left, .HoverBox__Resizer__Right {
  cursor: ew-resize;
}

.HoverBox__Resizer__Vertical {
  height: calc(100% + 8px) !important;
}

.HoverBox__Resizer__Horizontal {
  width: calc(100% + 8px) !important;
}

.HoverBox__Resizer__TopLeft {
  pointer-events: auto;
  border: 1px solid var(--selectionControlsColor);
  z-index: 100;
  cursor: nwse-resize;
  background: #fff;
  border-radius: 2px;
  width: 8px;
  height: 8px;
  position: absolute;
  top: -4px;
  left: -4px;
}

.HoverBox__Resizer__TopRight {
  pointer-events: auto;
  border: 1px solid var(--selectionControlsColor);
  z-index: 100;
  cursor: nesw-resize;
  background: #fff;
  border-radius: 2px;
  width: 8px;
  height: 8px;
  position: absolute;
  top: -4px;
  right: -4px;
}

.HoverBox__Resizer__BottomLeft {
  pointer-events: auto;
  border: 1px solid var(--selectionControlsColor);
  z-index: 100;
  cursor: nesw-resize;
  background: #fff;
  border-radius: 2px;
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: -4px;
}

.HoverBox__Resizer__BottomRight {
  pointer-events: auto;
  border: 1px solid var(--selectionControlsColor);
  z-index: 100;
  cursor: nwse-resize;
  background: #fff;
  border-radius: 2px;
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -4px;
  right: -4px;
}

.HoverBox__Resizer__Top {
  pointer-events: auto;
  cursor: ns-resize;
  width: calc(100% + 8px);
  height: 8px;
  position: absolute;
  top: -4px;
  left: -4px;
}

.HoverBox__Resizer__Bottom {
  pointer-events: auto;
  cursor: ns-resize;
  width: calc(100% + 8px);
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: -4px;
}

.HoverBox__Resizer__Left {
  pointer-events: auto;
  cursor: ew-resize;
  width: 8px;
  height: calc(100% + 8px);
  position: absolute;
  top: -4px;
  left: -4px;
}

.HoverBox__Resizer__Right {
  pointer-events: auto;
  cursor: ew-resize;
  width: 8px;
  height: calc(100% + 8px);
  position: absolute;
  top: -4px;
  right: -4px;
}

.HoverBox__Resizer__Right.HoverBox__Resizer__Scrollable {
  right: 4px;
}

.HoverBox__ScrollBar {
  position: absolute;
}

.HoverBox__ScrollBar--vertical {
  height: 100%;
  top: 0;
  right: -5px;
}

.HoverBox__ScrollBar--horizontal {
  width: 100%;
  bottom: -5px;
  left: 0;
}

.HoverBox__ScrollBar__Thumb {
  z-index: 10;
  pointer-events: auto;
  opacity: .7;
  background: #dbdbd7;
  border-radius: 7px;
  transition: opacity .1s linear;
  position: absolute;
}

.HoverBox__ScrollBar__Thumb:hover, .HoverBox__ScrollBar__Thumb:active {
  opacity: 1;
  background: #e3e3e0;
}

.HoverBox__ScrollBar__Thumb--vertical {
  width: 7px;
}

.HoverBox__ScrollBar__Thumb--horizontal {
  height: 7px;
}

.HoverBox__Border {
  border: 1px solid var(--selectionControlsColor);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.HoverBox__Border--autoWidth {
  border-left-style: dashed;
  border-right-style: dashed;
}

.HoverBox__Border--autoHeight {
  border-top-style: dashed;
  border-bottom-style: dashed;
}

.HoverBox__Border--isSlot {
  border: 2px dashed rgba(75, 171, 252, .6);
}

.HoverBox__Resizers {
  width: 100%;
  height: 100%;
  position: relative;
}

.HoverBox__Controls {
  width: 100%;
  height: 100%;
}

.OutlineBox {
  border: 1px solid var(--selectionControlsColor);
}

.PreselectBox {
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 1;
  border: none;
  position: absolute;
}

.PreselectBox .node-outline-tag {
  color: var(--selectionControlsColor);
  background-color: rgba(255, 255, 255, .9);
  padding-left: 0;
}

.PreselectBox .node-outline-tag > * {
  opacity: .7;
}

.CanvasTransformedBox {
  transform-origin: 0 0;
  position: absolute;
}

.ElementHighlightBoxContainer {
  pointer-events: none;
}

.ElementHighlightBoxRendered {
  background-color: rgba(0, 145, 255, .1);
  border: 1px solid rgba(0, 145, 255, .2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.CommentMarker {
  pointer-events: initial;
  position: absolute;
  bottom: 100%;
  right: 0%;
}

.CommentMarker section {
  pointer-events: auto;
  max-height: 100% !important;
}

.CommentMarkerInitial {
  box-shadow: 2px 2px 9px rgba(0, 0, 0, .3);
}

.CommentMarkerInitial:hover {
  transition: box-shadow .2s;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, .4);
}

.AddCommentMarker {
  pointer-events: initial;
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0%;
}

.ReactionBtn {
  opacity: 0;
  transition: opacity .5s;
}

.CommentPost:hover .ReactionBtn {
  opacity: 1;
}

.PlayerBox {
  transform-origin: 0 0;
  pointer-events: none;
  border: 2px dotted;
  position: absolute;
}

.PlayerCursor {
  top: -1px;
  left: -1px;
  position: absolute !important;
}

.dim-spinner-popup-mask {
  background: rgba(0, 0, 0, .3);
}

.dim-spinner-popup {
  width: 150px;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, .3);
}

.DimSpinner__Container {
  flex: 1;
  display: flex;
  position: relative;
}

.DimSpinner__DropdownIcon {
  cursor: pointer;
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.clickable {
  cursor: pointer;
}

.ControlBlock__Title {
  display: flex;
}

.ControlBlock__TitleContent {
  flex: 1;
}

.ControlBlock__Actions {
  margin-left: auto;
}

.ControlBlock__Title:hover .ControlBlock__PrimaryAction {
  color: #1b1b18;
}

.VarControl__Header {
  display: flex;
}

.VarControl__HeaderContent {
  flex: 1;
}

.VarControl__HeaderRight {
  margin-left: auto;
}

.ExprInput {
  width: 200px;
}

.ContentSizer {
  visibility: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: absolute;
  top: -100000px;
}

.ExprContent {
  letter-spacing: 0;
  white-space: normal;
  max-width: 200px;
  font-family: Menlo, Monaco, Courier New, monospace;
  font-size: 12px;
  line-height: 18px;
}

.canvas-editor__code-editor-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.SelectorsControl__CustomOptionLabel {
  color: #000;
  text-transform: uppercase;
  background: silver;
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 9px;
  line-height: 1;
  display: inline-block;
}

.no-pointer-events {
  pointer-events: none;
}

.icon-sized {
  width: 12px;
  height: 12px;
}

.Avatar {
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  background: #414c53;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: inline-flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1);
}

.Avatar__Small {
  font-size: 11px;
  line-height: 1em;
  width: 24px !important;
  height: 24px !important;
}

.Avatar__Highlight {
  box-shadow: inset 0 0 0 2px #408ccd;
}

.Avatar__Img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.AvatarGallery {
  flex-direction: row-reverse;
  align-items: center;
  display: flex;
}

.AvatarGallery__Avatar {
  margin-right: -8px;
}

.AvatarPlayerSize, .AvatarPlayer {
  border-radius: 50%;
  width: 26px;
  height: 26px;
  margin: 2px 0;
}

.AvatarPlayer {
  border: 2px solid;
}

.ToolbarButton {
  color: #eeeeec;
  cursor: pointer;
  background: #1b1b18;
  border-radius: 4px;
  padding: 4px 8px;
}

.BlockIcon {
  border: 2px solid #90908c;
  width: 16px;
  height: 12px;
  margin-top: 4px;
  display: inline-block;
}

.BlockIcon__svg {
  stroke: currentColor;
  stroke-width: 1px;
  fill: none;
  stroke-width: 2px;
  width: 1em;
  height: 1em;
  transform: translateY(16%);
}

.StackIcon__content {
  transform: scaleX(.7);
}

.TextIcon {
  font-family: serif;
  display: inline-block;
}

.arena__menu {
  padding-top: 8px;
  padding-bottom: 8px;
  display: inline-block;
}

.arena__menu__icon {
  line-height: 1em;
}

.CanvasFrame__Label {
  color: #90908c;
  transform-origin: 0 100%;
  min-height: 20px;
  padding: 2px 0 6px 8px;
  position: absolute;
  bottom: 100%;
  left: 0;
  overflow: hidden;
}

.CanvasFrame__Label--hidden {
  display: none;
}

.CanvasFrame__Label__variant {
  display: flex;
}

.CanvasFrame__Label__variant:not(:last-child):after {
  content: "|";
  margin: 0 8px;
}

.CanvasFrame__Config {
  transform-origin: 0 100%;
  white-space: nowrap;
  color: #90908c;
  height: var(--hoverBoxTagHeight);
  letter-spacing: -.05ch;
  border: none;
  border-radius: 4px 4px 0 0;
  align-items: center;
  margin: -3px 0 -3px auto;
  display: flex;
  position: absolute;
  bottom: 100%;
  left: 100%;
  transform: scale(1.5)rotate(90deg);
}

.CanvasFrame__Config:hover {
  background-color: #eeeeec;
}

.CanvasFrame__Config_contained {
  transform-origin: unset;
  transform: unset;
  left: unset;
  bottom: unset;
  border-radius: 4px;
  position: relative;
}

.CanvasFrame__Config__icon {
  width: 16px;
  height: 16px;
}

.CanvasFrame__Container {
  box-shadow: 5px 5px calc(var(--gridSpacing) * .8) rgba(0, 0, 0, .1);
  position: relative;
}

.CanvasFrame__OverlayTop {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
}

.CanvasFrame__OverlayRight {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0);
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.CanvasFrame__OverlayBottom {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.CanvasFrame__OverlayLeft {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0);
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.CanvasFrame__Container--live {
  display: none;
  position: absolute;
}

.CanvasFrame__Cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.GridEditorAdapter__Offset, .LaneHeadersContainer {
  position: absolute;
}

.snackbar .ant-notification-notice-message {
  display: none;
}

.snackbar hr {
  margin: 10px 0;
}

.ant-notification {
  z-index: 1031;
}

.mixin__popup__content__panel {
  margin: 0;
}

.left__spacing__panel__content {
  margin-left: 0;
  margin-right: 0;
}

.pass-through {
  display: contents;
}

.SidebarSection__Container {
  border-bottom: 1px solid #eee;
  flex-direction: column;
  display: flex;
}

.SidebarSection__Container:last-child {
  border-bottom-width: 0;
}

.SidebarSection__Container--NoBorder {
  border: none;
}

.SidebarSection__Header {
  align-items: center;
  min-height: 52px;
  padding: 12px 20px 12px 16px;
  display: flex;
  position: relative;
}

.SidebarSection__Header__Menu {
  visibility: hidden;
}

.SidebarSection__Header:hover .SidebarSection__Header__Menu {
  visibility: visible;
}

.SidebarSection__Header--tabs {
  padding-bottom: 0;
}

.SidebarSection__Title {
  color: #90908c;
  flex: 1;
  font-size: 13px;
}

.SidebarSection__Title__Active {
  color: #1b1b18;
}

.SidebarSection__Controls {
  align-items: center;
  margin-left: auto;
  line-height: 1em;
  display: flex;
}

.SidebarSection__Controls .icon-link-btn {
  margin-left: 6px;
  padding: 0;
}

.SidebarSection__Body {
  flex-direction: column;
  padding: 2px 20px 17px 16px;
  display: flex;
}

.SidebarSection__HPadding, .SidebarSectionListItem {
  padding-left: 16px;
  padding-right: 20px;
}

.SidebarSection__VPadding {
  padding-top: 12px;
  padding-bottom: 12px;
}

.SidebarSection__Body__EmptyBody {
  padding-bottom: 0;
}

.SidebarSection__Body__ZeroBodyPadding {
  padding-left: 0;
  padding-right: 0;
}

.SidebarSection__Body__NoBottomPadding {
  padding-bottom: 0;
}

.SidebarSection__Header__ZeroHPadding {
  min-height: 40px;
  padding-left: 0;
  padding-right: 0;
}

.SidebarSectionListItem {
  min-height: 32px;
}

.SidebarSectionListItem--selected {
  background-color: #edf6ff;
}

.SidebarSectionListItem--selected-variant {
  background-color: #fff0ee;
}

.SidebarSectionListItem--selected-component {
  background-color: #f9f1fe;
}

.sidebar-header-section {
  padding: 8px;
}

.sidebar-header-section--frame {
  background-color: #e1f0ff;
}

.sidebar-header-section__content {
  background-color: #fff;
  border-radius: 6px;
}

.SectionTabsBar {
  border-bottom: none;
  display: flex;
}

.SectionTab {
  white-space: nowrap;
  min-height: 40px;
  padding: 8px;
}

.SectionTab:focus {
  background-color: rgba(0, 145, 255, .5);
}

.SectionTab__Active {
  background: #f3f3f2;
  border-radius: 4px 4px 0 0;
}

.SectionTab__Active--empty {
  border-radius: 4px;
}

.Separator, .SectionSeparator {
  background: #f3f3f2;
  height: 1px;
}

.vertical-separator {
  border-left: 1px solid #e4e6eb;
  align-self: stretch;
}

.flush-right {
  margin-left: auto;
}

.PositionTabs__Anchor {
  position: relative;
}

.PositionTabs__Tabs {
  position: absolute;
  bottom: 0;
  right: 0;
}

.FloatingToolbar {
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  width: 40px;
  padding: 10px 0;
  display: flex;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, .3);
}

.gallery {
  flex-direction: column;
  height: 100%;
  display: flex;
}

.SwatchItemList {
  margin-left: -8px;
  margin-right: -8px;
}

.SwatchItem {
  cursor: pointer;
  display: inline-block;
}

.SwatchItem__Querying {
  display: block;
}

.NamedSwatch {
  align-items: center;
  display: flex;
}

.NamedSwatch--highlighted {
  background-color: #f3f3f2;
}

.NamedSwatch--selected {
  background-color: #edf6ff;
}

.red-circle-top-right {
  color: #f3425f;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-bottom: -16px;
  margin-right: -11px;
  position: relative;
  top: -18px;
  left: -16px;
}

.yellow-circle-top-right {
  color: #ffd745;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-bottom: -16px;
  margin-right: -11px;
  position: relative;
  top: -18px;
  left: -16px;
}

.swatch-size {
  width: 24px;
  height: 24px;
}

.Swatch__Selected {
  box-shadow: 0 0 0 2px #0091ff;
}

a.SwatchButton:focus {
  box-shadow: none !important;
}

a.SwatchButton:focus > .Swatch {
  box-shadow: 0 0 0 2px rgba(0, 145, 255, .5);
}

.spacing-control__container {
  display: contents;
}

.spacing-control__handles-container {
  max-width: 130px;
  margin: 0 -4px;
  line-height: 0;
  position: relative;
}

.spacing-control__svg {
  width: 100%;
}

.spacing-control__top {
  pointer-events: none;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 24px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.spacing-control__right {
  pointer-events: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.spacing-control__bottom {
  pointer-events: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 24px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.spacing-control__left {
  pointer-events: none;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.spacing-control__num {
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.spacing-control__border {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 264px;
  height: 72px;
  display: flex;
}

.spacing-control__label {
  pointer-events: none;
  text-transform: uppercase;
  opacity: .7;
  font-size: 9px;
  line-height: 1;
  position: absolute;
  top: 4px;
  left: 16px;
}

.size-controls {
  z-index: 1;
  pointer-events: initial;
  width: 184px;
  padding: 5px;
}

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

.small-textbox {
  line-height: 1;
}

.spacing-control__handle {
  fill: #f9f9f8;
  stroke: rgba(0, 0, 0, .07);
}

.spacing-control__handle:hover {
  fill: #eeeeec;
}

.spacing-control__handle--selected {
  fill: #e3e3e0 !important;
}

.PlasmicLogo {
  width: 36px;
  height: 18px;
}

.light-text {
  font-weight: 300;
}

.block {
  display: block;
}

.ScreenDimmer {
  z-index: 99999;
  opacity: 0;
  background: rgba(255, 255, 255, .5);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.ScreenDimmer__Fade {
  opacity: 1;
  transition: opacity 3s;
}

.top-bar-popover-dialog-overlay .ant-popover-arrow {
  display: none;
}

.top-bar-popover-dialog-overlay .ant-popover-inner {
  background-color: rgba(0, 0, 0, 0);
}

.top-bar-popover-dialog-overlay .ant-popover-inner-content {
  padding: 0;
}

.recording-panel__separator {
  background-color: #f3f3f2;
  align-self: stretch;
  width: 1px;
  margin: -8px 12px;
}

.recording-panel__dropdown .ant-dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
}

.recording-panel__dropdown .ant-dropdown-menu-item, .recording-panel__dropdown .ant-dropdown-menu-item-group-title {
  align-items: center;
  height: 32px;
  display: flex;
}

.recording-panel__dropdown .ant-dropdown-menu-item-group-list {
  margin: 0;
}

.recording-panel__dropdown .ant-dropdown-menu-item-group:not(:first-child) {
  border-top: 1px solid #f3f3f2;
  margin-top: 4px;
  padding-top: 4px;
}

.recording-badge {
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #e54d2e;
  border-radius: 2px;
  align-items: center;
  padding: 0 4px 0 0;
  font-size: 8px;
  display: flex;
  overflow: hidden;
}

.variant-chip-container {
  flex-wrap: wrap;
  align-items: center;
  margin-top: -4px;
  margin-left: -6px;
  display: flex;
}

.variant-chip-container > * {
  margin-top: 4px;
  margin-left: 6px;
}

.variant-chip {
  color: #1b1b18;
  background-color: #f3f3f2;
  border-radius: 2px;
  align-items: center;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: normal;
  display: flex;
  overflow: hidden;
}

.variant-chip .variant-chip__icon {
  color: #90908c;
  line-height: 0;
}

.variant-chip .variant-chip__icon + .variant-chip__text {
  margin-left: 2px;
}

.variant-chip--recording {
  background-color: #fff0ee;
}

.variant-chip--recording .variant-chip__icon {
  color: #e54d2e;
}

.variant-chip--disabled {
  cursor: not-allowed;
  opacity: .5;
}

.add-drawer .add-drawer__content {
  max-height: 400px;
  overflow-y: auto;
}

.help-btn.help-btn.help-btn.help-btn.help-btn {
  color: #dbdbd7;
}

.asset-usage-items {
  margin-left: 4px;
}

.asset-usage-ul {
  margin-top: 16px;
  margin-left: 8px;
}

.token-ref-cycle-item {
  color: #0091ff;
  font-family: IBM Plex Mono, monospace;
}

.topbar-panel-divider {
  margin-left: 4px;
  margin-right: 4px;
}

.topbar--isObserver {
  background: #ffe6e2 !important;
}

.defined-indicator-tooltip-items {
  flex-direction: column;
  display: flex;
}

.defined-indicator-tootip-stack-item-overwritten {
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

.defined-indicator-tootip-stack-item {
  white-space: nowrap;
  justify-content: space-between;
  margin-left: 8px;
  display: flex;
}

.ant-popover.defined-indicator__popover {
  min-width: 200px;
  max-width: 50vw;
}

.ant-popover.defined-indicator__popover .ant-popover-inner {
  padding: 0;
}

.ant-popover.defined-indicator__popover .ant-popover-title {
  border-bottom: none;
  min-height: auto;
  padding: 16px 16px 8px;
}

.ant-popover.defined-indicator__popover .ant-popover-inner-content {
  max-height: 300px;
  padding: 16px;
  overflow-y: auto;
}

.ant-popover.defined-indicator__popover .ant-popover-title + .ant-popover-inner-content {
  padding-top: 0;
}

.ant-popover.defined-indicator__popover .ant-popover-arrow {
  display: none;
}

.defined-indicator__source-stack {
  background-color: #fff;
  position: relative;
}

.defined-indicator__source-stack__line-container {
  z-index: 0;
  height: 100%;
  padding: 10px 0;
  position: absolute;
  top: 0;
  left: 7px;
}

.defined-indicator__source-stack__line-container__line {
  border-left: 1px dashed #90908c;
  width: 2px;
  height: 100%;
}

.defined-indicator__source {
  color: #90908c;
  align-items: center;
  margin-bottom: 6px;
  display: flex;
}

.defined-indicator__source:last-child {
  margin-bottom: 0;
}

.defined-indicator__source--target {
  color: #1b1b18;
}

.defined-indicator__source-icon {
  z-index: 1;
  background-color: #fff;
  margin-right: 6px;
  line-height: 0;
}

.defined-indicator__source-name {
  min-width: 50px;
  margin-right: 6px;
}

.defined-indicator__source-value {
  text-align: right;
  margin-left: auto;
}

.defined-indicator__source--overwritten .defined-indicator__source-name, .defined-indicator__source--overwritten .defined-indicator__source-value {
  position: relative;
}

.defined-indicator__source--overwritten .defined-indicator__source-name:after, .defined-indicator__source--overwritten .defined-indicator__source-value:after {
  content: " ";
  pointer-events: none;
  border-top: 1px solid;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
}

.defined-indicator__prop {
  border-bottom: 1px solid #f3f3f2;
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.defined-indicator__prop:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.defined-indicator__prop__label {
  margin-bottom: 6px;
}

.defined-indicator__edit-button {
  background-color: #f3f3f2;
  border-radius: 2px;
  padding: 2px 4px;
}

.defined-indicator__edit-button:hover {
  background-color: #eeeeec;
}

.maybe-overwritten-warning-items {
  color: red;
  flex-direction: column;
  margin-top: 16px;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}

.ant-popover.ant-popover--tight .ant-popover-inner {
  padding: 2px 4px;
}

.ant-popover.ant-popover--dropdown-like .ant-popover-inner {
  padding: 0;
}

.ant-popover.ant-popover--dropdown-like .ant-popover-arrow {
  display: none;
}

.ant-popover.ant-popover--dropdown-like.ant-popover-placement-bottomLeft {
  padding: 0;
}

.maybe-overwritten-warning-item {
  margin-left: 8px;
}

.maybe-overwritten-warning-item-target {
  font-weight: bold;
}

.clicker-stopper {
  color: #0091ff;
  cursor: pointer;
}

.tooltip-title {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
}

.CodegenPanel, .svg-icon-wrapper > svg {
  width: 100%;
  height: 100%;
}

.game-name {
  font-family: Bungee, Inter, sans-serif;
}

.text-unselectable {
  -webkit-user-select: none;
  user-select: none;
}

.shortcut-combo {
  color: #868682;
  background-color: #f3f3f2;
  border-radius: 4px;
  align-self: center;
  padding: 4px;
  font-family: IBM Plex Mono, monospace;
  font-size: 10px;
  line-height: 1em;
  box-shadow: 0 1px rgba(0, 0, 0, .15);
}

.ant-tooltip-content .shortcut-combo {
  color: #c8c7c1;
  background-color: #1b1b18;
  box-shadow: 0 1px rgba(255, 255, 255, .15);
}

.dim-spinner-like-input {
  padding-right: 16px !important;
}

.dim-token-editor-container {
  position: relative;
}

.labelled-item-with-small-gap {
  margin-left: 0 !important;
}

.ant-select-selector-no-padding .ant-select-selector {
  padding-right: 8px !important;
  line-height: 16px !important;
}

.position-legend {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40px;
  overflow: hidden;
}

.left-pane-resizer {
  opacity: 0;
  cursor: ew-resize;
  z-index: 10;
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -7px;
}

.studio-frame {
  border: none;
  width: 100vw;
  height: 100vh;
}

.no-text-select {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.dropdown-overlay {
  z-index: 2000;
}

.hiddenIfLastChild:last-child {
  display: none;
}

.hoverable-disclosure {
  text-underline-offset: .1em;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

a, button.link-like {
  color: #0091ff;
  padding: 0;
}

a:hover, button.link-like:hover {
  color: #0091ff;
}

.mention-link {
  color: #0091ff;
  cursor: pointer;
}

.yellow-snippet {
  background: #ff0;
}

.text-set {
  color: #1b1b18;
}

.text-unset {
  color: #90908c;
}

.text-inherited {
  color: #706f6c;
}

.ql-container.ql-snow {
  background-color: #fff;
}

.ant-popover.data-picker-popover-overlay .ant-popover-arrow {
  display: none;
}

.ant-popover.data-picker-popover-overlay .ant-popover-inner {
  padding: 0;
}

.panel-row.fallback-spacing {
  align-items: baseline;
  margin-top: 4px;
}

.property-connector-line {
  opacity: .2;
  border: 0 solid #908f8c;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 3px;
  width: 9px;
  height: 26px;
  margin-top: -6px;
  margin-right: 8px;
  position: absolute;
  left: 4px;
}

.property-connector-line-icon {
  align-self: flex-start;
  width: 16px;
  position: relative;
}

.property-connector-line-icon:before {
  content: " ";
  border: 0 solid #e9e9e6;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 3px;
  width: 9px;
  height: 20px;
  position: absolute;
  top: -10px;
  left: 7px;
}

.with-connector-line .property-connector-line-icon {
  position: absolute;
  top: 7px;
  left: 3px;
}

.property-connector-vertical-line {
  pointer-events: none;
  border-left: 1px solid #e9e9e6;
  width: 0;
  position: absolute;
  top: -6px;
  bottom: -8px;
  left: 10px;
}

.property-editor {
  border-radius: 6px;
}

.property-editor:focus-within {
  box-shadow: 0 0 0 1px rgba(0, 145, 255, .5);
}

.ant-popover.NoPaddingPopover .ant-popover-inner {
  padding: 0;
}

.NoBackgroundStyles .ant-popover-inner {
  box-shadow: none;
  background: none;
}

.NewBadge {
  color: #fff;
  background: #0091ff;
  border-radius: 99px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: bold;
}

.baseline-friendly-centered-block-container:before {
  content: "-";
  width: 0;
  overflow: clip;
}

.baseline-friendly-centered-block-container {
  align-items: center;
  display: flex;
}

.ant-form-item-margin-offset {
  margin: 0 !important;
}

.data-table .ant-table-tbody > tr > td {
  vertical-align: top;
  max-width: 200px;
}

.vertical-fill-table {
  max-height: 85%;
}

.vertical-fill-table .ant-table {
  background: none;
}

.vertical-fill-table .ant-table-tbody {
  background: #fff;
}

.vertical-fill-table .ant-table-content {
  overflow: unset !important;
}

.vertical-fill-table .ant-table-container:after, .vertical-fill-table .ant-table-container:before {
  display: none;
}

.vertical-fill-table .ant-table-container {
  border: 1px solid #eee;
  max-height: 100%;
  overflow: scroll;
}

.vertical-fill-table .ant-table-thead {
  z-index: 1;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.vertical-fill-table .ant-table, .vertical-fill-table .ant-spin-container, .vertical-fill-table .ant-spin-nested-loading, .vertical-fill-table .ant-table-wrapper {
  height: 100%;
}

@keyframes tutorial-highlight {
  0%, 100% {
    box-shadow: 0 0 8px 6px rgba(255, 0, 0, .25), inset 0 0 4px 3px rgba(255, 0, 0, .25);
  }

  50% {
    box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0), inset 0 0 rgba(0, 0, 0, 0);
  }
}

.tutorial-content {
  font-size: 13px;
}

.tutorial-content h2 {
  color: #777;
  margin-bottom: 12px;
  font-size: 16px;
}

.tutorial-content ul, .tutorial-content ol {
  margin-bottom: 1em;
  padding-left: 16px;
}

.tutorial-content li {
  list-style-type: initial;
}

.ant-popover.sidebar-popover > * {
  transform: translateX(-16px);
}

.ant-popover.sidebar-popover .ant-popover-inner {
  border-radius: 8px;
  padding: 8px;
}

.floating-inset-toolbar {
  display: flex;
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
}

.custom-gql-ui {
  --font-family: Inter;
  --font-family-mono: "Roboto Mono";
  --font-size-body: 12px;
  --font-size-h2: 12px;
  --font-weight-medium: 700;
  --font-size-h3: 12px;
  --font-size-h4: 12px;
  overflow: initial;
  overflow: initial;
  width: 100%;
  margin-top: 8px;
  height: auto !important;
}

.custom-gql-ui .graphiql-editor {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: clip;
  height: auto !important;
}

.custom-gql-ui .graphiql-editor:focus-within {
  border-color: rgba(0, 145, 255, .5);
}

.custom-gql-ui .graphiql-editor .CodeMirror {
  height: auto;
  position: initial;
  min-height: 300px;
}

.standard-gql-ui .graphiql-container {
  --font-family: Inter;
  --font-family-mono: "Roboto Mono";
  --font-size-body: 12px;
}

.standard-gql-ui button[aria-label="Hide History"], .standard-gql-ui button[aria-label="Show History"], .standard-gql-ui button[data-value="settings"], .standard-gql-ui .graphiql-session-header {
  display: none;
}

.standard-gql-ui .graphiql-sessions {
  padding-top: 8px;
}

.standard-gql-ui .graphiql-container .graphiql-editors.full-height {
  margin-top: 0;
}

[data-radix-popper-content-wrapper], .graphiql-dialog {
  z-index: 1100 !important;
}

.cms-option-list {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.selectable-text, .markdown-body {
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.markdown-body {
  white-space: normal;
  word-break: break-word;
}

.markdown-body p {
  margin-bottom: .5rem;
}

.markdown-body p:last-child {
  margin-bottom: 0;
}

.markdown-body hr {
  margin: .5rem 0;
}

.markdown-body ul, .markdown-body ol {
  margin-bottom: .5rem;
  margin-left: 1.5rem;
}

.markdown-body ul, .markdown-body ul li {
  list-style-type: unset;
}

.markdown-body ol li {
  list-style-type: decimal;
}

.markdown-body blockquote {
  border-left: .25rem solid #ccc;
  padding: .5em;
}

.banner-bottom {
  z-index: 1;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute !important;
}

.no-padding-ant-modal .ant-modal-body {
  padding: 0;
}


/*# sourceMappingURL=index~22.css.map*/