.tb-profile-pic {
  flex: none;
  position: relative;
  display: inline-block;
  height: 30px;
  width: 30px;
  overflow: hidden;
  border-radius: 50%;
}
.xh-mobile .tb-profile-pic {
  height: 26px;
  width: 26px;
}
.tb-profile-pic img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  width: 100%;
  transform: translate(-50%, -50%);
}
.tb-welcome-message {
  display: flex;
  align-items: center;
  padding: 10px 5px;
}
.tb-welcome-message--multiline .tb-welcome-message__profile-pic {
  height: 40px;
  width: 40px;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: block;
  src: url(/static/media/IBMPlexSans-Regular.64777c24.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500;
  font-display: block;
  src: url(/static/media/IBMPlexSans-Medium.dfad6a4e.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: block;
  src: url(/static/media/IBMPlexSans-SemiBold.afac8828.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 700;
  font-display: block;
  src: url(/static/media/IBMPlexSans-Bold.cf746248.woff2) format("woff2");
}
body.xh-app.tbox-font--plex {
  --font-family: 'IBM Plex Sans', system-ui, sans-serif;
  --font-feature-settings: 'tnum', 'zero', 'ss01';
}

.xh-options-dialog.bp6-dialog {
  width: 560px;
}

.tbox-theme-swatch {
  width: 76px;
  height: 42px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 7px;
  overflow: hidden;
}
.tbox-theme-swatch__chrome {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 11px;
  padding: 0 5px;
}
.tbox-theme-swatch__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.tbox-theme-swatch__dot:nth-child(1) {
  background: #ff5f57;
}
.tbox-theme-swatch__dot:nth-child(2) {
  background: #febc2e;
}
.tbox-theme-swatch__dot:nth-child(3) {
  background: #28c840;
}
.tbox-theme-swatch__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  padding: 5px;
}
.tbox-theme-swatch__accent {
  width: 60%;
  height: 5px;
  border-radius: 3px;
  background: var(--xh-blue);
}
.tbox-theme-swatch__line {
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.28;
}
.tbox-theme-swatch__line--short {
  width: 65%;
}
.tbox-theme-swatch--light {
  background: #ffffff;
  color: #1a1a1a;
}
.tbox-theme-swatch--light .tbox-theme-swatch__chrome {
  background: #ececec;
}
.tbox-theme-swatch--dark {
  background: #21242b;
  color: #e8e8e8;
}
.tbox-theme-swatch--dark .tbox-theme-swatch__chrome {
  background: #15171c;
}
.tbox-theme-swatch--system {
  color: #808080;
  background: linear-gradient(135deg, #ffffff 0 49.5%, #21242b 50.5% 100%);
}
.tbox-theme-swatch--system .tbox-theme-swatch__chrome {
  background: linear-gradient(135deg, #ececec 0 49.5%, #15171c 50.5% 100%);
}

.tbox-font-swatch {
  width: 76px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--xh-text-color);
}
.tbox-font-swatch__big {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.tbox-font-swatch__small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

code.tb-code-link {
  cursor: pointer;
  text-decoration: underline;
}
code.tb-code-link:hover {
  background-color: var(--xh-orange-muted);
  border-color: var(--xh-orange);
}

.xh-appbar-icon img {
  height: 25px;
  display: block;
  margin-left: var(--xh-pad-px);
}

.tb-switcher.xh-tab-switcher--left {
  width: 150px;
  padding: var(--xh-pad-half-px);
  border-right: var(--xh-border-solid);
}
.tb-switcher.xh-tab-switcher--left .bp6-tab {
  margin: 0 0 2px;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--xh-text-color-muted);
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tb-switcher.xh-tab-switcher--left .bp6-tab:hover {
  color: var(--xh-text-color);
  background-color: var(--xh-bg-alt);
}
.tb-switcher.xh-tab-switcher--left .bp6-tab[aria-selected=true] {
  color: var(--xh-text-color);
  background-color: var(--xh-bg-highlight);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--xh-blue);
}
.tbox-wrapper {
  position: relative;
  gap: 12px;
  padding: 16px;
  --tbox-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.xh-dark .tbox-wrapper {
  --tbox-card-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}
.tbox-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.tbox-wrapper > * {
  position: relative;
  z-index: 1;
}
.tbox-wrapper__rail {
  flex: none;
  border: var(--xh-border-solid);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--tbox-card-shadow);
}
.tbox-wrapper__rail-body {
  overflow: auto;
  padding: var(--xh-pad-px);
  display: flex;
  flex-direction: column;
  gap: var(--xh-pad-px);
  line-height: 1.5;
}
.tbox-wrapper__intro p {
  margin: 0 0 var(--xh-pad-half-px);
}
.tbox-wrapper__intro p:last-child {
  margin: 0;
}
.tbox-wrapper__intro code {
  font-family: var(--xh-font-family-mono);
  font-size: 0.85em;
  color: var(--xh-text-color);
  background-color: var(--xh-bg-alt);
  padding: 1px 3px;
  border-radius: 3px;
}
.tbox-wrapper__intro ul,
.tbox-wrapper__intro ol {
  margin: var(--xh-pad-half-px) 0;
  padding-left: 1.4em;
}
.tbox-wrapper__intro li {
  margin-bottom: 2px;
}
.tbox-wrapper__divider {
  flex: none;
  height: 1px;
  background: var(--xh-border-color);
}
.tbox-wrapper__resources {
  display: flex;
  flex-direction: column;
  gap: var(--xh-pad-half-px);
}
.tbox-wrapper__resources-label, .tbox-wrapper__options-label {
  margin-bottom: var(--xh-pad-half-px);
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--xh-text-color-muted);
}
.tbox-wrapper__options {
  display: flex;
  flex-direction: column;
}
.tbox-wrapper__options-body {
  display: flex;
  flex-direction: column;
  gap: var(--xh-pad-half-px);
}
.tbox-wrapper__option {
  display: flex;
  flex-direction: column;
}
.tbox-wrapper__option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xh-pad-px);
  min-height: 26px;
}
.tbox-wrapper__option-label {
  flex: 1;
  min-width: 0;
  font-size: 0.9em;
}
.tbox-wrapper__option-label:has(.tbox-wrapper__option-prop) {
  display: grid;
  align-items: center;
}
.tbox-wrapper__option-label-text, .tbox-wrapper__option-prop {
  grid-area: 1/1;
  min-width: 0;
  transition: opacity 0.15s ease;
}
.tbox-wrapper__option-prop {
  justify-self: start;
  max-width: 100%;
  font-family: var(--xh-font-family-mono);
  font-size: 0.8em;
  color: var(--xh-text-color);
  background-color: var(--xh-bg-alt);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
}
.tbox-wrapper__option:hover .tbox-wrapper__option-label-text {
  opacity: 0;
}
.tbox-wrapper__option:hover .tbox-wrapper__option-prop {
  opacity: 1;
}
.tbox-wrapper__option-control {
  flex: none;
  display: flex;
  align-items: center;
}
.tbox-wrapper__option-info {
  margin-top: 2px;
  color: var(--xh-text-color-muted);
  font-size: 0.85em;
  line-height: 1.35;
}
.tbox-wrapper__resource {
  display: flex;
  gap: var(--xh-pad-half-px);
  align-items: baseline;
}
.tbox-wrapper__resource .xh-icon {
  flex: none;
  font-size: 0.85em;
  color: var(--xh-text-color-muted);
}
.tbox-wrapper__resource-note {
  color: var(--xh-text-color-muted);
  font-size: 0.9em;
  line-height: 1.35;
}
.tbox-wrapper__demo {
  flex: 1;
  min-width: 0;
  justify-content: center;
  align-items: center;
}
.tbox-wrapper__demo > .xh-panel {
  margin: 0;
  border: var(--xh-border-solid);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--tbox-card-shadow);
}
.tbox-wrapper__rail-collapsed {
  flex: none;
  width: 36px;
  align-items: center;
  padding-top: var(--xh-pad-half-px);
  border: var(--xh-border-solid);
  border-radius: 8px;
  box-shadow: var(--tbox-card-shadow);
  cursor: pointer;
}
.tbox-wrapper__rail-collapsed-hint {
  margin-top: var(--xh-pad-half-px);
  color: var(--xh-text-color-muted);
}
.tb-sample-grid__selbar {
  font-size: var(--xh-font-size-small-px);
  padding: var(--xh-pad-half-px);
  border-top: var(--xh-border-solid);
  background-color: var(--xh-bg-highlight);
  align-items: center;
}
.tb-sample-grid__selbar svg {
  margin-right: 4px;
}
.tb-sample-grid .ag-row:not(.ag-row-pinned) .tb-sample-grid__high-volume-cell {
  color: var(--xh-intent-warning-text-color);
  border-left: 4px solid var(--xh-intent-warning) !important;
  border-right: 4px solid var(--xh-intent-warning) !important;
}

