html {
  overflow-x: scroll;
}

body {
  /*  --font-body: sans-serif;*/
  /*--font-body: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";*/

    --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  /*  --font-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;*/
    --font-mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace !important;

  --white: #fff;
  --black: #000;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  /*--gray-100: #f0f1f3;*/
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  --red-500: #ec096f;

  --blue-500: #00b0f0;
}

html {
  box-sizing: border-box;
  height: 100%;
/*  font-size: 100%;*/
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  height: 100%;
  display: grid;
  align-items: center;
  margin: 0;
  background: #fff;
  font-family: sans-serif;
  color: var(--gray-900);
}

.force_desktop .bp_0 {
  display: none;
}
html:not(.force_desktop) .bp_1 {
  display: none;
}

.page-scale {
  padding: 22.5px 22.5px 22.5px 10px; /*44px*/
}

.page-preview {
  padding: 0 22.5px 22.5px;
}
img.fa_icon {
  height: 1.15em;
/*  aspect-ratio: 1;*/
/*  object-fit: contain;*/
  vertical-align: -0.26em;
}
/*button {
  border: 1px solid !important;
}*/
img.fa_lg {
  height: 19px;
/*  font-size: 1.5em;*/
/*  vertical-align: -0.26em;*/
}
.scale_items {
  width: auto;
  margin: 0.9rem 0;
  border: none;
  border-collapse: collapse;
  background: #fff;
}

.scale_items td {
  white-space: nowrap;
  padding: 0.5rem 0.33rem;
  vertical-align: baseline;
}

/*.scale-container {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  margin: 0.9rem 0;
  white-space: nowrap;
}*/

.scale_item[data-order='base'] {
  background: var(--gray-100);
}

/*.scale-container > div {
  padding: 0.5rem 0.33rem;
}*/

.panel_text_mono {
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: right;
  color: var(--gray-600);
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1;
}

/*.panel_text_mono a {
  color: var(--gray-600);
}*/

.scale_item_units {
  min-width: 9.5ch;
}

.tabs_toggle_size {
  display: grid;
  grid-auto-flow: column;
  overflow: hidden;
/*  background: var(--gray-100);*/
  /*border: 1px solid var(--gray-200);
  border-radius: 6px;*/
  text-align: center;
/*  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);*/
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tabs_toggle_size a {
  padding: 0.4em 0.3em;
/*  background: var(--gray-200);*/
  border-radius: 5px;
  text-decoration: none;
  color: var(--gray-600);
  user-select: none;
}

.tabs_toggle_size a.current {
  background: var(--gray-200);
  pointer-events: none;
}

.scale_copy_text {
  text-decoration: none;
  border-bottom: 1px dashed var(--gray-300);
  color: var(--gray-600);
}

.tooltip {
  position: relative;
}

.tooltip:after, .js_copy_success {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 700;
  width: max-content;
  overflow: hidden;
  white-space: wrap;
  padding: 0.35em 0.65em;
  border: none;
  border-radius: 6px;
  background: var(--gray-700);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.js_copy_success {
  font-size: 13px;
}

.tooltip:after {
  content: attr(aria-label) attr(aria-description);
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms;
}

.tooltip:hover:after {
  opacity: 1;
  transition: opacity 300ms 800ms;
}

.tooltip_fast:hover:after {
  transition-delay: 0ms;
}

.scale_item_text_container {
  position: relative;
}

.scale_item[data-name=''] .scale_item_text, .scale_item[data-status='100'] .scale_item_text {
  color: var(--gray-400);
}

.scale_item_text {
  margin: unset !important;
  line-height: 1 !important;
/*  transition: color 1600ms cubic-bezier(0.175, 0.885, 0.000, 1.650);*/
  transition: font-size 100ms;
}

/* WAS '_updated', BUT '_new' MIGHT MAKE MORE SENSE */
.scale_item_new .scale_item_text {
  color: var(--blue-500) !important;
  transition: color 500ms;
}

/*.scale_item_new .scale_item_text {
  transition: font-size 300ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}*/

.scale_item_removed .scale_item_text {
  color: var(--red-500) !important;
  transform: scale(0);
/*  font-size: 0.75em !important;*/
/*  transition: font-size 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);*/
  transition: transform 500ms cubic-bezier(0.595, -0.175, 0.735, 0.045);
}

.scale_item_text {
/*  transition: opacity 0.1s, color 0.1s;*/
}

/*.scale-container:hover .scale_item_text {
  opacity: 0.35;
}*/

.scale_item:hover .scale_item_actions {
/*  opacity: 1;*/
  display: flex;
}

.scale_item:hover .scale_item_text {
  color: var(--gray-300);
}

.scale_item_actions {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
/*  display: flex;*/
  gap: 15px;
  align-items: center;
  padding-left: 40px;
  padding-right: 100px;
/*  background: rgba(229, 231, 235, 0.85);*/
/*  background: linear-gradient(to right, rgba(229, 231, 235, 0.95) 80%, rgba(229, 231, 235, 0));*/
/*  background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0));*/
/*  background: rgba(255, 255, 255, 0.5);*/
/*  opacity: 0;*/
/*  transition: opacity 0.1s;*/
  cursor: text;
}

.btn_icon {
  display: inline-block;
  box-sizing: content-box;
  padding: 7px;
  height: 18px;
  min-width: 18px;
  background: var(--gray-700);
  border: none;
  /* border-radius: 100%;*/
  border-radius: 6px;
  outline: 3px solid rgba(255, 255, 255, 0.55);
  color: var(--gray-50);
  font-family: var(--font-sans);
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  line-height: 1;
/*  line-height: 1.25em;*/
  transform: translateY(-35%);
  box-shadow: 0 3px 15px -1px rgba(0, 0, 0, 0.4);
  transition: transform 100ms;
}
.btn_icon img.fa_icon {
  height: 18px;
}

.btn_icon:hover {
  transform: translateY(-35%) scale(1.15);
}

.btn_icon.current, .btn_icon:hover {
  /*background: var(--gray-200);
  border-color: var(--gray-300);*/
}

.scale_item .btn_icon {
  display: none;
}

.scale_item:not([data-status="100"]):not([data-name=""]) .btn_add_item_below {
  display: block;
}

.scale_item[data-name=""] .btn_remove_item {
  display: block;
}

.bg_red_500 {
  background: var(--red-500);
}




.hidden {
  display: none;
}