@x15ventures/x15-ui-library 3.11.4

package/dist/cjs/styles/shared/partials/buttons/_buttons.css

@@ -0,0 +1,461 @@
+/* Popovers */
+/* BUTTONS */
+button {
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 16px;
+  border-width: 1px;
+}
+button[disabled] {
+  cursor: not-allowed;
+}
+
+:root {
+  --buttonBorderRadius: 3px;
+  --buttonHoverTransition: none;
+  --buttonActiveTextDecoration: underline;
+  --textOnlyColor: rgb(90.8571428571, 124.9285714286, 147.6428571429);
+  --textOnlyInverseColor: #fff;
+  --textOnlyActiveFgColor: #181a1b;
+  --textOnlyActiveBg: transparent;
+  --textOnlyFocusBg: transparent;
+  --textOnlyHoverBg: transparent;
+  --textOnlyFocusOutline: #333;
+}
+
+.button {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+  column-gap: 10px;
+  row-gap: 10px;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: var(--buttonBorderRadius);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 16px;
+  padding: 0 15px;
+  background: var(--primaryButtonBg, #d3dee4);
+  border: var(--primaryButtonBorder, 1px solid #d3dee4);
+  color: var(--primaryButtonFgColor, #181a1b);
+  transition: background-color 0.4s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+}
+.button:hover, .button.hover, .button:active, .button.active {
+  background: var(--primaryButtonBgHover);
+  border: var(--primaryButtonBorderHover);
+  color: var(--primaryButtonFgColorHover);
+}
+.button:focus, .button.focus {
+  outline: var(--primaryButtonFocusOutline) !important;
+}
+.button.inverse {
+  background: var(--primaryButtonInverseBg);
+  border: var(--primaryButtonInverseBorder);
+  color: var(--primaryButtonInverseFgColor);
+}
+.button.inverse:hover, .button.inverse.hover, .button.inverse:active, .button.inverse.active {
+  background: var(--primaryButtonInverseBgHover);
+  border: var(--primaryButtonInverseBorderHover);
+  color: var(--primaryButtonInverseFgColorHover);
+}
+.button.inverse:focus, .button.inverse.focus {
+  outline: var(--primaryButtonInverseFocusOutline) !important;
+}
+.button.inverse.outline {
+  background: var(--primaryButtonOutlineInvertStyleBg);
+  border: var(--primaryButtonOutlineInvertStyleBorder);
+  color: var(--primaryButtonOutlineInvertStyleFgColor);
+}
+.button.inverse.outline:hover, .button.inverse.outline.hover, .button.inverse.outline:active, .button.inverse.outline.active {
+  background: var(--primaryButtonOutlineInvertStyleBgHover);
+  border: var(--primaryButtonOutlineInvertStyleBorderHover);
+  color: var(--primaryButtonOutlineInvertStyleFgColorHover);
+}
+.button.inverse.outline:focus, .button.inverse.outline.focus {
+  outline: var(--primaryButtonOutlineInvertStyleFocusOutline) !important;
+}
+.button.outline {
+  background: var(--primaryButtonOutlineStyleBg);
+  border: var(--primaryButtonOutlineStyleBorder);
+  color: var(--primaryButtonOutlineStyleFgColor);
+}
+.button.outline:hover, .button.outline.hover, .button.outline:active, .button.outline.active {
+  background: var(--primaryButtonOutlineStyleBgHover);
+  border: var(--primaryButtonOutlineStyleBorderHover);
+  color: var(--primaryButtonOutlineStyleFgColorHover);
+}
+.button.outline:focus, .button.outline.focus {
+  outline: var(--primaryButtonOutlineStyleFocusOutline) !important;
+}
+.button.disabled, .button[disabled] {
+  background: var(--primaryButtonDisabledBg);
+  border: var(--primaryButtonDisabledBorder);
+  color: var(--primaryButtonDisabledFgColor);
+}
+.button.disabled:hover, .button.disabled.hover, .button.disabled:active, .button.disabled.active, .button[disabled]:hover, .button[disabled].hover, .button[disabled]:active, .button[disabled].active {
+  background: var(--primaryButtonDisabledBgHover);
+  border: var(--primaryButtonDisabledBorderHover);
+  color: var(--primaryButtonDisabledFgColorHover);
+}
+.button.disabled:focus, .button.disabled.focus, .button[disabled]:focus, .button[disabled].focus {
+  outline: var(--primaryButtonDisabledFocusOutline) !important;
+}
+.button.text_only {
+  background: none;
+  border: none;
+  padding: 0 10px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--primaryTextOnlyColor);
+  border-bottom: 1px dotted var(--primaryTextOnlyColor);
+}
+.button.text_only:hover, .button.text_only.hover, .button.text_only:active, .button.text_only.active, .button.text_only:focus, .button.text_only.focus {
+  color: var(--primaryTextOnlyColor);
+}
+.button.invisible {
+  background: transparent;
+  border: none;
+  color: inherit;
+}
+.button.textOnly, .button.text-only, .button.text_only {
+  color: var(--textOnlyColor);
+}
+.button.iconOnly, .button.icon-only, .button.icon_only {
+  padding: 0;
+}
+.button.compact {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+  column-gap: 10px;
+  row-gap: 10px;
+  min-width: 32px;
+  min-height: 32px;
+  font-size: 13px;
+  padding: 0 14px;
+  padding: 0 10px;
+}
+.button.compact.iconOnly, .button.compact.icon-only, .button.compact.icon_only {
+  padding: 0;
+}
+.button.compact .iconSvg {
+  width: 22px;
+  height: 22px;
+}
+.button.active, .button:active {
+  text-decoration: var(--buttonActiveTextDecoration);
+}
+.button.inactive, .button.appearDisabled, .button[disabled], .button.disabled {
+  cursor: not-allowed;
+}
+.button.primary {
+  background: var(--primaryButtonBg);
+  border: var(--primaryButtonBorder);
+  color: var(--primaryButtonFgColor);
+}
+.button.primary:hover, .button.primary.hover, .button.primary:active, .button.primary.active {
+  background: var(--primaryButtonBgHover);
+  border: var(--primaryButtonBorderHover);
+  color: var(--primaryButtonFgColorHover);
+}
+.button.primary:focus, .button.primary.focus {
+  outline: var(--primaryButtonFocusOutline) !important;
+}
+.button.primary.inverse {
+  background: var(--primaryButtonInverseBg);
+  border: var(--primaryButtonInverseBorder);
+  color: var(--primaryButtonInverseFgColor);
+}
+.button.primary.inverse:hover, .button.primary.inverse.hover, .button.primary.inverse:active, .button.primary.inverse.active {
+  background: var(--primaryButtonInverseBgHover);
+  border: var(--primaryButtonInverseBorderHover);
+  color: var(--primaryButtonInverseFgColorHover);
+}
+.button.primary.inverse:focus, .button.primary.inverse.focus {
+  outline: var(--primaryButtonInverseFocusOutline) !important;
+}
+.button.primary.inverse.outline {
+  background: var(--primaryButtonOutlineInvertStyleBg);
+  border: var(--primaryButtonOutlineInvertStyleBorder);
+  color: var(--primaryButtonOutlineInvertStyleFgColor);
+}
+.button.primary.inverse.outline:hover, .button.primary.inverse.outline.hover, .button.primary.inverse.outline:active, .button.primary.inverse.outline.active {
+  background: var(--primaryButtonOutlineInvertStyleBgHover);
+  border: var(--primaryButtonOutlineInvertStyleBorderHover);
+  color: var(--primaryButtonOutlineInvertStyleFgColorHover);
+}
+.button.primary.inverse.outline:focus, .button.primary.inverse.outline.focus {
+  outline: var(--primaryButtonOutlineInvertStyleFocusOutline) !important;
+}
+.button.primary.outline {
+  background: var(--primaryButtonOutlineStyleBg);
+  border: var(--primaryButtonOutlineStyleBorder);
+  color: var(--primaryButtonOutlineStyleFgColor);
+}
+.button.primary.outline:hover, .button.primary.outline.hover, .button.primary.outline:active, .button.primary.outline.active {
+  background: var(--primaryButtonOutlineStyleBgHover);
+  border: var(--primaryButtonOutlineStyleBorderHover);
+  color: var(--primaryButtonOutlineStyleFgColorHover);
+}
+.button.primary.outline:focus, .button.primary.outline.focus {
+  outline: var(--primaryButtonOutlineStyleFocusOutline) !important;
+}
+.button.primary.disabled, .button.primary[disabled] {
+  background: var(--primaryButtonDisabledBg);
+  border: var(--primaryButtonDisabledBorder);
+  color: var(--primaryButtonDisabledFgColor);
+}
+.button.primary.disabled:hover, .button.primary.disabled.hover, .button.primary.disabled:active, .button.primary.disabled.active, .button.primary[disabled]:hover, .button.primary[disabled].hover, .button.primary[disabled]:active, .button.primary[disabled].active {
+  background: var(--primaryButtonDisabledBgHover);
+  border: var(--primaryButtonDisabledBorderHover);
+  color: var(--primaryButtonDisabledFgColorHover);
+}
+.button.primary.disabled:focus, .button.primary.disabled.focus, .button.primary[disabled]:focus, .button.primary[disabled].focus {
+  outline: var(--primaryButtonDisabledFocusOutline) !important;
+}
+.button.primary.text_only {
+  background: none;
+  border: none;
+  padding: 0 10px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--primaryTextOnlyColor);
+  border-bottom: 1px dotted var(--primaryTextOnlyColor);
+}
+.button.primary.text_only:hover, .button.primary.text_only.hover, .button.primary.text_only:active, .button.primary.text_only.active, .button.primary.text_only:focus, .button.primary.text_only.focus {
+  color: var(--primaryTextOnlyColor);
+}
+.button.secondary {
+  background: var(--secondaryButtonBg);
+  border: var(--secondaryButtonBorder);
+  color: var(--secondaryButtonFgColor);
+}
+.button.secondary:hover, .button.secondary.hover, .button.secondary:active, .button.secondary.active {
+  background: var(--secondaryButtonBgHover);
+  border: var(--secondaryButtonBorderHover);
+  color: var(--secondaryButtonFgColorHover);
+}
+.button.secondary:focus, .button.secondary.focus {
+  outline: var(--secondaryButtonFocusOutline) !important;
+}
+.button.secondary.inverse {
+  background: var(--secondaryButtonInverseBg);
+  border: var(--secondaryButtonInverseBorder);
+  color: var(--secondaryButtonInverseFgColor);
+}
+.button.secondary.inverse:hover, .button.secondary.inverse.hover, .button.secondary.inverse:active, .button.secondary.inverse.active {
+  background: var(--secondaryButtonInverseBgHover);
+  border: var(--secondaryButtonInverseBorderHover);
+  color: var(--secondaryButtonInverseFgColorHover);
+}
+.button.secondary.inverse:focus, .button.secondary.inverse.focus {
+  outline: var(--secondaryButtonInverseFocusOutline) !important;
+}
+.button.secondary.inverse.outline {
+  background: var(--secondaryButtonOutlineInvertStyleBg);
+  border: var(--secondaryButtonOutlineInvertStyleBorder);
+  color: var(--secondaryButtonOutlineInvertStyleFgColor);
+}
+.button.secondary.inverse.outline:hover, .button.secondary.inverse.outline.hover, .button.secondary.inverse.outline:active, .button.secondary.inverse.outline.active {
+  background: var(--secondaryButtonOutlineInvertStyleBgHover);
+  border: var(--secondaryButtonOutlineInvertStyleBorderHover);
+  color: var(--secondaryButtonOutlineInvertStyleFgColorHover);
+}
+.button.secondary.inverse.outline:focus, .button.secondary.inverse.outline.focus {
+  outline: var(--secondaryButtonOutlineInvertStyleFocusOutline) !important;
+}
+.button.secondary.outline {
+  background: var(--secondaryButtonOutlineStyleBg);
+  border: var(--secondaryButtonOutlineStyleBorder);
+  color: var(--secondaryButtonOutlineStyleFgColor);
+}
+.button.secondary.outline:hover, .button.secondary.outline.hover, .button.secondary.outline:active, .button.secondary.outline.active {
+  background: var(--secondaryButtonOutlineStyleBgHover);
+  border: var(--secondaryButtonOutlineStyleBorderHover);
+  color: var(--secondaryButtonOutlineStyleFgColorHover);
+}
+.button.secondary.outline:focus, .button.secondary.outline.focus {
+  outline: var(--secondaryButtonOutlineStyleFocusOutline) !important;
+}
+.button.secondary.disabled, .button.secondary[disabled] {
+  background: var(--secondaryButtonDisabledBg);
+  border: var(--secondaryButtonDisabledBorder);
+  color: var(--secondaryButtonDisabledFgColor);
+}
+.button.secondary.disabled:hover, .button.secondary.disabled.hover, .button.secondary.disabled:active, .button.secondary.disabled.active, .button.secondary[disabled]:hover, .button.secondary[disabled].hover, .button.secondary[disabled]:active, .button.secondary[disabled].active {
+  background: var(--secondaryButtonDisabledBgHover);
+  border: var(--secondaryButtonDisabledBorderHover);
+  color: var(--secondaryButtonDisabledFgColorHover);
+}
+.button.secondary.disabled:focus, .button.secondary.disabled.focus, .button.secondary[disabled]:focus, .button.secondary[disabled].focus {
+  outline: var(--secondaryButtonDisabledFocusOutline) !important;
+}
+.button.secondary.text_only {
+  background: none;
+  border: none;
+  padding: 0 10px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--secondaryTextOnlyColor);
+  border-bottom: 1px dotted var(--secondaryTextOnlyColor);
+}
+.button.secondary.text_only:hover, .button.secondary.text_only.hover, .button.secondary.text_only:active, .button.secondary.text_only.active, .button.secondary.text_only:focus, .button.secondary.text_only.focus {
+  color: var(--secondaryTextOnlyColor);
+}
+.button.tertiary {
+  background: var(--tertiaryButtonBg);
+  border: var(--tertiaryButtonBorder);
+  color: var(--tertiaryButtonFgColor);
+}
+.button.tertiary:hover, .button.tertiary.hover, .button.tertiary:active, .button.tertiary.active {
+  background: var(--tertiaryButtonBgHover);
+  border: var(--tertiaryButtonBorderHover);
+  color: var(--tertiaryButtonFgColorHover);
+}
+.button.tertiary:focus, .button.tertiary.focus {
+  outline: var(--tertiaryButtonFocusOutline) !important;
+}
+.button.tertiary.inverse {
+  background: var(--tertiaryButtonInverseBg);
+  border: var(--tertiaryButtonInverseBorder);
+  color: var(--tertiaryButtonInverseFgColor);
+}
+.button.tertiary.inverse:hover, .button.tertiary.inverse.hover, .button.tertiary.inverse:active, .button.tertiary.inverse.active {
+  background: var(--tertiaryButtonInverseBgHover);
+  border: var(--tertiaryButtonInverseBorderHover);
+  color: var(--tertiaryButtonInverseFgColorHover);
+}
+.button.tertiary.inverse:focus, .button.tertiary.inverse.focus {
+  outline: var(--tertiaryButtonInverseFocusOutline) !important;
+}
+.button.tertiary.inverse.outline {
+  background: var(--tertiaryButtonOutlineInvertStyleBg);
+  border: var(--tertiaryButtonOutlineInvertStyleBorder);
+  color: var(--tertiaryButtonOutlineInvertStyleFgColor);
+}
+.button.tertiary.inverse.outline:hover, .button.tertiary.inverse.outline.hover, .button.tertiary.inverse.outline:active, .button.tertiary.inverse.outline.active {
+  background: var(--tertiaryButtonOutlineInvertStyleBgHover);
+  border: var(--tertiaryButtonOutlineInvertStyleBorderHover);
+  color: var(--tertiaryButtonOutlineInvertStyleFgColorHover);
+}
+.button.tertiary.inverse.outline:focus, .button.tertiary.inverse.outline.focus {
+  outline: var(--tertiaryButtonOutlineInvertStyleFocusOutline) !important;
+}
+.button.tertiary.outline {
+  background: var(--tertiaryButtonOutlineStyleBg);
+  border: var(--tertiaryButtonOutlineStyleBorder);
+  color: var(--tertiaryButtonOutlineStyleFgColor);
+}
+.button.tertiary.outline:hover, .button.tertiary.outline.hover, .button.tertiary.outline:active, .button.tertiary.outline.active {
+  background: var(--tertiaryButtonOutlineStyleBgHover);
+  border: var(--tertiaryButtonOutlineStyleBorderHover);
+  color: var(--tertiaryButtonOutlineStyleFgColorHover);
+}
+.button.tertiary.outline:focus, .button.tertiary.outline.focus {
+  outline: var(--tertiaryButtonOutlineStyleFocusOutline) !important;
+}
+.button.tertiary.disabled, .button.tertiary[disabled] {
+  background: var(--tertiaryButtonDisabledBg);
+  border: var(--tertiaryButtonDisabledBorder);
+  color: var(--tertiaryButtonDisabledFgColor);
+}
+.button.tertiary.disabled:hover, .button.tertiary.disabled.hover, .button.tertiary.disabled:active, .button.tertiary.disabled.active, .button.tertiary[disabled]:hover, .button.tertiary[disabled].hover, .button.tertiary[disabled]:active, .button.tertiary[disabled].active {
+  background: var(--tertiaryButtonDisabledBgHover);
+  border: var(--tertiaryButtonDisabledBorderHover);
+  color: var(--tertiaryButtonDisabledFgColorHover);
+}
+.button.tertiary.disabled:focus, .button.tertiary.disabled.focus, .button.tertiary[disabled]:focus, .button.tertiary[disabled].focus {
+  outline: var(--tertiaryButtonDisabledFocusOutline) !important;
+}
+.button.tertiary.text_only {
+  background: none;
+  border: none;
+  padding: 0 10px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--tertiaryTextOnlyColor);
+  border-bottom: 1px dotted var(--tertiaryTextOnlyColor);
+}
+.button.tertiary.text_only:hover, .button.tertiary.text_only.hover, .button.tertiary.text_only:active, .button.tertiary.text_only.active, .button.tertiary.text_only:focus, .button.tertiary.text_only.focus {
+  color: var(--tertiaryTextOnlyColor);
+}
+.button.iconOnly, .button.icon-only, .button.icon_only {
+  padding: 0;
+  justify-content: center;
+  width: 44px;
+}
+.button.iconOnly .icon, .button.icon-only .icon, .button.icon_only .icon {
+  margin: 0;
+  top: 0;
+}
+.button.iconOnly.small, .button.iconOnly.compact, .button.icon-only.small, .button.icon-only.compact, .button.icon_only.small, .button.icon_only.compact {
+  height: 32px;
+  width: 32px;
+  min-width: auto;
+  min-height: auto;
+  font-size: 14px;
+}
+.button.textOnly, .button.text-only, .button.text_only {
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 400;
+  min-height: 22px;
+  line-height: 22px;
+  padding: 0 10px;
+  justify-content: inherit;
+}
+.button.textOnly:focus, .button.textOnly.focus, .button.textOnly:active, .button.textOnly.active, .button.textOnly:hover, .button.textOnly.hover, .button.text-only:focus, .button.text-only.focus, .button.text-only:active, .button.text-only.active, .button.text-only:hover, .button.text-only.hover, .button.text_only:focus, .button.text_only.focus, .button.text_only:active, .button.text_only.active, .button.text_only:hover, .button.text_only.hover {
+  border: none !important;
+  border-bottom: 1px solid transparent !important;
+  text-decoration: none;
+  border-radius: 22px;
+  background: var(--textOnlyFocusBg);
+}
+.button.textOnly:focus, .button.textOnly.focus, .button.textOnly:active, .button.textOnly.active, .button.text-only:focus, .button.text-only.focus, .button.text-only:active, .button.text-only.active, .button.text_only:focus, .button.text_only.focus, .button.text_only:active, .button.text_only.active {
+  outline: var(--textOnlyFocusOutline) !important;
+}
+.button.textOnly:hover, .button.textOnly.hover, .button.textOnly:active, .button.textOnly.active, .button.text-only:hover, .button.text-only.hover, .button.text-only:active, .button.text-only.active, .button.text_only:hover, .button.text_only.hover, .button.text_only:active, .button.text_only.active {
+  color: var(--textOnlyColor);
+  outline: none;
+  background: var(--textOnlyHoverBg);
+}
+.button.textOnly.inactive, .button.textOnly.appearDisabled, .button.text-only.inactive, .button.text-only.appearDisabled, .button.text_only.inactive, .button.text_only.appearDisabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.button.textOnly.inverse, .button.text-only.inverse, .button.text_only.inverse {
+  color: var(--textOnlyInverseColor);
+  background: none;
+  border: none;
+}
+.button.textOnly.inverse:focus, .button.textOnly.inverse.focus, .button.text-only.inverse:focus, .button.text-only.inverse.focus, .button.text_only.inverse:focus, .button.text_only.inverse.focus {
+  outline: var(--textOnlyFocusOutline) !important;
+}
+.button.textOnly.underline_off, .button.textOnly.underline-off, .button.textOnly.underlineOff, .button.text-only.underline_off, .button.text-only.underline-off, .button.text-only.underlineOff, .button.text_only.underline_off, .button.text_only.underline-off, .button.text_only.underlineOff {
+  border-bottom: 1px dotted transparent;
+}
+.button.textOnly.colouredText_off, .button.textOnly.colouredText-off, .button.textOnly.colouredTextOff, .button.text-only.colouredText_off, .button.text-only.colouredText-off, .button.text-only.colouredTextOff, .button.text_only.colouredText_off, .button.text_only.colouredText-off, .button.text_only.colouredTextOff {
+  color: inherit;
+}

