@x15ventures/x15-ui-library 3.11.4

package/dist/cjs/styles/index.css

@@ -0,0 +1,4742 @@
+:root {
+  --bodyBg: #fff;
+  --bodyFgColor: #24282b;
+  --bodyFont: sans-serif;
+  --headingFont: serif;
+  --scrollBarFgColor: #7e97a7;
+  --scrollBarBgColor: #f6f8fa;
+  --pageContainerMaxWidth: 1100px;
+  --mainContentPadding: 20px 30px;
+  --mainContentBg: none;
+  --mainContentFgColor: #24282b;
+  --defaultSpacing: 20px;
+  --compactSpacing: 10px;
+  --wideSpacing: 40px;
+  --mainHeaderHeight: 60px;
+  --mainHeaderBg: #f6f8fa;
+  --mainHeaderFgColor: #24282b;
+  --mainHeaderPadding: 0 20px;
+  --mainHeaderBorder: none;
+  --mainHeaderBorderBottom: 1px solid #e5ebef;
+  --mainHeaderBoxShadow: 0 3px 5px 0 #f6f8fa;
+  --sidePanelBg: #fff;
+  --sidePanelFg: #24282b;
+  --sidePanelBorder: 1px solid #eef2f4;
+  --sidePanelPadding: 20px;
+  --sidePanelShadow: none;
+  --sidePanelCloseButtonBg: #fff;
+  --sidePanelCloseButtonFg: #24282b;
+  --sidePanelCloseButtonBorder: 1px solid #eef2f4;
+  --sidePanelCloseButtonShadow: 0 0 5px 0 #eef2f4;
+  --sidePanelCloseIconColor: #24282b;
+  --sidePanelSizeSmall: 44px;
+  --sidePanelSizeMedium: 300px;
+  --sidePanelSizeLarge: 420px;
+  --globalDashboardLeftPanelBg: #f6f8fa;
+  --globalDashboardLeftDivider: 1px solid #d3dee4;
+}
+
+:root {
+  --accordionWidth: 100%;
+  --accordionMargin: 0 0 20px;
+  --accordionShadow: 0 0 5px 0 #d3dee4;
+  --accordionPaddingCompact: 10px 10px;
+  --accordionPaddingRegular: 20px 20px;
+  --accordionPaddingSpacious: 30px 30px;
+  --accordionHeaderHeight: none;
+  --accordionHeaderFont: serif;
+  --accordionHeaderFontSize: 21px;
+  --accordionHeaderFontWeight: bold;
+  --accordionHeaderBg: #fff;
+  --accordionHeaderFg: #222;
+  --accordionHeaderBorder: 1px solid #e5ebef;
+  --accordionHeaderBorderRadius: 3px 3px 0 0;
+  --accordionHeaderBoxShadow: none;
+  --accordionHeaderIconColor: #222;
+  --accordionBg: transparent;
+  --accordionBorder: 1px solid #e5ebef;
+  --accordionBorderRadius: 5px;
+  --accordionFixedBorder: none;
+  --accordionFixedBorderRadius: 0;
+  --accordionFixedHeaderWidth: auto;
+  --accordionFixedHeaderHeight: auto;
+  --accordionFixedHeaderBg: none;
+  --accordionFixedHeaderFgColor: #222;
+  --accordionFixedHeaderBorder: none;
+  --accordionCustomHeaderPadding: 0 0 10px;
+  --accordionFooterMarginCompact: 0 -10px -10px;
+  --accordionFooterMarginRegular: 0 -20px -20px;
+  --accordionFooterMarginSpacious: 0 -30px -30px;
+  --accordionClosedContentPaddingCompact: 0 10px;
+  --accordionClosedContentPaddingRegular: 0 20px;
+  --accordionClosedContentPaddingSpacious: 0 30px;
+  --cardMinWidth: 450px;
+  --cardMaxWidth: 450px;
+  --cardMinWidthXSmall: 150px;
+  --cardMaxWidthXSmall: 150px;
+  --cardMinWidthSmall: 300px;
+  --cardMaxWidthSmall: 300px;
+  --cardMinWidthMedium: 450px;
+  --cardMaxWidthMedium: 450px;
+  --cardMinWidthLarge: 600px;
+  --cardMaxWidthLarge: 600px;
+  --cardMinWidthXLarge: 750px;
+  --cardMaxWidthXLarge: 750px;
+  --cardMinWidthAuto: auto;
+  --cardMaxWidthAuto: auto;
+  --cardBg: transparent;
+  --cardBorder: 1px solid #eef2f4;
+  --cardBorderRadius: 3px;
+  --cardBoxShadow: 0 0 5px 0 #eef2f4;
+  --cardMargin: 0 0 20px;
+  --cardContentPadding: 20px;
+  --cardHeaderPadding: 10px 20px;
+  --cardFooterPadding: 10px 20px;
+  --cardHeaderHeight: 60px;
+  --cardHeaderFont: serif;
+  --cardHeaderFontSize: 21px;
+  --cardHeaderFontWeight: bold;
+  --cardHeaderBg: #fff;
+  --cardHeaderFg: #222;
+  --cardHeaderBorder: 1px solid #d3dee4;
+  --cardHeaderBorderRadius: 3px 3px 0 0;
+  --cardHeaderBoxShadow: 0 1px 3px 0 #eef2f4;
+  --cardHeaderIconColor: #222;
+  --cardContentBg: #fff;
+  --cardContentFg: #222;
+  --cardFooterBg: #fff;
+  --cardFooterFg: #222;
+  --cardFooterBorder: 1px solid #d3dee4;
+  --cardFooterBorderRadius: 0 0 3px 3px;
+  --cardFooterBoxShadow: 0 -1px 5px 0 #eef2f4;
+  --chipFontAdjust: 1em;
+  --chipYellow: #fc0;
+  --chipOrange: #ff7300;
+  --chipRed: #e00;
+  --chipPurple: #b3d;
+  --chipBlue: #69f;
+  --chipGreen: #3a6;
+  --chipBlack: #222;
+  --chipWhite: #fff;
+  --chipDarkgrey: #555;
+  --chipLightgrey: #ccc;
+  --chipBorder: 2px solid;
+  --chipSquareBorderRadius: 5px;
+  --chipYellowSoftTxt: #92400E;
+  --chipYellowSoftBorder: #92400E;
+  --chipYellowSoftBg: #FEF9C3;
+  --chipOrangeSoftTxt: #C2410C;
+  --chipOrangeSoftBorder: #C2410C;
+  --chipOrangeSoftBg: #FFEDD5;
+  --chipRedSoftTxt: #B91C1C;
+  --chipRedSoftBorder: #B91C1C;
+  --chipRedSoftBg: #FEE2E2;
+  --chipPurpleSoftTxt: #6B21A8;
+  --chipPurpleSoftBorder: #6B21A8;
+  --chipPurpleSoftBg: #F3E8FF;
+  --chipBlueSoftTxt: #1E40AF;
+  --chipBlueSoftBorder: #1E40AF;
+  --chipBlueSoftBg: #DBEAFE;
+  --chipGreenSoftTxt: #166534;
+  --chipGreenSoftBorder: #166534;
+  --chipGreenSoftBg: #D1FAE5;
+  --chipDarkgreySoftTxt: #374151;
+  --chipDarkgreySoftBorder: #374151;
+  --chipDarkgreySoftBg: #F3F4F6;
+  --chipLightgreySoftTxt: #6B7280;
+  --chipLightgreySoftBorder: #6B7280;
+  --chipLightgreySoftBg: #F9FAFB;
+  --bannerErrorBg: #BB0000;
+  --bannerErrorFgColor: #fff;
+  --bannerSuccessBg: #008243;
+  --bannerSuccessFgColor: #fff;
+  --bannerAlertBg: #FFDE03;
+  --bannerAlertFgColor: #000;
+  --bannerInfoBg: #094DB3;
+  --bannerInfoFgColor: #fff;
+  --bannerWarnBg: #F5A623;
+  --bannerWarnFgColor: #000;
+  --bannerErrorBgSecondary: #ff5555;
+  --bannerErrorSecondaryBorder: #BB0000;
+  --bannerErrorFgSecondaryColor: #000;
+  --bannerSuccessBgSecondary: rgb(0, 232, 119.5692307692);
+  --bannerSuccessSecondaryBorder: #008243;
+  --bannerSuccessFgSecondaryColor: #000;
+  --bannerAlertBgSecondary: rgb(255, 235.3571428571, 105);
+  --bannerAlertSecondaryBorder: #FFDE03;
+  --bannerInfoBgSecondary: rgb(94.0904255319, 155.2180851064, 246.9095744681);
+  --bannerInfoSecondaryBorder: #094DB3;
+  --bannerInfoFgSecondaryColor: #000;
+  --bannerWarnBgSecondary: rgb(248.3260869565, 195.602173913, 108.1739130435);
+  --bannerWarnSecondaryBorder: #F5A623;
+  --bannerHeaderFooterBorderColor: rgba(255, 255, 255, 0.5);
+  --bannerStandardOffset: 20px;
+  --bannerIconSize: 24px;
+  --bannerPadding: 20px 40px 20px 80px;
+  --bannerBorderColor: transparent;
+  --bannerBorderRadius: 5px;
+  --bannerSectionDivider: 1px solid rgba(255, 255, 255, 0.5);
+  --bannerGrowOnHoverScale: 1.005;
+  --bannerWidthSm: 35vw;
+  --bannerWidthMd: 50vw;
+  --bannerWidthLg: 85vw;
+  --tooltipIconSize: 22px;
+  --tooltipSvgIconSize: 22px;
+  --tooltipWidth: 200px;
+  --tooltipWidthLarge: 320px;
+  --tooltipMargin: 0 5px;
+  --tooltipIconBg: #c2d0d9;
+  --tooltipIconBorder: none;
+  --tooltipIconFgColor: #222;
+  --tooltipContentBg: #e6e6e6;
+  --tooltipContentFgColor: #222;
+  --dialogOverlayColor: rgba(0, 0, 0, 0.5);
+  --dialogBg: #fff;
+  --dialogFg: #222;
+  --dialogBorder: 1px solid #fff;
+  --dialogBorderRadius: 3px;
+  --dialogShadow: 0 0 10px 0 #384147;
+  --dialogFocusOutline: 1px dotted #384147;
+  --dialogHeaderPadding: 20px 20px;
+  --dialogHeaderHeight: 50px;
+  --dialogHeaderBottomBorder: 1px solid #e5ebef;
+  --dialogHeaderShadow: none;
+  --dialogHeaderFont: serif;
+  --dialogHeaderFontSize: clamp(17px, 1vw + 0.5rem, 35px);
+  --dialogHeaderFontWeight: bold;
+  --dialogContentPadding: 20px;
+  --dialogContentFontSize: clamp(16px, 0.7vw + 0.5rem, 30px);
+  --dialogFooterPadding: 10px 20px;
+  --dialogFooterHeight: 50px;
+  --dialogFooterTopBorder: 1px solid #e5ebef;
+  --dialogFooterFontSize: clamp(16px, 0.7vw + 0.5rem, 30px);
+  --dialogFooterShadow: none;
+  --dialogCloseButtonBorder: none;
+  --dialogCloseButtonBg: #fff;
+  --dialogCloseButtonBg: #fff;
+  --dialogCloseButtonFg: none;
+  --dialogCloseButtonShadow: none;
+  --tabControlPadding: 20px;
+  --tabControlHeight: 50px;
+  --tabControlBorder: 1px solid #e5ebef;
+  --tabControlBottomBorder: 3px solid #516472;
+  --tabControlBorderRadius: 3px 3px 0 0;
+  --tabControlShadow: none;
+  --tabControlBg: #f6f8fa;
+  --tabControlFgColor: #24282b;
+  --tabControlActivePadding: 20px;
+  --tabControlActiveHeight: 50px;
+  --tabControlActiveBorder: 1px solid #e5ebef;
+  --tabControlActiveBottomBorder: 3px solid #fff;
+  --tabControlActiveBorderRadius: 3px 3px 0 0;
+  --tabControlActiveShadow: none;
+  --tabControlActiveBg: #fff;
+  --tabControlActiveFgColor: #24282b;
+  --tabContentPadding: 20px;
+  --tabContentBg: #fff;
+  --tabContentFgColor: #24282b;
+  --tabContentShadow: none;
+  --tabContentBorder: 1px solid #e5ebef;
+  --tabContentBorderRadius: 0 3px 3px 3px;
+  --statusDefCon3Color: #fc0;
+  --statusDefCon3Bg: radial-gradient(circle at 60% 40%, #fc0 0, #f00 30%, #c00);
+  --statusAlertColor: #f00;
+  --statusWarnColor: #fc0;
+  --statusInfoColor: #999;
+  --statusSuccessColor: #063;
+  --statusDefCon3LightBg: #fc0 radial-gradient(circle at 60% 40%, #fc0 0, #f00 30%, #c00);
+  --statusAlertLightBg: #c00 radial-gradient(circle at 60% 40%, #fff 0, #f00 30%, #c00);
+  --statusWarnLightBg: #fc0 radial-gradient(circle at 60% 40%, #fff 0, #fc0 30%, #fc0);
+  --statusInfoLightBg: #ccc radial-gradient(circle at 60% 40%, #fff 0, #e5ebef 30%, #ccc);
+  --statusSuccessLightBg: #063 radial-gradient(circle at 60% 40%, #fff 0, #096 30%, #063);
+  --statusDefCon3ShadowColor: #c00;
+  --notificationIconBg: #c00;
+  --notificationIconFg: #fff;
+  --notificationIconBorder: 4px solid #c00;
+  --notificationIconBoxShadow: none;
+}
+
+:root {
+  --autocompleteBorderRadius: 5px;
+  --autocompleteOptionsHolderBg: #f6f8fa;
+  --autocompleteOptionsHolderBorder: 1px solid #e5ebef;
+  --autocompleteOptionsHolderBorderRadius: 3px;
+  --autocompleteOptionsHolderShadow: none;
+  --autocompleteOptionFg: #24282b;
+  --autocompleteOptionBg: none;
+  --autocompleteOptionBorder: none;
+  --autocompleteOptionBorderRadius: 3px;
+  --autocompleteOptionSpacing: 5px;
+  --autocompleteOptionHoverBg: #eef2f4;
+  --autocompleteOptionHoverFg: #181a1b;
+  --autocompleteOptionSelectedBg: #e5ebef;
+  --autocompleteOptionSelectedFg: #181a1b;
+  --inputTransition: none;
+  --inputHeight: 44px;
+  --inputPadding: 0 14px;
+  --inputBgColor: #fff;
+  --inputErrorBgColor: transparent;
+  --inputErrorColor: #c00;
+  --inputFocusBgColor: transparent;
+  --inputReadonlyBgColor: #f2f2f2;
+  --inputBorderThickness: 1px;
+  --inputErrorBorderThickness: 1px;
+  --inputFocusBorderThickness: 1px;
+  --inputReadonlyBorderThickness: 1px;
+  --inputReadonlyBorderColor: #f2f2f2;
+  --inputBorderRadius: 4px;
+  --inputBorderColor: #737373;
+  --inputErrorBorderColor: #c00;
+  --inputFocusBorderColor: #404040;
+  --inputPlaceholderColor: #737373;
+  --inputLabelColor: #262626;
+  --inputLabelFontSize: inherit;
+  --inputLabelFontWeight: inherit;
+  --inputLabelLineHeight: inherit;
+  --inputValueColor: #262626;
+  --inputReadonlyColor: #404040;
+  --inputFocusColor: #0d0d0d;
+  --inputFocusOutlineColor: #0d0d0d;
+  --inputFocusOutline: 1px dotted #0d0d0d;
+  --inputHoverOutline: 1px dotted;
+  --inputBorder: 1px solid #737373;
+  --inputErrorBorder: 1px solid #c00;
+  --inputReadonlyBorder: 1px solid #f2f2f2;
+  --inputFocusBorder: 1px solid #404040;
+  --mandatorySymbolColor: #c00;
+  --mandatorySymbolContent: '*';
+  --mandatorySymbolDecoration: none;
+  --mandatorySymbolUnderlineOffset: 0;
+  --checkboxBorderColor: ECF0F3;
+  --checkboxBg: #fff;
+  --checkboxFgColor: ECF0F3;
+  --checkboxIconSize: 20px;
+  --successBg: #00A171;
+  --successFgColor: #fff;
+  --errorFgColor: #c00;
+  --errorBg: #fff;
+}
+
+:root {
+  --searchPanelMenuBg: #eef2f4;
+  --searchPanelMenuBorder: 1px solid #d3dee4;
+  --searchPanelMenuBorderRadius: 3px;
+  --searchPanelMenuBoxShadow: 0 0 5px 0 #c2d0d9;
+  --searchPanelDivider: 1px solid #d3dee4;
+  --searchPanelMenuContentWidth: 280px;
+  --searchPanelMenuContentHeight: 350px;
+  --searchPanelMenuTriggerButtonBg: #e5ebef;
+  --searchPanelMenuTriggerButtonBorder: 1px solid #e5ebef;
+  --searchPanelMenuTriggerButtonFgColor: #24282b;
+  --searchPanelMenuTriggerButtonBgHover: #d3dee4;
+  --searchPanelMenuTriggerButtonFgColorHover: #181a1b;
+  --searchPanelMenuTriggerButtonBorderHover: 1px solid #d3dee4;
+  --searchPanelMenuContentButtonBg: #eef2f4;
+  --searchPanelMenuContentButtonBorder: 1px solid #eef2f4;
+  --searchPanelMenuContentButtonFgColor: #24282b;
+  --searchPanelMenuContentButtonBgHover: #d3dee4;
+  --searchPanelMenuContentButtonFgColorHover: #181a1b;
+  --searchPanelMenuContentButtonBorderHover: 1px solid #d3dee4;
+  --popupMenuBg: #eef2f4;
+  --popupMenuBorder: 1px solid #d3dee4;
+  --popupMenuBorderRadius: 3px;
+  --popupMenuBoxShadow: 0 0 5px 0 #c2d0d9;
+  --popupMenuWidth: 280px;
+  --popupMenuMaxHeight: 350px;
+  --popupMenuButtonBg: #eef2f4;
+  --popupMenuButtonBorder: 1px solid #eef2f4;
+  --popupMenuButtonFgColor: #24282b;
+  --popupMenuButtonBgHover: #d3dee4;
+  --popupMenuButtonFgColorHover: #181a1b;
+  --popupMenuButtonBorderHover: 1px solid #d3dee4;
+  --menuWidth: 100%;
+  --menuPopSubmenusWidth: 280px;
+  --menuPopSubmenusGap: 20px;
+  --menuLeftPaddingLvl2: 20px;
+  --menuLeftPaddingLvl3: 40px;
+  --menuButtonPadding: 0 10px;
+  --menuButtonBorderRadius: 0px;
+  --menuButtonBg: transparent;
+  --menuButtonBorder: none;
+  --menuActiveItemBg: #d3dee4;
+  --menuActiveItemBorderRadius: 3px;
+}
+
+/*
+  Dark theme providing all CSS custom properties and related styles for the x15Core dark theme. This replaces the previous :root-based approach to theming by allowing the variables to be scoped to a specific selector (for example, body.dark-theme, a theme wrapper, or the app root) instead of being applied globally. Include this mixin inside the selector that should receive the dark theme so that all dark-mode variables and styles remain encapsulated and easy to maintain. This is currently at proof of concept stage and will be subject to change.
+*/
+.dark {
+  --accordionBg: transparent;
+  --accordionBorder: 1px solid #1a1410;
+  --accordionFixedHeaderFgColor: #dddddd;
+  --accordionHeaderBg: #000000;
+  --accordionHeaderBorder: 1px solid #1a1410;
+  --accordionHeaderFg: #dddddd;
+  --accordionHeaderIconColor: #dddddd;
+  --accordionShadow: 0 0 5px 0 #2c211b;
+  --autocompleteOptionFg: #dbd7d5;
+  --autocompleteOptionHoverBg: #110d0b;
+  --autocompleteOptionHoverFg: #e7e5e4;
+  --autocompleteOptionSelectedBg: #1a1410;
+  --autocompleteOptionSelectedFg: #e7e5e4;
+  --autocompleteOptionsHolderBg: #090707;
+  --autocompleteOptionsHolderBorder: 1px solid #1a1410;
+  --bannerAlertBg: #0021fc;
+  --bannerAlertBgSecondary: rgb(0,20.6428571429,150);
+  --bannerAlertFgColor: #ffffff;
+  --bannerAlertSecondaryBorder: #0021fc;
+  --bannerBorderColor: transparent;
+  --bannerErrorBg: #44ffff;
+  --bannerErrorBgSecondary: #00aaaa;
+  --bannerErrorFgColor: #000000;
+  --bannerErrorFgSecondaryColor: #ffffff;
+  --bannerErrorSecondaryBorder: #44ffff;
+  --bannerHeaderFooterBorderColor: rgba(0,0,0,0.5);
+  --bannerInfoBg: #f6b24c;
+  --bannerInfoBgSecondary: rgb(161.9095744681,99, 0);
+  --bannerInfoFgColor: #000000;
+  --bannerInfoFgSecondaryColor: #ffffff;
+  --bannerInfoSecondaryBorder: #f6b24c;
+  --bannerSuccessBg: #ff7dbc;
+  --bannerSuccessBgSecondary: rgb(255,23, 136);
+  --bannerSuccessFgColor: #000000;
+  --bannerSuccessFgSecondaryColor: #ffffff;
+  --bannerSuccessSecondaryBorder: #ff7dbc;
+  --bannerWarnBg: #0a59dc;
+  --bannerWarnBgSecondary: rgb(7.6739130435,59,147.8260869565);
+  --bannerWarnFgColor: #ffffff;
+  --bannerWarnSecondaryBorder: #0a59dc;
+  --baseTextColor: #dddddd;
+  --baseTint: #000000;
+  --black: #ffffff;
+  --black-10: #f2f2f2;
+  --black-20: #e5e5e5;
+  --black-30: #d9d9d9;
+  --black-40: #cccccc;
+  --black-50: #bfbfbf;
+  --black-60: #b2b2b2;
+  --black-70: #a6a6a6;
+  --black-80: #999999;
+  --black-90: #8c8c8c;
+  --bodyBg: #000000;
+  --bodyFgColor: #dbd7d5;
+  --cardBorder: 1px solid #110d0b;
+  --cardBoxShadow: 0 0 5px 0 #110d0b;
+  --cardContentBg: #000000;
+  --cardContentFg: #dddddd;
+  --cardFooterBg: #000000;
+  --cardFooterBorder: 1px solid #2c211b;
+  --cardFooterBoxShadow: 0 -1px 5px 0 #110d0b;
+  --cardFooterFg: #dddddd;
+  --cardHeaderBg: #000000;
+  --cardHeaderBorder: 1px solid #2c211b;
+  --cardHeaderBoxShadow: 0 1px 3px 0 #110d0b;
+  --cardHeaderFg: #dddddd;
+  --cardHeaderIconColor: #dddddd;
+  --checkboxBg: #000000;
+  --checkboxBorderColor: #000000;
+  --checkboxFgColor: #000000;
+  --chipBlack: #dddddd;
+  --chipBlue: #009b00;
+  --chipBlueSoftBg: #25401b;
+  --chipBlueSoftBorder: #e1bf50;
+  --chipBlueSoftTxt: #e1bf50;
+  --chipBorder: 2px solid;
+  --chipDarkgrey: #aaaaaa;
+  --chipDarkgreySoftBg: #0c0b09;
+  --chipDarkgreySoftBorder: #c8b;
+  --chipDarkgreySoftTxt: #c8b;
+  --chipFontAdjust: 1em;
+  --chipGreen: #c59;
+  --chipGreenSoftBg: #2e05;
+  --chipGreenSoftBorder: #e9;
+  --chipGreenSoftTxt: #e9;
+  --chipLightgrey: #333333;
+  --chipLightgreySoftBg: #060505;
+  --chipLightgreySoftBorder: #94987f;
+  --chipLightgreySoftTxt: #94987f;
+  --chipOrange: #008cff;
+  --chipOrangeSoftBg: #00112a;
+  --chipOrangeSoftBorder: #3beff3;
+  --chipOrangeSoftTxt: #3beff3;
+  --chipPurple: #4ccb;
+  --chipPurpleSoftBg: #0c1710;
+  --chipPurpleSoftBorder: #94;
+  --chipPurpleSoftTxt: #94;
+  --chipRed: #11ffff;
+  --chipRedSoftBg: #011d1d;
+  --chipRedSoftBorder: #44e3e3;
+  --chipRedSoftTxt: #44e3e3;
+  --chipSquareBorderRadius: 5px;
+  --chipWhite: #000000;
+  --chipYellow: #003cff;
+  --chipYellowSoftBg: #01063c;
+  --chipYellowSoftBorder: #6db;
+  --chipYellowSoftTxt: #6db;
+  --dialogBg: #000000;
+  --dialogBorder: 1px solid #000000;
+  --dialogCloseButtonBg: #000000;
+  --dialogFooterShadow: none;
+  --dialogFg: #dddddd;
+  --dialogFocusOutline: 1px dotted #c7beb8;
+  --dialogHeaderBottomBorder: 1px solid #1a1410;
+  --dialogHeaderShadow: none;
+  --dialogOverlayColor: rgba(255,255,255,0.5);
+  --dialogShadow: 0 0 10px 0 #c7b;
+  --errorBg: #000000;
+  --errorFgColor: #33ff;
+  --globalDashboardLeftDivider: 1px solid #2c211b;
+  --globalDashboardLeftPanelBg: #090707;
+  --inputBgColor: #000000;
+  --inputLabelColor: #ffffff;
+  --inputBorder: 1px solid #8c8c8c;
+  --inputBorderColor: #8c8c8c;
+  --inputErrorBorder: 1px solid #33ffff;
+  --inputErrorBorderColor: #33ffff;
+  --inputErrorColor: #33ffff;
+  --inputFocusBorder: 1px solid #bfbfbf;
+  --inputFocusBorderColor: #bfbfbf;
+  --inputFocusColor: #f2f2f2;
+  --inputFocusOutline: 1px dotted #f2f2f2;
+  --inputReadonlyBgColor: #0d0d0d;
+  --inputReadonlyBorder: 1px solid #0d0d0d;
+  --inputReadonlyBorderColor: #0d0d0d;
+  --inputReadonlyColor: #bfbfbf;
+  --inputPlaceholderColor: #8c8c8c;
+  --inputValueColor: #d9d9d9;
+  --inverseTextColor: #000000;
+  --inverseTint: #ffffff;
+  --mainHeaderBg: #090707;
+  --mainHeaderBorderBottom: 1px solid #1a1410;
+  --mainHeaderBoxShadow: 0 3px 5px 0 #090707;
+  --mainHeaderFgColor: #dbd7d5;
+  --mandatorySymbolColor: #33ffff;
+  --menuActiveItemBg: #2c211b;
+  --neutral: #574436;
+  --neutral-10: #e7e5e4;
+  --neutral-20: #dbd7d5;
+  --neutral-30: #c7b;
+  --neutral-40: #aecb8d;
+  --neutral-50: #816858;
+  --neutral-60: #3d2f26;
+  --neutral-70: #2c211b;
+  --neutral-80: #1a1410;
+  --neutral-90: #110d0b;
+  --neutral-95: #090707;
+  --notificationIconBg: #33ffff;
+  --notificationIconBorder: 4px solid #33ffff;
+  --notificationIconFg: #000000;
+  --palette1: #1a1410;
+  --palette2: #3d2f26;
+  --popupMenuBg: #110d0b;
+  --popupMenuBorder: 1px solid #2c211b;
+  --popupMenuBoxShadow: 0 0 5px 0 #3d2f26;
+  --popupMenuButtonBg: #110d0b;
+  --popupMenuButtonBgHover: #2c211b;
+  --popupMenuButtonBorder: 1px solid #110d0b;
+  --popupMenuButtonBorderHover: 1px solid #2c211b;
+  --popupMenuButtonFgColor: #dbd7d5;
+  --popupMenuButtonFgColorHover: #e7e5e4;
+  --primaryButtonBg: #1a1410;
+  --primaryButtonBgHover: rgb(11,10,7);
+  --primaryButtonBorder: 1px solid #1a1410;
+  --primaryButtonDisabledBg: rgba(26,20,16,0.5);
+  --primaryButtonDisabledFgColor: rgba(221,221,221,0.5);
+  --primaryButtonFgColor: #dddddd;
+  --primaryButtonFgColorHover: #ffffff;
+  --primaryButtonFocusOutline: 1px solid #1a1410;
+  --primaryButtonInverseBg: #ffffff;
+  --primaryButtonInverseBgHover: #dddddd;
+  --primaryButtonInverseBorder: 1px solid #ffffff;
+  --primaryButtonInverseFgColor: #1a1410;
+  --primaryButtonInverseFgColorHover: #000000;
+  --primaryButtonInverseFocusOutline: 1px solid #5a;
+  --primaryButtonOutlineInvertStyleBorder: 1px solid #1a1410;
+  --primaryButtonOutlineInvertStyleFgColor: #1a1410;
+  --primaryButtonOutlineStyleBorder: 1px solid #1a1410;
+  --primaryButtonOutlineStyleFgColor: #fff;
+  --primaryTextOnlyColor: #ffffff;
+  --scrollBarBgColor: #090707;
+  --scrollBarFgColor: #816858;
+  --searchPanelDivider: 1px solid #2c211b;
+  --searchPanelMenuBg: #110d0b;
+  --searchPanelMenuBorder: 1px solid #2c211b;
+  --searchPanelMenuBoxShadow: 0 0 5px 0 #3d2f26;
+  --searchPanelMenuContentButtonBg: #110d0b;
+  --searchPanelMenuContentButtonBgHover: #2c211b;
+  --searchPanelMenuContentButtonBorder: 1px solid #110d0b;
+  --searchPanelMenuContentButtonBorderHover: 1px solid #2c211b;
+  --searchPanelMenuContentButtonFgColor: #dbd7d5;
+  --searchPanelMenuContentButtonFgColorHover: #e7e5e4;
+  --searchPanelMenuTriggerButtonBg: #1a1410;
+  --searchPanelMenuTriggerButtonBgHover: #2c211b;
+  --searchPanelMenuTriggerButtonBorder: 1px solid #1a1410;
+  --searchPanelMenuTriggerButtonBorderHover: 1px solid #2c211b;
+  --searchPanelMenuTriggerButtonFgColor: #dbd7d5;
+  --searchPanelMenuTriggerButtonFgColorHover: #e7e5e4;
+  --secondaryButtonBg: #3d2f26;
+  --secondaryButtonBgHover: rgb(46,35,29);
+  --secondaryButtonBorder: 1px solid #3d2f26;
+  --secondaryButtonDisabledBg: rgba(61,47,38,0.5);
+  --secondaryButtonDisabledFgColor: rgba(221,221,221,0.5);
+  --secondaryButtonFgColor: #dddddd;
+  --secondaryButtonFgColorHover: #ffffff;
+  --secondaryButtonFocusOutline: 1px solid #3d2f26;
+  --secondaryButtonInverseBg: #ffffff;
+  --secondaryButtonInverseBgHover: #dddddd;
+  --secondaryButtonInverseBorder: 1px solid #ffffff;
+  --secondaryButtonInverseFgColor: #3d2f26;
+  --secondaryButtonInverseFgColorHover: #000000;
+  --secondaryButtonInverseFocusOutline: 1px solid #3d2f26;
+  --secondaryTextOnlyColor: #ffffff;
+  --sidePanelBg: #000000;
+  --sidePanelBorder: 1px solid #110d0b;
+  --sidePanelCloseButtonBg: #000000;
+  --sidePanelCloseButtonBorder: 1px solid #110d0b;
+  --sidePanelCloseButtonFg: #dbd7d5;
+  --sidePanelCloseButtonShadow: 0 0 5px 0 #110d0b;
+  --sidePanelCloseIconColor: #dbd7d5;
+  --sidePanelFg: #dbd7d5;
+  --statusAlertColor: #000;
+  --statusDefCon3Bg: radial-gradient(circle at 60% 40%, #003, #000, #333); /* gradient stops inverted */
+  --statusDefCon3Color: #003;
+  --statusDefCon3LightBg: #003 radial-gradient(circle at 60% 40%, #003 0, #000 30%, #333);
+  --statusDefCon3ShadowColor: #33ffff;
+  --statusInfoColor: #666666;
+  --statusInfoLightBg: #333 radial-gradient(circle at 60% 40%, #000 0, #1a1410 30%, #333);
+  --statusSuccessColor: #f9c;
+  --statusSuccessLightBg: #f9c radial-gradient(circle at 60% 40%, #000 0, #fff, #f9c);
+  --statusWarnColor: #003;
+  --statusWarnLightBg: #003 radial-gradient(circle at 60% 40%, #000 0, #fff, #003);
+  --successBg: #ff5e8e;
+  --successFgColor: #000000;
+  --tabContentBorder: 1px solid #1a1410;
+  --tabContentBg: #000000;
+  --tabContentFgColor: #dbd7d5;
+  --tabControlActiveBg: #000000;
+  --tabControlActiveBorder: 1px solid #1a1410;
+  --tabControlActiveBottomBorder: 3px solid #000000;
+  --tabControlActiveFgColor: #dbd7d5;
+  --tabControlBg: #090707;
+  --tertiaryButtonBg: #c7b;
+  --tertiaryButtonBgHover: rgb(188,177,170);
+  --tertiaryButtonBorder: 1px solid #c7b;
+  --tertiaryButtonDisabledBg: rgba(199,190,184,0.5);
+  --tertiaryButtonDisabledFgColor: rgba(0,0,0,0.5);
+  --tertiaryButtonFgColor: #000000;
+  --tertiaryButtonInverseBg: rgb(86,74,68);
+  --tertiaryButtonInverseFgColor: #dddddd;
+  --tertiaryButtonOutlineStyleFgColor: #c7b;
+  --tertiaryTextOnlyColor: #c7b;
+  --textOnlyActiveFgColor: #e7e5e4;
+  --textOnlyColor: rgb(165,131,108);
+  --textOnlyFocusOutline: #ccc;
+  --textOnlyInverseColor: #000000;
+  --tooltipContentBg: #191919;
+  --tooltipContentFgColor: #dddddd;
+  --tooltipIconBg: #3d2f26;
+  --tooltipIconBorder: none;
+  --tooltipIconFgColor: #dddddd;
+  --tooltipSvgIconSize: 22px;
+  --white: #000000;
+  --white-10: #0d0d0d;
+  --white-20: #191919;
+  --white-30: #262626;
+  --white-40: #333333;
+  --white-50: #404040;
+  --white-60: #4c4c4c;
+  --white-70: #595959;
+  --white-80: #666666;
+  --white-90: #737373;
+}
+
+/* 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;
+}
+
+@font-face {
+  font-family: "icomoon";
+  src: url("../icons/fonts/icomoon.ttf?wbxtd8") format("truetype"), url("../icons/fonts/icomoon.woff?wbxtd8") format("woff"), url("../icons/fonts/icomoon.svg?wbxtd8#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+.icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "icomoon" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-credit-savvy-logo .path1:before {
+  content: "\eb13";
+  color: rgb(70, 157, 160);
+}
+
+.icon-credit-savvy-logo .path2:before {
+  content: "\eb14";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path3:before {
+  content: "\eb15";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path4:before {
+  content: "\eb16";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path5:before {
+  content: "\eb17";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path6:before {
+  content: "\eb18";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path7:before {
+  content: "\eb19";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path8:before {
+  content: "\eb1a";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path9:before {
+  content: "\eb1b";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path10:before {
+  content: "\eb1c";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path11:before {
+  content: "\eb1d";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-credit-savvy-logo .path12:before {
+  content: "\eb1e";
+  margin-left: -6.7578125em;
+  color: rgb(25, 33, 36);
+}
+
+.icon-cloud-costs:before {
+  content: "\eb0e";
+}
+
+.icon-cloud:before {
+  content: "\eb0f";
+}
+
+.icon-scale:before {
+  content: "\eb10";
+}
+
+.icon-window:before {
+  content: "\eb11";
+}
+
+.icon-close:before {
+  content: "\eaf4";
+}
+
+.icon-downloadDark:before {
+  content: "\eaf5";
+}
+
+.icon-externalLink:before {
+  content: "\eaf6";
+}
+
+.icon-filterDark:before {
+  content: "\eaf7";
+}
+
+.icon-grayBarsBg:before {
+  content: "\eaf8";
+}
+
+.icon-hamburger:before {
+  content: "\eaf9";
+}
+
+.icon-quotationMarks:before {
+  content: "\eafa";
+}
+
+.icon-quotationMarkUp:before {
+  content: "\eafb";
+}
+
+.icon-x:before {
+  content: "\eafc";
+}
+
+.icon-cheddar:before {
+  content: "\eafd";
+}
+
+.icon-credit-savvy:before {
+  content: "\eafe";
+  color: #64ccc9;
+}
+
+.icon-doshii:before {
+  content: "\eaff";
+  color: #7c004b;
+}
+
+.icon-home-in:before {
+  content: "\eb00";
+}
+
+.icon-kit:before {
+  content: "\eb01";
+}
+
+.icon-truyu .path1:before {
+  content: "\eb02";
+  color: rgb(22, 2, 42);
+}
+
+.icon-truyu .path2:before {
+  content: "\eb03";
+  margin-left: -1em;
+  color: rgb(255, 130, 154);
+}
+
+.icon-truyu .path3:before {
+  content: "\eb04";
+  margin-left: -1em;
+  color: rgb(255, 130, 154);
+}
+
+.icon-unloan:before {
+  content: "\eb05";
+}
+
+.icon-waddle:before {
+  content: "\eb06";
+  color: #c343a5;
+}
+
+.icon-xgraph:before {
+  content: "\eb07";
+}
+
+.icon-x15:before {
+  content: "\eb08";
+}
+
+.icon-kit-logo:before {
+  content: "\eb12";
+}
+
+.icon-truyu-logo:before {
+  content: "\eaf3";
+}
+
+.icon-xgraph-large:before {
+  content: "\eb09";
+}
+
+.icon-x15Logo:before {
+  content: "\eb0a";
+}
+
+.icon-unloan-logo:before {
+  content: "\eb0b";
+}
+
+.icon-doshii-logo:before {
+  content: "\eb0c";
+}
+
+.icon-home-in-logo:before {
+  content: "\eb0d";
+}
+
+.icon-arrowDown:before {
+  content: "\e965";
+}
+
+.icon-arrowRight:before {
+  content: "\e966";
+}
+
+.icon-arrowUp:before {
+  content: "\e967";
+}
+
+.icon-arrowLeft:before {
+  content: "\e968";
+}
+
+.icon-chevronRightSelect:before {
+  content: "\e969";
+}
+
+.icon-chevronUpSelect:before {
+  content: "\e96a";
+}
+
+.icon-chevronLeftSelect:before {
+  content: "\e989";
+}
+
+.icon-chevronDownSelect:before {
+  content: "\e98a";
+}
+
+.icon-loop:before {
+  content: "\ea2d";
+}
+
+.icon-loop2:before {
+  content: "\ea2e";
+}
+
+.icon-shuffle:before {
+  content: "\ea30";
+}
+
+.icon-arrow-up-left:before {
+  content: "\ea31";
+}
+
+.icon-arrow-up:before {
+  content: "\ea32";
+}
+
+.icon-arrow-up-right:before {
+  content: "\ea33";
+}
+
+.icon-arrow-right:before {
+  content: "\ea34";
+}
+
+.icon-arrow-down-right:before {
+  content: "\ea35";
+}
+
+.icon-arrow-down:before {
+  content: "\ea36";
+}
+
+.icon-arrow-down-left:before {
+  content: "\ea37";
+}
+
+.icon-arrow-left:before {
+  content: "\ea38";
+}
+
+.icon-arrow-up-left2:before {
+  content: "\ea39";
+}
+
+.icon-arrow-up2:before {
+  content: "\ea3a";
+}
+
+.icon-arrow-up-right2:before {
+  content: "\ea3b";
+}
+
+.icon-arrow-right2:before {
+  content: "\ea3c";
+}
+
+.icon-arrow-down-right2:before {
+  content: "\ea3d";
+}
+
+.icon-arrow-down2:before {
+  content: "\ea3e";
+}
+
+.icon-arrow-down-left2:before {
+  content: "\ea3f";
+}
+
+.icon-arrow-left2:before {
+  content: "\ea40";
+}
+
+.icon-circle-up:before {
+  content: "\ea41";
+}
+
+.icon-circle-right:before {
+  content: "\ea42";
+}
+
+.icon-circle-down:before {
+  content: "\ea43";
+}
+
+.icon-circle-left:before {
+  content: "\ea44";
+}
+
+.icon-tab:before {
+  content: "\ea45";
+}
+
+.icon-shift:before {
+  content: "\ea4f";
+}
+
+.icon-ctrl:before {
+  content: "\ea50";
+}
+
+.icon-enlarge:before {
+  content: "\e98b";
+}
+
+.icon-shrink:before {
+  content: "\e98c";
+}
+
+.icon-enlarge2:before {
+  content: "\eaeb";
+}
+
+.icon-shrink2:before {
+  content: "\eaec";
+}
+
+.icon-undo:before {
+  content: "\eaed";
+}
+
+.icon-redo:before {
+  content: "\eaee";
+}
+
+.icon-undo2:before {
+  content: "\eaef";
+}
+
+.icon-redo2:before {
+  content: "\eaf0";
+}
+
+.icon-forward:before {
+  content: "\eaf1";
+}
+
+.icon-reply:before {
+  content: "\eaf2";
+}
+
+.icon-happy:before {
+  content: "\e9df";
+}
+
+.icon-happy2:before {
+  content: "\e9e0";
+}
+
+.icon-smile:before {
+  content: "\e9e1";
+}
+
+.icon-smile2:before {
+  content: "\e9e2";
+}
+
+.icon-tongue:before {
+  content: "\e9e3";
+}
+
+.icon-tongue2:before {
+  content: "\e9e4";
+}
+
+.icon-sad:before {
+  content: "\e9e5";
+}
+
+.icon-sad2:before {
+  content: "\e9e6";
+}
+
+.icon-wink:before {
+  content: "\e9e7";
+}
+
+.icon-wink2:before {
+  content: "\e9e8";
+}
+
+.icon-grin:before {
+  content: "\e9e9";
+}
+
+.icon-grin2:before {
+  content: "\e9ea";
+}
+
+.icon-cool:before {
+  content: "\e9eb";
+}
+
+.icon-cool2:before {
+  content: "\e9ec";
+}
+
+.icon-angry:before {
+  content: "\e9ed";
+}
+
+.icon-angry2:before {
+  content: "\e9ee";
+}
+
+.icon-evil:before {
+  content: "\e9ef";
+}
+
+.icon-evil2:before {
+  content: "\e9f0";
+}
+
+.icon-shocked:before {
+  content: "\e9f1";
+}
+
+.icon-shocked2:before {
+  content: "\e9f2";
+}
+
+.icon-baffled:before {
+  content: "\e9f3";
+}
+
+.icon-baffled2:before {
+  content: "\e9f4";
+}
+
+.icon-confused:before {
+  content: "\e9f5";
+}
+
+.icon-confused2:before {
+  content: "\e9f6";
+}
+
+.icon-neutral:before {
+  content: "\e9f7";
+}
+
+.icon-neutral2:before {
+  content: "\e9f8";
+}
+
+.icon-hipster:before {
+  content: "\e9f9";
+}
+
+.icon-hipster2:before {
+  content: "\e9fa";
+}
+
+.icon-wondering:before {
+  content: "\e9fb";
+}
+
+.icon-wondering2:before {
+  content: "\e9fc";
+}
+
+.icon-sleepy:before {
+  content: "\e9fd";
+}
+
+.icon-sleepy2:before {
+  content: "\e9fe";
+}
+
+.icon-frustrated:before {
+  content: "\e9ff";
+}
+
+.icon-frustrated2:before {
+  content: "\ea00";
+}
+
+.icon-crying:before {
+  content: "\ea01";
+}
+
+.icon-crying2:before {
+  content: "\ea02";
+}
+
+.icon-amazon:before {
+  content: "\ea87";
+}
+
+.icon-google:before {
+  content: "\ea88";
+}
+
+.icon-google2:before {
+  content: "\ea89";
+}
+
+.icon-google3:before {
+  content: "\ea8a";
+}
+
+.icon-google-plus:before {
+  content: "\ea8b";
+}
+
+.icon-google-plus2:before {
+  content: "\ea8c";
+}
+
+.icon-google-plus3:before {
+  content: "\ea8d";
+}
+
+.icon-hangouts:before {
+  content: "\ea8e";
+}
+
+.icon-google-drive:before {
+  content: "\ea8f";
+}
+
+.icon-facebook:before {
+  content: "\ea90";
+}
+
+.icon-facebook2:before {
+  content: "\ea91";
+}
+
+.icon-instagram:before {
+  content: "\ea92";
+}
+
+.icon-whatsapp:before {
+  content: "\ea93";
+}
+
+.icon-spotify:before {
+  content: "\ea94";
+}
+
+.icon-telegram:before {
+  content: "\ea95";
+}
+
+.icon-twitter:before {
+  content: "\ea96";
+}
+
+.icon-vine:before {
+  content: "\ea97";
+}
+
+.icon-vk:before {
+  content: "\ea98";
+}
+
+.icon-renren:before {
+  content: "\ea99";
+}
+
+.icon-sina-weibo:before {
+  content: "\ea9a";
+}
+
+.icon-rss:before {
+  content: "\ea9b";
+}
+
+.icon-rss2:before {
+  content: "\ea9c";
+}
+
+.icon-youtube:before {
+  content: "\ea9d";
+}
+
+.icon-youtube2:before {
+  content: "\ea9e";
+}
+
+.icon-twitch:before {
+  content: "\ea9f";
+}
+
+.icon-vimeo:before {
+  content: "\eaa0";
+}
+
+.icon-vimeo2:before {
+  content: "\eaa1";
+}
+
+.icon-lanyrd:before {
+  content: "\eaa2";
+}
+
+.icon-flickr:before {
+  content: "\eaa3";
+}
+
+.icon-flickr2:before {
+  content: "\eaa4";
+}
+
+.icon-flickr3:before {
+  content: "\eaa5";
+}
+
+.icon-flickr4:before {
+  content: "\eaa6";
+}
+
+.icon-dribbble:before {
+  content: "\eaa7";
+}
+
+.icon-behance:before {
+  content: "\eaa8";
+}
+
+.icon-behance2:before {
+  content: "\eaa9";
+}
+
+.icon-deviantart:before {
+  content: "\eaaa";
+}
+
+.icon-500px:before {
+  content: "\eaab";
+}
+
+.icon-steam:before {
+  content: "\eaac";
+}
+
+.icon-steam2:before {
+  content: "\eaad";
+}
+
+.icon-dropbox:before {
+  content: "\eaae";
+}
+
+.icon-onedrive:before {
+  content: "\eaaf";
+}
+
+.icon-github:before {
+  content: "\eab0";
+}
+
+.icon-npm:before {
+  content: "\eab1";
+}
+
+.icon-basecamp:before {
+  content: "\eab2";
+}
+
+.icon-trello:before {
+  content: "\eab3";
+}
+
+.icon-wordpress:before {
+  content: "\eab4";
+}
+
+.icon-joomla:before {
+  content: "\eab5";
+}
+
+.icon-ello:before {
+  content: "\eab6";
+}
+
+.icon-blogger:before {
+  content: "\eab7";
+}
+
+.icon-blogger2:before {
+  content: "\eab8";
+}
+
+.icon-tumblr:before {
+  content: "\eab9";
+}
+
+.icon-tumblr2:before {
+  content: "\eaba";
+}
+
+.icon-yahoo:before {
+  content: "\eabb";
+}
+
+.icon-yahoo2:before {
+  content: "\eabc";
+}
+
+.icon-tux:before {
+  content: "\eabd";
+}
+
+.icon-appleinc:before {
+  content: "\eabe";
+}
+
+.icon-finder:before {
+  content: "\eabf";
+}
+
+.icon-android:before {
+  content: "\eac0";
+}
+
+.icon-windows:before {
+  content: "\eac1";
+}
+
+.icon-windows8:before {
+  content: "\eac2";
+}
+
+.icon-soundcloud:before {
+  content: "\eac3";
+}
+
+.icon-soundcloud2:before {
+  content: "\eac4";
+}
+
+.icon-skype:before {
+  content: "\eac5";
+}
+
+.icon-reddit:before {
+  content: "\eac6";
+}
+
+.icon-hackernews:before {
+  content: "\eac7";
+}
+
+.icon-wikipedia:before {
+  content: "\eac8";
+}
+
+.icon-linkedin:before {
+  content: "\eac9";
+}
+
+.icon-linkedin2:before {
+  content: "\eaca";
+}
+
+.icon-lastfm:before {
+  content: "\eacb";
+}
+
+.icon-lastfm2:before {
+  content: "\eacc";
+}
+
+.icon-delicious:before {
+  content: "\eacd";
+}
+
+.icon-stumbleupon:before {
+  content: "\eace";
+}
+
+.icon-stumbleupon2:before {
+  content: "\eacf";
+}
+
+.icon-stackoverflow:before {
+  content: "\ead0";
+}
+
+.icon-pinterest:before {
+  content: "\ead1";
+}
+
+.icon-pinterest2:before {
+  content: "\ead2";
+}
+
+.icon-xing:before {
+  content: "\ead3";
+}
+
+.icon-xing2:before {
+  content: "\ead4";
+}
+
+.icon-flattr:before {
+  content: "\ead5";
+}
+
+.icon-foursquare:before {
+  content: "\ead6";
+}
+
+.icon-yelp:before {
+  content: "\ead7";
+}
+
+.icon-paypal:before {
+  content: "\ead8";
+}
+
+.icon-chrome:before {
+  content: "\ead9";
+}
+
+.icon-firefox:before {
+  content: "\eada";
+}
+
+.icon-IE:before {
+  content: "\eadb";
+}
+
+.icon-edge:before {
+  content: "\eadc";
+}
+
+.icon-safari:before {
+  content: "\eadd";
+}
+
+.icon-opera:before {
+  content: "\eade";
+}
+
+.icon-file-pdf:before {
+  content: "\eadf";
+}
+
+.icon-file-openoffice:before {
+  content: "\eae0";
+}
+
+.icon-libreoffice:before {
+  content: "\eae3";
+}
+
+.icon-html-five:before {
+  content: "\eae4";
+}
+
+.icon-html-five2:before {
+  content: "\eae5";
+}
+
+.icon-css3:before {
+  content: "\eae6";
+}
+
+.icon-git:before {
+  content: "\eae7";
+}
+
+.icon-codepen:before {
+  content: "\eae8";
+}
+
+.icon-svg:before {
+  content: "\eae9";
+}
+
+.icon-IcoMoon:before {
+  content: "\eaea";
+}
+
+.icon-accessibility:before {
+  content: "\e9b2";
+}
+
+.icon-man:before {
+  content: "\e9dc";
+}
+
+.icon-woman:before {
+  content: "\e9dd";
+}
+
+.icon-man-woman:before {
+  content: "\e9de";
+}
+
+.icon-user:before {
+  content: "\e971";
+}
+
+.icon-users:before {
+  content: "\e972";
+}
+
+.icon-user-plus:before {
+  content: "\e973";
+}
+
+.icon-user-minus:before {
+  content: "\e974";
+}
+
+.icon-user-check:before {
+  content: "\e975";
+}
+
+.icon-user-tie:before {
+  content: "\e976";
+}
+
+.icon-home:before {
+  content: "\e900";
+}
+
+.icon-home2:before {
+  content: "\e901";
+}
+
+.icon-home3:before {
+  content: "\e902";
+}
+
+.icon-office:before {
+  content: "\e903";
+}
+
+.icon-newspaper:before {
+  content: "\e904";
+}
+
+.icon-pencil:before {
+  content: "\e905";
+}
+
+.icon-pencil2:before {
+  content: "\e906";
+}
+
+.icon-quill:before {
+  content: "\e907";
+}
+
+.icon-pen:before {
+  content: "\e908";
+}
+
+.icon-blog:before {
+  content: "\e909";
+}
+
+.icon-eyedropper:before {
+  content: "\e90a";
+}
+
+.icon-droplet:before {
+  content: "\e90b";
+}
+
+.icon-paint-format:before {
+  content: "\e90c";
+}
+
+.icon-image:before {
+  content: "\e90d";
+}
+
+.icon-images:before {
+  content: "\e90e";
+}
+
+.icon-camera:before {
+  content: "\e90f";
+}
+
+.icon-headphones:before {
+  content: "\e910";
+}
+
+.icon-music:before {
+  content: "\e911";
+}
+
+.icon-play:before {
+  content: "\e912";
+}
+
+.icon-film:before {
+  content: "\e913";
+}
+
+.icon-video-camera:before {
+  content: "\e914";
+}
+
+.icon-dice:before {
+  content: "\e915";
+}
+
+.icon-pacman:before {
+  content: "\e916";
+}
+
+.icon-spades:before {
+  content: "\e917";
+}
+
+.icon-clubs:before {
+  content: "\e918";
+}
+
+.icon-diamonds:before {
+  content: "\e919";
+}
+
+.icon-bullhorn:before {
+  content: "\e91a";
+}
+
+.icon-connection:before {
+  content: "\e91b";
+}
+
+.icon-podcast:before {
+  content: "\e91c";
+}
+
+.icon-feed:before {
+  content: "\e91d";
+}
+
+.icon-mic:before {
+  content: "\e91e";
+}
+
+.icon-book:before {
+  content: "\e91f";
+}
+
+.icon-books:before {
+  content: "\e920";
+}
+
+.icon-library:before {
+  content: "\e921";
+}
+
+.icon-file-text:before {
+  content: "\e922";
+}
+
+.icon-profile:before {
+  content: "\e923";
+}
+
+.icon-file-empty:before {
+  content: "\e924";
+}
+
+.icon-files-empty:before {
+  content: "\e925";
+}
+
+.icon-file-text2:before {
+  content: "\e926";
+}
+
+.icon-file-picture:before {
+  content: "\e927";
+}
+
+.icon-file-music:before {
+  content: "\e928";
+}
+
+.icon-file-play:before {
+  content: "\e929";
+}
+
+.icon-file-video:before {
+  content: "\e92a";
+}
+
+.icon-file-zip:before {
+  content: "\e92b";
+}
+
+.icon-copy:before {
+  content: "\e92c";
+}
+
+.icon-paste:before {
+  content: "\e92d";
+}
+
+.icon-stack:before {
+  content: "\e92e";
+}
+
+.icon-folder:before {
+  content: "\e92f";
+}
+
+.icon-folder-open:before {
+  content: "\e930";
+}
+
+.icon-folder-plus:before {
+  content: "\e931";
+}
+
+.icon-folder-minus:before {
+  content: "\e932";
+}
+
+.icon-folder-download:before {
+  content: "\e933";
+}
+
+.icon-folder-upload:before {
+  content: "\e934";
+}
+
+.icon-price-tag:before {
+  content: "\e935";
+}
+
+.icon-price-tags:before {
+  content: "\e936";
+}
+
+.icon-barcode:before {
+  content: "\e937";
+}
+
+.icon-qrcode:before {
+  content: "\e938";
+}
+
+.icon-ticket:before {
+  content: "\e939";
+}
+
+.icon-cart:before {
+  content: "\e93a";
+}
+
+.icon-coin-dollar:before {
+  content: "\e93b";
+}
+
+.icon-coin-euro:before {
+  content: "\e93c";
+}
+
+.icon-coin-pound:before {
+  content: "\e93d";
+}
+
+.icon-coin-yen:before {
+  content: "\e93e";
+}
+
+.icon-credit-card:before {
+  content: "\e93f";
+}
+
+.icon-calculator:before {
+  content: "\e940";
+}
+
+.icon-lifebuoy:before {
+  content: "\e941";
+}
+
+.icon-phone:before {
+  content: "\e942";
+}
+
+.icon-phone-hang-up:before {
+  content: "\e943";
+}
+
+.icon-address-book:before {
+  content: "\e944";
+}
+
+.icon-envelop:before {
+  content: "\e945";
+}
+
+.icon-pushpin:before {
+  content: "\e946";
+}
+
+.icon-location:before {
+  content: "\e947";
+}
+
+.icon-location2:before {
+  content: "\e948";
+}
+
+.icon-compass:before {
+  content: "\e949";
+}
+
+.icon-compass2:before {
+  content: "\e94a";
+}
+
+.icon-map:before {
+  content: "\e94b";
+}
+
+.icon-map2:before {
+  content: "\e94c";
+}
+
+.icon-history:before {
+  content: "\e94d";
+}
+
+.icon-clock:before {
+  content: "\e94e";
+}
+
+.icon-clock2:before {
+  content: "\e94f";
+}
+
+.icon-alarm:before {
+  content: "\e950";
+}
+
+.icon-bell:before {
+  content: "\e951";
+}
+
+.icon-stopwatch:before {
+  content: "\e952";
+}
+
+.icon-calendar:before {
+  content: "\e953";
+}
+
+.icon-printer:before {
+  content: "\e954";
+}
+
+.icon-keyboard:before {
+  content: "\e955";
+}
+
+.icon-display:before {
+  content: "\e956";
+}
+
+.icon-laptop:before {
+  content: "\e957";
+}
+
+.icon-mobile:before {
+  content: "\e958";
+}
+
+.icon-mobile2:before {
+  content: "\e959";
+}
+
+.icon-tablet:before {
+  content: "\e95a";
+}
+
+.icon-tv:before {
+  content: "\e95b";
+}
+
+.icon-drawer:before {
+  content: "\e95c";
+}
+
+.icon-drawer2:before {
+  content: "\e95d";
+}
+
+.icon-box-add:before {
+  content: "\e95e";
+}
+
+.icon-box-remove:before {
+  content: "\e95f";
+}
+
+.icon-download:before {
+  content: "\e960";
+}
+
+.icon-upload:before {
+  content: "\e961";
+}
+
+.icon-floppy-disk:before {
+  content: "\e962";
+}
+
+.icon-drive:before {
+  content: "\e963";
+}
+
+.icon-database:before {
+  content: "\e964";
+}
+
+.icon-bubble:before {
+  content: "\e96b";
+}
+
+.icon-bubbles:before {
+  content: "\e96c";
+}
+
+.icon-bubbles2:before {
+  content: "\e96d";
+}
+
+.icon-bubble2:before {
+  content: "\e96e";
+}
+
+.icon-bubbles3:before {
+  content: "\e96f";
+}
+
+.icon-bubbles4:before {
+  content: "\e970";
+}
+
+.icon-quotes-left:before {
+  content: "\e977";
+}
+
+.icon-quotes-right:before {
+  content: "\e978";
+}
+
+.icon-hour-glass:before {
+  content: "\e979";
+}
+
+.icon-spinner:before {
+  content: "\e97a";
+}
+
+.icon-spinner2:before {
+  content: "\e97b";
+}
+
+.icon-spinner3:before {
+  content: "\e97c";
+}
+
+.icon-spinner4:before {
+  content: "\e97d";
+}
+
+.icon-spinner5:before {
+  content: "\e97e";
+}
+
+.icon-spinner6:before {
+  content: "\e97f";
+}
+
+.icon-spinner7:before {
+  content: "\e980";
+}
+
+.icon-spinner8:before {
+  content: "\e981";
+}
+
+.icon-spinner9:before {
+  content: "\e982";
+}
+
+.icon-spinner10:before {
+  content: "\e983";
+}
+
+.icon-spinner11:before {
+  content: "\e984";
+}
+
+.icon-binoculars:before {
+  content: "\e985";
+}
+
+.icon-search:before {
+  content: "\e986";
+}
+
+.icon-zoom-in:before {
+  content: "\e987";
+}
+
+.icon-zoom-out:before {
+  content: "\e988";
+}
+
+.icon-key:before {
+  content: "\e98d";
+}
+
+.icon-key2:before {
+  content: "\e98e";
+}
+
+.icon-lock:before {
+  content: "\e98f";
+}
+
+.icon-unlocked:before {
+  content: "\e990";
+}
+
+.icon-wrench:before {
+  content: "\e991";
+}
+
+.icon-equalizer:before {
+  content: "\e992";
+}
+
+.icon-equalizer2:before {
+  content: "\e993";
+}
+
+.icon-cog:before {
+  content: "\e994";
+}
+
+.icon-cogs:before {
+  content: "\e995";
+}
+
+.icon-hammer:before {
+  content: "\e996";
+}
+
+.icon-magic-wand:before {
+  content: "\e997";
+}
+
+.icon-aid-kit:before {
+  content: "\e998";
+}
+
+.icon-bug:before {
+  content: "\e999";
+}
+
+.icon-pie-chart:before {
+  content: "\e99a";
+}
+
+.icon-stats-dots:before {
+  content: "\e99b";
+}
+
+.icon-stats-bars:before {
+  content: "\e99c";
+}
+
+.icon-stats-bars2:before {
+  content: "\e99d";
+}
+
+.icon-trophy:before {
+  content: "\e99e";
+}
+
+.icon-gift:before {
+  content: "\e99f";
+}
+
+.icon-glass:before {
+  content: "\e9a0";
+}
+
+.icon-glass2:before {
+  content: "\e9a1";
+}
+
+.icon-mug:before {
+  content: "\e9a2";
+}
+
+.icon-spoon-knife:before {
+  content: "\e9a3";
+}
+
+.icon-leaf:before {
+  content: "\e9a4";
+}
+
+.icon-rocket:before {
+  content: "\e9a5";
+}
+
+.icon-meter:before {
+  content: "\e9a6";
+}
+
+.icon-meter2:before {
+  content: "\e9a7";
+}
+
+.icon-hammer2:before {
+  content: "\e9a8";
+}
+
+.icon-fire:before {
+  content: "\e9a9";
+}
+
+.icon-lab:before {
+  content: "\e9aa";
+}
+
+.icon-magnet:before {
+  content: "\e9ab";
+}
+
+.icon-bin:before {
+  content: "\e9ac";
+}
+
+.icon-bin2:before {
+  content: "\e9ad";
+}
+
+.icon-briefcase:before {
+  content: "\e9ae";
+}
+
+.icon-airplane:before {
+  content: "\e9af";
+}
+
+.icon-truck:before {
+  content: "\e9b0";
+}
+
+.icon-road:before {
+  content: "\e9b1";
+}
+
+.icon-target:before {
+  content: "\e9b3";
+}
+
+.icon-shield:before {
+  content: "\e9b4";
+}
+
+.icon-power:before {
+  content: "\e9b5";
+}
+
+.icon-switch:before {
+  content: "\e9b6";
+}
+
+.icon-power-cord:before {
+  content: "\e9b7";
+}
+
+.icon-clipboard:before {
+  content: "\e9b8";
+}
+
+.icon-list-numbered:before {
+  content: "\e9b9";
+}
+
+.icon-list:before {
+  content: "\e9ba";
+}
+
+.icon-list2:before {
+  content: "\e9bb";
+}
+
+.icon-tree:before {
+  content: "\e9bc";
+}
+
+.icon-menu:before {
+  content: "\e9bd";
+}
+
+.icon-menu2:before {
+  content: "\e9be";
+}
+
+.icon-menu3:before {
+  content: "\e9bf";
+}
+
+.icon-menu4:before {
+  content: "\e9c0";
+}
+
+.icon-cloud1:before {
+  content: "\e9c1";
+}
+
+.icon-cloud-download:before {
+  content: "\e9c2";
+}
+
+.icon-cloud-upload:before {
+  content: "\e9c3";
+}
+
+.icon-cloud-check:before {
+  content: "\e9c4";
+}
+
+.icon-download2:before {
+  content: "\e9c5";
+}
+
+.icon-upload2:before {
+  content: "\e9c6";
+}
+
+.icon-download3:before {
+  content: "\e9c7";
+}
+
+.icon-upload3:before {
+  content: "\e9c8";
+}
+
+.icon-sphere:before {
+  content: "\e9c9";
+}
+
+.icon-earth:before {
+  content: "\e9ca";
+}
+
+.icon-link:before {
+  content: "\e9cb";
+}
+
+.icon-flag:before {
+  content: "\e9cc";
+}
+
+.icon-attachment:before {
+  content: "\e9cd";
+}
+
+.icon-eye:before {
+  content: "\e9ce";
+}
+
+.icon-eye-plus:before {
+  content: "\e9cf";
+}
+
+.icon-eye-minus:before {
+  content: "\e9d0";
+}
+
+.icon-eye-blocked:before {
+  content: "\e9d1";
+}
+
+.icon-bookmark:before {
+  content: "\e9d2";
+}
+
+.icon-bookmarks:before {
+  content: "\e9d3";
+}
+
+.icon-sun:before {
+  content: "\e9d4";
+}
+
+.icon-contrast:before {
+  content: "\e9d5";
+}
+
+.icon-brightness-contrast:before {
+  content: "\e9d6";
+}
+
+.icon-star-empty:before {
+  content: "\e9d7";
+}
+
+.icon-star-half:before {
+  content: "\e9d8";
+}
+
+.icon-star-full:before {
+  content: "\e9d9";
+}
+
+.icon-heart:before {
+  content: "\e9da";
+}
+
+.icon-heart-broken:before {
+  content: "\e9db";
+}
+
+.icon-point-up:before {
+  content: "\ea03";
+}
+
+.icon-point-right:before {
+  content: "\ea04";
+}
+
+.icon-point-down:before {
+  content: "\ea05";
+}
+
+.icon-point-left:before {
+  content: "\ea06";
+}
+
+.icon-warning:before {
+  content: "\ea07";
+}
+
+.icon-notification:before {
+  content: "\ea08";
+}
+
+.icon-question:before {
+  content: "\ea09";
+}
+
+.icon-plus:before {
+  content: "\ea0a";
+}
+
+.icon-minus:before {
+  content: "\ea0b";
+}
+
+.icon-info:before {
+  content: "\ea0c";
+}
+
+.icon-cancel-circle:before {
+  content: "\ea0d";
+}
+
+.icon-blocked:before {
+  content: "\ea0e";
+}
+
+.icon-cross:before {
+  content: "\ea0f";
+}
+
+.icon-checkmark:before {
+  content: "\ea10";
+}
+
+.icon-checkmark2:before {
+  content: "\ea11";
+}
+
+.icon-spell-check:before {
+  content: "\ea12";
+}
+
+.icon-enter:before {
+  content: "\ea13";
+}
+
+.icon-exit:before {
+  content: "\ea14";
+}
+
+.icon-play2:before {
+  content: "\ea15";
+}
+
+.icon-pause:before {
+  content: "\ea16";
+}
+
+.icon-stop:before {
+  content: "\ea17";
+}
+
+.icon-previous:before {
+  content: "\ea18";
+}
+
+.icon-next:before {
+  content: "\ea19";
+}
+
+.icon-backward:before {
+  content: "\ea1a";
+}
+
+.icon-forward2:before {
+  content: "\ea1b";
+}
+
+.icon-play3:before {
+  content: "\ea1c";
+}
+
+.icon-pause2:before {
+  content: "\ea1d";
+}
+
+.icon-stop2:before {
+  content: "\ea1e";
+}
+
+.icon-backward2:before {
+  content: "\ea1f";
+}
+
+.icon-forward3:before {
+  content: "\ea20";
+}
+
+.icon-first:before {
+  content: "\ea21";
+}
+
+.icon-last:before {
+  content: "\ea22";
+}
+
+.icon-previous2:before {
+  content: "\ea23";
+}
+
+.icon-next2:before {
+  content: "\ea24";
+}
+
+.icon-eject:before {
+  content: "\ea25";
+}
+
+.icon-volume-high:before {
+  content: "\ea26";
+}
+
+.icon-volume-medium:before {
+  content: "\ea27";
+}
+
+.icon-volume-low:before {
+  content: "\ea28";
+}
+
+.icon-volume-mute:before {
+  content: "\ea29";
+}
+
+.icon-volume-mute2:before {
+  content: "\ea2a";
+}
+
+.icon-volume-increase:before {
+  content: "\ea2b";
+}
+
+.icon-volume-decrease:before {
+  content: "\ea2c";
+}
+
+.icon-infinite:before {
+  content: "\ea2f";
+}
+
+.icon-move-up:before {
+  content: "\ea46";
+}
+
+.icon-move-down:before {
+  content: "\ea47";
+}
+
+.icon-sort-alpha-asc:before {
+  content: "\ea48";
+}
+
+.icon-sort-alpha-desc:before {
+  content: "\ea49";
+}
+
+.icon-sort-numeric-asc:before {
+  content: "\ea4a";
+}
+
+.icon-sort-numberic-desc:before {
+  content: "\ea4b";
+}
+
+.icon-sort-amount-asc:before {
+  content: "\ea4c";
+}
+
+.icon-sort-amount-desc:before {
+  content: "\ea4d";
+}
+
+.icon-command:before {
+  content: "\ea4e";
+}
+
+.icon-opt:before {
+  content: "\ea51";
+}
+
+.icon-checkbox-checked:before {
+  content: "\ea52";
+}
+
+.icon-checkbox-unchecked:before {
+  content: "\ea53";
+}
+
+.icon-radio-checked:before {
+  content: "\ea54";
+}
+
+.icon-radio-checked2:before {
+  content: "\ea55";
+}
+
+.icon-radio-unchecked:before {
+  content: "\ea56";
+}
+
+.icon-crop:before {
+  content: "\ea57";
+}
+
+.icon-make-group:before {
+  content: "\ea58";
+}
+
+.icon-ungroup:before {
+  content: "\ea59";
+}
+
+.icon-scissors:before {
+  content: "\ea5a";
+}
+
+.icon-filter:before {
+  content: "\ea5b";
+}
+
+.icon-font:before {
+  content: "\ea5c";
+}
+
+.icon-ligature:before {
+  content: "\ea5d";
+}
+
+.icon-ligature2:before {
+  content: "\ea5e";
+}
+
+.icon-text-height:before {
+  content: "\ea5f";
+}
+
+.icon-text-width:before {
+  content: "\ea60";
+}
+
+.icon-font-size:before {
+  content: "\ea61";
+}
+
+.icon-bold:before {
+  content: "\ea62";
+}
+
+.icon-underline:before {
+  content: "\ea63";
+}
+
+.icon-italic:before {
+  content: "\ea64";
+}
+
+.icon-strikethrough:before {
+  content: "\ea65";
+}
+
+.icon-omega:before {
+  content: "\ea66";
+}
+
+.icon-sigma:before {
+  content: "\ea67";
+}
+
+.icon-page-break:before {
+  content: "\ea68";
+}
+
+.icon-superscript:before {
+  content: "\ea69";
+}
+
+.icon-subscript:before {
+  content: "\ea6a";
+}
+
+.icon-superscript2:before {
+  content: "\ea6b";
+}
+
+.icon-subscript2:before {
+  content: "\ea6c";
+}
+
+.icon-text-color:before {
+  content: "\ea6d";
+}
+
+.icon-pagebreak:before {
+  content: "\ea6e";
+}
+
+.icon-clear-formatting:before {
+  content: "\ea6f";
+}
+
+.icon-table:before {
+  content: "\ea70";
+}
+
+.icon-table2:before {
+  content: "\ea71";
+}
+
+.icon-insert-template:before {
+  content: "\ea72";
+}
+
+.icon-pilcrow:before {
+  content: "\ea73";
+}
+
+.icon-ltr:before {
+  content: "\ea74";
+}
+
+.icon-rtl:before {
+  content: "\ea75";
+}
+
+.icon-section:before {
+  content: "\ea76";
+}
+
+.icon-paragraph-left:before {
+  content: "\ea77";
+}
+
+.icon-paragraph-center:before {
+  content: "\ea78";
+}
+
+.icon-paragraph-right:before {
+  content: "\ea79";
+}
+
+.icon-paragraph-justify:before {
+  content: "\ea7a";
+}
+
+.icon-indent-increase:before {
+  content: "\ea7b";
+}
+
+.icon-indent-decrease:before {
+  content: "\ea7c";
+}
+
+.icon-share:before {
+  content: "\ea7d";
+}
+
+.icon-new-tab:before {
+  content: "\ea7e";
+}
+
+.icon-embed:before {
+  content: "\ea7f";
+}
+
+.icon-embed2:before {
+  content: "\ea80";
+}
+
+.icon-terminal:before {
+  content: "\ea81";
+}
+
+.icon-share2:before {
+  content: "\ea82";
+}
+
+.icon-mail:before {
+  content: "\ea83";
+}
+
+.icon-mail2:before {
+  content: "\ea84";
+}
+
+.icon-mail3:before {
+  content: "\ea85";
+}
+
+.icon-mail4:before {
+  content: "\ea86";
+}
+
+.icon-file-word:before {
+  content: "\eae1";
+}
+
+.icon-file-excel:before {
+  content: "\eae2";
+}
+
+.primaryButtonBg_fg {
+  color: var(--primaryButtonBg);
+}
+
+.primaryButtonBg_bg {
+  background-color: var(--primaryButtonBg);
+}
+
+.secondaryButtonBg_fg {
+  color: var(--secondaryButtonBg);
+}
+
+.secondaryButtonBg_bg {
+  background-color: var(--secondaryButtonBg);
+}
+
+.tertiaryButtonBg_fg {
+  color: var(--tertiaryButtonBg);
+}
+
+.tertiaryButtonBg_bg {
+  background-color: var(--tertiaryButtonBg);
+}
+
+.baseTextColor_fg {
+  color: var(--baseTextColor);
+}
+
+.baseTextColor_bg {
+  background-color: var(--baseTextColor);
+}
+
+.inverseTextColor_fg {
+  color: var(--inverseTextColor);
+}
+
+.inverseTextColor_bg {
+  background-color: var(--inverseTextColor);
+}
+
+.baseTint_fg {
+  color: var(--baseTint);
+}
+
+.baseTint_bg {
+  background-color: var(--baseTint);
+}
+
+.inverseTint_fg {
+  color: var(--inverseTint);
+}
+
+.inverseTint_bg {
+  background-color: var(--inverseTint);
+}
+
+.palette1_fg {
+  color: var(--palette1);
+}
+
+.palette1_bg {
+  background-color: var(--palette1);
+}
+
+.palette2_fg {
+  color: var(--palette2);
+}
+
+.palette2_bg {
+  background-color: var(--palette2);
+}
+
+.palette1-500_fg {
+  color: var(--palette1-500);
+}
+
+.palette1-500_bg {
+  background-color: var(--palette1-500);
+}
+
+.palette2-500_fg {
+  color: var(--palette2-500);
+}
+
+.palette2-500_bg {
+  background-color: var(--palette2-500);
+}
+
+.white_fg {
+  color: var(--white);
+}
+
+.white_bg {
+  background-color: var(--white);
+}
+
+.white-10_fg {
+  color: var(--white-10);
+}
+
+.white-10_bg {
+  background-color: var(--white-10);
+}
+
+.white-20_fg {
+  color: var(--white-20);
+}
+
+.white-20_bg {
+  background-color: var(--white-20);
+}
+
+.white-30_fg {
+  color: var(--white-30);
+}
+
+.white-30_bg {
+  background-color: var(--white-30);
+}
+
+.white-40_fg {
+  color: var(--white-40);
+}
+
+.white-40_bg {
+  background-color: var(--white-40);
+}
+
+.white-50_fg {
+  color: var(--white-50);
+}
+
+.white-50_bg {
+  background-color: var(--white-50);
+}
+
+.white-60_fg {
+  color: var(--white-60);
+}
+
+.white-60_bg {
+  background-color: var(--white-60);
+}
+
+.white-70_fg {
+  color: var(--white-70);
+}
+
+.white-70_bg {
+  background-color: var(--white-70);
+}
+
+.white-80_fg {
+  color: var(--white-80);
+}
+
+.white-80_bg {
+  background-color: var(--white-80);
+}
+
+.white-90_fg {
+  color: var(--white-90);
+}
+
+.white-90_bg {
+  background-color: var(--white-90);
+}
+
+.black_fg {
+  color: var(--black);
+}
+
+.black_bg {
+  background-color: var(--black);
+}
+
+.black-10_fg {
+  color: var(--black-10);
+}
+
+.black-10_bg {
+  background-color: var(--black-10);
+}
+
+.black-20_fg {
+  color: var(--black-20);
+}
+
+.black-20_bg {
+  background-color: var(--black-20);
+}
+
+.black-30_fg {
+  color: var(--black-30);
+}
+
+.black-30_bg {
+  background-color: var(--black-30);
+}
+
+.black-40_fg {
+  color: var(--black-40);
+}
+
+.black-40_bg {
+  background-color: var(--black-40);
+}
+
+.black-50_fg {
+  color: var(--black-50);
+}
+
+.black-50_bg {
+  background-color: var(--black-50);
+}
+
+.black-60_fg {
+  color: var(--black-60);
+}
+
+.black-60_bg {
+  background-color: var(--black-60);
+}
+
+.black-70_fg {
+  color: var(--black-70);
+}
+
+.black-70_bg {
+  background-color: var(--black-70);
+}
+
+.black-80_fg {
+  color: var(--black-80);
+}
+
+.black-80_bg {
+  background-color: var(--black-80);
+}
+
+.black-90_fg {
+  color: var(--black-90);
+}
+
+.black-90_bg {
+  background-color: var(--black-90);
+}
+
+.neutral_fg {
+  color: var(--neutral);
+}
+
+.neutral_bg {
+  background-color: var(--neutral);
+}
+
+.neutral-10_fg {
+  color: var(--neutral-10);
+}
+
+.neutral-10_bg {
+  background-color: var(--neutral-10);
+}
+
+.neutral-20_fg {
+  color: var(--neutral-20);
+}
+
+.neutral-20_bg {
+  background-color: var(--neutral-20);
+}
+
+.neutral-30_fg {
+  color: var(--neutral-30);
+}
+
+.neutral-30_bg {
+  background-color: var(--neutral-30);
+}
+
+.neutral-40_fg {
+  color: var(--neutral-40);
+}
+
+.neutral-40_bg {
+  background-color: var(--neutral-40);
+}
+
+.neutral-50_fg {
+  color: var(--neutral-50);
+}
+
+.neutral-50_bg {
+  background-color: var(--neutral-50);
+}
+
+.neutral-60_fg {
+  color: var(--neutral-60);
+}
+
+.neutral-60_bg {
+  background-color: var(--neutral-60);
+}
+
+.neutral-70_fg {
+  color: var(--neutral-70);
+}
+
+.neutral-70_bg {
+  background-color: var(--neutral-70);
+}
+
+.neutral-80_fg {
+  color: var(--neutral-80);
+}
+
+.neutral-80_bg {
+  background-color: var(--neutral-80);
+}
+
+.neutral-90_fg {
+  color: var(--neutral-90);
+}
+
+.neutral-90_bg {
+  background-color: var(--neutral-90);
+}
+
+.neutral-95_fg {
+  color: var(--neutral-95);
+}
+
+.neutral-95_bg {
+  background-color: var(--neutral-95);
+}
+
+:root {
+  --primaryButtonBg: rgb(229, 235, 239);
+  --secondaryButtonBg: rgb(194, 208, 217);
+  --tertiaryButtonBg: rgb(56, 65, 71);
+  --baseTextColor: rgb(34, 34, 34);
+  --inverseTextColor: rgb(255, 255, 255);
+  --baseTint: rgb(255, 255, 255);
+  --inverseTint: rgb(0, 0, 0);
+  --palette1: rgb(229, 235, 239);
+  --palette2: rgb(194, 208, 217);
+  --palette1-500: rgb(229, 235, 239);
+  --palette2-500: rgb(194, 208, 217);
+  --white: rgb(255, 255, 255);
+  --white-10: rgb(242, 242, 242);
+  --white-20: rgb(230, 230, 230);
+  --white-30: rgb(217, 217, 217);
+  --white-40: rgb(204, 204, 204);
+  --white-50: rgb(191, 191, 191);
+  --white-60: rgb(179, 179, 179);
+  --white-70: rgb(166, 166, 166);
+  --white-80: rgb(153, 153, 153);
+  --white-90: rgb(140, 140, 140);
+  --black: rgb(0, 0, 0);
+  --black-10: rgb(13, 13, 13);
+  --black-20: rgb(26, 26, 26);
+  --black-30: rgb(38, 38, 38);
+  --black-40: rgb(51, 51, 51);
+  --black-50: rgb(64, 64, 64);
+  --black-60: rgb(77, 77, 77);
+  --black-70: rgb(89, 89, 89);
+  --black-80: rgb(102, 102, 102);
+  --black-90: rgb(115, 115, 115);
+  --neutral: rgb(168, 188, 201);
+  --neutral-10: rgb(24, 26, 27);
+  --neutral-20: rgb(36, 40, 43);
+  --neutral-30: rgb(56, 65, 71);
+  --neutral-40: rgb(81, 100, 114);
+  --neutral-50: rgb(126, 151, 167);
+  --neutral-60: rgb(194, 208, 217);
+  --neutral-70: rgb(211, 222, 228);
+  --neutral-80: rgb(229, 235, 239);
+  --neutral-90: rgb(238, 242, 244);
+  --neutral-95: rgb(246, 248, 250);
+}
+
+:root {
+  --primaryButtonBg: #e5ebef;
+  --primaryButtonBorder: 1px solid #e5ebef;
+  --primaryButtonFgColor: #222;
+  --primaryButtonBgHover: rgb(244.7857142857, 247.1428571429, 248.7142857143);
+  --primaryButtonFgColorHover: #000;
+  --primaryButtonBorderHover: 1px solid rgb(244.7857142857, 247.1428571429, 248.7142857143);
+  --primaryButtonFocusOutline: 1px solid #e5ebef;
+  --primaryTextOnlyColor: #000;
+  --primaryButtonInverseBg: #000;
+  --primaryButtonInverseBorder: 1px solid #000;
+  --primaryButtonInverseFgColor: #e5ebef;
+  --primaryButtonInverseBgHover: #222;
+  --primaryButtonInverseFgColorHover: #fff;
+  --primaryButtonInverseBorderHover: 1px solid #222;
+  --primaryButtonInverseFocusOutline: 1px solid rgb(165.8571428571, 186.4285714286, 200.1428571429);
+  --primaryButtonDisabledBg: rgba(229, 235, 239, 0.5);
+  --primaryButtonDisabledBorder: 1px solid rgba(229, 235, 239, 0.5);
+  --primaryButtonDisabledFgColor: rgba(34, 34, 34, 0.5);
+  --primaryButtonDisabledBgHover: rgba(229, 235, 239, 0.5);
+  --primaryButtonDisabledFgColorHover: rgba(34, 34, 34, 0.5);
+  --primaryButtonDisabledBorderHover: 1px solid rgba(229, 235, 239, 0.5);
+  --primaryButtonDisabledFocusOutline: 1px solid rgba(229, 235, 239, 0.35);
+  --primaryButtonOutlineStyleBg: transparent;
+  --primaryButtonOutlineStyleBorder: 1px solid #e5ebef;
+  --primaryButtonOutlineStyleFgColor: rgb(90.8571428571, 124.9285714286, 147.6428571429);
+  --primaryButtonOutlineStyleBgHover: transparent;
+  --primaryButtonOutlineStyleFgColorHover: rgb(90.8571428571, 124.9285714286, 147.6428571429);
+  --primaryButtonOutlineStyleBorderHover: 1px solid rgb(90.8571428571, 124.9285714286, 147.6428571429);
+  --primaryButtonOutlineStyleFocusOutline: 1px solid rgb(90.8571428571, 124.9285714286, 147.6428571429);
+  --primaryButtonOutlineInvertStyleBg: transparent;
+  --primaryButtonOutlineInvertStyleBorder: 1px solid #e5ebef;
+  --primaryButtonOutlineInvertStyleFgColor: #e5ebef;
+  --primaryButtonOutlineInvertStyleBgHover: transparent;
+  --primaryButtonOutlineInvertStyleFgColorHover: rgb(118.5, 150, 171);
+  --primaryButtonOutlineInvertStyleBorderHover: 1px solid rgb(118.5, 150, 171);
+  --primaryButtonOutlineInvertStyleFocusOutline: 1px solid rgb(165.8571428571, 186.4285714286, 200.1428571429);
+  --secondaryButtonBg: #c2d0d9;
+  --secondaryButtonBorder: 1px solid #c2d0d9;
+  --secondaryButtonFgColor: #222;
+  --secondaryButtonBgHover: rgb(209.7121212121, 220.1060606061, 226.7878787879);
+  --secondaryButtonFgColorHover: #000;
+  --secondaryButtonBorderHover: 1px solid rgb(209.7121212121, 220.1060606061, 226.7878787879);
+  --secondaryButtonFocusOutline: 1px solid #c2d0d9;
+  --secondaryTextOnlyColor: #000;
+  --secondaryButtonInverseBg: #000;
+  --secondaryButtonInverseBorder: 1px solid #000;
+  --secondaryButtonInverseFgColor: #c2d0d9;
+  --secondaryButtonInverseBgHover: #222;
+  --secondaryButtonInverseFgColorHover: #fff;
+  --secondaryButtonInverseBorderHover: 1px solid #222;
+  --secondaryButtonInverseFocusOutline: 1px solid rgb(131.1515151515, 159.5757575758, 177.8484848485);
+  --secondaryButtonDisabledBg: rgba(194, 208, 217, 0.5);
+  --secondaryButtonDisabledBorder: 1px solid rgba(194, 208, 217, 0.5);
+  --secondaryButtonDisabledFgColor: rgba(34, 34, 34, 0.5);
+  --secondaryButtonDisabledBgHover: rgba(194, 208, 217, 0.5);
+  --secondaryButtonDisabledFgColorHover: rgba(34, 34, 34, 0.5);
+  --secondaryButtonDisabledBorderHover: 1px solid rgba(194, 208, 217, 0.5);
+  --secondaryButtonDisabledFocusOutline: 1px solid rgba(194, 208, 217, 0.35);
+  --secondaryButtonOutlineStyleBg: transparent;
+  --secondaryButtonOutlineStyleBorder: 1px solid #c2d0d9;
+  --secondaryButtonOutlineStyleFgColor: rgb(69.6666666667, 95.3333333333, 111.8333333333);
+  --secondaryButtonOutlineStyleBgHover: transparent;
+  --secondaryButtonOutlineStyleFgColorHover: rgb(69.6666666667, 95.3333333333, 111.8333333333);
+  --secondaryButtonOutlineStyleBorderHover: 1px solid rgb(69.6666666667, 95.3333333333, 111.8333333333);
+  --secondaryButtonOutlineStyleFocusOutline: 1px solid rgb(69.6666666667, 95.3333333333, 111.8333333333);
+  --secondaryButtonOutlineInvertStyleBg: transparent;
+  --secondaryButtonOutlineInvertStyleBorder: 1px solid #c2d0d9;
+  --secondaryButtonOutlineInvertStyleFgColor: #c2d0d9;
+  --secondaryButtonOutlineInvertStyleBgHover: transparent;
+  --secondaryButtonOutlineInvertStyleFgColorHover: rgb(89.2424242424, 122.1212121212, 143.2575757576);
+  --secondaryButtonOutlineInvertStyleBorderHover: 1px solid rgb(89.2424242424, 122.1212121212, 143.2575757576);
+  --secondaryButtonOutlineInvertStyleFocusOutline: 1px solid rgb(131.1515151515, 159.5757575758, 177.8484848485);
+  --tertiaryButtonBg: #384147;
+  --tertiaryButtonBorder: 1px solid #384147;
+  --tertiaryButtonFgColor: #fff;
+  --tertiaryButtonBgHover: rgb(67.2440944882, 78.0511811024, 85.2559055118);
+  --tertiaryButtonFgColorHover: #fff;
+  --tertiaryButtonBorderHover: 1px solid rgb(67.2440944882, 78.0511811024, 85.2559055118);
+  --tertiaryButtonFocusOutline: 1px solid rgb(154.9291338583, 167.6141732283, 176.0708661417);
+  --tertiaryTextOnlyColor: #384147;
+  --tertiaryButtonInverseBg: rgb(169.1850393701, 180.062992126, 187.3149606299);
+  --tertiaryButtonInverseBorder: 1px solid rgb(169.1850393701, 180.062992126, 187.3149606299);
+  --tertiaryButtonInverseFgColor: #222;
+  --tertiaryButtonInverseBgHover: rgb(140.6732283465, 155.1653543307, 164.8267716535);
+  --tertiaryButtonInverseFgColorHover: #000;
+  --tertiaryButtonInverseBorderHover: 1px solid rgb(140.6732283465, 155.1653543307, 164.8267716535);
+  --tertiaryButtonInverseFocusOutline: 1px solid rgb(11.0236220472, 12.7952755906, 13.9763779528);
+  --tertiaryButtonDisabledBg: rgba(56, 65, 71, 0.5);
+  --tertiaryButtonDisabledBorder: 1px solid rgba(56, 65, 71, 0.5);
+  --tertiaryButtonDisabledFgColor: rgba(255, 255, 255, 0.5);
+  --tertiaryButtonDisabledBgHover: rgba(56, 65, 71, 0.5);
+  --tertiaryButtonDisabledFgColorHover: rgba(255, 255, 255, 0.5);
+  --tertiaryButtonDisabledBorderHover: 1px solid rgba(56, 65, 71, 0.5);
+  --tertiaryButtonDisabledFocusOutline: 1px solid rgba(56, 65, 71, 0.35);
+  --tertiaryButtonOutlineStyleBg: transparent;
+  --tertiaryButtonOutlineStyleBorder: 1px solid rgb(154.9291338583, 167.6141732283, 176.0708661417);
+  --tertiaryButtonOutlineStyleFgColor: #384147;
+  --tertiaryButtonOutlineStyleBgHover: transparent;
+  --tertiaryButtonOutlineStyleFgColorHover: rgb(78.4881889764, 91.1023622047, 99.5118110236);
+  --tertiaryButtonOutlineStyleBorderHover: 1px solid rgb(78.4881889764, 91.1023622047, 99.5118110236);
+  --tertiaryButtonOutlineStyleFocusOutline: 1px solid rgb(140.6732283465, 155.1653543307, 164.8267716535);
+  --tertiaryButtonOutlineInvertStyleBg: transparent;
+  --tertiaryButtonOutlineInvertStyleBorder: 1px solid hsl(204, 11.811023622%, -20.0980392157%);
+  --tertiaryButtonOutlineInvertStyleFgColor: hsl(204, 11.811023622%, -20.0980392157%);
+  --tertiaryButtonOutlineInvertStyleBgHover: transparent;
+  --tertiaryButtonOutlineInvertStyleFgColorHover: hsl(204, 11.811023622%, -10.0980392157%);
+  --tertiaryButtonOutlineInvertStyleBorderHover: 1px solid hsl(204, 11.811023622%, -10.0980392157%);
+  --tertiaryButtonOutlineInvertStyleFocusOutline: 1px solid rgb(11.0236220472, 12.7952755906, 13.9763779528);
+}