stargazer-ui 1.2.1 → 1.2.2

package/{dev → styles}/stargazerui.css

@@ -1,3 +1,684 @@
+:root {
+  --sg-body-bg: #212529;
+  --sg-body-color: white;
+  --sg-nav-color: #1a1b1d;
+  --sg-code-color: #fc5d5d;
+  --sg-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  --sg-highlight-bg: #fff3cd;
+  --sg-link-color: #fc5d5d;
+  --sg-link-hover-color: color.mix(black, #E15554, 15%);
+  --sg-primary: rgb(73, 149, 213);
+  --sg-secondary: rgb(108, 117, 125);
+  --sg-success: rgb(31, 173, 97);
+  --sg-info: rgb(145, 132, 189);
+  --sg-warning: rgb(224, 188, 41);
+  --sg-danger: rgb(252, 95, 95);
+  --sg-light: rgb(248, 249, 250);
+  --sg-dark: rgb(33, 37, 41);
+  --red-2: rgb(248, 113, 113);
+  --orange-2: rgb(251 146 60);
+  --yellow-2: rgb(251 191 36);
+  --nav-bar-height: 3.5rem;
+  --tab-controls-height: 2.5rem;
+  --column-header-height: 2rem;
+  font-size: 18px;
+  line-height: 1.4;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100dvh;
+  color: var(--sg-body-color);
+  background-color: var(--sg-body-bg);
+}
+
+#root {
+  height: 100%;
+  overflow: auto;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.top-left-grid {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0;
+}
+
+.top-right-grid {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0;
+}
+
+.middle-grid {
+  border-radius: 0;
+}
+
+.bottom-left-grid {
+  border-bottom-left-radius: 0.375rem;
+  border-top-left-radius: 0;
+}
+
+.bottom-right-grid {
+  border-bottom-right-radius: 0.375rem;
+  border-top-right-radius: 0;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.test-red {
+  background-color: red;
+}
+
+* {
+  box-sizing: border-box;
+  scrollbar-color: var(--sg-link-color) rgba(0, 0, 0, 0);
+  scrollbar-width: thin;
+}
+
+dialog {
+  padding: 0;
+  margin: 0;
+  color: inherit;
+}
+
+input, textarea, select {
+  font-size: 0.85rem;
+}
+
+button {
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+hr {
+  margin: 0.5rem 0;
+  color: inherit;
+  border: 0;
+  border-top: 1px solid;
+  opacity: 0.25;
+}
+
+h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1, .h1 {
+  --unit: 1rem;
+  font-size: calc(1.375 * var(--unit) + 1.5vw);
+}
+
+@media (min-width: 1200px) {
+  h1, .h1 {
+    font-size: calc(2.5 * var(--unit));
+  }
+}
+h2, .h2 {
+  --unit: 1rem;
+  font-size: calc(1.325 * var(--unit) + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  h2, .h2 {
+    font-size: calc(2 * var(--unit));
+  }
+}
+h3, .h3 {
+  --unit: 1rem;
+  font-size: calc(1.3 * var(--unit) + 0.6vw);
+}
+
+@media (min-width: 1200px) {
+  h3, .h3 {
+    font-size: calc(1.75 * var(--unit));
+  }
+}
+h4, .h4 {
+  --unit: 1rem;
+  font-size: calc(1.275 * var(--unit) + 0.3vw);
+}
+
+@media (min-width: 1200px) {
+  h4, .h4 {
+    font-size: calc(1.5 * var(--unit));
+  }
+}
+h5, .h5 {
+  --unit: 1rem;
+  font-size: calc(1.25 * var(--unit));
+}
+
+h6, .h6 {
+  --unit: 1rem;
+  font-size: calc(1 * var(--unit));
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol, ul, dl {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+a {
+  color: var(--sg-link-color);
+  text-decoration: underline;
+}
+
+a:hover {
+  color: var(--sg-link-hover-color);
+}
+
+img, svg {
+  vertical-align: middle;
+}
+
+label {
+  display: inline-block;
+}
+
+:root, .dark, .dark-theme {
+  --red-1: #2b2221;
+  --red-2: #322321;
+  --red-3: #4e201f;
+  --red-4: #641c1d;
+  --red-5: #732122;
+  --red-6: #832c2c;
+  --red-7: #9b3a39;
+  --red-8: #c44848;
+  --red-9: #fc5f5f;
+  --red-10: #ee5254;
+  --red-11: #ff918b;
+  --red-12: #ffd1cd;
+  --red-a1: #f600000c;
+  --red-a2: #fa0c0014;
+  --red-a3: #fe0d0034;
+  --red-a4: #ff08024d;
+  --red-a5: #fd1b175f;
+  --red-a6: #ff353071;
+  --red-a7: #fe4b468d;
+  --red-a8: #fe5453bc;
+  --red-a9: #ff6060fc;
+  --red-a10: #ff5558ec;
+  --red-a11: #ff918b;
+  --red-a12: #ffd1cd;
+  --red-contrast: #fff;
+  --red-surface: #43221a80;
+  --red-indicator: #fc5f5f;
+  --red-track: #fc5f5f;
+  --blue-1: #1e252c;
+  --blue-2: #212931;
+  --blue-3: #22384b;
+  --blue-4: #20425f;
+  --blue-5: #274d6d;
+  --blue-6: #315a7d;
+  --blue-7: #3d6a91;
+  --blue-8: #487ead;
+  --blue-9: #4995d5;
+  --blue-10: #5288b8;
+  --blue-11: #83bff6;
+  --blue-12: #c9e4fe;
+  --blue-a1: #0025e904;
+  --blue-a2: #218cf60a;
+  --blue-a3: #289cfd29;
+  --blue-a4: #1e97fd41;
+  --blue-a5: #34a2fd52;
+  --blue-a6: #4aabfd65;
+  --blue-a7: #5bb3ff7c;
+  --blue-a8: #60b5fe9e;
+  --blue-a9: #53b1ffcd;
+  --blue-a10: #6ab9feab;
+  --blue-a11: #87c6fef5;
+  --blue-a12: #cae5fffe;
+  --blue-contrast: #fff;
+  --blue-surface: #212d3980;
+  --blue-indicator: #4995d5;
+  --blue-track: #4995d5;
+  --green-1: #1f2721;
+  --green-2: #222b25;
+  --green-3: #263b2c;
+  --green-4: #254a31;
+  --green-5: #295639;
+  --green-6: #2e6441;
+  --green-7: #33734a;
+  --green-8: #368453;
+  --green-9: #1fad61;
+  --green-10: #00a055;
+  --green-11: #57d688;
+  --green-12: #b3f3c5;
+  --green-a1: #00d00003;
+  --green-a2: #41e50008;
+  --green-a3: #53fd471a;
+  --green-a4: #39fc582c;
+  --green-a5: #45fc703a;
+  --green-a6: #4eff7c4a;
+  --green-a7: #53fd855c;
+  --green-a8: #50fd8970;
+  --green-a9: #1efe83a0;
+  --green-a10: #00ff7790;
+  --green-a11: #63fe9dd0;
+  --green-a12: #bbffcef1;
+  --green-contrast: #fff;
+  --green-surface: #23312280;
+  --green-indicator: #1fad61;
+  --green-track: #1fad61;
+  --yellow-1: #26241f;
+  --yellow-2: #2c2a21;
+  --yellow-3: #3a331c;
+  --yellow-4: #463a0f;
+  --yellow-5: #51430f;
+  --yellow-6: #5c4f1f;
+  --yellow-7: #6d5f2d;
+  --yellow-8: #867537;
+  --yellow-9: #e0bc29;
+  --yellow-10: #d5b112;
+  --yellow-11: #f8d44f;
+  --yellow-12: #f7eabb;
+  --yellow-a1: #f6000006;
+  --yellow-a2: #f988000d;
+  --yellow-a3: #fda1001d;
+  --yellow-a4: #fda2002b;
+  --yellow-a5: #fcae0038;
+  --yellow-a6: #ffc30444;
+  --yellow-a7: #fdce3558;
+  --yellow-a8: #fdd44875;
+  --yellow-a9: #fed429dc;
+  --yellow-a10: #ffd20dcf;
+  --yellow-a11: #ffda51f7;
+  --yellow-a12: #fff2c1f6;
+  --yellow-contrast: #282109;
+  --yellow-surface: #372f1a80;
+  --yellow-indicator: #e0bc29;
+  --yellow-track: #e0bc29;
+  --gray-1: #242427;
+  --gray-2: #2b2b2d;
+  --gray-3: #333336;
+  --gray-4: #38393d;
+  --gray-5: #3d3e43;
+  --gray-6: #45464c;
+  --gray-7: #505259;
+  --gray-8: #676973;
+  --gray-9: #73757f;
+  --gray-10: #7e808b;
+  --gray-11: #b4b6c0;
+  --gray-12: #eeeef0;
+  --gray-a1: #e1000004;
+  --gray-a2: #f6a57e0c;
+  --gray-a3: #fccfc715;
+  --gray-a4: #fae2e61b;
+  --gray-a5: #fae7f221;
+  --gray-a6: #fbeefe2a;
+  --gray-a7: #f0ebfc3a;
+  --gray-a8: #eae8fd59;
+  --gray-a9: #ececfe67;
+  --gray-a10: #ececff75;
+  --gray-a11: #f1f2ffb4;
+  --gray-a12: #fdfdfeee;
+  --gray-contrast: #FFFFFF;
+  --gray-surface: rgba(0, 0, 0, 0.05);
+  --gray-indicator: #73757f;
+  --gray-track: #73757f;
+  --violet-1: #25232b;
+  --violet-2: #2a2831;
+  --violet-3: #353143;
+  --violet-4: #3c3651;
+  --violet-5: #433c59;
+  --violet-6: #4b4463;
+  --violet-7: #585073;
+  --violet-8: #6e648f;
+  --violet-9: #9184bd;
+  --violet-10: #8578b0;
+  --violet-11: #b9afdf;
+  --violet-12: #eae7f6;
+  --violet-a1: #ee009005;
+  --violet-a2: #f26be30b;
+  --violet-a3: #c687ff1f;
+  --violet-a4: #b180fe30;
+  --violet-a5: #b78afc3a;
+  --violet-a6: #ba96fd46;
+  --violet-a7: #bfa1fd59;
+  --violet-a8: #c2a9ff7a;
+  --violet-a9: #c3aefeb1;
+  --violet-a10: #c0a8ffa1;
+  --violet-a11: #d4c7ffd9;
+  --violet-a12: #f3effef5;
+  --violet-contrast: #fff;
+  --violet-surface: #332b3980;
+  --violet-indicator: #9184bd;
+  --violet-track: #9184bd;
+  --dark-1: #0f1114;
+  --dark-2: #17191c;
+  --dark-3: #1f2327;
+  --dark-4: #252a2f;
+  --dark-5: #2b3137;
+  --dark-6: #343a41;
+  --dark-7: #41484f;
+  --dark-8: #5a6168;
+  --dark-9: #686f76;
+  --dark-10: #5a6168;
+  --dark-11: #adb4bc;
+  --dark-12: #eceef1;
+  --dark-a1: #0011d104;
+  --dark-a2: #91bcfb0c;
+  --dark-a3: #a6d1fb18;
+  --dark-a4: #acd3f921;
+  --dark-a5: #b3d9fe29;
+  --dark-a6: #bcdafc34;
+  --dark-a7: #c7e2fd43;
+  --dark-a8: #d7eafd5e;
+  --dark-a9: #ddedfd6d;
+  --dark-a10: #d7eafd5e;
+  --dark-a11: #e9f3feb8;
+  --dark-a12: #fafcfff0;
+  --dark-contrast: #fff;
+  --dark-surface: #1d212780;
+  --dark-indicator: #686f76;
+  --dark-track: #686f76;
+  --light-1: #101112;
+  --light-2: #18191a;
+  --light-3: #222324;
+  --light-4: #292a2b;
+  --light-5: #303132;
+  --light-6: #393b3c;
+  --light-7: #474849;
+  --light-8: #606162;
+  --light-9: #f8f9fa;
+  --light-10: #eff0f1;
+  --light-11: #b3b4b6;
+  --light-12: #edeeef;
+  --light-a1: #00119102;
+  --light-a2: #c4def70a;
+  --light-a3: #e0ecf815;
+  --light-a4: #ecf5fe1c;
+  --light-a5: #edf4fb24;
+  --light-a6: #ebf5fb2f;
+  --light-a7: #f7fbff3c;
+  --light-a8: #f9fcff57;
+  --light-a9: #fdfefffa;
+  --light-a10: #fdfefff0;
+  --light-a11: #fbfcffb1;
+  --light-a12: #fdfeffee;
+  --light-contrast: #112334;
+  --light-surface: #1f212380;
+  --light-indicator: #f8f9fa;
+  --light-track: #f8f9fa;
+}
+
+.light, .light-theme {
+  --red-1: #fffcfc;
+  --red-2: #fff6f6;
+  --red-3: #ffebe9;
+  --red-4: #ffdad6;
+  --red-5: #ffcac5;
+  --red-6: #ffbbb5;
+  --red-7: #f7a8a2;
+  --red-8: #ee8d88;
+  --red-9: #fc5f5f;
+  --red-10: #ef5053;
+  --red-11: #d1353c;
+  --red-12: #602221;
+  --red-a1: #ff000003;
+  --red-a2: #ff000009;
+  --red-a3: #ff180016;
+  --red-a4: #ff190029;
+  --red-a5: #ff16003a;
+  --red-a6: #ff15014a;
+  --red-a7: #ea11005d;
+  --red-a8: #db0b0077;
+  --red-a9: #fb0000a0;
+  --red-a10: #e80005af;
+  --red-a11: #c50009ca;
+  --red-a12: #480100de;
+  --red-contrast: #fff;
+  --red-surface: #fff4f4cc;
+  --red-indicator: #fc5f5f;
+  --red-track: #fc5f5f;
+  --blue-1: #fbfdff;
+  --blue-2: #f5f9fe;
+  --blue-3: #e7f3ff;
+  --blue-4: #d8ecff;
+  --blue-5: #c8e2fb;
+  --blue-6: #b4d6f4;
+  --blue-7: #9bc5eb;
+  --blue-8: #74ade1;
+  --blue-9: #4995d5;
+  --blue-10: #4289c4;
+  --blue-11: #2675b3;
+  --blue-12: #1c3750;
+  --blue-a1: #0080ff04;
+  --blue-a2: #0066e60a;
+  --blue-a3: #0080ff18;
+  --blue-a4: #0083ff27;
+  --blue-a5: #0079ed37;
+  --blue-a6: #0174da4b;
+  --blue-a7: #006ccc64;
+  --blue-a8: #0069c88b;
+  --blue-a9: #006bc4b6;
+  --blue-a10: #0060b0bd;
+  --blue-a11: #005da6d9;
+  --blue-a12: #001e3ae3;
+  --blue-contrast: #fff;
+  --blue-surface: #f3f8fecc;
+  --blue-indicator: #4995d5;
+  --blue-track: #4995d5;
+  --green-1: #fafefb;
+  --green-2: #f4fbf6;
+  --green-3: #e6f7ea;
+  --green-4: #d6f2dd;
+  --green-5: #c2eacd;
+  --green-6: #a9e0b9;
+  --green-7: #87d19e;
+  --green-8: #50bd79;
+  --green-9: #1fad61;
+  --green-10: #12a057;
+  --green-11: #008141;
+  --green-12: #1a3d26;
+  --green-a1: #00cc3305;
+  --green-a2: #00a32f0b;
+  --green-a3: #00ae2919;
+  --green-a4: #00af2c29;
+  --green-a5: #00a82e3d;
+  --green-a6: #00a43056;
+  --green-a7: #009e3178;
+  --green-a8: #009f3caf;
+  --green-a9: #00a24be0;
+  --green-a10: #00994aed;
+  --green-a11: #008141;
+  --green-a12: #00270de5;
+  --green-contrast: #fff;
+  --green-surface: #f1faf4cc;
+  --green-indicator: #1fad61;
+  --green-track: #1fad61;
+  --yellow-1: #fefdf9;
+  --yellow-2: #fffbe4;
+  --yellow-3: #fff6c9;
+  --yellow-4: #ffeda3;
+  --yellow-5: #ffe36b;
+  --yellow-6: #fcd539;
+  --yellow-7: #e9c537;
+  --yellow-8: #d5ae00;
+  --yellow-9: #ffd800;
+  --yellow-10: #fbce00;
+  --yellow-11: #917500;
+  --yellow-12: #463b14;
+  --yellow-a1: #d5aa0006;
+  --yellow-a2: #ffda001b;
+  --yellow-a3: #ffd50036;
+  --yellow-a4: #ffce005c;
+  --yellow-a5: #ffcf0094;
+  --yellow-a6: #fbc900c6;
+  --yellow-a7: #e3b500c8;
+  --yellow-a8: #d5ae00;
+  --yellow-a9: #ffd800;
+  --yellow-a10: #fbce00;
+  --yellow-a11: #917500;
+  --yellow-a12: #362a00eb;
+  --yellow-contrast: #282109;
+  --yellow-surface: #fffaddcc;
+  --yellow-indicator: #ffd800;
+  --yellow-track: #ffd800;
+  --gray-1: #fcfcfd;
+  --gray-2: #f9f9fb;
+  --gray-3: #eff0f3;
+  --gray-4: #e7e8ec;
+  --gray-5: #e0e1e6;
+  --gray-6: #d8d9e0;
+  --gray-7: #cdced7;
+  --gray-8: #b9bbc6;
+  --gray-9: #8b8d98;
+  --gray-10: #80828d;
+  --gray-11: #62636c;
+  --gray-12: #1e1f24;
+  --gray-a1: #00005503;
+  --gray-a2: #00005506;
+  --gray-a3: #00104010;
+  --gray-a4: #000b3618;
+  --gray-a5: #0009321f;
+  --gray-a6: #00073527;
+  --gray-a7: #00063332;
+  --gray-a8: #00083046;
+  --gray-a9: #00051d74;
+  --gray-a10: #00051b7f;
+  --gray-a11: #0002119d;
+  --gray-a12: #000107e1;
+  --gray-contrast: #FFFFFF;
+  --gray-surface: #ffffffcc;
+  --gray-indicator: #8b8d98;
+  --gray-track: #8b8d98;
+  --violet-1: #fcfcfe;
+  --violet-2: #faf9fd;
+  --violet-3: #f1f0f8;
+  --violet-4: #e9e6f6;
+  --violet-5: #e1ddf2;
+  --violet-6: #d8d3ed;
+  --violet-7: #cbc5e5;
+  --violet-8: #b7aed8;
+  --violet-9: #9184bd;
+  --violet-10: #8578af;
+  --violet-11: #675c8b;
+  --violet-12: #27203a;
+  --violet-a1: #0000aa03;
+  --violet-a2: #2b00aa06;
+  --violet-a3: #1100880f;
+  --violet-a4: #1f00a419;
+  --violet-a5: #1e009e22;
+  --violet-a6: #1d00972c;
+  --violet-a7: #1b008d3a;
+  --violet-a8: #1d008551;
+  --violet-a9: #1b01777b;
+  --violet-a10: #19006887;
+  --violet-a11: #11004aa3;
+  --violet-a12: #08001edf;
+  --violet-contrast: #fff;
+  --violet-surface: #f9f8fdcc;
+  --violet-indicator: #9184bd;
+  --violet-track: #9184bd
+  --dark-1: #fcfcfd;
+  --dark-2: #f8fafb;
+  --dark-3: #eef0f3;
+  --dark-4: #e5e8eb;
+  --dark-5: #dde1e5;
+  --dark-6: #d5d9dd;
+  --dark-7: #c9ced3;
+  --dark-8: #b4bbc1;
+  --dark-9: #212529;
+  --dark-10: #353a3e;
+  --dark-11: #60656b;
+  --dark-12: #1f2327;
+  --dark-a1: #00005503;
+  --dark-a2: #00496e07;
+  --dark-a3: #001e4b11;
+  --dark-a4: #001e3b1a;
+  --dark-a5: #001e3c22;
+  --dark-a6: #0019312a;
+  --dark-a7: #00183036;
+  --dark-a8: #01182d4b;
+  --dark-a9: #000509de;
+  --dark-a10: #00060bca;
+  --dark-a11: #0008129f;
+  --dark-a12: #000509e0;
+  --dark-contrast: #fff;
+  --dark-surface: #f6f9facc;
+  --dark-indicator: #212529;
+  --dark-track: #212529;
+  --light-1: #fcfcfc;
+  --light-2: #f8f9fa;
+  --light-3: #eef0f1;
+  --light-4: #e7e8e9;
+  --light-5: #dfe0e2;
+  --light-6: #d6d8d9;
+  --light-7: #cbccce;
+  --light-8: #b7b8ba;
+  --light-9: #88898b;
+  --light-10: #7c7d7e;
+  --light-11: #636466;
+  --light-12: #212223;
+  --light-a1: #00000003;
+  --light-a2: #00254907;
+  --light-a3: #001e2d11;
+  --light-a4: #000b1618;
+  --light-a5: #00081820;
+  --light-a6: #000d1329;
+  --light-a7: #00050f34;
+  --light-a8: #00040b48;
+  --light-a9: #00030777;
+  --light-a10: #00020483;
+  --light-a11: #0002059c;
+  --light-a12: #000102de;
+  --light-contrast: #fff;
+  --light-surface: #f6f8f9cc;
+  --light-indicator: #88898b;
+  --light-track: #88898b;
+}
+
 @media (min-width: 576px) {
   .float-sm-start {
     float: left !important;
@@ -2478,6 +3159,11 @@
     text-align: center !important;
   }
 }
+:root {
+  --sg-body-bg: #212529;
+  --sg-body-color: white;
+}
+
 /* Grid variables */
 /* z indices */
 /* Button */
@@ -2498,7 +3184,10 @@
 }
 
 /* Table */
+/* Tabs */
 /* Dropdown */
+/* Nav */
+/* Overlay */
 .sg-visually-hidden {
   position: absolute !important;
   width: 1px !important;
@@ -2512,12 +3201,22 @@
 }
 
 .sg-card {
+  --card-border-radius: 0rem;
+  --border-width: -2px;
+  --border-gradient-color: color-mix(in srgb, color-mix(in hsl, white 3%, #212529), white 3%);
+  --border-gradient-mix-color: color-mix(in srgb, color-mix(in hsl, white 3%, #212529), white 3%);
+  --background-gradient-color: rgb(26, 27, 29);
+  --background-gradient-mix-color: color-mix(in srgb, color-mix(in hsl, white 3%, #212529), white 3%);
+  --divider-color: white;
   display: flex;
   flex-direction: column;
-  border-radius: 0.375em;
+  border: calc(var(--border-width) * -1) solid transparent;
+  position: relative;
+  border-radius: var(--card-border-radius);
+  background: linear-gradient(71deg, var(--background-gradient-color), var(--background-gradient-mix-color), var(--background-gradient-color));
+  background-clip: padding-box;
 }
 .sg-card.sg-card-overlay {
-  background-color: #2e3236;
   color: white;
   border: 1px solid white;
 }
@@ -2528,24 +3227,197 @@
 .sg-card .sg-card-header {
   margin-bottom: 0;
   padding: 0.5em 1em;
-  background-color: #212529;
-  border-bottom: 1px solid white;
+  border-bottom: 1px solid var(--divider-color);
 }
 .sg-card .sg-card-header:first-child {
-  border-radius: 0.375em 0.375em 0 0;
+  border-top-left-radius: var(--card-border-radius);
+  border-top-right-radius: var(--card-border-radius);
+}
+.sg-card .sg-card-title {
+  margin: 0;
 }
 .sg-card .sg-card-footer {
   padding: 0.5em 1em;
-  background-color: #212529;
-  border-top: 1px solid white;
+  border-top: 1px solid var(--divider-color);
 }
 .sg-card .sg-card-footer:last-child {
-  border-radius: 0 0 0.375em 0.375em;
+  border-bottom-left-radius: var(--card-border-radius);
+  border-bottom-right-radius: var(--card-border-radius);
 }
 .sg-card .sg-card-text:last-child {
   margin-bottom: 0;
 }
 
+.sg-card::after {
+  position: absolute;
+  content: "";
+  top: var(--border-width);
+  bottom: var(--border-width);
+  right: var(--border-width);
+  left: var(--border-width);
+  z-index: -1;
+  border-radius: var(--card-border-radius);
+  background: linear-gradient(71deg, var(--border-gradient-color), var(--border-gradient-mix-color), var(--border-gradient-color));
+}
+
+.primary {
+  --border-gradient-mix-color: rgb(252, 95, 95);
+  grid-column: 2/3;
+  grid-row: 1;
+}
+.primary.inverted {
+  --border-gradient-color: color-mix(in srgb, rgb(252, 95, 95), black 30%);
+  --border-gradient-mix-color: rgb(252, 95, 95);
+  --background-gradient-color: color-mix(in srgb, rgb(252, 95, 95), black 0%);
+  --background-gradient-mix-color: rgb(252, 95, 95);
+  --divider-color: color-mix(in srgb, rgb(252, 95, 95), black 15%);
+  /*
+  > h1, h2, h3, h4, h5, h6, span, p, small {
+      background-color: $color;
+      box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+  }
+  */
+  color: black;
+}
+
+.secondary {
+  --border-gradient-mix-color: #6c757d;
+  grid-column: 4/5;
+  grid-row: 1;
+}
+.secondary.inverted {
+  --border-gradient-color: color-mix(in srgb, #6c757d, black 30%);
+  --border-gradient-mix-color: #6c757d;
+  --background-gradient-color: color-mix(in srgb, #6c757d, black 0%);
+  --background-gradient-mix-color: #6c757d;
+  --divider-color: color-mix(in srgb, #6c757d, black 15%);
+  /*
+  > h1, h2, h3, h4, h5, h6, span, p, small {
+      background-color: $color;
+      box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+  }
+  */
+}
+
+.success {
+  --border-gradient-mix-color: #1fad61;
+  grid-column: 6/7;
+  grid-row: 1;
+}
+.success.inverted {
+  --border-gradient-color: color-mix(in srgb, #1fad61, black 30%);
+  --border-gradient-mix-color: #1fad61;
+  --background-gradient-color: color-mix(in srgb, #1fad61, black 0%);
+  --background-gradient-mix-color: #1fad61;
+  --divider-color: color-mix(in srgb, #1fad61, black 15%);
+  /*
+  > h1, h2, h3, h4, h5, h6, span, p, small {
+      background-color: $color;
+      box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+  }
+  */
+  color: black;
+}
+
+.info {
+  --border-gradient-mix-color: #9184bd;
+  grid-column: 8/9;
+  grid-row: 1;
+}
+.info.inverted {
+  --border-gradient-color: color-mix(in srgb, #9184bd, black 30%);
+  --border-gradient-mix-color: #9184bd;
+  --background-gradient-color: color-mix(in srgb, #9184bd, black 0%);
+  --background-gradient-mix-color: #9184bd;
+  --divider-color: color-mix(in srgb, #9184bd, black 15%);
+  /*
+  > h1, h2, h3, h4, h5, h6, span, p, small {
+      background-color: $color;
+      box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+  }
+  */
+  color: black;
+}
+
+.warning {
+  --border-gradient-mix-color: hsl(48, 75%, 52%);
+  grid-column: 2/3;
+  grid-row: 2;
+}
+.warning.inverted {
+  --border-gradient-color: color-mix(in srgb, hsl(48, 75%, 52%), black 30%);
+  --border-gradient-mix-color: hsl(48, 75%, 52%);
+  --background-gradient-color: color-mix(in srgb, hsl(48, 75%, 52%), black 0%);
+  --background-gradient-mix-color: hsl(48, 75%, 52%);
+  --divider-color: color-mix(in srgb, hsl(48, 75%, 52%), black 15%);
+  /*
+  > h1, h2, h3, h4, h5, h6, span, p, small {
+      background-color: $color;
+      box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+  }
+  */
+  color: black;
+}
+
+.danger {
+  --border-gradient-mix-color: #4995d5;
+  grid-column: 4/5;
+  grid-row: 2;
+}
+.danger.inverted {
+  --border-gradient-color: color-mix(in srgb, #4995d5, black 30%);
+  --border-gradient-mix-color: #4995d5;
+  --background-gradient-color: color-mix(in srgb, #4995d5, black 0%);
+  --background-gradient-mix-color: #4995d5;
+  --divider-color: color-mix(in srgb, #4995d5, black 15%);
+  /*
+  > h1, h2, h3, h4, h5, h6, span, p, small {
+      background-color: $color;
+      box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+  }
+  */
+  color: black;
+}
+
+.light {
+  --border-gradient-mix-color: #f8f9fa;
+  grid-column: 6/7;
+  grid-row: 2;
+}
+.light.inverted {
+  --border-gradient-color: color-mix(in srgb, #f8f9fa, black 30%);
+  --border-gradient-mix-color: #f8f9fa;
+  --background-gradient-color: color-mix(in srgb, #f8f9fa, black 0%);
+  --background-gradient-mix-color: #f8f9fa;
+  --divider-color: color-mix(in srgb, #f8f9fa, black 15%);
+  /*
+  > h1, h2, h3, h4, h5, h6, span, p, small {
+      background-color: $color;
+      box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+  }
+  */
+  color: black;
+}
+
+.dark {
+  --border-gradient-mix-color: #212529;
+  grid-column: 8/9;
+  grid-row: 2;
+}
+.dark.inverted {
+  --border-gradient-color: color-mix(in srgb, #212529, black 30%);
+  --border-gradient-mix-color: #212529;
+  --background-gradient-color: color-mix(in srgb, #212529, black 0%);
+  --background-gradient-mix-color: #212529;
+  --divider-color: color-mix(in srgb, #212529, black 15%);
+  /*
+  > h1, h2, h3, h4, h5, h6, span, p, small {
+      background-color: $color;
+      box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+  }
+  */
+}
+
 .sg-button-close {
   box-sizing: content-box;
   width: 1rem;
@@ -2601,15 +3473,22 @@
   --focus-visible-border-color: white;
   --focus-visible-outline-color: #0d6efd;
   --focus-visible-boxshadow-color: white;
-  border-radius: 0.375rem;
   min-width: fit-content;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   padding: 0.375rem 0.75rem;
   background-color: var(--bg-color);
-  border: 1px solid var(--border-color);
+  border: 2px outset color-mix(in oklab, var(--bg-color), var(--text-color) 20%);
   color: var(--text-color);
+  /*
+  &:focus-visible {
+      box-shadow: 0 0 0 3px var(--focus-visible-boxshadow-color);
+      border: 1px solid var(--focus-visible-border-color);
+      outline: 2px solid var(--focus-visible-outline-color);
+      z-index: 5;
+  }
+  */
 }
 .sg-button:hover, .sg-button:focus {
   background-color: var(--bg-hover-color);
@@ -2618,25 +3497,20 @@
 .sg-button:active {
   background-color: var(--bg-active-color);
   border-color: var(--border-active-color);
-}
-.sg-button:focus-visible {
-  box-shadow: 0 0 0 3px var(--focus-visible-boxshadow-color);
-  border: 1px solid var(--focus-visible-border-color);
-  outline: 2px solid var(--focus-visible-outline-color);
-  z-index: 5;
+  border-style: inset;
 }
 
 .sg-button-primary {
-  --text-color: white;
-  --bg-color: #0d6efd;
-  --border-color: #0d6efd;
-  --bg-hover-color: #0b5ed7;
-  --border-hover-color: #0b5ed7;
-  --bg-active-color: #0a58ca;
-  --border-active-color: #0a58ca;
-  --focus-visible-border-color: white;
-  --focus-visible-outline-color: #0d6efd;
-  --focus-visible-boxshadow-color: white;
+  --text-color: black;
+  --bg-color: rgb(252, 95, 95);
+  --border-color: rgb(252, 95, 95);
+  --bg-hover-color: #fc7777;
+  --border-hover-color: #fc7777;
+  --bg-active-color: #fd7f7f;
+  --border-active-color: #fd7f7f;
+  --focus-visible-border-color: black;
+  --focus-visible-outline-color: rgb(252, 95, 95);
+  --focus-visible-boxshadow-color: black;
 }
 
 .sg-button-group > .btn-primary {
@@ -2663,16 +3537,16 @@
 }
 
 .sg-button-success {
-  --text-color: white;
-  --bg-color: #198754;
-  --border-color: #198754;
-  --bg-hover-color: #157347;
-  --border-hover-color: #157347;
-  --bg-active-color: #146c43;
-  --border-active-color: #146c43;
-  --focus-visible-border-color: white;
-  --focus-visible-outline-color: #198754;
-  --focus-visible-boxshadow-color: white;
+  --text-color: black;
+  --bg-color: #1fad61;
+  --border-color: #1fad61;
+  --bg-hover-color: #41b979;
+  --border-hover-color: #41b979;
+  --bg-active-color: #4cbd81;
+  --border-active-color: #4cbd81;
+  --focus-visible-border-color: black;
+  --focus-visible-outline-color: #1fad61;
+  --focus-visible-boxshadow-color: black;
 }
 
 .sg-button-group > .btn-success {
@@ -2682,14 +3556,14 @@
 
 .sg-button-info {
   --text-color: black;
-  --bg-color: #0dcaf0;
-  --border-color: #0dcaf0;
-  --bg-hover-color: #31d2f2;
-  --border-hover-color: #31d2f2;
-  --bg-active-color: #3dd5f3;
-  --border-active-color: #3dd5f3;
+  --bg-color: #9184bd;
+  --border-color: #9184bd;
+  --bg-hover-color: #a296c7;
+  --border-hover-color: #a296c7;
+  --bg-active-color: #a79dca;
+  --border-active-color: #a79dca;
   --focus-visible-border-color: black;
-  --focus-visible-outline-color: #0dcaf0;
+  --focus-visible-outline-color: #9184bd;
   --focus-visible-boxshadow-color: black;
 }
 
@@ -2700,14 +3574,14 @@
 
 .sg-button-warning {
   --text-color: black;
-  --bg-color: #ffc107;
-  --border-color: #ffc107;
-  --bg-hover-color: #ffca2c;
-  --border-hover-color: #ffca2c;
-  --bg-active-color: #ffcd39;
-  --border-active-color: #ffcd39;
+  --bg-color: hsl(48, 75%, 52%);
+  --border-color: hsl(48, 75%, 52%);
+  --bg-hover-color: #e5c649;
+  --border-hover-color: #e5c649;
+  --bg-active-color: #e6c954;
+  --border-active-color: #e6c954;
   --focus-visible-border-color: black;
-  --focus-visible-outline-color: #ffc107;
+  --focus-visible-outline-color: hsl(48, 75%, 52%);
   --focus-visible-boxshadow-color: black;
 }
 
@@ -2717,16 +3591,16 @@
 }
 
 .sg-button-danger {
-  --text-color: white;
-  --bg-color: #dc3545;
-  --border-color: #dc3545;
-  --bg-hover-color: #bb2d3b;
-  --border-hover-color: #bb2d3b;
-  --bg-active-color: #b02a37;
-  --border-active-color: #b02a37;
-  --focus-visible-border-color: white;
-  --focus-visible-outline-color: #dc3545;
-  --focus-visible-boxshadow-color: white;
+  --text-color: black;
+  --bg-color: #4995d5;
+  --border-color: #4995d5;
+  --bg-hover-color: #64a5db;
+  --border-hover-color: #64a5db;
+  --bg-active-color: #6daadd;
+  --border-active-color: #6daadd;
+  --focus-visible-border-color: black;
+  --focus-visible-outline-color: #4995d5;
+  --focus-visible-boxshadow-color: black;
 }
 
 .sg-button-group > .btn-danger {
@@ -2826,25 +3700,23 @@
   position: relative;
 }
 
+.sg-dropdown {
+  --sg-dropdown-list-bg: ${$sg-dropdown-list-bg} ;
+}
+
 .sg-dropdown-list {
   position: absolute;
   z-index: 1000;
   display: none;
   min-width: 10rem;
-  padding: 0.5rem 0rem;
+  padding: 0;
   margin: 0;
   text-align: left;
   list-style: none;
-  background-color: #343a40;
+  background-color: #212529;
   color: white;
   background-clip: padding-box;
-  border: 1px solid white;
-  border-radius: 0.375rem;
-}
-.sg-dropdown-list[data-bs-popper] {
-  top: 100%;
-  left: 0;
-  margin-top: 0.125rem;
+  border: 2px outset color-mix(in oklab, #212529, white 60%);
 }
 
 .sg-dropdown-list.show {
@@ -2864,6 +3736,26 @@
   border-bottom: 0;
   border-left: 0.3em solid transparent;
 }
+.sg-dropdown-toggle[data-drop=up]::after {
+  transform: rotate(180deg);
+}
+.sg-dropdown-toggle[data-drop=right]::after {
+  transform: rotate(270deg);
+}
+.sg-dropdown-toggle[data-drop=left]::after {
+  display: none;
+}
+.sg-dropdown-toggle[data-drop=left]::before {
+  display: inline-block;
+  margin-right: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+  transform: rotate(90deg);
+}
 
 .sg-dropdown-divider {
   --line-color: rgba(0, 0, 0, 0.175);
@@ -2877,16 +3769,13 @@
 .sg-dropdown-item {
   display: block;
   width: 100%;
-  padding: 0.25rem 1rem;
+  padding: 0.25rem 0.5rem;
   clear: both;
   text-align: inherit;
   white-space: nowrap;
   background-color: transparent;
   color: inherit;
-  border: 1px solid transparent;
-}
-.sg-dropdown-item:hover {
-  background-color: #2c3136;
+  border: 2px solid transparent;
 }
 .sg-dropdown-item.active, .sg-dropdown-item:active {
   background-color: #2a2e33;
@@ -2896,42 +3785,53 @@
   opacity: 0.5;
 }
 .sg-dropdown-item.sg-dropdown-item-visual-focus {
-  background-color: #2c3136;
+  /*
+  background-color: $sg-dropdown-item-hover-bg;
   border-top: 1px solid white;
   border-bottom: 1px solid white;
+  */
+  background-color: color-mix(in oklab, rgb(252, 95, 95), transparent 50%);
+  border: 2px outset color-mix(in oklab, rgb(252, 95, 95), currentColor 20%);
+}
+
+a.sg-dropdown-item {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+[data-nav=true] .sg-dropdown-item {
+  font-size: 0.85rem;
 }
 
 .sg-form-floating {
   position: relative;
-  --sg-form-floating-height: calc(3.5rem + 2px);
-}
-.sg-form-floating > .sg-form-control, .sg-form-floating > .sg-form-control-plaintext, .sg-form-floating > .sg-form-select {
-  height: var(--sg-form-floating-height);
+  --height: calc(3rem + 2px);
+  --text-color: white;
 }
-.sg-form-floating > .sg-form-control, .sg-form-floating > .sg-form-control-plaintext {
-  padding-inline: 1rem;
+.sg-form-floating > .sg-form-control, .sg-form-floating > .sg-form-control-plaintext, .sg-form-floating > .sg-form-select, .sg-form-floating > .sg-form-select-tag {
+  height: var(--height);
+  padding-inline: 1.25rem;
 }
-.sg-form-floating > .sg-form-control::placeholder, .sg-form-floating > .sg-form-control-plaintext::placeholder {
+.sg-form-floating > .sg-form-control::placeholder, .sg-form-floating > .sg-form-control-plaintext::placeholder, .sg-form-floating > .sg-form-select::placeholder, .sg-form-floating > .sg-form-select-tag::placeholder {
   color: transparent;
 }
-.sg-form-floating > .sg-form-control:focus, .sg-form-floating > .sg-form-control:not(:placeholder-shown), .sg-form-floating > .sg-form-control-plaintext:focus, .sg-form-floating > .sg-form-control-plaintext:not(:placeholder-shown) {
-  padding-top: 1.5rem;
+.sg-form-floating > .sg-form-control:focus, .sg-form-floating > .sg-form-control:not(:placeholder-shown), .sg-form-floating > .sg-form-control-plaintext:focus, .sg-form-floating > .sg-form-control-plaintext:not(:placeholder-shown), .sg-form-floating > .sg-form-select:focus, .sg-form-floating > .sg-form-select:not(:placeholder-shown), .sg-form-floating > .sg-form-select-tag:focus, .sg-form-floating > .sg-form-select-tag:not(:placeholder-shown) {
+  padding-top: 1.25rem;
 }
-.sg-form-floating > .sg-form-control:-webkit-autofill, .sg-form-floating > .sg-form-control-plaintext:-webkit-autofill {
-  padding-top: 1.5rem;
+.sg-form-floating > .sg-form-control:-webkit-autofill, .sg-form-floating > .sg-form-control-plaintext:-webkit-autofill, .sg-form-floating > .sg-form-select:-webkit-autofill, .sg-form-floating > .sg-form-select-tag:-webkit-autofill {
+  padding-top: 1.25rem;
 }
 .sg-form-floating > .sg-form-floating-label {
   position: absolute;
   top: 0;
   left: 0;
-  color: #212529;
+  color: var(--text-color);
   width: 100%;
   height: 100%;
   padding-inline: 1rem;
-  padding-block: 1rem;
-  border-radius: 50%;
+  padding-block: 0.75rem;
   pointer-events: none;
-  transition: 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out;
   transform-origin: 0 0;
   z-index: 5;
   text-overflow: ellipsis;
@@ -2944,28 +3844,33 @@
 .sg-form-floating > .sg-form-control:focus ~ .sg-form-floating-label,
 .sg-form-floating > .sg-form-control:not(:placeholder-shown) ~ .sg-form-floating-label,
 .sg-form-floating > .sg-form-control-plaintext ~ .sg-form-floating-label,
-.sg-form-floating > .sg-form-select ~ .sg-form-floating-label {
-  padding: 0.5rem 0.75rem;
+.sg-form-floating > .sg-form-select ~ .sg-form-floating-label,
+.sg-form-floating > .sg-form-select-tag ~ .sg-form-floating-label {
+  font-size: 0.75rem;
+  height: fit-content;
+  padding: 0.5rem 0.5rem;
   transform: translate(0, -0.25rem);
   opacity: 0.75;
 }
 
 .sg-form-check {
+  --input-background-color: rgb(26, 27, 29);
+  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  --input-border-color-focus: rgb(252, 95, 95);
+  --input-border-color-invalid: hsl(48, 75%, 52%);
   display: block;
   min-height: 1.4em;
-  padding-left: 1.4em;
-  margin-bottom: 0.125em;
+  padding-bottom: 0.5rem;
 }
 .sg-form-check .sg-form-check-input {
   float: left;
-  margin-left: -1.4em;
 }
 
 .sg-form-check-reverse {
   display: block;
   min-height: 1.4em;
   padding-right: 1.4em;
-  margin-bottom: 0.125em;
+  padding-bottom: 0.5rem;
   text-align: right;
 }
 .sg-form-check-reverse .sg-form-check-input {
@@ -2974,94 +3879,210 @@
   margin-left: 0;
 }
 
+/*
+@media (prefers-color-scheme: dark) {
+  .sg-form-check {
+    --input-background-color: #ffffff;
+    --input-border-color: color-mix(in oklab, white, rgb(26, 27, 29) 25%);
+    --input-border-color-focus: color-mix(in oklab, rgb(252, 95, 95), black 25%);
+    --input-border-color-invalid: color-mix(in oklab, hsl(48, 75%, 52%), black 25%);
+  }
+
+}
+  */
 .sg-form-check-input {
-  width: 1em;
-  height: 1em;
-  margin-top: 0.2em;
-  vertical-align: top;
-  background-color: white;
+  margin-right: 1ch;
+  width: calc(1.4em - 2px);
+  height: calc(1.4em - 2px);
+  background-color: var(--input-background-color);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
-  border: 1px;
   appearance: none;
   print-color-adjust: exact;
+  border: 2px outset var(--input-border-color);
 }
 .sg-form-check-input[type=checkbox] {
-  border-radius: 0.25em;
+  border-radius: 0;
+  background-clip: padding-box;
+}
+.sg-form-check-input[type=checkbox]:indeterminate {
+  background-color: var(--input-border-color-focus);
+  border-color: var(--input-border-color-focus);
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='rgb(26, 27, 29)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
 }
 .sg-form-check-input[type=radio] {
   border-radius: 50%;
 }
+.sg-form-check-input[type=color] {
+  width: 3em;
+  height: calc(2.15em + 4px);
+  padding: 0.375em;
+}
+.sg-form-check-input[type=color]:not(:disabled):not([readonly]) {
+  cursor: pointer;
+}
+.sg-form-check-input[type=color]::-moz-color-swatch {
+  border: 0 !important;
+  border-radius: 0;
+}
+.sg-form-check-input[type=color]::-webkit-color-swatch {
+  border-radius: 0;
+}
 .sg-form-check-input:active {
   filter: brightness(90%);
 }
 .sg-form-check-input:focus-visible {
-  box-shadow: 0 0 0 3px white;
-  outline: 2px solid #0d6efd;
-  z-index: 5;
-  border: 1px solid white;
-}
-.sg-form-check-input:checked {
-  background-color: #0d6efd;
-  border-color: #0d6efd;
+  border-color: var(--input-border-color-focus);
+  outline: 0;
+  box-shadow: 0;
 }
 .sg-form-check-input:checked[type=checkbox] {
-  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
+  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><polygon style='fill:rgb(252, 95, 95);' points='11.941,28.877 0,16.935 5.695,11.24 11.941,17.486 26.305,3.123 32,8.818'/></svg>");
 }
 .sg-form-check-input:checked[type=radio] {
-  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='-4 -4 8 8'><circle r='2' fill='white' /></svg>");
+  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='-4 -4 8 8'><circle r='2' fill='rgb(252, 95, 95)' /></svg>");
 }
-.sg-form-check-input:checked:focus-visible {
-  border: 1px solid white;
-}
-.sg-form-check-input[type=checkbox]:indeterminate {
-  background-color: #0d6efd;
-  border-color: #0d6efd;
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
-}
-.sg-form-check-input:disabled {
-  pointer-events: none;
-  filter: none;
-  opacity: 0.5;
+.sg-form-check-input:disabled, .sg-form-check-input .disabled {
+  --input-background-color: rgba(255, 255, 255, 0.04);
+  --input-text-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  cursor: not-allowed;
+  filter: none;
+  opacity: 0.5;
 }
 .sg-form-check-input[disabled] ~ .form-check-label, .sg-form-check-input:disabled ~ .form-check-label {
   cursor: default;
   opacity: 0.5;
 }
+.sg-form-check-input:user-invalid, .sg-form-check-input.invalid {
+  box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
+}
 
-.sg-form-switch {
-  padding-left: 2.5em;
+.sg-form-check-label {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
 }
+
 .sg-form-switch .sg-form-check-input {
   width: 2em;
-  margin-left: -2.5em;
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(0, 0, 0, 0.25)'/></svg>");
+  margin-right: 1ch;
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='color-mix(in oklab, rgb(26, 27, 29), white 25%)'/></svg>");
   background-position: left center;
   border-radius: 2em;
   transition: background-position 0.15s ease-in-out;
 }
 .sg-form-switch .sg-form-check-input:focus-visible {
-  box-shadow: 0 0 0 3px white;
-  outline: 2px solid #0d6efd;
-  z-index: 5;
+  border-color: var(--input-border-color-focus);
+  outline: 0;
+  box-shadow: 0;
 }
 .sg-form-switch .sg-form-check-input:checked {
   background-position: right center;
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='white'/></svg>");
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(252, 95, 95)'/></svg>");
+}
+
+.sg-form-check-border {
+  position: relative;
+  padding: 2px;
+  width: fit-content;
+  height: fit-content;
+  margin-right: 1ch;
+  overflow: hidden;
+  --border-opacity: 0;
+  box-shadow: 50% 50% 0 white;
+}
+.sg-form-check-border:focus-within {
+  --border-opacity: 1;
+}
+.sg-form-check-border::before {
+  content: "";
+  opacity: var(--border-opacity);
+  display: block;
+  position: absolute;
+  top: 25%;
+  left: -25%;
+  width: 150%;
+  height: 50%;
+  background-image: conic-gradient(from 0deg, white, white 50%);
+  z-index: -2;
+  animation: spin 3s linear;
+  animation-direction: forwards;
+  animation-iteration-count: infinite;
+}
+.sg-form-check-border::after {
+  content: "";
+  opacity: var(--border-opacity);
+  display: block;
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: calc(4px + 100%);
+  height: calc(4px + 100%);
+  background-color: transparent;
+  clip-path: rect(-2px 100% 100% -2px);
+  z-index: -1;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(-45deg);
+  }
+  50% {
+    transform: rotate(45deg);
+  }
+  100% {
+    transform: rotate(-45deg);
+  }
+}
+.sg-input-group-grid > .sg-form-check {
+  position: relative;
+  padding-bottom: 0;
+}
+.sg-input-group-grid > .sg-form-check > .sg-form-check-label {
+  display: block;
+}
+.sg-input-group-grid > .sg-form-check .sg-form-check-input {
+  margin: 0;
+  height: 100%;
+  width: auto;
+  aspect-ratio: 1;
+}
+.sg-input-group-grid > .sg-form-check span {
+  display: flex;
+  flex: 0 1 auto;
+  overflow: auto;
+  width: fit-content;
+  max-width: 8rem;
+  align-items: center;
+  text-align: center;
+  font-size: 0.85rem;
+  padding: 0.375em 0.5em;
+  white-space: nowrap;
+  background-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  color: white;
+  border: 2px outset color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  border-right-width: 0;
+  border-radius: 0;
 }
 
 .sg-form-control {
+  --input-text-color: white;
+  --input-background-color: rgb(26, 27, 29);
+  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  --input-border-color-focus: rgb(252, 95, 95);
+  --input-border-color-invalid: hsl(48, 75%, 52%);
+  --input-disabled-color: #e9ecef;
+  --input-placeholder-color: rgba(255, 255, 255, 0.336);
   position: relative;
   display: block;
   width: 100%;
+  min-width: 5rem;
   padding: 0.375em 0.5em;
-  color: #212529;
-  background-color: white;
-  background-clip: padding-box;
-  border: 1px solid #ced4da;
-  appearance: none;
-  border-radius: 0.375em;
+  color: var(--input-text-color);
+  background-color: var(--input-background-color);
+  border: 2px outset var(--input-border-color);
+  border-radius: 0;
+  caret-color: white;
   transition: border-color 0.15s ease-in-out;
 }
 .sg-form-control[type=file] {
@@ -3071,19 +4092,22 @@
   cursor: pointer;
 }
 .sg-form-control:focus-visible {
-  box-shadow: 0 0 0 3px white;
-  outline: 2px solid #0d6efd;
-  z-index: 5;
+  border-color: var(--input-border-color-focus);
+  outline: 0;
+  box-shadow: 0;
 }
 .sg-form-control::-webkit-date-and-time-value {
   height: 1.4em;
 }
 .sg-form-control::placeholder {
-  color: #6c757d;
+  color: var(--input-placeholder-color);
   opacity: 1;
 }
-.sg-form-control:disabled {
-  background-color: #e9ecef;
+.sg-form-control:disabled, .sg-form-control .disabled {
+  --input-background-color: rgba(255, 255, 255, 0.04);
+  --input-placeholder-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  --input-text-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  cursor: not-allowed;
   opacity: 1;
 }
 .sg-form-control::file-selector-button {
@@ -3094,12 +4118,15 @@
   border-color: inherit;
   border-style: solid;
   border-width: 0;
-  border-inline-end-width: 1px;
+  border-inline-end-width: 2px;
   border-radius: 0;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 .sg-form-control:hover:not(:disabled):not([readonly])::file-selector-button {
-  background-color: #1f2327;
+  background-color: color-mix(in oklab, var(--input-text-color), black 5%);
+}
+.sg-form-control:user-invalid, .sg-form-control.invalid {
+  box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
 }
 
 .sg-form-control-plaintext {
@@ -3107,76 +4134,1099 @@
   width: 100%;
   padding: 0.375em 0;
   margin-bottom: 0;
-  color: #212529;
+  color: var(--input-text-color);
   background-color: transparent;
   border: solid transparent;
-  border-width: 1px 0;
-}
-.sg-form-control-plaintext:focus-visible {
-  outline: 0;
+  border-width: 2px 0;
 }
 
 textarea.sg-form-control {
-  min-height: calc(2.15em + 2px);
+  min-height: calc(2.15em + 4px);
+  margin: 0;
 }
 
-.sg-form-control-color {
-  width: 3em;
-  height: calc(2.15em + 2px);
-  padding: 0.375em;
+.sg-form-group {
+  padding-bottom: 0.5rem;
+  display: flex;
+  flex-direction: column;
 }
-.sg-form-control-color:not(:disabled):not([readonly]) {
-  cursor: pointer;
+.sg-form-group label {
+  margin-bottom: 0.5rem;
 }
-.sg-form-control-color::-moz-color-swatch {
-  border: 0 !important;
-  border-radius: 0.375em;
+.sg-form-group.sg-form-group-vertical {
+  flex-direction: row;
+  align-items: center;
 }
-.sg-form-control-color::-webkit-color-swatch {
-  border-radius: 0.375em;
+.sg-form-group.sg-form-group-vertical label {
+  min-width: max-content;
+  margin-right: 0.5rem;
+  margin-bottom: 0;
+}
+.sg-form-group .sg-form-check {
+  padding-bottom: 0;
 }
 
 .sg-form-label {
   margin-bottom: 0.5em;
 }
 
-.sg-form-select {
+.sg-form-slider {
+  --slider-height: 1.75rem;
+  --slider-filled-color: rgb(252, 95, 95);
+  --slider-filled-border-color: color-mix(in oklab, rgb(252, 95, 95), black 20%);
+  --slider-empty-color: rgb(26, 27, 29);
+  --slider-empty-border-color: color-mix(in oklab, color-mix(in oklab, rgb(26, 27, 29), white 25%), black 15%);
+  --padding-block-fraction: 1/3;
+  --slider-thumb-width: 1.5rem;
+  --slider-thumb-height: 0.5rem;
+  --slider-thumb-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  --filled: 40%;
+  display: grid;
+  grid-template-columns: var(--filled) auto calc(100% - var(--filled));
+  position: relative;
+  height: var(--slider-height);
+  padding-block: calc(var(--slider-height) * var(--padding-block-fraction));
+  padding-inline: calc(var(--slider-thumb-width) * 0.5);
+}
+.sg-form-slider:hover {
+  --slider-filled-color: color-mix(in oklab, rgb(252, 95, 95), black 15%);
+  --slider-filled-border-color: color-mix(in oklab, rgb(252, 95, 95), black 35%);
+  --slider-empty-color: color-mix(in oklab, rgb(26, 27, 29), black 15%);
+  --slider-empty-border-color: color-mix(in oklab, color-mix(in oklab, rgb(26, 27, 29), white 25%), black 25%);
+}
+.sg-form-slider .sg-form-slider-filled {
+  display: block;
+  background-color: var(--slider-filled-color);
+  border: 1px outset var(--slider-filled-border-color);
+  border-left: none;
+  border-right: none;
+  height: 100%;
+  width: 100%;
+}
+.sg-form-slider .sg-form-slider-filled::before {
+  --cap-height: calc( 1 - 2*var(--padding-block-fraction));
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: calc(100% * var(--padding-block-fraction));
+  height: calc(100% * var(--cap-height));
+  width: calc(var(--slider-thumb-width) * 0.5);
+  background-color: var(--slider-filled-color);
+  border: 1px outset var(--slider-filled-border-color);
+  border-right: none;
+  left: 0;
+}
+.sg-form-slider .sg-form-slider-thumb {
+  cursor: grab;
+  position: relative;
+  display: block;
+  height: 100%;
+}
+.sg-form-slider .sg-form-slider-thumb[data-grabbing=true] {
+  cursor: grabbing;
+}
+.sg-form-slider .sg-form-slider-thumb:focus-visible {
+  --slider-thumb-border-color: white;
+}
+.sg-form-slider .sg-form-slider-thumb::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  left: calc(var(--slider-thumb-width) * -0.5);
+  top: calc(-1 * var(--padding-block-fraction) * 100%);
+  height: calc((2 * var(--padding-block-fraction) + 1) * 100%);
+  width: var(--slider-thumb-width);
+  background-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  border: 2px outset var(--slider-thumb-border-color);
+}
+.sg-form-slider .sg-form-slider-thumb:focus-visible {
+  --focus-outline: 2px outset $danger;
+  outline: 0;
+  box-shadow: none;
+}
+.sg-form-slider .sg-form-slider-empty {
+  display: block;
+  background-color: var(--slider-empty-color);
+  border: 1px outset var(--slider-empty-border-color);
+  border-left: none;
+  border-right: none;
+  height: 100%;
+  width: 100%;
+}
+.sg-form-slider .sg-form-slider-empty::after {
+  --cap-height: calc( 1 - 2*var(--padding-block-fraction));
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: calc(100% * var(--padding-block-fraction));
+  height: calc(100% * var(--cap-height));
+  width: calc(var(--slider-thumb-width) * 0.5);
+  background-color: var(--slider-empty-color);
+  border: 1px outset var(--slider-empty-border-color);
+  border-left: none;
+  right: 0;
+  z-index: -1;
+}
+
+.sg-form-select-tag {
+  --input-text-color: white;
+  --input-background-color: rgb(26, 27, 29);
+  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  --input-border-color-focus: rgb(252, 95, 95);
+  --input-border-color-invalid: hsl(48, 75%, 52%);
+  --input-disabled-color: #e9ecef;
   position: relative;
   display: block;
   width: 100%;
   padding-block: 0.375em;
   padding-inline: 0.5em 1.5em;
-  color: #212529;
-  background-color: white;
+  color: var(--input-text-color);
+  background-color: var(--input-background-color);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 0.375em center;
   background-size: 1em 0.75em;
-  border: 1px solid #ced4da;
-  border-radius: 0.375em;
+  border: 2px outset var(--input-border-color);
+  border-radius: 0;
   appearance: none;
 }
-.sg-form-select:focus-visible {
-  box-shadow: 0 0 0 3px white;
-  outline: 2px solid #0d6efd;
-  z-index: 5;
+.sg-form-select-tag:focus-visible, .sg-form-select-tag:focus {
+  border-color: var(--input-border-color-focus);
+  outline: 0;
+  box-shadow: 0;
+}
+.sg-form-select-tag[multiple], .sg-form-select-tag[size]:not([size="1"]) {
+  padding-right: 0.375em;
+  background-image: none;
+}
+.sg-form-select-tag:disabled, .sg-form-select-tag .disabled {
+  --input-background-color: rgba(255, 255, 255, 0.04);
+  --input-placeholder-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  --input-text-color: color-mix(in oklab, rgba(255, 255, 255, 0.336), white 40%);
+  cursor: not-allowed;
+  opacity: 1;
+}
+.sg-form-select-tag.invalid, .sg-form-select-tag:user-invalid {
+  box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
+}
+
+.sg-form-select {
+  --input-text-color: white;
+  --input-background-color: rgb(26, 27, 29);
+  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  --input-border-color-focus: rgb(252, 95, 95);
+  --input-border-color-invalid: hsl(48, 75%, 52%);
+  --input-disabled-color: #e9ecef;
+  position: relative;
+  display: block;
+  width: 100%;
+  color: white;
+}
+
+.sg-select-control {
+  width: 100%;
+  height: fit-content;
+  padding-block: 0.375em;
+  padding-inline: 0.5em 1.5em;
+  color: inherit;
+  background-color: rgb(26, 27, 29);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.375em center;
+  background-size: 1em 0.75em;
+  border: 2px solid color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  border-radius: 0;
+}
+.sg-select-control:focus-within {
+  border-color: rgb(252, 95, 95);
+  outline: 0;
+  box-shadow: 0;
+}
+.sg-select-control.invalid {
+  border-color: hsl(48, 75%, 52%);
+}
+
+.sg-select-input {
+  background-color: inherit;
+  border: none;
+  height: 100%;
+  max-width: 80%;
+  color: inherit;
+}
+.sg-select-input[multiple], .sg-select-input[size]:not([size="1"]) {
+  padding-right: 0.375em;
+  background-image: none;
+}
+.sg-select-input:disabled {
+  color: inherit;
+  background-color: inherit;
+  opacity: 1;
+}
+.sg-select-input:focus, .sg-select-input:focus-within, .sg-select-input:focus-visible {
+  border-color: transparent;
+  outline: none;
+}
+.sg-select-input::placeholder {
+  color: rgba(255, 255, 255, 0.336);
+  opacity: 1;
+}
+
+.sg-select-list {
+  --bg-color: rgb(26, 27, 29);
+  --txt-color: black;
+  background-color: var(--bg-color);
+  color: inherit;
+  position: absolute;
+  top: calc(100% + 1px);
+  width: 100%;
+  padding: 0;
+  border-radius: 0;
+  border: 2px outset color-mix(in oklab, #212529, white 60%);
+  list-style-type: none;
+}
+
+.sg-select-list-item {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.85rem;
+  border: 2px solid transparent;
+}
+.sg-select-list-item.focus {
+  background-color: color-mix(in oklab, rgb(252, 95, 95), transparent 50%);
+  border: 2px outset color-mix(in oklab, rgb(252, 95, 95), currentColor 20%);
+}
+.sg-select-list-item.focus:active {
+  background-color: color-mix(in oklab, rgb(252, 95, 95), transparent 60%);
+  border: 2px outset color-mix(in oklab, rgb(252, 95, 95), currentColor 30%);
+}
+.sg-select-list-item:first-child {
+  border-top-right-radius: inherit;
+  border-top-left-radius: inherit;
+}
+.sg-select-list-item:last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.sg-form-text {
+  font-size: 0.75em;
+  padding-inline: 0.5em;
+  opacity: 0.8;
+  margin-top: 0.25em;
+}
+
+.sg-row {
+  --sg-gutter-x: 1.5rem;
+  --sg-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--sg-gutter-y));
+  margin-right: calc(-0.5 * var(--sg-gutter-x));
+  margin-left: calc(-0.5 * var(--sg-gutter-x));
+}
+.sg-row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--sg-gutter-x) * 0.5);
+  padding-left: calc(var(--sg-gutter-x) * 0.5);
+  margin-top: var(--sg-gutter-y);
+}
+
+.sg-col {
+  flex: 1 0 0%;
+}
+
+.sg-row-cols-auto > * {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.sg-row-cols-1 > * {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.sg-row-cols-2 > * {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.sg-row-cols-3 > * {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+}
+
+.sg-row-cols-4 > * {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.sg-row-cols-5 > * {
+  flex: 0 0 auto;
+  width: 20%;
+}
+
+.sg-row-cols-6 > * {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+}
+
+.sg-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.sg-col-1 {
+  flex: 0 0 auto;
+  width: 8.3333333333%;
+}
+
+.sg-col-2 {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+}
+
+.sg-col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.sg-col-4 {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+}
+
+.sg-col-5 {
+  flex: 0 0 auto;
+  width: 41.6666666667%;
+}
+
+.sg-col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.sg-col-7 {
+  flex: 0 0 auto;
+  width: 58.3333333333%;
+}
+
+.sg-col-8 {
+  flex: 0 0 auto;
+  width: 66.6666666667%;
+}
+
+.sg-col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+}
+
+.sg-col-10 {
+  flex: 0 0 auto;
+  width: 83.3333333333%;
+}
+
+.sg-col-11 {
+  flex: 0 0 auto;
+  width: 91.6666666667%;
+}
+
+.sg-col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.sg-offset-1 {
+  margin-left: 8.3333333333%;
+}
+
+.sg-offset-2 {
+  margin-left: 16.6666666667%;
+}
+
+.sg-offset-3 {
+  margin-left: 25%;
+}
+
+.sg-offset-4 {
+  margin-left: 33.3333333333%;
+}
+
+.sg-offset-5 {
+  margin-left: 41.6666666667%;
+}
+
+.sg-offset-6 {
+  margin-left: 50%;
+}
+
+.sg-offset-7 {
+  margin-left: 58.3333333333%;
+}
+
+.sg-offset-8 {
+  margin-left: 66.6666666667%;
+}
+
+.sg-offset-9 {
+  margin-left: 75%;
+}
+
+.sg-offset-10 {
+  margin-left: 83.3333333333%;
+}
+
+.sg-offset-11 {
+  margin-left: 91.6666666667%;
+}
+
+@media (min-width: 576px) {
+  .sg-col-sm {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-sm-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-sm-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-sm-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-sm-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-sm-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-sm-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-sm-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-sm-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-sm-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-sm-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-sm-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-sm-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-sm-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-sm-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-sm-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-sm-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-sm-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-sm-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-sm-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-sm-0 {
+    margin-left: 0;
+  }
+  .sg-offset-sm-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-sm-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-sm-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-sm-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-sm-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-sm-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-sm-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-sm-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-sm-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-sm-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-sm-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 768px) {
+  .sg-col-md {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-md-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-md-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-md-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-md-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-md-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-md-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-md-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-md-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-md-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-md-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-md-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-md-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-md-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-md-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-md-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-md-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-md-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-md-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-md-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-md-0 {
+    margin-left: 0;
+  }
+  .sg-offset-md-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-md-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-md-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-md-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-md-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-md-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-md-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-md-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-md-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-md-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-md-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 992px) {
+  .sg-col-lg {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-lg-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-lg-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-lg-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-lg-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-lg-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-lg-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-lg-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-lg-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-lg-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-lg-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-lg-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-lg-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-lg-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-lg-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-lg-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-lg-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-lg-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-lg-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-lg-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-lg-0 {
+    margin-left: 0;
+  }
+  .sg-offset-lg-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-lg-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-lg-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-lg-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-lg-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-lg-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-lg-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-lg-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-lg-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-lg-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-lg-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 1200px) {
+  .sg-col-xl {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-xl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-xl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-xl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-xl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-xl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-xl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-xl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-xl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-xl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-xl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-xl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-xl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-xl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-xl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-xl-0 {
+    margin-left: 0;
+  }
+  .sg-offset-xl-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-xl-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-xl-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-xl-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-xl-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-xl-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-xl-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-xl-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-xl-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-xl-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-xl-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 1400px) {
+  .sg-col-xxl {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-xxl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-xxl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-xxl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-xxl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-xxl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-xxl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-xxl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-xxl-0 {
+    margin-left: 0;
+  }
+  .sg-offset-xxl-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-xxl-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-xxl-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-xxl-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-xxl-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-xxl-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-xxl-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-xxl-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-xxl-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-xxl-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-xxl-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+/* Containers */
+.sg-container,
+.sg-container-fluid,
+.sg-container-xxl,
+.sg-container-xl,
+.sg-container-lg,
+.sg-container-md,
+.sg-container-sm {
+  --sg-gutter-x: 1.5rem;
+  --sg-gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--sg-gutter-x) * 0.5);
+  padding-left: calc(var(--sg-gutter-x) * 0.5);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .sg-container-sm, .sg-container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .sg-container-md, .sg-container-sm, .sg-container {
+    max-width: 720px;
+  }
 }
-.sg-form-select[multiple], .sg-form-select[size]:not([size="1"]) {
-  padding-right: 0.375em;
-  background-image: none;
+@media (min-width: 992px) {
+  .sg-container-lg, .sg-container-md, .sg-container-sm, .sg-container {
+    max-width: 960px;
+  }
 }
-.sg-form-select:disabled {
-  background-color: #e9ecef;
-  opacity: 1;
+@media (min-width: 1200px) {
+  .sg-container-xl, .sg-container-lg, .sg-container-md, .sg-container-sm, .sg-container {
+    max-width: 1140px;
+  }
 }
-
-.sg-form-text {
-  font-size: 0.75em;
-  padding-inline: 0.5em;
-  opacity: 0.8;
-  margin-top: 0.25em;
+@media (min-width: 1400px) {
+  .sg-container-xxl, .sg-container-xl, .sg-container-lg, .sg-container-md, .sg-container-sm, .sg-container {
+    max-width: 1320px;
+  }
 }
-
 .sg-input-group {
   display: flex;
   flex-wrap: wrap;
@@ -3186,10 +5236,10 @@ textarea.sg-form-control {
 .sg-input-group > .sg-form-control,
 .sg-input-group > .sg-form-control-plaintext,
 .sg-input-group > .sg-form-select,
-.sg-input-group > .sg-form-floating {
+.sg-input-group > .sg-form-select-tag {
   flex: 1 1 auto;
   width: 1%;
-  min-width: 0;
+  min-width: 5rem;
 }
 .sg-input-group > .sg-button, .sg-input-group > button {
   position: relative;
@@ -3198,81 +5248,213 @@ textarea.sg-form-control {
 .sg-input-group > :not(:first-child):not(:last-child) {
   border-radius: 0;
 }
-.sg-input-group > :not(:first-child):not(:last-child).sg-form-floating > .sg-form-control, .sg-input-group > :not(:first-child):not(:last-child).sg-form-floating > .sg-form-select {
-  border-radius: 0;
-}
 .sg-input-group > :first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.sg-input-group > :first-child.sg-form-floating > .sg-form-control, .sg-input-group > :first-child.sg-form-floating > .sg-form-select {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
 .sg-input-group > :last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.sg-input-group > :last-child.sg-form-floating > .sg-form-control, .sg-input-group > :last-child.sg-form-floating > .sg-form-select {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
 
 .sg-input-group-text {
   display: flex;
+  flex: 0 1 auto;
+  overflow: auto;
   width: fit-content;
+  max-width: 8rem;
   align-items: center;
   text-align: center;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   padding: 0.375em 0.5em;
   white-space: nowrap;
-  background-color: #e9ecef;
-  color: #212529;
-  border: 1px solid #dde0e3;
-  border-radius: 0.375em;
+  background-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  color: white;
+  border: 2px outset color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  border-right-width: 0;
+  border-radius: 0;
+}
+
+.sg-form-control + .sg-input-group-text {
+  border-left-width: 0;
+  border-right-width: 2px;
+}
+
+.sg-input-group-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  align-items: stretch;
+  padding-bottom: 0.5rem;
+}
+.sg-input-group-grid > .sg-input-group, .sg-input-group-grid > .sg-form-floating {
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 13rem;
+  padding-bottom: 0;
+}
+
+.sg-list {
+  --padding: 0rem;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  padding-left: var(--padding);
+}
+.sg-list span {
+  display: list-item;
+}
+.sg-list .sg-list {
+  --padding: 0.5rem;
+}
+
+.sg-sublist {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sg-list-label {
+  background-color: black;
+}
+
+.sg-list-item {
+  margin: 0;
+  background-color: black;
+}
+.sg-list-item > * {
+  user-select: inherit;
+}
+
+.moving {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1010;
+}
+
+.phantom {
+  position: relative;
+  display: list-item;
+  border: 1px solid transparent;
+  margin-left: calc((var(--depth) - 1) * 0.5rem);
+  transition: all 0.2s ease-in-out;
+  outline: 2px solid red;
+  animation: size 0.3s ease-in-out;
 }
 
+@keyframes size {
+  from {
+    height: 10px;
+  }
+}
 .sg-modal-tag::backdrop {
   z-index: 1060;
-  background: hsla(0, 0%, 0%, 0.5);
+  background: hsl(0, 0%, 0%);
+  opacity: 0.75;
+  animation-name: fadeInBackdrop;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+.sg-modal-tag::backdrop.close {
+  background: transparent;
+  opacity: 0;
+  animation-name: fadeInBackdrop;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: backwards;
 }
 
+@keyframes fadeInBackdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+@keyframes fadeOutBackdrop {
+  from {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 0;
+  }
+}
 .sg-modal-tag {
+  --height: fit-content;
   z-index: 1061;
   padding: 0;
-  margin: 2rem;
-  width: 100%;
-  height: fit-content;
+  top: 10%;
+  height: var(--height);
+  max-height: 80%;
+  margin-right: auto;
+  margin-left: auto;
   color: white;
-  background-color: #2e3236;
+  background-color: #212529;
   background-clip: padding-box;
-  border: 1px solid white;
-  border-radius: 0.5rem;
-  outline: 0;
+  border: 2px outset color-mix(in oklab, #212529, currentColor 60%);
+  flex-direction: column;
+  overflow: auto;
 }
-.sg-modal.sg-modal-static .sg-modal-tag {
-  transition: transform 0.3s ease-out;
-  transform: scale(1.02);
+.sg-modal-tag[open=""] {
+  display: grid;
+  width: 100%;
+  grid-template-rows: [header-start] auto [header-end body-start] 1fr [body-end footer-start] auto [footer-end];
+  animation-name: slide-in-up;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+.sg-modal-tag.close {
+  animation: scale-down 0.3s ease-in-out;
+  animation-fill-mode: forwards;
+}
+.sg-modal-tag > form {
+  display: grid;
+  grid-template-rows: [body-start] 1fr [body-end footer-start] auto [footer-end];
+}
+@supports (grid-template-rows: subgrid) {
+  .sg-modal-tag > form {
+    grid-row-start: body-start;
+    grid-row-end: footer-end;
+    grid-template-rows: subgrid;
+  }
+}
+.sg-modal-tag > form .sg-modal-body {
+  grid-row: body;
+}
+.sg-modal-tag > form .sg-moda-footer {
+  grid-row: footer;
 }
 
-.sg-modal-dialog-centered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100dvh;
-  max-width: 100dvw;
-  margin: 0;
+@keyframes scale-down {
+  to {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+}
+@keyframes slide-in-up {
+  from {
+    transform: translateY(-10%);
+    opacity: 0.5;
+  }
+}
+.sg-modal-fill {
+  margin: auto;
+  top: 0;
+  height: 100%;
+  width: 100%;
 }
 
 .sg-modal-header {
+  grid-row: header;
   display: flex;
-  flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem;
-  border-bottom: 1px solid white;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+  margin: 0;
 }
 .sg-modal-header .sg-button-close {
   padding: 0.5rem 0.5rem;
@@ -3280,55 +5462,105 @@ textarea.sg-form-control {
 }
 
 .sg-modal-title {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 .sg-modal-body {
+  grid-row: body;
   position: relative;
-  flex: 1 1 auto;
   padding: 1rem;
-  background-color: #43474a;
+  background-color: color-mix(in oklab, #212529, currentColor 5%);
+  min-height: fit-content;
+  overflow: auto;
+}
+.sg-modal-body p {
+  margin: 0;
 }
 
 .sg-modal-footer {
+  grid-row: footer;
   display: flex;
   flex-shrink: 0;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem;
-  background-color: #2e3236;
-  border-top: 1px solid white;
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  background-color: #212529;
   gap: 0.5rem;
 }
 
-@media (max-width: 575px) {
-  .sg-modal-tag {
-    margin: 0.5rem;
-  }
+.sg-modal-sm {
+  max-width: 300px;
 }
-@media (min-width: 576px) {
+
+.sg-modal-md {
+  max-width: 500px;
+}
+
+.sg-modal-lg {
+  max-width: 700px;
+}
+
+@media (max-width: 324px) {
   .sg-modal-tag {
-    max-width: 500px;
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .sg-modal-sm {
-    max-width: 300px;
+    margin: auto;
+    top: 0;
+    width: 100%;
   }
 }
-@media (min-width: 992px) {
-  .modal-lg, .modal-xl {
-    max-width: 800px;
+@media (min-width: 325px) and (max-width: 575px) {
+  .sg-modal-md, .sg-modal-lg {
+    max-width: 300px;
   }
 }
-@media (min-width: 1200px) {
-  .modal-xl {
-    max-width: 1140px;
+@media (min-width: 576px) and (max-width: 767px) {
+  .sg-modal-lg {
+    max-width: 500px;
   }
 }
+@media (min-width: 768px) {
+  .sg-modal-lg {
+    max-width: 700px;
+  }
+}
+/*
+@each $breakpoint, $value in $grid-breakpoints {
+  @if $breakpoint == "xs" {
+    @media (max-width: 575px) {
+      .sg-modal-tag {
+        margin: 0.5rem auto;
+      }
+    }
+  }
+  @if $breakpoint == "sm" {
+    @media (min-width: 576px) {
+      .sg-modal-tag {
+        max-width: 500px;
+        margin-right: auto;
+        margin-left: auto;
+      }
+      .sg-modal-sm {
+        max-width: 300px
+      }
+    }
+  }
+  @else if $breakpoint == "lg" {
+    @media (min-width: 992px) {
+      .modal-lg, .modal-xl {
+        max-width: 800px;
+      }
+    }
+  }
+  @else if $breakpoint == "xl" {
+    @media (min-width: 1200px) {
+      .modal-xl {
+        max-width: 1140px;
+      }
+    }
+  }
+}
+*/
+/*
 .sg-modal-open {
   overflow: hidden;
 }
@@ -3337,24 +5569,25 @@ textarea.sg-form-control {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1050;
+  z-index: $zindex-modal-backdrop;
   width: 100vw;
   height: 100vh;
   background-color: black;
-}
-.sg-modal-backdrop.fadeIn {
-  animation-name: fadeInBackdrop;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-.sg-modal-backdrop.fadeOut {
-  animation-name: fadeOutBackdrop;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
 
+  // Fade for backdrop
+  &.fadeIn {
+    animation-name: fadeInBackdrop;
+    animation-duration: .3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+  }
+  &.fadeOut {
+    animation-name: fadeOutBackdrop;
+    animation-duration: .3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+  }
+}
 @keyframes fadeInBackdrop {
   0% {
     opacity: 0;
@@ -3371,94 +5604,113 @@ textarea.sg-form-control {
     opacity: 0;
   }
 }
-.sg-modal {
+
+.sg-modal { //scroll ocntainer
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1060;
+  z-index: $zindex-modal;
   display: block;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
   outline: 0;
+  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+  // See also https://github.com/twbs/bootstrap/issues/17695
 }
 
-.sg-modal-dialog {
-  z-index: 1061;
+.sg-modal-dialog { //shell to position modal with bottom-padding
+  z-index: calc($zindex-modal + 1);
   position: relative;
   width: auto;
-  margin: 2rem;
+  margin: calc(4 * $sg-modal-margin);
+  // allow clicks to pass through for custom click handling to close modal
   pointer-events: none;
-}
-.sg-modal.fadeIn .sg-modal-dialog {
-  animation-name: fadeIn;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-.sg-modal.fadeOut .sg-modal-dialog {
-  animation-name: fadeOut;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-    top: -50px;
-  }
-  100% {
-    opacity: 1;
-    top: 0px;
+
+  // slide down animation
+  .sg-modal.fadeIn & {
+    animation-name: fadeIn;
+    animation-duration: .3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+    //transition: $sg-modal-transition;
+    //transform: translate(0, -50px);
+  }
+  .sg-modal.fadeOut & {
+    animation-name: fadeOut;
+    animation-duration: .3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+    //transition: $sg-modal-transition;
+    //transform: translate(0, -50px);
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      top: -50px;
+    }
+    100% {
+      opacity: 1;
+      top: 0px;
+    }
   }
-}
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-    top: 0px;
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+      top: 0px;
+    }
+    100% {
+      opacity: 0;
+      top: -50px;
+    }
   }
-  100% {
-    opacity: 0;
-    top: -50px;
+
+  // make modal flash onBlur if static backdrop
+  .sg-modal.sg-modal-static & {
+    transition: $sg-modal-transition;
+    transform: scale(1.02);
   }
 }
-.sg-modal.sg-modal-static .sg-modal-dialog {
-  transition: transform 0.3s ease-out;
-  transform: scale(1.02);
-}
 
 .sg-modal-dialog-scrollable {
-  height: calc(100% - 1rem);
-}
-.sg-modal-dialog-scrollable .sg-modal-content {
-  max-height: 100%;
-  overflow: hidden;
-}
-.sg-modal-dialog-scrollable .sg-modal-body {
-  overflow-y: auto;
-}
+  height: calc(100% - $sg-modal-margin * 2);
+
+  .sg-modal-content {
+    max-height: 100%;
+    overflow: hidden;
+  }
 
+  .sg-modal-body {
+    overflow-y: auto;
+  }
+}
 .sg-modal-dialog-centered {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100dvh;
   max-width: 100dvw;
-  margin: 0;
+  margin:0;
 }
 
 .sg-modal-content {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 100%;
-  color: white;
+  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+  // counteract the pointer-events: none; in the .modal-dialog
+  color: $sg-modal-text-color;
   pointer-events: auto;
-  background-color: #2e3236;
+  background-color: $sg-modal-background-color;
   background-clip: padding-box;
-  border: 1px solid white;
-  border-radius: 0.5rem;
+  border: 1px solid $sg-modal-text-color;
+  border-radius: $sg-modal-radius;
+  // Remove focus outline from opened modal
   outline: 0;
 }
 
@@ -3466,17 +5718,16 @@ textarea.sg-form-control {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: 0.75rem;
-  border-bottom: 1px solid white;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-}
-.sg-modal-header .sg-button-close {
-  padding: 0.5rem 0.5rem;
-  margin: -0.25rem -0.25rem -0.25rem auto;
-}
+  border-bottom: 1px solid $sg-modal-text-color;
+  @include border-top-radius($sg-modal-radius);
 
+  .sg-button-close {
+    padding: 0.5rem 0.5rem;
+    margin: calc(-.5 * $sg-modal-margin) calc(-.5 * $sg-modal-margin) calc(-.5 * $sg-modal-margin) auto;
+  }
+}
 .sg-modal-title {
   margin-bottom: 0;
 }
@@ -3485,48 +5736,64 @@ textarea.sg-form-control {
   position: relative;
   flex: 1 1 auto;
   padding: 1rem;
-  background-color: #43474a;
-}
-
-.sg-modal-footer {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0.75rem;
-  background-color: #2e3236;
-  border-top: 1px solid white;
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-  gap: 0.5rem;
-}
-
-@media (max-width: 575px) {
-  .sg-modal-dialog {
-    margin: 0.5rem;
-  }
-}
-@media (min-width: 576px) {
-  .sg-modal-dialog {
-    max-width: 500px;
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .sg-modal-sm {
-    max-width: 300px;
-  }
-}
-@media (min-width: 992px) {
-  .modal-lg, .modal-xl {
-    max-width: 800px;
-  }
+  background-color: color.mix(white,$sg-modal-background-color, 10%);
 }
-@media (min-width: 1200px) {
-  .modal-xl {
-    max-width: 1140px;
-  }
+.sg-modal-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.75rem;
+  background-color: $sg-modal-background-color;
+  border-top: 1px solid $sg-modal-text-color;
+  @include border-bottom-radius($sg-modal-radius);
+
+  gap: 0.5rem;
 }
+
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ) !default;
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
+
+@each $breakpoint, $value in $grid-breakpoints {
+  @if $breakpoint == "xs" {
+    @media (max-width: 575px) {
+      .sg-modal-dialog {
+        margin: 0.5rem;
+      }
+    }
+  }
+  @if $breakpoint == "sm" {
+    @media (min-width: 576px) {
+      .sg-modal-dialog {
+        max-width: 500px;
+        margin-right: auto;
+        margin-left: auto;
+      }
+      .sg-modal-sm {
+        max-width: 300px
+      }
+    }
+  }
+  @else if $breakpoint == "lg" {
+    @media (min-width: 992px) {
+      .modal-lg, .modal-xl {
+        max-width: 800px;
+      }
+    }
+  }
+  @else if $breakpoint == "xl" {
+    @media (min-width: 1200px) {
+      .modal-xl {
+        max-width: 1140px;
+      }
+    }
+  }
+}
+*/
 .sg-nav {
   display: flex;
   flex-wrap: wrap;
@@ -3536,36 +5803,64 @@ textarea.sg-form-control {
 }
 
 .sg-nav-link {
-  display: block;
-  padding: 0.5rem 1rem;
+  padding: 0.25rem 0.5rem;
   text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-block: auto;
+  color: var(--sg-navbar-link-color);
+  font-size: 0.85rem;
+}
+.sg-nav-link:hover {
+  color: var(--sg-navbar-hover-color);
 }
 .sg-nav-link.disabled {
   pointer-events: none;
   cursor: default;
 }
 
+[data-navdropdown=true] .sg-nav-link {
+  color: var(--sg-navbar-hover-color);
+  font-size: 0.85rem;
+  text-decoration: none;
+}
+
 .sg-nav-item {
   margin-block: auto;
 }
 
 .sg-navbar {
-  --sg-navbar-bg: #212529;
-  --sg-navbar-color: rgba(white, .55);
-  --sg-navbar-hover-color: rgba(white, .75);
-  --sg-navbar-disabled-color: rgba(white, .25);
+  --sg-navbar-bg: rgb(26, 27, 29);
+  --sg-navbar-text-color: white;
+  --sg-navbar-link-color: rgb(252, 95, 95);
+  --sg-navbar-hover-color: white;
+  --sg-navbar-disabled-color: rgb(180, 180, 180);
   --sg-navbar-active-color: white;
-  --sg-navbar-brand-color: white;
-  --sg-navbar-brand-hover-color: white;
-  background-color: --sg-navbar-bg;
-  position: relative;
+  --sg-navbar-zindex: $zindex-navbar;
+  background-color: var(--sg-navbar-bg);
+  background: linear-gradient(71deg, var(--sg-navbar-bg), color-mix(in srgb, var(--sg-navbar-bg), var(--sg-navbar-hover-color) 5%), var(--sg-navbar-bg), color-mix(in srgb, var(--sg-navbar-bg), var(--sg-navbar-hover-color) 5%), var(--sg-navbar-bg));
+  width: 100%;
+  min-height: fit-content;
+  z-index: 990;
+  box-sizing: border-box;
+  border: 2px outset color-mix(in srgb, white 5%, var(--sg-navbar-bg));
+  border-bottom: 2px solid var(--sg-navbar-link-color);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   padding: 0.5rem 0rem;
+  position: sticky;
+  top: 0;
+  left: 0;
 }
 .sg-navbar > .container-xxl, .sg-navbar > .container-xl, .sg-navbar > .container-lg, .sg-navbar > .container-md, .sg-navbar > .container-sm, .sg-navbar > .sg-container,
-.sg-navbar > .sg-container-fluid {
+.sg-navbar > .sg-container-fluid,
+.sg-navbar > .sg-container-sm,
+.sg-navbar > .sg-container-md,
+.sg-navbar > .sg-container-lg,
+.sg-navbar > .sg-container-xl,
+.sg-navbar > .sg-container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
@@ -3576,23 +5871,25 @@ textarea.sg-form-control {
   padding-bottom: 0.25rem;
   margin-inline: 1rem;
   margin-block: auto;
-  color: var(--sg-navbar-brand-color);
+  color: var(--sg-navbar-link-color);
   text-decoration: none;
   white-space: nowrap;
 }
 .sg-navbar-brand:hover, .sg-navbar-brand:focus {
-  color: var(--sg-navbar-brand-hover-color);
+  color: var(--sg-navbar-hover-color);
   text-decoration: none;
 }
 
 .sg-navbar-nav {
   --nav-link-padding-x: 0;
   --nav-link-padding-y: 0.5rem;
-  --nav-link-color: var(--sg-navbar-color);
-  --nav-link-hover-color: var(--sg-navbar-hover-color);
-  --nav-link-disabled-color: var(--sg-navbar-disabled-color);
+  --nav-link-color: $sg-link-color;
+  --nav-link-hover-color: $sg-link-hover-color;
+  --nav-link-disabled-color: $sg-link-disable-color;
+  margin: 0;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
@@ -3608,7 +5905,7 @@ textarea.sg-form-control {
 .sg-navbar-text {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  color: var(--sg-navbar-color);
+  color: var(--sg-navbar-active-color);
 }
 .sg-navbar-text a,
 .sg-navbar-text a:hover,
@@ -3624,32 +5921,272 @@ textarea.sg-form-control {
 .sg-nav-dropdown-toggle {
   background-color: transparent;
   display: block;
-  padding: 0.25rem 0.5rem;
-  color: white;
+  padding: 0.5em 1em;
+  color: var(--sg-navbar-link-color);
   text-decoration: none;
-  border-radius: 0.375rem;
+  border-radius: 0;
   border: 1px solid transparent;
+  cursor: pointer;
 }
 .sg-nav-dropdown-toggle:hover, .sg-nav-dropdown-toggle:focus {
-  border-color: white;
   background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--sg-navbar-hover-color);
 }
 .sg-nav-dropdown-toggle:active {
   background-color: transparent;
 }
+.sg-nav-dropdown-toggle:focus-visible, .sg-nav-dropdown-toggle:focus {
+  border: 1px solid transparent;
+}
+.sg-nav-dropdown-toggle[aria-expanded=true] {
+  color: var(--sg-navbar-hover-color);
+}
 .sg-nav-dropdown-toggle.disabled {
   color: rgba(0, 0, 0, 0.24);
   pointer-events: none;
   cursor: default;
 }
 
+.sg-offCanvas-open {
+  overflow: hidden;
+}
+
+.sg-offCanvas-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  width: 100vw;
+  height: 100vh;
+  background-color: black;
+}
+.sg-offCanvas-backdrop.fadeIn {
+  animation-name: fadeInBackdrop;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+.sg-offCanvas-backdrop.fadeOut {
+  animation-name: fadeOutBackdrop;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInBackdrop {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+@keyframes fadeOutBackdrop {
+  0% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.sg-offCanvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1060;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+}
+
+.sg-offCanvas-dialog {
+  z-index: 1061;
+  position: relative;
+  width: auto;
+  max-height: 100vh;
+  pointer-events: none;
+}
+.sg-offCanvas.fadeIn .sg-offCanvas-dialog {
+  animation-name: fadeIn;
+  animation-duration: 0.6s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+.sg-offCanvas.fadeOut .sg-offCanvas-dialog {
+  animation-name: fadeOut;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.sg-offCanvas-content {
+  --sg-offcanvas-size: 478px;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  color: white;
+  pointer-events: auto;
+  background-color: #2e3236;
+  background-clip: padding-box;
+  outline: 0;
+  transition: transform 0.3s ease-in-out;
+  /*
+  &.sg-offCanvas-footer {
+      display: flex;
+      flex-shrink: 0;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0.75em;
+      background-color: $sg-offCanvas-background-color;
+      border-top: 1px solid $sg-offCanvas-text-color;
+      @include border-bottom-radius($sg-offCanvas-radius);
+
+      gap: 0.5em;
+  }
+  */
+}
+.sg-offCanvas-content.sg-offcanvas-start {
+  top: 0;
+  left: 0;
+  width: var(--sg-offcanvas-size);
+  border-right: 1px solid #2e3236;
+  transform: translateX(-100%);
+}
+.sg-offCanvas-content.sg-offcanvas-end {
+  top: 0;
+  right: 0;
+  width: var(--sg-offcanvas-size);
+  border-left: 1px solid #2e3236;
+  transform: translateX(100%);
+}
+.sg-offCanvas-content.sg-offcanvas-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: var(--sg-offcanvas-size);
+  max-height: 100%;
+  border-bottom: 1px solid #2e3236;
+  transform: translateY(-100%);
+}
+.sg-offCanvas-content.sg-offcanvas-bottom {
+  right: 0;
+  left: 0;
+  height: var(--sg-offcanvas-size);
+  max-height: 100%;
+  border-top: 1px solid #2e3236;
+  transform: translateY(100%);
+}
+.sg-offCanvas-content.sg-slide-in {
+  transform: none;
+}
+.sg-offCanvas-content.sg-offCanvas-static {
+  transition: transform 0.3s ease-out;
+  transform: scaleX(1.02);
+}
+.sg-offCanvas-content .sg-offCanvas-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1em;
+}
+.sg-offCanvas-content .sg-offCanvas-header .sg-button-close {
+  padding: 0.5em 0.5em;
+  margin: -0.25em -0.25em -0.25em auto;
+}
+.sg-offCanvas-content .sg-offCanvas-title {
+  margin-bottom: 0;
+}
+.sg-offCanvas-content .sg-offCanvas-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: 1em;
+  background-color: #43474a;
+  overflow: auto;
+}
+
+/*
+$offCanvas-lg: 800px !default;
+$offCanvas-xl: 1140px !default;
+
+$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ) !default;
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
+
+@each $breakpoint, $value in $grid-breakpoints {
+  @if $breakpoint == "xs" {
+    @media (max-width: 575px) {
+      .sg-offCanvas-dialog {
+        margin: 0.5em;
+      }
+    }
+  }
+  @if $breakpoint == "sm" {
+    @media (min-width: 576px) {
+      .sg-offCanvas-dialog {
+        max-width: 500px;
+        margin-right: auto;
+        margin-left: auto;
+      }
+      .sg-offCanvas-sm {
+        max-width: 300px
+      }
+    }
+  }
+  @else if $breakpoint == "lg" {
+    @media (min-width: 992px) {
+      .offCanvas-lg, .offCanvas-xl {
+        max-width: 800px;
+      }
+    }
+  }
+  @else if $breakpoint == "xl" {
+    @media (min-width: 1200px) {
+      .offCanvas-xl {
+        max-width: 1140px;
+      }
+    }
+  }
+}
+*/
+.sg-overlay-wrapper {
+  max-width: 100%;
+  max-height: 100%;
+  z-index: 1010;
+}
+
 .sg-overlay-arrow {
+  --width: 15px;
+  --height: 20px;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"> <polygon points="1,1 1,19, 14,10" fill="black" stroke-width="1.5" stroke="black" /> </svg>');
   background-repeat: no-repeat no-repeat;
   background-position: center center;
   background-size: cover;
-  height: 20px;
-  width: 15px;
+  height: var(--height);
+  width: var(--width);
   z-index: 1010;
 }
 .sg-overlay-arrow.overlay-position-right {
@@ -3665,6 +6202,30 @@ textarea.sg-form-control {
   transform: rotate(270deg);
 }
 
+.sg-tooltip-arrow {
+  --width: 10px;
+  --heigth: 15px;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 15 15"> <polygon points="1,1 1,14, 9,7" fill="black" stroke-width="1.5" stroke="black" /> </svg>');
+}
+
+.sg-tooltip-wrapper {
+  --input-text-color: white;
+  --input-background-color: rgb(26, 27, 29);
+  --input-border-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  font-size: 0.8rem;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 12rem;
+  padding: 0.375em 0.5em;
+  color: var(--input-text-color);
+  background-color: var(--input-background-color);
+  border: 2px outset var(--input-border-color);
+  border-radius: 0;
+}
+.sg-tooltip-wrapper > * {
+  font-size: 0.8rem;
+}
+
 .sg-moveable-popout {
   --popout-index: 1010;
   position: absolute;
@@ -3686,7 +6247,7 @@ textarea.sg-form-control {
   user-select: inherit;
   margin-bottom: 0;
   padding: 0.25em 0.5em;
-  background-color: #212529;
+  background-color: color-mix(in hsl, white 3%, #212529);
   border-bottom: 1px solid white;
 }
 .sg-moveable-popout .sg-popout-header > * {
@@ -3695,6 +6256,9 @@ textarea.sg-form-control {
 .sg-moveable-popout .sg-popout-header:first-child {
   border-radius: 0.375em 0.375em 0 0;
 }
+.sg-moveable-popout[data-move=true] {
+  touch-action: none;
+}
 .sg-moveable-popout[data-move=true] .sg-popout-header {
   cursor: move;
 }
@@ -3702,12 +6266,12 @@ textarea.sg-form-control {
   flex: 1 1 auto;
   padding: 0.5em;
   user-select: inherit;
-  background-color: color-mix(in srgb, white 4%, #212529);
+  background-color: color-mix(in srgb, white 4%, color-mix(in hsl, white 3%, #212529));
 }
 .sg-moveable-popout .sg-popout-footer {
   user-select: inherit;
   padding: 0.25em 0.5em;
-  background-color: #212529;
+  background-color: color-mix(in hsl, white 3%, #212529);
   border-top: 1px solid white;
 }
 .sg-moveable-popout .sg-popout-footer:last-child {
@@ -3730,25 +6294,163 @@ textarea.sg-form-control {
   background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
 }
 
+.sg-spinner {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  border: 0.2em solid white;
+  border-right-color: transparent;
+  margin: auto;
+  animation-name: spinny;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes spinny {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.sg-table {
+  --sg-table-padding: $sg-table-padding;
+  width: 100%;
+  margin-bottom: 1rem;
+  color: black;
+  vertical-align: top;
+  border-color: black;
+}
+.sg-table > :not(caption) > * > * {
+  padding: 0.5rem 0.5rem;
+  background-color: transparent;
+  border-bottom-width: 1px;
+  box-shadow: inset 0 0 0 9999px transparent;
+}
+.sg-table > tbody {
+  vertical-align: inherit;
+}
+.sg-table > thead {
+  vertical-align: bottom;
+}
+
+.sg-caption-top {
+  caption-side: top;
+}
+
+.sg-table-sm > :not(caption) > * > * {
+  padding: 0.25rem 0.25rem;
+}
+
 .sg-tabs {
   width: 100%;
+  display: grid;
+  grid-template-rows: [control-start] auto [control-end page-start] 100% [page-end];
 }
 
 .sg-tabs-controls {
+  --border-bottom-color: white;
+  --border-width: 2px;
+  grid-row: control;
+  position: relative;
   display: flex;
   flex-direction: row;
+  background-color: #212529;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.sg-tabs-controls::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: var(--border-width);
+  background-color: var(--border-bottom-color);
+}
+@media (prefers-reduce-motion: no-preference) {
+  .sg-tabs-controls {
+    scroll-behavior: smooth;
+  }
+}
+.sg-tabs-controls > * {
+  flex: 0 0 auto;
 }
 
 .sg-tabs-button {
+  --border-color: #212529;
+  --text-color: rgb(252, 95, 95);
+  --background-color: #212529;
+  --hover-background-color: color-mix(in srgb, black 15%, #212529);
+  --active-background-color: color-mix(in srgb, black 25%, #212529);
+  position: relative;
   display: block;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  padding: 0.375rem 0.75rem;
+  border: var(--border-width) solid var(--border-color);
+  border-bottom-color: var(--border-bottom-color);
+  font-size: 0.85rem;
+}
+.sg-tabs-button::after, .sg-tabs-button::before {
+  content: "";
+  position: absolute;
+  width: var(--border-width);
+  height: var(--border-width);
+  bottom: calc(-1 * var(--border-width));
+  left: calc(-1 * var(--border-width));
+  background-color: var(--border-bottom-color);
+  z-index: 2;
+}
+.sg-tabs-button::after {
+  left: unset;
+  right: calc(-1 * var(--border-width));
+}
+.sg-tabs-button:hover {
+  background-color: var(--hover-background-color);
+}
+.sg-tabs-button:active {
+  background-color: var(--active-background-color);
 }
 .sg-tabs-button.sg-active {
-  background-color: #202020;
-  color: white;
+  border: 2px solid var(--border-bottom-color);
+  border-bottom: 2px solid var(--sg-body-bg);
+}
+.sg-tabs-button.sg-tabs-scroll-button {
+  position: sticky;
+  left: 0;
+  height: 100%;
+  aspect-ratio: 1;
+  padding: 0;
+  z-index: 2;
+}
+.sg-tabs-button.sg-tabs-scroll-button svg {
+  position: relative;
+  top: 0;
+  left: 0;
+}
+.sg-tabs-button.sg-tabs-scroll-button[data-position=right] {
+  position: sticky;
+  left: unset;
+  right: 0;
+}
+.sg-tabs-button.sg-tabs-scroll-button:first-child {
+  border-right-color: var(--border-bottom-color);
+}
+.sg-tabs-button.sg-tabs-scroll-button:first-child::after {
+  bottom: unset;
+  top: calc(-1 * var(--border-width));
+}
+.sg-tabs-button.sg-tabs-scroll-button:last-child {
+  border-left-color: var(--border-bottom-color);
+}
+.sg-tabs-button.sg-tabs-scroll-button:last-child::before {
+  bottom: unset;
+  top: calc(-1 * var(--border-width));
 }
 
 .sg-tabs-content {
   width: 100%;
+  grid-row: page;
 }
 
 .sg-tabs-page {
@@ -3756,7 +6458,9 @@ textarea.sg-form-control {
 }
 .sg-tabs-page.sg-active {
   display: flex;
-  flex-direction: row;
+  flex-wrap: wrap;
+  flex-direction: column;
+  padding-block: 1rem;
 }
 
 /*# sourceMappingURL=stargazerui.css.map */