@prostgles/prostgles 2.3.6-dev.1786548258

package/client/static/util.css

@@ -0,0 +1,2024 @@
+:root {
+  --gray-50: #f9fafb;
+  --gray-100: #f4f5f7;
+  --gray-200: #e5e7eb;
+  --gray-300: #d2d6dc;
+  --gray-400: #9fa6b2;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #40454e;
+  --gray-800: #36393e;
+  --gray-900: #161e2e;
+
+  --red-50: #fdf2f2;
+  --red-100: #fde8e8;
+  --red-200: #fbd5d5;
+  --red-300: #f8b4b4;
+  --red-400: #f98080;
+  --red-500: #f05252;
+  --red-600: #e02424;
+  --red-700: #c81e1e;
+  --red-800: #9b1c1c;
+  --red-900: #771d1d;
+  --red-1000: #360202;
+
+  --yellow-50: #fdfdea;
+  --yellow-100: #fdf6b2;
+  --yellow-200: #fce96a;
+  --yellow-300: #faca15;
+  --yellow-400: #e3a008;
+  --yellow-500: #c27803;
+  --yellow-600: #9f580a;
+  --yellow-700: #8e4b10;
+  --yellow-800: #723b13;
+  --yellow-900: #633112;
+
+  --green-50: #f3faf7;
+  --green-100: #def7ec;
+  --green-200: #bcf0da;
+  --green-300: #84e1bc;
+  --green-400: #31c48d;
+  --green-500: #0e9f6e;
+  --green-600: #057a55;
+  --green-700: #046c4e;
+  --green-800: #03543f;
+  --green-900: #014737;
+
+  --teal-400: #16bdca;
+
+  --blue-50: #ebf5ff;
+  --blue-100: #e1effe;
+  --blue-200: #c3ddfd;
+  --blue-300: #a4cafe;
+  --blue-400: #76a9fa;
+  --blue-500: #3f83f8;
+  --blue-600: #1c64f2;
+  --blue-700: #1a56db;
+  --blue-800: #1e429f;
+  --blue-900: #233876;
+
+  --indigo-50: #f0f5ff;
+  --indigo-100: #e5edff;
+  --indigo-200: #cddbfe;
+  --indigo-300: #b4c6fc;
+  --indigo-400: #8da2fb;
+  --indigo-500: #6875f5;
+  --indigo-600: #5850ec;
+  --indigo-700: #5145cd;
+  --indigo-800: #42389d;
+  --indigo-900: #362f78;
+
+  --active: #00a1ff;
+  --action: var(--blue-500);
+  --active-hover: #51bfff;
+
+  --danger: var(--red-700);
+
+  --focus-color: rgb(0, 183, 255);
+
+  --li-hover-bg: #f3f3f3; /* #e5e7eb69; */
+  --li-focus-bg: #e5e7eb;
+
+  --color-uuid: rgb(87, 8, 63);
+  --color-number: rgb(0, 110, 0);
+  --color-text: #810909;
+  --color-boolean: #0000ff;
+  --color-date: rgb(25 91 239);
+  --color-geo: #0063bd;
+  --color-json: #0451a5;
+  --color-ticks-0: black;
+  --color-ticks-1: rgb(87, 87, 87);
+  --color-timechart-bg: white;
+
+  --text-warning: var(--yellow-700);
+  --text-danger: var(--red-700);
+  --text-default: var(--gray-600);
+  --text-action: var(--active);
+
+  --text-green: #057a55;
+
+  --b-warning: var(--yellow-400);
+  --b-green: var(--green-500);
+  --b-light-green: var(--green-300);
+  --b-danger: var(--red-700);
+  --b-default: var(--gray-200);
+  --b-action: var(--active);
+
+  --bg-warning: var(--yellow-100);
+  --bg-danger: var(--red-100);
+  --bg-default: var(--gray-100);
+  --bg-action: #00a2ff52;
+  --bg-popup: white;
+  --bg-popup-content: white;
+
+  --shadow0: rgb(32 33 36 / 28%);
+  --shadow1: rgba(0, 0, 0, 0.1);
+  --shadow2: rgba(0, 0, 0, 0.06);
+
+  --text-0: var(--gray-900);
+  --text-0p5: var(--gray-800);
+  --text-0p75: var(--gray-700);
+  --text-1: var(--gray-600);
+  --text-1p5: var(--gray-500);
+  --text-2: var(--gray-400);
+  --text-3: var(--gray-300);
+
+  --bg-color-0: white;
+  --bg-color-1: var(--gray-50);
+  --bg-color-2: var(--gray-100);
+  --bg-color-3: var(--gray-200);
+  --bg-color-4: var(--gray-300);
+
+  --b-color: var(--gray-300);
+  --b-color-0: var(--gray-200);
+  --b-color-1: var(--gray-100);
+  --b-color-2: var(--gray-50);
+
+  --bg-li-selected: var(--blue-100);
+  --formfield-bg-color: var(--bg-color-0);
+
+  --green: #009264;
+  --faded-green: #00c46e33;
+
+  --blue: var(--blue-600);
+  --faded-blue: #00b2ff33;
+
+  --red: #dc0000;
+  --faded-red: var(--red-100);
+
+  --yellow: #723b13;
+  --faded-yellow: #fff2a8;
+
+  --gray: var(--gray-600);
+  --faded-gray: var(--gray-100);
+}
+
+:root.dark-theme {
+  --li-hover-bg: #414141; /* #55555582; */
+  --li-focus-bg: #5b5a5a;
+  --color-uuid: rgb(216, 99, 181);
+  --color-number: rgb(52, 192, 52);
+  --color-text: #fb9b9b;
+  --color-boolean: #a5a5ff;
+  --color-date: rgb(112 156 250);
+  --color-geo: #1d8ffa;
+  --color-json: #368ce8;
+  --color-ticks-0: rgb(187, 187, 187);
+  --color-ticks-1: white;
+  --color-timechart-bg: rgb(39, 39, 39);
+
+  --text-warning: #bd9500;
+  --text-danger: #eb5d5d;
+  --text-default: #c9c9c9;
+  --text-action: #00a2ff;
+  --text-green: #057a55;
+
+  --b-warning: var(--yellow-300);
+  --b-green: var(--green-500);
+  --b-light-green: var(--green-300);
+  --b-danger: var(--red-500);
+  /* var(--gray-500); */
+  --b-default: #4d4d4d;
+  --b-action: #00a2ffb0;
+
+  --bg-warning: #ae651238;
+  --bg-danger: var(--red-600);
+  --bg-default: var(--gray-600);
+  --bg-action: #0071b3;
+  --bg-popup: #2d2d2d;
+  /* --bg-popup-content: #272727;  #3b3b3b; */
+  --bg-popup-content: #2d2d2d;
+
+  /* 
+  --shadow0: rgba(77, 77, 78, 0.733);
+  --shadow1: rgba(206, 200, 200, 0.658);
+  --shadow2: rgba(248, 248, 248, 0.822); */
+
+  --text-0: var(--gray-100);
+  --text-0p5: var(--gray-300);
+  --text-0p75: var(--gray-400);
+  --text-1: #b4b4b4;
+  --text-1p5: var(--gray-500);
+  --text-2: var(--gray-400);
+  --text-3: var(--gray-700);
+
+  --bg-color-0: #2c2c2c; /* rgb(69, 69, 69); */
+  --bg-color-1: #212121; /* rgb(55, 55, 55); */
+  --bg-color-2: rgb(36, 36, 36);
+  --bg-color-3: #1a1919;
+  --bg-color-4: black;
+  --b-color: var(--gray-600);
+  --b-color-0: var(--gray-600);
+  --b-color-1: var(--gray-800);
+  --b-color-2: var(--gray-900);
+
+  --bg-li-selected: #2465d463;
+  --formfield-bg-color: var(--bg-color-2);
+
+  --green: #08c489;
+  --faded-green: #00b96821;
+
+  --blue: #31c1ff;
+  --faded-blue: #00b2ff33;
+
+  --red: #e35d5d;
+  --faded-red: #fd343429;
+
+  --yellow: #dabb8c;
+  --faded-yellow: #e4ce0538;
+
+  --gray: #bfbfbf;
+  --faded-gray: #ffffff17;
+}
+
+.formfield-bg-color {
+  background-color: var(--formfield-bg-color) !important;
+}
+
+.bg-faded-red {
+  background-color: var(--faded-red);
+}
+
+.text-0 {
+  color: var(--text-0);
+}
+.text-0p5 {
+  color: var(--text-0p5);
+}
+.text-0p75 {
+  color: var(--text-0p75);
+}
+.text-1 {
+  color: var(--text-1);
+}
+.text-1p5 {
+  color: var(--text-1p5);
+}
+.text-2 {
+  color: var(--text-2);
+}
+.text-3 {
+  color: var(--text-3);
+}
+
+.text-warning {
+  color: var(--text-warning);
+}
+.text-danger {
+  color: var(--text-danger);
+}
+.text-default {
+  color: var(--text-default);
+}
+.text-action {
+  color: var(--text-action);
+}
+.text-green {
+  color: var(--text-green);
+}
+
+.b-warning {
+  border-color: var(--b-warning);
+}
+.b-danger {
+  border-color: var(--b-danger);
+}
+.b-default {
+  border-color: var(--b-default);
+}
+.b-action {
+  border-color: var(--b-action);
+}
+
+.b-color {
+  border-color: var(--b-color);
+}
+.b-color-0 {
+  border-color: var(--b-color-0);
+}
+.b-color-1 {
+  border-color: var(--b-color-1);
+}
+.b-color-2 {
+  border-color: var(--b-color-2);
+}
+
+.bg-warning {
+  background-color: var(--bg-warning);
+}
+.bg-danger {
+  background-color: var(--bg-danger);
+}
+.bg-default {
+  background-color: var(--bg-default);
+}
+.bg-action {
+  background-color: var(--bg-action);
+}
+.bg-popup {
+  background-color: var(--bg-popup);
+}
+.bg-popup-content {
+  background-color: var(--bg-popup-content);
+}
+
+.shadow-sm {
+  box-shadow: 0 1px 2px 0 var(--shadow2);
+}
+
+.shadow {
+  box-shadow:
+    0 1px 3px 0 var(--shadow1),
+    0 1px 2px 0 var(--shadow2);
+}
+
+.drop-shadow {
+  filter: drop-shadow(0 1px 2px var(--shadow1))
+    drop-shadow(0 1px 3px var(--shadow2));
+}
+
+.shadow-l {
+  box-shadow: 0 1px 6px 0 var(--shadow0);
+}
+.shadow-xl {
+  box-shadow:
+    0 20px 25px -5px var(--shadow1),
+    0 10px 10px -5px var(--shadow2);
+}
+
+.gap-0 {
+  gap: unset;
+}
+.gap-p25 {
+  gap: 0.25em;
+}
+.gap-p5 {
+  gap: 0.5em;
+}
+.gap-p75 {
+  gap: 0.75em;
+}
+.gap-1 {
+  gap: 1em;
+}
+.gap-1p5 {
+  gap: 1.5em;
+}
+.gap-2 {
+  gap: 2em;
+}
+
+.py-p75 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.leading-5 {
+  line-height: 1.25rem;
+}
+
+.py-p25 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-p5 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.py-p75 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.py-1 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.py-2 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.py-3 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.px-p25 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.px-p5 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.px-p75 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.px-1 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.px-1p5 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.px-2 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.p-0 {
+  padding: 0;
+}
+.p-1 {
+  padding: 1em;
+}
+.p-2 {
+  padding: 2em;
+}
+.p-3 {
+  padding: 3em;
+}
+.p-4 {
+  padding: 4em;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+.pb-p25 {
+  padding-bottom: 0.25em;
+}
+.pb-p5 {
+  padding-bottom: 0.5em;
+}
+.pb-p75 {
+  padding-bottom: 0.75em;
+}
+.pb-1 {
+  padding-bottom: 1em;
+}
+.pb-2 {
+  padding-bottom: 2em;
+}
+.pb-3 {
+  padding-bottom: 3em;
+}
+.pb-4 {
+  padding-bottom: 4em;
+}
+
+.p-p25 {
+  padding: 0.25em;
+}
+.p-p5 {
+  padding: 0.5em;
+}
+.p-p75 {
+  padding: 0.75em;
+}
+.pr-2 {
+  padding-right: 2em;
+}
+
+.m-auto {
+  margin: auto;
+}
+.m-0 {
+  margin: 0;
+}
+.m-1 {
+  margin: 1em;
+}
+.m-2 {
+  margin: 2em;
+}
+.m-3 {
+  margin: 3em;
+}
+.m-4 {
+  margin: 4em;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.my-p25 {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+.my-p5 {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+.my-1 {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.my-2 {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+.mx-p25 {
+  margin-left: 0.25em;
+  margin-right: 0.25em;
+}
+.mx-p5 {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+.mx-1 {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mx-2 {
+  margin-left: 2em;
+  margin-right: 2em;
+}
+
+.px-p25 {
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+}
+.px-p5 {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.px-1 {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.px-2 {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+
+.py-p25 {
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+}
+.py-p5 {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+.py-1 {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+.py-2 {
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+.m-p25 {
+  margin: 0.25em;
+}
+.m-p5 {
+  margin: 0.5em;
+}
+.m-p75 {
+  margin: 0.75em;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-p25 {
+  margin-top: 0.25em;
+}
+
+.mt-p5 {
+  margin-top: 0.5em;
+}
+
+.mt-1 {
+  margin-top: 1em;
+}
+.mt-2 {
+  margin-top: 2em;
+}
+.mt-3 {
+  margin-top: 3em;
+}
+.mt-4 {
+  margin-top: 4em;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+.ml-0 {
+  margin-left: 0;
+}
+
+.ml-1 {
+  margin-left: 1em;
+}
+.ml-1p5 {
+  margin-left: 1.5em;
+}
+.ml-2 {
+  margin-left: 2em;
+}
+.ml-3 {
+  margin-left: 3em;
+}
+.ml-4 {
+  margin-left: 4em;
+}
+
+.ml-p25 {
+  margin-left: 0.25em;
+}
+.ml-p5 {
+  margin-left: 0.5em;
+}
+
+.mr-p25 {
+  margin-right: 0.25em;
+}
+.mr-p5 {
+  margin-right: 0.5em;
+}
+.mr-1 {
+  margin-right: 1em;
+}
+.mr-2 {
+  margin-right: 2em;
+}
+.mr-3 {
+  margin-right: 3em;
+}
+.mr-auto {
+  margin-right: auto;
+}
+
+.mb-p25 {
+  margin-bottom: 0.25em;
+}
+.mb-p5 {
+  margin-bottom: 0.5em;
+}
+.mb-0 {
+  margin-bottom: 0;
+}
+.mb-1 {
+  margin-bottom: 1em;
+}
+.mb-2 {
+  margin-bottom: 2em;
+}
+.mb-3 {
+  margin-bottom: 3em;
+}
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.flex-col,
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row-wrap {
+  display: flex;
+  flex-flow: row wrap;
+}
+.flex-col-wrap {
+  display: flex;
+  flex-flow: column wrap;
+}
+
+.f-0 {
+  flex: none;
+}
+.fs-1 {
+  flex-shrink: 1;
+}
+
+.f-1 {
+  flex: 1;
+  min-width: 0;
+}
+
+.fs-1 {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.ai-base {
+  align-items: baseline;
+}
+.ai-center {
+  align-items: safe center;
+}
+.ai-start {
+  align-items: start;
+}
+.ai-stretch {
+  align-items: stretch;
+}
+
+.ai-end {
+  align-items: end;
+}
+.ai-flex-start {
+  align-items: flex-start;
+}
+.ai-flex-end {
+  align-items: flex-end;
+}
+
+.as-center {
+  align-self: center;
+}
+
+.as-stretch {
+  align-self: stretch;
+}
+
+.js-center {
+  justify-self: center;
+}
+.as-start {
+  align-self: start;
+}
+.as-end {
+  align-self: end;
+}
+.as-flex-start {
+  align-self: flex-start;
+}
+.as-flex-end {
+  align-self: flex-end;
+}
+
+.round {
+  border-radius: 1000%;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+:root {
+  --rounded: 0.5em;
+}
+
+.rounded {
+  border-radius: var(--rounded);
+}
+
+.rounded-r {
+  border-top-right-radius: var(--rounded);
+  border-bottom-right-radius: var(--rounded);
+}
+.rounded-l {
+  border-top-left-radius: var(--rounded);
+  border-bottom-left-radius: var(--rounded);
+}
+.rounded-t {
+  border-top-left-radius: var(--rounded);
+  border-top-right-radius: var(--rounded);
+}
+.rounded-b {
+  border-bottom-left-radius: var(--rounded);
+  border-bottom-right-radius: var(--rounded);
+}
+
+.bg-white {
+  background-color: white;
+}
+
+.br {
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+.bb {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.bb-2 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+}
+.bb-3 {
+  border-bottom-width: 3px;
+  border-bottom-style: solid;
+}
+.bb-4 {
+  border-bottom-width: 4px;
+  border-bottom-style: solid;
+}
+.bl {
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+.bt {
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+
+.divider-h {
+  background-color: var(--gray-300);
+  width: 100%;
+  height: 1px;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: var(--bg-color-0);
+  border-color: var(--b-default);
+  border-width: 1px;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+textarea:focus {
+  outline: none;
+}
+.not-allowed {
+  cursor: not-allowed;
+}
+.pointer {
+  cursor: pointer;
+}
+.cursor-default {
+  cursor: default;
+}
+.rounded-full {
+  border-radius: 2000%;
+}
+
+.w-full {
+  width: 100%;
+}
+.min-w-full {
+  min-width: 100%;
+}
+.h-full {
+  height: 100%;
+}
+.w-fit {
+  width: fit-content;
+}
+.h-fit {
+  height: fit-content;
+}
+
+.fit {
+  width: fit-content;
+  height: fit-content;
+}
+
+.max-w-fit {
+  max-width: fit-content;
+}
+.max-h-fit {
+  max-height: fit-content;
+}
+.max-h-500 {
+  max-height: 500px;
+}
+.max-s-fit {
+  max-height: fit-content;
+  max-width: fit-content;
+}
+.max-w-full {
+  max-width: 100%;
+}
+.max-h-full {
+  max-height: 100%;
+}
+.max-s-full {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.max-w {
+  max-width: 900px;
+}
+.w-2 {
+  width: 2em;
+}
+.h-2 {
+  height: 2em;
+}
+.w-1p25 {
+  width: 1.25em;
+}
+.h-1p25 {
+  height: 1.25em;
+}
+.h-p125 {
+  height: 0.125em;
+}
+.flex {
+  display: flex;
+}
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.fixed {
+  position: fixed;
+}
+.bg-transparent {
+  background-color: transparent;
+}
+.bg-inherit {
+  background-color: inherit;
+}
+
+.inset-0,
+.inset-y-0 {
+  top: 0;
+  bottom: 0;
+}
+.inset-0 {
+  right: 0;
+  left: 0;
+}
+.inset-x-0 {
+  right: 0;
+  left: 0;
+}
+
+.top-0 {
+  top: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.left-0 {
+  left: 0;
+}
+
+.text-white {
+  color: white;
+}
+.border-2 {
+  border-width: 2px;
+  border-style: solid;
+}
+
+.b-unset {
+  border: unset;
+}
+
+.b-0 {
+  border-width: 0;
+}
+.b-2 {
+  border-width: 2px;
+  border-style: solid;
+}
+
+.b-white {
+  border-color: white;
+}
+.b-black {
+  border-color: black;
+}
+
+.b-action,
+.b-active {
+  border-color: var(--blue-500);
+}
+
+.bg-black {
+  background-color: black;
+}
+
+.bg-terminal {
+  background-color: var(--gray-900);
+}
+
+.border-indigo-600 {
+  border-color: #5850ec;
+}
+
+.ta-start {
+  text-align: start;
+}
+.ta-end {
+  text-align: end;
+}
+
+.ta-left,
+.text-left {
+  text-align: left;
+}
+
+.ta-center,
+.text-center {
+  text-align: center;
+}
+
+.ta-right,
+.text-right {
+  text-align: right;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.b-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.b,
+.b-1 {
+  border-style: solid;
+  border-width: 1px;
+}
+.b-2 {
+  border-style: solid;
+  border-width: 2px;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.transparent {
+  opacity: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.text-black {
+  color: black;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.not-allowed {
+  cursor: not-allowed;
+}
+
+.jc-center {
+  justify-content: safe center;
+}
+
+.jc-between {
+  justify-content: space-between;
+}
+.jc-around {
+  justify-content: space-around;
+}
+
+.jc-fstart {
+  justify-content: flex-start;
+}
+.jc-start {
+  justify-content: start;
+}
+.ji-start {
+  justify-items: start;
+}
+.jc-fend {
+  justify-content: flex-end;
+}
+.jc-end {
+  justify-content: end;
+}
+.ji-end {
+  justify-items: end;
+}
+
+.font-12 {
+  font-size: 12px;
+}
+.font-14 {
+  font-size: 14px;
+}
+.font-16 {
+  font-size: 16px;
+}
+.font-18 {
+  font-size: 18px;
+}
+.font-20 {
+  font-size: 20px;
+}
+.font-22 {
+  font-size: 22px;
+}
+.font-24 {
+  font-size: 24px;
+}
+.font-26 {
+  font-size: 26px;
+}
+.font-28 {
+  font-size: 28px;
+}
+.font-30 {
+  font-size: 30px;
+}
+
+.no-decor {
+  text-decoration: none;
+}
+
+.o-auto {
+  overflow: auto;
+}
+
+.o-auto::-webkit-scrollbar {
+  opacity: 0.5;
+}
+.o-auto:hover ::-webkit-scrollbar {
+  opacity: 0.5;
+}
+
+.o-unset {
+  overflow: unset;
+}
+
+.ox-auto {
+  overflow-x: auto;
+}
+.oy-auto {
+  overflow-y: auto;
+}
+.o-hidden {
+  overflow: hidden;
+}
+.o-visible {
+  overflow: visible;
+}
+.ox-hidden {
+  overflow-x: hidden;
+}
+.oy-hidden {
+  overflow-y: hidden;
+}
+
+.to-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.min-s-0 {
+  min-height: 0;
+  min-width: 0;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+.min-w-0 {
+  min-width: 0;
+}
+.min-w-300 {
+  min-width: 300px;
+}
+.min-w-0 {
+  min-width: 0;
+}
+.min-h-fit {
+  min-height: fit-content;
+}
+.min-w-fit {
+  min-width: fit-content;
+}
+
+.max-h-100v {
+  max-height: 100vh;
+}
+.max-w-100v {
+  max-width: 100vw;
+}
+
+.min-w-600 {
+  min-width: min(600px, 100vw);
+}
+
+.max-w-700 {
+  max-width: 700px;
+}
+.max-w-800 {
+  max-width: 800px;
+}
+.max-w-1200 {
+  max-width: 1200px;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.ws-break {
+  white-space: break-spaces;
+}
+.ws-pre {
+  white-space: pre;
+}
+.ws-pre-line {
+  white-space: pre-line;
+}
+.ws-pre-wrap {
+  white-space: pre-wrap;
+}
+.ws-nowrap {
+  white-space: nowrap;
+}
+.ws-wrap {
+  white-space: normal;
+}
+
+.no-pointer-events {
+  touch-action: none;
+  pointer-events: none;
+}
+
+.no-interaction {
+  opacity: 0.5;
+  touch-action: none;
+  pointer-events: none;
+
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+.no-interaction.no-fade {
+  opacity: 1;
+}
+
+.no-scroll-bar {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+.no-scroll-bar::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+input.input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  width: 100%;
+  flex: 1 1;
+  box-sizing: border-box;
+  min-width: 150px;
+}
+
+select {
+  display: block;
+  background: #fff;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  margin: 0;
+  outline: 0;
+  flex: 1 1;
+  width: 100%;
+  cursor: pointer;
+  border: 1px solid #d2d6dc;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: transparent;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  background-repeat: no-repeat;
+  background-position-x: 100%;
+  background-position-y: 5px;
+}
+
+select:hover {
+  border-color: #888;
+}
+
+.select-button:focus,
+select:focus {
+  outline: 2px solid var(--focus-color);
+  outline-offset: -2px;
+}
+
+.form-field .select-button:focus {
+  border-color: transparent !important;
+}
+
+input[type="checkbox"]:focus-visible {
+  border: 1px solid var(--focus-color);
+  outline: none;
+  box-shadow: 0 0 0 3px rgb(0 183 255 / 15%);
+}
+
+/* Set options to normal weight */
+select option {
+  font-weight: normal;
+}
+
+/* Support for rtl text, explicit support for Arabic and Hebrew */
+*[dir="rtl"] select-,
+:root:lang(ar) select,
+:root:lang(iw) select {
+  background-position:
+    left 0.7em top 50%,
+    0 0;
+  padding: 0.6em 0.8em 0.5em 1.4em;
+}
+
+/* Disabled styles */
+select:disabled,
+select[aria-disabled="true"] {
+  color: graytext;
+  background-image:
+    url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
+    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+}
+
+select:disabled:hover,
+select[aria-disabled="true"] {
+  border-color: #aaa;
+}
+
+.button-css,
+button {
+  --text-opacity: 1;
+  --border-opacity: 1;
+  --bg-opacity: 1;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  border: 0 solid #d2d6dc;
+  font-family: inherit;
+
+  text-transform: none;
+  background-image: none;
+  cursor: pointer;
+  /* background-color: rgba(88,80,236,var(--bg-opacity)); */
+  border-color: transparent;
+  border-width: 1px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: fit-content;
+  user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.button-css:not([class*="rounded"]):not([class*="round"]),
+button:not([class*="rounded"]):not([class*="round"]) {
+  border-radius: 0.375rem;
+}
+
+.button.secondary,
+button.secondary,
+button.toggle {
+  background-color: white;
+  background-image: none;
+  border-color: var(--gray-300);
+  color: var(--gray-700);
+}
+.button.secondary:hover,
+button.secondary:hover,
+button.toggle:hover {
+  color: var(--gray-400);
+}
+
+.button.danger,
+button.danger {
+  background-color: white;
+  background-image: none;
+  border-color: var(--red-300);
+  color: var(--red-700);
+}
+.button.success,
+button.success {
+  background-color: white;
+  background-image: none;
+  border-color: var(--green-300);
+  color: var(--green-700);
+}
+
+/* .button.primary,
+button.primary {
+  border-color: var(--gray-300);
+  color: var(--gray-700);
+
+} */
+
+button.toggle.toggled,
+.button.toggle.toggled {
+  color: var(--teal-400);
+  border-color: var(--teal-400);
+}
+
+.active-border,
+.active-border-hover:hover {
+  border-color: #a4e9fe;
+  box-shadow: 0 0 0 3px rgb(180 235 252 / 45%);
+}
+.active-shadow,
+.active-shadow-hover:hover {
+  box-shadow: 0 0 0 3px rgb(0 183 255 / 15%);
+}
+
+.focusable-inset:focus {
+  border-width: 1px;
+  border-style: solid;
+  border: 1px solid var(--focus-color) !important;
+  outline: none;
+  box-shadow: inset 0 0 0 3px rgb(0 183 255 / 15%);
+}
+
+button,
+no-outline {
+  outline: none;
+}
+
+.focusable:focus,
+/* 
+  :has not working in firefox
+  https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c62
+  
+  to enable for firefox: .focusable:focus-within,
+*/
+.focusable:focus-within:has(:focus-visible), 
+.focusable:focus-visible,
+input.input:focus,
+.button:not(.toggle, .select-button, .btn-color-danger):focus,
+button:not(.toggle, .select-button, .btn-color-danger):focus,
+.input-focus:focus,
+a.btn:focus,
+.focus-border:focus-within {
+  -webkit-appearance: none !important;
+  outline: 2px solid var(--focus-color) !important;
+  outline-offset: -2px !important; /** To prevent the outline being cliped by parent overflow */
+  /* box-shadow: 0 0 0 2px var(--focus-color) !important; */
+  border-color: transparent !important;
+  z-index: 1;
+}
+
+input::placeholder {
+  text-align: left;
+}
+
+.button.btn-color-danger:focus,
+button.btn-color-danger:focus {
+  border: 1px solid var(--danger) !important;
+  box-shadow: 0 0 0 1px var(--danger) !important;
+  outline: none;
+}
+
+button.toggle:focus {
+  outline: 0;
+}
+
+.text-hover:hover {
+  color: rgb(0, 141, 197) !important;
+}
+
+.card {
+  padding: 2em;
+  border: 1px solid var(--gray-300);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border-radius: 0.5em;
+}
+
+.dark-theme .card {
+  /* Border used to make select options more visible when rendered on a popup (See access rules table options) */
+  border: 1px solid var(--b-color);
+  /* box-shadow: 0 1px 3px 0 rgb(221 221 221 / 57%), 0 1px 2px 0 rgba(0, 0, 0, .06) */
+  box-shadow:
+    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
+    0 0 0 1px hsla(0, 0%, 0%, 0.05),
+    0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
+    0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
+    0 3.5px 6px hsla(0, 0%, 0%, 0.09);
+}
+
+@media only screen and (max-width: 600px) {
+  .card {
+    padding: 1em;
+  }
+}
+
+.text-ellipsis {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.text-ellipsis-left {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  direction: rtl;
+  text-align: left;
+}
+
+.fs-0 {
+  flex-shrink: none;
+}
+
+.fs-1 {
+  flex-shrink: 1;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.f-p5 {
+  flex: 0.5;
+}
+
+::-webkit-scrollbar {
+  position: absolute;
+  background: transparent;
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar {
+  opacity: 1;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  transition: 1s all;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.c--fit > * {
+  width: fit-content;
+  height: fit-content;
+}
+
+.pb-1 {
+  padding-bottom: 1em;
+}
+
+.pt-p5 {
+  padding-top: 0.5em;
+}
+.pt-p25 {
+  padding-top: 0.25em;
+}
+.pt-2 {
+  padding-top: 2em;
+}
+.pt-1 {
+  padding-top: 1em;
+}
+.pt-0 {
+  padding-top: 0;
+}
+
+.pl-3 {
+  padding-left: 3em;
+}
+.pl-2 {
+  padding-left: 2em;
+}
+.pl-1 {
+  padding-left: 1em;
+}
+.pl-p5 {
+  padding-left: 0.5em;
+}
+.pl-p25 {
+  padding-left: 0.5em;
+}
+.pr-1 {
+  padding-right: 1em;
+}
+.pr-p5 {
+  padding-right: 0.5em;
+}
+.pr-p25 {
+  padding-right: 0.25em;
+}
+
+.color-action {
+  color: var(--blue-500);
+}
+.dark-theme .color-action {
+  color: var(--blue-400);
+}
+.border-action {
+  border-color: var(--blue-500);
+}
+
+.absolute-centered {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+li.no-decor,
+ul.left-nav-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+nav.left-nav-list a {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25em 0.5em;
+  align-items: center;
+  text-decoration: none;
+  color: var(--gray-600);
+}
+
+nav.left-nav-list a:hover {
+  background: aliceblue;
+}
+nav.left-nav-list a.active {
+  background: rgb(194, 226, 253);
+}
+
+.active-drop-target {
+  background: var(--blue-200) !important;
+}
+
+.pe-none {
+  pointer-events: none;
+}
+
+.bg-color-0 {
+  background-color: var(--bg-color-0);
+}
+.bg-color-1 {
+  background-color: var(--bg-color-1);
+}
+.bg-color-2 {
+  background-color: var(--bg-color-2);
+}
+.bg-color-3 {
+  background-color: var(--bg-color-3);
+}
+.bg-color-4 {
+  background-color: var(--bg-color-4);
+}
+
+.bg-li.selected {
+  background: var(--bg-li-selected);
+}
+
+.w-800 {
+  width: 800px;
+}
+.w-700 {
+  width: 700px;
+}
+.w-600 {
+  width: 600px;
+}
+.w-500 {
+  width: 500px;
+}
+.w-400 {
+  width: 400px;
+}
+
+.dark-theme a[target="_blank"]:link {
+  color: lightskyblue;
+}
+.dark-theme a[target="_blank"]:visited {
+  color: #cdaaed;
+}
+.dark-theme a[target="_blank"]:hover {
+  color: #ffffff;
+}
+.dark-theme a[target="_blank"]:active {
+  color: #ff4040;
+  text-decoration: none;
+  font-weight: normal;
+}
+
+@media all and (max-width: 1024px) {
+  /*styles for narrow desktop browsers and iPad landscape */
+}
+
+@media all and (max-width: 700px) {
+  .w-800 {
+    width: 700px;
+  }
+}
+@media all and (max-width: 600px) {
+  .w-800 {
+    width: 600px;
+  }
+  .w-700 {
+    width: 600px;
+  }
+}
+@media all and (max-width: 500px) {
+  .w-800 {
+    width: 500px;
+  }
+  .w-700 {
+    width: 500px;
+  }
+  .w-600 {
+    width: 500px;
+  }
+}
+@media all and (max-width: 400px) {
+  .w-800 {
+    width: 400px;
+  }
+  .w-700 {
+    width: 400px;
+  }
+  .w-600 {
+    width: 400px;
+  }
+  .w-500 {
+    width: 400px;
+  }
+}
+
+@media all and (max-width: 320px) {
+  /*styles for iPhone/Android portrait*/
+  .w-800 {
+    width: 320px;
+  }
+  .w-700 {
+    width: 320px;
+  }
+  .w-600 {
+    width: 320px;
+  }
+  .w-500 {
+    width: 320px;
+  }
+  .w-400 {
+    width: 320px;
+  }
+}
+
+.text-active {
+  color: var(--active);
+}
+.b-active {
+  border-color: var(--active);
+}
+.bg-active {
+  background-color: var(--active);
+}
+
+.text-active-hover:hover {
+  color: var(--blue-600);
+}
+.b-active.hover:hover {
+  border-color: var(--active-hover);
+}
+.bg-active.hover:hover {
+  background-color: var(--active-hover);
+}
+
+.show-on-parent-hover:not(.hover) {
+  opacity: 0;
+}
+
+.show-on-hover {
+  opacity: 0;
+}
+.show-on-hover:hover {
+  opacity: 1;
+}
+
+.show-on-parent-hover:focus-within {
+  opacity: 1 !important;
+}
+
+/* .parent-hover:hover .show-on-parent-hover, */
+*:hover > .show-on-parent-hover,
+*:focus > .show-on-parent-hover,
+*:focus-within > .show-on-parent-hover {
+  opacity: 1;
+}
+
+.display-on-trigger-hover {
+  width: 0;
+  margin-right: -10px;
+  transition: width 0.35s;
+  overflow: hidden;
+}
+.trigger-hover:hover .display-on-trigger-hover,
+.trigger-hover:focus .display-on-trigger-hover {
+  width: 250px;
+}
+
+.show-on-trigger-hover {
+  opacity: 0;
+}
+.trigger-hover:hover .show-on-trigger-hover,
+.trigger-hover:focus .show-on-trigger-hover,
+.trigger-hover:focus-within .show-on-trigger-hover,
+.trigger-hover-force .show-on-trigger-hover {
+  opacity: 1 !important;
+}
+
+/* Disable on touch-only because there's no hover */
+@media (pointer: coarse) {
+  .show-on-hover,
+  .show-on-parent-hover,
+  .show-on-trigger-hover {
+    opacity: 1 !important;
+  }
+}
+
+.shrink-label {
+  max-width: fit-content;
+  max-height: fit-content;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.disabled:not(.no-fade):not(.hidden) {
+  /* pointer-events: none; 
+  touch-action: none;  */
+  opacity: 0.5;
+}
+
+.disabled,
+.disabled * {
+  cursor: not-allowed !important;
+}
+
+/** Merging these rules will not work */
+input[type="file"]::file-selector-button {
+  background: transparent;
+  border: unset;
+  cursor: pointer;
+  font-weight: bold;
+
+  /* Vertical centering */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+input[type="file"]::-webkit-file-upload-button {
+  background: transparent;
+  border: unset;
+  cursor: pointer;
+  font-weight: bold;
+
+  /* Vertical centering */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Base skeleton */
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-color-1);
+  border-radius: 4px;
+}
+
+/* Shimmer layer */
+.skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  animation: shimmer 1.2s infinite;
+}
+
+/* GPU-friendly transform animation */
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}