@medyll/cssfabric 0.2.0 → 0.2.1-beta.2

package/dist/css/cssfabric.css

@@ -0,0 +1,5167 @@
+
+/**---------------------animation.css---------------------*/
+
+/**---------------------base.css---------------------*/
+p {
+  margin: auto;
+}
+
+.hover-parent .hover-show {
+  display: none;
+}
+.hover-parent .hover-hide {
+  display: initial;
+}
+.hover-parent:hover .hover-show {
+  display: initial;
+}
+.hover-parent:hover .hover-hide {
+  display: none;
+}
+
+.block:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-block-start: 0 !important;
+  margin-block-end: 0 !important;
+  margin-inline-start: 0 !important;
+  margin-inline-end: 0 !important;
+}
+
+.box-content {
+  padding: 0.25rem;
+  margin: 0.25rem 0;
+}
+
+.cell-padding > * {
+  padding: 0.25em;
+}
+
+.cell-spacing > * {
+  margin: 0.25em;
+}
+/**---------------------box.css---------------------*/
+.marg .marg-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg .marg-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg .marg-small {
+  margin: var(--box-density-preset-small);
+}
+.marg .marg-default {
+  margin: var(--box-density-preset-default);
+}
+.marg .marg-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg .marg-large {
+  margin: var(--box-density-preset-large);
+}
+.marg, .marg-1 {
+  margin: var(--box-density-1);
+}
+.marg-2 {
+  margin: var(--box-density-2);
+}
+.marg-3 {
+  margin: var(--box-density-3);
+}
+.marg-4 {
+  margin: var(--box-density-4);
+}
+.marg-5 {
+  margin: var(--box-density-5);
+}
+.marg-6 {
+  margin: var(--box-density-6);
+}
+.marg-7 {
+  margin: var(--box-density-7);
+}
+.marg-8 {
+  margin: var(--box-density-8);
+}
+.marg-9 {
+  margin: var(--box-density-9);
+}
+.marg-10 {
+  margin: var(--box-density-10);
+}
+.marg-11 {
+  margin: var(--box-density-11);
+}
+.marg-12 {
+  margin: var(--box-density-12);
+}
+
+.marg-t .marg-t-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg-t .marg-t-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-t .marg-t-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-t .marg-t-default {
+  margin: var(--box-density-preset-default);
+}
+.marg-t .marg-t-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-t .marg-t-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-t, .marg-t-1 {
+  margin-top: var(--box-density-1);
+}
+.marg-t-2 {
+  margin-top: var(--box-density-2);
+}
+.marg-t-3 {
+  margin-top: var(--box-density-3);
+}
+.marg-t-4 {
+  margin-top: var(--box-density-4);
+}
+.marg-t-5 {
+  margin-top: var(--box-density-5);
+}
+.marg-t-6 {
+  margin-top: var(--box-density-6);
+}
+.marg-t-7 {
+  margin-top: var(--box-density-7);
+}
+.marg-t-8 {
+  margin-top: var(--box-density-8);
+}
+.marg-t-9 {
+  margin-top: var(--box-density-9);
+}
+.marg-t-10 {
+  margin-top: var(--box-density-10);
+}
+.marg-t-11 {
+  margin-top: var(--box-density-11);
+}
+.marg-t-12 {
+  margin-top: var(--box-density-12);
+}
+
+.marg-b .marg-b-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg-b .marg-b-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-b .marg-b-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-b .marg-b-default {
+  margin: var(--box-density-preset-default);
+}
+.marg-b .marg-b-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-b .marg-b-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-b, .marg-b-1 {
+  margin-bottom: var(--box-density-1);
+}
+.marg-b-2 {
+  margin-bottom: var(--box-density-2);
+}
+.marg-b-3 {
+  margin-bottom: var(--box-density-3);
+}
+.marg-b-4 {
+  margin-bottom: var(--box-density-4);
+}
+.marg-b-5 {
+  margin-bottom: var(--box-density-5);
+}
+.marg-b-6 {
+  margin-bottom: var(--box-density-6);
+}
+.marg-b-7 {
+  margin-bottom: var(--box-density-7);
+}
+.marg-b-8 {
+  margin-bottom: var(--box-density-8);
+}
+.marg-b-9 {
+  margin-bottom: var(--box-density-9);
+}
+.marg-b-10 {
+  margin-bottom: var(--box-density-10);
+}
+.marg-b-11 {
+  margin-bottom: var(--box-density-11);
+}
+.marg-b-12 {
+  margin-bottom: var(--box-density-12);
+}
+
+.marg-l .marg-l-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg-l .marg-l-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-l .marg-l-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-l .marg-l-default {
+  margin: var(--box-density-preset-default);
+}
+.marg-l .marg-l-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-l .marg-l-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-l, .marg-l-1 {
+  margin-left: var(--box-density-1);
+}
+.marg-l-2 {
+  margin-left: var(--box-density-2);
+}
+.marg-l-3 {
+  margin-left: var(--box-density-3);
+}
+.marg-l-4 {
+  margin-left: var(--box-density-4);
+}
+.marg-l-5 {
+  margin-left: var(--box-density-5);
+}
+.marg-l-6 {
+  margin-left: var(--box-density-6);
+}
+.marg-l-7 {
+  margin-left: var(--box-density-7);
+}
+.marg-l-8 {
+  margin-left: var(--box-density-8);
+}
+.marg-l-9 {
+  margin-left: var(--box-density-9);
+}
+.marg-l-10 {
+  margin-left: var(--box-density-10);
+}
+.marg-l-11 {
+  margin-left: var(--box-density-11);
+}
+.marg-l-12 {
+  margin-left: var(--box-density-12);
+}
+
+.marg-r .marg-r-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg-r .marg-r-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-r .marg-r-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-r .marg-r-default {
+  margin: var(--box-density-preset-default);
+}
+.marg-r .marg-r-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-r .marg-r-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-r, .marg-r-1 {
+  margin-right: var(--box-density-1);
+}
+.marg-r-2 {
+  margin-right: var(--box-density-2);
+}
+.marg-r-3 {
+  margin-right: var(--box-density-3);
+}
+.marg-r-4 {
+  margin-right: var(--box-density-4);
+}
+.marg-r-5 {
+  margin-right: var(--box-density-5);
+}
+.marg-r-6 {
+  margin-right: var(--box-density-6);
+}
+.marg-r-7 {
+  margin-right: var(--box-density-7);
+}
+.marg-r-8 {
+  margin-right: var(--box-density-8);
+}
+.marg-r-9 {
+  margin-right: var(--box-density-9);
+}
+.marg-r-10 {
+  margin-right: var(--box-density-10);
+}
+.marg-r-11 {
+  margin-right: var(--box-density-11);
+}
+.marg-r-12 {
+  margin-right: var(--box-density-12);
+}
+
+.marg-all .marg-all-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg-all .marg-all-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-all .marg-all-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-all .marg-all-default {
+  margin: var(--box-density-preset-default);
+}
+.marg-all .marg-all-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-all .marg-all-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-all, .marg-all-1 {
+  margin: var(--box-density-1);
+}
+.marg-all-2 {
+  margin: var(--box-density-2);
+}
+.marg-all-3 {
+  margin: var(--box-density-3);
+}
+.marg-all-4 {
+  margin: var(--box-density-4);
+}
+.marg-all-5 {
+  margin: var(--box-density-5);
+}
+.marg-all-6 {
+  margin: var(--box-density-6);
+}
+.marg-all-7 {
+  margin: var(--box-density-7);
+}
+.marg-all-8 {
+  margin: var(--box-density-8);
+}
+.marg-all-9 {
+  margin: var(--box-density-9);
+}
+.marg-all-10 {
+  margin: var(--box-density-10);
+}
+.marg-all-11 {
+  margin: var(--box-density-11);
+}
+.marg-all-12 {
+  margin: var(--box-density-12);
+}
+
+.marg-u .marg-u-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg-u .marg-u-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-u .marg-u-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-u .marg-u-default {
+  margin: var(--box-density-preset-default);
+}
+.marg-u .marg-u-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-u .marg-u-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-u, .marg-u-1 {
+  margin-bottom: var(--box-density-1);
+  margin-left: var(--box-density-1);
+  margin-right: var(--box-density-1);
+}
+.marg-u-2 {
+  margin-bottom: var(--box-density-2);
+  margin-left: var(--box-density-2);
+  margin-right: var(--box-density-2);
+}
+.marg-u-3 {
+  margin-bottom: var(--box-density-3);
+  margin-left: var(--box-density-3);
+  margin-right: var(--box-density-3);
+}
+.marg-u-4 {
+  margin-bottom: var(--box-density-4);
+  margin-left: var(--box-density-4);
+  margin-right: var(--box-density-4);
+}
+.marg-u-5 {
+  margin-bottom: var(--box-density-5);
+  margin-left: var(--box-density-5);
+  margin-right: var(--box-density-5);
+}
+.marg-u-6 {
+  margin-bottom: var(--box-density-6);
+  margin-left: var(--box-density-6);
+  margin-right: var(--box-density-6);
+}
+.marg-u-7 {
+  margin-bottom: var(--box-density-7);
+  margin-left: var(--box-density-7);
+  margin-right: var(--box-density-7);
+}
+.marg-u-8 {
+  margin-bottom: var(--box-density-8);
+  margin-left: var(--box-density-8);
+  margin-right: var(--box-density-8);
+}
+.marg-u-9 {
+  margin-bottom: var(--box-density-9);
+  margin-left: var(--box-density-9);
+  margin-right: var(--box-density-9);
+}
+.marg-u-10 {
+  margin-bottom: var(--box-density-10);
+  margin-left: var(--box-density-10);
+  margin-right: var(--box-density-10);
+}
+.marg-u-11 {
+  margin-bottom: var(--box-density-11);
+  margin-left: var(--box-density-11);
+  margin-right: var(--box-density-11);
+}
+.marg-u-12 {
+  margin-bottom: var(--box-density-12);
+  margin-left: var(--box-density-12);
+  margin-right: var(--box-density-12);
+}
+
+.marg-ii .marg-ii-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg-ii .marg-ii-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-ii .marg-ii-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-ii .marg-ii-default {
+  margin: var(--box-density-preset-default);
+}
+.marg-ii .marg-ii-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-ii .marg-ii-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-ii, .marg-ii-1 {
+  margin-left: var(--box-density-1);
+  margin-right: var(--box-density-1);
+}
+.marg-ii-2 {
+  margin-left: var(--box-density-2);
+  margin-right: var(--box-density-2);
+}
+.marg-ii-3 {
+  margin-left: var(--box-density-3);
+  margin-right: var(--box-density-3);
+}
+.marg-ii-4 {
+  margin-left: var(--box-density-4);
+  margin-right: var(--box-density-4);
+}
+.marg-ii-5 {
+  margin-left: var(--box-density-5);
+  margin-right: var(--box-density-5);
+}
+.marg-ii-6 {
+  margin-left: var(--box-density-6);
+  margin-right: var(--box-density-6);
+}
+.marg-ii-7 {
+  margin-left: var(--box-density-7);
+  margin-right: var(--box-density-7);
+}
+.marg-ii-8 {
+  margin-left: var(--box-density-8);
+  margin-right: var(--box-density-8);
+}
+.marg-ii-9 {
+  margin-left: var(--box-density-9);
+  margin-right: var(--box-density-9);
+}
+.marg-ii-10 {
+  margin-left: var(--box-density-10);
+  margin-right: var(--box-density-10);
+}
+.marg-ii-11 {
+  margin-left: var(--box-density-11);
+  margin-right: var(--box-density-11);
+}
+.marg-ii-12 {
+  margin-left: var(--box-density-12);
+  margin-right: var(--box-density-12);
+}
+
+.marg-tb .marg-tb-tight {
+  margin: var(--box-density-preset-tight);
+}
+.marg-tb .marg-tb-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-tb .marg-tb-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-tb .marg-tb-default {
+  margin: var(--box-density-preset-default);
+}
+.marg-tb .marg-tb-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-tb .marg-tb-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-tb, .marg-tb-1 {
+  margin-top: var(--box-density-1);
+  margin-bottom: var(--box-density-1);
+}
+.marg-tb-2 {
+  margin-top: var(--box-density-2);
+  margin-bottom: var(--box-density-2);
+}
+.marg-tb-3 {
+  margin-top: var(--box-density-3);
+  margin-bottom: var(--box-density-3);
+}
+.marg-tb-4 {
+  margin-top: var(--box-density-4);
+  margin-bottom: var(--box-density-4);
+}
+.marg-tb-5 {
+  margin-top: var(--box-density-5);
+  margin-bottom: var(--box-density-5);
+}
+.marg-tb-6 {
+  margin-top: var(--box-density-6);
+  margin-bottom: var(--box-density-6);
+}
+.marg-tb-7 {
+  margin-top: var(--box-density-7);
+  margin-bottom: var(--box-density-7);
+}
+.marg-tb-8 {
+  margin-top: var(--box-density-8);
+  margin-bottom: var(--box-density-8);
+}
+.marg-tb-9 {
+  margin-top: var(--box-density-9);
+  margin-bottom: var(--box-density-9);
+}
+.marg-tb-10 {
+  margin-top: var(--box-density-10);
+  margin-bottom: var(--box-density-10);
+}
+.marg-tb-11 {
+  margin-top: var(--box-density-11);
+  margin-bottom: var(--box-density-11);
+}
+.marg-tb-12 {
+  margin-top: var(--box-density-12);
+  margin-bottom: var(--box-density-12);
+}
+
+.pad .pad-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad .pad-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad .pad-small {
+  padding: var(--box-density-preset-small);
+}
+.pad .pad-default {
+  padding: var(--box-density-preset-default);
+}
+.pad .pad-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad .pad-large {
+  padding: var(--box-density-preset-large);
+}
+.pad, .pad-1 {
+  padding: var(--box-density-1);
+}
+.pad-2 {
+  padding: var(--box-density-2);
+}
+.pad-3 {
+  padding: var(--box-density-3);
+}
+.pad-4 {
+  padding: var(--box-density-4);
+}
+.pad-5 {
+  padding: var(--box-density-5);
+}
+.pad-6 {
+  padding: var(--box-density-6);
+}
+.pad-7 {
+  padding: var(--box-density-7);
+}
+.pad-8 {
+  padding: var(--box-density-8);
+}
+.pad-9 {
+  padding: var(--box-density-9);
+}
+.pad-10 {
+  padding: var(--box-density-10);
+}
+.pad-11 {
+  padding: var(--box-density-11);
+}
+.pad-12 {
+  padding: var(--box-density-12);
+}
+
+.pad-t .pad-t-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad-t .pad-t-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-t .pad-t-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-t .pad-t-default {
+  padding: var(--box-density-preset-default);
+}
+.pad-t .pad-t-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-t .pad-t-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-t, .pad-t-1 {
+  padding-top: var(--box-density-1);
+}
+.pad-t-2 {
+  padding-top: var(--box-density-2);
+}
+.pad-t-3 {
+  padding-top: var(--box-density-3);
+}
+.pad-t-4 {
+  padding-top: var(--box-density-4);
+}
+.pad-t-5 {
+  padding-top: var(--box-density-5);
+}
+.pad-t-6 {
+  padding-top: var(--box-density-6);
+}
+.pad-t-7 {
+  padding-top: var(--box-density-7);
+}
+.pad-t-8 {
+  padding-top: var(--box-density-8);
+}
+.pad-t-9 {
+  padding-top: var(--box-density-9);
+}
+.pad-t-10 {
+  padding-top: var(--box-density-10);
+}
+.pad-t-11 {
+  padding-top: var(--box-density-11);
+}
+.pad-t-12 {
+  padding-top: var(--box-density-12);
+}
+
+.pad-b .pad-b-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad-b .pad-b-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-b .pad-b-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-b .pad-b-default {
+  padding: var(--box-density-preset-default);
+}
+.pad-b .pad-b-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-b .pad-b-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-b, .pad-b-1 {
+  padding-bottom: var(--box-density-1);
+}
+.pad-b-2 {
+  padding-bottom: var(--box-density-2);
+}
+.pad-b-3 {
+  padding-bottom: var(--box-density-3);
+}
+.pad-b-4 {
+  padding-bottom: var(--box-density-4);
+}
+.pad-b-5 {
+  padding-bottom: var(--box-density-5);
+}
+.pad-b-6 {
+  padding-bottom: var(--box-density-6);
+}
+.pad-b-7 {
+  padding-bottom: var(--box-density-7);
+}
+.pad-b-8 {
+  padding-bottom: var(--box-density-8);
+}
+.pad-b-9 {
+  padding-bottom: var(--box-density-9);
+}
+.pad-b-10 {
+  padding-bottom: var(--box-density-10);
+}
+.pad-b-11 {
+  padding-bottom: var(--box-density-11);
+}
+.pad-b-12 {
+  padding-bottom: var(--box-density-12);
+}
+
+.pad-l .pad-l-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad-l .pad-l-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-l .pad-l-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-l .pad-l-default {
+  padding: var(--box-density-preset-default);
+}
+.pad-l .pad-l-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-l .pad-l-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-l, .pad-l-1 {
+  padding-left: var(--box-density-1);
+}
+.pad-l-2 {
+  padding-left: var(--box-density-2);
+}
+.pad-l-3 {
+  padding-left: var(--box-density-3);
+}
+.pad-l-4 {
+  padding-left: var(--box-density-4);
+}
+.pad-l-5 {
+  padding-left: var(--box-density-5);
+}
+.pad-l-6 {
+  padding-left: var(--box-density-6);
+}
+.pad-l-7 {
+  padding-left: var(--box-density-7);
+}
+.pad-l-8 {
+  padding-left: var(--box-density-8);
+}
+.pad-l-9 {
+  padding-left: var(--box-density-9);
+}
+.pad-l-10 {
+  padding-left: var(--box-density-10);
+}
+.pad-l-11 {
+  padding-left: var(--box-density-11);
+}
+.pad-l-12 {
+  padding-left: var(--box-density-12);
+}
+
+.pad-r .pad-r-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad-r .pad-r-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-r .pad-r-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-r .pad-r-default {
+  padding: var(--box-density-preset-default);
+}
+.pad-r .pad-r-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-r .pad-r-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-r, .pad-r-1 {
+  padding-right: var(--box-density-1);
+}
+.pad-r-2 {
+  padding-right: var(--box-density-2);
+}
+.pad-r-3 {
+  padding-right: var(--box-density-3);
+}
+.pad-r-4 {
+  padding-right: var(--box-density-4);
+}
+.pad-r-5 {
+  padding-right: var(--box-density-5);
+}
+.pad-r-6 {
+  padding-right: var(--box-density-6);
+}
+.pad-r-7 {
+  padding-right: var(--box-density-7);
+}
+.pad-r-8 {
+  padding-right: var(--box-density-8);
+}
+.pad-r-9 {
+  padding-right: var(--box-density-9);
+}
+.pad-r-10 {
+  padding-right: var(--box-density-10);
+}
+.pad-r-11 {
+  padding-right: var(--box-density-11);
+}
+.pad-r-12 {
+  padding-right: var(--box-density-12);
+}
+
+.pad-all .pad-all-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad-all .pad-all-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-all .pad-all-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-all .pad-all-default {
+  padding: var(--box-density-preset-default);
+}
+.pad-all .pad-all-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-all .pad-all-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-all, .pad-all-1 {
+  padding: var(--box-density-1);
+}
+.pad-all-2 {
+  padding: var(--box-density-2);
+}
+.pad-all-3 {
+  padding: var(--box-density-3);
+}
+.pad-all-4 {
+  padding: var(--box-density-4);
+}
+.pad-all-5 {
+  padding: var(--box-density-5);
+}
+.pad-all-6 {
+  padding: var(--box-density-6);
+}
+.pad-all-7 {
+  padding: var(--box-density-7);
+}
+.pad-all-8 {
+  padding: var(--box-density-8);
+}
+.pad-all-9 {
+  padding: var(--box-density-9);
+}
+.pad-all-10 {
+  padding: var(--box-density-10);
+}
+.pad-all-11 {
+  padding: var(--box-density-11);
+}
+.pad-all-12 {
+  padding: var(--box-density-12);
+}
+
+.pad-u .pad-u-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad-u .pad-u-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-u .pad-u-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-u .pad-u-default {
+  padding: var(--box-density-preset-default);
+}
+.pad-u .pad-u-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-u .pad-u-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-u, .pad-u-1 {
+  padding-bottom: var(--box-density-1);
+  padding-left: var(--box-density-1);
+  padding-right: var(--box-density-1);
+}
+.pad-u-2 {
+  padding-bottom: var(--box-density-2);
+  padding-left: var(--box-density-2);
+  padding-right: var(--box-density-2);
+}
+.pad-u-3 {
+  padding-bottom: var(--box-density-3);
+  padding-left: var(--box-density-3);
+  padding-right: var(--box-density-3);
+}
+.pad-u-4 {
+  padding-bottom: var(--box-density-4);
+  padding-left: var(--box-density-4);
+  padding-right: var(--box-density-4);
+}
+.pad-u-5 {
+  padding-bottom: var(--box-density-5);
+  padding-left: var(--box-density-5);
+  padding-right: var(--box-density-5);
+}
+.pad-u-6 {
+  padding-bottom: var(--box-density-6);
+  padding-left: var(--box-density-6);
+  padding-right: var(--box-density-6);
+}
+.pad-u-7 {
+  padding-bottom: var(--box-density-7);
+  padding-left: var(--box-density-7);
+  padding-right: var(--box-density-7);
+}
+.pad-u-8 {
+  padding-bottom: var(--box-density-8);
+  padding-left: var(--box-density-8);
+  padding-right: var(--box-density-8);
+}
+.pad-u-9 {
+  padding-bottom: var(--box-density-9);
+  padding-left: var(--box-density-9);
+  padding-right: var(--box-density-9);
+}
+.pad-u-10 {
+  padding-bottom: var(--box-density-10);
+  padding-left: var(--box-density-10);
+  padding-right: var(--box-density-10);
+}
+.pad-u-11 {
+  padding-bottom: var(--box-density-11);
+  padding-left: var(--box-density-11);
+  padding-right: var(--box-density-11);
+}
+.pad-u-12 {
+  padding-bottom: var(--box-density-12);
+  padding-left: var(--box-density-12);
+  padding-right: var(--box-density-12);
+}
+
+.pad-ii .pad-ii-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad-ii .pad-ii-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-ii .pad-ii-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-ii .pad-ii-default {
+  padding: var(--box-density-preset-default);
+}
+.pad-ii .pad-ii-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-ii .pad-ii-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-ii, .pad-ii-1 {
+  padding-left: var(--box-density-1);
+  padding-right: var(--box-density-1);
+}
+.pad-ii-2 {
+  padding-left: var(--box-density-2);
+  padding-right: var(--box-density-2);
+}
+.pad-ii-3 {
+  padding-left: var(--box-density-3);
+  padding-right: var(--box-density-3);
+}
+.pad-ii-4 {
+  padding-left: var(--box-density-4);
+  padding-right: var(--box-density-4);
+}
+.pad-ii-5 {
+  padding-left: var(--box-density-5);
+  padding-right: var(--box-density-5);
+}
+.pad-ii-6 {
+  padding-left: var(--box-density-6);
+  padding-right: var(--box-density-6);
+}
+.pad-ii-7 {
+  padding-left: var(--box-density-7);
+  padding-right: var(--box-density-7);
+}
+.pad-ii-8 {
+  padding-left: var(--box-density-8);
+  padding-right: var(--box-density-8);
+}
+.pad-ii-9 {
+  padding-left: var(--box-density-9);
+  padding-right: var(--box-density-9);
+}
+.pad-ii-10 {
+  padding-left: var(--box-density-10);
+  padding-right: var(--box-density-10);
+}
+.pad-ii-11 {
+  padding-left: var(--box-density-11);
+  padding-right: var(--box-density-11);
+}
+.pad-ii-12 {
+  padding-left: var(--box-density-12);
+  padding-right: var(--box-density-12);
+}
+
+.pad-tb .pad-tb-tight {
+  padding: var(--box-density-preset-tight);
+}
+.pad-tb .pad-tb-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-tb .pad-tb-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-tb .pad-tb-default {
+  padding: var(--box-density-preset-default);
+}
+.pad-tb .pad-tb-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-tb .pad-tb-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-tb, .pad-tb-1 {
+  padding-top: var(--box-density-1);
+  padding-bottom: var(--box-density-1);
+}
+.pad-tb-2 {
+  padding-top: var(--box-density-2);
+  padding-bottom: var(--box-density-2);
+}
+.pad-tb-3 {
+  padding-top: var(--box-density-3);
+  padding-bottom: var(--box-density-3);
+}
+.pad-tb-4 {
+  padding-top: var(--box-density-4);
+  padding-bottom: var(--box-density-4);
+}
+.pad-tb-5 {
+  padding-top: var(--box-density-5);
+  padding-bottom: var(--box-density-5);
+}
+.pad-tb-6 {
+  padding-top: var(--box-density-6);
+  padding-bottom: var(--box-density-6);
+}
+.pad-tb-7 {
+  padding-top: var(--box-density-7);
+  padding-bottom: var(--box-density-7);
+}
+.pad-tb-8 {
+  padding-top: var(--box-density-8);
+  padding-bottom: var(--box-density-8);
+}
+.pad-tb-9 {
+  padding-top: var(--box-density-9);
+  padding-bottom: var(--box-density-9);
+}
+.pad-tb-10 {
+  padding-top: var(--box-density-10);
+  padding-bottom: var(--box-density-10);
+}
+.pad-tb-11 {
+  padding-top: var(--box-density-11);
+  padding-bottom: var(--box-density-11);
+}
+.pad-tb-12 {
+  padding-top: var(--box-density-12);
+  padding-bottom: var(--box-density-12);
+}
+
+.border, .border-1 {
+  border: 1px solid var(--theme-color-border);
+}
+.border-2 {
+  border: 2px solid var(--theme-color-border);
+}
+.border-3 {
+  border: 3px solid var(--theme-color-border);
+}
+
+.border-t, .border-t-1 {
+  border-top: 1px solid var(--theme-color-border);
+}
+.border-t-2 {
+  border-top: 2px solid var(--theme-color-border);
+}
+.border-t-3 {
+  border-top: 3px solid var(--theme-color-border);
+}
+
+.border-b, .border-b-1 {
+  border-bottom: 1px solid var(--theme-color-border);
+}
+.border-b-2 {
+  border-bottom: 2px solid var(--theme-color-border);
+}
+.border-b-3 {
+  border-bottom: 3px solid var(--theme-color-border);
+}
+
+.border-l, .border-l-1 {
+  border-left: 1px solid var(--theme-color-border);
+}
+.border-l-2 {
+  border-left: 2px solid var(--theme-color-border);
+}
+.border-l-3 {
+  border-left: 3px solid var(--theme-color-border);
+}
+
+.border-r, .border-r-1 {
+  border-right: 1px solid var(--theme-color-border);
+}
+.border-r-2 {
+  border-right: 2px solid var(--theme-color-border);
+}
+.border-r-3 {
+  border-right: 3px solid var(--theme-color-border);
+}
+
+.border-all, .border-all-1 {
+  border: 1px solid var(--theme-color-border);
+}
+.border-all-2 {
+  border: 2px solid var(--theme-color-border);
+}
+.border-all-3 {
+  border: 3px solid var(--theme-color-border);
+}
+
+.border-u, .border-u-1 {
+  border-bottom: 1px solid var(--theme-color-border);
+  border-left: 1px solid var(--theme-color-border);
+  border-right: 1px solid var(--theme-color-border);
+}
+.border-u-2 {
+  border-bottom: 2px solid var(--theme-color-border);
+  border-left: 2px solid var(--theme-color-border);
+  border-right: 2px solid var(--theme-color-border);
+}
+.border-u-3 {
+  border-bottom: 3px solid var(--theme-color-border);
+  border-left: 3px solid var(--theme-color-border);
+  border-right: 3px solid var(--theme-color-border);
+}
+
+.border-ii, .border-ii-1 {
+  border-left: 1px solid var(--theme-color-border);
+  border-right: 1px solid var(--theme-color-border);
+}
+.border-ii-2 {
+  border-left: 2px solid var(--theme-color-border);
+  border-right: 2px solid var(--theme-color-border);
+}
+.border-ii-3 {
+  border-left: 3px solid var(--theme-color-border);
+  border-right: 3px solid var(--theme-color-border);
+}
+
+.border-tb, .border-tb-1 {
+  border-top: 1px solid var(--theme-color-border);
+  border-bottom: 1px solid var(--theme-color-border);
+}
+.border-tb-2 {
+  border-top: 2px solid var(--theme-color-border);
+  border-bottom: 2px solid var(--theme-color-border);
+}
+.border-tb-3 {
+  border-top: 3px solid var(--theme-color-border);
+  border-bottom: 3px solid var(--theme-color-border);
+}
+
+.dsp-block {
+  display: block;
+}
+
+.dsp-none {
+  display: none;
+}
+
+.dsp-inline {
+  display: inline;
+}
+
+.dsp-block-inline {
+  display: inline-block;
+}
+
+.dsp-flex-inline {
+  display: inline-flex;
+}
+
+.dsp-tbl {
+  display: table;
+}
+
+.dsp-tbl-row {
+  display: table-row;
+}
+
+.dsp-tbl-cell {
+  display: table-cell;
+}
+
+.dsp-tbl-column {
+  display: table-column;
+}
+
+.pos-abs {
+  position: absolute;
+}
+
+.pos-rel {
+  position: relative;
+}
+
+.pos-stat {
+  position: static;
+}
+
+.pos-fix {
+  position: fixed;
+}
+
+.pos-sticky {
+  position: sticky;
+  top: 0;
+  margin-top: 0;
+}
+
+/*placement*/
+.top-0 {
+  top: var(--box-density-0);
+}
+
+.top-1 {
+  top: var(--box-density-1);
+}
+
+.top-2 {
+  top: var(--box-density-2);
+}
+
+.top-3 {
+  top: var(--box-density-3);
+}
+
+.top-4 {
+  top: var(--box-density-4);
+}
+
+.top-5 {
+  top: var(--box-density-5);
+}
+
+.top-6 {
+  top: var(--box-density-6);
+}
+
+.top-7 {
+  top: var(--box-density-7);
+}
+
+.top-8 {
+  top: var(--box-density-8);
+}
+
+.right-0 {
+  right: var(--box-density-0);
+}
+
+.right-1 {
+  right: var(--box-density-1);
+}
+
+.right-2 {
+  right: var(--box-density-2);
+}
+
+.right-3 {
+  right: var(--box-density-3);
+}
+
+.right-4 {
+  right: var(--box-density-4);
+}
+
+.right-5 {
+  right: var(--box-density-5);
+}
+
+.right-6 {
+  right: var(--box-density-6);
+}
+
+.right-7 {
+  right: var(--box-density-7);
+}
+
+.right-8 {
+  right: var(--box-density-8);
+}
+
+.bottom-0 {
+  bottom: var(--box-density-0);
+}
+
+.bottom-1 {
+  bottom: var(--box-density-1);
+}
+
+.bottom-2 {
+  bottom: var(--box-density-2);
+}
+
+.bottom-3 {
+  bottom: var(--box-density-3);
+}
+
+.bottom-4 {
+  bottom: var(--box-density-4);
+}
+
+.bottom-5 {
+  bottom: var(--box-density-5);
+}
+
+.bottom-6 {
+  bottom: var(--box-density-6);
+}
+
+.bottom-7 {
+  bottom: var(--box-density-7);
+}
+
+.bottom-8 {
+  bottom: var(--box-density-8);
+}
+
+.left-0 {
+  left: var(--box-density-0);
+}
+
+.left-1 {
+  left: var(--box-density-1);
+}
+
+.left-2 {
+  left: var(--box-density-2);
+}
+
+.left-3 {
+  left: var(--box-density-3);
+}
+
+.left-4 {
+  left: var(--box-density-4);
+}
+
+.left-5 {
+  left: var(--box-density-5);
+}
+
+.left-6 {
+  left: var(--box-density-6);
+}
+
+.left-7 {
+  left: var(--box-density-7);
+}
+
+.left-8 {
+  left: var(--box-density-8);
+}
+
+/*radius*/
+.radius-tiny {
+  border-radius: 4px;
+}
+.radius-tiny-t {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.radius-tiny-b {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.radius-tiny-l {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.radius-tiny-r {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.radius-small {
+  border-radius: 8px;
+}
+.radius-small-t {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+.radius-small-b {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.radius-small-l {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.radius-small-r {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.radius-medium {
+  border-radius: 16px;
+}
+.radius-medium-t {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+.radius-medium-b {
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+.radius-medium-l {
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+}
+.radius-medium-r {
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+
+.shad-1 {
+  box-shadow: var(--box-shad-1);
+}
+
+.shad-2 {
+  box-shadow: var(--box-shad-2);
+}
+
+.shad-3 {
+  box-shadow: var(--box-shad-3);
+}
+
+.shad-4 {
+  box-shadow: var(--box-shad-4);
+}
+
+.shad-5 {
+  box-shadow: var(--box-shad-5);
+}
+
+.gap-tight {
+  gap: var(--box-density-preset-tight);
+}
+
+.gap-tiny {
+  gap: var(--box-density-preset-tiny);
+}
+
+.gap-small {
+  gap: var(--box-density-preset-small);
+}
+
+.gap-default {
+  gap: var(--box-density-preset-default);
+}
+
+.gap-medium {
+  gap: var(--box-density-preset-medium);
+}
+
+.gap-large {
+  gap: var(--box-density-preset-large);
+}
+/**---------------------color.css---------------------*/
+.foreground-palette-yellow {
+  color: #ffb900;
+}
+.foreground-palette-yellow-light {
+  color: #ffce4d;
+}
+.foreground-palette-yellow-lighter {
+  color: #ffe399;
+}
+.foreground-palette-yellow-dark {
+  color: #cc9400;
+}
+.foreground-palette-yellow-darker {
+  color: #996f00;
+}
+.foreground-palette-yellow-complement {
+  color: #0046ff;
+}
+.foreground-palette-yellow-invert {
+  color: #0046ff;
+}
+.foreground-palette-orange {
+  color: #d83b01;
+}
+.foreground-palette-orange-light {
+  color: #fe6127;
+}
+.foreground-palette-orange-lighter {
+  color: #fe9974;
+}
+.foreground-palette-orange-dark {
+  color: #a52d01;
+}
+.foreground-palette-orange-darker {
+  color: #721f01;
+}
+.foreground-palette-orange-complement {
+  color: #019ed8;
+}
+.foreground-palette-orange-invert {
+  color: #27c4fe;
+}
+.foreground-palette-red {
+  color: #d13438;
+}
+.foreground-palette-red-light {
+  color: #df7275;
+}
+.foreground-palette-red-lighter {
+  color: #edb1b2;
+}
+.foreground-palette-red-dark {
+  color: #ab272a;
+}
+.foreground-palette-red-darker {
+  color: #821d20;
+}
+.foreground-palette-red-complement {
+  color: #34d1cd;
+}
+.foreground-palette-red-invert {
+  color: #2ecbc7;
+}
+.foreground-palette-magenta {
+  color: #b4009e;
+}
+.foreground-palette-magenta-light {
+  color: #ff02e0;
+}
+.foreground-palette-magenta-lighter {
+  color: #ff4ee9;
+}
+.foreground-palette-magenta-dark {
+  color: #810071;
+}
+.foreground-palette-magenta-darker {
+  color: #4e0044;
+}
+.foreground-palette-magenta-complement {
+  color: #00b416;
+}
+.foreground-palette-magenta-invert {
+  color: #4bff61;
+}
+.foreground-palette-purple {
+  color: #5c2d91;
+}
+.foreground-palette-purple-light {
+  color: #8145c5;
+}
+.foreground-palette-purple-lighter {
+  color: #a980d7;
+}
+.foreground-palette-purple-dark {
+  color: #43216a;
+}
+.foreground-palette-purple-darker {
+  color: #2b1543;
+}
+.foreground-palette-purple-complement {
+  color: #62912d;
+}
+.foreground-palette-purple-invert {
+  color: #a3d26e;
+}
+.foreground-palette-green {
+  color: #107c10;
+}
+.foreground-palette-green-light {
+  color: #19c019;
+}
+.foreground-palette-green-lighter {
+  color: #3fe63f;
+}
+.foreground-palette-green-dark {
+  color: #0a4f0a;
+}
+.foreground-palette-green-darker {
+  color: #042204;
+}
+.foreground-palette-green-complement {
+  color: #7c107c;
+}
+.foreground-palette-green-invert {
+  color: #ef83ef;
+}
+.foreground-palette-teal {
+  color: #008272;
+}
+.foreground-palette-teal-light {
+  color: #00cfb5;
+}
+.foreground-palette-teal-lighter {
+  color: #1cffe3;
+}
+.foreground-palette-teal-dark {
+  color: #004f45;
+}
+.foreground-palette-teal-darker {
+  color: #001c19;
+}
+.foreground-palette-teal-complement {
+  color: #820010;
+}
+.foreground-palette-teal-invert {
+  color: #ff7d8d;
+}
+.foreground-palette-blue {
+  color: #0078d4;
+}
+.foreground-palette-blue-light {
+  color: #229fff;
+}
+.foreground-palette-blue-lighter {
+  color: #6ec0ff;
+}
+.foreground-palette-blue-dark {
+  color: #005ba1;
+}
+.foreground-palette-blue-darker {
+  color: #003e6e;
+}
+.foreground-palette-blue-complement {
+  color: #d45c00;
+}
+.foreground-palette-blue-invert {
+  color: #ff872b;
+}
+.foreground-palette-dark {
+  color: #323232;
+}
+.foreground-palette-dark-light {
+  color: #585858;
+}
+.foreground-palette-dark-lighter {
+  color: #7f7f7f;
+}
+.foreground-palette-dark-dark {
+  color: #191919;
+}
+.foreground-palette-dark-darker {
+  color: black;
+}
+.foreground-palette-dark-complement {
+  color: #323232;
+}
+.foreground-palette-dark-invert {
+  color: #cdcdcd;
+}
+
+.bg-palette-yellow {
+  background-color: #ffb900;
+}
+.bg-palette-yellow-light {
+  background-color: #ffce4d;
+}
+.bg-palette-yellow-lighter {
+  background-color: #ffe399;
+}
+.bg-palette-yellow-dark {
+  background-color: #cc9400;
+}
+.bg-palette-yellow-darker {
+  background-color: #996f00;
+}
+.bg-palette-yellow-complement {
+  background-color: #0046ff;
+}
+.bg-palette-yellow-invert {
+  background-color: #0046ff;
+}
+.bg-palette-orange {
+  background-color: #d83b01;
+}
+.bg-palette-orange-light {
+  background-color: #fe6127;
+}
+.bg-palette-orange-lighter {
+  background-color: #fe9974;
+}
+.bg-palette-orange-dark {
+  background-color: #a52d01;
+}
+.bg-palette-orange-darker {
+  background-color: #721f01;
+}
+.bg-palette-orange-complement {
+  background-color: #019ed8;
+}
+.bg-palette-orange-invert {
+  background-color: #27c4fe;
+}
+.bg-palette-red {
+  background-color: #d13438;
+}
+.bg-palette-red-light {
+  background-color: #df7275;
+}
+.bg-palette-red-lighter {
+  background-color: #edb1b2;
+}
+.bg-palette-red-dark {
+  background-color: #ab272a;
+}
+.bg-palette-red-darker {
+  background-color: #821d20;
+}
+.bg-palette-red-complement {
+  background-color: #34d1cd;
+}
+.bg-palette-red-invert {
+  background-color: #2ecbc7;
+}
+.bg-palette-magenta {
+  background-color: #b4009e;
+}
+.bg-palette-magenta-light {
+  background-color: #ff02e0;
+}
+.bg-palette-magenta-lighter {
+  background-color: #ff4ee9;
+}
+.bg-palette-magenta-dark {
+  background-color: #810071;
+}
+.bg-palette-magenta-darker {
+  background-color: #4e0044;
+}
+.bg-palette-magenta-complement {
+  background-color: #00b416;
+}
+.bg-palette-magenta-invert {
+  background-color: #4bff61;
+}
+.bg-palette-purple {
+  background-color: #5c2d91;
+}
+.bg-palette-purple-light {
+  background-color: #8145c5;
+}
+.bg-palette-purple-lighter {
+  background-color: #a980d7;
+}
+.bg-palette-purple-dark {
+  background-color: #43216a;
+}
+.bg-palette-purple-darker {
+  background-color: #2b1543;
+}
+.bg-palette-purple-complement {
+  background-color: #62912d;
+}
+.bg-palette-purple-invert {
+  background-color: #a3d26e;
+}
+.bg-palette-green {
+  background-color: #107c10;
+}
+.bg-palette-green-light {
+  background-color: #19c019;
+}
+.bg-palette-green-lighter {
+  background-color: #3fe63f;
+}
+.bg-palette-green-dark {
+  background-color: #0a4f0a;
+}
+.bg-palette-green-darker {
+  background-color: #042204;
+}
+.bg-palette-green-complement {
+  background-color: #7c107c;
+}
+.bg-palette-green-invert {
+  background-color: #ef83ef;
+}
+.bg-palette-teal {
+  background-color: #008272;
+}
+.bg-palette-teal-light {
+  background-color: #00cfb5;
+}
+.bg-palette-teal-lighter {
+  background-color: #1cffe3;
+}
+.bg-palette-teal-dark {
+  background-color: #004f45;
+}
+.bg-palette-teal-darker {
+  background-color: #001c19;
+}
+.bg-palette-teal-complement {
+  background-color: #820010;
+}
+.bg-palette-teal-invert {
+  background-color: #ff7d8d;
+}
+.bg-palette-blue {
+  background-color: #0078d4;
+}
+.bg-palette-blue-light {
+  background-color: #229fff;
+}
+.bg-palette-blue-lighter {
+  background-color: #6ec0ff;
+}
+.bg-palette-blue-dark {
+  background-color: #005ba1;
+}
+.bg-palette-blue-darker {
+  background-color: #003e6e;
+}
+.bg-palette-blue-complement {
+  background-color: #d45c00;
+}
+.bg-palette-blue-invert {
+  background-color: #ff872b;
+}
+.bg-palette-dark {
+  background-color: #323232;
+}
+.bg-palette-dark-light {
+  background-color: #585858;
+}
+.bg-palette-dark-lighter {
+  background-color: #7f7f7f;
+}
+.bg-palette-dark-dark {
+  background-color: #191919;
+}
+.bg-palette-dark-darker {
+  background-color: black;
+}
+.bg-palette-dark-complement {
+  background-color: #323232;
+}
+.bg-palette-dark-invert {
+  background-color: #cdcdcd;
+}
+
+.bg-themed-palette-yellow {
+  color: black;
+  text-shadow: 0 0 0.125rem #cc9400;
+  background-color: #ffb900;
+}
+.bg-themed-palette-yellow-light {
+  color: black;
+  background-color: #ffce4d;
+}
+.bg-themed-palette-yellow-lighter {
+  color: black;
+  background-color: #ffe399;
+}
+.bg-themed-palette-yellow-dark {
+  color: black;
+  background-color: #cc9400;
+}
+.bg-themed-palette-yellow-darker {
+  color: white;
+  background-color: #996f00;
+}
+.bg-themed-palette-yellow-complement {
+  color: white;
+  background-color: #0046ff;
+}
+.bg-themed-palette-yellow-invert {
+  color: white;
+  background-color: #0046ff;
+}
+.bg-themed-palette-orange {
+  color: white;
+  text-shadow: 0 0 0.125rem #a52d01;
+  background-color: #d83b01;
+}
+.bg-themed-palette-orange-light {
+  color: black;
+  background-color: #fe6127;
+}
+.bg-themed-palette-orange-lighter {
+  color: black;
+  background-color: #fe9974;
+}
+.bg-themed-palette-orange-dark {
+  color: white;
+  background-color: #a52d01;
+}
+.bg-themed-palette-orange-darker {
+  color: white;
+  background-color: #721f01;
+}
+.bg-themed-palette-orange-complement {
+  color: white;
+  background-color: #019ed8;
+}
+.bg-themed-palette-orange-invert {
+  color: black;
+  background-color: #27c4fe;
+}
+.bg-themed-palette-red {
+  color: white;
+  text-shadow: 0 0 0.125rem #ab272a;
+  background-color: #d13438;
+}
+.bg-themed-palette-red-light {
+  color: black;
+  background-color: #df7275;
+}
+.bg-themed-palette-red-lighter {
+  color: black;
+  background-color: #edb1b2;
+}
+.bg-themed-palette-red-dark {
+  color: white;
+  background-color: #ab272a;
+}
+.bg-themed-palette-red-darker {
+  color: white;
+  background-color: #821d20;
+}
+.bg-themed-palette-red-complement {
+  color: black;
+  background-color: #34d1cd;
+}
+.bg-themed-palette-red-invert {
+  color: black;
+  background-color: #2ecbc7;
+}
+.bg-themed-palette-magenta {
+  color: white;
+  text-shadow: 0 0 0.125rem #810071;
+  background-color: #b4009e;
+}
+.bg-themed-palette-magenta-light {
+  color: white;
+  background-color: #ff02e0;
+}
+.bg-themed-palette-magenta-lighter {
+  color: black;
+  background-color: #ff4ee9;
+}
+.bg-themed-palette-magenta-dark {
+  color: white;
+  background-color: #810071;
+}
+.bg-themed-palette-magenta-darker {
+  color: white;
+  background-color: #4e0044;
+}
+.bg-themed-palette-magenta-complement {
+  color: white;
+  background-color: #00b416;
+}
+.bg-themed-palette-magenta-invert {
+  color: black;
+  background-color: #4bff61;
+}
+.bg-themed-palette-purple {
+  color: white;
+  text-shadow: 0 0 0.125rem #43216a;
+  background-color: #5c2d91;
+}
+.bg-themed-palette-purple-light {
+  color: white;
+  background-color: #8145c5;
+}
+.bg-themed-palette-purple-lighter {
+  color: black;
+  background-color: #a980d7;
+}
+.bg-themed-palette-purple-dark {
+  color: white;
+  background-color: #43216a;
+}
+.bg-themed-palette-purple-darker {
+  color: white;
+  background-color: #2b1543;
+}
+.bg-themed-palette-purple-complement {
+  color: black;
+  background-color: #62912d;
+}
+.bg-themed-palette-purple-invert {
+  color: black;
+  background-color: #a3d26e;
+}
+.bg-themed-palette-green {
+  color: white;
+  text-shadow: 0 0 0.125rem #0a4f0a;
+  background-color: #107c10;
+}
+.bg-themed-palette-green-light {
+  color: black;
+  background-color: #19c019;
+}
+.bg-themed-palette-green-lighter {
+  color: black;
+  background-color: #3fe63f;
+}
+.bg-themed-palette-green-dark {
+  color: white;
+  background-color: #0a4f0a;
+}
+.bg-themed-palette-green-darker {
+  color: white;
+  background-color: #042204;
+}
+.bg-themed-palette-green-complement {
+  color: white;
+  background-color: #7c107c;
+}
+.bg-themed-palette-green-invert {
+  color: black;
+  background-color: #ef83ef;
+}
+.bg-themed-palette-teal {
+  color: white;
+  text-shadow: 0 0 0.125rem #004f45;
+  background-color: #008272;
+}
+.bg-themed-palette-teal-light {
+  color: black;
+  background-color: #00cfb5;
+}
+.bg-themed-palette-teal-lighter {
+  color: black;
+  background-color: #1cffe3;
+}
+.bg-themed-palette-teal-dark {
+  color: white;
+  background-color: #004f45;
+}
+.bg-themed-palette-teal-darker {
+  color: white;
+  background-color: #001c19;
+}
+.bg-themed-palette-teal-complement {
+  color: white;
+  background-color: #820010;
+}
+.bg-themed-palette-teal-invert {
+  color: black;
+  background-color: #ff7d8d;
+}
+.bg-themed-palette-blue {
+  color: white;
+  text-shadow: 0 0 0.125rem #005ba1;
+  background-color: #0078d4;
+}
+.bg-themed-palette-blue-light {
+  color: white;
+  background-color: #229fff;
+}
+.bg-themed-palette-blue-lighter {
+  color: black;
+  background-color: #6ec0ff;
+}
+.bg-themed-palette-blue-dark {
+  color: white;
+  background-color: #005ba1;
+}
+.bg-themed-palette-blue-darker {
+  color: white;
+  background-color: #003e6e;
+}
+.bg-themed-palette-blue-complement {
+  color: black;
+  background-color: #d45c00;
+}
+.bg-themed-palette-blue-invert {
+  color: black;
+  background-color: #ff872b;
+}
+.bg-themed-palette-dark {
+  color: white;
+  text-shadow: 0 0 0.125rem #191919;
+  background-color: #323232;
+}
+.bg-themed-palette-dark-light {
+  color: white;
+  background-color: #585858;
+}
+.bg-themed-palette-dark-lighter {
+  color: white;
+  background-color: #7f7f7f;
+}
+.bg-themed-palette-dark-dark {
+  color: white;
+  background-color: #191919;
+}
+.bg-themed-palette-dark-darker {
+  color: white;
+  background-color: black;
+}
+.bg-themed-palette-dark-complement {
+  color: white;
+  background-color: #323232;
+}
+.bg-themed-palette-dark-invert {
+  color: black;
+  background-color: #cdcdcd;
+}
+
+.border-color-palette-yellow {
+  border-color: #cc9400 !important;
+}
+.border-color-palette-orange {
+  border-color: #a52d01 !important;
+}
+.border-color-palette-red {
+  border-color: #ab272a !important;
+}
+.border-color-palette-magenta {
+  border-color: #810071 !important;
+}
+.border-color-palette-purple {
+  border-color: #43216a !important;
+}
+.border-color-palette-green {
+  border-color: #0a4f0a !important;
+}
+.border-color-palette-teal {
+  border-color: #004f45 !important;
+}
+.border-color-palette-blue {
+  border-color: #005ba1 !important;
+}
+.border-color-palette-dark {
+  border-color: #191919 !important;
+}
+
+.foreground-scheme-discrete {
+  color: #ccc;
+}
+.foreground-scheme-discrete-light {
+  color: #f2f2f2;
+}
+.foreground-scheme-discrete-lighter {
+  color: white;
+}
+.foreground-scheme-discrete-dark {
+  color: #b3b3b3;
+}
+.foreground-scheme-discrete-darker {
+  color: #999999;
+}
+.foreground-scheme-discrete-complement {
+  color: #cccccc;
+}
+.foreground-scheme-discrete-invert {
+  color: #333333;
+}
+.foreground-scheme-success {
+  color: green;
+}
+.foreground-scheme-success-light {
+  color: #00cd00;
+}
+.foreground-scheme-success-lighter {
+  color: #1aff1a;
+}
+.foreground-scheme-success-dark {
+  color: #004d00;
+}
+.foreground-scheme-success-darker {
+  color: #001a00;
+}
+.foreground-scheme-success-complement {
+  color: purple;
+}
+.foreground-scheme-success-invert {
+  color: #ff7fff;
+}
+.foreground-scheme-info {
+  color: #ffdd57;
+}
+.foreground-scheme-info-light {
+  color: #ffeca4;
+}
+.foreground-scheme-info-lighter {
+  color: #fffcf0;
+}
+.foreground-scheme-info-dark {
+  color: #ffd324;
+}
+.foreground-scheme-info-darker {
+  color: #f0bf00;
+}
+.foreground-scheme-info-complement {
+  color: #5779ff;
+}
+.foreground-scheme-info-invert {
+  color: #0022a8;
+}
+.foreground-scheme-warning {
+  color: hsl(48, 96%, 46%);
+}
+.foreground-scheme-warning-light {
+  color: #fbd53c;
+}
+.foreground-scheme-warning-lighter {
+  color: #fde587;
+}
+.foreground-scheme-warning-dark {
+  color: #b49104;
+}
+.foreground-scheme-warning-darker {
+  color: #826803;
+}
+.foreground-scheme-warning-complement {
+  color: #0532e6;
+}
+.foreground-scheme-warning-invert {
+  color: #1946fa;
+}
+.foreground-scheme-alert {
+  color: hsl(27, 100%, 50%);
+}
+.foreground-scheme-alert-light {
+  color: #ff9d4d;
+}
+.foreground-scheme-alert-lighter {
+  color: #ffc799;
+}
+.foreground-scheme-alert-dark {
+  color: #cc5c00;
+}
+.foreground-scheme-alert-darker {
+  color: #994500;
+}
+.foreground-scheme-alert-complement {
+  color: #008cff;
+}
+.foreground-scheme-alert-invert {
+  color: #008cff;
+}
+.foreground-scheme-error {
+  color: red;
+}
+.foreground-scheme-error-light {
+  color: #ff4d4d;
+}
+.foreground-scheme-error-lighter {
+  color: #ff9999;
+}
+.foreground-scheme-error-dark {
+  color: #cc0000;
+}
+.foreground-scheme-error-darker {
+  color: #990000;
+}
+.foreground-scheme-error-complement {
+  color: aqua;
+}
+.foreground-scheme-error-invert {
+  color: aqua;
+}
+
+.bg-scheme-discrete {
+  background-color: #ccc;
+}
+.bg-scheme-discrete-light {
+  background-color: #f2f2f2;
+}
+.bg-scheme-discrete-lighter {
+  background-color: white;
+}
+.bg-scheme-discrete-dark {
+  background-color: #b3b3b3;
+}
+.bg-scheme-discrete-darker {
+  background-color: #999999;
+}
+.bg-scheme-discrete-complement {
+  background-color: #cccccc;
+}
+.bg-scheme-discrete-invert {
+  background-color: #333333;
+}
+.bg-scheme-success {
+  background-color: green;
+}
+.bg-scheme-success-light {
+  background-color: #00cd00;
+}
+.bg-scheme-success-lighter {
+  background-color: #1aff1a;
+}
+.bg-scheme-success-dark {
+  background-color: #004d00;
+}
+.bg-scheme-success-darker {
+  background-color: #001a00;
+}
+.bg-scheme-success-complement {
+  background-color: purple;
+}
+.bg-scheme-success-invert {
+  background-color: #ff7fff;
+}
+.bg-scheme-info {
+  background-color: #ffdd57;
+}
+.bg-scheme-info-light {
+  background-color: #ffeca4;
+}
+.bg-scheme-info-lighter {
+  background-color: #fffcf0;
+}
+.bg-scheme-info-dark {
+  background-color: #ffd324;
+}
+.bg-scheme-info-darker {
+  background-color: #f0bf00;
+}
+.bg-scheme-info-complement {
+  background-color: #5779ff;
+}
+.bg-scheme-info-invert {
+  background-color: #0022a8;
+}
+.bg-scheme-warning {
+  background-color: hsl(48, 96%, 46%);
+}
+.bg-scheme-warning-light {
+  background-color: #fbd53c;
+}
+.bg-scheme-warning-lighter {
+  background-color: #fde587;
+}
+.bg-scheme-warning-dark {
+  background-color: #b49104;
+}
+.bg-scheme-warning-darker {
+  background-color: #826803;
+}
+.bg-scheme-warning-complement {
+  background-color: #0532e6;
+}
+.bg-scheme-warning-invert {
+  background-color: #1946fa;
+}
+.bg-scheme-alert {
+  background-color: hsl(27, 100%, 50%);
+}
+.bg-scheme-alert-light {
+  background-color: #ff9d4d;
+}
+.bg-scheme-alert-lighter {
+  background-color: #ffc799;
+}
+.bg-scheme-alert-dark {
+  background-color: #cc5c00;
+}
+.bg-scheme-alert-darker {
+  background-color: #994500;
+}
+.bg-scheme-alert-complement {
+  background-color: #008cff;
+}
+.bg-scheme-alert-invert {
+  background-color: #008cff;
+}
+.bg-scheme-error {
+  background-color: red;
+}
+.bg-scheme-error-light {
+  background-color: #ff4d4d;
+}
+.bg-scheme-error-lighter {
+  background-color: #ff9999;
+}
+.bg-scheme-error-dark {
+  background-color: #cc0000;
+}
+.bg-scheme-error-darker {
+  background-color: #990000;
+}
+.bg-scheme-error-complement {
+  background-color: aqua;
+}
+.bg-scheme-error-invert {
+  background-color: aqua;
+}
+
+.bg-themed-palette-discrete {
+  color: black;
+  text-shadow: 0 0 0.125rem #b3b3b3;
+  background-color: #ccc;
+}
+.bg-themed-palette-discrete-light {
+  color: black;
+  background-color: #f2f2f2;
+}
+.bg-themed-palette-discrete-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-discrete-dark {
+  color: black;
+  background-color: #b3b3b3;
+}
+.bg-themed-palette-discrete-darker {
+  color: black;
+  background-color: #999999;
+}
+.bg-themed-palette-discrete-complement {
+  color: black;
+  background-color: #cccccc;
+}
+.bg-themed-palette-discrete-invert {
+  color: white;
+  background-color: #333333;
+}
+.bg-themed-palette-success {
+  color: white;
+  text-shadow: 0 0 0.125rem #004d00;
+  background-color: green;
+}
+.bg-themed-palette-success-light {
+  color: black;
+  background-color: #00cd00;
+}
+.bg-themed-palette-success-lighter {
+  color: black;
+  background-color: #1aff1a;
+}
+.bg-themed-palette-success-dark {
+  color: white;
+  background-color: #004d00;
+}
+.bg-themed-palette-success-darker {
+  color: white;
+  background-color: #001a00;
+}
+.bg-themed-palette-success-complement {
+  color: white;
+  background-color: purple;
+}
+.bg-themed-palette-success-invert {
+  color: black;
+  background-color: #ff7fff;
+}
+.bg-themed-palette-info {
+  color: black;
+  text-shadow: 0 0 0.125rem #ffd324;
+  background-color: #ffdd57;
+}
+.bg-themed-palette-info-light {
+  color: black;
+  background-color: #ffeca4;
+}
+.bg-themed-palette-info-lighter {
+  color: black;
+  background-color: #fffcf0;
+}
+.bg-themed-palette-info-dark {
+  color: black;
+  background-color: #ffd324;
+}
+.bg-themed-palette-info-darker {
+  color: black;
+  background-color: #f0bf00;
+}
+.bg-themed-palette-info-complement {
+  color: white;
+  background-color: #5779ff;
+}
+.bg-themed-palette-info-invert {
+  color: white;
+  background-color: #0022a8;
+}
+.bg-themed-palette-warning {
+  color: black;
+  text-shadow: 0 0 0.125rem #b49104;
+  background-color: hsl(48, 96%, 46%);
+}
+.bg-themed-palette-warning-light {
+  color: black;
+  background-color: #fbd53c;
+}
+.bg-themed-palette-warning-lighter {
+  color: black;
+  background-color: #fde587;
+}
+.bg-themed-palette-warning-dark {
+  color: black;
+  background-color: #b49104;
+}
+.bg-themed-palette-warning-darker {
+  color: white;
+  background-color: #826803;
+}
+.bg-themed-palette-warning-complement {
+  color: white;
+  background-color: #0532e6;
+}
+.bg-themed-palette-warning-invert {
+  color: white;
+  background-color: #1946fa;
+}
+.bg-themed-palette-alert {
+  color: black;
+  text-shadow: 0 0 0.125rem #cc5c00;
+  background-color: hsl(27, 100%, 50%);
+}
+.bg-themed-palette-alert-light {
+  color: black;
+  background-color: #ff9d4d;
+}
+.bg-themed-palette-alert-lighter {
+  color: black;
+  background-color: #ffc799;
+}
+.bg-themed-palette-alert-dark {
+  color: black;
+  background-color: #cc5c00;
+}
+.bg-themed-palette-alert-darker {
+  color: white;
+  background-color: #994500;
+}
+.bg-themed-palette-alert-complement {
+  color: white;
+  background-color: #008cff;
+}
+.bg-themed-palette-alert-invert {
+  color: white;
+  background-color: #008cff;
+}
+.bg-themed-palette-error {
+  color: white;
+  text-shadow: 0 0 0.125rem #cc0000;
+  background-color: red;
+}
+.bg-themed-palette-error-light {
+  color: black;
+  background-color: #ff4d4d;
+}
+.bg-themed-palette-error-lighter {
+  color: black;
+  background-color: #ff9999;
+}
+.bg-themed-palette-error-dark {
+  color: white;
+  background-color: #cc0000;
+}
+.bg-themed-palette-error-darker {
+  color: white;
+  background-color: #990000;
+}
+.bg-themed-palette-error-complement {
+  color: black;
+  background-color: aqua;
+}
+.bg-themed-palette-error-invert {
+  color: black;
+  background-color: aqua;
+}
+
+.border-color-scheme-discrete {
+  border-color: #b3b3b3 !important;
+}
+.border-color-scheme-success {
+  border-color: #004d00 !important;
+}
+.border-color-scheme-info {
+  border-color: #ffd324 !important;
+}
+.border-color-scheme-warning {
+  border-color: #b49104 !important;
+}
+.border-color-scheme-alert {
+  border-color: #cc5c00 !important;
+}
+.border-color-scheme-error {
+  border-color: #cc0000 !important;
+}
+
+.foreground-grey-100 {
+  color: #f4f4f4;
+}
+.foreground-grey-100-light {
+  color: white;
+}
+.foreground-grey-100-lighter {
+  color: white;
+}
+.foreground-grey-100-dark {
+  color: #dbdbdb;
+}
+.foreground-grey-100-darker {
+  color: #c1c1c1;
+}
+.foreground-grey-100-complement {
+  color: #f4f4f4;
+}
+.foreground-grey-100-invert {
+  color: #0b0b0b;
+}
+.foreground-grey-200 {
+  color: #e2e2e2;
+}
+.foreground-grey-200-light {
+  color: white;
+}
+.foreground-grey-200-lighter {
+  color: white;
+}
+.foreground-grey-200-dark {
+  color: #c9c9c9;
+}
+.foreground-grey-200-darker {
+  color: #afafaf;
+}
+.foreground-grey-200-complement {
+  color: #e2e2e2;
+}
+.foreground-grey-200-invert {
+  color: #1d1d1d;
+}
+.foreground-grey-300 {
+  color: #d0d0d0;
+}
+.foreground-grey-300-light {
+  color: #f6f6f6;
+}
+.foreground-grey-300-lighter {
+  color: white;
+}
+.foreground-grey-300-dark {
+  color: #b7b7b7;
+}
+.foreground-grey-300-darker {
+  color: #9d9d9d;
+}
+.foreground-grey-300-complement {
+  color: #d0d0d0;
+}
+.foreground-grey-300-invert {
+  color: #2f2f2f;
+}
+.foreground-grey-400 {
+  color: #bdbdbd;
+}
+.foreground-grey-400-light {
+  color: #e3e3e3;
+}
+.foreground-grey-400-lighter {
+  color: white;
+}
+.foreground-grey-400-dark {
+  color: #a4a4a4;
+}
+.foreground-grey-400-darker {
+  color: #8a8a8a;
+}
+.foreground-grey-400-complement {
+  color: #bdbdbd;
+}
+.foreground-grey-400-invert {
+  color: #424242;
+}
+.foreground-grey-500 {
+  color: #ababab;
+}
+.foreground-grey-500-light {
+  color: #d1d1d1;
+}
+.foreground-grey-500-lighter {
+  color: #f8f8f8;
+}
+.foreground-grey-500-dark {
+  color: #929292;
+}
+.foreground-grey-500-darker {
+  color: #787878;
+}
+.foreground-grey-500-complement {
+  color: #ababab;
+}
+.foreground-grey-500-invert {
+  color: #545454;
+}
+.foreground-grey-600 {
+  color: #999999;
+}
+.foreground-grey-600-light {
+  color: #bfbfbf;
+}
+.foreground-grey-600-lighter {
+  color: #e6e6e6;
+}
+.foreground-grey-600-dark {
+  color: gray;
+}
+.foreground-grey-600-darker {
+  color: #666666;
+}
+.foreground-grey-600-complement {
+  color: #999999;
+}
+.foreground-grey-600-invert {
+  color: #666666;
+}
+
+.bg-grey-100 {
+  background-color: #f4f4f4;
+}
+.bg-grey-100-light {
+  background-color: white;
+}
+.bg-grey-100-lighter {
+  background-color: white;
+}
+.bg-grey-100-dark {
+  background-color: #dbdbdb;
+}
+.bg-grey-100-darker {
+  background-color: #c1c1c1;
+}
+.bg-grey-100-complement {
+  background-color: #f4f4f4;
+}
+.bg-grey-100-invert {
+  background-color: #0b0b0b;
+}
+.bg-grey-200 {
+  background-color: #e2e2e2;
+}
+.bg-grey-200-light {
+  background-color: white;
+}
+.bg-grey-200-lighter {
+  background-color: white;
+}
+.bg-grey-200-dark {
+  background-color: #c9c9c9;
+}
+.bg-grey-200-darker {
+  background-color: #afafaf;
+}
+.bg-grey-200-complement {
+  background-color: #e2e2e2;
+}
+.bg-grey-200-invert {
+  background-color: #1d1d1d;
+}
+.bg-grey-300 {
+  background-color: #d0d0d0;
+}
+.bg-grey-300-light {
+  background-color: #f6f6f6;
+}
+.bg-grey-300-lighter {
+  background-color: white;
+}
+.bg-grey-300-dark {
+  background-color: #b7b7b7;
+}
+.bg-grey-300-darker {
+  background-color: #9d9d9d;
+}
+.bg-grey-300-complement {
+  background-color: #d0d0d0;
+}
+.bg-grey-300-invert {
+  background-color: #2f2f2f;
+}
+.bg-grey-400 {
+  background-color: #bdbdbd;
+}
+.bg-grey-400-light {
+  background-color: #e3e3e3;
+}
+.bg-grey-400-lighter {
+  background-color: white;
+}
+.bg-grey-400-dark {
+  background-color: #a4a4a4;
+}
+.bg-grey-400-darker {
+  background-color: #8a8a8a;
+}
+.bg-grey-400-complement {
+  background-color: #bdbdbd;
+}
+.bg-grey-400-invert {
+  background-color: #424242;
+}
+.bg-grey-500 {
+  background-color: #ababab;
+}
+.bg-grey-500-light {
+  background-color: #d1d1d1;
+}
+.bg-grey-500-lighter {
+  background-color: #f8f8f8;
+}
+.bg-grey-500-dark {
+  background-color: #929292;
+}
+.bg-grey-500-darker {
+  background-color: #787878;
+}
+.bg-grey-500-complement {
+  background-color: #ababab;
+}
+.bg-grey-500-invert {
+  background-color: #545454;
+}
+.bg-grey-600 {
+  background-color: #999999;
+}
+.bg-grey-600-light {
+  background-color: #bfbfbf;
+}
+.bg-grey-600-lighter {
+  background-color: #e6e6e6;
+}
+.bg-grey-600-dark {
+  background-color: gray;
+}
+.bg-grey-600-darker {
+  background-color: #666666;
+}
+.bg-grey-600-complement {
+  background-color: #999999;
+}
+.bg-grey-600-invert {
+  background-color: #666666;
+}
+
+.bg-themed-palette-100 {
+  color: black;
+  text-shadow: 0 0 0.125rem #dbdbdb;
+  background-color: #f4f4f4;
+}
+.bg-themed-palette-100-light {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-100-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-100-dark {
+  color: black;
+  background-color: #dbdbdb;
+}
+.bg-themed-palette-100-darker {
+  color: black;
+  background-color: #c1c1c1;
+}
+.bg-themed-palette-100-complement {
+  color: black;
+  background-color: #f4f4f4;
+}
+.bg-themed-palette-100-invert {
+  color: white;
+  background-color: #0b0b0b;
+}
+.bg-themed-palette-200 {
+  color: black;
+  text-shadow: 0 0 0.125rem #c9c9c9;
+  background-color: #e2e2e2;
+}
+.bg-themed-palette-200-light {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-200-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-200-dark {
+  color: black;
+  background-color: #c9c9c9;
+}
+.bg-themed-palette-200-darker {
+  color: black;
+  background-color: #afafaf;
+}
+.bg-themed-palette-200-complement {
+  color: black;
+  background-color: #e2e2e2;
+}
+.bg-themed-palette-200-invert {
+  color: white;
+  background-color: #1d1d1d;
+}
+.bg-themed-palette-300 {
+  color: black;
+  text-shadow: 0 0 0.125rem #b7b7b7;
+  background-color: #d0d0d0;
+}
+.bg-themed-palette-300-light {
+  color: black;
+  background-color: #f6f6f6;
+}
+.bg-themed-palette-300-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-300-dark {
+  color: black;
+  background-color: #b7b7b7;
+}
+.bg-themed-palette-300-darker {
+  color: black;
+  background-color: #9d9d9d;
+}
+.bg-themed-palette-300-complement {
+  color: black;
+  background-color: #d0d0d0;
+}
+.bg-themed-palette-300-invert {
+  color: white;
+  background-color: #2f2f2f;
+}
+.bg-themed-palette-400 {
+  color: black;
+  text-shadow: 0 0 0.125rem #a4a4a4;
+  background-color: #bdbdbd;
+}
+.bg-themed-palette-400-light {
+  color: black;
+  background-color: #e3e3e3;
+}
+.bg-themed-palette-400-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-400-dark {
+  color: black;
+  background-color: #a4a4a4;
+}
+.bg-themed-palette-400-darker {
+  color: black;
+  background-color: #8a8a8a;
+}
+.bg-themed-palette-400-complement {
+  color: black;
+  background-color: #bdbdbd;
+}
+.bg-themed-palette-400-invert {
+  color: white;
+  background-color: #424242;
+}
+.bg-themed-palette-500 {
+  color: black;
+  text-shadow: 0 0 0.125rem #929292;
+  background-color: #ababab;
+}
+.bg-themed-palette-500-light {
+  color: black;
+  background-color: #d1d1d1;
+}
+.bg-themed-palette-500-lighter {
+  color: black;
+  background-color: #f8f8f8;
+}
+.bg-themed-palette-500-dark {
+  color: black;
+  background-color: #929292;
+}
+.bg-themed-palette-500-darker {
+  color: white;
+  background-color: #787878;
+}
+.bg-themed-palette-500-complement {
+  color: black;
+  background-color: #ababab;
+}
+.bg-themed-palette-500-invert {
+  color: white;
+  background-color: #545454;
+}
+.bg-themed-palette-600 {
+  color: black;
+  text-shadow: 0 0 0.125rem gray;
+  background-color: #999999;
+}
+.bg-themed-palette-600-light {
+  color: black;
+  background-color: #bfbfbf;
+}
+.bg-themed-palette-600-lighter {
+  color: black;
+  background-color: #e6e6e6;
+}
+.bg-themed-palette-600-dark {
+  color: black;
+  background-color: gray;
+}
+.bg-themed-palette-600-darker {
+  color: white;
+  background-color: #666666;
+}
+.bg-themed-palette-600-complement {
+  color: black;
+  background-color: #999999;
+}
+.bg-themed-palette-600-invert {
+  color: white;
+  background-color: #666666;
+}
+
+.border-color-grey-100 {
+  border-color: #dbdbdb !important;
+}
+.border-color-grey-200 {
+  border-color: #c9c9c9 !important;
+}
+.border-color-grey-300 {
+  border-color: #b7b7b7 !important;
+}
+.border-color-grey-400 {
+  border-color: #a4a4a4 !important;
+}
+.border-color-grey-500 {
+  border-color: #929292 !important;
+}
+.border-color-grey-600 {
+  border-color: gray !important;
+}
+/**---------------------flex.css---------------------*/
+.flex,
+.flex-h {
+  display: flex;
+  flex-direction: row;
+}
+.flex > .flex-main,
+.flex-h > .flex-main {
+  flex: 1 1 0;
+}
+.flex.flex-align-middle,
+.flex-h.flex-align-middle {
+  align-items: center;
+}
+.flex.flex-align-top,
+.flex-h.flex-align-top {
+  align-items: flex-start;
+}
+.flex.flex-align-left,
+.flex-h.flex-align-left {
+  align-items: flex-start;
+}
+.flex.flex-align-right,
+.flex-h.flex-align-right {
+  justify-content: flex-end;
+}
+.flex.flex-align-bottom,
+.flex-h.flex-align-bottom {
+  align-items: flex-end;
+}
+.flex.flex-align-center,
+.flex-h.flex-align-center {
+  justify-content: center;
+}
+.flex.flex-align-middle-center,
+.flex-h.flex-align-middle-center {
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+.flex.flex-align-stretch,
+.flex-h.flex-align-stretch {
+  color: blue;
+  align-items: stretch;
+}
+
+.flex-v {
+  display: flex;
+  flex-direction: column;
+}
+.flex-v > .flex-main {
+  flex: 1 1 0;
+  max-height: 100%;
+}
+.flex-v.flex-align-middle {
+  justify-content: center;
+}
+.flex-v.flex-align-top {
+  justify-content: flex-start;
+}
+.flex-v.flex-align-left {
+  align-items: flex-start;
+}
+.flex-v.flex-align-right {
+  align-items: flex-end;
+}
+.flex-v.flex-align-bottom {
+  justify-content: flex-end;
+}
+.flex-v.flex-align-center {
+  align-items: center;
+}
+.flex-v.flex-align-middle-center {
+  align-items: center;
+  justify-content: center;
+}
+.flex-v.flex-align-stretch {
+  color: red;
+  align-items: stretch;
+}
+
+.flex-inline {
+  display: inline-flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+.self-end {
+  align-self: flex-end;
+}
+.self-stretch {
+  align-self: stretch;
+}
+
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1;
+}
+
+.flex-grow-2 {
+  flex-grow: 2;
+}
+
+.flex-shrink-2 {
+  flex-shrink: 2;
+}
+/**---------------------grid.css---------------------*/
+.grid {
+  display: grid;
+}
+.grid-auto-flow-cols {
+  grid-auto-flow: column;
+}
+.grid-auto-cols-auto {
+  grid-auto-columns: auto;
+}
+.grid-auto-cols-min {
+  grid-auto-columns: min-content;
+}
+.grid-auto-cols-max {
+  grid-auto-columns: max-content;
+}
+.grid-auto-cols {
+  grid-auto-columns: minmax(0, 1fr);
+}
+.grid-auto-flow-rows {
+  grid-auto-flow: row;
+}
+.grid-auto-rows-auto {
+  grid-auto-rows: auto;
+}
+.grid-auto-rows-min {
+  grid-auto-rows: min-content;
+}
+.grid-auto-rows-max {
+  grid-auto-rows: max-content;
+}
+.grid-auto-rows {
+  grid-auto-rows: minmax(0, 1fr);
+}
+
+.grid-inline {
+  display: inline-grid;
+}
+
+/* template-columns */
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+/* template-rows */
+.grid-rows-1 {
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+
+.grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+.grid-rows-3 {
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
+.grid-rows-4 {
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+}
+
+.grid-rows-5 {
+  grid-template-rows: repeat(5, minmax(0, 1fr));
+}
+
+.grid-rows-6 {
+  grid-template-rows: repeat(6, minmax(0, 1fr));
+}
+
+.grid-rows-7 {
+  grid-template-rows: repeat(7, minmax(0, 1fr));
+}
+
+.grid-rows-8 {
+  grid-template-rows: repeat(8, minmax(0, 1fr));
+}
+/**---------------------menu.css---------------------*/
+/* & li.menu-item{
+    dsp: none;
+}
+&-drop{
+    dsp: none;
+    & .menu-open{
+        dsp: none;
+        & li.menu-item, > li{
+            dsp: none;
+        }
+    }
+    & .menu-close{
+        dsp: none;
+        & li.menu-item, > li{
+            dsp: none;
+        }
+    }
+}*/
+ul.menu {
+  list-style: none;
+  list-style-type: none;
+}
+ul.menu-v {
+  padding: 0;
+  margin: 0;
+  line-height: var(--box-density-2);
+}
+ul.menu-v li.menu-item,
+ul.menu-v li {
+  display: block;
+  margin: 0;
+  width: auto;
+  transition-property: all;
+  transition-duration: 0.15s;
+  padding: var(--box-density-1);
+  border-left: 1px solid var(--theme-color-border);
+}
+ul.menu-v li.menu-item:hover,
+ul.menu-v li:hover {
+  border-radius: var(--radius-small);
+  background-color: #ededed;
+  border-left: 1px solid var(--theme-color-primary);
+}
+ul.menu-v li.menu-item.active,
+ul.menu-v li.active {
+  border-radius: var(--radius-small);
+  background-color: #ededed;
+  font-weight: bold;
+}
+ul.menu-v li {
+  list-style: none;
+}
+ul.menu-h {
+  padding: 0;
+  margin: 0;
+  line-height: var(--box-density-2);
+}
+ul.menu-h li.menu-item,
+ul.menu-h li {
+  display: block;
+  margin: 0;
+  width: auto;
+  transition-property: all;
+  transition-duration: 0.15s;
+  padding: var(--box-density-1);
+  border-left: 1px solid var(--theme-color-border);
+}
+ul.menu-h li.menu-item:hover,
+ul.menu-h li:hover {
+  border-radius: var(--radius-small);
+  background-color: #ededed;
+  border-left: 1px solid var(--theme-color-primary);
+}
+ul.menu-h li.menu-item.active,
+ul.menu-h li.active {
+  border-radius: var(--radius-small);
+  background-color: #ededed;
+  font-weight: bold;
+}
+ul.menu-h li {
+  list-style: none;
+}
+ul.menu-v li.menu-item.active,
+ul.menu-v li.active {
+  font-weight: bold;
+  margin-left: 1rem;
+}
+ul.menu-h {
+  max-width: 100%;
+  display: inline-flex;
+  padding: 0 0;
+  position: relative;
+  border-bottom: 1px solid #ededed;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+ul.menu-h li.menu-item,
+ul.menu-h li {
+  margin: 0;
+  text-align: center;
+}
+/**---------------------overflow.css---------------------*/
+/* css overflow rules */
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-clip {
+  overflow: clip;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-x-visible {
+  overflow: visible;
+}
+
+.overflow-x-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-clip {
+  overflow: clip;
+}
+
+.overflow-x-scroll {
+  overflow: scroll;
+}
+
+.overflow-x-auto {
+  overflow: auto;
+}
+
+.overflow-y-visible {
+  overflow: visible;
+}
+
+.overflow-y-hidden {
+  overflow: hidden;
+}
+
+.overflow-y-clip {
+  overflow: clip;
+}
+
+.overflow-y-scroll {
+  overflow: scroll;
+}
+
+.overflow-y-auto {
+  overflow: auto;
+}
+/**---------------------scale.css---------------------*/
+.w-full {
+  width: 100%;
+}
+.w-full-max {
+  max-width: 100%;
+}
+.w-full-min {
+  min-width: 100%;
+}
+
+.w-mid {
+  width: 50%;
+}
+.w-mid-max {
+  max-width: 50%;
+}
+.w-mid-min {
+  min-width: 50%;
+}
+
+.w-quarter {
+  width: 25%;
+}
+.w-quarter-max {
+  max-width: 25%;
+}
+.w-quarter-min {
+  min-width: 25%;
+}
+
+.w-tiers {
+  width: 33%;
+}
+.w-tiers-max {
+  max-width: 33%;
+}
+.w-tiers-min {
+  min-width: 33%;
+}
+
+.w-content-max {
+  width: max-content;
+}
+.w-content-max-max {
+  max-width: max-content;
+}
+.w-content-max-min {
+  min-width: max-content;
+}
+
+.w-content-min {
+  width: min-content;
+}
+.w-content-min-max {
+  max-width: min-content;
+}
+.w-content-min-min {
+  min-width: min-content;
+}
+
+.w-tiny {
+  width: 2rem;
+}
+.w-tiny-max {
+  max-width: 2rem;
+}
+.w-tiny-min {
+  min-width: 2rem;
+}
+
+.w-small {
+  width: 4rem;
+}
+.w-small-max {
+  max-width: 4rem;
+}
+.w-small-min {
+  min-width: 4rem;
+}
+
+.w-medium {
+  width: 8rem;
+}
+.w-medium-max {
+  max-width: 8rem;
+}
+.w-medium-min {
+  min-width: 8rem;
+}
+
+.w-large {
+  width: 16rem;
+}
+.w-large-max {
+  max-width: 16rem;
+}
+.w-large-min {
+  min-width: 16rem;
+}
+
+.w-wide {
+  width: 32rem;
+}
+.w-wide-max {
+  max-width: 32rem;
+}
+.w-wide-min {
+  min-width: 32rem;
+}
+
+.w-1 {
+  width: 1rem;
+}
+.w-1-max {
+  max-width: 1rem;
+}
+.w-1-min {
+  min-width: 1rem;
+}
+
+.w-2 {
+  width: 2rem;
+}
+.w-2-max {
+  max-width: 2rem;
+}
+.w-2-min {
+  min-width: 2rem;
+}
+
+.w-4 {
+  width: 4rem;
+}
+.w-4-max {
+  max-width: 4rem;
+}
+.w-4-min {
+  min-width: 4rem;
+}
+
+.w-8 {
+  width: 8rem;
+}
+.w-8-max {
+  max-width: 8rem;
+}
+.w-8-min {
+  min-width: 8rem;
+}
+
+.w-16 {
+  width: 16rem;
+}
+.w-16-max {
+  max-width: 16rem;
+}
+.w-16-min {
+  min-width: 16rem;
+}
+
+.w-24 {
+  width: 24rem;
+}
+.w-24-max {
+  max-width: 24rem;
+}
+.w-24-min {
+  min-width: 24rem;
+}
+
+.w-32 {
+  width: 32rem;
+}
+.w-32-max {
+  max-width: 32rem;
+}
+.w-32-min {
+  min-width: 32rem;
+}
+
+.w-48 {
+  width: 48rem;
+}
+.w-48-max {
+  max-width: 48rem;
+}
+.w-48-min {
+  min-width: 48rem;
+}
+
+.w-64 {
+  width: 64rem;
+}
+.w-64-max {
+  max-width: 64rem;
+}
+.w-64-min {
+  min-width: 64rem;
+}
+
+.w-1-16 {
+  width: 6.25%;
+}
+.w-1-16-max {
+  max-width: 6.25%;
+}
+.w-1-16-min {
+  min-width: 6.25%;
+}
+
+.w-2-16 {
+  width: 12.5%;
+}
+.w-2-16-max {
+  max-width: 12.5%;
+}
+.w-2-16-min {
+  min-width: 12.5%;
+}
+
+.w-3-16 {
+  width: 18.75%;
+}
+.w-3-16-max {
+  max-width: 18.75%;
+}
+.w-3-16-min {
+  min-width: 18.75%;
+}
+
+.w-4-16 {
+  width: 25%;
+}
+.w-4-16-max {
+  max-width: 25%;
+}
+.w-4-16-min {
+  min-width: 25%;
+}
+
+.w-5-16 {
+  width: 31.25%;
+}
+.w-5-16-max {
+  max-width: 31.25%;
+}
+.w-5-16-min {
+  min-width: 31.25%;
+}
+
+.w-6-16 {
+  width: 37.5%;
+}
+.w-6-16-max {
+  max-width: 37.5%;
+}
+.w-6-16-min {
+  min-width: 37.5%;
+}
+
+.w-7-16 {
+  width: 43.75%;
+}
+.w-7-16-max {
+  max-width: 43.75%;
+}
+.w-7-16-min {
+  min-width: 43.75%;
+}
+
+.w-8-16 {
+  width: 50%;
+}
+.w-8-16-max {
+  max-width: 50%;
+}
+.w-8-16-min {
+  min-width: 50%;
+}
+
+.w-9-16 {
+  width: 56.25%;
+}
+.w-9-16-max {
+  max-width: 56.25%;
+}
+.w-9-16-min {
+  min-width: 56.25%;
+}
+
+.w-10-16 {
+  width: 62.5%;
+}
+.w-10-16-max {
+  max-width: 62.5%;
+}
+.w-10-16-min {
+  min-width: 62.5%;
+}
+
+.w-11-16 {
+  width: 68.75%;
+}
+.w-11-16-max {
+  max-width: 68.75%;
+}
+.w-11-16-min {
+  min-width: 68.75%;
+}
+
+.w-12-16 {
+  width: 75%;
+}
+.w-12-16-max {
+  max-width: 75%;
+}
+.w-12-16-min {
+  min-width: 75%;
+}
+
+.w-13-16 {
+  width: 81.25%;
+}
+.w-13-16-max {
+  max-width: 81.25%;
+}
+.w-13-16-min {
+  min-width: 81.25%;
+}
+
+.w-14-16 {
+  width: 87.5%;
+}
+.w-14-16-max {
+  max-width: 87.5%;
+}
+.w-14-16-min {
+  min-width: 87.5%;
+}
+
+.w-15-16 {
+  width: 93.75%;
+}
+.w-15-16-max {
+  max-width: 93.75%;
+}
+.w-15-16-min {
+  min-width: 93.75%;
+}
+
+.w-16-16 {
+  width: 100%;
+}
+.w-16-16-max {
+  max-width: 100%;
+}
+.w-16-16-min {
+  min-width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+.h-full-max {
+  max-height: 100%;
+}
+.h-full-min {
+  min-height: 100%;
+}
+
+.h-mid {
+  height: 50%;
+}
+.h-mid-max {
+  max-height: 50%;
+}
+.h-mid-min {
+  min-height: 50%;
+}
+
+.h-quarter {
+  height: 25%;
+}
+.h-quarter-max {
+  max-height: 25%;
+}
+.h-quarter-min {
+  min-height: 25%;
+}
+
+.h-tiers {
+  height: 33%;
+}
+.h-tiers-max {
+  max-height: 33%;
+}
+.h-tiers-min {
+  min-height: 33%;
+}
+
+.h-content-max {
+  height: max-content;
+}
+.h-content-max-max {
+  max-height: max-content;
+}
+.h-content-max-min {
+  min-height: max-content;
+}
+
+.h-content-min {
+  height: min-content;
+}
+.h-content-min-max {
+  max-height: min-content;
+}
+.h-content-min-min {
+  min-height: min-content;
+}
+
+.h-tiny {
+  height: 2rem;
+}
+.h-tiny-max {
+  max-height: 2rem;
+}
+.h-tiny-min {
+  min-height: 2rem;
+}
+
+.h-small {
+  height: 4rem;
+}
+.h-small-max {
+  max-height: 4rem;
+}
+.h-small-min {
+  min-height: 4rem;
+}
+
+.h-medium {
+  height: 8rem;
+}
+.h-medium-max {
+  max-height: 8rem;
+}
+.h-medium-min {
+  min-height: 8rem;
+}
+
+.h-large {
+  height: 16rem;
+}
+.h-large-max {
+  max-height: 16rem;
+}
+.h-large-min {
+  min-height: 16rem;
+}
+
+.h-wide {
+  height: 32rem;
+}
+.h-wide-max {
+  max-height: 32rem;
+}
+.h-wide-min {
+  min-height: 32rem;
+}
+
+.h-1 {
+  height: 1rem;
+}
+.h-1-max {
+  max-height: 1rem;
+}
+.h-1-min {
+  min-height: 1rem;
+}
+
+.h-2 {
+  height: 2rem;
+}
+.h-2-max {
+  max-height: 2rem;
+}
+.h-2-min {
+  min-height: 2rem;
+}
+
+.h-4 {
+  height: 4rem;
+}
+.h-4-max {
+  max-height: 4rem;
+}
+.h-4-min {
+  min-height: 4rem;
+}
+
+.h-8 {
+  height: 8rem;
+}
+.h-8-max {
+  max-height: 8rem;
+}
+.h-8-min {
+  min-height: 8rem;
+}
+
+.h-16 {
+  height: 16rem;
+}
+.h-16-max {
+  max-height: 16rem;
+}
+.h-16-min {
+  min-height: 16rem;
+}
+
+.h-24 {
+  height: 24rem;
+}
+.h-24-max {
+  max-height: 24rem;
+}
+.h-24-min {
+  min-height: 24rem;
+}
+
+.h-32 {
+  height: 32rem;
+}
+.h-32-max {
+  max-height: 32rem;
+}
+.h-32-min {
+  min-height: 32rem;
+}
+
+.h-48 {
+  height: 48rem;
+}
+.h-48-max {
+  max-height: 48rem;
+}
+.h-48-min {
+  min-height: 48rem;
+}
+
+.h-64 {
+  height: 64rem;
+}
+.h-64-max {
+  max-height: 64rem;
+}
+.h-64-min {
+  min-height: 64rem;
+}
+
+.h-1-16 {
+  height: 6.25%;
+}
+.h-1-16-max {
+  max-height: 6.25%;
+}
+.h-1-16-min {
+  min-height: 6.25%;
+}
+
+.h-2-16 {
+  height: 12.5%;
+}
+.h-2-16-max {
+  max-height: 12.5%;
+}
+.h-2-16-min {
+  min-height: 12.5%;
+}
+
+.h-3-16 {
+  height: 18.75%;
+}
+.h-3-16-max {
+  max-height: 18.75%;
+}
+.h-3-16-min {
+  min-height: 18.75%;
+}
+
+.h-4-16 {
+  height: 25%;
+}
+.h-4-16-max {
+  max-height: 25%;
+}
+.h-4-16-min {
+  min-height: 25%;
+}
+
+.h-5-16 {
+  height: 31.25%;
+}
+.h-5-16-max {
+  max-height: 31.25%;
+}
+.h-5-16-min {
+  min-height: 31.25%;
+}
+
+.h-6-16 {
+  height: 37.5%;
+}
+.h-6-16-max {
+  max-height: 37.5%;
+}
+.h-6-16-min {
+  min-height: 37.5%;
+}
+
+.h-7-16 {
+  height: 43.75%;
+}
+.h-7-16-max {
+  max-height: 43.75%;
+}
+.h-7-16-min {
+  min-height: 43.75%;
+}
+
+.h-8-16 {
+  height: 50%;
+}
+.h-8-16-max {
+  max-height: 50%;
+}
+.h-8-16-min {
+  min-height: 50%;
+}
+
+.h-9-16 {
+  height: 56.25%;
+}
+.h-9-16-max {
+  max-height: 56.25%;
+}
+.h-9-16-min {
+  min-height: 56.25%;
+}
+
+.h-10-16 {
+  height: 62.5%;
+}
+.h-10-16-max {
+  max-height: 62.5%;
+}
+.h-10-16-min {
+  min-height: 62.5%;
+}
+
+.h-11-16 {
+  height: 68.75%;
+}
+.h-11-16-max {
+  max-height: 68.75%;
+}
+.h-11-16-min {
+  min-height: 68.75%;
+}
+
+.h-12-16 {
+  height: 75%;
+}
+.h-12-16-max {
+  max-height: 75%;
+}
+.h-12-16-min {
+  min-height: 75%;
+}
+
+.h-13-16 {
+  height: 81.25%;
+}
+.h-13-16-max {
+  max-height: 81.25%;
+}
+.h-13-16-min {
+  min-height: 81.25%;
+}
+
+.h-14-16 {
+  height: 87.5%;
+}
+.h-14-16-max {
+  max-height: 87.5%;
+}
+.h-14-16-min {
+  min-height: 87.5%;
+}
+
+.h-15-16 {
+  height: 93.75%;
+}
+.h-15-16-max {
+  max-height: 93.75%;
+}
+.h-15-16-min {
+  min-height: 93.75%;
+}
+
+.h-16-16 {
+  height: 100%;
+}
+.h-16-16-max {
+  max-height: 100%;
+}
+.h-16-16-min {
+  min-height: 100%;
+}
+/**---------------------table.css---------------------*/
+/** cssfabric : tbl*/
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.table thead,
+.table .thead {
+  position: relative;
+  margin-bottom: 2rem;
+}
+.table.tbl-head thead tr th {
+  background-color: table_bg_color_head;
+}
+.table thead tr th,
+.table .thead .tr .th {
+  padding: 0.5rem 0.25rem;
+  font-weight: normal;
+}
+.table tbody tr td,
+.table .tbody .tr .td {
+  padding: 0.25em;
+}
+.table.tbl-layout {
+  table-layout: fixed;
+}
+.table.tbl-h-line th,
+.table.tbl-h-line td,
+.table.tbl-h-line .th,
+.table.tbl-h-line .td {
+  border-bottom: 1px solid #ededed;
+}
+.table.tbl-h-line:last-child {
+  border-bottom: none;
+}
+.table.tbl-v-line tr th, .table.tbl-v-line tr td {
+  border-right: 1px solid #ededed;
+}
+.table.tbl-v-line tr th:last-child, .table.tbl-v-line tr td:last-child {
+  border-right: none;
+}
+.table.tbl-border {
+  border: 1px solid #ededed;
+}
+.table.tbl-shad thead tr th {
+  box-shadow: 4px 4px 8px #ccc;
+  z-index: 11;
+}
+.table.tbl-shad thead tr th:last-child {
+  box-shadow: 4px 4px 8px #ccc;
+  z-index: -1;
+}
+.table.tbl-bg-strip-2 tr:nth-child(2n+2) td {
+  background-color: #ededed;
+}
+.table.tbl-bg-strip-5 tr:nth-child(5n+5) td {
+  background-color: #ededed;
+}
+.table.tbl-sticky {
+  position: relative;
+}
+.table.tbl-sticky thead tr,
+.table.tbl-sticky .thead .tr {
+  position: static;
+}
+.table.tbl-sticky thead tr th,
+.table.tbl-sticky thead tr .th,
+.table.tbl-sticky .thead .tr th,
+.table.tbl-sticky .thead .tr .th {
+  background-color: #ededed;
+  position: sticky;
+  top: 0;
+}
+/**---------------------text.css---------------------*/
+.text-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.h1,
+h1 {
+  font-size: var(--font-size-h1);
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.h2,
+h2 {
+  font-size: var(--font-size-h2);
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.h3,
+h3 {
+  font-size: var(--font-size-h3);
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.h4,
+h4 {
+  font-size: var(--font-size-h4);
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.h5,
+h5 {
+  font-size: var(--font-size-h5);
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.h6,
+h6 {
+  font-size: var(--font-size-h6);
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.text-cap {
+  text-transform: capitalize;
+}
+.text-up {
+  text-transform: uppercase;
+}
+.text-low {
+  text-transform: lowercase;
+}
+.text-none {
+  text-transform: none;
+}
+.text-full {
+  text-transform: full-width;
+}
+
+.text-l {
+  text-align: left;
+}
+.text-r {
+  text-align: right;
+}
+.text-center {
+  text-align: center;
+}
+.text-justify {
+  text-align: justify;
+}
+
+.text-50 {
+  font-weight: var(--font-weight-50);
+}
+.text-100 {
+  font-weight: var(--font-weight-100);
+}
+.text-300 {
+  font-weight: var(--font-weight-300);
+}
+.text-500 {
+  font-weight: var(--font-weight-500);
+}
+.text-900 {
+  font-weight: var(--font-weight-900);
+}
+.text-light {
+  font-weight: var(--font-weight-light);
+}
+.text-cap {
+  font-weight: var(--font-weight-cap);
+}
+.text-bold {
+  font-weight: var(--font-weight-bold);
+}
+.text-bolder {
+  font-weight: var(--font-weight-bolder);
+}
+
+.text-shad-discrete {
+  text-shadow: var(--text-shadow-discrete);
+}
+.text-shad-success {
+  text-shadow: var(--text-shadow-success);
+}
+.text-shad-info {
+  text-shadow: var(--text-shadow-info);
+}
+.text-shad-warning {
+  text-shadow: var(--text-shadow-warning);
+}
+.text-shad-alert {
+  text-shadow: var(--text-shadow-alert);
+}
+.text-shad-error {
+  text-shadow: var(--text-shadow-error);
+}
+
+.text-shad-yellow {
+  text-shadow: var(--text-shadow-yellow);
+}
+.text-shad-orange {
+  text-shadow: var(--text-shadow-orange);
+}
+.text-shad-red {
+  text-shadow: var(--text-shadow-red);
+}
+.text-shad-magenta {
+  text-shadow: var(--text-shadow-magenta);
+}
+.text-shad-purple {
+  text-shadow: var(--text-shadow-purple);
+}
+.text-shad-green {
+  text-shadow: var(--text-shadow-green);
+}
+.text-shad-teal {
+  text-shadow: var(--text-shadow-teal);
+}
+.text-shad-blue {
+  text-shadow: var(--text-shadow-blue);
+}
+.text-shad-dark {
+  text-shadow: var(--text-shadow-dark);
+}
+/**---------------------theme.css---------------------*/
+/* primary,secondary with alphas */
+.theme-text-primary {
+  color: var(--theme-color-primary);
+}
+.theme-text-primary-light {
+  color: var(--theme-color-primary-light);
+}
+.theme-text-primary-lighter {
+  color: var(--theme-color-primary-lighter);
+}
+.theme-text-primary-dark {
+  color: var(--theme-color-primary-dark);
+}
+.theme-text-primary-darker {
+  color: var(--theme-color-primary-darker);
+}
+.theme-text-primary-complement {
+  color: var(--theme-color-primary-complement);
+}
+.theme-text-primary-invert {
+  color: var(--theme-color-primary-invert);
+}
+
+.theme-bg-primary {
+  background-color: var(--theme-color-primary);
+}
+.theme-bg-primary-light {
+  background-color: var(--theme-color-primary-light);
+}
+.theme-bg-primary-lighter {
+  background-color: var(--theme-color-primary-lighter);
+}
+.theme-bg-primary-dark {
+  background-color: var(--theme-color-primary-dark);
+}
+.theme-bg-primary-darker {
+  background-color: var(--theme-color-primary-darker);
+}
+.theme-bg-primary-complement {
+  background-color: var(--theme-color-primary-complement);
+}
+.theme-bg-primary-invert {
+  background-color: var(--theme-color-primary-invert);
+}
+
+.theme-border-primary {
+  border-color: var(--theme-color-primary);
+}
+.theme-border-primary-light {
+  border-color: var(--theme-color-primary-light);
+}
+.theme-border-primary-lighter {
+  border-color: var(--theme-color-primary-lighter);
+}
+.theme-border-primary-dark {
+  border-color: var(--theme-color-primary-dark);
+}
+.theme-border-primary-darker {
+  border-color: var(--theme-color-primary-darker);
+}
+.theme-border-primary-complement {
+  border-color: var(--theme-color-primary-complement);
+}
+.theme-border-primary-invert {
+  border-color: var(--theme-color-primary-invert);
+}
+
+.theme-text-secondary {
+  color: var(--theme-color-secondary);
+}
+.theme-text-secondary-light {
+  color: var(--theme-color-secondary-light);
+}
+.theme-text-secondary-lighter {
+  color: var(--theme-color-secondary-lighter);
+}
+.theme-text-secondary-dark {
+  color: var(--theme-color-secondary-dark);
+}
+.theme-text-secondary-darker {
+  color: var(--theme-color-secondary-darker);
+}
+.theme-text-secondary-complement {
+  color: var(--theme-color-secondary-complement);
+}
+.theme-text-secondary-invert {
+  color: var(--theme-color-secondary-invert);
+}
+
+.theme-bg-secondary {
+  background-color: var(--theme-color-secondary);
+}
+.theme-bg-secondary-light {
+  background-color: var(--theme-color-secondary-light);
+}
+.theme-bg-secondary-lighter {
+  background-color: var(--theme-color-secondary-lighter);
+}
+.theme-bg-secondary-dark {
+  background-color: var(--theme-color-secondary-dark);
+}
+.theme-bg-secondary-darker {
+  background-color: var(--theme-color-secondary-darker);
+}
+.theme-bg-secondary-complement {
+  background-color: var(--theme-color-secondary-complement);
+}
+.theme-bg-secondary-invert {
+  background-color: var(--theme-color-secondary-invert);
+}
+
+.theme-border-secondary {
+  border-color: var(--theme-color-secondary);
+}
+.theme-border-secondary-light {
+  border-color: var(--theme-color-secondary-light);
+}
+.theme-border-secondary-lighter {
+  border-color: var(--theme-color-secondary-lighter);
+}
+.theme-border-secondary-dark {
+  border-color: var(--theme-color-secondary-dark);
+}
+.theme-border-secondary-darker {
+  border-color: var(--theme-color-secondary-darker);
+}
+.theme-border-secondary-complement {
+  border-color: var(--theme-color-secondary-complement);
+}
+.theme-border-secondary-invert {
+  border-color: var(--theme-color-secondary-invert);
+}
+
+.theme-text-tertiary {
+  color: var(--theme-color-tertiary);
+}
+.theme-text-tertiary-light {
+  color: var(--theme-color-tertiary-light);
+}
+.theme-text-tertiary-lighter {
+  color: var(--theme-color-tertiary-lighter);
+}
+.theme-text-tertiary-dark {
+  color: var(--theme-color-tertiary-dark);
+}
+.theme-text-tertiary-darker {
+  color: var(--theme-color-tertiary-darker);
+}
+.theme-text-tertiary-complement {
+  color: var(--theme-color-tertiary-complement);
+}
+.theme-text-tertiary-invert {
+  color: var(--theme-color-tertiary-invert);
+}
+
+.theme-bg-tertiary {
+  background-color: var(--theme-color-tertiary);
+}
+.theme-bg-tertiary-light {
+  background-color: var(--theme-color-tertiary-light);
+}
+.theme-bg-tertiary-lighter {
+  background-color: var(--theme-color-tertiary-lighter);
+}
+.theme-bg-tertiary-dark {
+  background-color: var(--theme-color-tertiary-dark);
+}
+.theme-bg-tertiary-darker {
+  background-color: var(--theme-color-tertiary-darker);
+}
+.theme-bg-tertiary-complement {
+  background-color: var(--theme-color-tertiary-complement);
+}
+.theme-bg-tertiary-invert {
+  background-color: var(--theme-color-tertiary-invert);
+}
+
+.theme-border-tertiary {
+  border-color: var(--theme-color-tertiary);
+}
+.theme-border-tertiary-light {
+  border-color: var(--theme-color-tertiary-light);
+}
+.theme-border-tertiary-lighter {
+  border-color: var(--theme-color-tertiary-lighter);
+}
+.theme-border-tertiary-dark {
+  border-color: var(--theme-color-tertiary-dark);
+}
+.theme-border-tertiary-darker {
+  border-color: var(--theme-color-tertiary-darker);
+}
+.theme-border-tertiary-complement {
+  border-color: var(--theme-color-tertiary-complement);
+}
+.theme-border-tertiary-invert {
+  border-color: var(--theme-color-tertiary-invert);
+}
+
+.theme-text-color, .theme-foreground-color {
+  color: var(--theme-color-text);
+}
+
+.theme-foreground-color-alpha {
+  color: var(--theme-color-foreground-alpha);
+}
+
+.theme-foreground-color-alpha-low {
+  color: var(--theme-color-foreground-alpha-low);
+}
+
+.theme-foreground-color-alpha-high {
+  color: var(--theme-color-foreground-alpha-high);
+}
+
+.theme-bg {
+  background-color: var(--theme-color-background);
+}
+
+.theme-bg-alpha {
+  background-color: var(--theme-color-background-alpha);
+}
+
+.theme-bg-alpha-low {
+  background-color: var(--theme-color-background-alpha-low);
+}
+
+.theme-bg-alpha-high {
+  background-color: var(--theme-color-background-alpha-high);
+}
+
+.theme-bg-paper {
+  background-color: var(--theme-color-paper);
+}
+
+.theme-bg-paper-alpha {
+  background-color: var(--theme-color-paper-alpha);
+}
+
+.theme-bg-paper-alpha-low {
+  background-color: var(--theme-color-paper-alpha-low);
+}
+
+.theme-bg-paper-alpha-high {
+  background-color: var(--theme-color-paper-alpha-high);
+}
+/**---------------------vars.css---------------------*/
+/* primary,secondary with alphas */
+/* 
+cssFabric vars
+*/
+:root {
+  /* --theme-color-primary|*-alpha-|*  */
+  /* theme primary colors*/
+  --theme-color-primary: rgb(32, 23, 0);
+  --theme-color-primary-light: #6d4e00;
+  --theme-color-primary-lighter: #b98500;
+  --theme-color-primary-dark: black;
+  --theme-color-primary-darker: black;
+  --theme-color-primary-complement: #000920;
+  --theme-color-primary-invert: #dfe8ff;
+  --theme-color-primary-alpha-low: rgba(32, 23, 0, 0.8);
+  --theme-color-primary-alpha: rgba(32, 23, 0, 0.3);
+  --theme-color-primary-alpha-high: rgba(32, 23, 0, 0.1);
+  /* theme secondary colors*/
+  --theme-color-secondary: #D14B02;
+  --theme-color-secondary-light: #fd7023;
+  --theme-color-secondary-lighter: #fea16e;
+  --theme-color-secondary-dark: #9e3902;
+  --theme-color-secondary-darker: #6c2701;
+  --theme-color-secondary-complement: #0288d1;
+  --theme-color-secondary-invert: #2eb4fd;
+  --theme-color-secondary-alpha-low: rgba(209, 75, 2, 0.8);
+  --theme-color-secondary-alpha: rgba(209, 75, 2, 0.3);
+  --theme-color-secondary-alpha-high: rgba(209, 75, 2, 0.1);
+  /* theme tertiary colors*/
+  --theme-color-tertiary: #88D102;
+  --theme-color-tertiary-light: #b0fd23;
+  --theme-color-tertiary-lighter: #cbfe6e;
+  --theme-color-tertiary-dark: #679e02;
+  --theme-color-tertiary-darker: #466c01;
+  --theme-color-tertiary-complement: #4b02d1;
+  --theme-color-tertiary-invert: #772efd;
+  --theme-color-tertiary-alpha-low: rgba(136, 209, 2, 0.8);
+  --theme-color-tertiary-alpha: rgba(136, 209, 2, 0.3);
+  --theme-color-tertiary-alpha-high: rgba(136, 209, 2, 0.1);
+  /* color-scheme primary secondary tertiary */
+  --color-scheme-discrete: #ccc;
+  --color-scheme-discrete-light: #f2f2f2;
+  --color-scheme-discrete-dark: #b3b3b3;
+  --color-scheme-discrete-alpha: rgba(204, 204, 204, 0.3);
+  --color-scheme-discrete-alpha-low: rgba(204, 204, 204, 0.8);
+  --color-scheme-discrete-alpha-high: rgba(204, 204, 204, 0.1);
+  --color-scheme-success: green;
+  --color-scheme-success-light: #00cd00;
+  --color-scheme-success-dark: #004d00;
+  --color-scheme-success-alpha: rgba(0, 128, 0, 0.3);
+  --color-scheme-success-alpha-low: rgba(0, 128, 0, 0.8);
+  --color-scheme-success-alpha-high: rgba(0, 128, 0, 0.1);
+  --color-scheme-info: #ffdd57;
+  --color-scheme-info-light: #ffeca4;
+  --color-scheme-info-dark: #ffd324;
+  --color-scheme-info-alpha: rgba(255, 221, 87, 0.3);
+  --color-scheme-info-alpha-low: rgba(255, 221, 87, 0.8);
+  --color-scheme-info-alpha-high: rgba(255, 221, 87, 0.1);
+  --color-scheme-warning: hsl(48, 96%, 46%);
+  --color-scheme-warning-light: #fbd53c;
+  --color-scheme-warning-dark: #b49104;
+  --color-scheme-warning-alpha: rgba(230, 185, 5, 0.3);
+  --color-scheme-warning-alpha-low: rgba(230, 185, 5, 0.8);
+  --color-scheme-warning-alpha-high: rgba(230, 185, 5, 0.1);
+  --color-scheme-alert: hsl(27, 100%, 50%);
+  --color-scheme-alert-light: #ff9d4d;
+  --color-scheme-alert-dark: #cc5c00;
+  --color-scheme-alert-alpha: rgba(255, 115, 0, 0.3);
+  --color-scheme-alert-alpha-low: rgba(255, 115, 0, 0.8);
+  --color-scheme-alert-alpha-high: rgba(255, 115, 0, 0.1);
+  --color-scheme-error: red;
+  --color-scheme-error-light: #ff4d4d;
+  --color-scheme-error-dark: #cc0000;
+  --color-scheme-error-alpha: rgba(255, 0, 0, 0.3);
+  --color-scheme-error-alpha-low: rgba(255, 0, 0, 0.8);
+  --color-scheme-error-alpha-high: rgba(255, 0, 0, 0.1);
+  /* color-palette */
+  --color-palette-yellow: #ffb900;
+  --color-palette-yellow-alpha: rgba(255, 185, 0, 0.3);
+  --color-palette-yellow-alpha-low: rgba(255, 185, 0, 0.8);
+  --color-palette-yellow-alpha-high: rgba(255, 185, 0, 0.1);
+  --color-palette-yellow-lighter: #ffe399;
+  --color-palette-yellow-light: #ffce4d;
+  --color-palette-yellow-dark: #cc9400;
+  --color-palette-yellow-darker: #996f00;
+  --color-palette-yellow-complement: #0046ff;
+  --color-palette-yellow-complement-alpha: rgba(0, 70, 255, 0.3);
+  --color-palette-yellow-complement-alpha-low: rgba(0, 70, 255, 0.8);
+  --color-palette-yellow-complement-alpha-high: rgba(0, 70, 255, 0.1);
+  --color-palette-yellow-invert: #0046ff;
+  --color-palette-yellow-invert-alpha: rgba(0, 70, 255, 0.3);
+  --color-palette-yellow-invert-alpha-low: rgba(0, 70, 255, 0.8);
+  --color-palette-yellow-invert-alpha-high: rgba(0, 70, 255, 0.1);
+  --color-palette-orange: #d83b01;
+  --color-palette-orange-alpha: rgba(216, 59, 1, 0.3);
+  --color-palette-orange-alpha-low: rgba(216, 59, 1, 0.8);
+  --color-palette-orange-alpha-high: rgba(216, 59, 1, 0.1);
+  --color-palette-orange-lighter: #fe9974;
+  --color-palette-orange-light: #fe6127;
+  --color-palette-orange-dark: #a52d01;
+  --color-palette-orange-darker: #721f01;
+  --color-palette-orange-complement: #019ed8;
+  --color-palette-orange-complement-alpha: rgba(1, 158, 216, 0.3);
+  --color-palette-orange-complement-alpha-low: rgba(1, 158, 216, 0.8);
+  --color-palette-orange-complement-alpha-high: rgba(1, 158, 216, 0.1);
+  --color-palette-orange-invert: #27c4fe;
+  --color-palette-orange-invert-alpha: rgba(39, 196, 254, 0.3);
+  --color-palette-orange-invert-alpha-low: rgba(39, 196, 254, 0.8);
+  --color-palette-orange-invert-alpha-high: rgba(39, 196, 254, 0.1);
+  --color-palette-red: #d13438;
+  --color-palette-red-alpha: rgba(209, 52, 56, 0.3);
+  --color-palette-red-alpha-low: rgba(209, 52, 56, 0.8);
+  --color-palette-red-alpha-high: rgba(209, 52, 56, 0.1);
+  --color-palette-red-lighter: #edb1b2;
+  --color-palette-red-light: #df7275;
+  --color-palette-red-dark: #ab272a;
+  --color-palette-red-darker: #821d20;
+  --color-palette-red-complement: #34d1cd;
+  --color-palette-red-complement-alpha: rgba(52, 209, 205, 0.3);
+  --color-palette-red-complement-alpha-low: rgba(52, 209, 205, 0.8);
+  --color-palette-red-complement-alpha-high: rgba(52, 209, 205, 0.1);
+  --color-palette-red-invert: #2ecbc7;
+  --color-palette-red-invert-alpha: rgba(46, 203, 199, 0.3);
+  --color-palette-red-invert-alpha-low: rgba(46, 203, 199, 0.8);
+  --color-palette-red-invert-alpha-high: rgba(46, 203, 199, 0.1);
+  --color-palette-magenta: #b4009e;
+  --color-palette-magenta-alpha: rgba(180, 0, 158, 0.3);
+  --color-palette-magenta-alpha-low: rgba(180, 0, 158, 0.8);
+  --color-palette-magenta-alpha-high: rgba(180, 0, 158, 0.1);
+  --color-palette-magenta-lighter: #ff4ee9;
+  --color-palette-magenta-light: #ff02e0;
+  --color-palette-magenta-dark: #810071;
+  --color-palette-magenta-darker: #4e0044;
+  --color-palette-magenta-complement: #00b416;
+  --color-palette-magenta-complement-alpha: rgba(0, 180, 22, 0.3);
+  --color-palette-magenta-complement-alpha-low: rgba(0, 180, 22, 0.8);
+  --color-palette-magenta-complement-alpha-high: rgba(0, 180, 22, 0.1);
+  --color-palette-magenta-invert: #4bff61;
+  --color-palette-magenta-invert-alpha: rgba(75, 255, 97, 0.3);
+  --color-palette-magenta-invert-alpha-low: rgba(75, 255, 97, 0.8);
+  --color-palette-magenta-invert-alpha-high: rgba(75, 255, 97, 0.1);
+  --color-palette-purple: #5c2d91;
+  --color-palette-purple-alpha: rgba(92, 45, 145, 0.3);
+  --color-palette-purple-alpha-low: rgba(92, 45, 145, 0.8);
+  --color-palette-purple-alpha-high: rgba(92, 45, 145, 0.1);
+  --color-palette-purple-lighter: #a980d7;
+  --color-palette-purple-light: #8145c5;
+  --color-palette-purple-dark: #43216a;
+  --color-palette-purple-darker: #2b1543;
+  --color-palette-purple-complement: #62912d;
+  --color-palette-purple-complement-alpha: rgba(98, 145, 45, 0.3);
+  --color-palette-purple-complement-alpha-low: rgba(98, 145, 45, 0.8);
+  --color-palette-purple-complement-alpha-high: rgba(98, 145, 45, 0.1);
+  --color-palette-purple-invert: #a3d26e;
+  --color-palette-purple-invert-alpha: rgba(163, 210, 110, 0.3);
+  --color-palette-purple-invert-alpha-low: rgba(163, 210, 110, 0.8);
+  --color-palette-purple-invert-alpha-high: rgba(163, 210, 110, 0.1);
+  --color-palette-green: #107c10;
+  --color-palette-green-alpha: rgba(16, 124, 16, 0.3);
+  --color-palette-green-alpha-low: rgba(16, 124, 16, 0.8);
+  --color-palette-green-alpha-high: rgba(16, 124, 16, 0.1);
+  --color-palette-green-lighter: #3fe63f;
+  --color-palette-green-light: #19c019;
+  --color-palette-green-dark: #0a4f0a;
+  --color-palette-green-darker: #042204;
+  --color-palette-green-complement: #7c107c;
+  --color-palette-green-complement-alpha: rgba(124, 16, 124, 0.3);
+  --color-palette-green-complement-alpha-low: rgba(124, 16, 124, 0.8);
+  --color-palette-green-complement-alpha-high: rgba(124, 16, 124, 0.1);
+  --color-palette-green-invert: #ef83ef;
+  --color-palette-green-invert-alpha: rgba(239, 131, 239, 0.3);
+  --color-palette-green-invert-alpha-low: rgba(239, 131, 239, 0.8);
+  --color-palette-green-invert-alpha-high: rgba(239, 131, 239, 0.1);
+  --color-palette-teal: #008272;
+  --color-palette-teal-alpha: rgba(0, 130, 114, 0.3);
+  --color-palette-teal-alpha-low: rgba(0, 130, 114, 0.8);
+  --color-palette-teal-alpha-high: rgba(0, 130, 114, 0.1);
+  --color-palette-teal-lighter: #1cffe3;
+  --color-palette-teal-light: #00cfb5;
+  --color-palette-teal-dark: #004f45;
+  --color-palette-teal-darker: #001c19;
+  --color-palette-teal-complement: #820010;
+  --color-palette-teal-complement-alpha: rgba(130, 0, 16, 0.3);
+  --color-palette-teal-complement-alpha-low: rgba(130, 0, 16, 0.8);
+  --color-palette-teal-complement-alpha-high: rgba(130, 0, 16, 0.1);
+  --color-palette-teal-invert: #ff7d8d;
+  --color-palette-teal-invert-alpha: rgba(255, 125, 141, 0.3);
+  --color-palette-teal-invert-alpha-low: rgba(255, 125, 141, 0.8);
+  --color-palette-teal-invert-alpha-high: rgba(255, 125, 141, 0.1);
+  --color-palette-blue: #0078d4;
+  --color-palette-blue-alpha: rgba(0, 120, 212, 0.3);
+  --color-palette-blue-alpha-low: rgba(0, 120, 212, 0.8);
+  --color-palette-blue-alpha-high: rgba(0, 120, 212, 0.1);
+  --color-palette-blue-lighter: #6ec0ff;
+  --color-palette-blue-light: #229fff;
+  --color-palette-blue-dark: #005ba1;
+  --color-palette-blue-darker: #003e6e;
+  --color-palette-blue-complement: #d45c00;
+  --color-palette-blue-complement-alpha: rgba(212, 92, 0, 0.3);
+  --color-palette-blue-complement-alpha-low: rgba(212, 92, 0, 0.8);
+  --color-palette-blue-complement-alpha-high: rgba(212, 92, 0, 0.1);
+  --color-palette-blue-invert: #ff872b;
+  --color-palette-blue-invert-alpha: rgba(255, 135, 43, 0.3);
+  --color-palette-blue-invert-alpha-low: rgba(255, 135, 43, 0.8);
+  --color-palette-blue-invert-alpha-high: rgba(255, 135, 43, 0.1);
+  --color-palette-dark: #323232;
+  --color-palette-dark-alpha: rgba(50, 50, 50, 0.3);
+  --color-palette-dark-alpha-low: rgba(50, 50, 50, 0.8);
+  --color-palette-dark-alpha-high: rgba(50, 50, 50, 0.1);
+  --color-palette-dark-lighter: #7f7f7f;
+  --color-palette-dark-light: #585858;
+  --color-palette-dark-dark: #191919;
+  --color-palette-dark-darker: black;
+  --color-palette-dark-complement: #323232;
+  --color-palette-dark-complement-alpha: rgba(50, 50, 50, 0.3);
+  --color-palette-dark-complement-alpha-low: rgba(50, 50, 50, 0.8);
+  --color-palette-dark-complement-alpha-high: rgba(50, 50, 50, 0.1);
+  --color-palette-dark-invert: #cdcdcd;
+  --color-palette-dark-invert-alpha: rgba(205, 205, 205, 0.3);
+  --color-palette-dark-invert-alpha-low: rgba(205, 205, 205, 0.8);
+  --color-palette-dark-invert-alpha-high: rgba(205, 205, 205, 0.1);
+  /* grays */
+  --color-gray-100: #f4f4f4;
+  --color-gray-100-alpha: rgba(244, 244, 244, 0.3);
+  --color-gray-100-alpha-low: rgba(244, 244, 244, 0.8);
+  --color-gray-100-alpha-high: rgba(244, 244, 244, 0.1);
+  --color-gray-200: #e2e2e2;
+  --color-gray-200-alpha: rgba(226, 226, 226, 0.3);
+  --color-gray-200-alpha-low: rgba(226, 226, 226, 0.8);
+  --color-gray-200-alpha-high: rgba(226, 226, 226, 0.1);
+  --color-gray-300: #d0d0d0;
+  --color-gray-300-alpha: rgba(208, 208, 208, 0.3);
+  --color-gray-300-alpha-low: rgba(208, 208, 208, 0.8);
+  --color-gray-300-alpha-high: rgba(208, 208, 208, 0.1);
+  --color-gray-400: #bdbdbd;
+  --color-gray-400-alpha: rgba(189, 189, 189, 0.3);
+  --color-gray-400-alpha-low: rgba(189, 189, 189, 0.8);
+  --color-gray-400-alpha-high: rgba(189, 189, 189, 0.1);
+  --color-gray-500: #ababab;
+  --color-gray-500-alpha: rgba(171, 171, 171, 0.3);
+  --color-gray-500-alpha-low: rgba(171, 171, 171, 0.8);
+  --color-gray-500-alpha-high: rgba(171, 171, 171, 0.1);
+  --color-gray-600: #999999;
+  --color-gray-600-alpha: rgba(153, 153, 153, 0.3);
+  --color-gray-600-alpha-low: rgba(153, 153, 153, 0.8);
+  --color-gray-600-alpha-high: rgba(153, 153, 153, 0.1);
+  /* text */
+  /*Hs*/
+  --font-size-h1: 3.1rem;
+  --font-size-h2: 2.68rem;
+  --font-size-h3: 2.26rem;
+  --font-size-h4: 1.84rem;
+  --font-size-h5: 1.42rem;
+  --font-size-h6: 1rem;
+  /*weight*/
+  --font-weight-50: 50;
+  --font-weight-100: 100;
+  --font-weight-300: 400;
+  --font-weight-500: 500;
+  --font-weight-900: 900;
+  --font-weight-light: lighter;
+  --font-weight-cap: normal;
+  --font-weight-bold: bold;
+  --font-weight-bolder: bolder;
+  /*text shadows color_schemes*/
+  --text-shadow-discrete: 0 0 0.125em #ccc;
+  --text-shadow-success: 0 0 0.125em green;
+  --text-shadow-info: 0 0 0.125em #ffdd57;
+  --text-shadow-warning: 0 0 0.125em hsl(48, 96%, 46%);
+  --text-shadow-alert: 0 0 0.125em hsl(27, 100%, 50%);
+  --text-shadow-error: 0 0 0.125em red;
+  /*text-shadows color_palette */
+  --text-shadow-yellow: 0 0 0.125em #ffb900;
+  --text-shadow-orange: 0 0 0.125em #d83b01;
+  --text-shadow-red: 0 0 0.125em #d13438;
+  --text-shadow-magenta: 0 0 0.125em #b4009e;
+  --text-shadow-purple: 0 0 0.125em #5c2d91;
+  --text-shadow-green: 0 0 0.125em #107c10;
+  --text-shadow-teal: 0 0 0.125em #008272;
+  --text-shadow-blue: 0 0 0.125em #0078d4;
+  --text-shadow-dark: 0 0 0.125em #323232;
+  /* boxes */
+  --box-density-0: 0rem;
+  --box-density-1: 0.5rem;
+  --box-density-2: 1rem;
+  --box-density-3: 1.5rem;
+  --box-density-4: 2rem;
+  --box-density-5: 2.5rem;
+  --box-density-6: 3rem;
+  --box-density-7: 3.5rem;
+  --box-density-8: 4rem;
+  --box-density-9: 4.5rem;
+  --box-density-10: 5rem;
+  --box-density-11: 5.5rem;
+  --box-density-12: 6rem;
+  --box-density-preset-tight: 0.25rem;
+  --box-density-preset-tiny: 0.25rem;
+  --box-density-preset-small: 0.5rem;
+  --box-density-preset-default: 1rem;
+  --box-density-preset-medium: 1.5rem;
+  --box-density-preset-large: 3rem;
+  --radius-tiny: 4px;
+  --radius-small: 8px;
+  --radius-medium: 16px;
+  /* shadows */
+  --box-shad-1: 0 0.8333333333px 1.724137931px 0 rgba(0, 0, 0, 0.15), 0 0.1526717557px 0.4651162791px 0 rgba(0, 0, 0, 0.1);
+  --box-shad-2: 0 1.6666666667px 3.4482758621px 0 rgba(0, 0, 0, 0.15), 0 0.3053435115px 0.9302325581px 0 rgba(0, 0, 0, 0.1);
+  --box-shad-3: 0 2.5px 5.1724137931px 0 rgba(0, 0, 0, 0.15), 0 0.4580152672px 1.3953488372px 0 rgba(0, 0, 0, 0.1);
+  --box-shad-4: 0 3.3333333333px 6.8965517241px 0 rgba(0, 0, 0, 0.15), 0 0.6106870229px 1.8604651163px 0 rgba(0, 0, 0, 0.1);
+  --box-shad-5: 0 4.1666666667px 8.6206896552px 0 rgba(0, 0, 0, 0.15), 0 0.7633587786px 2.3255813953px 0 rgba(0, 0, 0, 0.1);
+}
+:root [density=small] {
+  --box-density-0: 0rem;
+  --box-density-1: 0.25rem;
+  --box-density-2: 0.5rem;
+  --box-density-3: 0.75rem;
+  --box-density-4: 1rem;
+  --box-density-5: 1.25rem;
+  --box-density-6: 1.5rem;
+  --box-density-7: 1.75rem;
+  --box-density-8: 2rem;
+  --box-density-9: 2.25rem;
+  --box-density-10: 2.5rem;
+  --box-density-11: 2.75rem;
+  --box-density-12: 3rem;
+  --box-density-preset-tight: 0.0625rem;
+  --box-density-preset-tiny: 0.0625rem;
+  --box-density-preset-small: 0.125rem;
+  --box-density-preset-default: 0.25rem;
+  --box-density-preset-medium: 0.375rem;
+  --box-density-preset-large: 0.75rem;
+}
+:root [density=default] {
+  --box-density-0: 0rem;
+  --box-density-1: 0.5rem;
+  --box-density-2: 1rem;
+  --box-density-3: 1.5rem;
+  --box-density-4: 2rem;
+  --box-density-5: 2.5rem;
+  --box-density-6: 3rem;
+  --box-density-7: 3.5rem;
+  --box-density-8: 4rem;
+  --box-density-9: 4.5rem;
+  --box-density-10: 5rem;
+  --box-density-11: 5.5rem;
+  --box-density-12: 6rem;
+  --box-density-preset-tight: 0.125rem;
+  --box-density-preset-tiny: 0.125rem;
+  --box-density-preset-small: 0.25rem;
+  --box-density-preset-default: 0.5rem;
+  --box-density-preset-medium: 0.75rem;
+  --box-density-preset-large: 1.5rem;
+}
+:root [density=large] {
+  --box-density-0: 0rem;
+  --box-density-1: 0.875rem;
+  --box-density-2: 1.75rem;
+  --box-density-3: 2.625rem;
+  --box-density-4: 3.5rem;
+  --box-density-5: 4.375rem;
+  --box-density-6: 5.25rem;
+  --box-density-7: 6.125rem;
+  --box-density-8: 7rem;
+  --box-density-9: 7.875rem;
+  --box-density-10: 8.75rem;
+  --box-density-11: 9.625rem;
+  --box-density-12: 10.5rem;
+  --box-density-preset-tight: 0.21875rem;
+  --box-density-preset-tiny: 0.21875rem;
+  --box-density-preset-small: 0.4375rem;
+  --box-density-preset-default: 0.875rem;
+  --box-density-preset-medium: 1.3125rem;
+  --box-density-preset-large: 2.625rem;
+}
+:root,
+:root [data-theme=light] {
+  /* theme base colors*/
+  --theme-color-text: #282230;
+  --theme-color-foreground: #282230;
+  --theme-color-foreground-alpha: rgba(40, 34, 48, 0.3);
+  --theme-color-foreground-alpha-low: rgba(40, 34, 48, 0.8);
+  --theme-color-foreground-alpha-high: rgba(40, 34, 48, 0.1);
+  --theme-color-background: #ffffff;
+  --theme-color-background-alpha: rgba(255, 255, 255, 0.3);
+  --theme-color-background-alpha-low: rgba(255, 255, 255, 0.8);
+  --theme-color-background-alpha-high: rgba(255, 255, 255, 0.1);
+  --theme-color-paper: #f1f1f1;
+  --theme-color-paper-alpha: rgba(241, 241, 241, 0.3);
+  --theme-color-paper-alpha-low: rgba(241, 241, 241, 0.8);
+  --theme-color-paper-alpha-high: rgba(241, 241, 241, 0.1);
+  --theme-color-border: rgba(40, 34, 48, 0.2);
+  --theme-color-overlay: rgba($theme-color-foreground, 0.4);
+}
+:root [data-theme=dark] {
+  /* theme base colors*/
+  --theme-color-text: #f1f1f1;
+  --theme-color-foreground: #f1f1f1;
+  --theme-color-foreground-alpha: rgba(241, 241, 241, 0.3);
+  --theme-color-foreground-alpha-low: rgba(241, 241, 241, 0.8);
+  --theme-color-foreground-alpha-high: rgba(241, 241, 241, 0.1);
+  --theme-color-background: #27323a;
+  --theme-color-background-alpha: rgba(39, 50, 58, 0.3);
+  --theme-color-background-alpha-low: rgba(39, 50, 58, 0.8);
+  --theme-color-background-alpha-high: rgba(39, 50, 58, 0.1);
+  --theme-color-paper: #3a3b3b;
+  --theme-color-paper-alpha: rgba(58, 59, 59, 0.3);
+  --theme-color-paper-alpha-low: rgba(58, 59, 59, 0.8);
+  --theme-color-paper-alpha-high: rgba(58, 59, 59, 0.1);
+  --theme-color-border: rgba(241, 241, 241, 0.3);
+  --theme-color-overlay: rgba($theme-dark-color-background, 0.4);
+}
+/**---------------------zindex.css---------------------*/
+.zI-0 {
+  z-index: 0;
+}
+
+.zI-1 {
+  z-index: 100;
+}
+
+.zI-2 {
+  z-index: 200;
+}
+
+.zI-3 {
+  z-index: 300;
+}
+
+.zI-4 {
+  z-index: 400;
+}
+
+.zI-5 {
+  z-index: 500;
+}
+
+.zI-6 {
+  z-index: 600;
+}
+
+.zI-7 {
+  z-index: 700;
+}
+
+.zI-8 {
+  z-index: 800;
+}
+
+.zI-9 {
+  z-index: 900;
+}
+
+.zI-10 {
+  z-index: 1000;
+}