stargazer-ui 1.0.2 → 1.0.4

package/dist/stylesheets/stargazerui.css

@@ -3177,6 +3177,819 @@ textarea.sg-form-control {
   margin-top: 0.25em;
 }
 
+.sg-row {
+  --sg-gutter-x: 1.5rem;
+  --sg-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--sg-gutter-y));
+  margin-right: calc(-0.5 * var(--sg-gutter-x));
+  margin-left: calc(-0.5 * var(--sg-gutter-x));
+}
+.sg-row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--sg-gutter-x) * 0.5);
+  padding-left: calc(var(--sg-gutter-x) * 0.5);
+  margin-top: var(--sg-gutter-y);
+}
+
+.sg-col {
+  flex: 1 0 0%;
+}
+
+.sg-row-cols-auto > * {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.sg-row-cols-1 > * {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.sg-row-cols-2 > * {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.sg-row-cols-3 > * {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+}
+
+.sg-row-cols-4 > * {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.sg-row-cols-5 > * {
+  flex: 0 0 auto;
+  width: 20%;
+}
+
+.sg-row-cols-6 > * {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+}
+
+.sg-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.sg-col-1 {
+  flex: 0 0 auto;
+  width: 8.3333333333%;
+}
+
+.sg-col-2 {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+}
+
+.sg-col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.sg-col-4 {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+}
+
+.sg-col-5 {
+  flex: 0 0 auto;
+  width: 41.6666666667%;
+}
+
+.sg-col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.sg-col-7 {
+  flex: 0 0 auto;
+  width: 58.3333333333%;
+}
+
+.sg-col-8 {
+  flex: 0 0 auto;
+  width: 66.6666666667%;
+}
+
+.sg-col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+}
+
+.sg-col-10 {
+  flex: 0 0 auto;
+  width: 83.3333333333%;
+}
+
+.sg-col-11 {
+  flex: 0 0 auto;
+  width: 91.6666666667%;
+}
+
+.sg-col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.sg-offset-1 {
+  margin-left: 8.3333333333%;
+}
+
+.sg-offset-2 {
+  margin-left: 16.6666666667%;
+}
+
+.sg-offset-3 {
+  margin-left: 25%;
+}
+
+.sg-offset-4 {
+  margin-left: 33.3333333333%;
+}
+
+.sg-offset-5 {
+  margin-left: 41.6666666667%;
+}
+
+.sg-offset-6 {
+  margin-left: 50%;
+}
+
+.sg-offset-7 {
+  margin-left: 58.3333333333%;
+}
+
+.sg-offset-8 {
+  margin-left: 66.6666666667%;
+}
+
+.sg-offset-9 {
+  margin-left: 75%;
+}
+
+.sg-offset-10 {
+  margin-left: 83.3333333333%;
+}
+
+.sg-offset-11 {
+  margin-left: 91.6666666667%;
+}
+
+@media (min-width: 576px) {
+  .sg-col-sm {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-sm-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-sm-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-sm-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-sm-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-sm-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-sm-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-sm-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-sm-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-sm-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-sm-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-sm-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-sm-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-sm-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-sm-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-sm-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-sm-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-sm-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-sm-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-sm-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-sm-0 {
+    margin-left: 0;
+  }
+  .sg-offset-sm-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-sm-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-sm-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-sm-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-sm-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-sm-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-sm-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-sm-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-sm-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-sm-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-sm-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 768px) {
+  .sg-col-md {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-md-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-md-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-md-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-md-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-md-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-md-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-md-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-md-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-md-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-md-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-md-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-md-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-md-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-md-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-md-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-md-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-md-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-md-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-md-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-md-0 {
+    margin-left: 0;
+  }
+  .sg-offset-md-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-md-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-md-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-md-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-md-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-md-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-md-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-md-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-md-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-md-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-md-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 992px) {
+  .sg-col-lg {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-lg-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-lg-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-lg-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-lg-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-lg-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-lg-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-lg-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-lg-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-lg-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-lg-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-lg-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-lg-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-lg-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-lg-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-lg-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-lg-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-lg-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-lg-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-lg-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-lg-0 {
+    margin-left: 0;
+  }
+  .sg-offset-lg-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-lg-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-lg-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-lg-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-lg-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-lg-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-lg-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-lg-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-lg-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-lg-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-lg-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 1200px) {
+  .sg-col-xl {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-xl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-xl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-xl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-xl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-xl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-xl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-xl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-xl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-xl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-xl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-xl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-xl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-xl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-xl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-xl-0 {
+    margin-left: 0;
+  }
+  .sg-offset-xl-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-xl-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-xl-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-xl-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-xl-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-xl-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-xl-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-xl-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-xl-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-xl-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-xl-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+@media (min-width: 1400px) {
+  .sg-col-xxl {
+    flex: 1 0 0%;
+  }
+  .sg-row-cols-xxl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-row-cols-xxl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-row-cols-xxl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-row-cols-xxl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-row-cols-xxl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-row-cols-xxl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .sg-row-cols-xxl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .sg-col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
+  .sg-col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .sg-col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .sg-col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .sg-col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
+  .sg-col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .sg-col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
+  .sg-col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
+  .sg-col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .sg-col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
+  .sg-col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
+  .sg-col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .sg-offset-xxl-0 {
+    margin-left: 0;
+  }
+  .sg-offset-xxl-1 {
+    margin-left: 8.3333333333%;
+  }
+  .sg-offset-xxl-2 {
+    margin-left: 16.6666666667%;
+  }
+  .sg-offset-xxl-3 {
+    margin-left: 25%;
+  }
+  .sg-offset-xxl-4 {
+    margin-left: 33.3333333333%;
+  }
+  .sg-offset-xxl-5 {
+    margin-left: 41.6666666667%;
+  }
+  .sg-offset-xxl-6 {
+    margin-left: 50%;
+  }
+  .sg-offset-xxl-7 {
+    margin-left: 58.3333333333%;
+  }
+  .sg-offset-xxl-8 {
+    margin-left: 66.6666666667%;
+  }
+  .sg-offset-xxl-9 {
+    margin-left: 75%;
+  }
+  .sg-offset-xxl-10 {
+    margin-left: 83.3333333333%;
+  }
+  .sg-offset-xxl-11 {
+    margin-left: 91.6666666667%;
+  }
+}
+/* Containers */
+.sg-container,
+.sg-container-fluid,
+.sg-container-xxl,
+.sg-container-xl,
+.sg-container-lg,
+.sg-container-md,
+.sg-container-sm {
+  --sg-gutter-x: 1.5rem;
+  --sg-gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--sg-gutter-x) * 0.5);
+  padding-left: calc(var(--sg-gutter-x) * 0.5);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .sg-container-sm, .sg-container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .sg-container-md, .sg-container-sm, .sg-container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .sg-container-lg, .sg-container-md, .sg-container-sm, .sg-container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .sg-container-xl, .sg-container-lg, .sg-container-md, .sg-container-sm, .sg-container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1400px) {
+  .sg-container-xxl, .sg-container-xl, .sg-container-lg, .sg-container-md, .sg-container-sm, .sg-container {
+    max-width: 1320px;
+  }
+}
 .sg-input-group {
   display: flex;
   flex-wrap: wrap;
@@ -3234,9 +4047,38 @@ textarea.sg-form-control {
 
 .sg-modal-tag::backdrop {
   z-index: 1060;
-  background: hsla(0, 0%, 0%, 0.5);
+  background: hsl(0, 0%, 0%);
+  opacity: 0.5;
+  animation-name: fadeInBackdrop;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+.sg-modal-tag::backdrop.close {
+  background: transparent;
+  opacity: 0;
+  animation-name: fadeInBackdrop;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: backwards;
 }
 
+@keyframes fadeInBackdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+@keyframes fadeOutBackdrop {
+  from {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 0;
+  }
+}
 .sg-modal-tag {
   z-index: 1061;
   padding: 0;
@@ -3250,11 +4092,28 @@ textarea.sg-form-control {
   border-radius: 0.5rem;
   outline: 0;
 }
-.sg-modal.sg-modal-static .sg-modal-tag {
-  transition: transform 0.3s ease-out;
-  transform: scale(1.02);
+.sg-modal-tag[open=""] {
+  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;
 }
 
+@keyframes scale-down {
+  to {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+}
+@keyframes slide-in-up {
+  from {
+    transform: translateY(-10%);
+    opacity: 0.5;
+  }
+}
 .sg-modal-dialog-centered {
   display: flex;
   justify-content: center;
@@ -3273,6 +4132,7 @@ textarea.sg-form-control {
   border-bottom: 1px solid white;
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
+  margin: 0;
 }
 .sg-modal-header .sg-button-close {
   padding: 0.5rem 0.5rem;
@@ -3280,7 +4140,7 @@ textarea.sg-form-control {
 }
 
 .sg-modal-title {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 .sg-modal-body {
@@ -3565,7 +4425,12 @@ textarea.sg-form-control {
   padding: 0.5rem 0rem;
 }
 .sg-navbar > .container-xxl, .sg-navbar > .container-xl, .sg-navbar > .container-lg, .sg-navbar > .container-md, .sg-navbar > .container-sm, .sg-navbar > .sg-container,
-.sg-navbar > .sg-container-fluid {
+.sg-navbar > .sg-container-fluid,
+.sg-navbar > .sg-container-sm,
+.sg-navbar > .sg-container-md,
+.sg-navbar > .sg-container-lg,
+.sg-navbar > .sg-container-xl,
+.sg-navbar > .sg-container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
@@ -3643,6 +4508,230 @@ textarea.sg-form-control {
   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-arrow {
   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;
@@ -3665,58 +4754,64 @@ textarea.sg-form-control {
   transform: rotate(270deg);
 }
 
-.moveable-popout {
+.sg-moveable-popout {
   --popout-index: 1010;
   position: absolute;
   display: flex;
   flex-direction: column;
   border-radius: 0.375em;
+  padding: 0;
+  margin: 0;
   border: 1px solid white;
   width: 15rem;
   min-width: min(18rem, 100%);
   min-height: min(9rem, 100%);
   box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.3764705882);
+  color: white;
   overflow: hidden;
   z-index: var(--popout-index);
 }
-.moveable-popout .sg-popout-header {
+.sg-moveable-popout .sg-popout-header {
   user-select: inherit;
   margin-bottom: 0;
   padding: 0.25em 0.5em;
   background-color: #212529;
   border-bottom: 1px solid white;
 }
-.moveable-popout .sg-popout-header > * {
+.sg-moveable-popout .sg-popout-header > * {
   margin: 0;
 }
-.moveable-popout .sg-popout-header:first-child {
+.sg-moveable-popout .sg-popout-header:first-child {
   border-radius: 0.375em 0.375em 0 0;
 }
-.moveable-popout[data-move=true] .sg-popout-header {
+.sg-moveable-popout[data-move=true] {
+  touch-action: none;
+}
+.sg-moveable-popout[data-move=true] .sg-popout-header {
   cursor: move;
 }
-.moveable-popout .sg-popout-body {
+.sg-moveable-popout .sg-popout-body {
   flex: 1 1 auto;
   padding: 0.5em;
   user-select: inherit;
   background-color: color-mix(in srgb, white 4%, #212529);
 }
-.moveable-popout .sg-popout-footer {
+.sg-moveable-popout .sg-popout-footer {
   user-select: inherit;
   padding: 0.25em 0.5em;
   background-color: #212529;
   border-top: 1px solid white;
 }
-.moveable-popout .sg-popout-footer:last-child {
+.sg-moveable-popout .sg-popout-footer:last-child {
   border-radius: 0 0 0.375em 0.375em;
 }
-.moveable-popout .sg-popout-text:last-child {
+.sg-moveable-popout .sg-popout-text:last-child {
   margin-bottom: 0;
 }
-.moveable-popout[data-resize=true] {
+.sg-moveable-popout[data-resize=true] {
   resize: both;
 }
-.moveable-popout[data-resize=true]::before {
+.sg-moveable-popout[data-resize=true]::before {
   content: "";
   position: absolute;
   bottom: 0;
@@ -3727,6 +4822,54 @@ textarea.sg-form-control {
   background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
 }
 
+.sg-spinner {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  border: 0.2em solid white;
+  border-right-color: transparent;
+  margin: auto;
+  animation-name: spinny;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes spinny {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.sg-table {
+  --sg-table-padding: $sg-table-padding;
+  width: 100%;
+  margin-bottom: 1rem;
+  color: black;
+  vertical-align: top;
+  border-color: black;
+}
+.sg-table > :not(caption) > * > * {
+  padding: 0.5rem 0.5rem;
+  background-color: transparent;
+  border-bottom-width: 1px;
+  box-shadow: inset 0 0 0 9999px transparent;
+}
+.sg-table > tbody {
+  vertical-align: inherit;
+}
+.sg-table > thead {
+  vertical-align: bottom;
+}
+
+.sg-caption-top {
+  caption-side: top;
+}
+
+.sg-table-sm > :not(caption) > * > * {
+  padding: 0.25rem 0.25rem;
+}
+
 .sg-tabs {
   width: 100%;
 }