package/dist/cjs/styles/shared/partials/layouts/_layouts.css

@@ -0,0 +1,198 @@
+/* Popovers */
+.flexRow,
+.flexColumn,
+.flexRowCompactGap,
+.flexRowWideGap,
+.flexColumnCompactGap,
+.flexColumnWideGap {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--defaultSpacing);
+  row-gap: var(--defaultSpacing);
+}
+.flexRow > *,
+.flexColumn > *,
+.flexRowCompactGap > *,
+.flexRowWideGap > *,
+.flexColumnCompactGap > *,
+.flexColumnWideGap > * {
+  flex: 1;
+}
+
+.flexRow,
+.flexRowCompactGap,
+.flexRowWideGap {
+  flex-direction: row;
+}
+
+.flexColumn,
+.flexColumnCompactGap,
+.flexColumnWideGap {
+  flex-direction: column;
+}
+
+.flexRowCompactGap {
+  column-gap: var(--compactSpacing);
+}
+
+.flexColumnCompactGap {
+  row-gap: var(--compactSpacing);
+}
+
+.flexRowWideGap {
+  column-gap: var(--wideSpacing);
+}
+
+.flexColumnWideGap {
+  row-gap: var(--wideSpacing);
+}
+
+.flexFull {
+  flex: 1;
+}
+
+.flex-auto > * {
+  flex: auto !important;
+}
+
+.flex-none > * {
+  flex: none !important;
+}
+
+.flex-1 > * {
+  flex: 1 !important;
+}
+
+.flex-1-2 > :nth-child(1) {
+  flex: 1;
+}
+.flex-1-2 > :nth-child(2) {
+  flex: 2;
+}
+
+.flex-1-3 > :nth-child(1) {
+  flex: 1;
+}
+.flex-1-3 > :nth-child(2) {
+  flex: 3;
+}
+
+.flex-1-4 > :nth-child(1) {
+  flex: 1;
+}
+.flex-1-4 > :nth-child(2) {
+  flex: 4;
+}
+
+.flex-2-1 > :nth-child(1) {
+  flex: 2;
+}
+.flex-2-1 > :nth-child(2) {
+  flex: 1;
+}
+
+.flex-3-1 > :nth-child(1) {
+  flex: 3;
+}
+.flex-3-1 > :nth-child(2) {
+  flex: 1;
+}
+
+.flex-4-1 > :nth-child(1) {
+  flex: 4;
+}
+.flex-4-1 > :nth-child(2) {
+  flex: 1;
+}
+
+.flex-child-auto {
+  flex: auto !important;
+}
+
+.flex-child-none {
+  flex: none !important;
+}
+
+.flex-child-1 {
+  flex: 1 !important;
+}
+
+.flex-child-2 {
+  flex: 2 !important;
+}
+
+.flex-child-3 {
+  flex: 3 !important;
+}
+
+.centerAlign.flexRow {
+  justify-content: center;
+}
+.centerAlign.flexColumn {
+  align-items: center;
+}
+
+.leftAlign.flexRow {
+  justify-content: flex-start;
+}
+.leftAlign.flexColumn {
+  align-items: flex-start;
+}
+
+.rightAlign.flexRow {
+  justify-content: flex-end;
+}
+.rightAlign.flexColumn {
+  align-items: flex-end;
+}
+
+.topAlign.flexRow {
+  align-items: flex-start;
+}
+.topAlign.flexColumn {
+  justify-content: flex-start;
+}
+
+.middleAlign.flexRow {
+  align-items: center;
+}
+.middleAlign.flexColumn {
+  justify-content: center;
+}
+
+.bottomAlign.flexRow {
+  align-items: flex-end;
+}
+.bottomAlign.flexColumn {
+  justify-content: flex-end;
+}
+
+body {
+  background: var(--bodyBg);
+  scrollbar-color: var(--scrollBarFgColor) var(--scrollBarBgColor);
+  scrollbar-width: thin;
+  min-height: 100vh;
+}
+body .mainHeader {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--mainHeaderPadding);
+  width: 100%;
+  box-sizing: border-box;
+  border: var(--mainHeaderBorder);
+  border-bottom: var(--mainHeaderBorderBottom);
+  background: var(--mainHeaderBg);
+}
+body main {
+  padding: var(--mainContentPadding);
+  background: var(--mainContentBg);
+  color: var(--mainContentFgColor);
+}
+
+.containerLayout main {
+  max-width: var(--pageContainerMaxWidth);
+  margin: 0 auto;
+}