.tb-sample-grid-tooltip {
  min-width: 160px;
  padding: var(--xh-pad-px);
  background: var(--xh-bg-alt);
  border: var(--xh-border-solid);
}
.tb-sample-grid-tooltip > *:not(:last-child) {
  margin-bottom: var(--xh-pad-half-px);
}
.tb-sample-grid-tooltip .company {
  font-size: var(--xh-font-size-large-px);
  color: var(--xh-text-color-headings);
}
.tb-sample-grid-tooltip .city-and-date {
  color: var(--xh-text-color-muted);
  border-bottom: var(--xh-border-solid);
  padding-bottom: var(--xh-pad-half-px);
}
.tb-sample-grid-tooltip .tooltip-row > *:first-child {
  margin-right: var(--xh-pad-px);
}
.tbox-card-choice.xh-button-group-input {
  gap: 12px;
}
.tbox-card-choice.xh-button-group-input .tbox-card-choice__card.bp6-button {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  background: var(--xh-bg-alt);
  border: 1px solid var(--xh-border-color);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tbox-card-choice.xh-button-group-input .tbox-card-choice__card.bp6-button .bp6-button-text {
  flex: 1;
  width: 100%;
  margin: 0;
}
.tbox-card-choice.xh-button-group-input .tbox-card-choice__card.bp6-button:hover {
  border-color: var(--xh-intent-primary);
  transform: translateY(-1px);
}
.tbox-card-choice.xh-button-group-input .tbox-card-choice__card.bp6-button.bp6-active, .tbox-card-choice.xh-button-group-input .tbox-card-choice__card.bp6-button.bp6-active:hover {
  background: var(--xh-bg-alt);
  border-color: var(--xh-intent-primary);
  box-shadow: 0 0 0 2px var(--xh-intent-primary);
}
.tbox-card-choice.xh-button-group-input .tbox-card-choice__body {
  align-items: center;
  gap: 6px;
  padding: 8px 12px 6px;
}
.tbox-card-choice.xh-button-group-input .tbox-card-choice__label {
  font-size: var(--xh-font-size-small-px);
  font-weight: 500;
  color: var(--xh-text-color-muted);
}
.tbox-card-choice.xh-button-group-input .bp6-active .tbox-card-choice__label {
  color: var(--xh-text-color);
  font-weight: 600;
}
.xh-treemap__chart-holder {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.xh-treemap__mask-holder {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: var(--xh-bg);
}
.xh-treemap rect.highcharts-point {
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 1px;
}
.xh-treemap rect.highcharts-point.highcharts-point-select {
  stroke: none;
  outline-style: solid;
  outline-width: 1px;
  outline-offset: -1px;
  outline-color: var(--xh-blue-light);
}
.xh-treemap .highcharts-data-label text {
  font-family: var(--xh-font-family);
  font-size: var(--xh-font-size-small-px) !important;
  font-weight: normal !important;
}
.xh-treemap--dark rect.highcharts-point {
  stroke: rgba(255, 255, 255, 0.2);
}

.xh-treemap-tooltip {
  color: var(--xh-text-color);
  border: var(--xh-border-solid);
  overflow: hidden;
  white-space: nowrap;
  min-width: 150px;
}
.xh-treemap-tooltip__label {
  padding: var(--xh-pad-half-px);
  background: var(--xh-bg-alt);
  font-size: var(--xh-font-size-small-px);
}
.xh-treemap-tooltip__row {
  display: flex;
  background: var(--xh-bg);
  border-top: var(--xh-border-solid);
  font-size: var(--xh-font-size-small-px);
}
.xh-treemap-tooltip__row > div {
  padding: var(--xh-pad-half-px);
}
.xh-treemap-tooltip__row > div:first-of-type {
  flex: 1;
  padding-right: var(--xh-pad-px);
  font-weight: bold;
}
.xh-split-treemap__map-holder {
  flex-shrink: 0 !important;
  flex-basis: 10px !important;
}
.xh-split-treemap__header {
  padding: 0;
  align-items: center;
  flex: none;
  -webkit-user-select: none;
          user-select: none;
  background-color: var(--xh-grid-header-bg);
  border-bottom: 1px solid var(--xh-grid-header-border-color);
  font-family: var(--xh-grid-header-font-family);
  font-weight: var(--xh-grid-header-font-weight);
  color: var(--xh-grid-header-text-color);
  -webkit-font-smoothing: antialiased;
}
.xh-split-treemap__header__title {
  display: flex;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xh-split-treemap__header.xh-split-treemap__header--vertical {
  flex-direction: column-reverse !important;
  justify-content: flex-end;
}
.xh-split-treemap__header.xh-split-treemap__header--vertical .xh-split-treemap__header__title {
  writing-mode: vertical-lr;
  -ms-block-progression: lr;
  transform: rotate(180deg);
  width: calc(1em + 5px);
}
.xh-split-treemap__splitter {
  background-color: var(--xh-resizable-bg);
}
.xh-split-treemap__splitter--vertical {
  height: 4px;
  border-top: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
  border-bottom: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
}
.xh-split-treemap__splitter--horizontal {
  width: 4px;
  border-left: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
  border-right: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
}
.xh-split-treemap__mask-holder {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: var(--xh-bg);
  z-index: 20;
}

.xh-standard .xh-split-treemap__header {
  font-size: var(--xh-grid-header-font-size-px);
}
.xh-standard .xh-split-treemap__header.xh-split-treemap__header--horizontal {
  padding-left: var(--xh-grid-header-lr-pad-px);
}
.xh-standard .xh-split-treemap__header.xh-split-treemap__header--vertical {
  padding-top: var(--xh-grid-header-lr-pad-px);
}

.xh-large .xh-split-treemap__header {
  font-size: var(--xh-grid-large-header-font-size-px);
}
.xh-large .xh-split-treemap__header.xh-split-treemap__header--horizontal {
  padding-left: var(--xh-grid-large-header-lr-pad-px);
}
.xh-large .xh-split-treemap__header.xh-split-treemap__header--vertical {
  padding-top: var(--xh-grid-large-header-lr-pad-px);
}

.xh-compact .xh-split-treemap__header {
  font-size: var(--xh-grid-compact-header-font-size-px);
}
.xh-compact .xh-split-treemap__header.xh-split-treemap__header--horizontal {
  padding-left: var(--xh-grid-compact-header-lr-pad-px);
}
.xh-compact .xh-split-treemap__header.xh-split-treemap__header--vertical {
  padding-top: var(--xh-grid-compact-header-lr-pad-px);
}

.xh-tiny .xh-split-treemap__header {
  font-size: var(--xh-grid-tiny-header-font-size-px);
}
.xh-tiny .xh-split-treemap__header.xh-split-treemap__header--horizontal {
  padding-left: var(--xh-grid-tiny-header-lr-pad-px);
}
.xh-tiny .xh-split-treemap__header.xh-split-treemap__header--vertical {
  padding-top: var(--xh-grid-tiny-header-lr-pad-px);
}
.tb-docs-tooltip.bp6-tooltip .bp6-popover-content {
  background: var(--xh-bg);
  color: var(--xh-text-color);
}
.tb-docs-tooltip.bp6-tooltip .bp6-popover-arrow-fill {
  fill: var(--xh-border-color);
}

.tb-docs__nav .xh-grid .ag-row {
  cursor: pointer;
}
.tb-docs__nav .xh-grid .ag-row-group {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.tb-docs__content-toolbar {
  border-bottom: 2px solid var(--xh-orange);
}
.tb-docs__breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
}
.tb-docs__breadcrumb-btn {
  font-weight: 500;
  border-bottom: 1px dashed var(--xh-border-color);
  border-radius: 0;
  padding-bottom: 1px;
}
.tb-docs__breadcrumb-btn:hover {
  border-bottom-color: var(--xh-orange);
}
.tb-docs__breadcrumb-sep {
  color: var(--xh-text-color-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
}
.tb-docs__breadcrumb-section {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-docs__content {
  flex: 1;
  min-width: 0;
}
.tb-docs__search-results {
  overflow: auto;
  flex: 1;
  padding: 16px 24px;
}
.tb-docs__search-result {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--xh-border-color);
  transition: background-color 0.1s ease;
}
.tb-docs__search-result:hover {
  background-color: var(--xh-bg-highlight);
}
.tb-docs__search-result--selected {
  border-left: 3px solid var(--xh-orange);
  padding-left: 13px;
}
.tb-docs__search-result:last-child {
  border-bottom: none;
}
.tb-docs__search-result-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tb-docs__search-result-title {
  font-weight: 500;
  font-size: var(--xh-font-size-large-px);
}
.tb-docs__search-result-desc {
  color: var(--xh-text-color-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.tb-docs__content-body {
  overflow: auto;
  flex: 1;
}
.tb-docs__content-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 40px 60px;
}
.tb-docs__content-inner h1 {
  font-size: 1.8em;
  border-bottom: 2px solid var(--xh-orange);
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 20px;
}
.tb-docs__content-inner h2 {
  font-size: 1.4em;
  border-bottom: 1px solid var(--xh-border-color);
  padding-bottom: 6px;
  margin-top: 32px;
  margin-bottom: 16px;
}
.tb-docs__content-inner h3 {
  font-size: 1.15em;
  margin-top: 24px;
  margin-bottom: 12px;
}
.tb-docs__content-inner h4 {
  font-size: 1.05em;
  margin-top: 20px;
  margin-bottom: 8px;
}
.tb-docs__content-inner pre {
  background-color: var(--xh-bg-alt);
  border: 1px solid var(--xh-border-color);
  border-radius: 6px;
  padding: 14px 18px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: 16px 0;
}
.tb-docs__content-inner code {
  font-family: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
  font-size: 0.88em;
}
.tb-docs__content-inner :not(pre) > code {
  background-color: var(--xh-bg-alt);
  border: 1px solid var(--xh-border-color);
  border-radius: 3px;
  padding: 1px 6px;
}
.tb-docs__content-inner table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 0.95em;
}
.tb-docs__content-inner th,
.tb-docs__content-inner td {
  border: 1px solid var(--xh-border-color);
  padding: 8px 12px;
  text-align: left;
}
.tb-docs__content-inner th {
  background-color: var(--xh-bg-alt);
  font-weight: 600;
}
.tb-docs__content-inner tr:hover td {
  background-color: var(--xh-bg-highlight);
}
.tb-docs__content-inner ul,
.tb-docs__content-inner ol {
  padding-left: 24px;
  margin: 12px 0;
}
.tb-docs__content-inner li {
  margin: 6px 0;
  line-height: 1.6;
}
.tb-docs__content-inner li > ul,
.tb-docs__content-inner li > ol {
  margin: 4px 0;
}
.tb-docs__content-inner blockquote {
  border-left: 4px solid var(--xh-orange);
  margin: 16px 0;
  padding: 8px 16px;
  background-color: var(--xh-bg-alt);
  border-radius: 0 6px 6px 0;
}
.tb-docs__content-inner blockquote p:first-child {
  margin-top: 0;
}
.tb-docs__content-inner blockquote p:last-child {
  margin-bottom: 0;
}
.tb-docs__content-inner hr {
  border: none;
  border-top: 1px solid var(--xh-border-color);
  margin: 32px 0;
}
.tb-docs__content-inner p {
  line-height: 1.7;
  margin: 14px 0;
}
.tb-docs__content-inner img {
  max-width: 100%;
  border-radius: 4px;
}
.tb-docs__content-inner strong {
  font-weight: 600;
}
.tb-examples__app-frame {
  padding: 30px;
}
.tb-examples__app-frame iframe {
  background-color: var(--xh-bg-alt);
  border: 3px solid var(--xh-border-color);
  border-radius: var(--xh-border-radius-px);
}
.tb-examples__app-tile-container {
  flex: 1;
  overflow-y: auto;
}
.tb-examples__app-tile {
  margin: var(--xh-pad-double-px) var(--xh-pad-px) var(--xh-pad-px) var(--xh-pad-px);
  border: var(--xh-border-solid);
  border-radius: 10px;
  cursor: pointer;
}
.tb-examples__app-tile__contents {
  padding: var(--xh-pad-px);
}
.tb-examples__app-tile:hover, .tb-examples__app-tile--selected {
  border-color: var(--xh-intent-primary-darker);
}
.tb-examples__app-tile:hover .tb-examples__app-tile__contents, .tb-examples__app-tile--selected .tb-examples__app-tile__contents {
  background-color: var(--xh-intent-primary-trans1);
}
.tb-form-panel {
  --xh-form-field-label-color: var(--xh-text-color-muted);
  --xh-form-field-label-text-transform: uppercase;
  --xh-form-field-label-font-size: var(--xh-font-size-small-px);
  --xh-form-field-readonly-label-border-bottom: var(--xh-border-solid);
}
.tb-form-panel__reference-row {
  flex: none;
}
.tb-form-panel__reference-row .xh-form-field {
  margin-bottom: 0;
}
.tb-inputs-panel__row {
  margin-bottom: var(--xh-pad-double-px);
  flex-shrink: 0;
}
.tb-inputs-panel__label {
  font-weight: 500;
}
.tb-inputs-panel__masonry {
  padding: var(--xh-pad-double-px);
  columns: 340px 3;
  column-gap: var(--xh-pad-double-px);
}
.tb-inputs-panel__masonry > * {
  break-inside: avoid;
  width: 100%;
  margin-bottom: var(--xh-pad-double-px);
}
.tb-picker-panel__row {
  margin-bottom: var(--xh-pad-double-px);
  flex-shrink: 0;
}
.tb-picker-panel__label {
  font-weight: 500;
}
.tb-picker-panel__badge {
  margin-left: 6px;
  font-size: 11px;
  min-width: 18px;
  min-height: 18px;
  line-height: 18px;
}
.tb-select-panel__row {
  margin-bottom: var(--xh-pad-double-px);
  flex-shrink: 0;
}
.tb-select-panel__label {
  font-weight: 500;
}
.tb-toolbar-form {
  width: 100%;
  max-width: 900px;
  align-items: stretch;
  gap: var(--xh-pad-px);
}
.tb-toolbar-form .xh-toolbar {
  border: var(--xh-border-solid);
}
.tb-dataview-panel .tb-dataview-item {
  padding: var(--xh-pad-half-px) var(--xh-pad-px);
}
.tb-dataview-panel .tb-dataview-item__name {
  font-size: var(--xh-font-size-large-px);
  font-weight: bold;
}
.tb-dataview-panel .tb-dataview-item__city {
  opacity: 0.8;
  font-size: var(--xh-font-size-small-px);
  line-height: calc(var(--xh-font-size-small) * 1.1px);
  padding-bottom: var(--xh-pad-half-px);
}
.tb-dataview-panel .tb-dataview-item svg {
  position: absolute;
  right: 20px;
  top: 15px;
}
body {
  --tb-editable-cell-bg: rgba(255, 253, 231, 0.5);
}
body.xh-dark {
  --tb-editable-cell-bg: rgba(255, 217, 48, 0.05);
}

.tb-inline-editing-panel:not(.tb-inline-editing-panel--fullRow) .xh-cell--editable {
  background-color: var(--tb-editable-cell-bg);
}
.tb-grid-wrapper-panel {
  width: 100%;
  height: 100%;
}
.tb-under-the-hood .tb-under-the-hood__inner {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--xh-pad-px) var(--xh-pad-px) var(--xh-pad-px);
}
.tb-under-the-hood .tb-under-the-hood__inner h2 {
  font-size: var(--xh-font-size-large-px);
}
.tb-under-the-hood .tb-under-the-hood__inner h2 .xh-icon {
  margin-right: 0.5em;
}
.tb-under-the-hood .tb-under-the-hood__inner table {
  border-spacing: 0;
  border-collapse: collapse;
  background-color: var(--xh-bg);
  border: var(--xh-border-solid);
  font-family: var(--xh-font-family-mono);
  font-size: var(--xh-font-size-small-px);
  table-layout: fixed;
  width: 100%;
  min-width: 300px;
}
.tb-under-the-hood .tb-under-the-hood__inner table tr {
  border-bottom: var(--xh-border-solid);
}
.tb-under-the-hood .tb-under-the-hood__inner table th {
  background-color: var(--xh-bg-alt);
  padding: var(--xh-pad-half-px);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  width: 120px;
}
.tb-under-the-hood .tb-under-the-hood__inner table td {
  padding: var(--xh-pad-half-px);
}
.tb-activity-repo {
  padding: 2px 10px;
  border-radius: 4px;
  color: var(--xh-gray-light);
}
.tb-activity-repo--hoist-react {
  background-color: var(--xh-orange-muted);
}
.tb-activity-repo--hoist-core {
  background-color: var(--xh-blue-muted);
}
.tb-activity-repo--hoist-dev-utils {
  background-color: var(--xh-red-muted);
}
.tb-activity-repo--toolbox {
  background-color: var(--xh-green-muted);
}

.tb-activity-deltas {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.tb-activity-deltas--additions {
  flex: 1;
  text-align: right;
  color: var(--xh-green-muted);
}
.tb-activity-deltas--deletions {
  flex: 1;
  text-align: left;
  color: var(--xh-red-muted);
}
.tb-activity-deltas--sep {
  margin: 0 6px;
  color: var(--xh-text-color-muted);
}

.tb-activity--release {
  font-weight: 600;
  background-color: var(--xh-bg-highlight);
}
.tb-activity--release .tb-activity-repo {
  font-weight: normal;
}
.tb-feedback__inner {
  flex: 1;
  padding: var(--xh-pad-double-px);
  gap: var(--xh-pad-px);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tb-feedback__inner--thanks {
  gap: var(--xh-pad-double-px);
}
.tb-feedback__question {
  font-weight: 600;
  font-size: var(--xh-font-size-large-px);
}
.tb-feedback__sub {
  color: var(--xh-text-color-muted);
  font-size: var(--xh-font-size-small-px);
}
.tb-feedback__ratings {
  gap: var(--xh-pad-double-px);
  margin-top: var(--xh-pad-px);
}
.tb-feedback__ratings .xh-button {
  padding: var(--xh-pad-px) var(--xh-pad-double-px);
}
.tb-feedback__actions {
  width: 100%;
  gap: var(--xh-pad-half-px);
}
.tb-meet-xh__spotlight {
  flex: 1;
  padding: var(--xh-pad-double-px);
  gap: var(--xh-pad-double-px);
  overflow: hidden;
  animation: tb-meet-xh-fade 0.5s ease;
}
.tb-meet-xh__photo {
  flex: none;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
}
.tb-meet-xh__details {
  flex: 1;
  min-width: 0;
  gap: var(--xh-pad-half-px);
  overflow: hidden;
}
.tb-meet-xh__name {
  font-weight: 600;
  font-size: var(--xh-font-size-large-px);
}
.tb-meet-xh__location {
  color: var(--xh-text-color-muted);
  font-size: var(--xh-font-size-small-px);
}
.tb-meet-xh__tags {
  gap: var(--xh-pad-half-px);
  flex-wrap: wrap;
}
.tb-meet-xh__tag {
  background-color: var(--xh-bg-alt);
  border-radius: 10px;
  padding: 0 var(--xh-pad-px);
  font-size: var(--xh-font-size-small-px);
}
.tb-meet-xh__bio {
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.tb-meet-xh__shuffle {
  align-self: flex-start;
}
.tb-meet-xh__fallback {
  flex: 1;
  padding: var(--xh-pad-double-px);
}
.tb-meet-xh__avatars {
  flex: none;
  padding: var(--xh-pad-px) var(--xh-pad-double-px);
  gap: var(--xh-pad-half-px);
  flex-wrap: wrap;
  border-top: var(--xh-border-solid);
}
.tb-meet-xh__avatars > span {
  cursor: pointer;
}
.tb-meet-xh__avatars > span:hover .tb-meet-xh__avatar {
  opacity: 1;
}
.tb-meet-xh__avatar {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

@keyframes tb-meet-xh-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tb-releases__list {
  padding: var(--xh-pad-px);
  gap: var(--xh-pad-px);
}
.tb-releases__card {
  --tb-release-card-bg: var(--xh-bg);
  border: var(--xh-border-solid);
  border-radius: var(--xh-border-radius-px);
  padding: var(--xh-pad-px);
  cursor: pointer;
  background-color: var(--tb-release-card-bg);
  transition: background-color 0.15s ease;
}
.tb-releases__card:hover {
  --tb-release-card-bg: var(--xh-bg-alt);
}
.tb-releases__card-header {
  align-items: center;
  gap: var(--xh-pad-px);
}
.tb-releases__repo {
  padding: 2px 10px;
  border-radius: 4px;
  color: var(--xh-gray-light);
  font-weight: 600;
}
.tb-releases__repo--hoist-react {
  background-color: var(--xh-orange-muted);
}
.tb-releases__repo--hoist-core {
  background-color: var(--xh-blue-muted);
}
.tb-releases__repo--hoist-dev-utils {
  background-color: var(--xh-red-muted);
}
.tb-releases__repo--toolbox {
  background-color: var(--xh-green-muted);
}
.tb-releases__tag {
  font-family: var(--xh-font-family-mono);
  font-weight: 600;
}
.tb-releases__card-body {
  margin-top: var(--xh-pad-half-px);
  max-height: 80px;
  overflow: hidden;
  position: relative;
  font-size: var(--xh-font-size-small-px);
  color: var(--xh-text-color-muted);
}
.tb-releases__card-body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 24px;
  background: linear-gradient(transparent, var(--tb-release-card-bg));
}
.tb-releases__card-body h2,
.tb-releases__card-body h3 {
  font-size: 1em;
  margin: 0 0 var(--xh-pad-half-px);
}
.tb-releases__card-body ul {
  margin: 0;
  padding-left: var(--xh-pad-double-px);
}
.tb-start-here__items {
  padding: var(--xh-pad-px);
  gap: var(--xh-pad-half-px);
}
.tb-start-here__item {
  display: flex;
  align-items: center;
  gap: var(--xh-pad-px);
  padding: var(--xh-pad-px);
  border: var(--xh-border-solid);
  border-radius: var(--xh-border-radius-px);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tb-start-here__item:hover {
  background-color: var(--xh-bg-alt);
}
.tb-start-here__item-icon {
  flex: none;
  width: 32px;
  text-align: center;
  font-size: var(--xh-font-size-large-px);
  color: var(--xh-intent-primary);
}
.tb-start-here__item-text {
  flex: 1;
  min-width: 0;
}
.tb-start-here__item-title {
  font-weight: 600;
}
.tb-start-here__item-blurb {
  color: var(--xh-text-color-muted);
  font-size: var(--xh-font-size-small-px);
}
.tb-start-here__item-caret {
  color: var(--xh-text-color-muted);
}
.tb-welcome-widget__logo {
  padding: var(--xh-pad-double-px);
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 25%;
  min-width: 140px;
}
.tb-welcome-widget__logo img {
  object-fit: contain !important;
  max-width: 100%;
  max-height: 100%;
}
.tb-welcome-widget__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--xh-pad-double-px);
  display: flex;
  flex-direction: column;
  gap: var(--xh-pad-px);
}
.tb-welcome-widget__content p {
  margin: 0;
  font-size: var(--xh-font-size-large-px);
  line-height: 1.5;
}
.tb-welcome-widget__headline {
  font-size: 1.8em;
  font-weight: 500;
}
.tb-welcome-widget__ctas {
  gap: var(--xh-pad-px);
  margin-top: var(--xh-pad-px);
  flex: none;
  flex-wrap: wrap;
}
.tb-home {
  --tbox-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.xh-dark .tb-home {
  --tbox-card-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}
.tb-home .react-grid-item {
  border: none;
}
.tb-home .xh-dash-tab {
  border: var(--xh-border-solid);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--tbox-card-shadow);
}
.tb-tileframe__tile {
  border: 2px solid var(--xh-intent-primary-darker);
}
.tb-tileframe__props-form .xh-form-field {
  flex: none;
  margin: 0;
}
.tb-tileframe__props-form .xh-button {
  margin-top: var(--xh-pad-px);
  width: 100%;
}
.dash-canvas-droppable-demo .xh-dash-canvas .react-grid-layout {
  min-height: 100%;
}
.tb-layout-box {
  border: var(--xh-border-solid);
  font-family: var(--xh-font-family-mono);
  padding: var(--xh-pad-px);
}

.tb-layout-tabs .xh-tab {
  padding: var(--xh-pad-px);
}
.tb-layout-tabs .tb-layout-tabs__child {
  border: var(--xh-border-solid);
}
.tb-mobile {
  --tb-bezel: linear-gradient(150deg, #43464d 0%, #1c1e22 16%, #0c0d10 100%);
  --tb-chrome: #08090b;
  --tb-status: rgba(255, 255, 255, 0.75);
  --tb-home: rgba(255, 255, 255, 0.5);
  --tb-button: linear-gradient(180deg, #34373d, #15171b);
  --tb-shadow:
    0 18px 40px rgba(0, 0, 0, 0.3), 0 6px 14px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 0 0 2px rgba(0, 0, 0, 0.55);
}
.tb-mobile--light {
  --tb-bezel: linear-gradient(150deg, #fbfcfd 0%, #e4e6ea 18%, #d0d3d9 100%);
  --tb-chrome: #eef0f3;
  --tb-status: rgba(0, 0, 0, 0.55);
  --tb-home: rgba(0, 0, 0, 0.4);
  --tb-button: linear-gradient(180deg, #d6d8dd, #b6b9bf);
  --tb-shadow:
    0 18px 40px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.tb-mobile__screenshots {
  flex: 1;
  min-height: 0;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 14px 0;
}
.tb-mobile__device {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  height: min(100%, 760px);
  aspect-ratio: 421/880;
  padding: 9px;
  border-radius: 46px;
  background: var(--tb-bezel);
  box-shadow: var(--tb-shadow);
}
.tb-mobile__screen {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: var(--tb-chrome);
  padding: 28px 0 30px;
}
.tb-mobile__shot {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: top center;
}
.tb-mobile__home {
  position: absolute;
  bottom: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 5px;
  border-radius: 999px;
  background: var(--tb-home);
  z-index: 2;
}
.tb-mobile__statusbar {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: var(--tb-status);
  font-size: 11px;
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
}
.tb-mobile__clock {
  font-variant-numeric: tabular-nums;
}
.tb-mobile__status-right {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tb-mobile__carrier {
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
.tb-mobile__signal {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 10px;
}
.tb-mobile__bar {
  width: 2.5px;
  background: currentColor;
  border-radius: 1px;
}
.tb-mobile__bar:nth-child(1) {
  height: 40%;
}
.tb-mobile__bar:nth-child(2) {
  height: 60%;
}
.tb-mobile__bar:nth-child(3) {
  height: 80%;
}
.tb-mobile__bar:nth-child(4) {
  height: 100%;
}
.tb-mobile__battery {
  position: relative;
  width: 18px;
  height: 9px;
  padding: 1px;
  border: 1px solid currentColor;
  border-radius: 2.5px;
}
.tb-mobile__battery::after {
  content: "";
  position: absolute;
  right: -2.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}
.tb-mobile__battery-fill {
  width: 80%;
  height: 100%;
  background: currentColor;
  border-radius: 1px;
}
.tb-mobile__device::before, .tb-mobile__device::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: var(--tb-button);
}
.tb-mobile__device::before {
  left: -2px;
  top: 24%;
  height: 13%;
}
.tb-mobile__device::after {
  right: -2px;
  top: 30%;
  height: 9%;
}
.tb-app-notifications > .xh-panel {
  border: var(--xh-border-solid);
  margin: var(--xh-pad-double-px);
  width: 325px;
  height: 325px;
}
.tb-app-notifications > .xh-panel p {
  margin: var(--xh-pad-px);
}
.tb-app-notifications > .xh-panel button {
  padding: var(--xh-pad-px);
}
.tbox-buttons {
  overflow-y: auto;
  width: 700px;
}
.tbox-buttons__panel {
  border: var(--xh-border-solid);
  flex: none !important;
  margin-bottom: var(--xh-pad-px);
}
.tbox-buttons__panel__row {
  padding: var(--xh-pad-px);
}
.tbox-buttons__panel__row > .xh-button:not(:last-child) {
  margin-right: var(--xh-tbar-item-pad-px);
}
.tbox-buttons .xh-panel-header__items .xh-input {
  color: var(--xh-title-text-color);
  margin: 0 var(--xh-tbar-item-pad-px);
}
.tb-clock-container {
  padding: var(--xh-pad-px);
  flex-wrap: wrap;
}
.tb-clock-container .tb-clock-card {
  width: 120px;
  border: var(--xh-border-solid);
  padding: var(--xh-pad-half-px);
  background: var(--xh-bg-alt);
  margin: var(--xh-pad-half-px) auto;
  align-items: center;
}
.tb-clock-container .tb-clock-card > div:first-child {
  font-size: var(--xh-font-size-large-px);
  color: var(--xh-orange);
  margin-bottom: var(--xh-pad-half-px);
}
.xh-custom-panel p {
  color: var(--xh-orange);
  margin: var(--xh-pad-px);
}
.xh-file-chooser__empty-hint {
  margin-top: var(--xh-pad-px);
  font-size: var(--xh-font-size-small-px);
  color: var(--xh-text-color-muted);
}
.xh-file-chooser__file-name {
  font-weight: 500;
}

.xh-file-chooser__file-hint {
  font-size: var(--xh-font-size-small-px);
  color: var(--xh-text-color-muted);
}
.xh-file-chooser__target--clickable {
  cursor: pointer;
}

.xh-file-chooser__target--disabled {
  opacity: 0.5;
}

.xh-file-chooser__target--side-left {
  border-right: var(--xh-border-solid);
}

.xh-file-chooser__target--side-top {
  border-bottom: var(--xh-border-solid);
}

.xh-file-chooser__target-count {
  margin-top: var(--xh-pad-px);
  font-size: var(--xh-font-size-small-px);
  color: var(--xh-text-color-muted);
}
.tb-filechooser-card {
  display: flex;
  flex-direction: column;
}
.tb-icons-panel {
  width: 100%;
  height: 100%;
}

.tb-icons-gallery {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--xh-pad-px);
  padding: var(--xh-pad-px);
  align-content: start;
}

.tb-icons-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--xh-pad-half-px);
  padding: var(--xh-pad-px) var(--xh-pad-half-px);
  border: var(--xh-border-solid);
  border-radius: 6px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.tb-icons-tile:hover {
  background-color: var(--xh-bg-alt);
  border-color: var(--xh-intent-primary);
}
.tb-icons-tile:active {
  transform: scale(0.96);
}
.tb-icons-tile__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}
.tb-icons-tile__name {
  font-family: var(--xh-font-family-mono);
  font-size: var(--xh-font-size-small-px);
  color: var(--xh-text-color-muted);
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.tb-jsx-panel {
  width: 100%;
  height: 100%;
}

.tb-jsx-example {
  min-width: 0;
  border: var(--xh-border-solid);
}
.tb-markdown-panel {
  width: 100%;
  height: 100%;
}
.tb-markdown-panel .xh-panel {
  border: var(--xh-border-solid);
  border-radius: 6px;
  overflow: hidden;
}

/**
 * Example opt-in styles for the Hoist `markdown` component. The component renders standard,
 * unstyled HTML by default - apps can wrap it in a container with a custom class like this
 * one to style headings, tables, code blocks, links, and other elements as desired.
 * Uses Hoist theme variables (e.g. --xh-border-color, --xh-bg-alt) for dark/light support.
 */
.tb-markdown-panel--styled h1 {
  font-size: 1.8em;
  border-bottom: 2px solid var(--xh-orange);
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 20px;
}
.tb-markdown-panel--styled h2 {
  font-size: 1.4em;
  border-bottom: 1px solid var(--xh-border-color);
  padding-bottom: 6px;
  margin-top: 32px;
  margin-bottom: 16px;
}
.tb-markdown-panel--styled h3 {
  font-size: 1.15em;
  margin-top: 24px;
  margin-bottom: 12px;
}
.tb-markdown-panel--styled h4 {
  font-size: 1.05em;
  margin-top: 20px;
  margin-bottom: 8px;
}
.tb-markdown-panel--styled pre {
  background-color: var(--xh-bg-alt);
  border: 1px solid var(--xh-border-color);
  border-radius: 6px;
  padding: 14px 18px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: 16px 0;
}
.tb-markdown-panel--styled code {
  font-family: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
  font-size: 0.88em;
}
.tb-markdown-panel--styled :not(pre) > code {
  background-color: var(--xh-bg-alt);
  border: 1px solid var(--xh-border-color);
  border-radius: 3px;
  padding: 1px 6px;
}
.tb-markdown-panel--styled table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 0.95em;
}
.tb-markdown-panel--styled th,
.tb-markdown-panel--styled td {
  border: 1px solid var(--xh-border-color);
  padding: 8px 12px;
  text-align: left;
}
.tb-markdown-panel--styled th {
  background-color: var(--xh-bg-alt);
  font-weight: 600;
}
.tb-markdown-panel--styled tr:hover td {
  background-color: var(--xh-bg-highlight);
}
.tb-markdown-panel--styled a {
  color: var(--xh-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.tb-markdown-panel--styled a:hover {
  border-bottom-color: var(--xh-blue);
}
.tb-markdown-panel--styled ul,
.tb-markdown-panel--styled ol {
  padding-left: 24px;
  margin: 12px 0;
}
.tb-markdown-panel--styled li {
  margin: 6px 0;
  line-height: 1.6;
}
.tb-markdown-panel--styled li > ul,
.tb-markdown-panel--styled li > ol {
  margin: 4px 0;
}
.tb-markdown-panel--styled blockquote {
  border-left: 4px solid var(--xh-orange);
  margin: 16px 0;
  padding: 8px 16px;
  background-color: var(--xh-bg-alt);
  border-radius: 0 6px 6px 0;
}
.tb-markdown-panel--styled blockquote p:first-child {
  margin-top: 0;
}
.tb-markdown-panel--styled blockquote p:last-child {
  margin-bottom: 0;
}
.tb-markdown-panel--styled hr {
  border: none;
  border-top: 1px solid var(--xh-border-color);
  margin: 32px 0;
}
.tb-markdown-panel--styled p {
  line-height: 1.7;
  margin: 14px 0;
}
.tb-markdown-panel--styled img {
  max-width: 100%;
  border-radius: 4px;
}
.tb-markdown-panel--styled strong {
  font-weight: 600;
}
.tb-pinpad-container__secrets {
  padding: var(--xh-pad-px);
}
.tbox-popups {
  border: var(--xh-border-solid);
  background-color: var(--xh-panel-bg);
}
.tbox-popups table {
  width: 700px;
  height: 270px;
  text-align: left;
}
.tbox-popups table th {
  width: 20%;
  padding: var(--xh-pad-px);
}
.tbox-popups table th .tbox-popups__button {
  width: 100%;
}
.tbox-popups table td {
  width: 40%;
  padding: var(--xh-pad-px);
  text-align: center;
}
.tbox-popups table td .tbox-popups__button {
  width: 100%;
}
.tbox-formats-tab__panel table {
  width: 100%;
}
.tbox-formats-tab__panel table tr {
  background-color: var(--xh-grid-bg);
}
.tbox-formats-tab__panel table tr:nth-child(odd) td {
  background-color: var(--xh-grid-bg-odd);
}
.tbox-formats-tab__panel table td {
  padding: 5px 10px;
  text-align: right;
}
.tbox-formats-tab__panel table td.outputColumn {
  white-space: nowrap;
}
.tbox-formats-tab__custom-label {
  color: var(--xh-text-color-muted);
  white-space: nowrap;
}
.tbox-formats-tab__results {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.tbox-formats-color {
  width: 28px;
  height: 22px;
  padding: 0;
  border: var(--xh-border-solid);
  border-radius: 3px;
  background: none;
  cursor: pointer;
}
.tb-rel-ts {
  gap: var(--xh-pad-px);
  padding: 40px 0;
}
.tb-rel-ts__value {
  font-size: 2.4em;
  font-weight: 600;
  text-align: center;
}
.tb-rel-ts__abs {
  color: var(--xh-text-color-muted);
  font-size: 1.1em;
  font-family: var(--xh-font-family-mono);
}

.tb-rel-ts__presets {
  width: 100%;
}
.tb-rel-ts__presets .xh-button {
  flex: 1;
}
.tb-panel-text-reader {
  overflow-y: scroll;
  padding: var(--xh-pad-px);
}