@x15ventures/x15-ui-library 3.11.4

package/dist/cjs/styles/shared/_allPartials.css

@@ -0,0 +1,1374 @@
+/* TYPOGRAPHY */
+* {
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+html {
+  font-size: 10px; /* To make rem units easy to calculate and implement */
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bodyBg);
+  color: var(--bodyFgColor);
+  font-family: var(--bodyFont);
+  font-style: normal;
+}
+
+body {
+  font-size: 16px; /* Match min input font size that prevents zoom */
+}
+
+h1, h2, h3, h4 {
+  font-family: var(--headingFont);
+}
+
+h1 {
+  font-size: var(--heading1FontSize, 36px);
+}
+
+h2 {
+  font-size: var(--heading2FontSize, 30px);
+}
+
+h3 {
+  font-size: var(--heading3FontSize, 24px);
+}
+
+h4 {
+  font-size: var(--heading4FontSize, 18px);
+}
+
+p, td, th, button, input, select, textarea {
+  font-family: var(--bodyFont);
+}
+
+h1, h2, h3, h4, p, ul, ol {
+  margin: 0;
+}
+
+header h1, header h2, header h3, header h4 {
+  flex: 1;
+}
+
+p sup,
+p sub {
+  margin: -5px 0;
+  display: inline-block;
+}
+p + p {
+  margin-top: 0;
+}
+p + ul,
+p + ol {
+  margin-top: 0;
+}
+
+.centerAlign {
+  text-align: center !important;
+}
+
+.leftAlign {
+  text-align: left !important;
+}
+
+.rightAlign {
+  text-align: right !important;
+}
+
+.spaceBefore {
+  margin-top: 20px !important;
+}
+
+.spaceBeforeCompact {
+  margin-top: 10px !important;
+}
+
+.spaceAfter {
+  margin-bottom: 20px !important;
+}
+
+.spaceAfterCompact {
+  margin-bottom: 10px !important;
+}
+
+ul.noBullet {
+  list-style-type: none;
+  padding: 0;
+}
+ul.noBullet li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.sr-only {
+  position: absolute;
+  left: -20000px;
+  top: -20000px;
+  width: 1px;
+  overflow: hidden;
+}
+
+.codeSnippet {
+  font-family: monospace;
+  background: #eee;
+  border-radius: 3px;
+  border: 1px solid #ddd;
+  padding: 5px;
+  display: inline-block;
+}
+
+@font-face {
+  font-family: "Catalogue";
+  src: url("../fonts/Catalogue-Regular.woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Catalogue";
+  src: url("../fonts/Catalogue-Light.woff2");
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: "CBABeaconSans";
+  font-weight: 400;
+  src: url("../fonts/CBABeaconSans-Regular.woff2") format("woff2"), url("../fonts/CBABeaconSans-Regular.woff") format("woff"), url("../fonts/CBABeaconSans-Regular.ttf") format("ttf");
+}
+@font-face {
+  font-family: "CBABeaconSans";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../fonts/CBABeaconSans-Italic.woff2") format("woff2"), url("../fonts/CBABeaconSans-Italic.woff") format("woff"), url("../fonts/CBABeaconSans-Italic.ttf") format("ttf");
+}
+@font-face {
+  font-family: "CBABeaconSans";
+  font-weight: 700;
+  src: url("../fonts/CBABeaconSans-Bold.woff2") format("woff2"), url("../fonts/CBABeaconSans-Bold.woff") format("woff"), url("../fonts/CBABeaconSans-Bold.ttf") format("ttf");
+}
+@font-face {
+  font-family: "CBABeaconSans";
+  font-style: italic;
+  font-weight: 700;
+  src: url("../fonts/CBABeaconSans-BoldItalic.woff2") format("woff2"), url("../fonts/CBABeaconSans-BoldItalic.woff") format("woff"), url("../fonts/CBABeaconSans-BoldItalic.ttf") format("ttf");
+}
+@font-face {
+  font-family: "CBABeaconSans";
+  font-weight: 800;
+  src: url("../fonts/CBABeaconSans-ExtraBold.woff2") format("woff2"), url("../fonts/CBABeaconSans-ExtraBold.woff") format("woff"), url("../fonts/CBABeaconSans-ExtraBold.ttf") format("ttf");
+}
+/* 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;
+}
+
+/* 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;
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.slide-down {
+  opacity: 0;
+  transform: translateY(-10px);
+  animation: slide-down 1s ease infinite;
+}
+
+@keyframes slide {
+  from {
+    margin-top: -25vh;
+  }
+  to {
+    margin-top: 0;
+  }
+}
+.slide-down {
+  margin-top: -25vh;
+  animation: slide 1s ease infinite;
+}
+
+@keyframes grow {
+  from {
+    transform: scale(0.1);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+.grow {
+  transform: scale(0.1);
+  animation: grow 1s ease infinite;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    display: none;
+  }
+}
+.fadeOut {
+  opacity: 1;
+  animation: fadeOut 1s ease infinite;
+}
+
+@keyframes pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+.pulse {
+  opacity: 1;
+  animation: pulse 1s ease infinite;
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.reveal {
+  opacity: 0;
+  animation: reveal 1s ease infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.rotate {
+  transform: rotate(0deg);
+  animation: rotate 1s ease infinite;
+}
+
+/* GENERIC TIMINGS */
+.animate-once {
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+}
+
+.animate-slow {
+  animation-duration: 3s;
+}
+
+.animate-fast {
+  animation-duration: 0.5s;
+}
+
+.x15Table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  margin: 10px 0 20px;
+  border-right: 1px solid #f6f8fa;
+  border-top: 1px solid #f6f8fa;
+}
+.x15Table th, .x15Table td {
+  padding: 10px 10px;
+  font-size: 13px;
+  vertical-align: middle;
+  border-left: 1px solid #f6f8fa;
+  border-bottom: 1px solid #f6f8fa;
+}
+.x15Table th.alignLeft, .x15Table td.alignLeft {
+  text-align: left;
+}
+.x15Table th.alignCenter, .x15Table td.alignCenter {
+  text-align: center;
+}
+.x15Table th.alignRight, .x15Table td.alignRight {
+  text-align: right;
+}
+.x15Table.wideSpacing th, .x15Table.wideSpacing td {
+  padding: 20px 20px;
+}
+.x15Table.compactSpacing th, .x15Table.compactSpacing td {
+  padding: 5px 5px;
+}
+.x15Table.bandsEven tbody tr:nth-child(even) {
+  background: #f6f8fa;
+}
+.x15Table.bandsOdd tbody tr:nth-child(odd) {
+  background: #f6f8fa;
+}
+.x15Table tr.verticalAlignTop th, .x15Table tr.verticalAlignTop td {
+  vertical-align: top;
+}
+.x15Table tr.verticalAlignMiddle th, .x15Table tr.verticalAlignMiddle td {
+  vertical-align: middle;
+}
+.x15Table tr.verticalAlignBottom th, .x15Table tr.verticalAlignBottom td {
+  vertical-align: bottom;
+}
+.x15Table th.verticalAlignTop, .x15Table td.verticalAlignTop {
+  vertical-align: top;
+}
+.x15Table th.verticalAlignMiddle, .x15Table td.verticalAlignMiddle {
+  vertical-align: middle;
+}
+.x15Table th.verticalAlignBottom, .x15Table td.verticalAlignBottom {
+  vertical-align: bottom;
+}
+.x15Table thead th {
+  background: #e5ebef;
+}
+.x15Table thead th:first-of-type {
+  border-top-left-radius: 3px;
+}
+.x15Table thead th:last-of-type {
+  border-top-right-radius: 3px;
+}
+.x15Table tbody tr:last-of-type th:first-of-type {
+  border-bottom-left-radius: 3px;
+}
+.x15Table tbody tr:last-of-type td:last-of-type {
+  border-bottom-right-radius: 3px;
+}
+
+form.columnLayout {
+  display: flex;
+  flex-direction: row;
+  column-gap: 20px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+form.columnLayout .formField {
+  flex: 1;
+}
+form.rowLayout {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+form.rowLayout .formField {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+form .formField.stacked label {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+  align-items: flex-start;
+  justify-content: flex-start;
+  position: relative;
+}
+form .formField.stacked label .labelText,
+form .formField.stacked label .inputContainer,
+form .formField.stacked label .validation {
+  width: 100%;
+  flex: 1;
+}
+form .formField.stacked label .validation {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 25px;
+  position: absolute;
+  bottom: 0;
+}
+form .formField {
+  /* Leave space for validators */
+}
+form .formField.withValidation label {
+  padding-bottom: 30px;
+}
+form .formField.withValidation label.withSpinner .spinner {
+  bottom: calc(50% - 8px);
+}
+form .formField.insetLabel .inputContainer {
+  position: relative;
+}
+form .formField.insetLabel .inputContainer .labelText {
+  position: absolute;
+  margin-left: 5px;
+  font-size: 13px;
+  line-height: 16px;
+  transition: all 1s ease;
+  z-index: 1;
+  top: 0;
+  left: 10px;
+}
+form .formField.insetLabel .inputContainer select,
+form .formField.insetLabel .inputContainer input,
+form .formField.insetLabel .inputContainer textarea {
+  padding-top: 10px;
+}
+form .formField.insetLabel .inputContainer select:placeholder-shown,
+form .formField.insetLabel .inputContainer input:placeholder-shown,
+form .formField.insetLabel .inputContainer textarea:placeholder-shown {
+  padding-top: 0;
+}
+form .formField.insetLabel .inputContainer select:placeholder-shown + .labelText,
+form .formField.insetLabel .inputContainer select:placeholder-shown ~ .labelText,
+form .formField.insetLabel .inputContainer input:placeholder-shown + .labelText,
+form .formField.insetLabel .inputContainer input:placeholder-shown ~ .labelText,
+form .formField.insetLabel .inputContainer textarea:placeholder-shown + .labelText,
+form .formField.insetLabel .inputContainer textarea:placeholder-shown ~ .labelText {
+  opacity: 0.01;
+}
+form .formField.insetLabel .inputContainer select:placeholder-shown:focus + .labelText,
+form .formField.insetLabel .inputContainer select:placeholder-shown:focus ~ .labelText,
+form .formField.insetLabel .inputContainer input:placeholder-shown:focus + .labelText,
+form .formField.insetLabel .inputContainer input:placeholder-shown:focus ~ .labelText,
+form .formField.insetLabel .inputContainer textarea:placeholder-shown:focus + .labelText,
+form .formField.insetLabel .inputContainer textarea:placeholder-shown:focus ~ .labelText {
+  opacity: 0.01;
+}
+form .formField.horizontal {
+  margin-bottom: 20px;
+}
+form .formField.horizontal label {
+  display: flex;
+  flex-direction: row;
+  column-gap: 20px;
+  align-items: center;
+  justify-content: flex-start;
+}
+form .formField.horizontal label .labelText,
+form .formField.horizontal label .inputContainer,
+form .formField.horizontal label .validation {
+  box-sizing: border-box;
+}
+form .formField.horizontal label .labelText,
+form .formField.horizontal label .validation {
+  width: 20%;
+}
+form .formField.horizontal label .inputContainer {
+  width: 50%;
+}
+form .formField.number_Field .inputContainer {
+  flex-wrap: wrap;
+}
+form .inputContainer {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+}
+form .inputContainer .postField {
+  flex: none;
+}
+form .inputContainer .postField.postField_dateInput {
+  flex: auto;
+}
+form label {
+  color: var(--inputLabelColor);
+}
+form label .labelText {
+  display: inline-block;
+  margin: 5px 0;
+  font-size: var(--inputLabelFontSize);
+  font-weight: var(--inputLabelFontWeight);
+  line-height: var(--inputLabelLineHeight);
+}
+form label .labelText .preLabel {
+  margin-right: 5px;
+}
+form label .labelText .postLabel {
+  margin-left: 5px;
+}
+form label.withSpinner {
+  position: relative;
+}
+form label.withSpinner .spinner,
+form label.withSpinner .spinner svg,
+form label.withSpinner svg {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+form label.withSpinner .spinner {
+  top: auto;
+  left: auto;
+  right: 10px;
+  bottom: calc(50% - 22px);
+}
+form input,
+form textarea,
+form select {
+  font-size: 16px;
+  height: var(--inputHeight);
+  line-height: var(--inputHeight);
+  color: var(--inputValueColor);
+  background: var(--inputBgColor);
+  border: var(--inputBorder);
+  border-radius: var(--inputBorderRadius);
+  padding: var(--inputPadding);
+  width: 100%;
+  box-sizing: border-box;
+  transition: var(--inputTransition);
+}
+form input[disabled],
+form textarea[disabled],
+form select[disabled] {
+  cursor: not-allowed;
+}
+form input:focus, form input:focus-visible,
+form textarea:focus,
+form textarea:focus-visible,
+form select:focus,
+form select:focus-visible {
+  border: var(--inputFocusBorder);
+  color: var(--inputFocusColor);
+  outline: var(--inputFocusOutline, 1px solid #000);
+  background: var(--inputFocusBgColor);
+}
+form input:hover,
+form textarea:hover,
+form select:hover {
+  outline: var(--inputHoverOutline);
+}
+form input.error, form input.invalidField:not([disabled]), .touched form input:invalid,
+form textarea.error,
+form textarea.invalidField:not([disabled]),
+.touched form textarea:invalid,
+form select.error,
+form select.invalidField:not([disabled]),
+.touched form select:invalid {
+  border: var(--inputErrorBorder);
+  color: var(--inputErrorColor);
+  background: var(--inputErrorBgColor);
+}
+form input[readonly], form input[readonly]:focus,
+form textarea[readonly],
+form textarea[readonly]:focus,
+form select[readonly],
+form select[readonly]:focus {
+  border: var(--inputReadonlyBorder);
+  outline: none;
+  color: var(--inputReadonlyColor);
+  background: var(--inputReadonlyBgColor);
+}
+form input::-webkit-input-placeholder,
+form textarea::-webkit-input-placeholder,
+form select::-webkit-input-placeholder {
+  color: var(--inputPlaceholderColor);
+  font-weight: 200;
+  font-family: var(--bodyFont);
+}
+form input:-moz-placeholder,
+form textarea:-moz-placeholder,
+form select:-moz-placeholder {
+  color: var(--inputPlaceholderColor);
+  font-weight: 200;
+  font-family: var(--bodyFont);
+}
+form input::-moz-placeholder,
+form textarea::-moz-placeholder,
+form select::-moz-placeholder {
+  color: var(--inputPlaceholderColor);
+  font-weight: 200;
+  font-family: var(--bodyFont);
+}
+form input:-ms-input-placeholder,
+form textarea:-ms-input-placeholder,
+form select:-ms-input-placeholder {
+  color: var(--inputPlaceholderColor);
+  font-weight: 200;
+  font-family: var(--bodyFont);
+}
+form input::placeholder,
+form textarea::placeholder,
+form select::placeholder {
+  color: var(--inputPlaceholderColor);
+  font-weight: 200;
+  font-family: var(--bodyFont);
+}
+form input:placeholder-shown,
+form textarea:placeholder-shown,
+form select:placeholder-shown {
+  color: var(--inputPlaceholderColor);
+  font-weight: 200;
+  font-family: var(--bodyFont);
+}
+form input[type=number] {
+  padding-right: 0;
+}
+form input[type=date] {
+  padding-right: 5px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+form input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+form .nativeDateInput label {
+  position: relative;
+}
+form .nativeDateInput button.inputDateCalendarButton {
+  position: absolute;
+  right: 5px;
+  margin-top: -50px;
+}
+@supports (-moz-appearance: none) {
+  form .nativeDateInput button.inputDateCalendarButton {
+    display: none;
+  }
+}
+form textarea {
+  height: calc(var(--inputHeight) * 2);
+  line-height: 20px;
+  padding: 10px;
+}
+form select option {
+  -webkit-appearance: none;
+}
+form .statusMessage.success, form .statusMessage.error {
+  padding: 10px;
+}
+form .statusMessage.error {
+  background: var(--errorBg);
+  color: var(--errorFgColor);
+}
+form .statusMessage.success {
+  background: var(--successBg);
+  color: var(--successFgColor);
+}
+form fieldset {
+  display: flex;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+form .validation > .message {
+  display: block;
+  font-size: 13px;
+  line-height: 15px;
+  color: var(--errorFgColor);
+}
+
+label.keyValuePair {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: normal;
+  flex-wrap: wrap;
+}
+label.keyValuePair .labelText {
+  text-transform: capitalize;
+}
+label.keyValuePair .labelText,
+label.keyValuePair .value {
+  display: block;
+}
+
+.labelValuePair {
+  display: flex;
+  flex-direction: row;
+  column-gap: 5px;
+  align-items: center;
+  justify-content: flex-start;
+}
+.labelValuePair .labelText {
+  display: flex;
+  flex-direction: row;
+  column-gap: 5px;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+}
+.labelValuePair .valueText {
+  display: flex;
+  flex-direction: row;
+  column-gap: 5px;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+}
+
+.mandatory {
+  text-decoration: var(--mandatorySymbolDecoration);
+  text-underline-offset: var(--mandatorySymbolUnderlineOffset);
+}
+.mandatory:before {
+  content: var(--mandatorySymbolContent);
+  color: var(--mandatorySymbolColor);
+}
+
+/* Disabled groups of fields */
+fieldset[disabled] input, fieldset[disabled] textarea, fieldset[disabled] select, fieldset[disabled] button, fieldset[disabled] .radioLabel {
+  cursor: not-allowed;
+  opacity: 0.75;
+}