stargazer-ui 1.1.0 → 1.2.1

package/{styles → dev}/stargazerui.css

@@ -1,224 +1,3 @@
-: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 {
-  font-size: calc(1.375rem + 1.5vw);
-}
-
-@media (min-width: 1200px) {
-  h1, .h1 {
-    font-size: 2.5rem;
-  }
-}
-h2, .h2 {
-  font-size: calc(1.325rem + 0.9vw);
-}
-
-@media (min-width: 1200px) {
-  h2, .h2 {
-    font-size: 2rem;
-  }
-}
-h3, .h3 {
-  font-size: calc(1.3rem + 0.6vw);
-}
-
-@media (min-width: 1200px) {
-  h3, .h3 {
-    font-size: 1.75rem;
-  }
-}
-h4, .h4 {
-  font-size: calc(1.275rem + 0.3vw);
-}
-
-@media (min-width: 1200px) {
-  h4, .h4 {
-    font-size: 1.5rem;
-  }
-}
-h5, .h5 {
-  font-size: 1.25rem;
-}
-
-h6, .h6 {
-  font-size: 1rem;
-}
-
-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;
-}
-
 @media (min-width: 576px) {
   .float-sm-start {
     float: left !important;
@@ -2699,17 +2478,6 @@ label {
     text-align: center !important;
   }
 }
-:root {
-  --sg-body-bg: #212529;
-  --sg-body-color: white;
-}
-
-body {
-  background-color: var(--sg-body-bg);
-  color: var(--sg-body-color);
-  font-size: 18px;
-}
-
 /* Grid variables */
 /* z indices */
 /* Button */
@@ -2730,10 +2498,7 @@ body {
 }
 
 /* Table */
-/* Tabs */
 /* Dropdown */
-/* Nav */
-/* Overlay */
 .sg-visually-hidden {
   position: absolute !important;
   width: 1px !important;
@@ -2747,22 +2512,12 @@ body {
 }
 
 .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: 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;
+  border-radius: 0.375em;
 }
 .sg-card.sg-card-overlay {
+  background-color: #2e3236;
   color: white;
   border: 1px solid white;
 }
@@ -2773,197 +2528,24 @@ body {
 .sg-card .sg-card-header {
   margin-bottom: 0;
   padding: 0.5em 1em;
-  border-bottom: 1px solid var(--divider-color);
+  background-color: #212529;
+  border-bottom: 1px solid white;
 }
 .sg-card .sg-card-header:first-child {
-  border-top-left-radius: var(--card-border-radius);
-  border-top-right-radius: var(--card-border-radius);
-}
-.sg-card .sg-card-title {
-  margin: 0;
+  border-radius: 0.375em 0.375em 0 0;
 }
 .sg-card .sg-card-footer {
   padding: 0.5em 1em;
-  border-top: 1px solid var(--divider-color);
+  background-color: #212529;
+  border-top: 1px solid white;
 }
 .sg-card .sg-card-footer:last-child {
-  border-bottom-left-radius: var(--card-border-radius);
-  border-bottom-right-radius: var(--card-border-radius);
+  border-radius: 0 0 0.375em 0.375em;
 }
 .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;
@@ -3019,22 +2601,15 @@ body {
   --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: 2px outset color-mix(in oklab, var(--bg-color), var(--text-color) 20%);
+  border: 1px solid var(--border-color);
   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);
@@ -3043,20 +2618,25 @@ body {
 .sg-button:active {
   background-color: var(--bg-active-color);
   border-color: var(--border-active-color);
-  border-style: inset;
+}
+.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;
 }
 
 .sg-button-primary {
-  --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;
+  --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;
 }
 
 .sg-button-group > .btn-primary {
@@ -3083,16 +2663,16 @@ body {
 }
 
 .sg-button-success {
-  --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;
+  --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;
 }
 
 .sg-button-group > .btn-success {
@@ -3102,14 +2682,14 @@ body {
 
 .sg-button-info {
   --text-color: black;
-  --bg-color: #9184bd;
-  --border-color: #9184bd;
-  --bg-hover-color: #a296c7;
-  --border-hover-color: #a296c7;
-  --bg-active-color: #a79dca;
-  --border-active-color: #a79dca;
+  --bg-color: #0dcaf0;
+  --border-color: #0dcaf0;
+  --bg-hover-color: #31d2f2;
+  --border-hover-color: #31d2f2;
+  --bg-active-color: #3dd5f3;
+  --border-active-color: #3dd5f3;
   --focus-visible-border-color: black;
-  --focus-visible-outline-color: #9184bd;
+  --focus-visible-outline-color: #0dcaf0;
   --focus-visible-boxshadow-color: black;
 }
 
@@ -3120,14 +2700,14 @@ body {
 
 .sg-button-warning {
   --text-color: black;
-  --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;
+  --bg-color: #ffc107;
+  --border-color: #ffc107;
+  --bg-hover-color: #ffca2c;
+  --border-hover-color: #ffca2c;
+  --bg-active-color: #ffcd39;
+  --border-active-color: #ffcd39;
   --focus-visible-border-color: black;
-  --focus-visible-outline-color: hsl(48, 75%, 52%);
+  --focus-visible-outline-color: #ffc107;
   --focus-visible-boxshadow-color: black;
 }
 
@@ -3137,16 +2717,16 @@ body {
 }
 
 .sg-button-danger {
-  --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;
+  --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;
 }
 
 .sg-button-group > .btn-danger {
@@ -3246,23 +2826,25 @@ body {
   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;
+  padding: 0.5rem 0rem;
   margin: 0;
   text-align: left;
   list-style: none;
-  background-color: #212529;
+  background-color: #343a40;
   color: white;
   background-clip: padding-box;
-  border: 2px outset color-mix(in oklab, #212529, white 60%);
+  border: 1px solid white;
+  border-radius: 0.375rem;
+}
+.sg-dropdown-list[data-bs-popper] {
+  top: 100%;
+  left: 0;
+  margin-top: 0.125rem;
 }
 
 .sg-dropdown-list.show {
@@ -3282,26 +2864,6 @@ body {
   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);
@@ -3321,7 +2883,10 @@ body {
   white-space: nowrap;
   background-color: transparent;
   color: inherit;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
+}
+.sg-dropdown-item:hover {
+  background-color: #2c3136;
 }
 .sg-dropdown-item.active, .sg-dropdown-item:active {
   background-color: #2a2e33;
@@ -3331,43 +2896,42 @@ body {
   opacity: 0.5;
 }
 .sg-dropdown-item.sg-dropdown-item-visual-focus {
-  /*
-  background-color: $sg-dropdown-item-hover-bg;
+  background-color: #2c3136;
   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%);
 }
 
 .sg-form-floating {
   position: relative;
-  --sg-form-floating-height: calc(3rem + 2px);
+  --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, .sg-form-floating > .sg-form-select-tag {
+.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);
-  padding-inline: 1.25rem;
 }
-.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 {
+.sg-form-floating > .sg-form-control, .sg-form-floating > .sg-form-control-plaintext {
+  padding-inline: 1rem;
+}
+.sg-form-floating > .sg-form-control::placeholder, .sg-form-floating > .sg-form-control-plaintext::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), .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: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:-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-control:-webkit-autofill, .sg-form-floating > .sg-form-control-plaintext:-webkit-autofill {
+  padding-top: 1.5rem;
 }
 .sg-form-floating > .sg-form-floating-label {
   position: absolute;
   top: 0;
   left: 0;
-  color: white;
+  color: #212529;
   width: 100%;
   height: 100%;
   padding-inline: 1rem;
-  padding-block: 0.75rem;
+  padding-block: 1rem;
+  border-radius: 50%;
   pointer-events: none;
-  transition: transform 0.1s ease-in-out;
+  transition: 0.1s ease-in-out;
   transform-origin: 0 0;
   z-index: 5;
   text-overflow: ellipsis;
@@ -3380,33 +2944,28 @@ 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,
-.sg-form-floating > .sg-form-select-tag ~ .sg-form-floating-label {
-  font-size: 0.75rem;
-  height: fit-content;
-  padding: 0.5rem 0.5rem;
+.sg-form-floating > .sg-form-select ~ .sg-form-floating-label {
+  padding: 0.5rem 0.75rem;
   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;
+  padding-left: 1.4em;
+  margin-bottom: 0.125em;
 }
 .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;
-  padding-bottom: 0.5rem;
+  margin-bottom: 0.125em;
   text-align: right;
 }
 .sg-form-check-reverse .sg-form-check-input {
@@ -3415,69 +2974,51 @@ body {
   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 {
-  margin-right: 1ch;
-  width: calc(1.4em - 2px);
-  height: calc(1.4em - 2px);
-  background-color: var(--input-background-color);
+  width: 1em;
+  height: 1em;
+  margin-top: 0.2em;
+  vertical-align: top;
+  background-color: white;
   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;
-  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>");
+  border-radius: 0.25em;
 }
 .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 {
-  border-color: var(--input-border-color-focus);
-  outline: 0;
-  box-shadow: 0;
+  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;
 }
 .sg-form-check-input:checked[type=checkbox] {
-  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>");
+  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>");
 }
 .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='rgb(252, 95, 95)' /></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='white' /></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;
@@ -3488,103 +3029,39 @@ body {
   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-check-label {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
+.sg-form-switch {
+  padding-left: 2.5em;
 }
-
 .sg-form-switch .sg-form-check-input {
   width: 2em;
-  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>");
+  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>");
   background-position: left center;
   border-radius: 2em;
   transition: background-position 0.15s ease-in-out;
 }
 .sg-form-switch .sg-form-check-input:focus-visible {
-  border-color: var(--input-border-color-focus);
-  outline: 0;
-  box-shadow: 0;
+  box-shadow: 0 0 0 3px white;
+  outline: 2px solid #0d6efd;
+  z-index: 5;
 }
 .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='rgb(252, 95, 95)'/></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='white'/></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-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;
+.sg-form-control {
   position: relative;
   display: block;
   width: 100%;
-  min-width: 5rem;
   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;
-  caret-color: white;
+  color: #212529;
+  background-color: white;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  appearance: none;
+  border-radius: 0.375em;
   transition: border-color 0.15s ease-in-out;
 }
 .sg-form-control[type=file] {
@@ -3594,1145 +3071,125 @@ body {
   cursor: pointer;
 }
 .sg-form-control:focus-visible {
-  border-color: var(--input-border-color-focus);
-  outline: 0;
-  box-shadow: 0;
+  box-shadow: 0 0 0 3px white;
+  outline: 2px solid #0d6efd;
+  z-index: 5;
 }
 .sg-form-control::-webkit-date-and-time-value {
   height: 1.4em;
 }
 .sg-form-control::placeholder {
-  color: rgba(255, 255, 255, 0.336);
+  color: #6c757d;
   opacity: 1;
 }
 .sg-form-control:disabled {
-  background-color: var(--input-disabled-color);
+  background-color: #e9ecef;
   opacity: 1;
 }
 .sg-form-control::file-selector-button {
-  padding: 0.375em 0.5em;
-  margin: -0.375em -0.5em;
-  margin-inline-end: 0.375em;
-  pointer-events: none;
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-  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: 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 {
-  display: block;
-  width: 100%;
-  padding: 0.375em 0;
-  margin-bottom: 0;
-  color: var(--input-text-color);
-  background-color: transparent;
-  border: solid transparent;
-  border-width: 2px 0;
-}
-
-textarea.sg-form-control {
-  min-height: calc(2.15em + 4px);
-  margin: 0;
-}
-
-.sg-form-group {
-  padding-bottom: 0.5rem;
-  display: flex;
-  flex-direction: column;
-}
-.sg-form-group label {
-  margin-bottom: 0.5rem;
-}
-.sg-form-group.sg-form-group-vertical {
-  flex-direction: row;
-  align-items: center;
-}
-.sg-form-group.sg-form-group-vertical label {
-  min-width: max-content;
-  margin-right: 0.5rem;
-  margin-bottom: 0;
-}
-
-.sg-form-label {
-  margin-bottom: 0.5em;
-}
-
-.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;
-}
-
-.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: 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 var(--input-border-color);
-  border-radius: 0;
-  appearance: none;
-}
-.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 {
-  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 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%;
-  }
+  padding: 0.375em 0.5em;
+  margin: -0.375em -0.5em;
+  margin-inline-end: 0.375em;
+  pointer-events: none;
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+  border-inline-end-width: 1px;
+  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;
 }
-/* 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;
+
+.sg-form-control-plaintext {
+  display: block;
   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;
+  padding: 0.375em 0;
+  margin-bottom: 0;
+  color: #212529;
+  background-color: transparent;
+  border: solid transparent;
+  border-width: 1px 0;
+}
+.sg-form-control-plaintext:focus-visible {
+  outline: 0;
 }
 
-@media (min-width: 576px) {
-  .sg-container-sm, .sg-container {
-    max-width: 540px;
-  }
+textarea.sg-form-control {
+  min-height: calc(2.15em + 2px);
 }
-@media (min-width: 768px) {
-  .sg-container-md, .sg-container-sm, .sg-container {
-    max-width: 720px;
-  }
+
+.sg-form-control-color {
+  width: 3em;
+  height: calc(2.15em + 2px);
+  padding: 0.375em;
 }
-@media (min-width: 992px) {
-  .sg-container-lg, .sg-container-md, .sg-container-sm, .sg-container {
-    max-width: 960px;
-  }
+.sg-form-control-color:not(:disabled):not([readonly]) {
+  cursor: pointer;
 }
-@media (min-width: 1200px) {
-  .sg-container-xl, .sg-container-lg, .sg-container-md, .sg-container-sm, .sg-container {
-    max-width: 1140px;
-  }
+.sg-form-control-color::-moz-color-swatch {
+  border: 0 !important;
+  border-radius: 0.375em;
 }
-@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-form-control-color::-webkit-color-swatch {
+  border-radius: 0.375em;
+}
+
+.sg-form-label {
+  margin-bottom: 0.5em;
+}
+
+.sg-form-select {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-block: 0.375em;
+  padding-inline: 0.5em 1.5em;
+  color: #212529;
+  background-color: white;
+  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;
+  appearance: none;
+}
+.sg-form-select:focus-visible {
+  box-shadow: 0 0 0 3px white;
+  outline: 2px solid #0d6efd;
+  z-index: 5;
+}
+.sg-form-select[multiple], .sg-form-select[size]:not([size="1"]) {
+  padding-right: 0.375em;
+  background-image: none;
+}
+.sg-form-select:disabled {
+  background-color: #e9ecef;
+  opacity: 1;
 }
+
+.sg-form-text {
+  font-size: 0.75em;
+  padding-inline: 0.5em;
+  opacity: 0.8;
+  margin-top: 0.25em;
+}
+
 .sg-input-group {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   width: 100%;
-  padding-bottom: 0.5rem;
 }
 .sg-input-group > .sg-form-control,
 .sg-input-group > .sg-form-control-plaintext,
 .sg-input-group > .sg-form-select,
-.sg-input-group > .sg-form-select-tag {
+.sg-input-group > .sg-form-floating {
   flex: 1 1 auto;
   width: 1%;
-  min-width: 5rem;
+  min-width: 0;
 }
 .sg-input-group > .sg-button, .sg-input-group > button {
   position: relative;
@@ -4741,205 +3198,81 @@ 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.85rem;
+  font-size: 0.8rem;
   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 + .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;
+  background-color: #e9ecef;
+  color: #212529;
+  border: 1px solid #dde0e3;
+  border-radius: 0.375em;
 }
 
-@keyframes size {
-  from {
-    height: 10px;
-  }
-}
 .sg-modal-tag::backdrop {
   z-index: 1060;
-  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;
+  background: hsla(0, 0%, 0%, 0.5);
 }
 
-@keyframes fadeInBackdrop {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.5;
-  }
-}
-@keyframes fadeOutBackdrop {
-  from {
-    opacity: 0.5;
-  }
-  to {
-    opacity: 0;
-  }
-}
 .sg-modal-tag {
   z-index: 1061;
   padding: 0;
-  top: 10%;
-  height: 80%;
-  margin-right: auto;
-  margin-left: auto;
+  margin: 2rem;
+  width: 100%;
+  height: fit-content;
   color: white;
-  background-color: #212529;
+  background-color: #2e3236;
   background-clip: padding-box;
-  border: 2px outset color-mix(in oklab, #212529, currentColor 60%);
-  flex-direction: column;
-  overflow: auto;
-}
-.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 {
-  grid: body;
-  display: grid;
-  grid-template-rows: [body-start] 1fr [body-end footer-start] auto [footer-end];
-}
-.sg-modal-tag > form .sg-modal-body {
-  grid-row: body;
+  border: 1px solid white;
+  border-radius: 0.5rem;
+  outline: 0;
 }
-.sg-modal-tag > form .sg-moda-footer {
-  grid-row: footer;
+.sg-modal.sg-modal-static .sg-modal-tag {
+  transition: transform 0.3s ease-out;
+  transform: scale(1.02);
 }
 
-@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-dialog-centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100dvh;
+  max-width: 100dvw;
+  margin: 0;
 }
 
 .sg-modal-header {
-  grid-row: header;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem;
-  margin: 0;
+  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;
@@ -4947,105 +3280,55 @@ textarea.sg-form-control {
 }
 
 .sg-modal-title {
-  margin: 0;
+  margin-bottom: 0;
 }
 
 .sg-modal-body {
-  grid-row: body;
   position: relative;
+  flex: 1 1 auto;
   padding: 1rem;
-  background-color: color-mix(in oklab, #212529, currentColor 5%);
-  min-height: 20ch;
-  overflow: auto;
-}
-.sg-modal-body p {
-  margin: 0;
+  background-color: #43474a;
 }
 
 .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: #212529;
+  background-color: #2e3236;
+  border-top: 1px solid white;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
   gap: 0.5rem;
 }
 
-.sg-modal-sm {
-  max-width: 300px;
-}
-
-.sg-modal-md {
-  max-width: 500px;
-}
-
-.sg-modal-lg {
-  max-width: 700px;
-}
-
-@media (max-width: 324px) {
+@media (max-width: 575px) {
   .sg-modal-tag {
-    margin: auto;
-    top: 0;
-    width: 100%;
+    margin: 0.5rem;
   }
 }
-@media (min-width: 325px) and (max-width: 575px) {
-  .sg-modal-md, .sg-modal-lg {
+@media (min-width: 576px) {
+  .sg-modal-tag {
+    max-width: 500px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .sg-modal-sm {
     max-width: 300px;
   }
 }
-@media (min-width: 576px) and (max-width: 767px) {
-  .sg-modal-lg {
-    max-width: 500px;
+@media (min-width: 992px) {
+  .modal-lg, .modal-xl {
+    max-width: 800px;
+  }
+}
+@media (min-width: 1200px) {
+  .modal-xl {
+    max-width: 1140px;
   }
 }
-@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;
 }
@@ -5054,25 +3337,24 @@ textarea.sg-form-control {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: $zindex-modal-backdrop;
+  z-index: 1050;
   width: 100vw;
   height: 100vh;
   background-color: black;
-
-  // 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;
-  }
 }
+.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;
+}
+
 @keyframes fadeInBackdrop {
   0% {
     opacity: 0;
@@ -5089,113 +3371,94 @@ textarea.sg-form-control {
     opacity: 0;
   }
 }
-
-.sg-modal { //scroll ocntainer
+.sg-modal {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: $zindex-modal;
+  z-index: 1060;
   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 { //shell to position modal with bottom-padding
-  z-index: calc($zindex-modal + 1);
+.sg-modal-dialog {
+  z-index: 1061;
   position: relative;
   width: auto;
-  margin: calc(4 * $sg-modal-margin);
-  // allow clicks to pass through for custom click handling to close modal
+  margin: 2rem;
   pointer-events: none;
-
-  // 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;
-    }
+}
+.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;
   }
-
-  @keyframes fadeOut {
-    0% {
-      opacity: 1;
-      top: 0px;
-    }
-    100% {
-      opacity: 0;
-      top: -50px;
-    }
+  100% {
+    opacity: 1;
+    top: 0px;
   }
-
-  // make modal flash onBlur if static backdrop
-  .sg-modal.sg-modal-static & {
-    transition: $sg-modal-transition;
-    transform: scale(1.02);
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+    top: 0px;
   }
+  100% {
+    opacity: 0;
+    top: -50px;
+  }
+}
+.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% - $sg-modal-margin * 2);
-
-  .sg-modal-content {
-    max-height: 100%;
-    overflow: hidden;
-  }
-
-  .sg-modal-body {
-    overflow-y: auto;
-  }
+  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;
+}
+
 .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%; // 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;
+  width: 100%;
+  color: white;
   pointer-events: auto;
-  background-color: $sg-modal-background-color;
+  background-color: #2e3236;
   background-clip: padding-box;
-  border: 1px solid $sg-modal-text-color;
-  border-radius: $sg-modal-radius;
-  // Remove focus outline from opened modal
+  border: 1px solid white;
+  border-radius: 0.5rem;
   outline: 0;
 }
 
@@ -5203,16 +3466,17 @@ textarea.sg-form-control {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
+  justify-content: space-between;
   padding: 0.75rem;
-  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;
-  }
+  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;
 }
+
 .sg-modal-title {
   margin-bottom: 0;
 }
@@ -5221,8 +3485,9 @@ textarea.sg-form-control {
   position: relative;
   flex: 1 1 auto;
   padding: 1rem;
-  background-color: color.mix(white,$sg-modal-background-color, 10%);
+  background-color: #43474a;
 }
+
 .sg-modal-footer {
   display: flex;
   flex-shrink: 0;
@@ -5230,55 +3495,38 @@ textarea.sg-form-control {
   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);
-
+  background-color: #2e3236;
+  border-top: 1px solid white;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
   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;
-      }
-    }
-  }
-}
-*/
+@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;
+  }
+}
+@media (min-width: 1200px) {
+  .modal-xl {
+    max-width: 1140px;
+  }
+}
 .sg-nav {
   display: flex;
   flex-wrap: wrap;
@@ -5288,63 +3536,36 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 }
 
 .sg-nav-link {
+  display: block;
   padding: 0.5rem 1rem;
   text-decoration: none;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-block: auto;
-  color: var(--sg-navbar-link-color);
-}
-.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: 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-bg: #212529;
+  --sg-navbar-color: rgba(white, .55);
+  --sg-navbar-hover-color: rgba(white, .75);
+  --sg-navbar-disabled-color: rgba(white, .25);
   --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));
-  width: 100%;
-  min-height: 3rem;
-  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);
+  --sg-navbar-brand-color: white;
+  --sg-navbar-brand-hover-color: white;
+  background-color: --sg-navbar-bg;
+  position: relative;
   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-sm,
-.sg-navbar > .sg-container-md,
-.sg-navbar > .sg-container-lg,
-.sg-navbar > .sg-container-xl,
-.sg-navbar > .sg-container-xxl {
+.sg-navbar > .sg-container-fluid {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
@@ -5355,22 +3576,21 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   padding-bottom: 0.25rem;
   margin-inline: 1rem;
   margin-block: auto;
-  color: var(--sg-navbar-link-color);
+  color: var(--sg-navbar-brand-color);
   text-decoration: none;
   white-space: nowrap;
 }
 .sg-navbar-brand:hover, .sg-navbar-brand:focus {
-  color: var(--sg-navbar-hover-color);
+  color: var(--sg-navbar-brand-hover-color);
   text-decoration: none;
 }
 
 .sg-navbar-nav {
   --nav-link-padding-x: 0;
   --nav-link-padding-y: 0.5rem;
-  --nav-link-color: $sg-link-color;
-  --nav-link-hover-color: $sg-link-hover-color;
-  --nav-link-disabled-color: $sg-link-disable-color;
-  margin: 0;
+  --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);
   display: flex;
   flex-direction: row;
   padding-left: 0;
@@ -5388,7 +3608,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 .sg-navbar-text {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  color: var(--sg-navbar-active-color);
+  color: var(--sg-navbar-color);
 }
 .sg-navbar-text a,
 .sg-navbar-text a:hover,
@@ -5404,272 +3624,32 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 .sg-nav-dropdown-toggle {
   background-color: transparent;
   display: block;
-  padding: 0.5em 1em;
-  color: var(--sg-navbar-link-color);
+  padding: 0.25rem 0.5rem;
+  color: white;
   text-decoration: none;
-  border-radius: 0;
+  border-radius: 0.375rem;
   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: var(--height);
-  width: var(--width);
+  height: 20px;
+  width: 15px;
   z-index: 1010;
 }
 .sg-overlay-arrow.overlay-position-right {
@@ -5685,30 +3665,6 @@ $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;
@@ -5730,7 +3686,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   user-select: inherit;
   margin-bottom: 0;
   padding: 0.25em 0.5em;
-  background-color: color-mix(in hsl, white 3%, #212529);
+  background-color: #212529;
   border-bottom: 1px solid white;
 }
 .sg-moveable-popout .sg-popout-header > * {
@@ -5739,9 +3695,6 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 .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;
 }
@@ -5749,12 +3702,12 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   flex: 1 1 auto;
   padding: 0.5em;
   user-select: inherit;
-  background-color: color-mix(in srgb, white 4%, color-mix(in hsl, white 3%, #212529));
+  background-color: color-mix(in srgb, white 4%, #212529);
 }
 .sg-moveable-popout .sg-popout-footer {
   user-select: inherit;
   padding: 0.25em 0.5em;
-  background-color: color-mix(in hsl, white 3%, #212529);
+  background-color: #212529;
   border-top: 1px solid white;
 }
 .sg-moveable-popout .sg-popout-footer:last-child {
@@ -5777,54 +3730,6 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
   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%;
 }
@@ -5832,28 +3737,14 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 .sg-tabs-controls {
   display: flex;
   flex-direction: row;
-  background-color: #212529;
-  min-height: 2rem;
-  border-bottom: 1px solid white;
 }
 
 .sg-tabs-button {
   display: block;
-  color: white;
-  background-color: #212529;
-  padding: 0.375rem 0.75rem;
-  border: 2px solid #212529;
-  font-size: 0.85rem;
-}
-.sg-tabs-button:hover {
-  background-color: color-mix(in srgb, black 15%, #212529);
-}
-.sg-tabs-button:active {
-  background-color: color-mix(in srgb, black 25%, #212529);
 }
 .sg-tabs-button.sg-active {
-  border: 2px solid white;
-  border-bottom: 2px solid var(--sg-body-bg);
+  background-color: #202020;
+  color: white;
 }
 
 .sg-tabs-content {
@@ -5865,9 +3756,7 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
 }
 .sg-tabs-page.sg-active {
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  padding-block: 1rem;
+  flex-direction: row;
 }
 
 /*# sourceMappingURL=stargazerui.css.map */