stargazer-ui 1.0.31 → 1.2.0

package/styles/stargazerui.css

@@ -7,15 +7,15 @@
   --sg-highlight-bg: #fff3cd;
   --sg-link-color: #fc5d5d;
   --sg-link-hover-color: color.mix(black, #E15554, 15%);
-  --primary: color-mix(in srgb, black 42%, #4D9DE0);
-  --secondary: #6c757d;
-  --success: color-mix(in srgb, black 44%, hsl(148, 70%, 42%));
-  --info: #7768AE;
-  --warning: #E1BC29;
-  --danger: #fc5f5f;
-  --light: #f8f9fa;
-  --dark: #212529;
-  --red-2: #f87171;
+  --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;
@@ -85,10 +85,6 @@ body {
   border-top-right-radius: 0;
 }
 
-:focus-visible {
-  z-index: 9999;
-}
-
 .flex-column {
   display: flex;
   flex-direction: column;
@@ -223,6 +219,460 @@ 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;
@@ -2737,6 +3187,7 @@ body {
 /* Tabs */
 /* Dropdown */
 /* Nav */
+/* Overlay */
 .sg-visually-hidden {
   position: absolute !important;
   width: 1px !important;
@@ -3345,35 +3796,33 @@ body {
 
 .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;
@@ -3386,13 +3835,20 @@ body {
 .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-bottom: 0.5rem;
@@ -3414,83 +3870,36 @@ body {
   margin-left: 0;
 }
 
-@property --spin-degree {
-  syntax: "<angle>";
-  initial-value: 40deg;
-  inherits: false;
-}
-.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);
+/*
+@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 {
   margin-right: 1ch;
   width: calc(1.4em - 2px);
   height: calc(1.4em - 2px);
-  background-color: rgb(26, 27, 29);
+  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 color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  border: 2px outset var(--input-border-color);
 }
 .sg-form-check-input[type=checkbox] {
   border-radius: 0;
   background-clip: padding-box;
 }
 .sg-form-check-input[type=checkbox]:indeterminate {
-  background-color: rgb(252, 95, 95);
-  border-color: rgb(252, 95, 95);
+  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] {
@@ -3515,7 +3924,7 @@ body {
   filter: brightness(90%);
 }
 .sg-form-check-input:focus-visible {
-  border-color: rgb(252, 95, 95);
+  border-color: var(--input-border-color-focus);
   outline: 0;
   box-shadow: 0;
 }
@@ -3535,7 +3944,7 @@ body {
   opacity: 0.5;
 }
 .sg-form-check-input:user-invalid, .sg-form-check-input.invalid {
-  box-shadow: 0 0 4px 2px hsl(48, 75%, 52%);
+  box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
 }
 
 .sg-form-check-label {
@@ -3553,7 +3962,7 @@ body {
   transition: background-position 0.15s ease-in-out;
 }
 .sg-form-switch .sg-form-check-input:focus-visible {
-  border-color: rgb(252, 95, 95);
+  border-color: var(--input-border-color-focus);
   outline: 0;
   box-shadow: 0;
 }
@@ -3562,15 +3971,104 @@ body {
   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;
   position: relative;
   display: block;
   width: 100%;
   min-width: 5rem;
   padding: 0.375em 0.5em;
-  color: white;
-  background-color: rgb(26, 27, 29);
-  border: 2px outset color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  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;
@@ -3582,7 +4080,7 @@ body {
   cursor: pointer;
 }
 .sg-form-control:focus-visible {
-  border-color: rgb(252, 95, 95);
+  border-color: var(--input-border-color-focus);
   outline: 0;
   box-shadow: 0;
 }
@@ -3594,7 +4092,7 @@ body {
   opacity: 1;
 }
 .sg-form-control:disabled {
-  background-color: #e9ecef;
+  background-color: var(--input-disabled-color);
   opacity: 1;
 }
 .sg-form-control::file-selector-button {
@@ -3610,10 +4108,10 @@ body {
   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: #f2f2f2;
+  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 hsl(48, 75%, 52%);
+  box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
 }
 
 .sg-form-control-plaintext {
@@ -3621,7 +4119,7 @@ body {
   width: 100%;
   padding: 0.375em 0;
   margin-bottom: 0;
-  color: white;
+  color: var(--input-text-color);
   background-color: transparent;
   border: solid transparent;
   border-width: 2px 0;
@@ -3629,6 +4127,7 @@ body {
 
 textarea.sg-form-control {
   min-height: calc(2.15em + 4px);
+  margin: 0;
 }
 
 .sg-form-group {
@@ -3648,271 +4147,135 @@ textarea.sg-form-control {
   margin-right: 0.5rem;
   margin-bottom: 0;
 }
+.sg-form-group .sg-form-check {
+  padding-bottom: 0;
+}
 
 .sg-form-label {
   margin-bottom: 0.5em;
 }
 
-/*
-@use 'sass:math';
-$track-color: #eceff1 !default;
-$thumb-color: #607d8b !default;
-
-$thumb-radius: 12px !default;
-$thumb-height: 24px !default;
-$thumb-width: 24px !default;
-$thumb-shadow-size: 4px !default;
-$thumb-shadow-blur: 4px !default;
-$thumb-shadow-color: rgba(0, 0, 0, .2) !default;
-$thumb-border-width: 2px !default;
-$thumb-border-color: #eceff1 !default;
-
-$track-width: 100% !default;
-$track-height: 8px !default;
-$track-shadow-size: 1px !default;
-$track-shadow-blur: 1px !default;
-$track-shadow-color: rgba(0, 0, 0, .2) !default;
-$track-border-width: 2px !default;
-$track-border-color: #cfd8dc !default;
-
-$track-radius: 5px !default;
-$contrast: 5% !default;
-
-$ie-bottom-track-color: darken($track-color, $contrast) !default;
-
-@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
-  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
-}
-
-@mixin track {
-  cursor: default;
-  height: $track-height;
-  transition: all .2s ease;
-  width: $track-width;
-}
-
-@mixin thumb {
-  @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
-  background: $thumb-color;
-  border: $thumb-border-width solid $thumb-border-color;
-  border-radius: $thumb-radius;
-  box-sizing: border-box;
-  cursor: default;
-  height: $thumb-height;
-  width: $thumb-width;
-}
-
 .sg-form-slider {
-    &[type='range'] {
-        -webkit-appearance: none;
-        background: transparent;
-        margin: math.div($thumb-height, 2) 0;
-        width: $track-width;
-
-        &::-moz-focus-outer {
-            border: 0;
-        }
-
-        &:focus {
-            outline: 0;
-
-            &::-webkit-slider-runnable-track {
-            background: lighten($track-color, $contrast);
-            }
-
-            &::-ms-fill-lower {
-            background: $track-color;
-            }
-
-            &::-ms-fill-upper {
-            background: lighten($track-color, $contrast);
-            }
-        }
-
-        &::-webkit-slider-runnable-track {
-            @include track;
-            @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-            background: $track-color;
-            border: $track-border-width solid $track-border-color;
-            border-radius: $track-radius;
-        }
-
-        &::-webkit-slider-thumb {
-            @include thumb;
-            -webkit-appearance: none;
-            margin-top: (math.div((-$track-border-width * 2 + $track-height), 2) - math.div($thumb-height, 2));
-        }
-
-        &::-moz-range-track {
-            @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-            @include track;
-            background: $track-color;
-            border: $track-border-width solid $track-border-color;
-            border-radius: $track-radius;
-            height: math.div($track-height, 2);
-        }
-
-        &::-moz-range-thumb {
-            @include thumb;
-        }
-
-        &::-ms-track {
-            @include track;
-            background: transparent;
-            border-color: transparent;
-            border-width: math.div($thumb-height, 2) 0;
-            color: transparent;
-        }
-
-        &::-ms-fill-lower {
-            @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-            background: $ie-bottom-track-color;
-            border: $track-border-width solid $track-border-color;
-            border-radius: ($track-radius * 2);
-        }
-
-        &::-ms-fill-upper {
-            @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-            background: $track-color;
-            border: $track-border-width solid $track-border-color;
-            border-radius: ($track-radius * 2);
-        }
-
-        &::-ms-thumb {
-            @include thumb;
-            margin-top: math.div($track-height, 4);
-        }
-
-        &:disabled {
-            &::-webkit-slider-thumb,
-            &::-moz-range-thumb,
-            &::-ms-thumb,
-            &::-webkit-slider-runnable-track,
-            &::-ms-fill-lower,
-            &::-ms-fill-upper {
-            cursor: not-allowed;
-            }
-        }
-    }
-}
-*/
-/*=============
-vertical input slider
-=========================*/
-.range {
-  transform: rotate(-90deg);
-}
-
-/* transform the value  */
-.value {
-  transform: rotate(90deg);
-}
-
-/*=============
-Adding tick marks
-=========================*/
-.range-slider {
-  flex: 1;
+  --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);
 }
-
-.sliderticks {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 10px;
+.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%);
 }
-
-.sliderticks span {
-  display: flex;
-  justify-content: center;
-  width: 1px;
-  height: 10px;
-  background: #d3d3d3;
-  line-height: 40px;
-}
-
-/*=============
-End tick marks
-=========================*/
-.sg-input-slider {
-  background-color: rgb(252, 95, 95);
-  /* Thumb: webkit */
-  /* Thumb: Firefox */
-  /* Hover, active & focus Thumb: Webkit */
-  /* Hover, active & focus Thumb: Firfox */
-}
-.sg-input-slider input[type=range] {
-  /* removing default appearance */
-  -webkit-appearance: none;
-  appearance: none;
-  /* creating a custom design */
+.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%;
-  cursor: pointer;
-  outline: none;
-  border-radius: 15px;
-  /*  overflow: hidden;  remove this line*/
-  /* New additions */
-  height: 6px;
-  background: #ccc;
-}
-.sg-input-slider input[type=range]::-webkit-slider-thumb {
-  /* removing default appearance */
-  -webkit-appearance: none;
-  appearance: none;
-  /* creating a custom design */
-  height: 15px;
-  width: 15px;
-  background-color: #f50;
-  border-radius: 50%;
-  border: none;
-  /* box-shadow: -407px 0 0 400px #f50; emove this line */
-  transition: 0.2s ease-in-out;
 }
-.sg-input-slider input[type=range]::-moz-range-thumb {
-  height: 15px;
-  width: 15px;
-  background-color: #f50;
-  border-radius: 50%;
-  border: none;
-  /* box-shadow: -407px 0 0 400px #f50; emove this line */
-  transition: 0.2s ease-in-out;
+.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-input-slider input[type=range]::-webkit-slider-thumb:hover {
-  box-shadow: 0 0 0 10px rgba(255, 85, 0, 0.1);
+.sg-form-slider .sg-form-slider-thumb {
+  cursor: grab;
+  position: relative;
+  display: block;
+  height: 100%;
 }
-.sg-input-slider input[type=range]:active::-webkit-slider-thumb {
-  box-shadow: 0 0 0 13px rgba(255, 85, 0, 0.2);
+.sg-form-slider .sg-form-slider-thumb[data-grabbing=true] {
+  cursor: grabbing;
 }
-.sg-input-slider input[type=range]:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 13px rgba(255, 85, 0, 0.2);
+.sg-form-slider .sg-form-slider-thumb:focus-visible {
+  --slider-thumb-border-color: white;
 }
-.sg-input-slider input[type=range]::-moz-range-thumb:hover {
-  box-shadow: 0 0 0 10px rgba(255, 85, 0, 0.1);
+.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-input-slider input[type=range]:active::-moz-range-thumb {
-  box-shadow: 0 0 0 13px rgba(255, 85, 0, 0.2);
+.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-input-slider input[type=range]:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 13px rgba(255, 85, 0, 0.2);
+.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;
 }
 
 .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: white;
-  background-color: rgb(26, 27, 29);
+  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: 2px outset color-mix(in oklab, rgb(26, 27, 29), white 25%);
+  border: 2px outset var(--input-border-color);
   border-radius: 0;
   appearance: none;
 }
 .sg-form-select-tag:focus-visible, .sg-form-select-tag:focus {
-  border-color: rgb(252, 95, 95);
+  border-color: var(--input-border-color-focus);
   outline: 0;
   box-shadow: 0;
 }
@@ -3921,14 +4284,20 @@ End tick marks
   background-image: none;
 }
 .sg-form-select-tag:disabled {
-  background-color: #e9ecef;
+  background-color: var(--input-disabled-color);
   opacity: 1;
 }
 .sg-form-select-tag.invalid, .sg-form-select-tag:user-invalid {
-  box-shadow: 0 0 4px 2px hsl(48, 75%, 52%);
+  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%;
@@ -4848,10 +5217,10 @@ End tick marks
 .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;
@@ -4860,40 +5229,52 @@ End tick marks
 .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;
+  background-color: color-mix(in oklab, rgb(26, 27, 29), white 25%);
   color: white;
-  border: 2px solid #dde0e3;
+  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;
@@ -4983,10 +5364,12 @@ End tick marks
   }
 }
 .sg-modal-tag {
+  --height: fit-content;
   z-index: 1061;
   padding: 0;
   top: 10%;
-  height: 80%;
+  height: var(--height);
+  max-height: 80%;
   margin-right: auto;
   margin-left: auto;
   color: white;
@@ -4998,7 +5381,8 @@ End tick marks
 }
 .sg-modal-tag[open=""] {
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  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;
@@ -5008,6 +5392,23 @@ End tick marks
   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;
+}
 
 @keyframes scale-down {
   to {
@@ -5029,6 +5430,7 @@ End tick marks
 }
 
 .sg-modal-header {
+  grid-row: header;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5045,10 +5447,11 @@ End tick marks
 }
 
 .sg-modal-body {
+  grid-row: body;
   position: relative;
   padding: 1rem;
   background-color: color-mix(in oklab, #212529, currentColor 5%);
-  min-height: 20ch;
+  min-height: fit-content;
   overflow: auto;
 }
 .sg-modal-body p {
@@ -5056,6 +5459,7 @@ End tick marks
 }
 
 .sg-modal-footer {
+  grid-row: footer;
   display: flex;
   flex-shrink: 0;
   flex-wrap: wrap;
@@ -5408,11 +5812,11 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 
 .sg-navbar {
   --sg-navbar-bg: rgb(26, 27, 29);
-  --sg-navbar-text-color: rgb(252, 95, 95);
-  --sg-navbar-link-color: white;
-  --sg-navbar-hover-color: rgb(252, 95, 95);
+  --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: rgb(252, 95, 95);
+  --sg-navbar-active-color: white;
   --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));
@@ -5747,13 +6151,21 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   }
 }
 */
+.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 {
@@ -5769,6 +6181,30 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   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;
@@ -5887,37 +6323,113 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 
 .sg-tabs {
   width: 100%;
+  display: grid;
+  grid-template-rows: [control-start] auto [control-end page-start] 1fr [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;
-  min-height: 2rem;
-  border-bottom: 1px solid white;
+  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: rgb(252, 95, 95);
-  background-color: #212529;
+  color: var(--text-color);
+  background-color: var(--background-color);
   padding: 0.375rem 0.75rem;
-  border: 2px solid #212529;
+  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: color-mix(in srgb, black 15%, #212529);
+  background-color: var(--hover-background-color);
 }
 .sg-tabs-button:active {
-  background-color: color-mix(in srgb, black 25%, #212529);
+  background-color: var(--active-background-color);
 }
 .sg-tabs-button.sg-active {
-  border: 2px solid rgb(252, 95, 95);
+  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 {