:root { --borderRadiusNone: 0; --borderRadiusSmall: 2px; --borderRadiusMedium: 4px; --borderRadiusLarge: 6px; --borderRadiusXLarge: 8px; --borderRadiusCircular: 10000px; --fontSizeBase100: 10px; --fontSizeBase200: 12px; --fontSizeBase300: 14px; --fontSizeBase400: 16px; --fontSizeBase500: 20px; --fontSizeBase600: 24px; --fontSizeHero700: 28px; --fontSizeHero800: 32px; --fontSizeHero900: 40px; --fontSizeHero1000: 68px; --lineHeightBase100: 14px; --lineHeightBase200: 16px; --lineHeightBase300: 20px; --lineHeightBase400: 22px; --lineHeightBase500: 28px; --lineHeightBase600: 32px; --lineHeightHero700: 36px; --lineHeightHero800: 40px; --lineHeightHero900: 52px; --lineHeightHero1000: 92px; --fontFamilyBase: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace; --fontFamilyNumeric: Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; --fontWeightRegular: 400; --fontWeightMedium: 500; --fontWeightSemibold: 600; --fontWeightBold: 700; --strokeWidthThin: 1px; --strokeWidthThick: 2px; --strokeWidthThicker: 3px; --strokeWidthThickest: 4px; --spacingHorizontalNone: 0; --spacingHorizontalXXS: 2px; --spacingHorizontalXS: 4px; --spacingHorizontalSNudge: 6px; --spacingHorizontalS: 8px; --spacingHorizontalMNudge: 10px; --spacingHorizontalM: 12px; --spacingHorizontalL: 16px; --spacingHorizontalXL: 20px; --spacingHorizontalXXL: 24px; --spacingHorizontalXXXL: 32px; --spacingVerticalNone: 0; --spacingVerticalXXS: 2px; --spacingVerticalXS: 4px; --spacingVerticalSNudge: 6px; --spacingVerticalS: 8px; --spacingVerticalMNudge: 10px; --spacingVerticalM: 12px; --spacingVerticalL: 16px; --spacingVerticalXL: 20px; --spacingVerticalXXL: 24px; --spacingVerticalXXXL: 32px; --durationUltraFast: 50ms; --durationFaster: 100ms; --durationFast: 150ms; --durationNormal: 200ms; --durationGentle: 250ms; --durationSlow: 300ms; --durationSlower: 400ms; --durationUltraSlow: 500ms; --curveAccelerateMax: cubic-bezier(0.9,0.1,1,0.2); --curveAccelerateMid: cubic-bezier(1,0,1,1); --curveAccelerateMin: cubic-bezier(0.8,0,0.78,1); --curveDecelerateMax: cubic-bezier(0.1,0.9,0.2,1); --curveDecelerateMid: cubic-bezier(0,0,0,1); --curveDecelerateMin: cubic-bezier(0.33,0,0.1,1); --curveEasyEaseMax: cubic-bezier(0.8,0,0.2,1); --curveEasyEase: cubic-bezier(0.33,0,0.67,1); --curveLinear: cubic-bezier(0,0,1,1); --colorNeutralForeground1: #242424; --colorNeutralForeground1Hover: #242424; --colorNeutralForeground1Pressed: #242424; --colorNeutralForeground1Selected: #242424; --colorNeutralForeground2: #424242; --colorNeutralForeground2Hover: #242424; --colorNeutralForeground2Pressed: #242424; --colorNeutralForeground2Selected: #242424; --colorNeutralForeground2BrandHover: #0f6cbd; --colorNeutralForeground2BrandPressed: #115ea3; --colorNeutralForeground2BrandSelected: #0f6cbd; --colorNeutralForeground3: #616161; --colorNeutralForeground3Hover: #424242; --colorNeutralForeground3Pressed: #424242; --colorNeutralForeground3Selected: #424242; --colorNeutralForeground3BrandHover: #0f6cbd; --colorNeutralForeground3BrandPressed: #115ea3; --colorNeutralForeground3BrandSelected: #0f6cbd; --colorNeutralForeground4: #707070; --colorNeutralForegroundDisabled: #bdbdbd; --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, 0.4); --colorBrandForegroundLink: #115ea3; --colorBrandForegroundLinkHover: #0f548c; --colorBrandForegroundLinkPressed: #0c3b5e; --colorBrandForegroundLinkSelected: #115ea3; --colorNeutralForeground2Link: #424242; --colorNeutralForeground2LinkHover: #242424; --colorNeutralForeground2LinkPressed: #242424; --colorNeutralForeground2LinkSelected: #242424; --colorCompoundBrandForeground1: #0f6cbd; --colorCompoundBrandForeground1Hover: #115ea3; --colorCompoundBrandForeground1Pressed: #0f548c; --colorBrandForeground1: #0f6cbd; --colorBrandForeground2: #115ea3; --colorBrandForeground2Hover: #0f548c; --colorBrandForeground2Pressed: #0a2e4a; --colorNeutralForeground1Static: #242424; --colorNeutralForegroundStaticInverted: #ffffff; --colorNeutralForegroundInverted: #ffffff; --colorNeutralForegroundInvertedHover: #ffffff; --colorNeutralForegroundInvertedPressed: #ffffff; --colorNeutralForegroundInvertedSelected: #ffffff; --colorNeutralForegroundInverted2: #ffffff; --colorNeutralForegroundOnBrand: #ffffff; --colorNeutralForegroundInvertedLink: #ffffff; --colorNeutralForegroundInvertedLinkHover: #ffffff; --colorNeutralForegroundInvertedLinkPressed: #ffffff; --colorNeutralForegroundInvertedLinkSelected: #ffffff; --colorBrandForegroundInverted: #479ef5; --colorBrandForegroundInvertedHover: #62abf5; --colorBrandForegroundInvertedPressed: #479ef5; --colorBrandForegroundOnLight: #0f6cbd; --colorBrandForegroundOnLightHover: #115ea3; --colorBrandForegroundOnLightPressed: #0e4775; --colorBrandForegroundOnLightSelected: #0f548c; --colorNeutralBackground1: #ffffff; --colorNeutralBackground1Hover: #f5f5f5; --colorNeutralBackground1Pressed: #e0e0e0; --colorNeutralBackground1Selected: #ebebeb; --colorNeutralBackground2: #fafafa; --colorNeutralBackground2Hover: #f0f0f0; --colorNeutralBackground2Pressed: #dbdbdb; --colorNeutralBackground2Selected: #e6e6e6; --colorNeutralBackground3: #f5f5f5; --colorNeutralBackground3Hover: #ebebeb; --colorNeutralBackground3Pressed: #d6d6d6; --colorNeutralBackground3Selected: #e0e0e0; --colorNeutralBackground4: #f0f0f0; --colorNeutralBackground4Hover: #fafafa; --colorNeutralBackground4Pressed: #f5f5f5; --colorNeutralBackground4Selected: #ffffff; --colorNeutralBackground5: #ebebeb; --colorNeutralBackground5Hover: #f5f5f5; --colorNeutralBackground5Pressed: #f0f0f0; --colorNeutralBackground5Selected: #fafafa; --colorNeutralBackground6: #e6e6e6; --colorNeutralBackgroundInverted: #292929; --colorNeutralBackgroundStatic: #333333; --colorNeutralBackgroundAlpha: rgba(255, 255, 255, 0.5); --colorNeutralBackgroundAlpha2: rgba(255, 255, 255, 0.8); --colorSubtleBackground: transparent; --colorSubtleBackgroundHover: #f5f5f5; --colorSubtleBackgroundPressed: #e0e0e0; --colorSubtleBackgroundSelected: #ebebeb; --colorSubtleBackgroundLightAlphaHover: rgba(255, 255, 255, 0.7); --colorSubtleBackgroundLightAlphaPressed: rgba(255, 255, 255, 0.5); --colorSubtleBackgroundLightAlphaSelected: transparent; --colorSubtleBackgroundInverted: transparent; --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, 0.1); --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, 0.3); --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, 0.2); --colorTransparentBackground: transparent; --colorTransparentBackgroundHover: transparent; --colorTransparentBackgroundPressed: transparent; --colorTransparentBackgroundSelected: transparent; --colorNeutralBackgroundDisabled: #f0f0f0; --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, 0.1); --colorNeutralStencil1: #e6e6e6; --colorNeutralStencil2: #fafafa; --colorNeutralStencil1Alpha: rgba(0, 0, 0, 0.1); --colorNeutralStencil2Alpha: rgba(0, 0, 0, 0.05); --colorBackgroundOverlay: rgba(0, 0, 0, 0.4); --colorScrollbarOverlay: rgba(0, 0, 0, 0.5); --colorBrandBackground: #0f6cbd; --colorBrandBackgroundHover: #115ea3; --colorBrandBackgroundPressed: #0c3b5e; --colorBrandBackgroundSelected: #0f548c; --colorCompoundBrandBackground: #0f6cbd; --colorCompoundBrandBackgroundHover: #115ea3; --colorCompoundBrandBackgroundPressed: #0f548c; --colorBrandBackgroundStatic: #0f6cbd; --colorBrandBackground2: #ebf3fc; --colorBrandBackground2Hover: #cfe4fa; --colorBrandBackground2Pressed: #96c6fa; --colorBrandBackground3Static: #0f548c; --colorBrandBackground4Static: #0c3b5e; --colorBrandBackgroundInverted: #ffffff; --colorBrandBackgroundInvertedHover: #ebf3fc; --colorBrandBackgroundInvertedPressed: #b4d6fa; --colorBrandBackgroundInvertedSelected: #cfe4fa; --colorNeutralCardBackground: #fafafa; --colorNeutralCardBackgroundHover: #ffffff; --colorNeutralCardBackgroundPressed: #f5f5f5; --colorNeutralCardBackgroundSelected: #ebebeb; --colorNeutralCardBackgroundDisabled: #f0f0f0; --colorNeutralStrokeAccessible: #616161; --colorNeutralStrokeAccessibleHover: #575757; --colorNeutralStrokeAccessiblePressed: #4d4d4d; --colorNeutralStrokeAccessibleSelected: #0f6cbd; --colorNeutralStroke1: #d1d1d1; --colorNeutralStroke1Hover: #c7c7c7; --colorNeutralStroke1Pressed: #b3b3b3; --colorNeutralStroke1Selected: #bdbdbd; --colorNeutralStroke2: #e0e0e0; --colorNeutralStroke3: #f0f0f0; --colorNeutralStrokeSubtle: #e0e0e0; --colorNeutralStrokeOnBrand: #ffffff; --colorNeutralStrokeOnBrand2: #ffffff; --colorNeutralStrokeOnBrand2Hover: #ffffff; --colorNeutralStrokeOnBrand2Pressed: #ffffff; --colorNeutralStrokeOnBrand2Selected: #ffffff; --colorBrandStroke1: #0f6cbd; --colorBrandStroke2: #b4d6fa; --colorBrandStroke2Hover: #77b7f7; --colorBrandStroke2Pressed: #0f6cbd; --colorBrandStroke2Contrast: #b4d6fa; --colorCompoundBrandStroke: #0f6cbd; --colorCompoundBrandStrokeHover: #115ea3; --colorCompoundBrandStrokePressed: #0f548c; --colorNeutralStrokeDisabled: #e0e0e0; --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, 0.4); --colorTransparentStroke: transparent; --colorTransparentStrokeInteractive: transparent; --colorTransparentStrokeDisabled: transparent; --colorNeutralStrokeAlpha: rgba(0, 0, 0, 0.05); --colorNeutralStrokeAlpha2: rgba(255, 255, 255, 0.2); --colorStrokeFocus1: #ffffff; --colorStrokeFocus2: #000000; --colorNeutralShadowAmbient: rgba(0,0,0,0.12); --colorNeutralShadowKey: rgba(0,0,0,0.14); --colorNeutralShadowAmbientLighter: rgba(0,0,0,0.06); --colorNeutralShadowKeyLighter: rgba(0,0,0,0.07); --colorNeutralShadowAmbientDarker: rgba(0,0,0,0.20); --colorNeutralShadowKeyDarker: rgba(0,0,0,0.24); --colorBrandShadowAmbient: rgba(0,0,0,0.30); --colorBrandShadowKey: rgba(0,0,0,0.25); --colorPaletteRedBackground1: #fdf6f6; --colorPaletteRedBackground2: #f1bbbc; --colorPaletteRedBackground3: #d13438; --colorPaletteRedForeground1: #bc2f32; --colorPaletteRedForeground2: #751d1f; --colorPaletteRedForeground3: #d13438; --colorPaletteRedBorderActive: #d13438; --colorPaletteRedBorder1: #f1bbbc; --colorPaletteRedBorder2: #d13438; --colorPaletteGreenBackground1: #f1faf1; --colorPaletteGreenBackground2: #9fd89f; --colorPaletteGreenBackground3: #107c10; --colorPaletteGreenForeground1: #0e700e; --colorPaletteGreenForeground2: #094509; --colorPaletteGreenForeground3: #107c10; --colorPaletteGreenBorderActive: #107c10; --colorPaletteGreenBorder1: #9fd89f; --colorPaletteGreenBorder2: #107c10; --colorPaletteDarkOrangeBackground1: #fdf6f3; --colorPaletteDarkOrangeBackground2: #f4bfab; --colorPaletteDarkOrangeBackground3: #da3b01; --colorPaletteDarkOrangeForeground1: #c43501; --colorPaletteDarkOrangeForeground2: #7a2101; --colorPaletteDarkOrangeForeground3: #da3b01; --colorPaletteDarkOrangeBorderActive: #da3b01; --colorPaletteDarkOrangeBorder1: #f4bfab; --colorPaletteDarkOrangeBorder2: #da3b01; --colorPaletteYellowBackground1: #fffef5; --colorPaletteYellowBackground2: #fef7b2; --colorPaletteYellowBackground3: #fde300; --colorPaletteYellowForeground1: #817400; --colorPaletteYellowForeground2: #817400; --colorPaletteYellowForeground3: #fde300; --colorPaletteYellowBorderActive: #fde300; --colorPaletteYellowBorder1: #fef7b2; --colorPaletteYellowBorder2: #fde300; --colorPaletteBerryBackground1: #fdf5fc; --colorPaletteBerryBackground2: #edbbe7; --colorPaletteBerryBackground3: #c239b3; --colorPaletteBerryForeground1: #af33a1; --colorPaletteBerryForeground2: #6d2064; --colorPaletteBerryForeground3: #c239b3; --colorPaletteBerryBorderActive: #c239b3; --colorPaletteBerryBorder1: #edbbe7; --colorPaletteBerryBorder2: #c239b3; --colorPaletteLightGreenBackground1: #f2fbf2; --colorPaletteLightGreenBackground2: #a7e3a5; --colorPaletteLightGreenBackground3: #13a10e; --colorPaletteLightGreenForeground1: #11910d; --colorPaletteLightGreenForeground2: #0b5a08; --colorPaletteLightGreenForeground3: #13a10e; --colorPaletteLightGreenBorderActive: #13a10e; --colorPaletteLightGreenBorder1: #a7e3a5; --colorPaletteLightGreenBorder2: #13a10e; --colorPaletteMarigoldBackground1: #fefbf4; --colorPaletteMarigoldBackground2: #f9e2ae; --colorPaletteMarigoldBackground3: #eaa300; --colorPaletteMarigoldForeground1: #d39300; --colorPaletteMarigoldForeground2: #835b00; --colorPaletteMarigoldForeground3: #eaa300; --colorPaletteMarigoldBorderActive: #eaa300; --colorPaletteMarigoldBorder1: #f9e2ae; --colorPaletteMarigoldBorder2: #eaa300; --colorPaletteRedForegroundInverted: #dc5e62; --colorPaletteGreenForegroundInverted: #359b35; --colorPaletteYellowForegroundInverted: #fef7b2; --colorPaletteDarkRedBackground2: #d69ca5; --colorPaletteDarkRedForeground2: #420610; --colorPaletteDarkRedBorderActive: #750b1c; --colorPaletteCranberryBackground2: #eeacb2; --colorPaletteCranberryForeground2: #6e0811; --colorPaletteCranberryBorderActive: #c50f1f; --colorPalettePumpkinBackground2: #efc4ad; --colorPalettePumpkinForeground2: #712d09; --colorPalettePumpkinBorderActive: #ca5010; --colorPalettePeachBackground2: #ffddb3; --colorPalettePeachForeground2: #8f4e00; --colorPalettePeachBorderActive: #ff8c00; --colorPaletteGoldBackground2: #ecdfa5; --colorPaletteGoldForeground2: #6c5700; --colorPaletteGoldBorderActive: #c19c00; --colorPaletteBrassBackground2: #e0cea2; --colorPaletteBrassForeground2: #553e06; --colorPaletteBrassBorderActive: #986f0b; --colorPaletteBrownBackground2: #ddc3b0; --colorPaletteBrownForeground2: #50301a; --colorPaletteBrownBorderActive: #8e562e; --colorPaletteForestBackground2: #bdd99b; --colorPaletteForestForeground2: #294903; --colorPaletteForestBorderActive: #498205; --colorPaletteSeafoamBackground2: #a8f0cd; --colorPaletteSeafoamForeground2: #00723b; --colorPaletteSeafoamBorderActive: #00cc6a; --colorPaletteDarkGreenBackground2: #9ad29a; --colorPaletteDarkGreenForeground2: #063b06; --colorPaletteDarkGreenBorderActive: #0b6a0b; --colorPaletteLightTealBackground2: #a6e9ed; --colorPaletteLightTealForeground2: #00666d; --colorPaletteLightTealBorderActive: #00b7c3; --colorPaletteTealBackground2: #9bd9db; --colorPaletteTealForeground2: #02494c; --colorPaletteTealBorderActive: #038387; --colorPaletteSteelBackground2: #94c8d4; --colorPaletteSteelForeground2: #00333f; --colorPaletteSteelBorderActive: #005b70; --colorPaletteBlueBackground2: #a9d3f2; --colorPaletteBlueForeground2: #004377; --colorPaletteBlueBorderActive: #0078d4; --colorPaletteRoyalBlueBackground2: #9abfdc; --colorPaletteRoyalBlueForeground2: #002c4e; --colorPaletteRoyalBlueBorderActive: #004e8c; --colorPaletteCornflowerBackground2: #c8d1fa; --colorPaletteCornflowerForeground2: #2c3c85; --colorPaletteCornflowerBorderActive: #4f6bed; --colorPaletteNavyBackground2: #a3b2e8; --colorPaletteNavyForeground2: #001665; --colorPaletteNavyBorderActive: #0027b4; --colorPaletteLavenderBackground2: #d2ccf8; --colorPaletteLavenderForeground2: #3f3682; --colorPaletteLavenderBorderActive: #7160e8; --colorPalettePurpleBackground2: #c6b1de; --colorPalettePurpleForeground2: #341a51; --colorPalettePurpleBorderActive: #5c2e91; --colorPaletteGrapeBackground2: #d9a7e0; --colorPaletteGrapeForeground2: #4c0d55; --colorPaletteGrapeBorderActive: #881798; --colorPaletteLilacBackground2: #e6bfed; --colorPaletteLilacForeground2: #63276d; --colorPaletteLilacBorderActive: #b146c2; --colorPalettePinkBackground2: #f7c0e3; --colorPalettePinkForeground2: #80215d; --colorPalettePinkBorderActive: #e43ba6; --colorPaletteMagentaBackground2: #eca5d1; --colorPaletteMagentaForeground2: #6b0043; --colorPaletteMagentaBorderActive: #bf0077; --colorPalettePlumBackground2: #d696c0; --colorPalettePlumForeground2: #43002b; --colorPalettePlumBorderActive: #77004d; --colorPaletteBeigeBackground2: #d7d4d4; --colorPaletteBeigeForeground2: #444241; --colorPaletteBeigeBorderActive: #7a7574; --colorPaletteMinkBackground2: #cecccb; --colorPaletteMinkForeground2: #343231; --colorPaletteMinkBorderActive: #5d5a58; --colorPalettePlatinumBackground2: #cdd6d8; --colorPalettePlatinumForeground2: #3b4447; --colorPalettePlatinumBorderActive: #69797e; --colorPaletteAnchorBackground2: #bcc3c7; --colorPaletteAnchorForeground2: #202427; --colorPaletteAnchorBorderActive: #394146; --colorStatusSuccessBackground1: #f1faf1; --colorStatusSuccessBackground2: #9fd89f; --colorStatusSuccessBackground3: #107c10; --colorStatusSuccessForeground1: #0e700e; --colorStatusSuccessForeground2: #094509; --colorStatusSuccessForeground3: #107c10; --colorStatusSuccessForegroundInverted: #54b054; --colorStatusSuccessBorderActive: #107c10; --colorStatusSuccessBorder1: #9fd89f; --colorStatusSuccessBorder2: #107c10; --colorStatusWarningBackground1: #fff9f5; --colorStatusWarningBackground2: #fdcfb4; --colorStatusWarningBackground3: #f7630c; --colorStatusWarningForeground1: #bc4b09; --colorStatusWarningForeground2: #8a3707; --colorStatusWarningForeground3: #bc4b09; --colorStatusWarningForegroundInverted: #faa06b; --colorStatusWarningBorderActive: #f7630c; --colorStatusWarningBorder1: #fdcfb4; --colorStatusWarningBorder2: #bc4b09; --colorStatusDangerBackground1: #fdf3f4; --colorStatusDangerBackground2: #eeacb2; --colorStatusDangerBackground3: #c50f1f; --colorStatusDangerForeground1: #b10e1c; --colorStatusDangerForeground2: #6e0811; --colorStatusDangerForeground3: #c50f1f; --colorStatusDangerForegroundInverted: #dc626d; --colorStatusDangerBorderActive: #c50f1f; --colorStatusDangerBorder1: #eeacb2; --colorStatusDangerBorder2: #c50f1f; --colorStatusDangerBackground3Hover: #b10e1c; --colorStatusDangerBackground3Pressed: #960b18; --shadow2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); --shadow4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14); --shadow8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14); --shadow16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14); --shadow28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14); --shadow64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14); --shadow2Brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); --shadow4Brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); --shadow8Brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); --shadow16Brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); --shadow28Brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); --shadow64Brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); } :root { --borderRadiusPill: 50rem; --fontWeightLight: 300; --strokeWidthNone: 0px; --strokeWidthMax: 5px; --zIndexITableFixed: 10; --zIndexITableFixed2: 11; --zIndexInputBefore: 10; --zIndexInput: 20; --zIndexInputAfter: 30; --zIndexNavigation: 1000; --zIndexDropdown: 1010; --zIndexSticky: 1020; --zIndexFixed: 1030; --zIndexDrawerBackdrop: 1040; --zIndexDrawer: 1045; --zIndexModalBackdrop: 1050; --zIndexModal: 1055; --zIndexPopover: 1060; --zIndexTooltip: 1070; --b-bar-horizontal-height: 60px; } .fui-Accordion .fui-AccordionItem .fui-AccordionHeader { margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); background-color: var(--colorTransparentBackground); color: var(--colorNeutralForeground1); } .fui-Accordion .fui-AccordionItem .fui-AccordionHeader .fui-AccordionHeader__button { box-sizing: border-box; min-height: 44px; padding-left: var(--spacingHorizontalMNudge); padding-right: var(--spacingHorizontalM); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; position: relative; text-align: unset; appearance: button; padding-bottom: 0px; padding-top: 0px; overflow-y: visible; overflow-x: visible; color: inherit; background-color: inherit; cursor: pointer; width: 100%; align-items: center; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; display: flex; line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); } .fui-Accordion .fui-AccordionItem .fui-AccordionHeader .fui-AccordionHeader__button .fui-AccordionHeader__expandIcon { height: 100%; font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); align-items: center; padding-right: var(--spacingHorizontalS); display: flex; } .fui-Accordion .fui-AccordionItem .fui-AccordionHeader .fui-AccordionHeader__button .fui-AccordionHeader__expandIcon > svg { display: inline; line-height: 0; transition: transform var(--durationGentle) ease-out; } .fui-Accordion .fui-AccordionItem .fui-AccordionHeader .fui-AccordionHeader__button[aria-expanded=true] .fui-AccordionHeader__expandIcon > svg { transform: rotate(90deg); } .fui-Accordion .fui-AccordionItem .fui-AccordionPanel { display: grid; grid-template-rows: 0fr; transition: var(--durationGentle) grid-template-rows ease; margin-left: var(--spacingHorizontalM); margin-right: var(--spacingHorizontalM); margin-bottom: 0px; margin-top: 0px; } .fui-Accordion .fui-AccordionItem .fui-AccordionPanel .fui-AccordionPanel__content { overflow: hidden; } .fui-Accordion .fui-AccordionItem-active .fui-AccordionPanel { grid-template-rows: 1fr; } .fui-Input .fui-Input__contentBefore, .fui-Input .fui-Input__contentAfter { box-sizing: border-box; color: var(--colorNeutralForeground3); display: flex; } .fui-Input .fui-Input__contentBefore button.fui-Button, .fui-Input .fui-Input__contentAfter button.fui-Button { background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); border: none; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase300); cursor: pointer; } .fui-Input .fui-Input__contentBefore button.fui-Button:hover, .fui-Input .fui-Input__contentAfter button.fui-Button:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-primary:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-primary:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-secondary:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-secondary:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-success:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-success:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-danger:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-danger:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-warning:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-warning:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-info:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-info:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-light:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-light:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-dark:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-dark:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__contentBefore button.fui-Button-link:hover, .fui-Input .fui-Input__contentAfter button.fui-Button-link:hover { background-color: var(--colorTransparentBackgroundHover); color: var(--colorNeutralForeground2BrandHover); } .fui-Input .fui-Input__content { flex-wrap: nowrap; position: relative; box-sizing: border-box; align-items: center; display: flex; font-family: var(--fontFamilyBase); flex-grow: 1; } .fui-Input .fui-Input__content .fui-Select__select, .fui-Input .fui-Input__content .fui-Select__select:focus { border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } @keyframes alert-slide-away { from { display: block; } to { transform: translateY(-1rem); opacity: 0; } } .fui-MessageBar { position: relative; align-items: center; padding-left: var(--spacingHorizontalM); padding-right: var(--spacingHorizontalM); padding-top: var(--spacingVerticalS); padding-bottom: var(--spacingVerticalS); border-top-width: var(--strokeWidthThin); border-right-width: var(--strokeWidthThin); border-bottom-width: var(--strokeWidthThin); border-left-width: var(--strokeWidthThin); border-style: solid; border-top-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-bottom-color: var(--colorNeutralStroke1); border-left-color: var(--colorNeutralStroke1); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-top-left-radius: var(--borderRadiusMedium); min-height: 36px; box-sizing: border-box; background-color: var(--colorNeutralBackground3); margin-bottom: var(--spacingVerticalM); } .fui-MessageBar-closable { padding-right: 4rem; } .fui-MessageBar.fui-Display-none { animation: alert-slide-away var(--durationNormal); } .fui-MessageBar .fui-MessageBar__description { display: inline-flex; align-items: center; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase300); padding-right: var(--spacingHorizontalS); } .fui-MessageBar .fui-MessageBar__message { display: inline-flex; align-items: center; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase300); padding-right: var(--spacingHorizontalS); } .fui-MessageBar .fui-MessageBar__title { font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase300); } .fui-MessageBar .fui-MessageBar__icon { font-size: var(--fontSizeBase500); margin-right: var(--spacingHorizontalS); color: var(--colorNeutralForeground3); display: inline-flex; align-items: center; } .fui-MessageBar .fui-MessageBarActions { display: flex; column-gap: var(--spacingHorizontalM); padding-right: var(--spacingHorizontalM); } .fui-MessageBar .fui-MessageBarActions__containerAction { padding-right: var(--spacingHorizontalM); position: absolute; top: var(--spacingVerticalS); right: 0; } .fui-MessageBar-primary { border-bottom-color: var(--colorBrandStroke2); border-left-color: var(--colorBrandStroke2); border-right-color: var(--colorBrandStroke2); border-top-color: var(--colorBrandStroke2); background-color: var(--colorBrandBackground2); } .fui-MessageBar-primary .fui-MessageBar__icon { color: var(--colorBrandForeground2); } .fui-MessageBar-secondary { border-bottom-color: var(--colorNeutralStroke1); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); background-color: var(--colorNeutralBackground3); } .fui-MessageBar-secondary .fui-MessageBar__icon { color: var(--colorNeutralForeground3); } .fui-MessageBar-success { border-bottom-color: var(--colorStatusSuccessBorder1); border-left-color: var(--colorStatusSuccessBorder1); border-right-color: var(--colorStatusSuccessBorder1); border-top-color: var(--colorStatusSuccessBorder1); background-color: var(--colorStatusSuccessBackground1); } .fui-MessageBar-success .fui-MessageBar__icon { color: var(--colorStatusSuccessForeground1); } .fui-MessageBar-danger { border-bottom-color: var(--colorStatusDangerBorder1); border-left-color: var(--colorStatusDangerBorder1); border-right-color: var(--colorStatusDangerBorder1); border-top-color: var(--colorStatusDangerBorder1); background-color: var(--colorStatusDangerBackground1); } .fui-MessageBar-danger .fui-MessageBar__icon { color: var(--colorStatusDangerForeground1); } .fui-MessageBar-warning { border-bottom-color: var(--colorStatusWarningBorder1); border-left-color: var(--colorStatusWarningBorder1); border-right-color: var(--colorStatusWarningBorder1); border-top-color: var(--colorStatusWarningBorder1); background-color: var(--colorStatusWarningBackground1); } .fui-MessageBar-warning .fui-MessageBar__icon { color: var(--colorStatusWarningForeground3); } .fui-MessageBar-light { border-bottom-color: var(--colorNeutralStroke1); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); background-color: var(--colorNeutralBackground1); } .fui-MessageBar-dark { border-bottom-color: var(--colorNeutralStroke2); border-left-color: var(--colorNeutralStroke2); border-right-color: var(--colorNeutralStroke2); border-top-color: var(--colorNeutralStroke2); background-color: var(--colorNeutralForeground3); color: var(--colorNeutralBackground1); } .fui-MessageBar-dark .fui-MessageBar__icon { color: var(--colorNeutralBackground1); } .fui-MessageBar-link { border-top-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-bottom-color: var(--colorTransparentStroke); border-left-color: var(--colorTransparentStroke); background-color: var(--colorTransparentBackground); color: var(--colorBrandForegroundLink); } .fui-MessageBar-link .fui-MessageBar__icon { color: var(--colorBrandForegroundLink); } .fui-Badge { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; position: relative; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase200); height: 20px; width: 20px; min-width: max-content; padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS)); border-radius: var(--borderRadiusMedium); border-color: var(--colorTransparentStroke); } .fui-Badge-primary { background-color: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); } .fui-Badge-secondary { background-color: var(--colorNeutralBackground3); color: var(--colorNeutralForeground3); } .fui-Badge-success { background-color: var(--colorPaletteGreenBackground3); color: var(--colorNeutralForegroundOnBrand); } .fui-Badge-danger { background-color: var(--colorPaletteRedBackground3); color: var(--colorNeutralForegroundOnBrand); } .fui-Badge-warning { background-color: var(--colorStatusWarningBackground3); color: var(--colorNeutralForegroundInverted); } .fui-Badge-info { background-color: var(--colorNeutralBackground5); color: var(--colorNeutralForeground3); } .fui-Badge-light { background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); } .fui-Badge-dark { background-color: var(--colorNeutralForeground1); color: var(--colorNeutralBackground1); } .fui-Badge-pill { border-radius: var(--borderRadiusCircular); } .fui-Badge__close { cursor: pointer; } .fui-NavigationBar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--spacingVerticalS) var(--spacingHorizontalS); z-index: var(--zIndexNavigation); /*.fui-NavigationBar__link, .fui-NavigationBar__dropdown-toggle { padding-right: 0; padding-left: 0; }*/ } .fui-NavigationBar .fui-Container, .fui-NavigationBar .fui-Container-fluid, .fui-NavigationBar .fui-Container-xxl, .fui-NavigationBar .fui-Container-xl, .fui-NavigationBar .fui-Container-lg, .fui-NavigationBar .fui-Container-md, .fui-NavigationBar .fui-Container-sm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .fui-NavigationBar .fui-NavigationBar__start, .fui-NavigationBar .fui-NavigationBar__end { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; } .fui-NavigationBar .fui-NavigationBar__dropdown { position: relative; } .fui-NavigationBar .fui-NavigationBar__dropdown.fui-NavigationBar__dropdown-show > .fui-NavigationBar__dropdown-toggle > .fui-NavigationBar__toggleIcon > svg { transform: rotate(180deg); } .fui-NavigationBar .fui-NavigationBar__dropdown { position: relative; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu { --fui-positioning-slide-distance-y: -10px; --fui-positioning-slide-distance-x: 0px; position: absolute; top: 100%; left: 0; animation-name: fadein, slidein; animation-timing-function: var(--curveDecelerateMid); animation-duration: var(--durationSlower); animation-composition: accumulate; padding-bottom: 4px; box-shadow: var(--shadow16); width: max-content; min-width: 100px; padding-top: 4px; border-bottom-color: var(--colorTransparentStroke); border-left-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-top-color: var(--colorTransparentStroke); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; box-sizing: border-box; padding-right: 4px; padding-left: 4px; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); display: none; z-index: var(--zIndexDropdown); } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu-up { --fui-positioning-slide-distance-y: 10px; --fui-positioning-slide-distance-x: 0px; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu-start { --fui-positioning-slide-distance-y: 0px; --fui-positioning-slide-distance-x: 10px; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu-end { --fui-positioning-slide-distance-y: 0px; --fui-positioning-slide-distance-x: -10px; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu-show { display: flex; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu-position-strategy { z-index: calc(var(--zIndexDropdown) + 1); } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu-position-strategy-absolute { position: absolute; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu-position-strategy-fixed { position: fixed; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu.fui-NavigationBar__dropdown-right { right: 0; left: auto; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list { width: 100%; height: 100%; row-gap: 2px; column-gap: 2px; flex-direction: column; display: flex; z-index: 1; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-group { padding-bottom: var(--spacingHorizontalS); padding-top: var(--spacingHorizontalS); color: var(--colorNeutralForeground3); display: block; padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase200); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase200); } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-divider { margin-top: var(--spacingVerticalXXS); margin-bottom: var(--spacingVerticalXXS); margin-left: calc(var(--spacingHorizontalXS) * -1); margin-right: calc(var(--spacingHorizontalXS) * -1); display: block; border-bottom-color: var(--colorNeutralStroke2); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-item { width: 100%; border-radius: var(--borderRadiusMedium); position: relative; color: var(--colorNeutralForeground2); background-color: var(--colorNeutralBackground1); padding-right: var(--spacingVerticalSNudge); padding-left: var(--spacingVerticalSNudge); padding-top: var(--spacingVerticalSNudge); box-sizing: border-box; max-width: 290px; min-height: 32px; flex-shrink: 0; display: flex; align-items: start; justify-content: space-between; font-size: var(--fontSizeBase300); cursor: pointer; gap: 4px; user-select: none; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-item[aria-disabled=true] { color: var(--colorNeutralForegroundDisabled); } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-item[aria-disabled=true] .fui-NavigationBar__dropdown-item__content { color: var(--colorNeutralForegroundDisabled); } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-item:not([aria-disabled=true]):focus, .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-item:not([aria-disabled=true]):focus-visible { outline-style: none; } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-item:not([aria-disabled=true]):hover { background-color: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground2Hover); } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-item:not([aria-disabled=true]):hover:active { background-color: var(--colorNeutralBackground1Pressed); color: var(--colorNeutralForeground2Pressed); } .fui-NavigationBar .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-menu .fui-NavigationBar__dropdown-menu-list .fui-NavigationBar__dropdown-item .fui-NavigationBar__dropdown-item__content { padding-left: 2px; padding-right: 2px; background-color: transparent; flex-grow: 1; } .fui-NavigationBar .fui-NavigationBar__start { margin-right: auto; } .fui-NavigationBar .fui-NavigationBar__end { margin-left: auto; } .fui-NavigationBar .fui-NavigationBar__menu { flex-basis: 100%; flex-grow: 1; align-items: center; } .fui-NavigationBar__toggler { padding: var(--spacingVerticalS) var(--spacingHorizontalS); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); background-color: transparent; } .fui-NavigationBar__toggler:hover, .fui-NavigationBar__toggler:focus { text-decoration: none; } .fui-NavigationBar__menu:not(.fui-NavigationBar__menu-show) { display: none; } .fui-NavigationBar__dropdown-menu { position: absolute; } .fui-NavigationBar__item, .fui-NavigationBar__dropdown { display: flex; align-items: center; justify-content: flex-start; color: var(--colorNeutralForeground2); box-sizing: border-box; text-wrap: nowrap; width: 100%; } .fui-NavigationBar__item .fui-NavigationBar__link:hover, .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover, .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover, .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover { color: var(--colorNeutralForeground2Hover); background-color: var(--colorSubtleBackgroundHover); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Hover); /*border-color: var(--colorNeutralStroke1Hover);*/ color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-NavigationBar__item .fui-NavigationBar__link:hover:active, .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover:active, .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover:active, .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover:active { color: var(--colorNeutralForeground2Pressed); background-color: var(--colorSubtleBackgroundPressed); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Pressed); /*border-color: var(--colorNeutralStroke1Pressed);*/ color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active, .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active { font-weight: var(--fontWeightSemibold); } .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover, .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active, .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; outline-style: none; } .fui-NavigationBar__brand { display: inline-block; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); /*margin-right: var(--spacingHorizontalS);*/ font-size: var(--fontSizeBase400); line-height: inherit; white-space: nowrap; } .fui-NavigationBar__brand .fui-NavigationBar__item .fui-Link.fui-NavigationBar__link { font-size: inherit; cursor: pointer; } .fui-NavigationBar__brand:hover, .fui-NavigationBar__brand:focus { text-decoration: none; } .fui-Link.fui-NavigationBar__link, .fui-NavigationBar__dropdown-toggle { align-items: center; background-color: var(--colorSubtleBackground); border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--borderRadiusMedium); border-right-color: transparent; border-top-color: transparent; box-sizing: border-box; color: var(--colorNeutralForeground2); display: inline-flex; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 32px; justify-content: center; line-height: var(--lineHeightBase300); margin: 0px; min-width: unset; outline-style: none; overflow: hidden; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); text-decoration-line: none; text-wrap: nowrap; transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); vertical-align: middle; } @media (max-width: 599.98px) { .fui-NavigationBar-expand-sm > .fui-Container-xxl, .fui-NavigationBar-expand-sm > .fui-Container-xl, .fui-NavigationBar-expand-sm > .fui-Container-lg, .fui-NavigationBar-expand-sm > .fui-Container-md, .fui-NavigationBar-expand-sm > .fui-Container-sm, .fui-NavigationBar-expand-sm > .fui-Container, .fui-NavigationBar-expand-sm > .fui-Container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 600px) { .fui-NavigationBar-expand-sm { flex-flow: row nowrap; justify-content: flex-start; } .fui-NavigationBar-expand-sm .fui-NavigationBar__start, .fui-NavigationBar-expand-sm .fui-NavigationBar__end { flex-direction: row; } .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown-menu { position: absolute; } .fui-NavigationBar-expand-sm .fui-NavigationBar__item, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown { display: flex; align-items: center; color: var(--colorNeutralForeground2); box-sizing: border-box; text-wrap: nowrap; } .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover { color: var(--colorNeutralForeground2Hover); background-color: var(--colorSubtleBackgroundHover); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Hover); /*border-color: var(--colorNeutralStroke1Hover);*/ color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover:active, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover:active { color: var(--colorNeutralForeground2Pressed); background-color: var(--colorSubtleBackgroundPressed); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Pressed); /*border-color: var(--colorNeutralStroke1Pressed);*/ color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active { font-weight: var(--fontWeightSemibold); } .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-sm .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; outline-style: none; } .fui-NavigationBar-expand-sm .fui-NavigationBar__brand { display: inline-block; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); /*margin-right: var(--spacingHorizontalS);*/ font-size: var(--fontSizeBase400); line-height: inherit; white-space: nowrap; } .fui-NavigationBar-expand-sm .fui-NavigationBar__brand .fui-NavigationBar__item .fui-Link.fui-NavigationBar__link { font-size: inherit; cursor: pointer; } .fui-NavigationBar-expand-sm .fui-NavigationBar__brand:hover, .fui-NavigationBar-expand-sm .fui-NavigationBar__brand:focus { text-decoration: none; } .fui-NavigationBar-expand-sm .fui-Link.fui-NavigationBar__link, .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown-toggle { align-items: center; background-color: var(--colorSubtleBackground); border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--borderRadiusMedium); border-right-color: transparent; border-top-color: transparent; box-sizing: border-box; color: var(--colorNeutralForeground2); display: inline-flex; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 32px; justify-content: center; line-height: var(--lineHeightBase300); margin: 0px; min-width: unset; outline-style: none; overflow: hidden; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); text-decoration-line: none; text-wrap: nowrap; transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); vertical-align: middle; } .fui-NavigationBar-expand-sm > .fui-Container-xxl, .fui-NavigationBar-expand-sm > .fui-Container-xl, .fui-NavigationBar-expand-sm > .fui-Container-lg, .fui-NavigationBar-expand-sm > .fui-Container-md, .fui-NavigationBar-expand-sm > .fui-Container-sm, .fui-NavigationBar-expand-sm > .fui-Container, .fui-NavigationBar-expand-sm > .fui-Container-fluid { flex-wrap: nowrap; } .fui-NavigationBar-expand-sm .fui-NavigationBar-scroll { overflow: visible; } .fui-NavigationBar-expand-sm .fui-NavigationBar__menu { display: flex !important; flex-basis: auto; } .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon { margin-left: var(--spacingHorizontalXS); width: 12px; line-height: var(--lineHeightBase200); height: 12px; font-size: 12px; } .fui-NavigationBar-expand-sm .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon > svg { display: inline; line-height: 0; } .fui-NavigationBar-expand-sm .fui-NavigationBar__toggler { display: none; } } @media (max-width: 959.98px) { .fui-NavigationBar-expand-md > .fui-Container-xxl, .fui-NavigationBar-expand-md > .fui-Container-xl, .fui-NavigationBar-expand-md > .fui-Container-lg, .fui-NavigationBar-expand-md > .fui-Container-md, .fui-NavigationBar-expand-md > .fui-Container-sm, .fui-NavigationBar-expand-md > .fui-Container, .fui-NavigationBar-expand-md > .fui-Container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 960px) { .fui-NavigationBar-expand-md { flex-flow: row nowrap; justify-content: flex-start; } .fui-NavigationBar-expand-md .fui-NavigationBar__start, .fui-NavigationBar-expand-md .fui-NavigationBar__end { flex-direction: row; } .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown-menu { position: absolute; } .fui-NavigationBar-expand-md .fui-NavigationBar__item, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown { display: flex; align-items: center; color: var(--colorNeutralForeground2); box-sizing: border-box; text-wrap: nowrap; } .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover { color: var(--colorNeutralForeground2Hover); background-color: var(--colorSubtleBackgroundHover); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Hover); /*border-color: var(--colorNeutralStroke1Hover);*/ color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover:active, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover:active { color: var(--colorNeutralForeground2Pressed); background-color: var(--colorSubtleBackgroundPressed); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Pressed); /*border-color: var(--colorNeutralStroke1Pressed);*/ color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active { font-weight: var(--fontWeightSemibold); } .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-md .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; outline-style: none; } .fui-NavigationBar-expand-md .fui-NavigationBar__brand { display: inline-block; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); /*margin-right: var(--spacingHorizontalS);*/ font-size: var(--fontSizeBase400); line-height: inherit; white-space: nowrap; } .fui-NavigationBar-expand-md .fui-NavigationBar__brand .fui-NavigationBar__item .fui-Link.fui-NavigationBar__link { font-size: inherit; cursor: pointer; } .fui-NavigationBar-expand-md .fui-NavigationBar__brand:hover, .fui-NavigationBar-expand-md .fui-NavigationBar__brand:focus { text-decoration: none; } .fui-NavigationBar-expand-md .fui-Link.fui-NavigationBar__link, .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown-toggle { align-items: center; background-color: var(--colorSubtleBackground); border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--borderRadiusMedium); border-right-color: transparent; border-top-color: transparent; box-sizing: border-box; color: var(--colorNeutralForeground2); display: inline-flex; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 32px; justify-content: center; line-height: var(--lineHeightBase300); margin: 0px; min-width: unset; outline-style: none; overflow: hidden; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); text-decoration-line: none; text-wrap: nowrap; transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); vertical-align: middle; } .fui-NavigationBar-expand-md > .fui-Container-xxl, .fui-NavigationBar-expand-md > .fui-Container-xl, .fui-NavigationBar-expand-md > .fui-Container-lg, .fui-NavigationBar-expand-md > .fui-Container-md, .fui-NavigationBar-expand-md > .fui-Container-sm, .fui-NavigationBar-expand-md > .fui-Container, .fui-NavigationBar-expand-md > .fui-Container-fluid { flex-wrap: nowrap; } .fui-NavigationBar-expand-md .fui-NavigationBar-scroll { overflow: visible; } .fui-NavigationBar-expand-md .fui-NavigationBar__menu { display: flex !important; flex-basis: auto; } .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon { margin-left: var(--spacingHorizontalXS); width: 12px; line-height: var(--lineHeightBase200); height: 12px; font-size: 12px; } .fui-NavigationBar-expand-md .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon > svg { display: inline; line-height: 0; } .fui-NavigationBar-expand-md .fui-NavigationBar__toggler { display: none; } } @media (max-width: 1279.98px) { .fui-NavigationBar-expand-lg > .fui-Container-xxl, .fui-NavigationBar-expand-lg > .fui-Container-xl, .fui-NavigationBar-expand-lg > .fui-Container-lg, .fui-NavigationBar-expand-lg > .fui-Container-md, .fui-NavigationBar-expand-lg > .fui-Container-sm, .fui-NavigationBar-expand-lg > .fui-Container, .fui-NavigationBar-expand-lg > .fui-Container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 1280px) { .fui-NavigationBar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; } .fui-NavigationBar-expand-lg .fui-NavigationBar__start, .fui-NavigationBar-expand-lg .fui-NavigationBar__end { flex-direction: row; } .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown-menu { position: absolute; } .fui-NavigationBar-expand-lg .fui-NavigationBar__item, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown { display: flex; align-items: center; color: var(--colorNeutralForeground2); box-sizing: border-box; text-wrap: nowrap; } .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover { color: var(--colorNeutralForeground2Hover); background-color: var(--colorSubtleBackgroundHover); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Hover); /*border-color: var(--colorNeutralStroke1Hover);*/ color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover:active, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover:active { color: var(--colorNeutralForeground2Pressed); background-color: var(--colorSubtleBackgroundPressed); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Pressed); /*border-color: var(--colorNeutralStroke1Pressed);*/ color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active { font-weight: var(--fontWeightSemibold); } .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-lg .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; outline-style: none; } .fui-NavigationBar-expand-lg .fui-NavigationBar__brand { display: inline-block; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); /*margin-right: var(--spacingHorizontalS);*/ font-size: var(--fontSizeBase400); line-height: inherit; white-space: nowrap; } .fui-NavigationBar-expand-lg .fui-NavigationBar__brand .fui-NavigationBar__item .fui-Link.fui-NavigationBar__link { font-size: inherit; cursor: pointer; } .fui-NavigationBar-expand-lg .fui-NavigationBar__brand:hover, .fui-NavigationBar-expand-lg .fui-NavigationBar__brand:focus { text-decoration: none; } .fui-NavigationBar-expand-lg .fui-Link.fui-NavigationBar__link, .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown-toggle { align-items: center; background-color: var(--colorSubtleBackground); border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--borderRadiusMedium); border-right-color: transparent; border-top-color: transparent; box-sizing: border-box; color: var(--colorNeutralForeground2); display: inline-flex; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 32px; justify-content: center; line-height: var(--lineHeightBase300); margin: 0px; min-width: unset; outline-style: none; overflow: hidden; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); text-decoration-line: none; text-wrap: nowrap; transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); vertical-align: middle; } .fui-NavigationBar-expand-lg > .fui-Container-xxl, .fui-NavigationBar-expand-lg > .fui-Container-xl, .fui-NavigationBar-expand-lg > .fui-Container-lg, .fui-NavigationBar-expand-lg > .fui-Container-md, .fui-NavigationBar-expand-lg > .fui-Container-sm, .fui-NavigationBar-expand-lg > .fui-Container, .fui-NavigationBar-expand-lg > .fui-Container-fluid { flex-wrap: nowrap; } .fui-NavigationBar-expand-lg .fui-NavigationBar-scroll { overflow: visible; } .fui-NavigationBar-expand-lg .fui-NavigationBar__menu { display: flex !important; flex-basis: auto; } .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon { margin-left: var(--spacingHorizontalXS); width: 12px; line-height: var(--lineHeightBase200); height: 12px; font-size: 12px; } .fui-NavigationBar-expand-lg .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon > svg { display: inline; line-height: 0; } .fui-NavigationBar-expand-lg .fui-NavigationBar__toggler { display: none; } } @media (max-width: 1919.98px) { .fui-NavigationBar-expand-xl > .fui-Container-xxl, .fui-NavigationBar-expand-xl > .fui-Container-xl, .fui-NavigationBar-expand-xl > .fui-Container-lg, .fui-NavigationBar-expand-xl > .fui-Container-md, .fui-NavigationBar-expand-xl > .fui-Container-sm, .fui-NavigationBar-expand-xl > .fui-Container, .fui-NavigationBar-expand-xl > .fui-Container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 1920px) { .fui-NavigationBar-expand-xl { flex-flow: row nowrap; justify-content: flex-start; } .fui-NavigationBar-expand-xl .fui-NavigationBar__start, .fui-NavigationBar-expand-xl .fui-NavigationBar__end { flex-direction: row; } .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown-menu { position: absolute; } .fui-NavigationBar-expand-xl .fui-NavigationBar__item, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown { display: flex; align-items: center; color: var(--colorNeutralForeground2); box-sizing: border-box; text-wrap: nowrap; } .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover { color: var(--colorNeutralForeground2Hover); background-color: var(--colorSubtleBackgroundHover); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Hover); /*border-color: var(--colorNeutralStroke1Hover);*/ color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover:active, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover:active { color: var(--colorNeutralForeground2Pressed); background-color: var(--colorSubtleBackgroundPressed); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Pressed); /*border-color: var(--colorNeutralStroke1Pressed);*/ color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active { font-weight: var(--fontWeightSemibold); } .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-xl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; outline-style: none; } .fui-NavigationBar-expand-xl .fui-NavigationBar__brand { display: inline-block; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); /*margin-right: var(--spacingHorizontalS);*/ font-size: var(--fontSizeBase400); line-height: inherit; white-space: nowrap; } .fui-NavigationBar-expand-xl .fui-NavigationBar__brand .fui-NavigationBar__item .fui-Link.fui-NavigationBar__link { font-size: inherit; cursor: pointer; } .fui-NavigationBar-expand-xl .fui-NavigationBar__brand:hover, .fui-NavigationBar-expand-xl .fui-NavigationBar__brand:focus { text-decoration: none; } .fui-NavigationBar-expand-xl .fui-Link.fui-NavigationBar__link, .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown-toggle { align-items: center; background-color: var(--colorSubtleBackground); border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--borderRadiusMedium); border-right-color: transparent; border-top-color: transparent; box-sizing: border-box; color: var(--colorNeutralForeground2); display: inline-flex; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 32px; justify-content: center; line-height: var(--lineHeightBase300); margin: 0px; min-width: unset; outline-style: none; overflow: hidden; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); text-decoration-line: none; text-wrap: nowrap; transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); vertical-align: middle; } .fui-NavigationBar-expand-xl > .fui-Container-xxl, .fui-NavigationBar-expand-xl > .fui-Container-xl, .fui-NavigationBar-expand-xl > .fui-Container-lg, .fui-NavigationBar-expand-xl > .fui-Container-md, .fui-NavigationBar-expand-xl > .fui-Container-sm, .fui-NavigationBar-expand-xl > .fui-Container, .fui-NavigationBar-expand-xl > .fui-Container-fluid { flex-wrap: nowrap; } .fui-NavigationBar-expand-xl .fui-NavigationBar-scroll { overflow: visible; } .fui-NavigationBar-expand-xl .fui-NavigationBar__menu { display: flex !important; flex-basis: auto; } .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon { margin-left: var(--spacingHorizontalXS); width: 12px; line-height: var(--lineHeightBase200); height: 12px; font-size: 12px; } .fui-NavigationBar-expand-xl .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon > svg { display: inline; line-height: 0; } .fui-NavigationBar-expand-xl .fui-NavigationBar__toggler { display: none; } } @media (max-width: 2559.98px) { .fui-NavigationBar-expand-xxl > .fui-Container-xxl, .fui-NavigationBar-expand-xxl > .fui-Container-xl, .fui-NavigationBar-expand-xxl > .fui-Container-lg, .fui-NavigationBar-expand-xxl > .fui-Container-md, .fui-NavigationBar-expand-xxl > .fui-Container-sm, .fui-NavigationBar-expand-xxl > .fui-Container, .fui-NavigationBar-expand-xxl > .fui-Container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 2560px) { .fui-NavigationBar-expand-xxl { flex-flow: row nowrap; justify-content: flex-start; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__start, .fui-NavigationBar-expand-xxl .fui-NavigationBar__end { flex-direction: row; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown-menu { position: absolute; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__item, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown { display: flex; align-items: center; color: var(--colorNeutralForeground2); box-sizing: border-box; text-wrap: nowrap; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover { color: var(--colorNeutralForeground2Hover); background-color: var(--colorSubtleBackgroundHover); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Hover); /*border-color: var(--colorNeutralStroke1Hover);*/ color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover:active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover:active { color: var(--colorNeutralForeground2Pressed); background-color: var(--colorSubtleBackgroundPressed); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Pressed); /*border-color: var(--colorNeutralStroke1Pressed);*/ color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active { font-weight: var(--fontWeightSemibold); } .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; outline-style: none; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__brand { display: inline-block; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); /*margin-right: var(--spacingHorizontalS);*/ font-size: var(--fontSizeBase400); line-height: inherit; white-space: nowrap; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__brand .fui-NavigationBar__item .fui-Link.fui-NavigationBar__link { font-size: inherit; cursor: pointer; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__brand:hover, .fui-NavigationBar-expand-xxl .fui-NavigationBar__brand:focus { text-decoration: none; } .fui-NavigationBar-expand-xxl .fui-Link.fui-NavigationBar__link, .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown-toggle { align-items: center; background-color: var(--colorSubtleBackground); border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--borderRadiusMedium); border-right-color: transparent; border-top-color: transparent; box-sizing: border-box; color: var(--colorNeutralForeground2); display: inline-flex; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 32px; justify-content: center; line-height: var(--lineHeightBase300); margin: 0px; min-width: unset; outline-style: none; overflow: hidden; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); text-decoration-line: none; text-wrap: nowrap; transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); vertical-align: middle; } .fui-NavigationBar-expand-xxl > .fui-Container-xxl, .fui-NavigationBar-expand-xxl > .fui-Container-xl, .fui-NavigationBar-expand-xxl > .fui-Container-lg, .fui-NavigationBar-expand-xxl > .fui-Container-md, .fui-NavigationBar-expand-xxl > .fui-Container-sm, .fui-NavigationBar-expand-xxl > .fui-Container, .fui-NavigationBar-expand-xxl > .fui-Container-fluid { flex-wrap: nowrap; } .fui-NavigationBar-expand-xxl .fui-NavigationBar-scroll { overflow: visible; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__menu { display: flex !important; flex-basis: auto; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon { margin-left: var(--spacingHorizontalXS); width: 12px; line-height: var(--lineHeightBase200); height: 12px; font-size: 12px; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon > svg { display: inline; line-height: 0; } .fui-NavigationBar-expand-xxl .fui-NavigationBar__toggler { display: none; } } .fui-NavigationBar-expand { flex-flow: row nowrap; justify-content: flex-start; } .fui-NavigationBar-expand > .fui-Container-xxl, .fui-NavigationBar-expand > .fui-Container-xl, .fui-NavigationBar-expand > .fui-Container-lg, .fui-NavigationBar-expand > .fui-Container-md, .fui-NavigationBar-expand > .fui-Container-sm, .fui-NavigationBar-expand > .fui-Container, .fui-NavigationBar-expand > .fui-Container-fluid { padding-right: 0; padding-left: 0; } .fui-NavigationBar-expand .fui-NavigationBar__start, .fui-NavigationBar-expand .fui-NavigationBar__end { flex-direction: row; } .fui-NavigationBar-expand .fui-NavigationBar__dropdown-menu { position: absolute; } .fui-NavigationBar-expand .fui-NavigationBar__item, .fui-NavigationBar-expand .fui-NavigationBar__dropdown { display: flex; align-items: center; color: var(--colorNeutralForeground2); box-sizing: border-box; text-wrap: nowrap; } .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__link:hover, .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover { color: var(--colorNeutralForeground2Hover); background-color: var(--colorSubtleBackgroundHover); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Hover); /*border-color: var(--colorNeutralStroke1Hover);*/ color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle:hover:active, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__link:hover:active, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle:hover:active { color: var(--colorNeutralForeground2Pressed); background-color: var(--colorSubtleBackgroundPressed); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Pressed); /*border-color: var(--colorNeutralStroke1Pressed);*/ color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active { font-weight: var(--fontWeightSemibold); } .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand .fui-NavigationBar__item .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__link.fui-Link-active:hover:active, .fui-NavigationBar-expand .fui-NavigationBar__dropdown .fui-NavigationBar__dropdown-toggle.fui-Link-active:hover:active { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; outline-style: none; } .fui-NavigationBar-expand .fui-NavigationBar__brand { display: inline-block; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); /*margin-right: var(--spacingHorizontalS);*/ font-size: var(--fontSizeBase400); line-height: inherit; white-space: nowrap; } .fui-NavigationBar-expand .fui-NavigationBar__brand .fui-NavigationBar__item .fui-Link.fui-NavigationBar__link { font-size: inherit; cursor: pointer; } .fui-NavigationBar-expand .fui-NavigationBar__brand:hover, .fui-NavigationBar-expand .fui-NavigationBar__brand:focus { text-decoration: none; } .fui-NavigationBar-expand .fui-Link.fui-NavigationBar__link, .fui-NavigationBar-expand .fui-NavigationBar__dropdown-toggle { align-items: center; background-color: var(--colorSubtleBackground); border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--borderRadiusMedium); border-right-color: transparent; border-top-color: transparent; box-sizing: border-box; color: var(--colorNeutralForeground2); display: inline-flex; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 32px; justify-content: center; line-height: var(--lineHeightBase300); margin: 0px; min-width: unset; outline-style: none; overflow: hidden; padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); text-decoration-line: none; text-wrap: nowrap; transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); vertical-align: middle; } .fui-NavigationBar-expand > .fui-Container-xxl, .fui-NavigationBar-expand > .fui-Container-xl, .fui-NavigationBar-expand > .fui-Container-lg, .fui-NavigationBar-expand > .fui-Container-md, .fui-NavigationBar-expand > .fui-Container-sm, .fui-NavigationBar-expand > .fui-Container, .fui-NavigationBar-expand > .fui-Container-fluid { flex-wrap: nowrap; } .fui-NavigationBar-expand .fui-NavigationBar-scroll { overflow: visible; } .fui-NavigationBar-expand .fui-NavigationBar__menu { display: flex !important; flex-basis: auto; } .fui-NavigationBar-expand .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon { margin-left: var(--spacingHorizontalXS); width: 12px; line-height: var(--lineHeightBase200); height: 12px; font-size: 12px; } .fui-NavigationBar-expand .fui-NavigationBar__dropdown-toggle .fui-NavigationBar__toggleIcon > svg { display: inline; line-height: 0; } .fui-NavigationBar-expand .fui-NavigationBar__toggler { display: none; } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slidein { 0% { transform: translate(var(--fui-positioning-slide-distance-x), var(--fui-positioning-slide-distance-y)); } } .fui-NavigationBar__subdropdown { position: relative; } .fui-NavigationBar-horizontal .fui-NavigationBar__dropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown, .fui-NavigationBar-horizontal .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown { position: relative; } .fui-NavigationBar-horizontal .fui-NavigationBar__dropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-item, .fui-NavigationBar-horizontal .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-item { border: 0; } .fui-NavigationBar-horizontal .fui-NavigationBar__dropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-item > .fui-NavigationBar__toggleIcon > svg, .fui-NavigationBar-horizontal .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-item > .fui-NavigationBar__toggleIcon > svg { display: inline; line-height: 0; } .fui-NavigationBar-horizontal .fui-NavigationBar__dropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown.fui-NavigationBar__dropdown-show > .fui-NavigationBar__dropdown-item > .fui-NavigationBar__toggleIcon > svg, .fui-NavigationBar-horizontal .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown.fui-NavigationBar__dropdown-show > .fui-NavigationBar__dropdown-item > .fui-NavigationBar__toggleIcon > svg { transform: rotate(180deg); } .fui-NavigationBar-horizontal .fui-NavigationBar__dropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown .fui-NavigationBar__dropdown-menu, .fui-NavigationBar-horizontal .fui-NavigationBar__subdropdown > .fui-NavigationBar__dropdown-menu > .fui-NavigationBar__dropdown-menu-list > .fui-NavigationBar__subdropdown .fui-NavigationBar__dropdown-menu { position: absolute; top: 0; left: 100%; margin-left: 0rem; margin-right: 0.1rem; z-index: 10000000000000000; } .b-bar-vertical-inline.b-bar-dark .b-bar-brand .b-bar-link.fui-Link-active, .b-bar-vertical-popout.b-bar-dark .b-bar-brand .b-bar-link.fui-Link-active, .b-bar-vertical-small.b-bar-dark .b-bar-brand .b-bar-link.fui-Link-active { color: #fff; background: inherit; } .b-bar-vertical-inline.b-bar-dark .b-bar-dropdown-menu .b-bar-dropdown-item.fui-Link-active, .b-bar-vertical-popout.b-bar-dark .b-bar-dropdown-menu .b-bar-dropdown-item.fui-Link-active, .b-bar-vertical-small.b-bar-dark .b-bar-dropdown-menu .b-bar-dropdown-item.fui-Link-active { color: var(--b-bar-item-dark-active-color, #fff); background: var(--b-bar-item-dark-active-background, #0288D1); } .b-bar-vertical-inline.b-bar-dark .b-bar-toggler-inline, .b-bar-vertical-popout.b-bar-dark .b-bar-toggler-inline, .b-bar-vertical-small.b-bar-dark .b-bar-toggler-inline { stroke: var(--b-bar-dark-color, rgba(255, 255, 255, 0.5)); } .b-bar-vertical-inline.b-bar-dark .b-bar-link.fui-Link-active, .b-bar-vertical-popout.b-bar-dark .b-bar-link.fui-Link-active, .b-bar-vertical-small.b-bar-dark .b-bar-link.fui-Link-active { color: var(--b-bar-item-dark-active-color, #fff); background: var(--b-bar-item-dark-active-background, #0288D1); } .b-bar-vertical-inline.b-bar-light .b-bar-brand .b-bar-link.fui-Link-active, .b-bar-vertical-popout.b-bar-light .b-bar-brand .b-bar-link.fui-Link-active, .b-bar-vertical-small.b-bar-light .b-bar-brand .b-bar-link.fui-Link-active { background: inherit; } .b-bar-vertical-inline.b-bar-light .b-bar-dropdown-menu .b-bar-dropdown-item.fui-Link-active, .b-bar-vertical-popout.b-bar-light .b-bar-dropdown-menu .b-bar-dropdown-item.fui-Link-active, .b-bar-vertical-small.b-bar-light .b-bar-dropdown-menu .b-bar-dropdown-item.fui-Link-active { color: var(--b-bar-item-light-active-color, #000); background: var(--b-bar-item-light-active-background, #0288D1); } .b-bar-vertical-inline.b-bar-light .b-bar-toggler-inline, .b-bar-vertical-popout.b-bar-light .b-bar-toggler-inline, .b-bar-vertical-small.b-bar-light .b-bar-toggler-inline { stroke: var(--b-bar-light-color, rgba(0, 0, 0, 0.7)); } .b-bar-vertical-inline.b-bar-light .b-bar-link.fui-Link-active, .b-bar-vertical-popout.b-bar-light .b-bar-link.fui-Link-active, .b-bar-vertical-small.b-bar-light .b-bar-link.fui-Link-active { color: var(--b-bar-item-light-active-color, #000); background: var(--b-bar-item-light-active-background, #0288D1); } .fui-Breadcrumb .fui-Breadcrumb__list { list-style-type: none; display: flex; align-items: center; margin: 0px; padding: 0px; } .fui-Breadcrumb .fui-BreadcrumbItem { display: flex; align-items: center; color: var(--colorNeutralForeground2); box-sizing: border-box; text-wrap: nowrap; } .fui-Breadcrumb .fui-BreadcrumbItem:not(.fui-Breadcrumb .fui-BreadcrumbItem-active) .fui-BreadcrumbButton:hover { color: var(--colorNeutralForeground2Hover); background-color: var(--colorSubtleBackgroundHover); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Hover); border-color: var(--colorNeutralStroke1Hover); color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-Breadcrumb .fui-BreadcrumbItem:not(.fui-Breadcrumb .fui-BreadcrumbItem-active) .fui-BreadcrumbButton:hover:active { color: var(--colorNeutralForeground2Pressed); background-color: var(--colorSubtleBackgroundPressed); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; background-color: var(--colorNeutralBackground1Pressed); border-color: var(--colorNeutralStroke1Pressed); color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-Breadcrumb .fui-BreadcrumbItem-active .fui-BreadcrumbButton { font-weight: var(--fontWeightSemibold); } .fui-Breadcrumb .fui-BreadcrumbItem-active .fui-BreadcrumbButton:hover { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-Breadcrumb .fui-BreadcrumbItem-active .fui-BreadcrumbButton:hover:active { cursor: auto; color: var(--colorNeutralForeground2); background-color: var(--colorTransparentBackground); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; outline-style: none; } .fui-Breadcrumb .fui-BreadcrumbDivider { display: flex; } .fui-Breadcrumb .fui-BreadcrumbDivider > svg { display: inline; line-height: 0; } .fui-Breadcrumb .fui-BreadcrumbDivider:last-child { display: none; } .fui-Breadcrumb .fui-BreadcrumbButton { align-items: center; background-color: var(--colorSubtleBackground); border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--borderRadiusMedium); border-right-color: transparent; border-top-color: transparent; box-sizing: border-box; color: var(--colorNeutralForeground2); display: inline-flex; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 32px; justify-content: center; line-height: var(--lineHeightBase300); margin: 0px; min-width: unset; outline-style: none; overflow: hidden; padding: 5px var(--spacingHorizontalM); padding-bottom: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); padding-top: var(--spacingHorizontalSNudge); text-decoration-line: none; text-wrap: nowrap; transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); vertical-align: middle; } button { font: inherit; } .fui-Button { align-items: center; box-sizing: border-box; display: inline-flex; justify-content: center; text-decoration-line: none; vertical-align: middle; margin: 0px; /*overflow: hidden;*/ background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); font-family: var(--fontFamilyBase); outline-style: none; padding: 5px var(--spacingHorizontalM); /*min-width: 96px;*/ border-radius: var(--borderRadiusMedium); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase300); transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); } .fui-Button:hover { color: var(--colorNeutralForegroundOnBrand); background-color: var(--colorNeutralBackground1Hover); border-color: var(--colorNeutralStroke1Hover); color: var(--colorNeutralForeground1Hover); cursor: pointer; } .fui-Button:hover:active, .fui-Button:hover.fui-Button-active { background-color: var(--colorNeutralBackground1Pressed); border-color: var(--colorNeutralStroke1Pressed); color: var(--colorNeutralForeground1Pressed); outline-style: none; } .fui-Button.fui-Button-disabled, .fui-Button:disabled { cursor: not-allowed; color: var(--colorNeutralForegroundDisabled); border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button.fui-Button-disabled:active, .fui-Button.fui-Button-disabled.fui-Button-active, .fui-Button:disabled:active, .fui-Button:disabled.fui-Button-active { color: var(--colorNeutralForegroundDisabled); background-color: var(--colorNeutralBackgroundDisabled); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .fui-Button.fui-Button-xs { padding-left: var(--spacingHorizontalXS); padding-right: var(--spacingHorizontalXS); padding-top: 1px; padding-bottom: 1px; font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase100); /*min-width: 64px;*/ border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase100); } .fui-Button.fui-Button-sm { padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); padding-top: 3px; padding-bottom: 3px; font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase200); /*min-width: 64px;*/ border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase200); } .fui-Button.fui-Button-md { padding-left: var(--spacingHorizontalM); padding-right: var(--spacingHorizontalM); padding-top: 6px; padding-bottom: 6px; font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase400); /*min-width: 96px;*/ border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase400); } .fui-Button.fui-Button-lg { padding-left: var(--spacingHorizontalL); padding-right: var(--spacingHorizontalL); padding-top: 8px; padding-bottom: 8px; font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase400); /*min-width: 96px;*/ border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase400); } .fui-Button.fui-Button-xl { padding-left: var(--spacingHorizontalXL); padding-right: var(--spacingHorizontalXL); padding-top: 12px; padding-bottom: 12px; font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase400); /*min-width: 96px;*/ border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase400); } .fui-Button-block { display: block; width: 100%; } .fui-Button-block + .fui-ButtonBlock { margin-top: var(--spacingHorizontalS); } .fui-Button-link-stretched::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; } .fui-Button-primary { background-color: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); border-color: transparent; } .fui-Button-primary.fui-Button-disabled, .fui-Button-primary:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-primary:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-primary:not(:disabled):not(.fui-Button-disabled):hover { background-color: var(--colorBrandBackgroundHover); color: var(--colorNeutralForegroundOnBrand); } .fui-Button-primary:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-primary:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-primary:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-primary:not(:disabled):not(.fui-Button-disabled).fui-Button-active { background-color: var(--colorBrandBackgroundPressed); color: var(--colorNeutralForegroundOnBrand); } .fui-Button-secondary { background-color: var(--colorNeutralBackground3); color: var(--colorNeutralForeground3); border-color: transparent; border-color: var(--colorNeutralStroke1); } .fui-Button-secondary.fui-Button-disabled, .fui-Button-secondary:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-secondary:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-secondary:not(:disabled):not(.fui-Button-disabled):hover { background-color: var(--colorNeutralBackground3Hover); color: var(--colorNeutralForeground3Hover); } .fui-Button-secondary:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-secondary:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-secondary:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-secondary:not(:disabled):not(.fui-Button-disabled).fui-Button-active { background-color: var(--colorNeutralBackground3Pressed); color: var(--colorNeutralForeground3Hover); } .fui-Button-success { background-color: var(--colorStatusSuccessBackground3); color: var(--colorNeutralForegroundOnBrand); border-color: transparent; } .fui-Button-success.fui-Button-disabled, .fui-Button-success:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-success:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-success:not(:disabled):not(.fui-Button-disabled):hover { background-color: var(--colorStatusSuccessForeground1); color: var(--colorNeutralForegroundOnBrand); } .fui-Button-success:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-success:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-success:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-success:not(:disabled):not(.fui-Button-disabled).fui-Button-active { background-color: var(--colorStatusSuccessForeground2); color: var(--colorNeutralForegroundOnBrand); } .fui-Button-danger { background-color: var(--colorStatusDangerBackground3); color: var(--colorNeutralForegroundOnBrand); border-color: transparent; } .fui-Button-danger.fui-Button-disabled, .fui-Button-danger:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-danger:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-danger:not(:disabled):not(.fui-Button-disabled):hover { background-color: var(--colorStatusDangerForeground1); color: var(--colorNeutralForegroundOnBrand); } .fui-Button-danger:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-danger:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-danger:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-danger:not(:disabled):not(.fui-Button-disabled).fui-Button-active { background-color: var(--colorStatusDangerForeground2); color: var(--colorNeutralForegroundOnBrand); } .fui-Button-warning { background-color: var(--colorStatusWarningBackground3); color: var(--colorPaletteMarigoldBackground1); border-color: transparent; } .fui-Button-warning.fui-Button-disabled, .fui-Button-warning:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-warning:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-warning:not(:disabled):not(.fui-Button-disabled):hover { background-color: var(--colorStatusWarningForeground1); color: var(--colorPaletteMarigoldBackground1); } .fui-Button-warning:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-warning:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-warning:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-warning:not(:disabled):not(.fui-Button-disabled).fui-Button-active { background-color: var(--colorStatusWarningForeground2); color: var(--colorPaletteMarigoldBackground1); } .fui-Button-info { background-color: var(--colorNeutralForeground3); color: var(--colorNeutralBackground3); border-color: transparent; } .fui-Button-info.fui-Button-disabled, .fui-Button-info:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-info:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-info:not(:disabled):not(.fui-Button-disabled):hover { background-color: var(--colorNeutralForeground3Hover); color: var(--colorNeutralBackground3Hover); } .fui-Button-info:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-info:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-info:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-info:not(:disabled):not(.fui-Button-disabled).fui-Button-active { background-color: var(--colorNeutralForeground3Pressed); color: var(--colorNeutralBackground3Pressed); } .fui-Button-dark { background-color: var(--colorNeutralForeground1); color: var(--colorNeutralBackground1); border-color: transparent; } .fui-Button-dark.fui-Button-disabled, .fui-Button-dark:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-dark:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-dark:not(:disabled):not(.fui-Button-disabled):hover { background-color: var(--colorNeutralForeground2); color: var(--colorNeutralBackground1); } .fui-Button-dark:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-dark:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-dark:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-dark:not(:disabled):not(.fui-Button-disabled).fui-Button-active { background-color: var(--colorNeutralForeground3); color: var(--colorNeutralBackground1); } .fui-Button-light { background-color: var(--colorNeutralBackground2); color: var(--colorNeutralForeground2); border-color: transparent; } .fui-Button-light.fui-Button-disabled, .fui-Button-light:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-light:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-light:not(:disabled):not(.fui-Button-disabled):hover { background-color: var(--colorNeutralBackground2Hover); color: var(--colorNeutralForeground2Hover); } .fui-Button-light:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-light:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-light:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-light:not(:disabled):not(.fui-Button-disabled).fui-Button-active { background-color: var(--colorNeutralBackground2Pressed); color: var(--colorNeutralForeground2Pressed); } .fui-Button-link { background-color: var(--colorSubtleBackground); color: var(--colorBrandForegroundLink); border: none; text-decoration: none; } .fui-Button-link.fui-Button-disabled, .fui-Button-link:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-Button-link:not(:disabled):not(.fui-Button-disabled):hover, .fui-Button-link:not(:disabled):not(.fui-Button-disabled):hover { color: var(--colorBrandForegroundLinkHover); text-decoration: underline; } .fui-Button-link:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-link:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-Button-link:not(:disabled):not(.fui-Button-disabled):active, .fui-Button-link:not(:disabled):not(.fui-Button-disabled).fui-Button-active { color: var(--colorBrandForegroundLinkPressed); } .fui-ButtonOutline-primary { color: var(--colorBrandBackground); border-color: var(--colorBrandBackground); } .fui-ButtonOutline-primary.fui-Button-disabled, .fui-ButtonOutline-primary:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-primary:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-primary:not(:disabled):not(.fui-Button-disabled):hover { border-color: var(--colorBrandBackgroundHover); color: var(--colorBrandBackgroundHover); } .fui-ButtonOutline-primary:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-primary:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-primary:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-primary:not(:disabled):not(.fui-Button-disabled).fui-Button-active { border-color: var(--colorBrandBackgroundPressed); color: var(--colorBrandBackgroundPressed); } .fui-ButtonOutline-secondary { color: var(--colorNeutralForeground3); border-color: var(--colorNeutralForeground3); } .fui-ButtonOutline-secondary.fui-Button-disabled, .fui-ButtonOutline-secondary:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-secondary:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-secondary:not(:disabled):not(.fui-Button-disabled):hover { border-color: var(--colorNeutralForeground3Hover); color: var(--colorNeutralForeground3Hover); } .fui-ButtonOutline-secondary:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-secondary:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-secondary:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-secondary:not(:disabled):not(.fui-Button-disabled).fui-Button-active { border-color: var(--colorNeutralForeground3Pressed); color: var(--colorNeutralForeground3Pressed); } .fui-ButtonOutline-success { color: var(--colorStatusSuccessBackground3); border-color: var(--colorStatusSuccessBackground3); } .fui-ButtonOutline-success.fui-Button-disabled, .fui-ButtonOutline-success:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-success:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-success:not(:disabled):not(.fui-Button-disabled):hover { border-color: var(--colorStatusSuccessForeground1); color: var(--colorStatusSuccessForeground1); } .fui-ButtonOutline-success:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-success:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-success:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-success:not(:disabled):not(.fui-Button-disabled).fui-Button-active { border-color: var(--colorStatusSuccessForeground2); color: var(--colorStatusSuccessForeground2); } .fui-ButtonOutline-danger { color: var(--colorStatusDangerBackground3); border-color: var(--colorStatusDangerBackground3); } .fui-ButtonOutline-danger.fui-Button-disabled, .fui-ButtonOutline-danger:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-danger:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-danger:not(:disabled):not(.fui-Button-disabled):hover { border-color: var(--colorStatusDangerForeground1); color: var(--colorStatusDangerForeground1); } .fui-ButtonOutline-danger:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-danger:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-danger:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-danger:not(:disabled):not(.fui-Button-disabled).fui-Button-active { border-color: var(--colorStatusDangerForeground2); color: var(--colorStatusDangerForeground2); } .fui-ButtonOutline-warning { color: var(--colorStatusWarningBackground3); border-color: var(--colorStatusWarningBackground3); } .fui-ButtonOutline-warning.fui-Button-disabled, .fui-ButtonOutline-warning:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-warning:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-warning:not(:disabled):not(.fui-Button-disabled):hover { border-color: var(--colorStatusWarningForeground1); color: var(--colorStatusWarningForeground1); } .fui-ButtonOutline-warning:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-warning:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-warning:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-warning:not(:disabled):not(.fui-Button-disabled).fui-Button-active { border-color: var(--colorStatusWarningForeground2); color: var(--colorStatusWarningForeground2); } .fui-ButtonOutline-info { color: var(--colorNeutralForeground3); border-color: var(--colorNeutralForeground3); } .fui-ButtonOutline-info.fui-Button-disabled, .fui-ButtonOutline-info:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-info:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-info:not(:disabled):not(.fui-Button-disabled):hover { border-color: var(--colorNeutralForeground3Hover); color: var(--colorNeutralForeground3Hover); } .fui-ButtonOutline-info:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-info:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-info:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-info:not(:disabled):not(.fui-Button-disabled).fui-Button-active { border-color: var(--colorNeutralForeground3Pressed); color: var(--colorNeutralForeground3Pressed); } .fui-ButtonOutline-dark { color: var(--colorNeutralForeground1); border-color: var(--colorNeutralForeground1); } .fui-ButtonOutline-dark.fui-Button-disabled, .fui-ButtonOutline-dark:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-dark:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-dark:not(:disabled):not(.fui-Button-disabled):hover { border-color: var(--colorNeutralForeground2); color: var(--colorNeutralForeground2); } .fui-ButtonOutline-dark:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-dark:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-dark:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-dark:not(:disabled):not(.fui-Button-disabled).fui-Button-active { border-color: var(--colorNeutralForeground3); color: var(--colorNeutralForeground3); } .fui-ButtonOutline-light { color: var(--colorNeutralBackground2); border-color: var(--colorNeutralBackground2); } .fui-ButtonOutline-light.fui-Button-disabled, .fui-ButtonOutline-light:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-light:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-light:not(:disabled):not(.fui-Button-disabled):hover { color: var(--colorNeutralForeground2Hover); } .fui-ButtonOutline-light:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-light:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-light:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-light:not(:disabled):not(.fui-Button-disabled).fui-Button-active { color: var(--colorNeutralForeground2Pressed); } .fui-ButtonOutline-link { color: var(--colorBrandForegroundLink); border-color: var(--colorBrandForegroundLink); } .fui-ButtonOutline-link.fui-Button-disabled, .fui-ButtonOutline-link:disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); } .fui-ButtonOutline-link:not(:disabled):not(.fui-Button-disabled):hover, .fui-ButtonOutline-link:not(:disabled):not(.fui-Button-disabled):hover { border-color: var(--colorBrandForegroundLinkHover); color: var(--colorBrandForegroundLinkHover); } .fui-ButtonOutline-link:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-link:not(:disabled):not(.fui-Button-disabled).fui-Button-active, .fui-ButtonOutline-link:not(:disabled):not(.fui-Button-disabled):active, .fui-ButtonOutline-link:not(:disabled):not(.fui-Button-disabled).fui-Button-active { border-color: var(--colorBrandForegroundLinkPressed); color: var(--colorBrandForegroundLinkPressed); } .fui-CloseButton { overflow: visible; padding: 0px; border-style: none; position: relative; box-sizing: content-box; background-color: inherit; color: inherit; font-family: inherit; font-size: inherit; cursor: pointer; line-height: 0; appearance: button; text-align: unset; } .fui-CloseButton .fui-CloseButton__icon { display: inline; line-height: 0; } .fui-ButtonGroup-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; } .fui-ButtonGroup { vertical-align: middle; justify-content: stretch; display: inline-flex; position: relative; } .fui-ButtonGroup .fui-Button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fui-ButtonGroup .fui-Button:not(:last-child):not(.fui-MenuButton) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .fui-ButtonGroup > .fui-ButtonGroup:not(:first-child), .fui-ButtonGroup > .fui-Button:not(:first-child) { margin-left: -1px; } .fui-ButtonGroup > .fui-ButtonGroup:not(:first-child) > .fui-Button, .fui-ButtonGroup .fui-ButtonGroup > .fui-Button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fui-Button__spinner { display: inline-block; width: 1em; height: 1em; margin-right: var(--spacingHorizontalXS); border-width: var(--strokeWidthThick); border: var(--strokeWidthThicker) solid currentColor; border-right-color: transparent; border-radius: var(--borderRadiusCircular); animation: var(--durationUltraSlow) linear infinite spinner-border; } @keyframes spinner-border { to { transform: rotate(360deg); } } .fui-Card { --fui-Card--size: 12px; --fui-Card--border-radius: var(--borderRadiusMedium); box-sizing: border-box; position: relative; display: flex; flex-direction: column; max-width: 100%; column-gap: var(--fui-Card--size); border-top-left-radius: var(--fui-Card--border-radius); border-top-right-radius: var(--fui-Card--border-radius); border-bottom-left-radius: var(--fui-Card--border-radius); border-bottom-right-radius: var(--fui-Card--border-radius); row-gap: var(--fui-Card--size); column-gap: var(--fui-Card--size); } .fui-Card .fui-CardHeader { flex-shrink: 0; display: grid; align-items: center; padding-top: var(--fui-Card--size); padding-left: var(--fui-Card--size); padding-right: var(--fui-Card--size); margin-bottom: 0; } .fui-Card .fui-CardHeader > .fui-CardHeader__header { text-align: start; white-space: normal; overflow-x: visible; overflow-y: visible; text-overflow: clip; font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase300); } .fui-Card .fui-CardFooter { padding-left: var(--fui-Card--size); padding-right: var(--fui-Card--size); padding-bottom: var(--fui-Card--size); } .fui-Card .fui-CardPreview { position: relative; flex-shrink: 0; width: 100%; } .fui-Card .fui-CardBody { margin-left: 0; margin-right: 0; padding-top: var(--fui-Card--size); padding-bottom: var(--fui-Card--size); padding-left: var(--fui-Card--size); padding-right: var(--fui-Card--size); } .fui-Card .fui-CardBody + .fui-CardBody { padding-top: 0; } .fui-Card .fui-CardBody .fui-CardText { margin-bottom: var(--fui-Card--size); } .fui-Card:not(.fui-CardGroup .fui-Card) { box-shadow: var(--shadow4); } .fui-CardDeck .fui-Card { margin-bottom: var(--spacingVerticalM); } @media (min-width: 600px) { .fui-CardDeck { display: flex; flex-flow: row wrap; margin-right: calc(-1 * var(--spacingHorizontalM)); margin-left: calc(-1 * var(--spacingHorizontalM)); } .fui-CardDeck .fui-Card { flex: 1 0 0%; margin-right: var(--spacingHorizontalM); margin-bottom: 0; margin-left: var(--spacingHorizontalM); } } .fui-CardGroup { box-shadow: var(--shadow4); } .fui-CardGroup > .fui-Card { margin-bottom: var(--spacingVerticalM); } @media (min-width: 600px) { .fui-CardGroup { display: flex; flex-flow: row wrap; } .fui-CardGroup > .fui-Card { flex: 1 0 0%; margin-bottom: 0; } .fui-CardGroup > .fui-Card + .fui-Card { margin-left: 0; border-left: 0; } .fui-CardGroup > .fui-Card:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .fui-CardGroup > .fui-Card:not(:last-child) .fui-CardPreview, .fui-CardGroup > .fui-Card:not(:last-child) .fui-CardHeader { border-top-right-radius: 0; } .fui-CardGroup > .fui-Card:not(:last-child) .fui-CardPreview, .fui-CardGroup > .fui-Card:not(:last-child) .fui-CardFooter { border-bottom-right-radius: 0; } .fui-CardGroup > .fui-Card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fui-CardGroup > .fui-Card:not(:first-child) .fui-CardPreview, .fui-CardGroup > .fui-Card:not(:first-child) .fui-CardHeader { border-top-left-radius: 0; } .fui-CardGroup > .fui-Card:not(:first-child) .card-img-bottom, .fui-CardGroup > .fui-Card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } } .fui-Carousel { position: relative; display: inline-block; } .fui-Carousel .fui-Carousel__paddlescontainer { right: 0px; bottom: 0px; left: 0px; top: 0px; position: absolute; display: flex; justify-content: space-between; align-items: center; } .fui-Carousel .fui-Carousel__paddlescontainer .fui-Carousel__paddle { z-index: 1; color: var(--colorNeutralForegroundOnBrand); background-color: var(--colorBackgroundOverlay); transition: all 100ms ease 0s; border-top-width: 0px; border-radius: var(--borderRadiusMedium); outline-width: 0px; position: relative; display: inline-flex; justify-content: center; cursor: pointer; vertical-align: middle; align-items: center; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px; padding: var(--spacingVerticalS) var(--spacingHorizontalS); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase300); } .fui-Carousel .fui-Carousel__paddlescontainer .fui-Carousel__paddle:hover { background-color: var(--colorScrollbarOverlay); } .fui-Carousel .fui-Carousel__paddlescontainer .fui-Carousel__paddle .fui-Carousel__paddle__icon { box-sizing: content-box; appearance: button; background-repeat: no-repeat; width: var(--fontSizeBase300); height: var(--fontSizeBase300); box-sizing: border-box; cursor: pointer; color: var(--colorNeutralForegroundOnBrand); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase300); } .fui-Carousel .fui-Carousel__paddlescontainer .fui-Carousel__paddle:first-child .fui-Carousel__paddle__icon { margin-right: var(--spacingHorizontalXS); background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' role='presentation' focusable='false' viewBox='8 8 16 16'%3E%3Cg%3E%3Cpath fill='%23fff' d='M19.5 8.97c0 .14-.03.27-.07.39-.05.12-.12.23-.21.32l-6.3 6.29 6.3 6.29c.09.09.17.2.21.32a1.036 1.036 0 0 1-.01.77c-.05.12-.13.23-.22.32s-.2.16-.32.22a.995.995 0 0 1-1.09-.21l-7-7c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71l7-7a.995.995 0 0 1 1.09-.21c.12.06.23.13.32.22s.16.2.22.32c.05.12.08.25.08.38z' /%3E%3C/g%3E%3C/svg%3E"); } .fui-Carousel .fui-Carousel__paddlescontainer .fui-Carousel__paddle:last-child .fui-Carousel__paddle__icon { margin-left: var(--spacingHorizontalXS); background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' role='presentation' focusable='false' viewBox='8 8 16 16'%3E%3Cg%3E%3Cpath fill='%23fff' d='M21.5 15.97c0 .28-.1.52-.29.71l-7 7c-.19.19-.43.29-.71.29-.14 0-.26-.03-.38-.08s-.23-.13-.32-.22-.16-.2-.22-.32a1.036 1.036 0 0 1-.01-.77c.05-.12.12-.23.21-.32l6.3-6.29-6.3-6.29a.85.85 0 0 1-.21-.32c-.05-.13-.07-.26-.07-.39a.995.995 0 0 1 .3-.7c.09-.09.2-.16.32-.22.12-.05.24-.08.38-.08.28 0 .52.1.71.29l7 7c.19.19.29.43.29.71z' /%3E%3C/g%3E%3C/svg%3E"); } .fui-Carousel .fui-Carousel__itemswrapper { overflow-x: hidden; display: flex; } .fui-Carousel .fui-Carousel__itemswrapper .fui-Carousel__itemscontainer { will-change: transform; list-style: none; margin: 0; display: flex; padding: 0; } .fui-Carousel .fui-Carousel__itemswrapper .fui-Carousel__itemscontainer .fui-Carousel__item { width: 100%; } .fui-Carousel .fui-Carousel__itemswrapper .fui-Carousel__itemscontainer .fui-Carousel__item-next { animation-name: carousel-slide-next; animation-timing-function: cubic-bezier(0, 0, 0, 1); animation-fill-mode: forwards; animation-duration: 200ms; } .fui-Carousel .fui-Carousel__itemswrapper .fui-Carousel__itemscontainer .fui-Carousel__item-prev { animation-name: carousel-slide-prev; animation-timing-function: cubic-bezier(0, 0, 0, 1); animation-fill-mode: forwards; animation-duration: 200ms; } .fui-Carousel .fui-Carousel__itemswrapper .fui-Carousel__itemscontainer .fui-Carousel__item > img { width: 100%; height: auto; vertical-align: middle; display: inline-block; } .fui-Carousel .fui-Carousel__navigation { z-index: 2; background-color: inherit; min-height: 1.7143rem; color: var(--colorBrandForeground1); list-style-type: none; position: relative; justify-content: center; align-items: center; display: flex; padding: 0; margin: 0; } .fui-Carousel .fui-Carousel__navigation .fui-Carousel__navigationitem { margin-left: var(--spacingHorizontalXXS); margin-right: var(--spacingHorizontalXXS); margin-bottom: var(--spacingVerticalXXS); margin-top: var(--spacingVerticalXXS); padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); padding-bottom: var(--spacingVerticalS); padding-top: var(--spacingVerticalS); white-space: nowrap; justify-content: center; cursor: pointer; align-items: center; display: flex; border-left-style: solid; border-bottom-style: solid; border-right-style: solid; border-top-style: solid; border-left-color: var(--colorTransparentStroke); border-bottom-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-top-color: var(--colorTransparentStroke); border-left-width: var(--strokeWidthThick); border-right-width: var(--strokeWidthThick); border-top-width: var(--strokeWidthThick); border-bottom-width: var(--strokeWidthThick); } .fui-Carousel .fui-Carousel__navigation .fui-Carousel__navigationitem:not(.fui-Carousel__navigationitem-active) .fui-Carousel__navigationitem__icon { background-color: var(--colorNeutralForeground2); } .fui-Carousel .fui-Carousel__navigation .fui-Carousel__navigationitem.fui-Carousel__navigationitem-active { color: var(--colorBrandForeground1); } .fui-Carousel .fui-Carousel__navigation .fui-Carousel__navigationitem.fui-Carousel__navigationitem-active .fui-Carousel__navigationitem__icon { background-color: var(--colorBrandBackground); } .fui-Carousel .fui-Carousel__navigation .fui-Carousel__navigationitem .fui-Carousel__navigationitem__icon { height: 0.5rem; width: 0.5rem; border-radius: 50%; } @keyframes carousel-slide-next { 0% { transform: translateX(200px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes carousel-slide-prev { 0% { transform: translateX(-200px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } .fui-Checkbox { --fui-Checkbox__indicator--borderColor: var(--colorCompoundBrandBackground); --fui-Checkbox__indicator--color: var(--colorNeutralForegroundInverted); --fui-Checkbox__indicator--backgroundColor: var(--colorCompoundBrandBackground); color: var(--colorNeutralForeground1); position: relative; display: inline-flex; cursor: pointer; vertical-align: middle; color: var(--colorNeutralForeground3); } .fui-Checkbox:hover { --fui-Checkbox__indicator--borderColor: var(--colorNeutralStrokeAccessibleHover); } .fui-Checkbox-error { color: var(--colorPaletteRedBorder2) !important; } .fui-Checkbox__input { left: 0px; box-sizing: border-box; cursor: inherit; height: 100%; margin: 0px; opacity: 0; position: absolute; top: 0px; width: calc(16px + 2 * var(--spacingHorizontalS)); } .fui-Checkbox__input:not(:disabled):checked .fui-Checkbox__icon { display: inline; line-height: 0; } .fui-Checkbox__input:not(:disabled):checked:hover + .fui-Checkbox__indicator { background-color: var(--colorCompoundBrandBackgroundHover); border-color: var(--colorCompoundBrandBackgroundPressed); } .fui-Checkbox__input:not(:disabled):checked:active + .fui-Checkbox__indicator { background-color: var(--colorCompoundBrandBackgroundHover); border-color: var(--colorCompoundBrandBackgroundPressed); } .fui-Checkbox__input:not(:disabled):checked + .fui-Checkbox__indicator { color: var(--fui-Checkbox__indicator--color); background-color: var(--fui-Checkbox__indicator--backgroundColor); border-color: var(--fui-Checkbox__indicator--borderColor, var(--colorNeutralStrokeAccessible)); } .fui-Checkbox__input:disabled + .fui-Checkbox__indicator { color: var(--colorNeutralForegroundDisabled); border-color: var(--colorNeutralStrokeDisabled); } .fui-Checkbox__input:disabled + .fui-Checkbox__indicator + .fui-Checkbox__label { color: var(--colorNeutralForegroundDisabled); } .fui-Checkbox__input:checked + .fui-Checkbox__indicator .fui-Checkbox__icon { display: block; } .fui-Checkbox__input + .fui-Checkbox__indicator { align-self: flex-start; box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-style: solid; border-width: var(--strokeWidthThin); border-radius: var(--borderRadiusSmall); margin: var(--spacingVerticalS) var(--spacingHorizontalS); fill: currentcolor; pointer-events: none; font-size: 12px; height: 16px; width: 16px; } .fui-Checkbox__input + .fui-Checkbox__indicator:hover { color: var(--fui-Checkbox__indicator--color--hover); background-color: var(--fui-Checkbox__indicator--backgroundColor--hover); border-color: var(--fui-Checkbox__indicator--borderColor--hover, var(--colorNeutralStrokeAccessible)); } .fui-Checkbox__input + .fui-Checkbox__indicator .fui-Checkbox__icon { display: none; } .fui-Checkbox__input + .fui-Checkbox__indicator + .fui-Checkbox__label { margin-bottom: calc((16px - var(--lineHeightBase300)) / 2); margin-top: calc((16px - var(--lineHeightBase300)) / 2); cursor: inherit; color: inherit; align-self: center; padding-left: var(--spacingHorizontalXS); padding-bottom: var(--spacingVerticalS); padding-top: var(--spacingVerticalS); padding-right: var(--spacingHorizontalS); line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); } .fui-Checkbox__input.fui-Checkbox__input-xs + .fui-Checkbox__indicator { width: 10px; height: 10px; font-size: 8px; } .fui-Checkbox__input.fui-Checkbox__input-xs + .fui-Checkbox__indicator + .fui-Checkbox__label { padding: 0; } .fui-Checkbox__input.fui-Checkbox__input-sm + .fui-Checkbox__indicator { width: 12px; height: 12px; font-size: 10px; } .fui-Checkbox__input.fui-Checkbox__input-sm + .fui-Checkbox__indicator + .fui-Checkbox__label { padding: 0; } .fui-Checkbox__input.fui-Checkbox__input-md + .fui-Checkbox__indicator { width: 18px; height: 18px; font-size: 14px; } .fui-Checkbox__input.fui-Checkbox__input-md + .fui-Checkbox__indicator .fui-Checkbox__icon { transform: scale(1.2); } .fui-Checkbox__input.fui-Checkbox__input-lg + .fui-Checkbox__indicator { width: 20px; height: 20px; font-size: 16px; } .fui-Checkbox__input.fui-Checkbox__input-lg + .fui-Checkbox__indicator .fui-Checkbox__icon { transform: scale(1.333); } .fui-Checkbox__input.fui-Checkbox__input-lg + .fui-Checkbox__indicator + .fui-Checkbox__label { margin-bottom: calc((20px - var(--lineHeightBase300)) / 2); margin-top: calc((20x - var(--lineHeightBase300)) / 2); } .fui-Checkbox__input.fui-Checkbox__input-xl + .fui-Checkbox__indicator { width: 24px; height: 24px; font-size: 20px; } .fui-Checkbox__input.fui-Checkbox__input-xl + .fui-Checkbox__indicator .fui-Checkbox__icon { transform: scale(1.666); } .fui-Checkbox__input.fui-Checkbox__input-xl + .fui-Checkbox__indicator + .fui-Checkbox__label { margin-bottom: calc((24px - var(--lineHeightBase300)) / 2); margin-top: calc((24x - var(--lineHeightBase300)) / 2); } .fui-ColorPicker { display: inline-flex; box-sizing: border-box; justify-content: start; align-items: center; } .fui-ColorPicker .fui-Input__colorPreview { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; position: relative; width: 20px; height: 20px; padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS)); border-radius: var(--borderRadiusCircular); border-color: var(--colorTransparentStroke); } .fui-ColorPicker .fui-Input__colorValue { font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase200); min-width: max-content; padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); } .fui-ColorPicker-error { border-bottom-color: var(--colorPaletteRedBorder2) !important; border-left-color: var(--colorPaletteRedBorder2) !important; border-right-color: var(--colorPaletteRedBorder2) !important; border-top-color: var(--colorPaletteRedBorder2) !important; } .fui-ColorPicker-success { border-bottom-color: var(--colorPaletteGreenForeground1) !important; border-left-color: var(--colorPaletteGreenForeground1) !important; border-right-color: var(--colorPaletteGreenForeground1) !important; border-top-color: var(--colorPaletteGreenForeground1) !important; } .fui-Container, .fui-Container-fluid, .fui-Container-xxl, .fui-Container-xl, .fui-Container-lg, .fui-Container-md, .fui-Container-sm { width: 100%; padding-right: calc(var(--spacingHorizontalXXL) * 0.5); padding-left: calc(var(--spacingHorizontalXXL) * 0.5); margin-right: auto; margin-left: auto; } @media (min-width: 600px) { .fui-Container-sm, .fui-Container { max-width: 540px; } } @media (min-width: 960px) { .fui-Container-md, .fui-Container-sm, .fui-Container { max-width: 920px; } } @media (min-width: 1280px) { .fui-Container-lg, .fui-Container-md, .fui-Container-sm, .fui-Container { max-width: 1220px; } } @media (min-width: 1920px) { .fui-Container-xl, .fui-Container-lg, .fui-Container-md, .fui-Container-sm, .fui-Container { max-width: 1880px; } } @media (min-width: 2560px) { .fui-Container-xxl, .fui-Container-xl, .fui-Container-lg, .fui-Container-md, .fui-Container-sm, .fui-Container { max-width: 2520px; } } .fui-Divider { text-align: center; flex-direction: row; box-sizing: border-box; position: relative; width: 100%; align-items: center; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2); line-height: var(--lineHeightBase200); flex-grow: 1; display: flex; font-weight: var(--fontWeightRegular); font-family: var(--fontFamilyBase); } .fui-Divider.fui-Divider-solid::before, .fui-Divider.fui-Divider-text::before { border-top-style: solid; } .fui-Divider.fui-Divider-solid::after, .fui-Divider.fui-Divider-text::after { border-top-style: solid; } .fui-Divider.fui-Divider-dashed::before { border-top-style: dashed; } .fui-Divider.fui-Divider-dashed::after { border-top-style: dashed; } .fui-Divider.fui-Divider-dotted::before { border-top-style: dotted; } .fui-Divider.fui-Divider-dotted::after { border-top-style: dotted; } .fui-Divider::before { min-width: 8px; border-top-width: var(--strokeWidthThin); border-bottom-color: var(--colorNeutralStroke2); border-left-color: var(--colorNeutralStroke2); border-right-color: var(--colorNeutralStroke2); border-top-color: var(--colorNeutralStroke2); margin-right: 0px; margin-bottom: 0px; flex-grow: 1; display: flex; box-sizing: border-box; content: ""; } .fui-Divider::after { min-width: 8px; border-top-width: var(--strokeWidthThin); border-bottom-color: var(--colorNeutralStroke2); border-left-color: var(--colorNeutralStroke2); border-right-color: var(--colorNeutralStroke2); border-top-color: var(--colorNeutralStroke2); margin-top: 0px; margin-left: 0px; flex-grow: 1; display: flex; box-sizing: border-box; content: ""; } .fui-Divider .fui-Divider__wrapper { margin-left: 12px; margin-right: 12px; } .fui-Dropdown { min-width: 250px; display: inline-block; border-bottom-color: var(--colorNeutralStrokeAccessible); border-bottom-width: var(--strokeWidthThin); border-left-width: var(--strokeWidthThin); border-right-width: var(--strokeWidthThin); border-top-width: var(--strokeWidthThin); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; box-sizing: border-box; position: relative; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); } .fui-Dropdown:active { border-bottom-color: var(--colorNeutralStrokeAccessible); border-left-color: var(--colorNeutralStroke1Pressed); border-right-color: var(--colorNeutralStroke1Pressed); border-top-color: var(--colorNeutralStroke1Pressed); } .fui-Dropdown:hover { border-bottom-color: var(--colorNeutralStrokeAccessible); border-left-color: var(--colorNeutralStroke1Hover); border-right-color: var(--colorNeutralStroke1Hover); border-top-color: var(--colorNeutralStroke1Hover); } .fui-Dropdown:focus-within { outline-width: 2px; outline-color: transparent; outline-style: solid; } .fui-Dropdown:after { transition-delay: var(--curveAccelerateMid); transition-duration: var(--durationUltraFast); transition-property: transform; transform: scaleX(0); clip-path: inset(calc(100% - 2px) 0px 0px); border-bottom-color: var(--colorCompoundBrandStroke); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThick); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); height: max(var(--strokeWidthThick), var(--borderRadiusMedium)); bottom: -1px; right: -1px; left: -1px; position: absolute; content: ""; box-sizing: border-box; } .fui-Dropdown:focus-within::after { transition-delay: var(--curveDecelerateMid); transition-duration: var(--durationNormal); transition-property: transform; transform: scaleX(1); } .fui-Dropdown__button { padding-left: calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)); justify-content: space-between; box-sizing: border-box; padding-right: var(--spacingHorizontalMNudge); column-gap: var(--spacingHorizontalXXS); display: grid; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; cursor: pointer; width: 100%; align-items: center; padding-bottom: 5px; padding-top: 5px; background-color: var(--colorTransparentBackground); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); text-align: left; color: var(--colorNeutralForeground1); } .fui-Dropdown__button:focus { outline-style: none; } .fui-Dropdown__button .fui-Dropdown__expandIcon { margin-left: var(--spacingHorizontalXXS); grid-column-end: end; grid-column-start: icon; color: var(--colorNeutralStrokeAccessible); display: block; box-sizing: border-box; font-size: 20px; } .fui-Dropdown__button .fui-Dropdown__expandIcon > svg { display: block; line-height: 0; } .fui-Listbox.fui-Dropdown__listbox { row-gap: var(--spacingHorizontalXXS); padding-bottom: var(--spacingHorizontalXS); padding-top: var(--spacingHorizontalXS); outline-color: var(--colorTransparentStroke); outline-style: solid; outline-width: 1px; min-width: 160px; max-height: 80vh; box-shadow: var(--shadow16); box-sizing: border-box; overflow-y: auto; padding-right: var(--spacingHorizontalXS); padding-left: var(--spacingHorizontalXS); flex-direction: column; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); display: none; background-color: var(--colorNeutralBackground1); z-index: 1; } .fui-Listbox.fui-Dropdown__listbox-show { display: flex; } .fui-Listbox.fui-Dropdown__listbox-position-strategy { top: 0; left: 0; --fui-match-target-size: 250px; width: var(--fui-match-target-size); z-index: calc(var(--zIndexDropdown) + 1); } .fui-Listbox.fui-Dropdown__listbox-position-strategy-absolute { position: absolute; } .fui-Listbox.fui-Dropdown__listbox-position-strategy-fixed { position: fixed; } .fui-Listbox.fui-Dropdown__listbox .fui-Option { column-gap: var(--spacingHorizontalXS); padding-bottom: var(--spacingVerticalSNudge); padding-top: var(--spacingVerticalSNudge); position: relative; cursor: pointer; align-items: center; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); display: flex; line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); color: var(--colorNeutralForeground1); } .fui-Listbox.fui-Dropdown__listbox .fui-Option:active { color: var(--colorNeutralForeground1Pressed); background-color: var(--colorNeutralBackground1Pressed); } .fui-Listbox.fui-Dropdown__listbox .fui-Option:active .fui-Option__checkIcon { border-bottom-color: var(--colorNeutralForeground1Hover); border-left-color: var(--colorNeutralForeground1Hover); border-right-color: var(--colorNeutralForeground1Hover); border-top-color: var(--colorNeutralForeground1Hover); } .fui-Listbox.fui-Dropdown__listbox .fui-Option:hover { color: var(--colorNeutralForeground1Hover); background-color: var(--colorNeutralBackground1Hover); } .fui-Listbox.fui-Dropdown__listbox .fui-Option:hover .fui-Option__checkIcon { border-bottom-color: var(--colorNeutralForeground1Hover); border-left-color: var(--colorNeutralForeground1Hover); border-right-color: var(--colorNeutralForeground1Hover); border-top-color: var(--colorNeutralForeground1Hover); } .fui-Listbox.fui-Dropdown__listbox .fui-Option:not([role=menuitemcheckbox]) .fui-Option__checkIcon { visibility: hidden; margin-left: calc(var(--spacingHorizontalXXS) * -1); margin-right: var(--spacingHorizontalXXS); font-size: var(--fontSizeBase400); } .fui-Listbox.fui-Dropdown__listbox .fui-Option:not([role=menuitemcheckbox]) .fui-Option__checkIcon > svg { display: block; line-height: 0; } .fui-Listbox.fui-Dropdown__listbox .fui-Option:not([role=menuitemcheckbox]) .fui-Option__checkIcon[aria-checked=true] { visibility: visible; } .fui-Listbox.fui-Dropdown__listbox .fui-Option[role=menuitemcheckbox] .fui-Option__checkIcon { fill: currentcolor; justify-content: center; border-top-left-radius: var(--borderRadiusSmall); border-top-right-radius: var(--borderRadiusSmall); border-bottom-left-radius: var(--borderRadiusSmall); border-bottom-right-radius: var(--borderRadiusSmall); border-left-color: var(--colorNeutralStrokeAccessible); border-right-color: var(--colorNeutralStrokeAccessible); border-top-color: var(--colorNeutralStrokeAccessible); visibility: visible; margin-left: calc(var(--spacingHorizontalXXS) * -1); margin-right: var(--spacingHorizontalXXS); border-bottom-color: var(--colorNeutralStrokeAccessible); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-width: var(--strokeWidthThin); border-left-width: var(--strokeWidthThin); border-right-width: var(--strokeWidthThin); border-top-width: var(--strokeWidthThin); box-sizing: border-box; align-items: center; width: 16px; height: 16px; font-size: 12px; display: flex; } .fui-Listbox.fui-Dropdown__listbox .fui-Option[role=menuitemcheckbox] .fui-Option__checkIcon > svg { display: block; line-height: 0; } .fui-Listbox.fui-Dropdown__listbox .fui-OptionGroup__label { padding-bottom: var(--spacingHorizontalS); padding-top: var(--spacingHorizontalS); color: var(--colorNeutralForeground3); display: block; padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase200); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase200); } .fui-Listbox.fui-Dropdown__listbox .fui-Option__divider { margin-bottom: var(--spacingVerticalXS); margin-left: calc(var(--spacingHorizontalXS) * -1); margin-right: calc(var(--spacingHorizontalXS) * -1); margin-top: 0px; padding-bottom: var(--spacingHorizontalXS); display: block; border-bottom-color: var(--colorNeutralStroke2); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); } .fui-Menu { --fui-positioning-slide-distance-y: -10px; --fui-positioning-slide-distance-x: 0px; } .fui-Menu-up { --fui-positioning-slide-distance-y: 10px; --fui-positioning-slide-distance-x: 0px; } .fui-Menu-start { --fui-positioning-slide-distance-y: 0px; --fui-positioning-slide-distance-x: 10px; } .fui-Menu-end { --fui-positioning-slide-distance-y: 0px; --fui-positioning-slide-distance-x: -10px; } .fui-Menu .fui-Button.fui-MenuButton .fui-MenuButton__menuIcon { margin-left: var(--spacingHorizontalXS); width: 12px; line-height: var(--lineHeightBase200); height: 12px; font-size: 12px; } .fui-Menu .fui-Button.fui-MenuButton .fui-MenuButton__menuIcon > svg { display: inline; line-height: 0; } .fui-Menu .fui-Button.fui-MenuButton.fui-SplitButton__menuButton { min-width: 0px; border-bottom-left-radius: 0px; border-top-left-radius: 0px; border-left-width: 0px; } .fui-Menu .fui-Button.fui-MenuButton.fui-MenuButton-toggle-hidden .fui-MenuButton__menuIcon { display: none; } .fui-Menu .fui-Button.fui-MenuButton-xs { line-height: var(--lineHeightBase100); font-size: var(--fontSizeBase100); font-weight: var(--fontWeightRegular); border-radius: var(--borderRadiusMedium); padding: 3px var(--spacingHorizontalXS); } .fui-Menu .fui-Button.fui-MenuButton-sm { line-height: var(--lineHeightBase200); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightRegular); border-radius: var(--borderRadiusMedium); padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); padding-top: 3px; padding-bottom: 3px; } .fui-Menu .fui-Button.fui-MenuButton-md { line-height: var(--lineHeightBase400); font-size: var(--fontSizeBase400); font-weight: var(--fontWeightRegular); border-radius: var(--borderRadiusMedium); padding-left: var(--spacingHorizontalM); padding-right: var(--spacingHorizontalM); padding-top: 6px; padding-bottom: 6px; } .fui-Menu .fui-Button.fui-MenuButton-lg { line-height: var(--lineHeightBase400); font-size: var(--fontSizeBase400); font-weight: var(--fontWeightSemibold); padding-left: var(--spacingHorizontalL); padding-right: var(--spacingHorizontalL); padding-top: 8px; padding-bottom: 8px; border-radius: var(--borderRadiusMedium); } .fui-Menu .fui-Button.fui-MenuButton-xl { line-height: var(--lineHeightBase400); font-size: var(--fontSizeBase400); font-weight: var(--fontWeightSemibold); padding-left: var(--spacingHorizontalXL); padding-right: var(--spacingHorizontalXL); padding-top: 12px; padding-bottom: 12px; border-radius: var(--borderRadiusMedium); } .fui-Menu.fui-MenuButton-show.fui-Menu-up .fui-MenuButton__menuIcon > svg { transform: rotate(180deg); } .fui-Menu.fui-MenuButton-show.fui-Menu-down .fui-MenuButton__menuIcon > svg { transform: rotate(-180deg); } .fui-Menu.fui-MenuButton-show.fui-Menu-start .fui-MenuButton__menuIcon > svg { transform: rotate(90deg); } .fui-Menu.fui-MenuButton-show.fui-Menu-end .fui-MenuButton__menuIcon > svg { transform: rotate(-90deg); } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slidein { 0% { transform: translate(var(--fui-positioning-slide-distance-x), var(--fui-positioning-slide-distance-y)); } } .fui-Menu .fui-MenuPopover { animation-name: fadein, slidein; animation-timing-function: var(--curveDecelerateMid); animation-duration: var(--durationSlower); animation-composition: accumulate; padding-bottom: 4px; box-shadow: var(--shadow16); width: max-content; overflow-x: hidden; /*max-width: 300px; min-width: 138px;*/ padding-top: 4px; border-bottom-color: var(--colorTransparentStroke); border-left-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-top-color: var(--colorTransparentStroke); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; box-sizing: border-box; padding-right: 4px; padding-left: 4px; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); display: none; } .fui-Menu .fui-MenuPopover-show { display: flex; } .fui-Menu .fui-MenuPopover-position-strategy { z-index: calc(var(--zIndexDropdown) + 1); } .fui-Menu .fui-MenuPopover-position-strategy-absolute { position: absolute; } .fui-Menu .fui-MenuPopover-position-strategy-fixed { position: fixed; } .fui-Menu .fui-MenuPopover-scrollable { max-height: var(--dropdown-list-menu-max-height, 200px); overflow-y: scroll; } .fui-Menu .fui-MenuPopover .fui-MenuList { height: 100%; row-gap: 2px; column-gap: 2px; flex-direction: column; display: flex; z-index: 1; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuGroup { padding-bottom: var(--spacingHorizontalS); padding-top: var(--spacingHorizontalS); color: var(--colorNeutralForeground3); display: block; padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase200); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase200); } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuDivider { margin-bottom: var(--spacingVerticalXS); margin-left: calc(var(--spacingHorizontalXS) * -1); margin-right: calc(var(--spacingHorizontalXS) * -1); margin-top: 0px; padding-bottom: var(--spacingHorizontalXS); display: block; border-bottom-color: var(--colorNeutralStroke2); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem { border-radius: var(--borderRadiusMedium); position: relative; color: var(--colorNeutralForeground2); background-color: var(--colorNeutralBackground1); padding-right: var(--spacingVerticalSNudge); padding-left: var(--spacingVerticalSNudge); padding-top: var(--spacingVerticalSNudge); box-sizing: border-box; max-width: 290px; min-height: 32px; flex-shrink: 0; display: flex; align-items: start; font-size: var(--fontSizeBase300); cursor: pointer; gap: 4px; user-select: none; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem[aria-disabled=true] { color: var(--colorNeutralForegroundDisabled); } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem[aria-disabled=true] .fui-MenuItem__content { color: var(--colorNeutralForegroundDisabled); } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem:not([aria-disabled=true]):focus, .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem:not([aria-disabled=true]):focus-visible { outline-style: none; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem:not([aria-disabled=true]):hover { background-color: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground2Hover); } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem:not([aria-disabled=true]):hover:active { background-color: var(--colorNeutralBackground1Pressed); color: var(--colorNeutralForeground2Pressed); } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem .fui-MenuItem__content { padding-left: 2px; padding-right: 2px; background-color: transparent; flex-grow: 1; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem .fui-MenuItem__checkmark { margin-top: 2px; visibility: hidden; width: 16px; height: 16px; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem .fui-MenuItem__checkmark > svg { display: inline; line-height: 0; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem[aria-checked=true] .fui-MenuItem__checkmark { visibility: visible; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem .fui-MenuItem__submenuIndicator { width: 20px; height: 20px; font-size: 20px; line-height: 0; align-items: center; display: inline-flex; justify-content: center; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem .fui-MenuItem__submenuIndicator .fui-Icon-filled { display: none; line-height: 0; } .fui-Menu .fui-MenuPopover .fui-MenuList .fui-MenuItem .fui-MenuItem__submenuIndicator .fui-Icon-regular { display: inline; line-height: 0; } .fui-Field { margin-bottom: var(--spacingVerticalM); } .fui-Field.fui-FieldHorizontal { display: flex; flex-direction: row; flex-wrap: wrap; } .fui-Label.fui-LabelHorizontal { padding-bottom: var(--spacingVerticalXXS); padding-top: var(--spacingVerticalXXS); line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); color: var(--colorNeutralForeground1); } .fui-Label:not(.fui-LabelHorizontal) { margin-bottom: var(--spacingVerticalXXS); } .fui-Label .fui-Label__required { padding-left: 4px; color: var(--colorPaletteRedForeground3); line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); } .fui-Field__hint { margin-top: var(--spacingVerticalXXS); color: var(--colorNeutralForeground3); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase200); } .fui-Input + .fui-Field__validationMessage, .fui-Select + .fui-Field__validationMessage, .fui-SpinButton + .fui-Field__validationMessage, .fui-Checkbox + .fui-Field__validationMessage, .fui-ColorPicker + .fui-Field__validationMessage { margin-top: var(--spacingVerticalXXS); color: var(--colorNeutralForeground3); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase200); padding-left: calc(12px + var(--spacingHorizontalXS)); } .fui-Input + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker + .fui-Field__validationMessage .fui-Field__validationMessageIcon { display: inline-block; font-size: 12px; margin-left: calc(-12px - var(--spacingHorizontalXS)); margin-right: var(--spacingHorizontalXS); line-height: 0; vertical-align: -1px; } .fui-Input.fui-Input-error + .fui-Field__validationMessage, .fui-Input.fui-Select-error + .fui-Field__validationMessage, .fui-Input.fui-SpinButton-error + .fui-Field__validationMessage, .fui-Input.fui-Checkbox-error + .fui-Field__validationMessage, .fui-Input.fui-ColorPicker-error + .fui-Field__validationMessage, .fui-Select.fui-Input-error + .fui-Field__validationMessage, .fui-Select.fui-Select-error + .fui-Field__validationMessage, .fui-Select.fui-SpinButton-error + .fui-Field__validationMessage, .fui-Select.fui-Checkbox-error + .fui-Field__validationMessage, .fui-Select.fui-ColorPicker-error + .fui-Field__validationMessage, .fui-SpinButton.fui-Input-error + .fui-Field__validationMessage, .fui-SpinButton.fui-Select-error + .fui-Field__validationMessage, .fui-SpinButton.fui-SpinButton-error + .fui-Field__validationMessage, .fui-SpinButton.fui-Checkbox-error + .fui-Field__validationMessage, .fui-SpinButton.fui-ColorPicker-error + .fui-Field__validationMessage, .fui-Checkbox.fui-Input-error + .fui-Field__validationMessage, .fui-Checkbox.fui-Select-error + .fui-Field__validationMessage, .fui-Checkbox.fui-SpinButton-error + .fui-Field__validationMessage, .fui-Checkbox.fui-Checkbox-error + .fui-Field__validationMessage, .fui-Checkbox.fui-ColorPicker-error + .fui-Field__validationMessage, .fui-ColorPicker.fui-Input-error + .fui-Field__validationMessage, .fui-ColorPicker.fui-Select-error + .fui-Field__validationMessage, .fui-ColorPicker.fui-SpinButton-error + .fui-Field__validationMessage, .fui-ColorPicker.fui-Checkbox-error + .fui-Field__validationMessage, .fui-ColorPicker.fui-ColorPicker-error + .fui-Field__validationMessage { color: var(--colorPaletteRedForeground1); } .fui-Input.fui-Input-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Input.fui-Select-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Input.fui-SpinButton-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Input.fui-Checkbox-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Input.fui-ColorPicker-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-Input-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-Select-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-SpinButton-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-Checkbox-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-ColorPicker-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-Input-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-Select-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-SpinButton-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-Checkbox-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-ColorPicker-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-Input-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-Select-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-SpinButton-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-Checkbox-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-ColorPicker-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-Input-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-Select-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-SpinButton-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-Checkbox-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-ColorPicker-error + .fui-Field__validationMessage .fui-Field__validationMessageIcon { color: var(--colorPaletteRedForeground1); } .fui-Input.fui-Input-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Input.fui-Select-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Input.fui-SpinButton-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Input.fui-Checkbox-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Input.fui-ColorPicker-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-Input-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-Select-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-SpinButton-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-Checkbox-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Select.fui-ColorPicker-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-Input-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-Select-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-SpinButton-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-Checkbox-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-SpinButton.fui-ColorPicker-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-Input-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-Select-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-SpinButton-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-Checkbox-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-Checkbox.fui-ColorPicker-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-Input-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-Select-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-SpinButton-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-Checkbox-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon, .fui-ColorPicker.fui-ColorPicker-success + .fui-Field__validationMessage .fui-Field__validationMessageIcon { color: var(--colorPaletteGreenForeground1); } .fui-Input.fui-Input-xs, .fui-Select.fui-Input-xs, .fui-SpinButton.fui-Input-xs, .fui-Checkbox.fui-Input-xs, .fui-ColorPicker.fui-Input-xs { min-height: 16px; padding-left: var(--spacingHorizontalXS); padding-right: var(--spacingHorizontalXS); font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); font-weight: var(--fontWeightRegular); font-family: var(--fontFamilyBase); } .fui-Input.fui-Input-sm, .fui-Select.fui-Input-sm, .fui-SpinButton.fui-Input-sm, .fui-Checkbox.fui-Input-sm, .fui-ColorPicker.fui-Input-sm { min-height: 24px; padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightRegular); font-family: var(--fontFamilyBase); } .fui-Input.fui-Input-md, .fui-Select.fui-Input-md, .fui-SpinButton.fui-Input-md, .fui-Checkbox.fui-Input-md, .fui-ColorPicker.fui-Input-md { min-height: 36px; row-gap: var(--spacingHorizontalSNudge); padding-left: var(--spacingHorizontalM); padding-right: var(--spacingHorizontalM); column-gap: var(--spacingHorizontalSNudge); font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightRegular); font-family: var(--fontFamilyBase); } .fui-Input.fui-Input-lg, .fui-Select.fui-Input-lg, .fui-SpinButton.fui-Input-lg, .fui-Checkbox.fui-Input-lg, .fui-ColorPicker.fui-Input-lg { min-height: 40px; row-gap: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalL); padding-left: var(--spacingHorizontalL); column-gap: var(--spacingHorizontalSNudge); font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightRegular); font-family: var(--fontFamilyBase); } .fui-Input.fui-Input-xl, .fui-Select.fui-Input-xl, .fui-SpinButton.fui-Input-xl, .fui-Checkbox.fui-Input-xl, .fui-ColorPicker.fui-Input-xl { min-height: 48px; row-gap: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalXL); padding-left: var(--spacingHorizontalXL); column-gap: var(--spacingHorizontalSNudge); font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightRegular); font-family: var(--fontFamilyBase); } .fui-Fields { display: flex; flex-wrap: wrap; margin-right: calc(-1 * var(--spacingHorizontalM) * 0.5); margin-left: calc(-1 * var(--spacingHorizontalM) * 0.5); } .fui-Fields > .fui-Column, .fui-Fields > [class*=fui-Column-] { padding-right: calc(var(--spacingHorizontalM) * 0.5); padding-left: calc(var(--spacingHorizontalM) * 0.5); } .fui-Fields-inline { display: flex; flex-flow: row wrap; align-items: center; } @media (min-width: 600px) { .fui-Fields-inline .fui-Field { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: var(--spacingVerticalNone); } } figure { margin: 0 0 1rem; } .fui-Figure { display: inline-block; } .fui-Figure-16x16 { height: 16px; width: 16px; } .fui-Figure-24x24 { height: 24px; width: 24px; } .fui-Figure-32x32 { height: 32px; width: 32px; } .fui-Figure-48x48 { height: 48px; width: 48px; } .fui-Figure-64x64 { height: 64px; width: 64px; } .fui-Figure-96x96 { height: 96px; width: 96px; } .fui-Figure-128x128 { height: 128px; width: 128px; } .fui-Figure-256x256 { height: 256px; width: 256px; } .fui-Figure-512x512 { height: 512px; width: 512px; } .fui-Figure-rounded { border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); } .fui-Figure__image { margin-bottom: calc(var(--spacingHorizontalM) * 0.5); line-height: 1; max-width: 100%; height: auto; } .fui-Figure__caption { color: var(--colorNeutralForeground3); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase200); } .fui-FocusTrap { display: contents; } input::file-selector-button { background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); border: none; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase300); cursor: pointer; } .fui-Image { display: inline-block; box-sizing: border-box; border-bottom-color: var(--colorNeutralStroke1); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); border-top-left-radius: var(--borderRadiusNone); border-top-right-radius: var(--borderRadiusNone); border-bottom-left-radius: var(--borderRadiusNone); border-bottom-right-radius: var(--borderRadiusNone); } .fui-Image-fluid { max-width: 100%; height: auto; } .fui-Input, .fui-Textarea { align-items: center; border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); border-left-style: solid; border-left-width: var(--strokeWidthThin); border-radius: var(--borderRadiusMedium); border-right-style: solid; border-right-width: var(--strokeWidthThin); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-top-style: solid; border-top-width: var(--strokeWidthThin); box-sizing: border-box; color: var(--colorNeutralForeground1); display: inline-flex; position: relative; text-align: left; width: 100%; max-width: 100%; } .fui-Input.disabled, .fui-Textarea.disabled { cursor: not-allowed; border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorTransparentBackground); } .fui-Input:after, .fui-Textarea:after { box-sizing: border-box; content: ""; position: absolute; left: -1px; bottom: -1px; right: -1px; height: max(2px, var(--borderRadiusMedium)); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom: 2px solid var(--colorCompoundBrandStroke); clip-path: inset(calc(100% - 2px) 0px 0px); transform: scaleX(0); transition-property: transform; transition-duration: var(--durationUltraFast); transition-delay: var(--curveAccelerateMid); } .fui-Input:focus-within::after, .fui-Textarea:focus-within::after { transform: scaleX(1); transition-property: transform; transition-duration: var(--durationNormal); transition-delay: var(--curveDecelerateMid); } .fui-Input { flex-wrap: nowrap; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); gap: var(--spacingHorizontalXXS); line-height: var(--lineHeightBase300); min-height: 32px; padding: 0 var(--spacingHorizontalMNudge); } .fui-Input:not(.disabled) { border-bottom-color: var(--colorNeutralStrokeAccessible); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); background-color: var(--colorNeutralBackground1); } .fui-Input:not(.disabled):hover { border-bottom-color: var(--colorNeutralStrokeAccessibleHover); border-left-color: var(--colorNeutralStroke1Hover); border-right-color: var(--colorNeutralStroke1Hover); border-top-color: var(--colorNeutralStroke1Hover); } .fui-Input:not(.disabled):active, .fui-Input:not(.disabled):focus, .fui-Input:not(.disabled):focus-within { border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); border-left-color: var(--colorNeutralStroke1Pressed); border-right-color: var(--colorNeutralStroke1Pressed); border-top-color: var(--colorNeutralStroke1Pressed); } .fui-Input:not(.disabled):focus-within { outline: transparent solid 2px; } .fui-Input:not(.disabled).fui-Input-plaintext { border-left-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-top-color: var(--colorTransparentStroke); border-bottom-color: var(--colorTransparentStroke); } .fui-Input .fui-Input__input, .fui-Input .fui-Input__input-plaintext { background-color: transparent; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; box-sizing: border-box; color: var(--colorNeutralForeground1); flex-grow: 1; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-width: 0px; outline-style: none; padding: 0 var(--spacingHorizontalXXS); } .fui-Input .fui-Input__input:not(:disabled), .fui-Input .fui-Input__input-plaintext:not(:disabled) { background-color: transparent; } .fui-Input .fui-Input__input:disabled, .fui-Input .fui-Input__input-plaintext:disabled { cursor: not-allowed; color: var(--colorNeutralForegroundDisabled); background-color: var(--colorTransparentBackground); } .fui-Input .fui-Input__input[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext[type=datetime-local]::-webkit-calendar-picker-indicator { color: var(--colorNeutralForeground3); background-image: url("data:image/svg+xml,%3Csvg fill='currentColor' aria-hidden='true' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E"); font-size: 20px; display: inline; line-height: 0; cursor: pointer; } .fui-Input .fui-Input__input.fui-Input__input-xs[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-xs[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-xs[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-xs[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-xs[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-xs[type=time]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xs[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xs[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xs[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xs[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xs[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xs[type=time]::-webkit-calendar-picker-indicator { font-size: 10px; } .fui-Input .fui-Input__input.fui-Input__input-sm[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-sm[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-sm[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-sm[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-sm[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-sm[type=time]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-sm[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-sm[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-sm[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-sm[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-sm[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-sm[type=time]::-webkit-calendar-picker-indicator { font-size: 16px; } .fui-Input .fui-Input__input.fui-Input__input-md[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-md[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-md[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-md[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-md[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-md[type=time]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-md[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-md[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-md[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-md[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-md[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-md[type=time]::-webkit-calendar-picker-indicator { font-size: 22px; } .fui-Input .fui-Input__input.fui-Input__input-lg[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-lg[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-lg[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-lg[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-lg[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-lg[type=time]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-lg[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-lg[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-lg[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-lg[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-lg[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-lg[type=time]::-webkit-calendar-picker-indicator { font-size: 24px; } .fui-Input .fui-Input__input.fui-Input__input-xl[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-xl[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-xl[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-xl[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input.fui-Input__input-xl[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input.fui-Input__input-xl[type=time]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xl[type=date]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xl[type=date]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xl[type=datetime-local]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xl[type=datetime-local]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xl[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xl[type=time]::-webkit-calendar-picker-indicator { font-size: 28px; } .fui-Input .fui-Input__input[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input[type=time]::-webkit-calendar-picker-indicator, .fui-Input .fui-Input__input-plaintext[type=time]::-webkit-inner-spin-button, .fui-Input .fui-Input__input-plaintext[type=time]::-webkit-calendar-picker-indicator { color: var(--colorNeutralForeground3); background-image: url("data:image/svg+xml,%3Csvg fill='currentColor' aria-hidden='true' width='1em' height='1em' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E"); font-size: 20px; display: inline; line-height: 0; cursor: pointer; } .fui-Input .fui-Input__input + .fui-Input__contentAfter, .fui-Input .fui-Input__input-plaintext + .fui-Input__contentAfter { box-sizing: border-box; color: var(--colorNeutralForeground3); display: flex; cursor: pointer; } .fui-Input .fui-Input__input + .fui-Input__contentAfter .fui-Input__contentAfter-icon, .fui-Input .fui-Input__input-plaintext + .fui-Input__contentAfter .fui-Input__contentAfter-icon { font-size: 20px; display: inline; line-height: 0; color: var(--colorNeutralForeground3); cursor: pointer; } .fui-Input .fui-Input__input[type=color], .fui-Input .fui-Input__input-plaintext[type=color] { display: inline; line-height: 0; cursor: pointer; margin: 0; } .fui-Input .fui-Input__input.fui-Input__input-xs, .fui-Input .fui-Input__input.fui-Input__input-sm, .fui-Input .fui-Input__input.fui-Input__input-md, .fui-Input .fui-Input__input.fui-Input__input-lg, .fui-Input .fui-Input__input.fui-Input__input-xl, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xs, .fui-Input .fui-Input__input-plaintext.fui-Input__input-sm, .fui-Input .fui-Input__input-plaintext.fui-Input__input-md, .fui-Input .fui-Input__input-plaintext.fui-Input__input-lg, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xl { box-sizing: border-box; flex-grow: 1; min-width: 0px; border-style: none; padding: 0 var(--spacingHorizontalXXS); color: var(--colorNeutralForeground1); background-color: transparent; outline-style: none; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } .fui-Input .fui-Input__input.fui-Input__input-md, .fui-Input .fui-Input__input-plaintext.fui-Input__input-md { padding-left: var(--spacingHorizontalSNudge); padding-right: var(--spacingHorizontalSNudge); } .fui-Input .fui-Input__input.fui-Input__input-lg, .fui-Input .fui-Input__input-plaintext.fui-Input__input-lg { padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); } .fui-Input .fui-Input__input.fui-Input__input-xl, .fui-Input .fui-Input__input-plaintext.fui-Input__input-xl { padding-left: var(--spacingHorizontalMNudge); padding-right: var(--spacingHorizontalMNudge); } .fui-Input-error { border-bottom-color: var(--colorPaletteRedBorder2) !important; border-left-color: var(--colorPaletteRedBorder2) !important; border-right-color: var(--colorPaletteRedBorder2) !important; border-top-color: var(--colorPaletteRedBorder2) !important; } .fui-Input-success { border-bottom-color: var(--colorPaletteGreenForeground1) !important; border-left-color: var(--colorPaletteGreenForeground1) !important; border-right-color: var(--colorPaletteGreenForeground1) !important; border-top-color: var(--colorPaletteGreenForeground1) !important; } .fui-Textarea { margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: var(--strokeWidthThick); padding-left: 0px; padding-right: 0px; padding-top: 0px; } .fui-Textarea:not(.disabled) { border-bottom-color: var(--colorNeutralStrokeAccessible); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); background-color: var(--colorNeutralBackground1); } .fui-Textarea:not(.disabled):focus, .fui-Textarea:not(.disabled):focus-within { border-bottom-color: var(--colorCompoundBrandStroke); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-width: var(--strokeWidthThin); border-left-width: var(--strokeWidthThin); border-right-width: var(--strokeWidthThin); border-top-width: var(--strokeWidthThin); outline-color: transparent; outline-style: solid; outline-width: var(--strokeWidthThick); } .fui-Textarea:not(.disabled):hover { border-right-color: var(--colorNeutralStroke1Hover); border-top-color: var(--colorNeutralStroke1Hover); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-width: var(--strokeWidthThin); border-left-width: var(--strokeWidthThin); border-right-width: var(--strokeWidthThin); border-top-width: var(--strokeWidthThin); } .fui-Textarea:not(.disabled):active { border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); border-left-color: var(--colorNeutralStroke1Pressed); border-right-color: var(--colorNeutralStroke1Pressed); border-top-color: var(--colorNeutralStroke1Pressed); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-width: var(--strokeWidthThin); border-left-width: var(--strokeWidthThin); border-right-width: var(--strokeWidthThin); border-top-width: var(--strokeWidthThin); } .fui-Textarea .fui-Textarea__input { /*resize: none;*/ /*max-height: 260px;*/ background-color: transparent; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; box-sizing: border-box; color: var(--colorNeutralForeground1); flex-grow: 1; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); height: 100%; line-height: var(--lineHeightBase300); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 52px; outline-style: none; padding-bottom: var(--spacingVerticalSNudge); padding-left: calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)); padding-right: calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)); padding-top: var(--spacingVerticalSNudge); } .fui-ColorInput.fui-Input__input[type=color]::-webkit-color-swatch-wrapper { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; position: relative; width: 20px; height: 20px; padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS)); border-radius: var(--borderRadiusCircular); border-color: var(--colorTransparentStroke); background-color: var(--fui-ColorInput--value); color: var(--fui-ColorInput--value); } .fui-ColorInput.fui-Input__input[type=color]::-moz-color-swatch { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; position: relative; width: 20px; height: 20px; padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS)); border-radius: var(--borderRadiusCircular); border-color: var(--colorTransparentStroke); background-color: var(--fui-ColorInput--value); color: var(--fui-ColorInput--value); } .fui-ColorInput.fui-Input__input[type=color]::-webkit-color-swatch { display: none; } .b-is-autocomplete.b-is-autocomplete-multipleselection { display: flex; align-items: center; flex-wrap: wrap; width: 100%; max-width: 100%; cursor: text; line-height: var(--lineHeightBase300); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); border-left-style: solid; border-left-width: var(--strokeWidthThin); border-radius: var(--borderRadiusMedium); border-right-style: solid; border-right-width: var(--strokeWidthThin); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-top-style: solid; border-top-width: var(--strokeWidthThin); box-sizing: border-box; border-bottom-color: var(--colorNeutralStroke1); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); } .b-is-autocomplete.b-is-autocomplete-multipleselection > .fui-Badge { margin-top: var(--spacingVerticalSNudge); margin-bottom: var(--spacingVerticalSNudge); flex-grow: initial; } .b-is-autocomplete.b-is-autocomplete-multipleselection > .fui-Input { border: none; box-shadow: none; outline: none; background-color: transparent; max-width: inherit; width: auto; flex-grow: 1; } .fui-Label { line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); color: var(--colorNeutralForeground1); } .fui-Label.fui-Label-strong { font-weight: var(--fontWeightSemibold); } .fui-Label.fui-Label-pointer { cursor: pointer; } .fui-Label.fui-Label-xs { font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); } .fui-Label.fui-Label-sm { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); } .fui-Label.fui-Label-lg { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); } .fui-Label.fui-Label-xl { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); } .b-layout-header-fixed { z-index: var(--zIndexFixed); } .b-layout-footer-fixed { z-index: var(--zIndexFixed); } .b-layout-sider-content { z-index: calc(var(--zIndexFixed) + 1); } .b-layout > .b-layout-header .fui-NavigationBar-horizontal[data-collapse=hide][data-broken=true] { height: var(--b-bar-horizontal-height, auto); } .b-layout > .b-layout-header .fui-NavigationBar-horizontal[data-broken=false] { height: var(--b-bar-horizontal-height, auto); } .b-layout.b-layout-root:not(.b-layout-has-sider) .b-layout-header-fixed, .b-layout.b-layout-root:not(.b-layout-has-sider) > .b-layout .b-layout-header-fixed { position: fixed; top: 0; left: 0; right: 0; flex: 0; } .b-layout.b-layout-root:not(.b-layout-has-sider) .b-layout-header-fixed + .b-layout-content, .b-layout.b-layout-root:not(.b-layout-has-sider) > .b-layout .b-layout-header-fixed + .b-layout-content { margin-top: var(--b-bar-horizontal-height, 60px); } .b-layout.b-layout-root > .b-layout-header.b-layout-header-fixed + .b-layout.b-layout-has-sider { margin-top: var(--b-bar-horizontal-height, 60px); } .fui-Link { font-size: inherit; user-select: text; text-overflow: inherit; text-decoration-thickness: var(--strokeWidthThin); text-decoration-line: none; overflow-y: inherit; overflow-x: inherit; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; color: var(--colorBrandForegroundLink); box-sizing: border-box; background-color: transparent; cursor: pointer; display: inline; margin-top: 0px; font-weight: var(--fontWeightRegular); font-family: var(--fontFamilyBase); text-align: left; } .fui-Link:not([aria-disabled=true]):active { color: var(--colorBrandForegroundLinkPressed); text-decoration-line: underline; } .fui-Link:not([aria-disabled=true]):hover { color: var(--colorBrandForegroundLinkHover); text-decoration-line: underline; } .fui-Link:not([aria-disabled=true]):focus-visible { outline-style: none; text-decoration-style: double; text-decoration-line: underline; text-decoration-color: var(--colorStrokeFocus2); } .fui-Link:not([aria-disabled=true]):visited { pointer-events: none; } .fui-Link[aria-disabled=true] { color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; } .fui-Link[aria-disabled=true]:active { color: var(--colorNeutralForegroundDisabled); text-decoration-line: none; } .fui-Link[aria-disabled=true]:hover { text-decoration-line: none; color: var(--colorNeutralForegroundDisabled); } .fui-Link[aria-disabled=true]:focus-visible { outline-style: none; } .fui-Link-unstyled { text-decoration: none; color: inherit; } .fui-Link-stretched::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; } .fui-ListGroup { display: flex; flex-direction: column; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; margin-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; padding-top: 0px; border-radius: var(--borderRadiusMedium); } .fui-ListGroup.fui-ListGroup-scrollable { overflow-y: scroll; } .fui-ListGroupItem { position: relative; display: block; padding-left: var(--spacingHorizontalM); padding-right: var(--spacingHorizontalM); padding-top: var(--spacingVerticalM); padding-bottom: var(--spacingVerticalM); border: 1px solid var(--colorNeutralStroke2); color: var(--colorNeutralForeground1); } .fui-ListGroupItem:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .fui-ListGroupItem:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .fui-ListGroupItem.fui-ListGroupItem-action:hover, .fui-ListGroupItem.fui-ListGroupItem-action:focus { z-index: 1; cursor: pointer; background-color: var(--colorNeutralBackground3Hover); } .fui-ListGroupItem.fui-ListGroupItem-action.fui-ListGroupItem-active { color: var(--colorNeutralForegroundOnBrand); background-color: var(--colorBrandBackground); } .fui-ListGroupItem.fui-ListGroupItem-disabled, .fui-ListGroupItem:disabled { color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; } .fui-ListGroupItem + .fui-ListGroupItem { border-top-width: 0; } .fui-ListGroupItem-primary { background-color: var(--colorBrandBackground2); color: var(--colorBrandForeground2); } .fui-ListGroupItem-primary.fui-ListGroupItem-action:hover, .fui-ListGroupItem-primary.fui-ListGroupItem-action:focus { background-color: var(--colorBrandBackground2Hover); } .fui-ListGroupItem-primary.fui-ListGroupItem-action.fui-ListGroupItem-active { background-color: var(--colorBrandBackground2Pressed); } .fui-ListGroupItem-secondary { background-color: var(--colorNeutralBackground3); color: var(--colorNeutralForeground3); } .fui-ListGroupItem-secondary.fui-ListGroupItem-action:hover, .fui-ListGroupItem-secondary.fui-ListGroupItem-action:focus { background-color: var(--colorNeutralBackground3Hover); } .fui-ListGroupItem-secondary.fui-ListGroupItem-action.fui-ListGroupItem-active { color: var(--colorNeutralForeground3); background-color: var(--colorNeutralBackground3Selected); } .fui-ListGroupItem-success { background-color: var(--colorStatusSuccessBackground1); color: var(--colorStatusSuccessForeground1); } .fui-ListGroupItem-success.fui-ListGroupItem-action:hover, .fui-ListGroupItem-success.fui-ListGroupItem-action:focus { background-color: var(--colorStatusSuccessBackground2); } .fui-ListGroupItem-success.fui-ListGroupItem-action.fui-ListGroupItem-active { color: var(--colorStatusSuccessBackground1); background-color: var(--colorStatusSuccessBackground3); } .fui-ListGroupItem-danger { background-color: var(--colorStatusDangerBackground1); color: var(--colorStatusDangerForeground1); } .fui-ListGroupItem-danger.fui-ListGroupItem-action:hover, .fui-ListGroupItem-danger.fui-ListGroupItem-action:focus { background-color: var(--colorStatusDangerBackground2); } .fui-ListGroupItem-danger.fui-ListGroupItem-action.fui-ListGroupItem-active { color: var(--colorStatusDangerBackground1); background-color: var(--colorStatusDangerBackground3); } .fui-ListGroupItem-warning { background-color: var(--colorStatusWarningBackground1); color: var(--colorStatusWarningForeground3); } .fui-ListGroupItem-warning.fui-ListGroupItem-action:hover, .fui-ListGroupItem-warning.fui-ListGroupItem-action:focus { background-color: var(--colorStatusWarningBackground2); } .fui-ListGroupItem-warning.fui-ListGroupItem-action.fui-ListGroupItem-active { color: var(--colorStatusWarningBackground1); background-color: var(--colorStatusWarningBackground3); } .fui-ListGroupItem-light { background-color: var(--colorNeutralBackground1); } .fui-ListGroupItem-light.fui-ListGroupItem-action:hover, .fui-ListGroupItem-light.fui-ListGroupItem-action:focus { background-color: var(--colorNeutralBackground1Hover); } .fui-ListGroupItem-light.fui-ListGroupItem-action.fui-ListGroupItem-active { color: var(--colorNeutralForeground3); background-color: var(--colorNeutralBackground1Selected); } .fui-ListGroupItem-dark { background-color: var(--colorNeutralForeground3); color: var(--colorNeutralBackground1); } .fui-ListGroupItem-dark.fui-ListGroupItem-action:hover, .fui-ListGroupItem-dark.fui-ListGroupItem-action:focus { background-color: var(--colorNeutralForeground3Hover); } .fui-ListGroupItem-dark.fui-ListGroupItem-action.fui-ListGroupItem-active { color: var(--colorNeutralForegroundInverted); background-color: var(--colorNeutralForeground3Selected); } .fui-ListGroupItem-link { background-color: var(--colorTransparentBackground); color: var(--colorBrandForegroundLink); } .fui-ListGroupItem-link.fui-ListGroupItem-action:hover, .fui-ListGroupItem-link.fui-ListGroupItem-action:focus { color: var(--colorBrandForegroundLinkHover); } .fui-ListGroupItem-link.fui-ListGroupItem-action.fui-ListGroupItem-active { color: var(--colorBrandForegroundLinkSelected); } .fui-ListGroup-flush { border-radius: 0; } .fui-ListGroup-flush > .fui-ListGroupItem { border-radius: 0; border-width: 0 0 var(--strokeWidthThin); } .fui-ListGroup-flush > .fui-ListGroupItem:last-child { border-bottom-width: 0; } .fui-Media { display: flex; align-items: flex-start; } .fui-Media-left { flex-shrink: 0 !important; } .fui-Media-left + .fui-Media-body { margin-left: var(--spacingHorizontalM) !important; } .fui-Media-right { flex-shrink: 0 !important; } .fui-Media-body { flex-grow: 1 !important; } .fui-Media-body + .fui-Media-right { margin-left: var(--spacingHorizontalM) !important; } @keyframes fadeaway { from { transform: scale(1) translateZ(0px); display: block; } to { transform: scale(0.75) translateZ(0px); opacity: 0; } } @keyframes fadein { from { transform: scale(1) translateZ(0px); opacity: 0; } to { transform: scale(1) translateZ(0px); display: block; } } .fui-DialogSurface__backdrop { inset: 0px; background-color: rgba(0, 0, 0, 0.4); position: fixed; will-change: opacity; z-index: var(--zIndexModalBackdrop); display: none; } .fui-DialogSurface__backdrop-fade { transition-duration: var(--modal-animation-duration, var(--durationGentle)); transition-timing-function: var(--curveLinear); transition-property: opacity; } .fui-DialogSurface__backdrop-show { animation: fadein var(--modal-animation-duration, var(--durationGentle)) cubic-bezier(0, 0, 0, 1) forwards; display: block; opacity: 1; } .fui-DialogSurface__backdrop-hide { animation: fadeaway var(--modal-animation-duration, var(--durationGentle)) cubic-bezier(0, 0, 0, 1) forwards; display: none; } .fui-DialogSurface { display: none; transform: scale(1) translateZ(0px); box-shadow: var(--shadow64); inset: 0px; padding: 24px; margin: var(--spacingVerticalXXXL) auto; border-style: solid; overflow: unset; border-width: 1px; border-top-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-bottom-color: var(--colorTransparentStroke); border-left-color: var(--colorTransparentStroke); border-bottom-right-radius: var(--borderRadiusXLarge); border-bottom-left-radius: var(--borderRadiusXLarge); border-top-right-radius: var(--borderRadiusXLarge); border-top-left-radius: var(--borderRadiusXLarge); user-select: unset; visibility: unset; position: fixed; height: fit-content; max-width: 600px; max-height: 100vh; box-sizing: border-box; background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); z-index: var(--zIndexModal); } .fui-DialogSurface-centered { margin: auto; } .fui-DialogSurface-fade { transition-timing-function: var(--curveDecelerateMid); transition-property: opacity, transform, box-shadow; transition-duration: var(--modal-animation-duration, var(--durationGentle)); } .fui-DialogSurface-show { animation: fadein var(--modal-animation-duration, var(--durationGentle)) cubic-bezier(0, 0, 0, 1) forwards; display: block; opacity: 1; } .fui-DialogSurface-hide { animation: fadeaway var(--modal-animation-duration, var(--durationGentle)) cubic-bezier(0, 0, 0, 1) forwards; display: none; } .fui-DialogSurface .fui-DialogBody { overflow: unset; display: flex; flex-direction: column; max-height: calc(100vh - 48px); box-sizing: border-box; } .fui-DialogSurface .fui-DialogBody .fui-DialogHeader { padding-bottom: var(--strokeWidthThick); margin: 0px; grid-area: 1/1/1/3; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .fui-DialogSurface .fui-DialogBody .fui-DialogTitle { font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase500); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase500); margin: 0px; } .fui-DialogSurface .fui-DialogBody .fui-DialogContent { flex-direction: column; display: flex; flex: 1 1 auto; padding-top: var(--strokeWidthThick); padding-right: var(--strokeWidthThick); padding-bottom: var(--strokeWidthThick); padding-left: var(--strokeWidthThick); margin-top: calc(var(--strokeWidthThick) * -1); margin-right: calc(var(--strokeWidthThick) * -1); margin-bottom: calc(var(--strokeWidthThick) * -1); margin-left: calc(var(--strokeWidthThick) * -1); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase300); min-height: 32px; box-sizing: border-box; grid-area: 2/1/2/4; } .fui-DialogSurface .fui-DialogBody .fui-DialogActions { gap: 8px; height: fit-content; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .fui-DialogSurface-sm { max-width: 300px; } .fui-DialogSurface-full { width: 100vw; max-width: none; height: 100%; margin: 0; border-radius: 0; } .fui-DialogSurface-full .fui-DialogBody { height: 100%; border: 0; } .fui-DialogSurface-full .fui-DialogContent { overflow-y: auto; } @media (min-width: 600px) { .fui-DialogSurface-sm { max-width: 300px; } } @media (min-width: 1280px) { .fui-DialogSurface-lg, .fui-DialogSurface-xl { max-width: 800px; } } @media (min-width: 1920px) { .fui-DialogSurface-xl { max-width: 1140px; } } .fui-SpinButton { display: inline-grid; grid-template-rows: 1fr 1fr; row-gap: 0px; position: relative; isolation: isolate; background-color: var(--colorNeutralBackground1); min-height: 32px; padding: 0 0 0 var(--spacingHorizontalMNudge); border-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); text-align: left; color: var(--colorNeutralForeground1); width: 100%; } .fui-SpinButton.fui-SpinButton-buttons { column-gap: var(--spacingHorizontalXS); grid-template-columns: 1fr var(--spacingHorizontalXXL); } .fui-SpinButton:not(.fui-SpinButton-buttons) { grid-template-columns: 1fr var(--spacingHorizontalMNudge); } .fui-SpinButton:focus-within { outline: transparent solid 2px; } .fui-SpinButton::before { content: ""; box-sizing: border-box; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; pointer-events: none; z-index: var(--zIndexInputBefore); } .fui-SpinButton:not(.fui-Input .fui-SpinButton)::before { border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); border-left-style: solid; border-left-width: var(--strokeWidthThin); border-radius: var(--borderRadiusMedium); border-right-style: solid; border-right-width: var(--strokeWidthThin); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-top-style: solid; border-top-width: var(--strokeWidthThin); border-bottom-color: var(--colorNeutralStrokeAccessible); border-radius: var(--borderRadiusMedium); } .fui-SpinButton:not(.fui-Input .fui-SpinButton):not(.disabled)::before, .fui-SpinButton:not(.fui-Input .fui-SpinButton):not(:disabled)::before { border-bottom-color: var(--colorNeutralStrokeAccessible); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); } .fui-SpinButton:not(.fui-Input .fui-SpinButton):active::before, .fui-SpinButton:not(.fui-Input .fui-SpinButton):focus-within::before { border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); border-left-color: var(--colorNeutralStroke1Pressed); border-right-color: var(--colorNeutralStroke1Pressed); border-top-color: var(--colorNeutralStroke1Pressed); } .fui-SpinButton:not(.fui-Input .fui-SpinButton):hover::before { border-bottom-color: var(--colorNeutralStrokeAccessibleHover); border-left-color: var(--colorNeutralStroke1Hover); border-right-color: var(--colorNeutralStroke1Hover); border-top-color: var(--colorNeutralStroke1Hover); } .fui-SpinButton:not(.fui-Input .fui-SpinButton)::after { box-sizing: border-box; content: ""; position: absolute; right: 0px; bottom: 0px; left: 0px; z-index: var(--zIndexInputAfter); height: max(2px, var(--borderRadiusMedium)); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom: 2px solid var(--colorCompoundBrandStroke); clip-path: inset(calc(100% - 2px) 0px 0px); transform: scaleX(0); transition-property: transform; transition-duration: var(--durationUltraFast); transition-delay: var(--curveAccelerateMid); } .fui-SpinButton:not(.fui-Input .fui-SpinButton):focus-within::after { transform: scaleX(1); transition-property: transform; transition-duration: var(--durationNormal); transition-delay: var(--curveDecelerateMid); } .fui-SpinButton:not(.fui-Input .fui-SpinButton):focus-within::after:active { border-bottom-color: var(--colorCompoundBrandStrokePressed); } .fui-SpinButton-error:not(.fui-Input .fui-SpinButton):not(.disabled)::before, .fui-SpinButton-error:not(.fui-Input .fui-SpinButton):not(:disabled)::before { border-bottom-color: var(--colorPaletteRedBorder2) !important; border-left-color: var(--colorPaletteRedBorder2) !important; border-right-color: var(--colorPaletteRedBorder2) !important; border-top-color: var(--colorPaletteRedBorder2) !important; } .fui-SpinButton-success:not(.fui-Input .fui-SpinButton):not(.disabled)::before, .fui-SpinButton-success:not(.fui-Input .fui-SpinButton):not(:disabled)::before { border-bottom-color: var(--colorPaletteGreenForeground1) !important; border-left-color: var(--colorPaletteGreenForeground1) !important; border-right-color: var(--colorPaletteGreenForeground1) !important; border-top-color: var(--colorPaletteGreenForeground1) !important; } .fui-SpinButton.fui-SpinButton-plaintext { border-left-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-top-color: var(--colorTransparentStroke); border-bottom-color: var(--colorTransparentStroke); } .fui-SpinButton .fui-SpinButton__input, .fui-SpinButton .fui-SpinButton__input-plaintext { grid-area: 1/1/3/2; outline-style: none; border: 0px; padding: 0px; color: var(--colorNeutralForeground1); background-color: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; width: 100%; } .fui-SpinButton .fui-SpinButton__input:not(:disabled), .fui-SpinButton .fui-SpinButton__input-plaintext:not(:disabled) { background-color: transparent; } .fui-SpinButton .fui-SpinButton__input:disabled, .fui-SpinButton .fui-SpinButton__input-plaintext:disabled { cursor: not-allowed; color: var(--colorNeutralForegroundDisabled); background-color: var(--colorTransparentBackground); } .fui-SpinButton .fui-SpinButton__incrementButton, .fui-SpinButton .fui-SpinButton__decrementButton { display: inline-flex; width: 24px; align-items: center; justify-content: center; border: 0px; position: absolute; outline-style: none; height: 16px; background-color: transparent; color: var(--colorNeutralForeground3); grid-column-start: 2; border-radius: 0px; padding: 0px 5px; } .fui-SpinButton .fui-SpinButton__incrementButton:enabled:active, .fui-SpinButton .fui-SpinButton__decrementButton:enabled:active { color: var(--colorNeutralForeground3Pressed); background-color: var(--colorSubtleBackgroundPressed); } .fui-SpinButton .fui-SpinButton__incrementButton:enabled:hover, .fui-SpinButton .fui-SpinButton__decrementButton:enabled:hover { cursor: pointer; color: var(--colorNeutralForeground3Hover); background-color: var(--colorSubtleBackgroundHover); } .fui-SpinButton .fui-SpinButton__incrementButton:active, .fui-SpinButton .fui-SpinButton__decrementButton:active { outline-style: none; } .fui-SpinButton .fui-SpinButton__incrementButton > svg, .fui-SpinButton .fui-SpinButton__decrementButton > svg { display: inline; line-height: 0; } .fui-SpinButton .fui-SpinButton__incrementButton { padding-top: 4px; grid-row-start: 1; padding-bottom: 1px; border-top-right-radius: var(--borderRadiusMedium); } .fui-SpinButton .fui-SpinButton__decrementButton { padding-bottom: 4px; grid-row-start: 2; padding-top: 1px; border-bottom-right-radius: var(--borderRadiusMedium); } .fui-OverlayDrawer__backdrop { will-change: opacity, visibility; transition-timing-function: var(--curveEasyEase); transition-property: opacity, visibility; opacity: 0; transition-duration: var(--durationGentle); inset: 0px; position: fixed; background-color: rgba(0, 0, 0, 0.4); display: flex; z-index: var(--zIndexDrawerBackdrop); visibility: hidden; } .fui-OverlayDrawer__backdrop.fui-OverlayDrawer__backdrop-show { opacity: 1; visibility: visible; } .fui-OverlayDrawer { --fui-Drawer--size: 320px; box-shadow: var(--shadow64); opacity: 0; will-change: transform, box-shadow, opacity, visibility; transition-property: transform, box-shadow, opacity, visibility; transition-duration: var(--durationGentle); overflow: hidden; max-width: 100vw; height: auto; max-height: 100vh; box-sizing: border-box; flex-direction: column; align-items: flex-start; justify-content: flex-start; background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); position: fixed; visibility: hidden; display: flex; z-index: var(--zIndexDrawer); } .fui-OverlayDrawer.fui-OverlayDrawer-show { opacity: 1; visibility: visible; transform: translate3d(0px, 0px, 0px); } .fui-OverlayDrawer-start { top: 0; bottom: 0; left: 0; right: auto; width: var(--fui-Drawer--size); transform: translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0); border-right-width: var(--strokeWidthThin); border-right-style: solid; border-right-color: var(--colorTransparentStroke); } .fui-OverlayDrawer-end { top: 0; bottom: 0; left: auto; right: 0; width: var(--fui-Drawer--size); transform: translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0); border-left-width: var(--strokeWidthThin); border-left-style: solid; border-left-color: var(--colorTransparentStroke); } .fui-OverlayDrawer-top { top: 0; bottom: auto; right: 0; left: 0; height: var(--fui-Drawer--size); max-height: 100%; transform: translate3D(0, calc(var(--fui-Drawer--size) * -1), 0); border-bottom-width: var(--strokeWidthThin); border-bottom-style: solid; border-bottom-color: var(--colorTransparentStroke); } .fui-OverlayDrawer-bottom { top: auto; bottom: 0; right: 0; left: 0; height: var(--fui-Drawer--size); max-height: 100%; transform: translate3D(0, calc(var(--fui-Drawer--size) * 1), 0); border-top-width: var(--strokeWidthThin); border-top-style: solid; border-top-color: var(--colorTransparentStroke); } .fui-OverlayDrawer .fui-DrawerHeader { padding-top: var(--spacingVerticalXXL); padding-right: var(--spacingHorizontalXXL); padding-bottom: var(--spacingVerticalS); padding-left: var(--spacingHorizontalXXL); column-gap: var(--spacingHorizontalS); row-gap: var(--spacingHorizontalS); width: 100%; max-width: 100%; align-self: stretch; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .fui-OverlayDrawer .fui-DrawerHeader .fui-DrawerHeaderTitle { column-gap: var(--spacingHorizontalS); justify-content: space-between; align-items: center; display: flex; } .fui-OverlayDrawer .fui-DrawerBody { margin: -1px 0px; padding-top: 1px; padding-right: var(--spacingHorizontalXXL); padding-bottom: 1px; padding-left: var(--spacingHorizontalXXL); overflow: auto; flex: 1 1 0px; align-self: stretch; background-image: linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)), linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)), linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)), linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1)); background-position: center bottom, center top, center bottom, center top; background-repeat: no-repeat; background-color: var(--colorNeutralBackground1); background-size: 100% 2px, 100% 2px, 100% 1px, 100% 1px; background-attachment: local, local, scroll, scroll; } .fui-OverlayDrawer .fui-DrawerFooter { padding-top: var(--spacingVerticalXXL); padding-right: var(--spacingHorizontalXXL); padding-bottom: var(--spacingVerticalS); padding-left: var(--spacingHorizontalXXL); row-gap: var(--spacingHorizontalS); width: 100%; max-width: 100%; align-self: stretch; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .fui-Pagination { display: flex; padding-left: 0; list-style: none; border-radius: var(--borderRadiusMedium); } .fui-Pagination-sm .fui-PaginationItem { font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase200); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase200); } .fui-Pagination-sm .fui-PaginationItem .fui-PaginationLink { padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); padding-top: 3px; padding-bottom: 3px; } .fui-Pagination-lg .fui-PaginationItem { font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase400); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase400); } .fui-Pagination-lg .fui-PaginationItem .fui-PaginationLink { padding-left: var(--spacingHorizontalL); padding-right: var(--spacingHorizontalL); padding-top: 8px; padding-bottom: 8px; } .fui-PaginationItem { align-items: center; box-sizing: border-box; display: inline-flex; justify-content: center; text-decoration-line: none; vertical-align: middle; margin: 0px; padding: 0px; overflow: hidden; background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font-family: var(--fontFamilyBase); outline-style: none; font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase300); transition-duration: var(--durationFaster); transition-property: background, border, color; transition-timing-function: var(--curveEasyEase); cursor: pointer; } .fui-PaginationItem .fui-PaginationLink { font-size: inherit; user-select: text; text-overflow: inherit; text-decoration-thickness: var(--strokeWidthThin); text-decoration-line: none; overflow-y: inherit; overflow-x: inherit; padding: 5px var(--spacingHorizontalM); margin: 0px; color: var(--colorBrandForegroundLink); box-sizing: border-box; background-color: transparent; cursor: pointer; display: inline; font-weight: var(--fontWeightSemibold); font-family: var(--fontFamilyBase); text-align: left; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); } .fui-PaginationItem + .fui-PaginationItem { margin-left: var(--spacingHorizontalXXS); } .fui-PaginationItem.fui-PaginationItem-active .fui-PaginationLink.fui-PaginationLink-active { z-index: 3; color: var(--colorNeutralForegroundOnBrand); background-color: var(--colorBrandBackground); border-color: var(--colorBrandBackground); } .fui-PaginationItem.fui-PaginationItem-disabled .fui-PaginationLink.fui-PaginationLink-disabled { z-index: 3; color: var(--colorNeutralForegroundDisabled); border-bottom-color: var(--colorNeutralStrokeDisabled); border-left-color: var(--colorNeutralStrokeDisabled); border-right-color: var(--colorNeutralStrokeDisabled); border-top-color: var(--colorNeutralStrokeDisabled); background-color: var(--colorNeutralBackgroundDisabled); cursor: not-allowed; } .fui-ProgressBar { height: 3px; overflow-x: hidden; overflow-y: hidden; background-color: var(--colorNeutralBackground6); display: flex; width: 100%; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); } .fui-ProgressBar-xs { height: 1px; } .fui-ProgressBar-sm { height: 2px; } .fui-ProgressBar-md { height: 4px; } .fui-ProgressBar-lg { height: 5px; } .fui-ProgressBar-xl { height: 6px; } .fui-ProgressBar .fui-ProgressBar__bar { width: 50%; background-color: var(--colorCompoundBrandBackground); transition-timing-function: ease; transition-property: width; transition-duration: 0.3s; height: 100%; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .fui-ProgressBar .fui-ProgressBar__bar-success { background-color: var(--colorPaletteGreenBackground3); } .fui-ProgressBar .fui-ProgressBar__bar-danger { background-color: var(--colorPaletteRedBackground3); } .fui-ProgressBar .fui-ProgressBar__bar-warning { background-color: var(--colorPaletteMarigoldBackground3); } .fui-ProgressBar .fui-ProgressBar__bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; } .fui-ProgressBar .fui-ProgressBar__bar-animated { animation: 1s linear infinite progress-bar-stripes; } .fui-ProgressBar .fui-ProgressBar__bar-indeterminate { position: relative; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 3s; animation-name: progress-bar-indeterminate; background-image: linear-gradient(to right, var(--colorNeutralBackground6) 0%, var(--colorTransparentBackground) 50%, var(--colorNeutralBackground6) 100%); max-width: 33%; } @keyframes progress-bar-indeterminate { 0% { left: -33%; } 100% { left: 100%; } } @keyframes progress-bar-stripes { 0% { background-position: 1rem 0; } 100% { background-position: 0 0; } } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-primary { background-color: var(--colorBrandBackground); } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-secondary { background-color: var(--colorNeutralBackground3); } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-success { background-color: var(--colorStatusSuccessBackground3); } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-danger { background-color: var(--colorStatusDangerBackground3); } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-warning { background-color: var(--colorStatusWarningBackground3); } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-info { background-color: var(--colorNeutralForeground3); } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-light { background-color: var(--colorNeutralBackground2); } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-dark { background-color: var(--colorNeutralForeground1); } .b-page-progress .b-page-progress-indicator.b-page-progress-indicator-link { background-color: var(--colorBrandForegroundLink); } .fui-RadioGroup { align-items: flex-start; flex-direction: column; display: flex; } .fui-RadioGroup__horizontal { align-items: flex-start; display: flex; } .fui-Radio { display: inline-flex; position: relative; } .fui-Radio .fui-Radio__input { cursor: pointer; position: absolute; left: 0px; top: 0px; width: calc(16px + 2 * var(--spacingHorizontalS)); height: 100%; box-sizing: border-box; margin: 0px; opacity: 0; } .fui-Radio .fui-Radio__input:enabled:not(:checked) ~ .fui-Radio__indicator { border-color: var(--colorNeutralStrokeAccessible); } .fui-Radio .fui-Radio__input:not(:checked) ~ .fui-Radio__indicator > * { opacity: 0; } .fui-Radio .fui-Radio__input:enabled:not(:checked) ~ .fui-Radio__indicator { border-color: var(--colorNeutralStrokeAccessible); } .fui-Radio .fui-Radio__input:enabled ~ .fui-Radio__label { cursor: pointer; } .fui-Radio .fui-Radio__input:disabled ~ .fui-Radio__indicator { border-color: var(--colorNeutralStrokeDisabled); color: var(--colorNeutralForegroundDisabled); } .fui-Radio .fui-Radio__input:disabled ~ .fui-Radio__label { color: var(--colorNeutralForegroundDisabled); cursor: default; } .fui-Radio .fui-Radio__input.fui-Radio__input-xs ~ .fui-Radio__indicator { width: 10px; height: 10px; font-size: 8px; } .fui-Radio .fui-Radio__input.fui-Radio__input-xs ~ .fui-Radio__indicator + .fui-Radio__label { padding: 0; } .fui-Radio .fui-Radio__input.fui-Radio__input-sm ~ .fui-Radio__indicator { width: 12px; height: 12px; font-size: 10px; } .fui-Radio .fui-Radio__input.fui-Radio__input-sm ~ .fui-Radio__indicator + .fui-Radio__label { padding: 0; } .fui-Radio .fui-Radio__input.fui-Radio__input-md ~ .fui-Radio__indicator { width: 18px; height: 18px; font-size: 14px; } .fui-Radio .fui-Radio__input.fui-Radio__input-lg ~ .fui-Radio__indicator { width: 20px; height: 20px; font-size: 16px; } .fui-Radio .fui-Radio__input.fui-Radio__input-lg ~ .fui-Radio__indicator + .fui-Radio__label { margin-bottom: calc((20px - var(--lineHeightBase300)) / 2); margin-top: calc((20x - var(--lineHeightBase300)) / 2); } .fui-Radio .fui-Radio__input.fui-Radio__input-xl ~ .fui-Radio__indicator { width: 24px; height: 24px; font-size: 20px; } .fui-Radio .fui-Radio__input.fui-Radio__input-xl ~ .fui-Radio__indicator + .fui-Radio__label { margin-bottom: calc((24px - var(--lineHeightBase300)) / 2); margin-top: calc((24x - var(--lineHeightBase300)) / 2); } .fui-Radio .fui-Radio__indicator { width: 16px; height: 16px; font-size: 12px; box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border: var(--strokeWidthThin) solid; border-radius: var(--borderRadiusCircular); margin: var(--spacingVerticalS) var(--spacingHorizontalS); fill: currentcolor; pointer-events: none; border-color: var(--colorCompoundBrandStroke); color: var(--colorCompoundBrandForeground1); } .fui-Radio .fui-Radio__indicator .fui-Radio__indicator-icon { display: inline; line-height: 0; } .fui-Radio .fui-Radio__label { margin-bottom: calc((16px - var(--lineHeightBase300)) / 2); margin-top: calc((16px - var(--lineHeightBase300)) / 2); align-self: center; padding-left: var(--spacingHorizontalXS); padding-bottom: var(--spacingVerticalS); padding-top: var(--spacingVerticalS); padding-right: var(--spacingHorizontalS); line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); color: var(--colorNeutralForeground1); } .fui-Button .fui-Radio__input { cursor: pointer; position: absolute; left: 0px; top: 0px; width: calc(16px + 2 * var(--spacingHorizontalS)); height: 100%; box-sizing: border-box; margin: 0px; opacity: 0; } .fui-RadioGroup__horizontal-buttons { vertical-align: middle; justify-content: stretch; display: inline-flex; position: relative; } .fui-RadioGroup__horizontal-buttons .fui-Button { position: relative; } .fui-RadioGroup__horizontal-buttons .fui-Button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fui-RadioGroup__horizontal-buttons .fui-Button:not(:last-child):not(.fui-MenuButton) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .fui-RadioGroup__horizontal-buttons > .fui-ButtonGroup:not(:first-child), .fui-RadioGroup__horizontal-buttons > .fui-Button:not(:first-child) { margin-left: -1px; } .fui-RadioGroup__horizontal-buttons > .fui-ButtonGroup:not(:first-child) > .fui-Button, .fui-RadioGroup__horizontal-buttons .fui-ButtonGroup > .fui-Button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fui-Rating { display: flex; align-items: center; color: var(--colorNeutralForeground1); } .fui-Rating:focus, .fui-Rating:focus-visible { outline-style: none; } .fui-Rating-disabled { opacity: 0.65; } .fui-Rating .fui-RatingItem { height: 28px; width: 28px; font-size: 28px; position: relative; } .fui-Rating .fui-RatingItem-primary { color: var(--colorBrandForeground1); } .fui-Rating .fui-RatingItem-primary .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-primary .fui-RatingItem__unselectedOutlineIcon { color: var(--colorBrandForeground1); } .fui-Rating .fui-RatingItem-secondary { color: var(--colorNeutralForeground3); } .fui-Rating .fui-RatingItem-secondary .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-secondary .fui-RatingItem__unselectedOutlineIcon { color: var(--colorNeutralForeground3); } .fui-Rating .fui-RatingItem-success { color: var(--colorStatusSuccessForeground3); } .fui-Rating .fui-RatingItem-success .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-success .fui-RatingItem__unselectedOutlineIcon { color: var(--colorStatusSuccessForeground3); } .fui-Rating .fui-RatingItem-danger { color: var(--colorPaletteRedForeground3); } .fui-Rating .fui-RatingItem-danger .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-danger .fui-RatingItem__unselectedOutlineIcon { color: var(--colorPaletteRedForeground3); } .fui-Rating .fui-RatingItem-warning { color: var(--colorStatusWarningBackground3); } .fui-Rating .fui-RatingItem-warning .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-warning .fui-RatingItem__unselectedOutlineIcon { color: var(--colorStatusWarningBackground3); } .fui-Rating .fui-RatingItem-info { color: var(--colorNeutralForeground3); } .fui-Rating .fui-RatingItem-info .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-info .fui-RatingItem__unselectedOutlineIcon { color: var(--colorNeutralForeground3); } .fui-Rating .fui-RatingItem-light { color: var(--colorNeutralForeground4); } .fui-Rating .fui-RatingItem-light .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-light .fui-RatingItem__unselectedOutlineIcon { color: var(--colorNeutralForeground4); } .fui-Rating .fui-RatingItem-dark { color: var(--colorNeutralForeground1); } .fui-Rating .fui-RatingItem-dark .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-dark .fui-RatingItem__unselectedOutlineIcon { color: var(--colorNeutralForeground1); } .fui-Rating .fui-RatingItem-link { color: var(--colorBrandForegroundLink); } .fui-Rating .fui-RatingItem-link .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem-link .fui-RatingItem__unselectedOutlineIcon { color: var(--colorBrandForegroundLink); } .fui-Rating .fui-RatingItem .fui-RatingItem__fullValueInput { position: absolute; inset: 0px; box-sizing: border-box; margin: 0px; opacity: 0; cursor: pointer; } .fui-Rating .fui-RatingItem .fui-RatingItem__selectedIcon, .fui-Rating .fui-RatingItem .fui-RatingItem__unselectedOutlineIcon { display: inline-block; overflow: hidden; fill: currentcolor; pointer-events: none; left: 0px; right: 0px; } .fui-Rating .fui-RatingItem .fui-RatingItem__selectedIcon > *, .fui-Rating .fui-RatingItem .fui-RatingItem__unselectedOutlineIcon > * { display: inline; line-height: 0; } .fui-Rating .fui-RatingItem .fui-RatingItem__unselectedOutlineIcon { color: var(--colorNeutralForeground3); } .fui-Select { flex-wrap: nowrap; position: relative; box-sizing: border-box; align-items: center; display: flex; font-family: var(--fontFamilyBase); } .fui-Select:after { right: 0px; left: 0px; bottom: 0px; height: var(--borderRadiusMedium); border-top-left-radius: 0px; border-top-right-radius: 0px; background-image: linear-gradient(0deg, var(--colorCompoundBrandStroke) 0%, var(--colorCompoundBrandStroke) 50%, transparent 50%, transparent 100%); transition-delay: var(--curveAccelerateMid); transition-duration: var(--durationUltraFast); transition-property: transform; transform: scaleX(0); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); position: absolute; content: ""; box-sizing: border-box; } .fui-Select:focus-within::after { transform: scaleX(1); transition-property: transform; transition-duration: var(--durationNormal); transition-delay: var(--curveDecelerateMid); } .fui-Select-error .fui-Select__select { border-bottom-color: var(--colorPaletteRedBorder2) !important; border-left-color: var(--colorPaletteRedBorder2) !important; border-right-color: var(--colorPaletteRedBorder2) !important; border-top-color: var(--colorPaletteRedBorder2) !important; } .fui-Select-success .fui-Select__select { border-bottom-color: var(--colorPaletteGreenForeground1) !important; border-left-color: var(--colorPaletteGreenForeground1) !important; border-right-color: var(--colorPaletteGreenForeground1) !important; border-top-color: var(--colorPaletteGreenForeground1) !important; } .fui-Select__select { padding-right: calc(var(--spacingHorizontalMNudge) + 20px + var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS)); height: 32px; padding-bottom: 0px; max-width: 100%; box-shadow: none; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; appearance: none; padding-left: calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)); border-bottom-color: var(--colorNeutralStrokeAccessible); border-left-color: var(--colorNeutralStroke1); border-right-color: var(--colorNeutralStroke1); border-top-color: var(--colorNeutralStroke1); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; padding-top: 0px; box-sizing: border-box; cursor: pointer; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); flex-grow: 1; line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); } .fui-Select__select[multiple] { height: auto; } .fui-Select__select:active, .fui-Select__select:focus, .fui-Select__select:focus-within { border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); border-left-color: var(--colorNeutralStroke1Pressed); border-right-color: var(--colorNeutralStroke1Pressed); border-top-color: var(--colorNeutralStroke1Pressed); } .fui-Select__select:focus { outline-color: transparent; outline-style: solid; outline-width: 2px; } .fui-Select__select option { cursor: pointer; line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); color: var(--colorNeutralForeground1); } .fui-Select__select optgroup { cursor: pointer; line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); color: var(--colorNeutralForeground1); } .fui-Select__select + .fui-Select__icon { right: var(--spacingHorizontalMNudge); pointer-events: none; position: absolute; display: block; color: var(--colorNeutralStrokeAccessible); box-sizing: border-box; width: 20px; height: 20px; font-size: 20px; font-family: var(--fontFamilyBase); } .fui-Select__select.fui-Select__select-xs { height: 16px; font-size: var(--fontSizeBase100); padding-right: calc(var(--spacingHorizontalXS) + 16px + var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS)); padding-left: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS)); } .fui-Select__select.fui-Select__select-xs + .fui-Select__icon { right: var(--spacingHorizontalS); width: 12px; height: 12px; font-size: 12px; } .fui-Select__select.fui-Select__select-sm { height: 24px; font-size: var(--fontSizeBase200); padding-right: calc(var(--spacingHorizontalSNudge) + 16px + var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS)); padding-left: calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)); } .fui-Select__select.fui-Select__select-sm + .fui-Select__icon { right: var(--spacingHorizontalSNudge); width: 16px; height: 16px; font-size: 16px; } .fui-Select__select.fui-Select__select-md { height: 36px; font-size: var(--fontSizeBase400); padding-right: calc(var(--spacingHorizontalM) + 24px + var(--spacingHorizontalSNudge) + var(--spacingHorizontalSNudge)); padding-left: calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)); } .fui-Select__select.fui-Select__select-lg { height: 40px; font-size: var(--fontSizeBase500); padding-right: calc(var(--spacingHorizontalL) + 24px + var(--spacingHorizontalSNudge) + var(--spacingHorizontalSNudge)); padding-left: calc(var(--spacingHorizontalL) + var(--spacingHorizontalSNudge)); } .fui-Select__select.fui-Select__select-lg + .fui-Select__icon { right: var(--spacingHorizontalM); width: 24px; height: 24px; font-size: 24px; } .fui-Select__select.fui-Select__select-xl { height: 48px; font-size: var(--fontSizeBase600); padding-right: calc(var(--spacingHorizontalXL) + 24px + var(--spacingHorizontalSNudge) + var(--spacingHorizontalSNudge)); padding-left: calc(var(--spacingHorizontalXL) + var(--spacingHorizontalSNudge)); } .fui-Select__select.fui-Select__select-xl + .fui-Select__icon { right: var(--spacingHorizontalL); width: 28px; height: 28px; font-size: 28px; } .fui-Skeleton { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .fui-Skeleton:not(.fui-Skeleton-pulse) .fui-SkeletonItem { background-color: var(--colorNeutralStencil1); } .fui-Skeleton .fui-SkeletonItem { position: relative; height: 16px; width: 100%; border-radius: 4px; overflow: hidden; } .fui-Skeleton-wave .fui-SkeletonItem::after { transform: translate(-100%); background-image: linear-gradient(to right, var(--colorNeutralStencil1) 0%, var(--colorNeutralStencil2) 50%, var(--colorNeutralStencil1) 100%); animation-name: skeleton-wave-anim; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; position: absolute; display: block; content: ""; inset: 0px; } .fui-Skeleton-pulse .fui-SkeletonItem::after { background-color: var(--colorNeutralStencil1); animation-duration: 1s; animation-name: skeleton-pulse-anim; animation-timing-function: ease-in-out; animation-iteration-count: infinite; position: absolute; display: block; content: ""; inset: 0px; } @keyframes skeleton-wave-anim { 100% { transform: translate(100%); } } @keyframes skeleton-pulse-anim { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } .fui-Slider { --fui-Slider__thumb--color: var(--colorCompoundBrandBackground); --fui-Slider__progress--color: var(--colorCompoundBrandBackground); --fui-Slider__rail--color: var(--colorNeutralStrokeAccessible); grid-template-columns: 1fr calc(100% - var(--fui-Slider__thumb--size)) 1fr; grid-template-rows: 1fr var(--fui-Slider__thumb--size) 1fr; min-width: 120px; min-height: 32px; --fui-Slider__rail--size: 4px; --fui-Slider__thumb--size: 20px; justify-items: center; touch-action: none; display: inline-grid; position: relative; align-items: center; width: 100%; } .fui-Slider .fui-Slider__input { grid-column-end: -1; grid-column-start: 1; opacity: 0; height: var(--fui-Slider__thumb--size); padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; margin-bottom: 0px; grid-row-end: -1; grid-row-start: 1; margin-right: 0px; margin-left: 0px; cursor: pointer; width: 100%; margin-top: 0px; } .fui-Slider .fui-Slider__rail { height: var(--fui-Slider__rail--size); outline-color: var(--colorTransparentStroke); outline-style: solid; outline-width: 1px; background-image: linear-gradient(var(--fui-Slider--direction), var(--fui-Slider__progress--color) 0%, var(--fui-Slider__progress--color) var(--fui-Slider--progress), var(--fui-Slider__rail--color) var(--fui-Slider--progress)); forced-color-adjust: none; grid-column-end: 2; grid-column-start: 2; grid-row-end: 2; pointer-events: none; border-top-left-radius: var(--borderRadiusXLarge); border-top-right-radius: var(--borderRadiusXLarge); border-bottom-left-radius: var(--borderRadiusXLarge); border-bottom-right-radius: var(--borderRadiusXLarge); grid-row-start: 2; position: relative; width: 100%; } .fui-Slider .fui-Slider__thumb { left: var(--fui-Slider--progress); transform: translateX(-50%); background-color: var(--fui-Slider__thumb--color); box-shadow: 0 0 0 calc(var(--fui-Slider__thumb--size) * 0.2) var(--colorNeutralBackground1) inset; height: var(--fui-Slider__thumb--size); width: var(--fui-Slider__thumb--size); forced-color-adjust: none; grid-column-end: 2; grid-column-start: 2; grid-row-end: 2; pointer-events: none; grid-row-start: 2; outline-style: none; position: absolute; border-top-left-radius: var(--borderRadiusCircular); border-top-right-radius: var(--borderRadiusCircular); border-bottom-left-radius: var(--borderRadiusCircular); border-bottom-right-radius: var(--borderRadiusCircular); } .fui-Slider__container { display: flex; align-items: center; } .fui-Steps { --fluent-wizard-circle-size: 24px; --fluent-wizard-spacing: 4px; display: flex; padding-inline-start: 0px; margin-block-start: 0px; margin-block-end: 0px; padding: 10px; flex-direction: row; justify-content: center; } .fui-Steps .fui-Step { position: relative; display: flex; flex-direction: column; flex: 1; text-align: center; max-width: 100%; } .fui-Steps .fui-Step .fui-Step__circle { min-width: calc(1.2 * var(--fluent-wizard-circle-size)); min-height: calc(1.2 * var(--fluent-wizard-circle-size)); } .fui-Steps .fui-Step .fui-Step__circle > svg { fill: var(--colorBrandBackground); } .fui-Steps .fui-Step .fui-Step__circle::after { position: absolute; width: calc(1.2 * var(--fluent-wizard-circle-size)); height: calc(1.2 * var(--fluent-wizard-circle-size)); } .fui-Steps .fui-Step.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step .fui-Step__circle-number { margin-top: calc(var(--fluent-wizard-circle-size) * -1 - 2px); font-size: small; text-align: center; height: var(--fluent-wizard-circle-size); color: var(--colorBrandBackground); } .fui-Steps .fui-Step:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + var(--fluent-wizard-circle-size) / 2 + var(--fluent-wizard-spacing)); top: calc(var(--fluent-wizard-circle-size) / 2); width: calc(100% - var(--fluent-wizard-circle-size) - var(--fluent-wizard-spacing) * 2); height: var(--strokeWidthThick); order: -1; background-color: var(--colorNeutralStroke1); } .fui-Steps .fui-Step.fui-Step-primary .fui-Step__circle > svg { fill: var(--colorBrandBackground); } .fui-Steps .fui-Step.fui-Step-primary .fui-Step__circle > .fui-Step__circle-number { color: var(--colorBrandForeground1); } .fui-Steps .fui-Step.fui-Step-primary.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-primary.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step.fui-Step-secondary .fui-Step__circle > svg { fill: var(--colorNeutralBackground3); } .fui-Steps .fui-Step.fui-Step-secondary .fui-Step__circle > .fui-Step__circle-number { color: var(--colorNeutralForeground3); } .fui-Steps .fui-Step.fui-Step-secondary.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-secondary.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step.fui-Step-success .fui-Step__circle > svg { fill: var(--colorStatusSuccessBackground3); } .fui-Steps .fui-Step.fui-Step-success .fui-Step__circle > .fui-Step__circle-number { color: var(--colorStatusSuccessForeground3); } .fui-Steps .fui-Step.fui-Step-success.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-success.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step.fui-Step-danger .fui-Step__circle > svg { fill: var(--colorStatusDangerBackground3); } .fui-Steps .fui-Step.fui-Step-danger .fui-Step__circle > .fui-Step__circle-number { color: var(--colorPaletteRedForeground3); } .fui-Steps .fui-Step.fui-Step-danger.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-danger.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step.fui-Step-warning .fui-Step__circle > svg { fill: var(--colorStatusWarningBackground3); } .fui-Steps .fui-Step.fui-Step-warning .fui-Step__circle > .fui-Step__circle-number { color: var(--colorStatusWarningBackground3); } .fui-Steps .fui-Step.fui-Step-warning.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-warning.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step.fui-Step-info .fui-Step__circle > svg { fill: var(--colorNeutralForeground3); } .fui-Steps .fui-Step.fui-Step-info .fui-Step__circle > .fui-Step__circle-number { color: var(--colorNeutralForeground3); } .fui-Steps .fui-Step.fui-Step-info.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-info.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step.fui-Step-light .fui-Step__circle > svg { fill: var(--colorNeutralBackground2); } .fui-Steps .fui-Step.fui-Step-light .fui-Step__circle > .fui-Step__circle-number { color: var(--colorNeutralForeground4); } .fui-Steps .fui-Step.fui-Step-light.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-light.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step.fui-Step-dark .fui-Step__circle > svg { fill: var(--colorNeutralForeground1); } .fui-Steps .fui-Step.fui-Step-dark .fui-Step__circle > .fui-Step__circle-number { color: var(--colorNeutralForeground1); } .fui-Steps .fui-Step.fui-Step-dark.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-dark.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-Steps .fui-Step.fui-Step-link .fui-Step__circle > svg { fill: var(--colorBrandForegroundLink); } .fui-Steps .fui-Step.fui-Step-link .fui-Step__circle > .fui-Step__circle-number { color: var(--colorBrandForegroundLink); } .fui-Steps .fui-Step.fui-Step-link.fui-Step-active .fui-Step__circle-number, .fui-Steps .fui-Step.fui-Step-link.fui-Step-completed .fui-Step__circle-number { color: var(--colorNeutralForegroundOnBrand); } .fui-StepPanels { display: block; padding: 0; margin: 0; } .fui-StepPanels .fui-StepPanel { padding-bottom: var(--spacingVerticalM); padding-left: var(--spacingHorizontalM); padding-right: var(--spacingHorizontalM); padding-top: var(--spacingVerticalM); display: none; } .fui-StepPanels .fui-StepPanel-active { display: block; } .fui-Switch { align-items: flex-start; box-sizing: border-box; display: inline-flex; position: relative; } .fui-Switch__input { top: 0px; left: 0px; box-sizing: border-box; cursor: pointer; height: 100%; margin: 0px; opacity: 0; position: absolute; width: calc(40px + 2 * var(--spacingHorizontalS)); } .fui-Switch__input:disabled { cursor: default; } .fui-Switch__input:disabled:not(:checked) ~ .fui-Switch__indicator { border-color: var(--colorNeutralStrokeDisabled); } .fui-Switch__input:disabled ~ .fui-Switch__indicator { color: var(--colorNeutralForegroundDisabled); } .fui-Switch__input:disabled ~ .fui-Switch__label { cursor: default; color: var(--colorNeutralForegroundDisabled); } .fui-Switch__input:enabled:not(:checked) ~ .fui-Switch__indicator { color: var(--colorNeutralStrokeAccessible); border-color: var(--colorNeutralStrokeAccessible); } .fui-Switch__input:enabled:not(:checked) ~ .fui-Switch__label { color: var(--colorNeutralForeground1); } .fui-Switch__input:enabled:not(:checked):hover ~ .fui-Switch__indicator { color: var(--colorNeutralStrokeAccessibleHover); border-color: var(--colorNeutralStrokeAccessibleHover); } .fui-Switch__input:enabled:checked ~ .fui-Switch__indicator { background-color: var(--colorCompoundBrandBackground); color: var(--colorNeutralForegroundInverted); border-color: var(--colorTransparentStroke); } .fui-Switch__input:enabled:checked:hover ~ .fui-Switch__indicator { background-color: var(--colorCompoundBrandBackgroundHover); border-color: var(--colorTransparentStrokeInteractive); } .fui-Switch__input:enabled:checked.fui-Switch__input-secondary ~ .fui-Switch__indicator { background-color: var(--colorNeutralBackground3); } .fui-Switch__input:enabled:checked.fui-Switch__input-secondary:hover ~ .fui-Switch__indicator { background-color: var(--colorNeutralBackground3Hover); } .fui-Switch__input:enabled:checked.fui-Switch__input-success ~ .fui-Switch__indicator { background-color: var(--colorStatusSuccessBackground3); } .fui-Switch__input:enabled:checked.fui-Switch__input-success:hover ~ .fui-Switch__indicator { background-color: var(--colorStatusSuccessForeground1); } .fui-Switch__input:enabled:checked.fui-Switch__input-danger ~ .fui-Switch__indicator { background-color: var(--colorStatusDangerBackground3); } .fui-Switch__input:enabled:checked.fui-Switch__input-danger:hover ~ .fui-Switch__indicator { background-color: var(--colorStatusDangerForeground1); } .fui-Switch__input:enabled:checked.fui-Switch__input-warning ~ .fui-Switch__indicator { background-color: var(--colorPaletteMarigoldBackground3); } .fui-Switch__input:enabled:checked.fui-Switch__input-warning:hover ~ .fui-Switch__indicator { background-color: var(--colorPaletteMarigoldForeground1); } .fui-Switch__input:enabled:checked.fui-Switch__input-info ~ .fui-Switch__indicator { background-color: var(--colorNeutralForeground3); } .fui-Switch__input:enabled:checked.fui-Switch__input-info:hover ~ .fui-Switch__indicator { background-color: var(--colorNeutralForeground3Hover); } .fui-Switch__input:enabled:checked.fui-Switch__input-light ~ .fui-Switch__indicator { background-color: var(--colorNeutralBackground2); } .fui-Switch__input:enabled:checked.fui-Switch__input-light:hover ~ .fui-Switch__indicator { background-color: var(--colorNeutralBackground2Hover); } .fui-Switch__input:enabled:checked.fui-Switch__input-dark ~ .fui-Switch__indicator { background-color: var(--colorNeutralForeground1); } .fui-Switch__input:enabled:checked.fui-Switch__input-dark:hover ~ .fui-Switch__indicator { background-color: var(--colorNeutralForeground2); } .fui-Switch__input:enabled:checked.fui-Switch__input-link ~ .fui-Switch__indicator { background-color: var(--colorBrandForegroundLink); } .fui-Switch__input:enabled:checked.fui-Switch__input-link:hover ~ .fui-Switch__indicator { background-color: var(--colorBrandForegroundLinkHover); } .fui-Switch__input:checked ~ .fui-Switch__indicator > * { transform: translateX(20px); } .fui-Switch__input:checked.fui-Switch__input-xs ~ .fui-Switch__indicator > * { transform: translateX(14px); } .fui-Switch__input:checked.fui-Switch__input-sm ~ .fui-Switch__indicator > * { transform: translateX(16px); } .fui-Switch__input:checked.fui-Switch__input-md ~ .fui-Switch__indicator > * { transform: translateX(22px); } .fui-Switch__input:checked.fui-Switch__input-lg ~ .fui-Switch__indicator > * { transform: translateX(24px); } .fui-Switch__input:checked.fui-Switch__input-xl ~ .fui-Switch__indicator > * { transform: translateX(28px); } .fui-Switch__input ~ .fui-Switch__indicator { border-radius: var(--borderRadiusCircular); border: 1px solid; line-height: 0; box-sizing: border-box; fill: currentcolor; flex-shrink: 0; font-size: 18px; height: 20px; margin: var(--spacingVerticalS) var(--spacingHorizontalS); pointer-events: none; transition-duration: var(--durationNormal); transition-timing-function: var(--curveEasyEase); transition-property: background, border, color; width: 40px; } .fui-Switch__input ~ .fui-Switch__indicator .fui-Switch__indicator__icon { display: inline; line-height: 0; transition-duration: var(--durationNormal); transition-timing-function: var(--curveEasyEase); transition-property: transform; } .fui-Switch__input ~ .fui-Switch__label { padding-bottom: var(--spacingVerticalS); padding-top: var(--spacingVerticalS); margin-top: calc((20px - var(--lineHeightBase300)) / 2); margin-bottom: calc((20px - var(--lineHeightBase300)) / 2); cursor: pointer; padding-right: var(--spacingHorizontalS); line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); color: var(--colorNeutralForeground1); } .fui-Switch__input.fui-Switch__input-xs ~ .fui-Switch__indicator { width: 28px; height: 14px; font-size: 12px; } .fui-Switch__input.fui-Switch__input-xs ~ .fui-Switch__indicator + .fui-Switch__label { padding-bottom: var(--spacingVerticalXS); padding-top: var(--spacingVerticalXS); } .fui-Switch__input.fui-Switch__input-sm ~ .fui-Switch__indicator { width: 32px; height: 16px; font-size: 14px; } .fui-Switch__input.fui-Switch__input-sm ~ .fui-Switch__indicator + .fui-Switch__label { padding-bottom: var(--spacingVerticalSNudge); padding-top: var(--spacingVerticalSNudge); } .fui-Switch__input.fui-Switch__input-md ~ .fui-Switch__indicator { width: 44px; height: 22px; font-size: 20px; } .fui-Switch__input.fui-Switch__input-lg ~ .fui-Switch__indicator { width: 48px; height: 24px; font-size: 22px; } .fui-Switch__input.fui-Switch__input-lg ~ .fui-Switch__indicator + .fui-Switch__label { padding-bottom: var(--spacingVerticalMNudge); padding-top: var(--spacingVerticalMNudge); } .fui-Switch__input.fui-Switch__input-xl ~ .fui-Switch__indicator { width: 56px; height: 28px; font-size: 26px; } .fui-Switch__input.fui-Switch__input-xl ~ .fui-Switch__indicator ~ .fui-Switch__label { padding-bottom: var(--spacingVerticalM); padding-top: var(--spacingVerticalM); } .fui-Table { /*table-layout: fixed;*/ vertical-align: middle; display: table; border-collapse: collapse; width: 100%; background-color: var(--colorSubtleBackground); } .fui-Table .fui-TableHeader { display: table-row-group; } .fui-Table .fui-TableHeader.fui-TableHeader__theme.fui-TableHeader__theme-light th { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1); } .fui-Table .fui-TableHeader.fui-TableHeader__theme.fui-TableHeader__theme-dark th { color: var(--colorNeutralForegroundInverted); background-color: var(--colorNeutralBackgroundInverted); } .fui-Table .fui-TableHeader .fui-TableRow { display: table-row; border-bottom-color: var(--colorNeutralStroke2); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); box-sizing: border-box; color: var(--colorNeutralForeground1); } .fui-Table .fui-TableHeader .fui-TableRow .fui-TableHeaderCell { display: table-cell; padding-bottom: 0px; padding-top: 0px; vertical-align: middle; position: relative; padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); font-weight: var(--fontWeightRegular); height: 32px; } .fui-Table .fui-TableBody { display: table-row-group; } .fui-Table .fui-TableBody .fui-TableRow { display: table-row; border-bottom-color: var(--colorNeutralStroke2); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); box-sizing: border-box; color: var(--colorNeutralForeground1); } .fui-Table .fui-TableBody .fui-TableRow .fui-TableCell { height: 44px; display: table-cell; padding-bottom: 0px; padding-top: 0px; vertical-align: middle; position: relative; padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); } .fui-Table .fui-TableBody .fui-TableRow th.fui-TableRowHeader { font-weight: var(--fontWeightSemibold); padding-bottom: 0px; padding-top: 0px; vertical-align: middle; position: relative; padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); } .fui-Table .fui-TableBody .fui-TableRow.fui-TableRow-selectable { cursor: pointer; } .fui-Table .fui-TableBody .fui-TableRow.fui-TableRow-selectable:active { color: var(--colorNeutralForeground1Pressed); background-color: var(--colorSubtleBackgroundPressed); } .fui-Table .fui-TableBody .fui-TableRow.fui-TableRow-selected, .fui-Table .fui-TableBody .fui-TableRow.fui-TableRow-primary { background-color: var(--colorBrandBackground2); border-bottom-color: var(--colorTransparentStrokeInteractive); border-left-color: var(--colorTransparentStrokeInteractive); border-right-color: var(--colorTransparentStrokeInteractive); border-top-color: var(--colorTransparentStrokeInteractive); } .fui-Table .fui-TableBody .fui-TableGroup { display: table-row; border-bottom-color: var(--colorNeutralStroke2); border-bottom-style: solid; border-bottom-width: var(--strokeWidthThin); box-sizing: border-box; color: var(--colorNeutralForeground1); cursor: pointer; background-color: var(--colorNeutralBackground3); font-weight: 700; } .fui-Table .fui-TableBody .fui-TableGroup:hover { background-color: var(--colorNeutralBackground3Hover); } .fui-Table .fui-TableBody .fui-TableGroup .fui-TableGroupCell { height: 44px; display: table-cell; padding-bottom: 0px; padding-top: 0px; vertical-align: middle; position: relative; padding-left: var(--spacingHorizontalS); padding-right: var(--spacingHorizontalS); } .fui-Table.fui-Table-narrow .fui-TableBody .fui-TableRow .fui-TableCell { height: 34px; } .fui-Table.fui-Table-hoverable .fui-TableBody .fui-TableRow:hover { color: var(--colorNeutralForeground1Hover); background-color: var(--colorSubtleBackgroundHover); } .fui-Table.fui-Table-hoverable .fui-TableBody .fui-TableRow.fui-TableRow-selectable:active { color: var(--colorNeutralForeground1Pressed); background-color: var(--colorSubtleBackgroundPressed); } .fui-Table.fui-Table-striped .fui-TableBody .fui-TableRow:nth-of-type(odd) { background-color: var(--colorSubtleBackgroundHover); } .fui-Table.fui-Table-striped .fui-TableBody .fui-TableRow:nth-of-type(odd).fui-TableRow-selectable:active { color: var(--colorNeutralForeground1Pressed); background-color: var(--colorSubtleBackgroundPressed); } .fui-Table.fui-Table-striped .fui-TableBody .fui-TableRow:nth-of-type(odd).fui-TableRow-selected, .fui-Table.fui-Table-striped .fui-TableBody .fui-TableRow:nth-of-type(odd).fui-TableRow-primary { background-color: var(--colorBrandBackground2); border-bottom-color: var(--colorTransparentStrokeInteractive); border-left-color: var(--colorTransparentStrokeInteractive); border-right-color: var(--colorTransparentStrokeInteractive); border-top-color: var(--colorTransparentStrokeInteractive); } .fui-Table.fui-Table-bordered { border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .fui-Table.fui-Table-bordered th, .fui-Table.fui-Table-bordered td { border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .fui-Table.fui-Table-borderless .fui-TableHeader .fui-TableRow { border: 0; } .fui-Table.fui-Table-borderless .fui-TableBody .fui-TableRow { border: 0; } .fui-Table .fui-TableCaption-top { caption-side: top; } .fui-Table .fui-TableCaption-bottom { caption-side: bottom; } @media (max-width: 599.98px) { .fui-Table-responsive-sm { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .fui-Table-responsive-sm > .fui-Table-bordered { border: 0; } } @media (max-width: 959.98px) { .fui-Table-responsive-md { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .fui-Table-responsive-md > .fui-Table-bordered { border: 0; } } @media (max-width: 1279.98px) { .fui-Table-responsive-lg { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .fui-Table-responsive-lg > .fui-Table-bordered { border: 0; } } @media (max-width: 1919.98px) { .fui-Table-responsive-xl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .fui-Table-responsive-xl > .fui-Table-bordered { border: 0; } } @media (max-width: 2559.98px) { .fui-Table-responsive-xxl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .fui-Table-responsive-xxl > .fui-Table-bordered { border: 0; } } .fui-Table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .fui-Table-responsive > .fui-Table-bordered { border: 0; } .fui-Table-fixed-header { overflow-y: auto; } .fui-Table-fixed-header .fui-Table { border-spacing: 0; } .fui-Table-fixed-header .fui-Table thead:not(.fui-TableHeader__theme) th { background-color: white; } .fui-Table-fixed-header .fui-Table thead tr th { border-top: none; position: sticky !important; z-index: var(--zIndexITableFixed); } .fui-Table-fixed-header .fui-Table thead tr:nth-child(1) th { top: 0; } .fui-Table-fixed-columns { width: 100%; overflow-x: auto; white-space: nowrap; position: relative; } .fui-Table-fixed-columns .fui-Table { table-layout: fixed; overflow-x: auto; white-space: nowrap; border-spacing: 0; border: 0; } .fui-Table-fixed-columns .fui-Table .fui-TableHeaderCell-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRowHeader-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableCell-fixed-start { position: sticky !important; border-left: none; z-index: var(--zIndexITableFixed2); background-color: white; border-inline-start-width: 0; left: 0; } .fui-Table-fixed-columns .fui-Table .fui-TableHeaderCell-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableRowHeader-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableCell-fixed-end { position: sticky !important; border-left: none; z-index: var(--zIndexITableFixed2); background-color: white; border-inline-start-width: 0; right: 0; } .fui-Table-fixed-columns .fui-Table .fui-TableRow-selectable:active .fui-TableHeaderCell-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selectable:active .fui-TableHeaderCell-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selectable:active .fui-TableRowHeader-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selectable:active .fui-TableRowHeader-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selectable:active .fui-TableCell-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selectable:active .fui-TableCell-fixed-end { color: var(--colorNeutralForeground1Pressed); background-color: var(--colorSubtleBackgroundPressed); } .fui-Table-fixed-columns .fui-Table .fui-TableRow-selected .fui-TableHeaderCell-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selected .fui-TableHeaderCell-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selected .fui-TableRowHeader-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selected .fui-TableRowHeader-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selected .fui-TableCell-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-selected .fui-TableCell-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableRow-primary .fui-TableHeaderCell-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-primary .fui-TableHeaderCell-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableRow-primary .fui-TableRowHeader-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-primary .fui-TableRowHeader-fixed-end, .fui-Table-fixed-columns .fui-Table .fui-TableRow-primary .fui-TableCell-fixed-start, .fui-Table-fixed-columns .fui-Table .fui-TableRow-primary .fui-TableCell-fixed-end { background-color: var(--colorBrandBackground2); border-bottom-color: var(--colorTransparentStrokeInteractive); border-left-color: var(--colorTransparentStrokeInteractive); border-right-color: var(--colorTransparentStrokeInteractive); border-top-color: var(--colorTransparentStrokeInteractive); } .b-table.fui-Table { position: relative; } .b-table.fui-Table .b-table-resizer { position: absolute; top: 0; right: 0; width: 5px; cursor: col-resize; user-select: none; z-index: 1; } .b-table.fui-Table .b-table-resizer:hover, .b-table.fui-Table .b-table-resizing { cursor: col-resize !important; border-right: 2px solid var(--b-theme-primary, blue); } .b-table.fui-Table .b-table-resizing { cursor: col-resize !important; } td:focus { outline: -webkit-focus-ring-color auto 1px; } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { .fui-Table-mobile { /* Force table to not be like tables anymore */ /* Hide table headers (but not display: none;, for accessibility) */ } .fui-Table-mobile [data-caption]:before { content: attr(data-caption); } .fui-Table-mobile thead, .fui-Table-mobile tbody, .fui-Table-mobile th, .fui-Table-mobile td, .fui-Table-mobile tr { display: block !important; } .fui-Table-mobile thead tr { position: absolute; top: -9999px; left: -9999px; } .fui-Table-mobile td, .fui-Table-mobile th { /* Behave like a "row" */ position: relative; padding-top: 1.25rem !important; } .fui-Table-mobile td:before, .fui-Table-mobile th:before { position: absolute; top: 0; white-space: nowrap; font-weight: bold; } .fui-Table-mobile:not(.fui-Table-borderless) tr { border-bottom: 1px solid; } } .fui-TabList { align-items: stretch; position: relative; flex-wrap: nowrap; flex-shrink: 0; display: flex; } .fui-TabList-fill .fui-Tab { flex: 1 1 auto; text-align: center; } .fui-TabList-justified .fui-Tab { flex-basis: 0; flex-grow: 1; text-align: center; } .fui-TabList[aria-orientation=horizontal] { flex-direction: row; } .fui-TabList[aria-orientation=vertical] { flex-direction: column; } .fui-TabList .fui-Tab { --fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1; overflow-y: hidden; overflow-x: hidden; padding-bottom: var(--spacingVerticalM); padding-left: var(--spacingHorizontalMNudge); padding-right: var(--spacingHorizontalMNudge); padding-top: var(--spacingVerticalM); column-gap: var(--spacingHorizontalSNudge); justify-content: center; text-transform: none; outline-style: none; grid-template-rows: auto; grid-template-columns: auto; grid-auto-flow: column; display: grid; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; position: relative; cursor: pointer; align-items: center; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); background-color: var(--colorTransparentBackground); flex-shrink: 0; line-height: var(--lineHeightBase300); font-family: var(--fontFamilyBase); } .fui-TabList .fui-Tab.fui-Tab-top::before { right: var(--spacingHorizontalM); left: var(--spacingHorizontalM); height: var(--strokeWidthThicker); bottom: 0px; } .fui-TabList .fui-Tab.fui-Tab-bottom::before { right: var(--spacingHorizontalM); left: var(--spacingHorizontalM); height: var(--strokeWidthThicker); top: 0px; } .fui-TabList .fui-Tab.fui-Tab-start::before { top: var(--spacingVerticalS); bottom: var(--spacingVerticalS); width: var(--strokeWidthThicker); left: 0px; } .fui-TabList .fui-Tab.fui-Tab-end::before { top: var(--spacingVerticalS); bottom: var(--spacingVerticalS); width: var(--strokeWidthThicker); right: 0px; } .fui-TabList .fui-Tab:not(.fui-Tab-active):active :not(:disabled) { background-color: var(--colorTransparentBackgroundPressed); } .fui-TabList .fui-Tab:not(.fui-Tab-active):active :not(:disabled)::before { position: absolute; content: ""; border-top-left-radius: var(--borderRadiusCircular); border-top-right-radius: var(--borderRadiusCircular); border-bottom-left-radius: var(--borderRadiusCircular); border-bottom-right-radius: var(--borderRadiusCircular); background-color: var(--colorNeutralStroke1Pressed); } .fui-TabList .fui-Tab:not(.fui-Tab-active):hover:not(:disabled) { background-color: var(--colorTransparentBackgroundHover); } .fui-TabList .fui-Tab:not(.fui-Tab-active):hover:not(:disabled)::before { position: absolute; content: ""; border-top-left-radius: var(--borderRadiusCircular); border-top-right-radius: var(--borderRadiusCircular); border-bottom-left-radius: var(--borderRadiusCircular); border-bottom-right-radius: var(--borderRadiusCircular); background-color: var(--colorNeutralStroke1Hover); } .fui-TabList .fui-Tab.fui-Tab-active { overflow-y: visible; overflow-x: visible; } .fui-TabList .fui-Tab.fui-Tab-active::before:active:not(:disabled) { position: absolute; content: ""; border-top-left-radius: var(--borderRadiusCircular); border-top-right-radius: var(--borderRadiusCircular); border-bottom-left-radius: var(--borderRadiusCircular); border-bottom-right-radius: var(--borderRadiusCircular); background-color: var(--colorNeutralStroke1Pressed); } .fui-TabList .fui-Tab.fui-Tab-active::before:hover:not(:disabled) { content: ""; border-top-left-radius: var(--borderRadiusCircular); border-top-right-radius: var(--borderRadiusCircular); border-bottom-left-radius: var(--borderRadiusCircular); border-bottom-right-radius: var(--borderRadiusCircular); background-color: var(--colorNeutralStroke1Hover); } .fui-TabList .fui-Tab.fui-Tab-active::after { transform: translateX(var(--fui-Tab__indicator--offset)) scaleX(var(--fui-Tab__indicator--scale)); transform-origin: left center; transition-timing-function: var(--curveDecelerateMax); transition-duration: var(--durationSlow); transition-property: transform; background-color: var(--colorCompoundBrandStroke); z-index: 1; position: absolute; content: ""; border-top-left-radius: var(--borderRadiusCircular); border-top-right-radius: var(--borderRadiusCircular); border-bottom-left-radius: var(--borderRadiusCircular); border-bottom-right-radius: var(--borderRadiusCircular); } .fui-TabList .fui-Tab.fui-Tab-active::after:hover:not(:disabled) { background-color: var(--colorCompoundBrandStrokeHover); } .fui-TabList .fui-Tab.fui-Tab-active::after:active :not(:disabled) { background-color: var(--colorCompoundBrandStrokePressed); } .fui-TabList .fui-Tab.fui-Tab-active.fui-Tab-top::after { right: var(--spacingHorizontalM); left: var(--spacingHorizontalM); height: var(--strokeWidthThicker); bottom: 0px; } .fui-TabList .fui-Tab.fui-Tab-active.fui-Tab-bottom::after { right: var(--spacingHorizontalM); left: var(--spacingHorizontalM); height: var(--strokeWidthThicker); top: 0px; } .fui-TabList .fui-Tab.fui-Tab-active.fui-Tab-start::after { top: var(--spacingVerticalS); bottom: var(--spacingVerticalS); width: var(--strokeWidthThicker); left: 0px; } .fui-TabList .fui-Tab.fui-Tab-active.fui-Tab-end::after { top: var(--spacingVerticalS); bottom: var(--spacingVerticalS); width: var(--strokeWidthThicker); right: 0px; } .fui-TabList .fui-Tab.fui-Tab-disabled, .fui-TabList .fui-Tab:disabled { cursor: not-allowed; } .fui-TabList .fui-Tab.fui-Tab-disabled .fui-Tab__content, .fui-TabList .fui-Tab:disabled .fui-Tab__content { color: var(--colorNeutralForegroundDisabled); } .fui-TabList .fui-Tab .fui-Tab__content { color: var(--colorNeutralForeground1); padding-bottom: var(--spacingVerticalNone); padding-left: var(--spacingHorizontalXXS); padding-right: var(--spacingHorizontalXXS); padding-top: var(--spacingVerticalNone); grid-row-start: 1; grid-column-start: 1; overflow-y: hidden; overflow-x: hidden; line-height: var(--lineHeightBase300); font-family: var(--fontFamilyBase); } .fui-TabList .fui-Tab .fui-Tab__content:active :not(:disabled) { color: var(--colorNeutralForeground2Pressed); } .fui-TabList .fui-Tab .fui-Tab__content:hover :not(:disabled) { color: var(--colorNeutralForeground2Hover); } .fui-TabList .fui-Tab:not(.fui-Tab-active) { font-weight: var(--fontWeightRegular); font-size: var(--fontWeightRegular); } .fui-TabList .fui-Tab.fui-Tab-active { font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300); } .fui-TabList .fui-Tab .fui-Tab__content--reserved-space { visibility: hidden; padding-bottom: var(--spacingVerticalNone); padding-left: var(--spacingHorizontalXXS); padding-right: var(--spacingHorizontalXXS); padding-top: var(--spacingVerticalNone); grid-row-start: 1; grid-column-start: 1; overflow-y: hidden; overflow-x: hidden; font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); } .fui-TabPanels { padding-top: var(--spacingVerticalM); } .fui-TabPanels .fui-TabPanel { padding-bottom: 0px; padding-left: var(--spacingHorizontalM); padding-right: var(--spacingHorizontalM); padding-top: 0px; display: none; } .fui-TabPanels .fui-TabPanel-active { display: block; } @keyframes toast-enter-1 { 0% { max-height: 0px; opacity: 0; margin-top: 0px; } 100% { margin-top: var(--spacingVerticalL); opacity: 0; max-height: var(--fui-toast-height); } } @keyframes toast-enter-2 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toast-exit-1 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes toast-exit-2 { 0% { opacity: 0; } 100% { opacity: 0; margin-top: 0px; max-height: 0px; } } .fui-Toaster { z-index: var(--zIndexPopover); } .fui-Toaster-fixed { position: fixed; } .fui-Toaster-absolute { position: absolute; } .fui-Toaster-top { top: var(--spacingVerticalL); left: calc(50% + var(--spacingHorizontalXL)); transform: translateX(-50%); } .fui-Toaster-top-end { top: var(--spacingVerticalL); right: var(--spacingHorizontalXL); } .fui-Toaster-top-start { top: var(--spacingVerticalL); left: var(--spacingHorizontalXL); } .fui-Toaster-bottom { bottom: var(--spacingVerticalL); left: calc(50% + var(--spacingHorizontalXL)); transform: translateX(-50%); } .fui-Toaster-bottom-end { bottom: var(--spacingVerticalL); right: var(--spacingHorizontalXL); } .fui-Toaster-bottom-start { bottom: var(--spacingVerticalL); left: var(--spacingHorizontalXL); } .fui-ToastContainer { --fui-toast-height: 44px; box-sizing: border-box; margin-top: var(--spacingVerticalL); min-height: 44px; pointer-events: all; border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-top-left-radius: var(--borderRadiusMedium); } .fui-ToastContainer.fui-ToastContainer-hide { animation-name: toast-exit-1, toast-exit-2; animation-delay: 0ms, var(--fui-toast-animation-duration); animation-duration: var(--fui-toast-animation-duration), calc(var(--fui-toast-animation-duration) / 2); opacity: 0; } .fui-ToastContainer.fui-ToastContainer-hide:not(.fui-ToastContainer-hiding) { display: none; } .fui-ToastContainer.fui-ToastContainer-show { animation-name: toast-enter-1, toast-enter-2; animation-delay: 0ms, calc(var(--fui-toast-animation-duration) / 2); animation-duration: calc(var(--fui-toast-animation-duration) / 2), var(--fui-toast-animation-duration); opacity: 1; } .fui-ToastContainer .fui-Toast { display: grid; grid-template-columns: auto 1fr auto; will-change: transform, box-shadow, opacity, visibility; transition-property: transform, box-shadow, opacity, visibility; padding: var(--spacingVerticalM) var(--spacingHorizontalM); border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-top-left-radius: var(--borderRadiusMedium); border-width: var(--strokeWidthThin); border-style: solid; border-top-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-bottom-color: var(--colorTransparentStroke); border-left-color: var(--colorTransparentStroke); box-shadow: var(--shadow8); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1); animation-duration: var(--fui-toast-animation-duration); animation-play-state: paused; } .fui-ToastContainer .fui-Toast.fui-Toast-showing { animation-play-state: running; } .fui-ToastContainer .fui-Toast.fui-Toast-hiding { animation-play-state: running; } .fui-ToastContainer .fui-Toast .fui-ToastHeader { display: flex; align-items: center; grid-column-end: 3; color: var(--colorNeutralForeground1); word-break: break-word; } .fui-ToastContainer .fui-Toast .fui-ToastBody { grid-column: 2/3; padding-top: var(--spacingVerticalSNudge); font-size: var(--fontSizeBase300); line-height: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); color: var(--colorNeutralForeground1); word-break: break-word; } .fui-Tooltip-inline { display: inline-block; } .fui-Tooltip__box[data-theme~=fluentui] { filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey)); padding-bottom: 6px; padding-left: 11px; padding-right: 11px; padding-top: 4px; border-bottom-width: 1px; border-top-width: 1px; overflow-wrap: break-word; max-width: 240px; cursor: default; display: block; box-sizing: border-box; border-bottom-color: var(--colorTransparentStroke); border-top-color: var(--colorTransparentStroke); border-left-width: 1px; border-right-width: 1px; border-left-color: var(--colorTransparentStroke); border-right-color: var(--colorTransparentStroke); border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-style: solid; font-size: var(--fontSizeBase200); border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); line-height: var(--lineHeightBase200); font-family: var(--fontFamilyBase); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); } .fui-Tooltip__box[data-theme~=fluentui] > .fui-Tooltip__arrow { z-index: -1; visibility: hidden; background-color: inherit; position: absolute; } .fui-Tooltip__box[data-theme~=fluentui] > .fui-Tooltip__arrow::before { transform: rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg); border-bottom-right-radius: var(--borderRadiusSmall); border-bottom-color: var(--colorTransparentStroke); border-bottom-style: solid; border-bottom-width: 1px; border-right-color: var(--colorTransparentStroke); border-right-style: solid; border-right-width: 1px; background-color: inherit; height: inherit; width: inherit; box-sizing: border-box; position: absolute; visibility: visible; content: ""; } .fui-Tooltip__box[data-theme~=fluentui][data-placement^=top] > .fui-Tooltip__arrow { --fui-positioning-angle: 0; bottom: -1px; height: 8.484px; width: 8.484px; } .fui-Tooltip__box[data-theme~=fluentui][data-placement^=bottom] > .fui-Tooltip__arrow { --fui-positioning-angle: 180deg; top: -1px; height: 8.484px; width: 8.484px; } .fui-Tooltip__box[data-theme~=fluentui][data-placement^=left] > .fui-Tooltip__arrow { --fui-positioning-angle: -90deg; right: -1px; height: 8.484px; width: 8.484px; } .fui-Tooltip__box[data-theme~=fluentui][data-placement^=right] > .fui-Tooltip__arrow { --fui-positioning-angle: 90deg; left: -1px; height: 8.484px; width: 8.484px; } .fui-Tooltip__box[data-theme~=fluentui][data-animation=fade][data-state=hidden] { opacity: 0; } .fui-Text { text-overflow: clip; overflow-y: visible; overflow-x: visible; white-space: normal; text-align: start; line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); } .fui-Heading-1, .fui-Heading-2, .fui-Heading-3, .fui-Heading-4, .fui-Heading-5, .fui-Heading-6 { text-overflow: clip; text-align: start; overflow-y: visible; overflow-x: visible; white-space: normal; font-weight: var(--fontWeightSemibold); font-family: var(--fontFamilyBase); margin-bottom: var(--spacingVerticalM); } .fui-Heading-1 { line-height: var(--lineHeightHero800); font-size: var(--fontSizeHero800); } .fui-Heading-2 { line-height: var(--lineHeightHero700); font-size: var(--fontSizeHero700); } .fui-Heading-3 { line-height: var(--lineHeightBase600); font-size: var(--fontSizeBase600); } .fui-Heading-4 { line-height: var(--lineHeightBase500); font-size: var(--fontSizeBase500); } .fui-Heading-5 { line-height: var(--lineHeightBase400); font-size: var(--fontSizeBase400); } .fui-Heading-6 { line-height: var(--lineHeightBase300); font-size: var(--fontSizeBase300); } .fui-DisplayHeading-1, .fui-DisplayHeading-2, .fui-DisplayHeading-3, .fui-DisplayHeading-4 { text-overflow: clip; text-align: start; overflow-y: visible; overflow-x: visible; white-space: normal; font-weight: var(--fontWeightSemibold); font-family: var(--fontFamilyBase); margin-bottom: var(--spacingVerticalM); } .fui-DisplayHeading-1 { line-height: var(--lineHeightHero1000); font-size: var(--fontSizeHero1000); } .fui-DisplayHeading-2 { line-height: var(--lineHeightHero900); font-size: var(--fontSizeHero900); } .fui-DisplayHeading-3 { line-height: var(--lineHeightHero800); font-size: var(--fontSizeHero800); } .fui-DisplayHeading-4 { line-height: var(--lineHeightHero700); font-size: var(--fontSizeHero700); } .fui-Paragraph { text-overflow: clip; text-align: start; overflow-y: visible; overflow-x: visible; white-space: normal; line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); margin-bottom: var(--spacingVerticalM); } .fui-Lead { text-overflow: clip; text-align: start; overflow-y: visible; overflow-x: visible; white-space: normal; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightRegular); font-family: var(--fontFamilyBase); margin-bottom: var(--spacingVerticalM); } code { background: #f0f0f0; border-radius: 4px; padding: 1px 4px; margin: 0 3px 0 3px; color: black; border: none; line-height: 1.5; } .fui-Input__input.b-input-color-picker { height: 20px; } .fui-Align-baseline { vertical-align: baseline !important; } .fui-Align-top { vertical-align: top !important; } .fui-Align-middle { vertical-align: middle !important; } .fui-Align-bottom { vertical-align: bottom !important; } .fui-Align-text-bottom { vertical-align: text-bottom !important; } .fui-Align-text-top { vertical-align: text-top !important; } .fui-Background-primary { background-color: var(--colorBrandBackground) !important; } .fui-Background-secondary { background-color: var(--colorNeutralBackground3) !important; } .fui-Background-success { background-color: var(--colorStatusSuccessBackground3) !important; } .fui-Background-danger { background-color: var(--colorStatusDangerBackground3) !important; } .fui-Background-warning { background-color: var(--colorStatusWarningBackground3) !important; } .fui-Background-info { background-color: var(--colorNeutralForeground3) !important; } .fui-Background-light { background-color: var(--colorNeutralBackground2) !important; } .fui-Background-dark { background-color: var(--colorNeutralForeground1) !important; } .fui-Background-link { background-color: var(--colorBrandForegroundLink) !important; } .fui-Background-white { background-color: var(--colorNeutralBackground1) !important; } .fui-Background-transparent { background-color: var(--colorTransparentBackground) !important; } .fui-Border { border: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-top { border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-end { border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-bottom { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-start { border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-0 { border: var(--strokeWidthNone) solid var(--colorNeutralStroke1) !important; } .fui-Border-0.fui-Border-primary { border-color: var(--colorBrandBackground) !important; } .fui-Border-0.fui-Border-secondary { border-color: var(--colorNeutralBackground3) !important; } .fui-Border-0.fui-Border-success { border-color: var(--colorStatusSuccessBackground3) !important; } .fui-Border-0.fui-Border-danger { border-color: var(--colorStatusDangerBackground3) !important; } .fui-Border-0.fui-Border-warning { border-color: var(--colorStatusWarningBackground3) !important; } .fui-Border-0.fui-Border-info { border-color: var(--colorNeutralForeground3) !important; } .fui-Border-0.fui-Border-light { border-color: var(--colorNeutralBackground2) !important; } .fui-Border-0.fui-Border-dark { border-color: var(--colorNeutralForeground1) !important; } .fui-Border-0.fui-Border-link { border-color: var(--colorBrandForegroundLink) !important; } .fui-Border-primary-0 { border: var(--strokeWidthNone) solid var(--colorBrandBackground) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-secondary-0 { border: var(--strokeWidthNone) solid var(--colorNeutralBackground3) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-success-0 { border: var(--strokeWidthNone) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-danger-0 { border: var(--strokeWidthNone) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-warning-0 { border: var(--strokeWidthNone) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-info-0 { border: var(--strokeWidthNone) solid var(--colorNeutralForeground3) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-light-0 { border: var(--strokeWidthNone) solid var(--colorNeutralBackground2) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-dark-0 { border: var(--strokeWidthNone) solid var(--colorNeutralForeground1) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-link-0 { border: var(--strokeWidthNone) solid var(--colorBrandForegroundLink) !important; } .fui-Border-white-0 { border-color: #fff !important; } .fui-Border-top-0 { border-top: var(--strokeWidthNone) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-top-0 { border-top: var(--strokeWidthNone) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-top-0 { border-top: var(--strokeWidthNone) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-top-0 { border-top: var(--strokeWidthNone) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-top-0 { border-top: var(--strokeWidthNone) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-top-0 { border-top: var(--strokeWidthNone) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-top-0 { border-top: var(--strokeWidthNone) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-top-0 { border-top: var(--strokeWidthNone) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-top-0 { border-top: var(--strokeWidthNone) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-top-0 { border-top: var(--strokeWidthNone) solid var(--colorBrandForegroundLink) !important; } .fui-Border-end-0 { border-right: var(--strokeWidthNone) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-end-0 { border-right: var(--strokeWidthNone) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-end-0 { border-right: var(--strokeWidthNone) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-end-0 { border-right: var(--strokeWidthNone) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-end-0 { border-right: var(--strokeWidthNone) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-end-0 { border-right: var(--strokeWidthNone) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-end-0 { border-right: var(--strokeWidthNone) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-end-0 { border-right: var(--strokeWidthNone) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-end-0 { border-right: var(--strokeWidthNone) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-end-0 { border-right: var(--strokeWidthNone) solid var(--colorBrandForegroundLink) !important; } .fui-Border-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-bottom-0 { border-bottom: var(--strokeWidthNone) solid var(--colorBrandForegroundLink) !important; } .fui-Border-start-0 { border-left: var(--strokeWidthNone) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-start-0 { border-left: var(--strokeWidthNone) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-start-0 { border-left: var(--strokeWidthNone) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-start-0 { border-left: var(--strokeWidthNone) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-start-0 { border-left: var(--strokeWidthNone) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-start-0 { border-left: var(--strokeWidthNone) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-start-0 { border-left: var(--strokeWidthNone) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-start-0 { border-left: var(--strokeWidthNone) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-start-0 { border-left: var(--strokeWidthNone) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-start-0 { border-left: var(--strokeWidthNone) solid var(--colorBrandForegroundLink) !important; } .fui-Border-1 { border: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-1.fui-Border-primary { border-color: var(--colorBrandBackground) !important; } .fui-Border-1.fui-Border-secondary { border-color: var(--colorNeutralBackground3) !important; } .fui-Border-1.fui-Border-success { border-color: var(--colorStatusSuccessBackground3) !important; } .fui-Border-1.fui-Border-danger { border-color: var(--colorStatusDangerBackground3) !important; } .fui-Border-1.fui-Border-warning { border-color: var(--colorStatusWarningBackground3) !important; } .fui-Border-1.fui-Border-info { border-color: var(--colorNeutralForeground3) !important; } .fui-Border-1.fui-Border-light { border-color: var(--colorNeutralBackground2) !important; } .fui-Border-1.fui-Border-dark { border-color: var(--colorNeutralForeground1) !important; } .fui-Border-1.fui-Border-link { border-color: var(--colorBrandForegroundLink) !important; } .fui-Border-primary-1 { border: var(--strokeWidthThin) solid var(--colorBrandBackground) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-secondary-1 { border: var(--strokeWidthThin) solid var(--colorNeutralBackground3) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-success-1 { border: var(--strokeWidthThin) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-danger-1 { border: var(--strokeWidthThin) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-warning-1 { border: var(--strokeWidthThin) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-info-1 { border: var(--strokeWidthThin) solid var(--colorNeutralForeground3) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-light-1 { border: var(--strokeWidthThin) solid var(--colorNeutralBackground2) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-dark-1 { border: var(--strokeWidthThin) solid var(--colorNeutralForeground1) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-link-1 { border: var(--strokeWidthThin) solid var(--colorBrandForegroundLink) !important; } .fui-Border-white-1 { border-color: #fff !important; } .fui-Border-top-1 { border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-top-1 { border-top: var(--strokeWidthThin) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-top-1 { border-top: var(--strokeWidthThin) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-top-1 { border-top: var(--strokeWidthThin) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-top-1 { border-top: var(--strokeWidthThin) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-top-1 { border-top: var(--strokeWidthThin) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-top-1 { border-top: var(--strokeWidthThin) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-top-1 { border-top: var(--strokeWidthThin) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-top-1 { border-top: var(--strokeWidthThin) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-top-1 { border-top: var(--strokeWidthThin) solid var(--colorBrandForegroundLink) !important; } .fui-Border-end-1 { border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-end-1 { border-right: var(--strokeWidthThin) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-end-1 { border-right: var(--strokeWidthThin) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-end-1 { border-right: var(--strokeWidthThin) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-end-1 { border-right: var(--strokeWidthThin) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-end-1 { border-right: var(--strokeWidthThin) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-end-1 { border-right: var(--strokeWidthThin) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-end-1 { border-right: var(--strokeWidthThin) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-end-1 { border-right: var(--strokeWidthThin) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-end-1 { border-right: var(--strokeWidthThin) solid var(--colorBrandForegroundLink) !important; } .fui-Border-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-bottom-1 { border-bottom: var(--strokeWidthThin) solid var(--colorBrandForegroundLink) !important; } .fui-Border-start-1 { border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-start-1 { border-left: var(--strokeWidthThin) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-start-1 { border-left: var(--strokeWidthThin) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-start-1 { border-left: var(--strokeWidthThin) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-start-1 { border-left: var(--strokeWidthThin) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-start-1 { border-left: var(--strokeWidthThin) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-start-1 { border-left: var(--strokeWidthThin) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-start-1 { border-left: var(--strokeWidthThin) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-start-1 { border-left: var(--strokeWidthThin) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-start-1 { border-left: var(--strokeWidthThin) solid var(--colorBrandForegroundLink) !important; } .fui-Border-2 { border: var(--strokeWidthThick) solid var(--colorNeutralStroke1) !important; } .fui-Border-2.fui-Border-primary { border-color: var(--colorBrandBackground) !important; } .fui-Border-2.fui-Border-secondary { border-color: var(--colorNeutralBackground3) !important; } .fui-Border-2.fui-Border-success { border-color: var(--colorStatusSuccessBackground3) !important; } .fui-Border-2.fui-Border-danger { border-color: var(--colorStatusDangerBackground3) !important; } .fui-Border-2.fui-Border-warning { border-color: var(--colorStatusWarningBackground3) !important; } .fui-Border-2.fui-Border-info { border-color: var(--colorNeutralForeground3) !important; } .fui-Border-2.fui-Border-light { border-color: var(--colorNeutralBackground2) !important; } .fui-Border-2.fui-Border-dark { border-color: var(--colorNeutralForeground1) !important; } .fui-Border-2.fui-Border-link { border-color: var(--colorBrandForegroundLink) !important; } .fui-Border-primary-2 { border: var(--strokeWidthThick) solid var(--colorBrandBackground) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-secondary-2 { border: var(--strokeWidthThick) solid var(--colorNeutralBackground3) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-success-2 { border: var(--strokeWidthThick) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-danger-2 { border: var(--strokeWidthThick) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-warning-2 { border: var(--strokeWidthThick) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-info-2 { border: var(--strokeWidthThick) solid var(--colorNeutralForeground3) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-light-2 { border: var(--strokeWidthThick) solid var(--colorNeutralBackground2) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-dark-2 { border: var(--strokeWidthThick) solid var(--colorNeutralForeground1) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-link-2 { border: var(--strokeWidthThick) solid var(--colorBrandForegroundLink) !important; } .fui-Border-white-2 { border-color: #fff !important; } .fui-Border-top-2 { border-top: var(--strokeWidthThick) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-top-2 { border-top: var(--strokeWidthThick) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-top-2 { border-top: var(--strokeWidthThick) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-top-2 { border-top: var(--strokeWidthThick) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-top-2 { border-top: var(--strokeWidthThick) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-top-2 { border-top: var(--strokeWidthThick) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-top-2 { border-top: var(--strokeWidthThick) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-top-2 { border-top: var(--strokeWidthThick) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-top-2 { border-top: var(--strokeWidthThick) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-top-2 { border-top: var(--strokeWidthThick) solid var(--colorBrandForegroundLink) !important; } .fui-Border-end-2 { border-right: var(--strokeWidthThick) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-end-2 { border-right: var(--strokeWidthThick) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-end-2 { border-right: var(--strokeWidthThick) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-end-2 { border-right: var(--strokeWidthThick) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-end-2 { border-right: var(--strokeWidthThick) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-end-2 { border-right: var(--strokeWidthThick) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-end-2 { border-right: var(--strokeWidthThick) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-end-2 { border-right: var(--strokeWidthThick) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-end-2 { border-right: var(--strokeWidthThick) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-end-2 { border-right: var(--strokeWidthThick) solid var(--colorBrandForegroundLink) !important; } .fui-Border-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-bottom-2 { border-bottom: var(--strokeWidthThick) solid var(--colorBrandForegroundLink) !important; } .fui-Border-start-2 { border-left: var(--strokeWidthThick) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-start-2 { border-left: var(--strokeWidthThick) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-start-2 { border-left: var(--strokeWidthThick) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-start-2 { border-left: var(--strokeWidthThick) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-start-2 { border-left: var(--strokeWidthThick) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-start-2 { border-left: var(--strokeWidthThick) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-start-2 { border-left: var(--strokeWidthThick) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-start-2 { border-left: var(--strokeWidthThick) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-start-2 { border-left: var(--strokeWidthThick) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-start-2 { border-left: var(--strokeWidthThick) solid var(--colorBrandForegroundLink) !important; } .fui-Border-3 { border: var(--strokeWidthThicker) solid var(--colorNeutralStroke1) !important; } .fui-Border-3.fui-Border-primary { border-color: var(--colorBrandBackground) !important; } .fui-Border-3.fui-Border-secondary { border-color: var(--colorNeutralBackground3) !important; } .fui-Border-3.fui-Border-success { border-color: var(--colorStatusSuccessBackground3) !important; } .fui-Border-3.fui-Border-danger { border-color: var(--colorStatusDangerBackground3) !important; } .fui-Border-3.fui-Border-warning { border-color: var(--colorStatusWarningBackground3) !important; } .fui-Border-3.fui-Border-info { border-color: var(--colorNeutralForeground3) !important; } .fui-Border-3.fui-Border-light { border-color: var(--colorNeutralBackground2) !important; } .fui-Border-3.fui-Border-dark { border-color: var(--colorNeutralForeground1) !important; } .fui-Border-3.fui-Border-link { border-color: var(--colorBrandForegroundLink) !important; } .fui-Border-primary-3 { border: var(--strokeWidthThicker) solid var(--colorBrandBackground) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-secondary-3 { border: var(--strokeWidthThicker) solid var(--colorNeutralBackground3) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-success-3 { border: var(--strokeWidthThicker) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-danger-3 { border: var(--strokeWidthThicker) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-warning-3 { border: var(--strokeWidthThicker) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-info-3 { border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-light-3 { border: var(--strokeWidthThicker) solid var(--colorNeutralBackground2) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-dark-3 { border: var(--strokeWidthThicker) solid var(--colorNeutralForeground1) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-link-3 { border: var(--strokeWidthThicker) solid var(--colorBrandForegroundLink) !important; } .fui-Border-white-3 { border-color: #fff !important; } .fui-Border-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-top-3 { border-top: var(--strokeWidthThicker) solid var(--colorBrandForegroundLink) !important; } .fui-Border-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-end-3 { border-right: var(--strokeWidthThicker) solid var(--colorBrandForegroundLink) !important; } .fui-Border-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-bottom-3 { border-bottom: var(--strokeWidthThicker) solid var(--colorBrandForegroundLink) !important; } .fui-Border-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-start-3 { border-left: var(--strokeWidthThicker) solid var(--colorBrandForegroundLink) !important; } .fui-Border-4 { border: var(--strokeWidthThickest) solid var(--colorNeutralStroke1) !important; } .fui-Border-4.fui-Border-primary { border-color: var(--colorBrandBackground) !important; } .fui-Border-4.fui-Border-secondary { border-color: var(--colorNeutralBackground3) !important; } .fui-Border-4.fui-Border-success { border-color: var(--colorStatusSuccessBackground3) !important; } .fui-Border-4.fui-Border-danger { border-color: var(--colorStatusDangerBackground3) !important; } .fui-Border-4.fui-Border-warning { border-color: var(--colorStatusWarningBackground3) !important; } .fui-Border-4.fui-Border-info { border-color: var(--colorNeutralForeground3) !important; } .fui-Border-4.fui-Border-light { border-color: var(--colorNeutralBackground2) !important; } .fui-Border-4.fui-Border-dark { border-color: var(--colorNeutralForeground1) !important; } .fui-Border-4.fui-Border-link { border-color: var(--colorBrandForegroundLink) !important; } .fui-Border-primary-4 { border: var(--strokeWidthThickest) solid var(--colorBrandBackground) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-secondary-4 { border: var(--strokeWidthThickest) solid var(--colorNeutralBackground3) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-success-4 { border: var(--strokeWidthThickest) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-danger-4 { border: var(--strokeWidthThickest) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-warning-4 { border: var(--strokeWidthThickest) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-info-4 { border: var(--strokeWidthThickest) solid var(--colorNeutralForeground3) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-light-4 { border: var(--strokeWidthThickest) solid var(--colorNeutralBackground2) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-dark-4 { border: var(--strokeWidthThickest) solid var(--colorNeutralForeground1) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-link-4 { border: var(--strokeWidthThickest) solid var(--colorBrandForegroundLink) !important; } .fui-Border-white-4 { border-color: #fff !important; } .fui-Border-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-top-4 { border-top: var(--strokeWidthThickest) solid var(--colorBrandForegroundLink) !important; } .fui-Border-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-end-4 { border-right: var(--strokeWidthThickest) solid var(--colorBrandForegroundLink) !important; } .fui-Border-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-bottom-4 { border-bottom: var(--strokeWidthThickest) solid var(--colorBrandForegroundLink) !important; } .fui-Border-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-start-4 { border-left: var(--strokeWidthThickest) solid var(--colorBrandForegroundLink) !important; } .fui-Border-5 { border: var(--strokeWidthMax) solid var(--colorNeutralStroke1) !important; } .fui-Border-5.fui-Border-primary { border-color: var(--colorBrandBackground) !important; } .fui-Border-5.fui-Border-secondary { border-color: var(--colorNeutralBackground3) !important; } .fui-Border-5.fui-Border-success { border-color: var(--colorStatusSuccessBackground3) !important; } .fui-Border-5.fui-Border-danger { border-color: var(--colorStatusDangerBackground3) !important; } .fui-Border-5.fui-Border-warning { border-color: var(--colorStatusWarningBackground3) !important; } .fui-Border-5.fui-Border-info { border-color: var(--colorNeutralForeground3) !important; } .fui-Border-5.fui-Border-light { border-color: var(--colorNeutralBackground2) !important; } .fui-Border-5.fui-Border-dark { border-color: var(--colorNeutralForeground1) !important; } .fui-Border-5.fui-Border-link { border-color: var(--colorBrandForegroundLink) !important; } .fui-Border-primary-5 { border: var(--strokeWidthMax) solid var(--colorBrandBackground) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-secondary-5 { border: var(--strokeWidthMax) solid var(--colorNeutralBackground3) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-success-5 { border: var(--strokeWidthMax) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-danger-5 { border: var(--strokeWidthMax) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-warning-5 { border: var(--strokeWidthMax) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-info-5 { border: var(--strokeWidthMax) solid var(--colorNeutralForeground3) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-light-5 { border: var(--strokeWidthMax) solid var(--colorNeutralBackground2) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-dark-5 { border: var(--strokeWidthMax) solid var(--colorNeutralForeground1) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-link-5 { border: var(--strokeWidthMax) solid var(--colorBrandForegroundLink) !important; } .fui-Border-white-5 { border-color: #fff !important; } .fui-Border-top-5 { border-top: var(--strokeWidthMax) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-top-5 { border-top: var(--strokeWidthMax) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-top-5 { border-top: var(--strokeWidthMax) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-top-5 { border-top: var(--strokeWidthMax) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-top-5 { border-top: var(--strokeWidthMax) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-top-5 { border-top: var(--strokeWidthMax) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-top-5 { border-top: var(--strokeWidthMax) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-top-5 { border-top: var(--strokeWidthMax) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-top-5 { border-top: var(--strokeWidthMax) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-top-5 { border-top: var(--strokeWidthMax) solid var(--colorBrandForegroundLink) !important; } .fui-Border-end-5 { border-right: var(--strokeWidthMax) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-end-5 { border-right: var(--strokeWidthMax) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-end-5 { border-right: var(--strokeWidthMax) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-end-5 { border-right: var(--strokeWidthMax) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-end-5 { border-right: var(--strokeWidthMax) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-end-5 { border-right: var(--strokeWidthMax) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-end-5 { border-right: var(--strokeWidthMax) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-end-5 { border-right: var(--strokeWidthMax) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-end-5 { border-right: var(--strokeWidthMax) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-end-5 { border-right: var(--strokeWidthMax) solid var(--colorBrandForegroundLink) !important; } .fui-Border-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-bottom-5 { border-bottom: var(--strokeWidthMax) solid var(--colorBrandForegroundLink) !important; } .fui-Border-start-5 { border-left: var(--strokeWidthMax) solid var(--colorNeutralStroke1) !important; } .fui-Border-primary-start-5 { border-left: var(--strokeWidthMax) solid var(--colorBrandBackground) !important; } .fui-Border-secondary-start-5 { border-left: var(--strokeWidthMax) solid var(--colorNeutralBackground3) !important; } .fui-Border-success-start-5 { border-left: var(--strokeWidthMax) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger-start-5 { border-left: var(--strokeWidthMax) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning-start-5 { border-left: var(--strokeWidthMax) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info-start-5 { border-left: var(--strokeWidthMax) solid var(--colorNeutralForeground3) !important; } .fui-Border-light-start-5 { border-left: var(--strokeWidthMax) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark-start-5 { border-left: var(--strokeWidthMax) solid var(--colorNeutralForeground1) !important; } .fui-Border-link-start-5 { border-left: var(--strokeWidthMax) solid var(--colorBrandForegroundLink) !important; } .fui-Border-primary { border: var(--strokeWidthThin) solid var(--colorBrandBackground) !important; } .fui-Border-secondary { border: var(--strokeWidthThin) solid var(--colorNeutralBackground3) !important; } .fui-Border-success { border: var(--strokeWidthThin) solid var(--colorStatusSuccessBackground3) !important; } .fui-Border-danger { border: var(--strokeWidthThin) solid var(--colorStatusDangerBackground3) !important; } .fui-Border-warning { border: var(--strokeWidthThin) solid var(--colorStatusWarningBackground3) !important; } .fui-Border-info { border: var(--strokeWidthThin) solid var(--colorNeutralForeground3) !important; } .fui-Border-light { border: var(--strokeWidthThin) solid var(--colorNeutralBackground2) !important; } .fui-Border-dark { border: var(--strokeWidthThin) solid var(--colorNeutralForeground1) !important; } .fui-Border-link { border: var(--strokeWidthThin) solid var(--colorBrandForegroundLink) !important; } .fui-Border-white { border-color: #fff !important; } .fui-Rounded-sm { border-radius: var(--borderRadiusSmall) !important; } .fui-Rounded { border-radius: var(--borderRadiusMedium) !important; } .fui-Rounded-top { border-top-left-radius: var(--borderRadiusMedium) !important; border-top-right-radius: var(--borderRadiusMedium) !important; } .fui-Rounded-end { border-top-right-radius: var(--borderRadiusMedium) !important; border-bottom-right-radius: var(--borderRadiusMedium) !important; } .fui-Rounded-bottom { border-bottom-right-radius: var(--borderRadiusMedium) !important; border-bottom-left-radius: var(--borderRadiusMedium) !important; } .fui-Rounded-start { border-top-left-radius: var(--borderRadiusMedium) !important; border-bottom-left-radius: var(--borderRadiusMedium) !important; } .fui-Rounded-lg { border-radius: var(--borderRadiusLarge) !important; } .fui-Rounded-circle { border-radius: var(--borderRadiusCircular) !important; } .fui-Rounded-pill { border-radius: var(--borderRadiusPill) !important; } .fui-Rounded-0 { border-radius: var(--borderRadiusNone) !important; } .fui-Cursor-pointer { cursor: pointer; } .fui-Display-none { display: none; } .fui-Display-flex { display: flex; } .fui-Display-inline-flex { display: inline-flex; } .fui-Display-block { display: block; } .fui-Display-inline-block { display: inline-block; } .fui-Display-inline { display: inline; } .fui-Display-table { display: table; } .fui-Display-table-row { display: table-row; } .fui-Display-table-cell { display: table-cell; } @media (min-width: 600px) { .fui-Display-none-sm { display: none; } .fui-Display-flex-sm { display: flex; } .fui-Display-inline-flex-sm { display: inline-flex; } .fui-Display-block-sm { display: block; } .fui-Display-inline-block-sm { display: inline-block; } .fui-Display-inline-sm { display: inline; } .fui-Display-table-sm { display: table; } .fui-Display-table-row-sm { display: table-row; } .fui-Display-table-cell-sm { display: table-cell; } } @media (min-width: 960px) { .fui-Display-none-md { display: none; } .fui-Display-flex-md { display: flex; } .fui-Display-inline-flex-md { display: inline-flex; } .fui-Display-block-md { display: block; } .fui-Display-inline-block-md { display: inline-block; } .fui-Display-inline-md { display: inline; } .fui-Display-table-md { display: table; } .fui-Display-table-row-md { display: table-row; } .fui-Display-table-cell-md { display: table-cell; } } @media (min-width: 1280px) { .fui-Display-none-lg { display: none; } .fui-Display-flex-lg { display: flex; } .fui-Display-inline-flex-lg { display: inline-flex; } .fui-Display-block-lg { display: block; } .fui-Display-inline-block-lg { display: inline-block; } .fui-Display-inline-lg { display: inline; } .fui-Display-table-lg { display: table; } .fui-Display-table-row-lg { display: table-row; } .fui-Display-table-cell-lg { display: table-cell; } } @media (min-width: 1920px) { .fui-Display-none-xl { display: none; } .fui-Display-flex-xl { display: flex; } .fui-Display-inline-flex-xl { display: inline-flex; } .fui-Display-block-xl { display: block; } .fui-Display-inline-block-xl { display: inline-block; } .fui-Display-inline-xl { display: inline; } .fui-Display-table-xl { display: table; } .fui-Display-table-row-xl { display: table-row; } .fui-Display-table-cell-xl { display: table-cell; } } @media (min-width: 2560px) { .fui-Display-none-xxl { display: none; } .fui-Display-flex-xxl { display: flex; } .fui-Display-inline-flex-xxl { display: inline-flex; } .fui-Display-block-xxl { display: block; } .fui-Display-inline-block-xxl { display: inline-block; } .fui-Display-inline-xxl { display: inline; } .fui-Display-table-xxl { display: table; } .fui-Display-table-row-xxl { display: table-row; } .fui-Display-table-cell-xxl { display: table-cell; } } .fui-Flex { display: flex; } .fui-InlineFlex { display: inline-flex; } .fui-Flex-row { flex-direction: row !important; } .fui-Flex-column { flex-direction: column !important; } .fui-Flex-row-reverse { flex-direction: row-reverse !important; } .fui-Flex-column-reverse { flex-direction: column-reverse !important; } .fui-Flex-wrap { flex-wrap: wrap !important; } .fui-Flex-nowrap { flex-wrap: nowrap !important; } .fui-Flex-wrap-reverse { flex-wrap: wrap-reverse !important; } .fui-Flex-fill { flex: 1 1 auto !important; } .fui-Flex-grow-0 { flex-grow: 0 !important; } .fui-Flex-grow-1 { flex-grow: 1 !important; } .fui-Flex-shrink-0 { flex-shrink: 0 !important; } .fui-Flex-shrink-1 { flex-shrink: 1 !important; } .fui-JustifyContent-start { justify-content: flex-start !important; } .fui-JustifyContent-end { justify-content: flex-end !important; } .fui-JustifyContent-center { justify-content: center !important; } .fui-JustifyContent-between { justify-content: space-between !important; } .fui-JustifyContent-around { justify-content: space-around !important; } .fui-AlignItems-start { align-items: flex-start !important; } .fui-AlignItems-end { align-items: flex-end !important; } .fui-AlignItems-center { align-items: center !important; } .fui-AlignItems-baseline { align-items: baseline !important; } .fui-AlignItems-stretch { align-items: stretch !important; } .fui-AlignContent-start { align-content: flex-start !important; } .fui-AlignContent-end { align-content: flex-end !important; } .fui-AlignContent-center { align-content: center !important; } .fui-AlignContent-between { align-content: space-between !important; } .fui-AlignContent-around { align-content: space-around !important; } .fui-AlignContent-stretch { align-content: stretch !important; } .fui-AlignSelf-auto { align-self: auto !important; } .fui-AlignSelf-start { align-self: flex-start !important; } .fui-AlignSelf-end { align-self: flex-end !important; } .fui-AlignSelf-center { align-self: center !important; } .fui-AlignSelf-baseline { align-self: baseline !important; } .fui-AlignSelf-stretch { align-self: stretch !important; } .fui-FlexBasis-0 { flex-basis: 0 !important; } .fui-FlexBasis-auto { flex-basis: auto !important; } .fui-FlexBasis-full { flex-basis: 100% !important; } @media (min-width: 600px) { .fui-Flex-sm { display: flex; } .fui-InlineFlex-sm { display: inline-flex; } .fui-Flex-sm-row { flex-direction: row !important; } .fui-Flex-sm-column { flex-direction: column !important; } .fui-Flex-sm-row-reverse { flex-direction: row-reverse !important; } .fui-Flex-sm-column-reverse { flex-direction: column-reverse !important; } .fui-Flex-sm-wrap { flex-wrap: wrap !important; } .fui-Flex-sm-nowrap { flex-wrap: nowrap !important; } .fui-Flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; } .fui-Flex-sm-fill { flex: 1 1 auto !important; } .fui-Flex-sm-grow-0 { flex-grow: 0 !important; } .fui-Flex-sm-grow-1 { flex-grow: 1 !important; } .fui-Flex-sm-shrink-0 { flex-shrink: 0 !important; } .fui-Flex-sm-shrink-1 { flex-shrink: 1 !important; } .fui-JustifyContent-sm-start { justify-content: flex-start !important; } .fui-JustifyContent-sm-end { justify-content: flex-end !important; } .fui-JustifyContent-sm-center { justify-content: center !important; } .fui-JustifyContent-sm-between { justify-content: space-between !important; } .fui-JustifyContent-sm-around { justify-content: space-around !important; } .fui-AlignItems-sm-start { align-items: flex-start !important; } .fui-AlignItems-sm-end { align-items: flex-end !important; } .fui-AlignItems-sm-center { align-items: center !important; } .fui-AlignItems-sm-baseline { align-items: baseline !important; } .fui-AlignItems-sm-stretch { align-items: stretch !important; } .fui-AlignContent-sm-start { align-content: flex-start !important; } .fui-AlignContent-sm-end { align-content: flex-end !important; } .fui-AlignContent-sm-center { align-content: center !important; } .fui-AlignContent-sm-between { align-content: space-between !important; } .fui-AlignContent-sm-around { align-content: space-around !important; } .fui-AlignContent-sm-stretch { align-content: stretch !important; } .fui-AlignSelf-sm-auto { align-self: auto !important; } .fui-AlignSelf-sm-start { align-self: flex-start !important; } .fui-AlignSelf-sm-end { align-self: flex-end !important; } .fui-AlignSelf-sm-center { align-self: center !important; } .fui-AlignSelf-sm-baseline { align-self: baseline !important; } .fui-AlignSelf-sm-stretch { align-self: stretch !important; } .fui-FlexBasis-sm-0 { flex-basis: 0 !important; } .fui-FlexBasis-sm-auto { flex-basis: auto !important; } .fui-FlexBasis-sm-full { flex-basis: 100% !important; } } @media (min-width: 960px) { .fui-Flex-md { display: flex; } .fui-InlineFlex-md { display: inline-flex; } .fui-Flex-md-row { flex-direction: row !important; } .fui-Flex-md-column { flex-direction: column !important; } .fui-Flex-md-row-reverse { flex-direction: row-reverse !important; } .fui-Flex-md-column-reverse { flex-direction: column-reverse !important; } .fui-Flex-md-wrap { flex-wrap: wrap !important; } .fui-Flex-md-nowrap { flex-wrap: nowrap !important; } .fui-Flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; } .fui-Flex-md-fill { flex: 1 1 auto !important; } .fui-Flex-md-grow-0 { flex-grow: 0 !important; } .fui-Flex-md-grow-1 { flex-grow: 1 !important; } .fui-Flex-md-shrink-0 { flex-shrink: 0 !important; } .fui-Flex-md-shrink-1 { flex-shrink: 1 !important; } .fui-JustifyContent-md-start { justify-content: flex-start !important; } .fui-JustifyContent-md-end { justify-content: flex-end !important; } .fui-JustifyContent-md-center { justify-content: center !important; } .fui-JustifyContent-md-between { justify-content: space-between !important; } .fui-JustifyContent-md-around { justify-content: space-around !important; } .fui-AlignItems-md-start { align-items: flex-start !important; } .fui-AlignItems-md-end { align-items: flex-end !important; } .fui-AlignItems-md-center { align-items: center !important; } .fui-AlignItems-md-baseline { align-items: baseline !important; } .fui-AlignItems-md-stretch { align-items: stretch !important; } .fui-AlignContent-md-start { align-content: flex-start !important; } .fui-AlignContent-md-end { align-content: flex-end !important; } .fui-AlignContent-md-center { align-content: center !important; } .fui-AlignContent-md-between { align-content: space-between !important; } .fui-AlignContent-md-around { align-content: space-around !important; } .fui-AlignContent-md-stretch { align-content: stretch !important; } .fui-AlignSelf-md-auto { align-self: auto !important; } .fui-AlignSelf-md-start { align-self: flex-start !important; } .fui-AlignSelf-md-end { align-self: flex-end !important; } .fui-AlignSelf-md-center { align-self: center !important; } .fui-AlignSelf-md-baseline { align-self: baseline !important; } .fui-AlignSelf-md-stretch { align-self: stretch !important; } .fui-FlexBasis-md-0 { flex-basis: 0 !important; } .fui-FlexBasis-md-auto { flex-basis: auto !important; } .fui-FlexBasis-md-full { flex-basis: 100% !important; } } @media (min-width: 1280px) { .fui-Flex-lg { display: flex; } .fui-InlineFlex-lg { display: inline-flex; } .fui-Flex-lg-row { flex-direction: row !important; } .fui-Flex-lg-column { flex-direction: column !important; } .fui-Flex-lg-row-reverse { flex-direction: row-reverse !important; } .fui-Flex-lg-column-reverse { flex-direction: column-reverse !important; } .fui-Flex-lg-wrap { flex-wrap: wrap !important; } .fui-Flex-lg-nowrap { flex-wrap: nowrap !important; } .fui-Flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } .fui-Flex-lg-fill { flex: 1 1 auto !important; } .fui-Flex-lg-grow-0 { flex-grow: 0 !important; } .fui-Flex-lg-grow-1 { flex-grow: 1 !important; } .fui-Flex-lg-shrink-0 { flex-shrink: 0 !important; } .fui-Flex-lg-shrink-1 { flex-shrink: 1 !important; } .fui-JustifyContent-lg-start { justify-content: flex-start !important; } .fui-JustifyContent-lg-end { justify-content: flex-end !important; } .fui-JustifyContent-lg-center { justify-content: center !important; } .fui-JustifyContent-lg-between { justify-content: space-between !important; } .fui-JustifyContent-lg-around { justify-content: space-around !important; } .fui-AlignItems-lg-start { align-items: flex-start !important; } .fui-AlignItems-lg-end { align-items: flex-end !important; } .fui-AlignItems-lg-center { align-items: center !important; } .fui-AlignItems-lg-baseline { align-items: baseline !important; } .fui-AlignItems-lg-stretch { align-items: stretch !important; } .fui-AlignContent-lg-start { align-content: flex-start !important; } .fui-AlignContent-lg-end { align-content: flex-end !important; } .fui-AlignContent-lg-center { align-content: center !important; } .fui-AlignContent-lg-between { align-content: space-between !important; } .fui-AlignContent-lg-around { align-content: space-around !important; } .fui-AlignContent-lg-stretch { align-content: stretch !important; } .fui-AlignSelf-lg-auto { align-self: auto !important; } .fui-AlignSelf-lg-start { align-self: flex-start !important; } .fui-AlignSelf-lg-end { align-self: flex-end !important; } .fui-AlignSelf-lg-center { align-self: center !important; } .fui-AlignSelf-lg-baseline { align-self: baseline !important; } .fui-AlignSelf-lg-stretch { align-self: stretch !important; } .fui-FlexBasis-lg-0 { flex-basis: 0 !important; } .fui-FlexBasis-lg-auto { flex-basis: auto !important; } .fui-FlexBasis-lg-full { flex-basis: 100% !important; } } @media (min-width: 1920px) { .fui-Flex-xl { display: flex; } .fui-InlineFlex-xl { display: inline-flex; } .fui-Flex-xl-row { flex-direction: row !important; } .fui-Flex-xl-column { flex-direction: column !important; } .fui-Flex-xl-row-reverse { flex-direction: row-reverse !important; } .fui-Flex-xl-column-reverse { flex-direction: column-reverse !important; } .fui-Flex-xl-wrap { flex-wrap: wrap !important; } .fui-Flex-xl-nowrap { flex-wrap: nowrap !important; } .fui-Flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; } .fui-Flex-xl-fill { flex: 1 1 auto !important; } .fui-Flex-xl-grow-0 { flex-grow: 0 !important; } .fui-Flex-xl-grow-1 { flex-grow: 1 !important; } .fui-Flex-xl-shrink-0 { flex-shrink: 0 !important; } .fui-Flex-xl-shrink-1 { flex-shrink: 1 !important; } .fui-JustifyContent-xl-start { justify-content: flex-start !important; } .fui-JustifyContent-xl-end { justify-content: flex-end !important; } .fui-JustifyContent-xl-center { justify-content: center !important; } .fui-JustifyContent-xl-between { justify-content: space-between !important; } .fui-JustifyContent-xl-around { justify-content: space-around !important; } .fui-AlignItems-xl-start { align-items: flex-start !important; } .fui-AlignItems-xl-end { align-items: flex-end !important; } .fui-AlignItems-xl-center { align-items: center !important; } .fui-AlignItems-xl-baseline { align-items: baseline !important; } .fui-AlignItems-xl-stretch { align-items: stretch !important; } .fui-AlignContent-xl-start { align-content: flex-start !important; } .fui-AlignContent-xl-end { align-content: flex-end !important; } .fui-AlignContent-xl-center { align-content: center !important; } .fui-AlignContent-xl-between { align-content: space-between !important; } .fui-AlignContent-xl-around { align-content: space-around !important; } .fui-AlignContent-xl-stretch { align-content: stretch !important; } .fui-AlignSelf-xl-auto { align-self: auto !important; } .fui-AlignSelf-xl-start { align-self: flex-start !important; } .fui-AlignSelf-xl-end { align-self: flex-end !important; } .fui-AlignSelf-xl-center { align-self: center !important; } .fui-AlignSelf-xl-baseline { align-self: baseline !important; } .fui-AlignSelf-xl-stretch { align-self: stretch !important; } .fui-FlexBasis-xl-0 { flex-basis: 0 !important; } .fui-FlexBasis-xl-auto { flex-basis: auto !important; } .fui-FlexBasis-xl-full { flex-basis: 100% !important; } } @media (min-width: 2560px) { .fui-Flex-xxl { display: flex; } .fui-InlineFlex-xxl { display: inline-flex; } .fui-Flex-xxl-row { flex-direction: row !important; } .fui-Flex-xxl-column { flex-direction: column !important; } .fui-Flex-xxl-row-reverse { flex-direction: row-reverse !important; } .fui-Flex-xxl-column-reverse { flex-direction: column-reverse !important; } .fui-Flex-xxl-wrap { flex-wrap: wrap !important; } .fui-Flex-xxl-nowrap { flex-wrap: nowrap !important; } .fui-Flex-xxl-wrap-reverse { flex-wrap: wrap-reverse !important; } .fui-Flex-xxl-fill { flex: 1 1 auto !important; } .fui-Flex-xxl-grow-0 { flex-grow: 0 !important; } .fui-Flex-xxl-grow-1 { flex-grow: 1 !important; } .fui-Flex-xxl-shrink-0 { flex-shrink: 0 !important; } .fui-Flex-xxl-shrink-1 { flex-shrink: 1 !important; } .fui-JustifyContent-xxl-start { justify-content: flex-start !important; } .fui-JustifyContent-xxl-end { justify-content: flex-end !important; } .fui-JustifyContent-xxl-center { justify-content: center !important; } .fui-JustifyContent-xxl-between { justify-content: space-between !important; } .fui-JustifyContent-xxl-around { justify-content: space-around !important; } .fui-AlignItems-xxl-start { align-items: flex-start !important; } .fui-AlignItems-xxl-end { align-items: flex-end !important; } .fui-AlignItems-xxl-center { align-items: center !important; } .fui-AlignItems-xxl-baseline { align-items: baseline !important; } .fui-AlignItems-xxl-stretch { align-items: stretch !important; } .fui-AlignContent-xxl-start { align-content: flex-start !important; } .fui-AlignContent-xxl-end { align-content: flex-end !important; } .fui-AlignContent-xxl-center { align-content: center !important; } .fui-AlignContent-xxl-between { align-content: space-between !important; } .fui-AlignContent-xxl-around { align-content: space-around !important; } .fui-AlignContent-xxl-stretch { align-content: stretch !important; } .fui-AlignSelf-xxl-auto { align-self: auto !important; } .fui-AlignSelf-xxl-start { align-self: flex-start !important; } .fui-AlignSelf-xxl-end { align-self: flex-end !important; } .fui-AlignSelf-xxl-center { align-self: center !important; } .fui-AlignSelf-xxl-baseline { align-self: baseline !important; } .fui-AlignSelf-xxl-stretch { align-self: stretch !important; } .fui-FlexBasis-xxl-0 { flex-basis: 0 !important; } .fui-FlexBasis-xxl-auto { flex-basis: auto !important; } .fui-FlexBasis-xxl-full { flex-basis: 100% !important; } } .fui-Row { display: flex; flex-wrap: wrap; margin-right: calc(var(--spacingHorizontalM) * -1); margin-left: calc(var(--spacingHorizontalM) * -1); } .fui-Row .fui-NoGutters { margin-right: 0; margin-left: 0; } .fui-Row .fui-NoGutters > .fui-Column, .fui-Row .fui-NoGutters > [class*=fui-Column-] { padding-right: 0; padding-left: 0; } .fui-Column-xxl, .fui-Column-xxl-auto, .fui-Column-xxl-12, .fui-Column-xxl-11, .fui-Column-xxl-10, .fui-Column-xxl-9, .fui-Column-xxl-8, .fui-Column-xxl-7, .fui-Column-xxl-6, .fui-Column-xxl-5, .fui-Column-xxl-4, .fui-Column-xxl-3, .fui-Column-xxl-2, .fui-Column-xxl-1, .fui-Column-xl, .fui-Column-xl-auto, .fui-Column-xl-12, .fui-Column-xl-11, .fui-Column-xl-10, .fui-Column-xl-9, .fui-Column-xl-8, .fui-Column-xl-7, .fui-Column-xl-6, .fui-Column-xl-5, .fui-Column-xl-4, .fui-Column-xl-3, .fui-Column-xl-2, .fui-Column-xl-1, .fui-Column-lg, .fui-Column-lg-auto, .fui-Column-lg-12, .fui-Column-lg-11, .fui-Column-lg-10, .fui-Column-lg-9, .fui-Column-lg-8, .fui-Column-lg-7, .fui-Column-lg-6, .fui-Column-lg-5, .fui-Column-lg-4, .fui-Column-lg-3, .fui-Column-lg-2, .fui-Column-lg-1, .fui-Column-md, .fui-Column-md-auto, .fui-Column-md-12, .fui-Column-md-11, .fui-Column-md-10, .fui-Column-md-9, .fui-Column-md-8, .fui-Column-md-7, .fui-Column-md-6, .fui-Column-md-5, .fui-Column-md-4, .fui-Column-md-3, .fui-Column-md-2, .fui-Column-md-1, .fui-Column-sm, .fui-Column-sm-auto, .fui-Column-sm-12, .fui-Column-sm-11, .fui-Column-sm-10, .fui-Column-sm-9, .fui-Column-sm-8, .fui-Column-sm-7, .fui-Column-sm-6, .fui-Column-sm-5, .fui-Column-sm-4, .fui-Column-sm-3, .fui-Column-sm-2, .fui-Column-sm-1, .fui-Column, .fui-Column-auto, .fui-Column-12, .fui-Column-11, .fui-Column-10, .fui-Column-9, .fui-Column-8, .fui-Column-7, .fui-Column-6, .fui-Column-5, .fui-Column-4, .fui-Column-3, .fui-Column-2, .fui-Column-1 { position: relative; width: 100%; padding-right: calc(var(--spacingHorizontalXXL) / 2); padding-left: calc(var(--spacingHorizontalXXL) / 2); } .fui-Column { flex-basis: 0; flex-grow: 1; max-width: 100%; } .fui-RowColumns-1 > * { flex: 0 0 100%; max-width: 100%; } .fui-RowColumns-2 > * { flex: 0 0 50%; max-width: 50%; } .fui-RowColumns-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-RowColumns-4 > * { flex: 0 0 25%; max-width: 25%; } .fui-RowColumns-5 > * { flex: 0 0 20%; max-width: 20%; } .fui-RowColumns-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .fui-Column-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .fui-Column-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-3 { flex: 0 0 25%; max-width: 25%; } .fui-Column-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-Column-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .fui-Column-6 { flex: 0 0 50%; max-width: 50%; } .fui-Column-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .fui-Column-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .fui-Column-9 { flex: 0 0 75%; max-width: 75%; } .fui-Column-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .fui-Column-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .fui-Column-12 { flex: 0 0 100%; max-width: 100%; } .fui-ColumnOrder-first { order: -1; } .fui-ColumnOrder-last { order: 13; } .fui-ColumnOrder-0 { order: 0; } .fui-ColumnOrder-1 { order: 1; } .fui-ColumnOrder-2 { order: 2; } .fui-ColumnOrder-3 { order: 3; } .fui-ColumnOrder-4 { order: 4; } .fui-ColumnOrder-5 { order: 5; } .fui-ColumnOrder-6 { order: 6; } .fui-ColumnOrder-7 { order: 7; } .fui-ColumnOrder-8 { order: 8; } .fui-ColumnOrder-9 { order: 9; } .fui-ColumnOrder-10 { order: 10; } .fui-ColumnOrder-11 { order: 11; } .fui-ColumnOrder-12 { order: 12; } .fui-ColumnOffset-1 { margin-left: 8.3333333333%; } .fui-ColumnOffset-2 { margin-left: 16.6666666667%; } .fui-ColumnOffset-3 { margin-left: 25%; } .fui-ColumnOffset-4 { margin-left: 33.3333333333%; } .fui-ColumnOffset-5 { margin-left: 41.6666666667%; } .fui-ColumnOffset-6 { margin-left: 50%; } .fui-ColumnOffset-7 { margin-left: 58.3333333333%; } .fui-ColumnOffset-8 { margin-left: 66.6666666667%; } .fui-ColumnOffset-9 { margin-left: 75%; } .fui-ColumnOffset-10 { margin-left: 83.3333333333%; } .fui-ColumnOffset-11 { margin-left: 91.6666666667%; } @media (min-width: 600px) { .fui-Column-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; } .fui-RowColumns-sm-1 > * { flex: 0 0 100%; max-width: 100%; } .fui-RowColumns-sm-2 > * { flex: 0 0 50%; max-width: 50%; } .fui-RowColumns-sm-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-RowColumns-sm-4 > * { flex: 0 0 25%; max-width: 25%; } .fui-RowColumns-sm-5 > * { flex: 0 0 20%; max-width: 20%; } .fui-RowColumns-sm-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .fui-Column-sm-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .fui-Column-sm-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-sm-3 { flex: 0 0 25%; max-width: 25%; } .fui-Column-sm-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-Column-sm-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .fui-Column-sm-6 { flex: 0 0 50%; max-width: 50%; } .fui-Column-sm-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .fui-Column-sm-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .fui-Column-sm-9 { flex: 0 0 75%; max-width: 75%; } .fui-Column-sm-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .fui-Column-sm-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .fui-Column-sm-12 { flex: 0 0 100%; max-width: 100%; } .fui-ColumnOrder-sm-first { order: -1; } .fui-ColumnOrder-sm-last { order: 13; } .fui-ColumnOrder-sm-0 { order: 0; } .fui-ColumnOrder-sm-1 { order: 1; } .fui-ColumnOrder-sm-2 { order: 2; } .fui-ColumnOrder-sm-3 { order: 3; } .fui-ColumnOrder-sm-4 { order: 4; } .fui-ColumnOrder-sm-5 { order: 5; } .fui-ColumnOrder-sm-6 { order: 6; } .fui-ColumnOrder-sm-7 { order: 7; } .fui-ColumnOrder-sm-8 { order: 8; } .fui-ColumnOrder-sm-9 { order: 9; } .fui-ColumnOrder-sm-10 { order: 10; } .fui-ColumnOrder-sm-11 { order: 11; } .fui-ColumnOrder-sm-12 { order: 12; } .fui-ColumnOffset-sm-0 { margin-left: 0; } .fui-ColumnOffset-sm-1 { margin-left: 8.3333333333%; } .fui-ColumnOffset-sm-2 { margin-left: 16.6666666667%; } .fui-ColumnOffset-sm-3 { margin-left: 25%; } .fui-ColumnOffset-sm-4 { margin-left: 33.3333333333%; } .fui-ColumnOffset-sm-5 { margin-left: 41.6666666667%; } .fui-ColumnOffset-sm-6 { margin-left: 50%; } .fui-ColumnOffset-sm-7 { margin-left: 58.3333333333%; } .fui-ColumnOffset-sm-8 { margin-left: 66.6666666667%; } .fui-ColumnOffset-sm-9 { margin-left: 75%; } .fui-ColumnOffset-sm-10 { margin-left: 83.3333333333%; } .fui-ColumnOffset-sm-11 { margin-left: 91.6666666667%; } } @media (min-width: 960px) { .fui-Column-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } .fui-RowColumns-md-1 > * { flex: 0 0 100%; max-width: 100%; } .fui-RowColumns-md-2 > * { flex: 0 0 50%; max-width: 50%; } .fui-RowColumns-md-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-RowColumns-md-4 > * { flex: 0 0 25%; max-width: 25%; } .fui-RowColumns-md-5 > * { flex: 0 0 20%; max-width: 20%; } .fui-RowColumns-md-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .fui-Column-md-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .fui-Column-md-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-md-3 { flex: 0 0 25%; max-width: 25%; } .fui-Column-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-Column-md-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .fui-Column-md-6 { flex: 0 0 50%; max-width: 50%; } .fui-Column-md-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .fui-Column-md-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .fui-Column-md-9 { flex: 0 0 75%; max-width: 75%; } .fui-Column-md-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .fui-Column-md-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .fui-Column-md-12 { flex: 0 0 100%; max-width: 100%; } .fui-ColumnOrder-md-first { order: -1; } .fui-ColumnOrder-md-last { order: 13; } .fui-ColumnOrder-md-0 { order: 0; } .fui-ColumnOrder-md-1 { order: 1; } .fui-ColumnOrder-md-2 { order: 2; } .fui-ColumnOrder-md-3 { order: 3; } .fui-ColumnOrder-md-4 { order: 4; } .fui-ColumnOrder-md-5 { order: 5; } .fui-ColumnOrder-md-6 { order: 6; } .fui-ColumnOrder-md-7 { order: 7; } .fui-ColumnOrder-md-8 { order: 8; } .fui-ColumnOrder-md-9 { order: 9; } .fui-ColumnOrder-md-10 { order: 10; } .fui-ColumnOrder-md-11 { order: 11; } .fui-ColumnOrder-md-12 { order: 12; } .fui-ColumnOffset-md-0 { margin-left: 0; } .fui-ColumnOffset-md-1 { margin-left: 8.3333333333%; } .fui-ColumnOffset-md-2 { margin-left: 16.6666666667%; } .fui-ColumnOffset-md-3 { margin-left: 25%; } .fui-ColumnOffset-md-4 { margin-left: 33.3333333333%; } .fui-ColumnOffset-md-5 { margin-left: 41.6666666667%; } .fui-ColumnOffset-md-6 { margin-left: 50%; } .fui-ColumnOffset-md-7 { margin-left: 58.3333333333%; } .fui-ColumnOffset-md-8 { margin-left: 66.6666666667%; } .fui-ColumnOffset-md-9 { margin-left: 75%; } .fui-ColumnOffset-md-10 { margin-left: 83.3333333333%; } .fui-ColumnOffset-md-11 { margin-left: 91.6666666667%; } } @media (min-width: 1280px) { .fui-Column-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; } .fui-RowColumns-lg-1 > * { flex: 0 0 100%; max-width: 100%; } .fui-RowColumns-lg-2 > * { flex: 0 0 50%; max-width: 50%; } .fui-RowColumns-lg-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-RowColumns-lg-4 > * { flex: 0 0 25%; max-width: 25%; } .fui-RowColumns-lg-5 > * { flex: 0 0 20%; max-width: 20%; } .fui-RowColumns-lg-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .fui-Column-lg-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .fui-Column-lg-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-lg-3 { flex: 0 0 25%; max-width: 25%; } .fui-Column-lg-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-Column-lg-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .fui-Column-lg-6 { flex: 0 0 50%; max-width: 50%; } .fui-Column-lg-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .fui-Column-lg-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .fui-Column-lg-9 { flex: 0 0 75%; max-width: 75%; } .fui-Column-lg-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .fui-Column-lg-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .fui-Column-lg-12 { flex: 0 0 100%; max-width: 100%; } .fui-ColumnOrder-lg-first { order: -1; } .fui-ColumnOrder-lg-last { order: 13; } .fui-ColumnOrder-lg-0 { order: 0; } .fui-ColumnOrder-lg-1 { order: 1; } .fui-ColumnOrder-lg-2 { order: 2; } .fui-ColumnOrder-lg-3 { order: 3; } .fui-ColumnOrder-lg-4 { order: 4; } .fui-ColumnOrder-lg-5 { order: 5; } .fui-ColumnOrder-lg-6 { order: 6; } .fui-ColumnOrder-lg-7 { order: 7; } .fui-ColumnOrder-lg-8 { order: 8; } .fui-ColumnOrder-lg-9 { order: 9; } .fui-ColumnOrder-lg-10 { order: 10; } .fui-ColumnOrder-lg-11 { order: 11; } .fui-ColumnOrder-lg-12 { order: 12; } .fui-ColumnOffset-lg-0 { margin-left: 0; } .fui-ColumnOffset-lg-1 { margin-left: 8.3333333333%; } .fui-ColumnOffset-lg-2 { margin-left: 16.6666666667%; } .fui-ColumnOffset-lg-3 { margin-left: 25%; } .fui-ColumnOffset-lg-4 { margin-left: 33.3333333333%; } .fui-ColumnOffset-lg-5 { margin-left: 41.6666666667%; } .fui-ColumnOffset-lg-6 { margin-left: 50%; } .fui-ColumnOffset-lg-7 { margin-left: 58.3333333333%; } .fui-ColumnOffset-lg-8 { margin-left: 66.6666666667%; } .fui-ColumnOffset-lg-9 { margin-left: 75%; } .fui-ColumnOffset-lg-10 { margin-left: 83.3333333333%; } .fui-ColumnOffset-lg-11 { margin-left: 91.6666666667%; } } @media (min-width: 1920px) { .fui-Column-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .fui-RowColumns-xl-1 > * { flex: 0 0 100%; max-width: 100%; } .fui-RowColumns-xl-2 > * { flex: 0 0 50%; max-width: 50%; } .fui-RowColumns-xl-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-RowColumns-xl-4 > * { flex: 0 0 25%; max-width: 25%; } .fui-RowColumns-xl-5 > * { flex: 0 0 20%; max-width: 20%; } .fui-RowColumns-xl-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .fui-Column-xl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .fui-Column-xl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-xl-3 { flex: 0 0 25%; max-width: 25%; } .fui-Column-xl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-Column-xl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .fui-Column-xl-6 { flex: 0 0 50%; max-width: 50%; } .fui-Column-xl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .fui-Column-xl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .fui-Column-xl-9 { flex: 0 0 75%; max-width: 75%; } .fui-Column-xl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .fui-Column-xl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .fui-Column-xl-12 { flex: 0 0 100%; max-width: 100%; } .fui-ColumnOrder-xl-first { order: -1; } .fui-ColumnOrder-xl-last { order: 13; } .fui-ColumnOrder-xl-0 { order: 0; } .fui-ColumnOrder-xl-1 { order: 1; } .fui-ColumnOrder-xl-2 { order: 2; } .fui-ColumnOrder-xl-3 { order: 3; } .fui-ColumnOrder-xl-4 { order: 4; } .fui-ColumnOrder-xl-5 { order: 5; } .fui-ColumnOrder-xl-6 { order: 6; } .fui-ColumnOrder-xl-7 { order: 7; } .fui-ColumnOrder-xl-8 { order: 8; } .fui-ColumnOrder-xl-9 { order: 9; } .fui-ColumnOrder-xl-10 { order: 10; } .fui-ColumnOrder-xl-11 { order: 11; } .fui-ColumnOrder-xl-12 { order: 12; } .fui-ColumnOffset-xl-0 { margin-left: 0; } .fui-ColumnOffset-xl-1 { margin-left: 8.3333333333%; } .fui-ColumnOffset-xl-2 { margin-left: 16.6666666667%; } .fui-ColumnOffset-xl-3 { margin-left: 25%; } .fui-ColumnOffset-xl-4 { margin-left: 33.3333333333%; } .fui-ColumnOffset-xl-5 { margin-left: 41.6666666667%; } .fui-ColumnOffset-xl-6 { margin-left: 50%; } .fui-ColumnOffset-xl-7 { margin-left: 58.3333333333%; } .fui-ColumnOffset-xl-8 { margin-left: 66.6666666667%; } .fui-ColumnOffset-xl-9 { margin-left: 75%; } .fui-ColumnOffset-xl-10 { margin-left: 83.3333333333%; } .fui-ColumnOffset-xl-11 { margin-left: 91.6666666667%; } } @media (min-width: 2560px) { .fui-Column-xxl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .fui-RowColumns-xxl-1 > * { flex: 0 0 100%; max-width: 100%; } .fui-RowColumns-xxl-2 > * { flex: 0 0 50%; max-width: 50%; } .fui-RowColumns-xxl-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-RowColumns-xxl-4 > * { flex: 0 0 25%; max-width: 25%; } .fui-RowColumns-xxl-5 > * { flex: 0 0 20%; max-width: 20%; } .fui-RowColumns-xxl-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-xxl-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .fui-Column-xxl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .fui-Column-xxl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .fui-Column-xxl-3 { flex: 0 0 25%; max-width: 25%; } .fui-Column-xxl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .fui-Column-xxl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .fui-Column-xxl-6 { flex: 0 0 50%; max-width: 50%; } .fui-Column-xxl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .fui-Column-xxl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .fui-Column-xxl-9 { flex: 0 0 75%; max-width: 75%; } .fui-Column-xxl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .fui-Column-xxl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .fui-Column-xxl-12 { flex: 0 0 100%; max-width: 100%; } .fui-ColumnOrder-xxl-first { order: -1; } .fui-ColumnOrder-xxl-last { order: 13; } .fui-ColumnOrder-xxl-0 { order: 0; } .fui-ColumnOrder-xxl-1 { order: 1; } .fui-ColumnOrder-xxl-2 { order: 2; } .fui-ColumnOrder-xxl-3 { order: 3; } .fui-ColumnOrder-xxl-4 { order: 4; } .fui-ColumnOrder-xxl-5 { order: 5; } .fui-ColumnOrder-xxl-6 { order: 6; } .fui-ColumnOrder-xxl-7 { order: 7; } .fui-ColumnOrder-xxl-8 { order: 8; } .fui-ColumnOrder-xxl-9 { order: 9; } .fui-ColumnOrder-xxl-10 { order: 10; } .fui-ColumnOrder-xxl-11 { order: 11; } .fui-ColumnOrder-xxl-12 { order: 12; } .fui-ColumnOffset-xxl-0 { margin-left: 0; } .fui-ColumnOffset-xxl-1 { margin-left: 8.3333333333%; } .fui-ColumnOffset-xxl-2 { margin-left: 16.6666666667%; } .fui-ColumnOffset-xxl-3 { margin-left: 25%; } .fui-ColumnOffset-xxl-4 { margin-left: 33.3333333333%; } .fui-ColumnOffset-xxl-5 { margin-left: 41.6666666667%; } .fui-ColumnOffset-xxl-6 { margin-left: 50%; } .fui-ColumnOffset-xxl-7 { margin-left: 58.3333333333%; } .fui-ColumnOffset-xxl-8 { margin-left: 66.6666666667%; } .fui-ColumnOffset-xxl-9 { margin-left: 75%; } .fui-ColumnOffset-xxl-10 { margin-left: 83.3333333333%; } .fui-ColumnOffset-xxl-11 { margin-left: 91.6666666667%; } } .fui-Grid { display: grid; grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(12, 1fr); gap: var(--spacingHorizontalM); } .fui-Grid.fui-GridRows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } @media (min-width: 600px) { .fui-Grid.fui-GridRows-sm-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-sm-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-sm-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-sm-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-sm-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-sm-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-sm-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } @media (min-width: 960px) { .fui-Grid.fui-GridRows-md-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-md-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-md-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-md-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-md-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-md-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-md-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } @media (min-width: 1280px) { .fui-Grid.fui-GridRows-lg-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-lg-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-lg-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-lg-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-lg-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-lg-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-lg-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } @media (min-width: 1920px) { .fui-Grid.fui-GridRows-xl-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xl-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xl-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xl-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xl-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xl-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xl-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } @media (min-width: 2560px) { .fui-Grid.fui-GridRows-xxl-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xxl-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xxl-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xxl-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xxl-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridRows-xxl-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .fui-Grid.fui-GridColumns-xxl-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .fui-Grid .fui-GridColumn-1 { grid-column: auto/span 1; } .fui-Grid .fui-GridColumn-2 { grid-column: auto/span 2; } .fui-Grid .fui-GridColumn-3 { grid-column: auto/span 3; } .fui-Grid .fui-GridColumn-4 { grid-column: auto/span 4; } .fui-Grid .fui-GridColumn-5 { grid-column: auto/span 5; } .fui-Grid .fui-GridColumn-6 { grid-column: auto/span 6; } .fui-Grid .fui-GridColumn-7 { grid-column: auto/span 7; } .fui-Grid .fui-GridColumn-8 { grid-column: auto/span 8; } .fui-Grid .fui-GridColumn-9 { grid-column: auto/span 9; } .fui-Grid .fui-GridColumn-10 { grid-column: auto/span 10; } .fui-Grid .fui-GridColumn-11 { grid-column: auto/span 11; } .fui-Grid .fui-GridColumn-12 { grid-column: auto/span 12; } @media (min-width: 600px) { .fui-Grid .fui-GridColumn-sm-1 { grid-column: auto/span 1; } .fui-Grid .fui-GridColumn-sm-2 { grid-column: auto/span 2; } .fui-Grid .fui-GridColumn-sm-3 { grid-column: auto/span 3; } .fui-Grid .fui-GridColumn-sm-4 { grid-column: auto/span 4; } .fui-Grid .fui-GridColumn-sm-5 { grid-column: auto/span 5; } .fui-Grid .fui-GridColumn-sm-6 { grid-column: auto/span 6; } .fui-Grid .fui-GridColumn-sm-7 { grid-column: auto/span 7; } .fui-Grid .fui-GridColumn-sm-8 { grid-column: auto/span 8; } .fui-Grid .fui-GridColumn-sm-9 { grid-column: auto/span 9; } .fui-Grid .fui-GridColumn-sm-10 { grid-column: auto/span 10; } .fui-Grid .fui-GridColumn-sm-11 { grid-column: auto/span 11; } .fui-Grid .fui-GridColumn-sm-12 { grid-column: auto/span 12; } } @media (min-width: 960px) { .fui-Grid .fui-GridColumn-md-1 { grid-column: auto/span 1; } .fui-Grid .fui-GridColumn-md-2 { grid-column: auto/span 2; } .fui-Grid .fui-GridColumn-md-3 { grid-column: auto/span 3; } .fui-Grid .fui-GridColumn-md-4 { grid-column: auto/span 4; } .fui-Grid .fui-GridColumn-md-5 { grid-column: auto/span 5; } .fui-Grid .fui-GridColumn-md-6 { grid-column: auto/span 6; } .fui-Grid .fui-GridColumn-md-7 { grid-column: auto/span 7; } .fui-Grid .fui-GridColumn-md-8 { grid-column: auto/span 8; } .fui-Grid .fui-GridColumn-md-9 { grid-column: auto/span 9; } .fui-Grid .fui-GridColumn-md-10 { grid-column: auto/span 10; } .fui-Grid .fui-GridColumn-md-11 { grid-column: auto/span 11; } .fui-Grid .fui-GridColumn-md-12 { grid-column: auto/span 12; } } @media (min-width: 1280px) { .fui-Grid .fui-GridColumn-lg-1 { grid-column: auto/span 1; } .fui-Grid .fui-GridColumn-lg-2 { grid-column: auto/span 2; } .fui-Grid .fui-GridColumn-lg-3 { grid-column: auto/span 3; } .fui-Grid .fui-GridColumn-lg-4 { grid-column: auto/span 4; } .fui-Grid .fui-GridColumn-lg-5 { grid-column: auto/span 5; } .fui-Grid .fui-GridColumn-lg-6 { grid-column: auto/span 6; } .fui-Grid .fui-GridColumn-lg-7 { grid-column: auto/span 7; } .fui-Grid .fui-GridColumn-lg-8 { grid-column: auto/span 8; } .fui-Grid .fui-GridColumn-lg-9 { grid-column: auto/span 9; } .fui-Grid .fui-GridColumn-lg-10 { grid-column: auto/span 10; } .fui-Grid .fui-GridColumn-lg-11 { grid-column: auto/span 11; } .fui-Grid .fui-GridColumn-lg-12 { grid-column: auto/span 12; } } @media (min-width: 1920px) { .fui-Grid .fui-GridColumn-xl-1 { grid-column: auto/span 1; } .fui-Grid .fui-GridColumn-xl-2 { grid-column: auto/span 2; } .fui-Grid .fui-GridColumn-xl-3 { grid-column: auto/span 3; } .fui-Grid .fui-GridColumn-xl-4 { grid-column: auto/span 4; } .fui-Grid .fui-GridColumn-xl-5 { grid-column: auto/span 5; } .fui-Grid .fui-GridColumn-xl-6 { grid-column: auto/span 6; } .fui-Grid .fui-GridColumn-xl-7 { grid-column: auto/span 7; } .fui-Grid .fui-GridColumn-xl-8 { grid-column: auto/span 8; } .fui-Grid .fui-GridColumn-xl-9 { grid-column: auto/span 9; } .fui-Grid .fui-GridColumn-xl-10 { grid-column: auto/span 10; } .fui-Grid .fui-GridColumn-xl-11 { grid-column: auto/span 11; } .fui-Grid .fui-GridColumn-xl-12 { grid-column: auto/span 12; } } @media (min-width: 2560px) { .fui-Grid .fui-GridColumn-xxl-1 { grid-column: auto/span 1; } .fui-Grid .fui-GridColumn-xxl-2 { grid-column: auto/span 2; } .fui-Grid .fui-GridColumn-xxl-3 { grid-column: auto/span 3; } .fui-Grid .fui-GridColumn-xxl-4 { grid-column: auto/span 4; } .fui-Grid .fui-GridColumn-xxl-5 { grid-column: auto/span 5; } .fui-Grid .fui-GridColumn-xxl-6 { grid-column: auto/span 6; } .fui-Grid .fui-GridColumn-xxl-7 { grid-column: auto/span 7; } .fui-Grid .fui-GridColumn-xxl-8 { grid-column: auto/span 8; } .fui-Grid .fui-GridColumn-xxl-9 { grid-column: auto/span 9; } .fui-Grid .fui-GridColumn-xxl-10 { grid-column: auto/span 10; } .fui-Grid .fui-GridColumn-xxl-11 { grid-column: auto/span 11; } .fui-Grid .fui-GridColumn-xxl-12 { grid-column: auto/span 12; } } .fui-ObjectFit-contain { object-fit: contain !important; } .fui-ObjectFit-cover { object-fit: cover !important; } .fui-ObjectFit-fill { object-fit: fill !important; } .fui-ObjectFit-scale { object-fit: scale-down !important; } .fui-ObjectFit-none { object-fit: none !important; } @media (min-width: 600px) { .fui-ObjectFit-sm-contain { object-fit: contain !important; } .fui-ObjectFit-sm-cover { object-fit: cover !important; } .fui-ObjectFit-sm-fill { object-fit: fill !important; } .fui-ObjectFit-sm-scale { object-fit: scale-down !important; } .fui-ObjectFit-sm-none { object-fit: none !important; } } @media (min-width: 960px) { .fui-ObjectFit-md-contain { object-fit: contain !important; } .fui-ObjectFit-md-cover { object-fit: cover !important; } .fui-ObjectFit-md-fill { object-fit: fill !important; } .fui-ObjectFit-md-scale { object-fit: scale-down !important; } .fui-ObjectFit-md-none { object-fit: none !important; } } @media (min-width: 1280px) { .fui-ObjectFit-lg-contain { object-fit: contain !important; } .fui-ObjectFit-lg-cover { object-fit: cover !important; } .fui-ObjectFit-lg-fill { object-fit: fill !important; } .fui-ObjectFit-lg-scale { object-fit: scale-down !important; } .fui-ObjectFit-lg-none { object-fit: none !important; } } @media (min-width: 1920px) { .fui-ObjectFit-xl-contain { object-fit: contain !important; } .fui-ObjectFit-xl-cover { object-fit: cover !important; } .fui-ObjectFit-xl-fill { object-fit: fill !important; } .fui-ObjectFit-xl-scale { object-fit: scale-down !important; } .fui-ObjectFit-xl-none { object-fit: none !important; } } @media (min-width: 2560px) { .fui-ObjectFit-xxl-contain { object-fit: contain !important; } .fui-ObjectFit-xxl-cover { object-fit: cover !important; } .fui-ObjectFit-xxl-fill { object-fit: fill !important; } .fui-ObjectFit-xxl-scale { object-fit: scale-down !important; } .fui-ObjectFit-xxl-none { object-fit: none !important; } } .fui-Overflow-auto { overflow: auto !important; } .fui-Overflow-auto-auto { overflow: auto auto !important; } .fui-Overflow-auto-hidden { overflow: auto hidden !important; } .fui-Overflow-auto-visible { overflow: auto visible !important; } .fui-Overflow-auto-scroll { overflow: auto scroll !important; } .fui-Overflow-hidden { overflow: hidden !important; } .fui-Overflow-hidden-auto { overflow: hidden auto !important; } .fui-Overflow-hidden-hidden { overflow: hidden hidden !important; } .fui-Overflow-hidden-visible { overflow: hidden visible !important; } .fui-Overflow-hidden-scroll { overflow: hidden scroll !important; } .fui-Overflow-visible { overflow: visible !important; } .fui-Overflow-visible-auto { overflow: visible auto !important; } .fui-Overflow-visible-hidden { overflow: visible hidden !important; } .fui-Overflow-visible-visible { overflow: visible visible !important; } .fui-Overflow-visible-scroll { overflow: visible scroll !important; } .fui-Overflow-scroll { overflow: scroll !important; } .fui-Overflow-scroll-auto { overflow: scroll auto !important; } .fui-Overflow-scroll-hidden { overflow: scroll hidden !important; } .fui-Overflow-scroll-visible { overflow: scroll visible !important; } .fui-Overflow-scroll-scroll { overflow: scroll scroll !important; } .fui-Position-static { position: static !important; } .fui-Position-relative { position: relative !important; } .fui-Position-absolute { position: absolute !important; } .fui-Position-fixed { position: fixed !important; } .fui-Position-sticky { position: sticky !important; } .fui-Fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: var(--zIndexFixed); } .fui-Fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--zIndexFixed); } @supports (position: sticky) { .fui-Sticky-top { position: sticky; top: 0; z-index: var(--zIndexSticky); } } .fui-Top-0 { top: 0 !important; } .fui-Bottom-0 { bottom: 0 !important; } .fui-Left-0 { left: 0 !important; } .fui-Right-0 { right: 0 !important; } .fui-Top-50 { top: 50% !important; } .fui-Bottom-50 { bottom: 50% !important; } .fui-Left-50 { left: 50% !important; } .fui-Right-50 { right: 50% !important; } .fui-Top-100 { top: 100% !important; } .fui-Bottom-100 { bottom: 100% !important; } .fui-Left-100 { left: 100% !important; } .fui-Right-100 { right: 100% !important; } .fui-Translate-middle { transform: translate(-50%, -50%) !important; } .fui-Translate-middle-x { transform: translateX(-50%) !important; } .fui-Translate-middle-y { transform: translateY(-50%) !important; } .fui-Shadow { box-shadow: var(--shadow4) !important; } .fui-Shadow-sm { box-shadow: var(--shadow2) !important; } .fui-Shadow-lg { box-shadow: var(--shadow8) !important; } .fui-Shadow-none { box-shadow: none !important; } .fui-Width-25 { width: 25% !important; } .fui-Width-33 { width: 33.333333% !important; } .fui-Width-50 { width: 50% !important; } .fui-Width-66 { width: 66.666667% !important; } .fui-Width-75 { width: 75% !important; } .fui-Width-100 { width: 100% !important; } .fui-Width-auto { width: auto !important; } .fui-Height-25 { height: 25% !important; } .fui-Height-33 { height: 33.333333% !important; } .fui-Height-50 { height: 50% !important; } .fui-Height-66 { height: 66.666667% !important; } .fui-Height-75 { height: 75% !important; } .fui-Height-100 { height: 100% !important; } .fui-Height-auto { height: auto !important; } .fui-MaxWidth-100 { max-width: 100% !important; } .fui-MaxHeight-100 { max-height: 100% !important; } .fui-MinViewportWidth-100 { min-width: 100vw !important; } .fui-MinViewportHeight-100 { min-height: 100vh !important; } .fui-ViewportWidth-100 { width: 100vw !important; } .fui-ViewportHeight-100 { height: 100vh !important; } @media (min-width: 600px) { .fui-Width-sm-25 { width: 25% !important; } .fui-Width-sm-33 { width: 33.333333% !important; } .fui-Width-sm-50 { width: 50% !important; } .fui-Width-sm-66 { width: 66.666667% !important; } .fui-Width-sm-75 { width: 75% !important; } .fui-Width-sm-100 { width: 100% !important; } .fui-Width-sm-auto { width: auto !important; } .fui-Height-sm-25 { height: 25% !important; } .fui-Height-sm-33 { height: 33.333333% !important; } .fui-Height-sm-50 { height: 50% !important; } .fui-Height-sm-66 { height: 66.666667% !important; } .fui-Height-sm-75 { height: 75% !important; } .fui-Height-sm-100 { height: 100% !important; } .fui-Height-sm-auto { height: auto !important; } .fui-MaxWidth-sm-100 { max-width: 100% !important; } .fui-MaxHeight-sm-100 { max-height: 100% !important; } .fui-MinViewportWidth-sm-100 { min-width: 100vw !important; } .fui-MinViewportHeight-sm-100 { min-height: 100vh !important; } .fui-ViewportWidth-sm-100 { width: 100vw !important; } .fui-ViewportHeight-sm-100 { height: 100vh !important; } } @media (min-width: 960px) { .fui-Width-md-25 { width: 25% !important; } .fui-Width-md-33 { width: 33.333333% !important; } .fui-Width-md-50 { width: 50% !important; } .fui-Width-md-66 { width: 66.666667% !important; } .fui-Width-md-75 { width: 75% !important; } .fui-Width-md-100 { width: 100% !important; } .fui-Width-md-auto { width: auto !important; } .fui-Height-md-25 { height: 25% !important; } .fui-Height-md-33 { height: 33.333333% !important; } .fui-Height-md-50 { height: 50% !important; } .fui-Height-md-66 { height: 66.666667% !important; } .fui-Height-md-75 { height: 75% !important; } .fui-Height-md-100 { height: 100% !important; } .fui-Height-md-auto { height: auto !important; } .fui-MaxWidth-md-100 { max-width: 100% !important; } .fui-MaxHeight-md-100 { max-height: 100% !important; } .fui-MinViewportWidth-md-100 { min-width: 100vw !important; } .fui-MinViewportHeight-md-100 { min-height: 100vh !important; } .fui-ViewportWidth-md-100 { width: 100vw !important; } .fui-ViewportHeight-md-100 { height: 100vh !important; } } @media (min-width: 1280px) { .fui-Width-lg-25 { width: 25% !important; } .fui-Width-lg-33 { width: 33.333333% !important; } .fui-Width-lg-50 { width: 50% !important; } .fui-Width-lg-66 { width: 66.666667% !important; } .fui-Width-lg-75 { width: 75% !important; } .fui-Width-lg-100 { width: 100% !important; } .fui-Width-lg-auto { width: auto !important; } .fui-Height-lg-25 { height: 25% !important; } .fui-Height-lg-33 { height: 33.333333% !important; } .fui-Height-lg-50 { height: 50% !important; } .fui-Height-lg-66 { height: 66.666667% !important; } .fui-Height-lg-75 { height: 75% !important; } .fui-Height-lg-100 { height: 100% !important; } .fui-Height-lg-auto { height: auto !important; } .fui-MaxWidth-lg-100 { max-width: 100% !important; } .fui-MaxHeight-lg-100 { max-height: 100% !important; } .fui-MinViewportWidth-lg-100 { min-width: 100vw !important; } .fui-MinViewportHeight-lg-100 { min-height: 100vh !important; } .fui-ViewportWidth-lg-100 { width: 100vw !important; } .fui-ViewportHeight-lg-100 { height: 100vh !important; } } @media (min-width: 1920px) { .fui-Width-xl-25 { width: 25% !important; } .fui-Width-xl-33 { width: 33.333333% !important; } .fui-Width-xl-50 { width: 50% !important; } .fui-Width-xl-66 { width: 66.666667% !important; } .fui-Width-xl-75 { width: 75% !important; } .fui-Width-xl-100 { width: 100% !important; } .fui-Width-xl-auto { width: auto !important; } .fui-Height-xl-25 { height: 25% !important; } .fui-Height-xl-33 { height: 33.333333% !important; } .fui-Height-xl-50 { height: 50% !important; } .fui-Height-xl-66 { height: 66.666667% !important; } .fui-Height-xl-75 { height: 75% !important; } .fui-Height-xl-100 { height: 100% !important; } .fui-Height-xl-auto { height: auto !important; } .fui-MaxWidth-xl-100 { max-width: 100% !important; } .fui-MaxHeight-xl-100 { max-height: 100% !important; } .fui-MinViewportWidth-xl-100 { min-width: 100vw !important; } .fui-MinViewportHeight-xl-100 { min-height: 100vh !important; } .fui-ViewportWidth-xl-100 { width: 100vw !important; } .fui-ViewportHeight-xl-100 { height: 100vh !important; } } @media (min-width: 2560px) { .fui-Width-xxl-25 { width: 25% !important; } .fui-Width-xxl-33 { width: 33.333333% !important; } .fui-Width-xxl-50 { width: 50% !important; } .fui-Width-xxl-66 { width: 66.666667% !important; } .fui-Width-xxl-75 { width: 75% !important; } .fui-Width-xxl-100 { width: 100% !important; } .fui-Width-xxl-auto { width: auto !important; } .fui-Height-xxl-25 { height: 25% !important; } .fui-Height-xxl-33 { height: 33.333333% !important; } .fui-Height-xxl-50 { height: 50% !important; } .fui-Height-xxl-66 { height: 66.666667% !important; } .fui-Height-xxl-75 { height: 75% !important; } .fui-Height-xxl-100 { height: 100% !important; } .fui-Height-xxl-auto { height: auto !important; } .fui-MaxWidth-xxl-100 { max-width: 100% !important; } .fui-MaxHeight-xxl-100 { max-height: 100% !important; } .fui-MinViewportWidth-xxl-100 { min-width: 100vw !important; } .fui-MinViewportHeight-xxl-100 { min-height: 100vh !important; } .fui-ViewportWidth-xxl-100 { width: 100vw !important; } .fui-ViewportHeight-xxl-100 { height: 100vh !important; } } .fui-Margin-0 { margin: 0 !important; } .fui-Margin-top-0, .fui-Margin-y-0 { margin-top: 0 !important; } .fui-Margin-end-0, .fui-Margin-x-0 { margin-right: 0 !important; } .fui-Margin-bottom-0, .fui-Margin-y-0 { margin-bottom: 0 !important; } .fui-Margin-start-0, .fui-Margin-x-0 { margin-left: 0 !important; } .fui-Margin-1 { margin: var(--spacingHorizontalXS) !important; } .fui-Margin-top-1, .fui-Margin-y-1 { margin-top: var(--spacingHorizontalXS) !important; } .fui-Margin-end-1, .fui-Margin-x-1 { margin-right: var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-1, .fui-Margin-y-1 { margin-bottom: var(--spacingHorizontalXS) !important; } .fui-Margin-start-1, .fui-Margin-x-1 { margin-left: var(--spacingHorizontalXS) !important; } .fui-Margin-2 { margin: var(--spacingHorizontalS) !important; } .fui-Margin-top-2, .fui-Margin-y-2 { margin-top: var(--spacingHorizontalS) !important; } .fui-Margin-end-2, .fui-Margin-x-2 { margin-right: var(--spacingHorizontalS) !important; } .fui-Margin-bottom-2, .fui-Margin-y-2 { margin-bottom: var(--spacingHorizontalS) !important; } .fui-Margin-start-2, .fui-Margin-x-2 { margin-left: var(--spacingHorizontalS) !important; } .fui-Margin-3 { margin: var(--spacingHorizontalM) !important; } .fui-Margin-top-3, .fui-Margin-y-3 { margin-top: var(--spacingHorizontalM) !important; } .fui-Margin-end-3, .fui-Margin-x-3 { margin-right: var(--spacingHorizontalM) !important; } .fui-Margin-bottom-3, .fui-Margin-y-3 { margin-bottom: var(--spacingHorizontalM) !important; } .fui-Margin-start-3, .fui-Margin-x-3 { margin-left: var(--spacingHorizontalM) !important; } .fui-Margin-4 { margin: var(--spacingHorizontalL) !important; } .fui-Margin-top-4, .fui-Margin-y-4 { margin-top: var(--spacingHorizontalL) !important; } .fui-Margin-end-4, .fui-Margin-x-4 { margin-right: var(--spacingHorizontalL) !important; } .fui-Margin-bottom-4, .fui-Margin-y-4 { margin-bottom: var(--spacingHorizontalL) !important; } .fui-Margin-start-4, .fui-Margin-x-4 { margin-left: var(--spacingHorizontalL) !important; } .fui-Margin-5 { margin: var(--spacingHorizontalXL) !important; } .fui-Margin-top-5, .fui-Margin-y-5 { margin-top: var(--spacingHorizontalXL) !important; } .fui-Margin-end-5, .fui-Margin-x-5 { margin-right: var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-5, .fui-Margin-y-5 { margin-bottom: var(--spacingHorizontalXL) !important; } .fui-Margin-start-5, .fui-Margin-x-5 { margin-left: var(--spacingHorizontalXL) !important; } .fui-Padding-0 { padding: 0 !important; } .fui-Padding-top-0, .fui-Padding-y-0 { padding-top: 0 !important; } .fui-Padding-end-0, .fui-Padding-x-0 { padding-right: 0 !important; } .fui-Padding-bottom-0, .fui-Padding-y-0 { padding-bottom: 0 !important; } .fui-Padding-start-0, .fui-Padding-x-0 { padding-left: 0 !important; } .fui-Padding-1 { padding: var(--spacingHorizontalXS) !important; } .fui-Padding-top-1, .fui-Padding-y-1 { padding-top: var(--spacingHorizontalXS) !important; } .fui-Padding-end-1, .fui-Padding-x-1 { padding-right: var(--spacingHorizontalXS) !important; } .fui-Padding-bottom-1, .fui-Padding-y-1 { padding-bottom: var(--spacingHorizontalXS) !important; } .fui-Padding-start-1, .fui-Padding-x-1 { padding-left: var(--spacingHorizontalXS) !important; } .fui-Padding-2 { padding: var(--spacingHorizontalS) !important; } .fui-Padding-top-2, .fui-Padding-y-2 { padding-top: var(--spacingHorizontalS) !important; } .fui-Padding-end-2, .fui-Padding-x-2 { padding-right: var(--spacingHorizontalS) !important; } .fui-Padding-bottom-2, .fui-Padding-y-2 { padding-bottom: var(--spacingHorizontalS) !important; } .fui-Padding-start-2, .fui-Padding-x-2 { padding-left: var(--spacingHorizontalS) !important; } .fui-Padding-3 { padding: var(--spacingHorizontalM) !important; } .fui-Padding-top-3, .fui-Padding-y-3 { padding-top: var(--spacingHorizontalM) !important; } .fui-Padding-end-3, .fui-Padding-x-3 { padding-right: var(--spacingHorizontalM) !important; } .fui-Padding-bottom-3, .fui-Padding-y-3 { padding-bottom: var(--spacingHorizontalM) !important; } .fui-Padding-start-3, .fui-Padding-x-3 { padding-left: var(--spacingHorizontalM) !important; } .fui-Padding-4 { padding: var(--spacingHorizontalL) !important; } .fui-Padding-top-4, .fui-Padding-y-4 { padding-top: var(--spacingHorizontalL) !important; } .fui-Padding-end-4, .fui-Padding-x-4 { padding-right: var(--spacingHorizontalL) !important; } .fui-Padding-bottom-4, .fui-Padding-y-4 { padding-bottom: var(--spacingHorizontalL) !important; } .fui-Padding-start-4, .fui-Padding-x-4 { padding-left: var(--spacingHorizontalL) !important; } .fui-Padding-5 { padding: var(--spacingHorizontalXL) !important; } .fui-Padding-top-5, .fui-Padding-y-5 { padding-top: var(--spacingHorizontalXL) !important; } .fui-Padding-end-5, .fui-Padding-x-5 { padding-right: var(--spacingHorizontalXL) !important; } .fui-Padding-bottom-5, .fui-Padding-y-5 { padding-bottom: var(--spacingHorizontalXL) !important; } .fui-Padding-start-5, .fui-Padding-x-5 { padding-left: var(--spacingHorizontalXL) !important; } .fui-Margin-n1 { margin: -var(--spacingHorizontalXS) !important; } .fui-Margin-top-n1, .fui-Margin-y-n1 { margin-top: -var(--spacingHorizontalXS) !important; } .fui-Margin-end-n1, .fui-Margin-x-n1 { margin-right: -var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-n1, .fui-Margin-y-n1 { margin-bottom: -var(--spacingHorizontalXS) !important; } .fui-Margin-start-n1, .fui-Margin-x-n1 { margin-left: -var(--spacingHorizontalXS) !important; } .fui-Margin-n2 { margin: -var(--spacingHorizontalS) !important; } .fui-Margin-top-n2, .fui-Margin-y-n2 { margin-top: -var(--spacingHorizontalS) !important; } .fui-Margin-end-n2, .fui-Margin-x-n2 { margin-right: -var(--spacingHorizontalS) !important; } .fui-Margin-bottom-n2, .fui-Margin-y-n2 { margin-bottom: -var(--spacingHorizontalS) !important; } .fui-Margin-start-n2, .fui-Margin-x-n2 { margin-left: -var(--spacingHorizontalS) !important; } .fui-Margin-n3 { margin: -var(--spacingHorizontalM) !important; } .fui-Margin-top-n3, .fui-Margin-y-n3 { margin-top: -var(--spacingHorizontalM) !important; } .fui-Margin-end-n3, .fui-Margin-x-n3 { margin-right: -var(--spacingHorizontalM) !important; } .fui-Margin-bottom-n3, .fui-Margin-y-n3 { margin-bottom: -var(--spacingHorizontalM) !important; } .fui-Margin-start-n3, .fui-Margin-x-n3 { margin-left: -var(--spacingHorizontalM) !important; } .fui-Margin-n4 { margin: -var(--spacingHorizontalL) !important; } .fui-Margin-top-n4, .fui-Margin-y-n4 { margin-top: -var(--spacingHorizontalL) !important; } .fui-Margin-end-n4, .fui-Margin-x-n4 { margin-right: -var(--spacingHorizontalL) !important; } .fui-Margin-bottom-n4, .fui-Margin-y-n4 { margin-bottom: -var(--spacingHorizontalL) !important; } .fui-Margin-start-n4, .fui-Margin-x-n4 { margin-left: -var(--spacingHorizontalL) !important; } .fui-Margin-n5 { margin: -var(--spacingHorizontalXL) !important; } .fui-Margin-top-n5, .fui-Margin-y-n5 { margin-top: -var(--spacingHorizontalXL) !important; } .fui-Margin-end-n5, .fui-Margin-x-n5 { margin-right: -var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-n5, .fui-Margin-y-n5 { margin-bottom: -var(--spacingHorizontalXL) !important; } .fui-Margin-start-n5, .fui-Margin-x-n5 { margin-left: -var(--spacingHorizontalXL) !important; } .fui-Margin-auto { margin: auto !important; } .fui-Margin-top-auto, .fui-Margin-y-auto { margin-top: auto !important; } .fui-Margin-end-auto, .fui-Margin-x-auto { margin-right: auto !important; } .fui-Margin-bottom-auto, .fui-Margin-y-auto { margin-bottom: auto !important; } .fui-Margin-start-auto, .fui-Margin-x-auto { margin-left: auto !important; } @media (min-width: 600px) { .fui-Margin-sm-0 { margin: 0 !important; } .fui-Margin-top-sm-0, .fui-Margin-y-sm-0 { margin-top: 0 !important; } .fui-Margin-end-sm-0, .fui-Margin-x-sm-0 { margin-right: 0 !important; } .fui-Margin-bottom-sm-0, .fui-Margin-y-sm-0 { margin-bottom: 0 !important; } .fui-Margin-start-sm-0, .fui-Margin-x-sm-0 { margin-left: 0 !important; } .fui-Margin-sm-1 { margin: var(--spacingHorizontalXS) !important; } .fui-Margin-top-sm-1, .fui-Margin-y-sm-1 { margin-top: var(--spacingHorizontalXS) !important; } .fui-Margin-end-sm-1, .fui-Margin-x-sm-1 { margin-right: var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-sm-1, .fui-Margin-y-sm-1 { margin-bottom: var(--spacingHorizontalXS) !important; } .fui-Margin-start-sm-1, .fui-Margin-x-sm-1 { margin-left: var(--spacingHorizontalXS) !important; } .fui-Margin-sm-2 { margin: var(--spacingHorizontalS) !important; } .fui-Margin-top-sm-2, .fui-Margin-y-sm-2 { margin-top: var(--spacingHorizontalS) !important; } .fui-Margin-end-sm-2, .fui-Margin-x-sm-2 { margin-right: var(--spacingHorizontalS) !important; } .fui-Margin-bottom-sm-2, .fui-Margin-y-sm-2 { margin-bottom: var(--spacingHorizontalS) !important; } .fui-Margin-start-sm-2, .fui-Margin-x-sm-2 { margin-left: var(--spacingHorizontalS) !important; } .fui-Margin-sm-3 { margin: var(--spacingHorizontalM) !important; } .fui-Margin-top-sm-3, .fui-Margin-y-sm-3 { margin-top: var(--spacingHorizontalM) !important; } .fui-Margin-end-sm-3, .fui-Margin-x-sm-3 { margin-right: var(--spacingHorizontalM) !important; } .fui-Margin-bottom-sm-3, .fui-Margin-y-sm-3 { margin-bottom: var(--spacingHorizontalM) !important; } .fui-Margin-start-sm-3, .fui-Margin-x-sm-3 { margin-left: var(--spacingHorizontalM) !important; } .fui-Margin-sm-4 { margin: var(--spacingHorizontalL) !important; } .fui-Margin-top-sm-4, .fui-Margin-y-sm-4 { margin-top: var(--spacingHorizontalL) !important; } .fui-Margin-end-sm-4, .fui-Margin-x-sm-4 { margin-right: var(--spacingHorizontalL) !important; } .fui-Margin-bottom-sm-4, .fui-Margin-y-sm-4 { margin-bottom: var(--spacingHorizontalL) !important; } .fui-Margin-start-sm-4, .fui-Margin-x-sm-4 { margin-left: var(--spacingHorizontalL) !important; } .fui-Margin-sm-5 { margin: var(--spacingHorizontalXL) !important; } .fui-Margin-top-sm-5, .fui-Margin-y-sm-5 { margin-top: var(--spacingHorizontalXL) !important; } .fui-Margin-end-sm-5, .fui-Margin-x-sm-5 { margin-right: var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-sm-5, .fui-Margin-y-sm-5 { margin-bottom: var(--spacingHorizontalXL) !important; } .fui-Margin-start-sm-5, .fui-Margin-x-sm-5 { margin-left: var(--spacingHorizontalXL) !important; } .fui-Padding-sm-0 { padding: 0 !important; } .fui-Padding-top-sm-0, .fui-Padding-y-sm-0 { padding-top: 0 !important; } .fui-Padding-end-sm-0, .fui-Padding-x-sm-0 { padding-right: 0 !important; } .fui-Padding-bottom-sm-0, .fui-Padding-y-sm-0 { padding-bottom: 0 !important; } .fui-Padding-start-sm-0, .fui-Padding-x-sm-0 { padding-left: 0 !important; } .fui-Padding-sm-1 { padding: var(--spacingHorizontalXS) !important; } .fui-Padding-top-sm-1, .fui-Padding-y-sm-1 { padding-top: var(--spacingHorizontalXS) !important; } .fui-Padding-end-sm-1, .fui-Padding-x-sm-1 { padding-right: var(--spacingHorizontalXS) !important; } .fui-Padding-bottom-sm-1, .fui-Padding-y-sm-1 { padding-bottom: var(--spacingHorizontalXS) !important; } .fui-Padding-start-sm-1, .fui-Padding-x-sm-1 { padding-left: var(--spacingHorizontalXS) !important; } .fui-Padding-sm-2 { padding: var(--spacingHorizontalS) !important; } .fui-Padding-top-sm-2, .fui-Padding-y-sm-2 { padding-top: var(--spacingHorizontalS) !important; } .fui-Padding-end-sm-2, .fui-Padding-x-sm-2 { padding-right: var(--spacingHorizontalS) !important; } .fui-Padding-bottom-sm-2, .fui-Padding-y-sm-2 { padding-bottom: var(--spacingHorizontalS) !important; } .fui-Padding-start-sm-2, .fui-Padding-x-sm-2 { padding-left: var(--spacingHorizontalS) !important; } .fui-Padding-sm-3 { padding: var(--spacingHorizontalM) !important; } .fui-Padding-top-sm-3, .fui-Padding-y-sm-3 { padding-top: var(--spacingHorizontalM) !important; } .fui-Padding-end-sm-3, .fui-Padding-x-sm-3 { padding-right: var(--spacingHorizontalM) !important; } .fui-Padding-bottom-sm-3, .fui-Padding-y-sm-3 { padding-bottom: var(--spacingHorizontalM) !important; } .fui-Padding-start-sm-3, .fui-Padding-x-sm-3 { padding-left: var(--spacingHorizontalM) !important; } .fui-Padding-sm-4 { padding: var(--spacingHorizontalL) !important; } .fui-Padding-top-sm-4, .fui-Padding-y-sm-4 { padding-top: var(--spacingHorizontalL) !important; } .fui-Padding-end-sm-4, .fui-Padding-x-sm-4 { padding-right: var(--spacingHorizontalL) !important; } .fui-Padding-bottom-sm-4, .fui-Padding-y-sm-4 { padding-bottom: var(--spacingHorizontalL) !important; } .fui-Padding-start-sm-4, .fui-Padding-x-sm-4 { padding-left: var(--spacingHorizontalL) !important; } .fui-Padding-sm-5 { padding: var(--spacingHorizontalXL) !important; } .fui-Padding-top-sm-5, .fui-Padding-y-sm-5 { padding-top: var(--spacingHorizontalXL) !important; } .fui-Padding-end-sm-5, .fui-Padding-x-sm-5 { padding-right: var(--spacingHorizontalXL) !important; } .fui-Padding-bottom-sm-5, .fui-Padding-y-sm-5 { padding-bottom: var(--spacingHorizontalXL) !important; } .fui-Padding-start-sm-5, .fui-Padding-x-sm-5 { padding-left: var(--spacingHorizontalXL) !important; } .fui-Margin-sm-n1 { margin: -var(--spacingHorizontalXS) !important; } .fui-Margin-top-sm-n1, .fui-Margin-y-sm-n1 { margin-top: -var(--spacingHorizontalXS) !important; } .fui-Margin-end-sm-n1, .fui-Margin-x-sm-n1 { margin-right: -var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-sm-n1, .fui-Margin-y-sm-n1 { margin-bottom: -var(--spacingHorizontalXS) !important; } .fui-Margin-start-sm-n1, .fui-Margin-x-sm-n1 { margin-left: -var(--spacingHorizontalXS) !important; } .fui-Margin-sm-n2 { margin: -var(--spacingHorizontalS) !important; } .fui-Margin-top-sm-n2, .fui-Margin-y-sm-n2 { margin-top: -var(--spacingHorizontalS) !important; } .fui-Margin-end-sm-n2, .fui-Margin-x-sm-n2 { margin-right: -var(--spacingHorizontalS) !important; } .fui-Margin-bottom-sm-n2, .fui-Margin-y-sm-n2 { margin-bottom: -var(--spacingHorizontalS) !important; } .fui-Margin-start-sm-n2, .fui-Margin-x-sm-n2 { margin-left: -var(--spacingHorizontalS) !important; } .fui-Margin-sm-n3 { margin: -var(--spacingHorizontalM) !important; } .fui-Margin-top-sm-n3, .fui-Margin-y-sm-n3 { margin-top: -var(--spacingHorizontalM) !important; } .fui-Margin-end-sm-n3, .fui-Margin-x-sm-n3 { margin-right: -var(--spacingHorizontalM) !important; } .fui-Margin-bottom-sm-n3, .fui-Margin-y-sm-n3 { margin-bottom: -var(--spacingHorizontalM) !important; } .fui-Margin-start-sm-n3, .fui-Margin-x-sm-n3 { margin-left: -var(--spacingHorizontalM) !important; } .fui-Margin-sm-n4 { margin: -var(--spacingHorizontalL) !important; } .fui-Margin-top-sm-n4, .fui-Margin-y-sm-n4 { margin-top: -var(--spacingHorizontalL) !important; } .fui-Margin-end-sm-n4, .fui-Margin-x-sm-n4 { margin-right: -var(--spacingHorizontalL) !important; } .fui-Margin-bottom-sm-n4, .fui-Margin-y-sm-n4 { margin-bottom: -var(--spacingHorizontalL) !important; } .fui-Margin-start-sm-n4, .fui-Margin-x-sm-n4 { margin-left: -var(--spacingHorizontalL) !important; } .fui-Margin-sm-n5 { margin: -var(--spacingHorizontalXL) !important; } .fui-Margin-top-sm-n5, .fui-Margin-y-sm-n5 { margin-top: -var(--spacingHorizontalXL) !important; } .fui-Margin-end-sm-n5, .fui-Margin-x-sm-n5 { margin-right: -var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-sm-n5, .fui-Margin-y-sm-n5 { margin-bottom: -var(--spacingHorizontalXL) !important; } .fui-Margin-start-sm-n5, .fui-Margin-x-sm-n5 { margin-left: -var(--spacingHorizontalXL) !important; } .fui-Margin-sm-auto { margin: auto !important; } .fui-Margin-top-sm-auto, .fui-Margin-y-sm-auto { margin-top: auto !important; } .fui-Margin-end-sm-auto, .fui-Margin-x-sm-auto { margin-right: auto !important; } .fui-Margin-bottom-sm-auto, .fui-Margin-y-sm-auto { margin-bottom: auto !important; } .fui-Margin-start-sm-auto, .fui-Margin-x-sm-auto { margin-left: auto !important; } } @media (min-width: 960px) { .fui-Margin-md-0 { margin: 0 !important; } .fui-Margin-top-md-0, .fui-Margin-y-md-0 { margin-top: 0 !important; } .fui-Margin-end-md-0, .fui-Margin-x-md-0 { margin-right: 0 !important; } .fui-Margin-bottom-md-0, .fui-Margin-y-md-0 { margin-bottom: 0 !important; } .fui-Margin-start-md-0, .fui-Margin-x-md-0 { margin-left: 0 !important; } .fui-Margin-md-1 { margin: var(--spacingHorizontalXS) !important; } .fui-Margin-top-md-1, .fui-Margin-y-md-1 { margin-top: var(--spacingHorizontalXS) !important; } .fui-Margin-end-md-1, .fui-Margin-x-md-1 { margin-right: var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-md-1, .fui-Margin-y-md-1 { margin-bottom: var(--spacingHorizontalXS) !important; } .fui-Margin-start-md-1, .fui-Margin-x-md-1 { margin-left: var(--spacingHorizontalXS) !important; } .fui-Margin-md-2 { margin: var(--spacingHorizontalS) !important; } .fui-Margin-top-md-2, .fui-Margin-y-md-2 { margin-top: var(--spacingHorizontalS) !important; } .fui-Margin-end-md-2, .fui-Margin-x-md-2 { margin-right: var(--spacingHorizontalS) !important; } .fui-Margin-bottom-md-2, .fui-Margin-y-md-2 { margin-bottom: var(--spacingHorizontalS) !important; } .fui-Margin-start-md-2, .fui-Margin-x-md-2 { margin-left: var(--spacingHorizontalS) !important; } .fui-Margin-md-3 { margin: var(--spacingHorizontalM) !important; } .fui-Margin-top-md-3, .fui-Margin-y-md-3 { margin-top: var(--spacingHorizontalM) !important; } .fui-Margin-end-md-3, .fui-Margin-x-md-3 { margin-right: var(--spacingHorizontalM) !important; } .fui-Margin-bottom-md-3, .fui-Margin-y-md-3 { margin-bottom: var(--spacingHorizontalM) !important; } .fui-Margin-start-md-3, .fui-Margin-x-md-3 { margin-left: var(--spacingHorizontalM) !important; } .fui-Margin-md-4 { margin: var(--spacingHorizontalL) !important; } .fui-Margin-top-md-4, .fui-Margin-y-md-4 { margin-top: var(--spacingHorizontalL) !important; } .fui-Margin-end-md-4, .fui-Margin-x-md-4 { margin-right: var(--spacingHorizontalL) !important; } .fui-Margin-bottom-md-4, .fui-Margin-y-md-4 { margin-bottom: var(--spacingHorizontalL) !important; } .fui-Margin-start-md-4, .fui-Margin-x-md-4 { margin-left: var(--spacingHorizontalL) !important; } .fui-Margin-md-5 { margin: var(--spacingHorizontalXL) !important; } .fui-Margin-top-md-5, .fui-Margin-y-md-5 { margin-top: var(--spacingHorizontalXL) !important; } .fui-Margin-end-md-5, .fui-Margin-x-md-5 { margin-right: var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-md-5, .fui-Margin-y-md-5 { margin-bottom: var(--spacingHorizontalXL) !important; } .fui-Margin-start-md-5, .fui-Margin-x-md-5 { margin-left: var(--spacingHorizontalXL) !important; } .fui-Padding-md-0 { padding: 0 !important; } .fui-Padding-top-md-0, .fui-Padding-y-md-0 { padding-top: 0 !important; } .fui-Padding-end-md-0, .fui-Padding-x-md-0 { padding-right: 0 !important; } .fui-Padding-bottom-md-0, .fui-Padding-y-md-0 { padding-bottom: 0 !important; } .fui-Padding-start-md-0, .fui-Padding-x-md-0 { padding-left: 0 !important; } .fui-Padding-md-1 { padding: var(--spacingHorizontalXS) !important; } .fui-Padding-top-md-1, .fui-Padding-y-md-1 { padding-top: var(--spacingHorizontalXS) !important; } .fui-Padding-end-md-1, .fui-Padding-x-md-1 { padding-right: var(--spacingHorizontalXS) !important; } .fui-Padding-bottom-md-1, .fui-Padding-y-md-1 { padding-bottom: var(--spacingHorizontalXS) !important; } .fui-Padding-start-md-1, .fui-Padding-x-md-1 { padding-left: var(--spacingHorizontalXS) !important; } .fui-Padding-md-2 { padding: var(--spacingHorizontalS) !important; } .fui-Padding-top-md-2, .fui-Padding-y-md-2 { padding-top: var(--spacingHorizontalS) !important; } .fui-Padding-end-md-2, .fui-Padding-x-md-2 { padding-right: var(--spacingHorizontalS) !important; } .fui-Padding-bottom-md-2, .fui-Padding-y-md-2 { padding-bottom: var(--spacingHorizontalS) !important; } .fui-Padding-start-md-2, .fui-Padding-x-md-2 { padding-left: var(--spacingHorizontalS) !important; } .fui-Padding-md-3 { padding: var(--spacingHorizontalM) !important; } .fui-Padding-top-md-3, .fui-Padding-y-md-3 { padding-top: var(--spacingHorizontalM) !important; } .fui-Padding-end-md-3, .fui-Padding-x-md-3 { padding-right: var(--spacingHorizontalM) !important; } .fui-Padding-bottom-md-3, .fui-Padding-y-md-3 { padding-bottom: var(--spacingHorizontalM) !important; } .fui-Padding-start-md-3, .fui-Padding-x-md-3 { padding-left: var(--spacingHorizontalM) !important; } .fui-Padding-md-4 { padding: var(--spacingHorizontalL) !important; } .fui-Padding-top-md-4, .fui-Padding-y-md-4 { padding-top: var(--spacingHorizontalL) !important; } .fui-Padding-end-md-4, .fui-Padding-x-md-4 { padding-right: var(--spacingHorizontalL) !important; } .fui-Padding-bottom-md-4, .fui-Padding-y-md-4 { padding-bottom: var(--spacingHorizontalL) !important; } .fui-Padding-start-md-4, .fui-Padding-x-md-4 { padding-left: var(--spacingHorizontalL) !important; } .fui-Padding-md-5 { padding: var(--spacingHorizontalXL) !important; } .fui-Padding-top-md-5, .fui-Padding-y-md-5 { padding-top: var(--spacingHorizontalXL) !important; } .fui-Padding-end-md-5, .fui-Padding-x-md-5 { padding-right: var(--spacingHorizontalXL) !important; } .fui-Padding-bottom-md-5, .fui-Padding-y-md-5 { padding-bottom: var(--spacingHorizontalXL) !important; } .fui-Padding-start-md-5, .fui-Padding-x-md-5 { padding-left: var(--spacingHorizontalXL) !important; } .fui-Margin-md-n1 { margin: -var(--spacingHorizontalXS) !important; } .fui-Margin-top-md-n1, .fui-Margin-y-md-n1 { margin-top: -var(--spacingHorizontalXS) !important; } .fui-Margin-end-md-n1, .fui-Margin-x-md-n1 { margin-right: -var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-md-n1, .fui-Margin-y-md-n1 { margin-bottom: -var(--spacingHorizontalXS) !important; } .fui-Margin-start-md-n1, .fui-Margin-x-md-n1 { margin-left: -var(--spacingHorizontalXS) !important; } .fui-Margin-md-n2 { margin: -var(--spacingHorizontalS) !important; } .fui-Margin-top-md-n2, .fui-Margin-y-md-n2 { margin-top: -var(--spacingHorizontalS) !important; } .fui-Margin-end-md-n2, .fui-Margin-x-md-n2 { margin-right: -var(--spacingHorizontalS) !important; } .fui-Margin-bottom-md-n2, .fui-Margin-y-md-n2 { margin-bottom: -var(--spacingHorizontalS) !important; } .fui-Margin-start-md-n2, .fui-Margin-x-md-n2 { margin-left: -var(--spacingHorizontalS) !important; } .fui-Margin-md-n3 { margin: -var(--spacingHorizontalM) !important; } .fui-Margin-top-md-n3, .fui-Margin-y-md-n3 { margin-top: -var(--spacingHorizontalM) !important; } .fui-Margin-end-md-n3, .fui-Margin-x-md-n3 { margin-right: -var(--spacingHorizontalM) !important; } .fui-Margin-bottom-md-n3, .fui-Margin-y-md-n3 { margin-bottom: -var(--spacingHorizontalM) !important; } .fui-Margin-start-md-n3, .fui-Margin-x-md-n3 { margin-left: -var(--spacingHorizontalM) !important; } .fui-Margin-md-n4 { margin: -var(--spacingHorizontalL) !important; } .fui-Margin-top-md-n4, .fui-Margin-y-md-n4 { margin-top: -var(--spacingHorizontalL) !important; } .fui-Margin-end-md-n4, .fui-Margin-x-md-n4 { margin-right: -var(--spacingHorizontalL) !important; } .fui-Margin-bottom-md-n4, .fui-Margin-y-md-n4 { margin-bottom: -var(--spacingHorizontalL) !important; } .fui-Margin-start-md-n4, .fui-Margin-x-md-n4 { margin-left: -var(--spacingHorizontalL) !important; } .fui-Margin-md-n5 { margin: -var(--spacingHorizontalXL) !important; } .fui-Margin-top-md-n5, .fui-Margin-y-md-n5 { margin-top: -var(--spacingHorizontalXL) !important; } .fui-Margin-end-md-n5, .fui-Margin-x-md-n5 { margin-right: -var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-md-n5, .fui-Margin-y-md-n5 { margin-bottom: -var(--spacingHorizontalXL) !important; } .fui-Margin-start-md-n5, .fui-Margin-x-md-n5 { margin-left: -var(--spacingHorizontalXL) !important; } .fui-Margin-md-auto { margin: auto !important; } .fui-Margin-top-md-auto, .fui-Margin-y-md-auto { margin-top: auto !important; } .fui-Margin-end-md-auto, .fui-Margin-x-md-auto { margin-right: auto !important; } .fui-Margin-bottom-md-auto, .fui-Margin-y-md-auto { margin-bottom: auto !important; } .fui-Margin-start-md-auto, .fui-Margin-x-md-auto { margin-left: auto !important; } } @media (min-width: 1280px) { .fui-Margin-lg-0 { margin: 0 !important; } .fui-Margin-top-lg-0, .fui-Margin-y-lg-0 { margin-top: 0 !important; } .fui-Margin-end-lg-0, .fui-Margin-x-lg-0 { margin-right: 0 !important; } .fui-Margin-bottom-lg-0, .fui-Margin-y-lg-0 { margin-bottom: 0 !important; } .fui-Margin-start-lg-0, .fui-Margin-x-lg-0 { margin-left: 0 !important; } .fui-Margin-lg-1 { margin: var(--spacingHorizontalXS) !important; } .fui-Margin-top-lg-1, .fui-Margin-y-lg-1 { margin-top: var(--spacingHorizontalXS) !important; } .fui-Margin-end-lg-1, .fui-Margin-x-lg-1 { margin-right: var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-lg-1, .fui-Margin-y-lg-1 { margin-bottom: var(--spacingHorizontalXS) !important; } .fui-Margin-start-lg-1, .fui-Margin-x-lg-1 { margin-left: var(--spacingHorizontalXS) !important; } .fui-Margin-lg-2 { margin: var(--spacingHorizontalS) !important; } .fui-Margin-top-lg-2, .fui-Margin-y-lg-2 { margin-top: var(--spacingHorizontalS) !important; } .fui-Margin-end-lg-2, .fui-Margin-x-lg-2 { margin-right: var(--spacingHorizontalS) !important; } .fui-Margin-bottom-lg-2, .fui-Margin-y-lg-2 { margin-bottom: var(--spacingHorizontalS) !important; } .fui-Margin-start-lg-2, .fui-Margin-x-lg-2 { margin-left: var(--spacingHorizontalS) !important; } .fui-Margin-lg-3 { margin: var(--spacingHorizontalM) !important; } .fui-Margin-top-lg-3, .fui-Margin-y-lg-3 { margin-top: var(--spacingHorizontalM) !important; } .fui-Margin-end-lg-3, .fui-Margin-x-lg-3 { margin-right: var(--spacingHorizontalM) !important; } .fui-Margin-bottom-lg-3, .fui-Margin-y-lg-3 { margin-bottom: var(--spacingHorizontalM) !important; } .fui-Margin-start-lg-3, .fui-Margin-x-lg-3 { margin-left: var(--spacingHorizontalM) !important; } .fui-Margin-lg-4 { margin: var(--spacingHorizontalL) !important; } .fui-Margin-top-lg-4, .fui-Margin-y-lg-4 { margin-top: var(--spacingHorizontalL) !important; } .fui-Margin-end-lg-4, .fui-Margin-x-lg-4 { margin-right: var(--spacingHorizontalL) !important; } .fui-Margin-bottom-lg-4, .fui-Margin-y-lg-4 { margin-bottom: var(--spacingHorizontalL) !important; } .fui-Margin-start-lg-4, .fui-Margin-x-lg-4 { margin-left: var(--spacingHorizontalL) !important; } .fui-Margin-lg-5 { margin: var(--spacingHorizontalXL) !important; } .fui-Margin-top-lg-5, .fui-Margin-y-lg-5 { margin-top: var(--spacingHorizontalXL) !important; } .fui-Margin-end-lg-5, .fui-Margin-x-lg-5 { margin-right: var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-lg-5, .fui-Margin-y-lg-5 { margin-bottom: var(--spacingHorizontalXL) !important; } .fui-Margin-start-lg-5, .fui-Margin-x-lg-5 { margin-left: var(--spacingHorizontalXL) !important; } .fui-Padding-lg-0 { padding: 0 !important; } .fui-Padding-top-lg-0, .fui-Padding-y-lg-0 { padding-top: 0 !important; } .fui-Padding-end-lg-0, .fui-Padding-x-lg-0 { padding-right: 0 !important; } .fui-Padding-bottom-lg-0, .fui-Padding-y-lg-0 { padding-bottom: 0 !important; } .fui-Padding-start-lg-0, .fui-Padding-x-lg-0 { padding-left: 0 !important; } .fui-Padding-lg-1 { padding: var(--spacingHorizontalXS) !important; } .fui-Padding-top-lg-1, .fui-Padding-y-lg-1 { padding-top: var(--spacingHorizontalXS) !important; } .fui-Padding-end-lg-1, .fui-Padding-x-lg-1 { padding-right: var(--spacingHorizontalXS) !important; } .fui-Padding-bottom-lg-1, .fui-Padding-y-lg-1 { padding-bottom: var(--spacingHorizontalXS) !important; } .fui-Padding-start-lg-1, .fui-Padding-x-lg-1 { padding-left: var(--spacingHorizontalXS) !important; } .fui-Padding-lg-2 { padding: var(--spacingHorizontalS) !important; } .fui-Padding-top-lg-2, .fui-Padding-y-lg-2 { padding-top: var(--spacingHorizontalS) !important; } .fui-Padding-end-lg-2, .fui-Padding-x-lg-2 { padding-right: var(--spacingHorizontalS) !important; } .fui-Padding-bottom-lg-2, .fui-Padding-y-lg-2 { padding-bottom: var(--spacingHorizontalS) !important; } .fui-Padding-start-lg-2, .fui-Padding-x-lg-2 { padding-left: var(--spacingHorizontalS) !important; } .fui-Padding-lg-3 { padding: var(--spacingHorizontalM) !important; } .fui-Padding-top-lg-3, .fui-Padding-y-lg-3 { padding-top: var(--spacingHorizontalM) !important; } .fui-Padding-end-lg-3, .fui-Padding-x-lg-3 { padding-right: var(--spacingHorizontalM) !important; } .fui-Padding-bottom-lg-3, .fui-Padding-y-lg-3 { padding-bottom: var(--spacingHorizontalM) !important; } .fui-Padding-start-lg-3, .fui-Padding-x-lg-3 { padding-left: var(--spacingHorizontalM) !important; } .fui-Padding-lg-4 { padding: var(--spacingHorizontalL) !important; } .fui-Padding-top-lg-4, .fui-Padding-y-lg-4 { padding-top: var(--spacingHorizontalL) !important; } .fui-Padding-end-lg-4, .fui-Padding-x-lg-4 { padding-right: var(--spacingHorizontalL) !important; } .fui-Padding-bottom-lg-4, .fui-Padding-y-lg-4 { padding-bottom: var(--spacingHorizontalL) !important; } .fui-Padding-start-lg-4, .fui-Padding-x-lg-4 { padding-left: var(--spacingHorizontalL) !important; } .fui-Padding-lg-5 { padding: var(--spacingHorizontalXL) !important; } .fui-Padding-top-lg-5, .fui-Padding-y-lg-5 { padding-top: var(--spacingHorizontalXL) !important; } .fui-Padding-end-lg-5, .fui-Padding-x-lg-5 { padding-right: var(--spacingHorizontalXL) !important; } .fui-Padding-bottom-lg-5, .fui-Padding-y-lg-5 { padding-bottom: var(--spacingHorizontalXL) !important; } .fui-Padding-start-lg-5, .fui-Padding-x-lg-5 { padding-left: var(--spacingHorizontalXL) !important; } .fui-Margin-lg-n1 { margin: -var(--spacingHorizontalXS) !important; } .fui-Margin-top-lg-n1, .fui-Margin-y-lg-n1 { margin-top: -var(--spacingHorizontalXS) !important; } .fui-Margin-end-lg-n1, .fui-Margin-x-lg-n1 { margin-right: -var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-lg-n1, .fui-Margin-y-lg-n1 { margin-bottom: -var(--spacingHorizontalXS) !important; } .fui-Margin-start-lg-n1, .fui-Margin-x-lg-n1 { margin-left: -var(--spacingHorizontalXS) !important; } .fui-Margin-lg-n2 { margin: -var(--spacingHorizontalS) !important; } .fui-Margin-top-lg-n2, .fui-Margin-y-lg-n2 { margin-top: -var(--spacingHorizontalS) !important; } .fui-Margin-end-lg-n2, .fui-Margin-x-lg-n2 { margin-right: -var(--spacingHorizontalS) !important; } .fui-Margin-bottom-lg-n2, .fui-Margin-y-lg-n2 { margin-bottom: -var(--spacingHorizontalS) !important; } .fui-Margin-start-lg-n2, .fui-Margin-x-lg-n2 { margin-left: -var(--spacingHorizontalS) !important; } .fui-Margin-lg-n3 { margin: -var(--spacingHorizontalM) !important; } .fui-Margin-top-lg-n3, .fui-Margin-y-lg-n3 { margin-top: -var(--spacingHorizontalM) !important; } .fui-Margin-end-lg-n3, .fui-Margin-x-lg-n3 { margin-right: -var(--spacingHorizontalM) !important; } .fui-Margin-bottom-lg-n3, .fui-Margin-y-lg-n3 { margin-bottom: -var(--spacingHorizontalM) !important; } .fui-Margin-start-lg-n3, .fui-Margin-x-lg-n3 { margin-left: -var(--spacingHorizontalM) !important; } .fui-Margin-lg-n4 { margin: -var(--spacingHorizontalL) !important; } .fui-Margin-top-lg-n4, .fui-Margin-y-lg-n4 { margin-top: -var(--spacingHorizontalL) !important; } .fui-Margin-end-lg-n4, .fui-Margin-x-lg-n4 { margin-right: -var(--spacingHorizontalL) !important; } .fui-Margin-bottom-lg-n4, .fui-Margin-y-lg-n4 { margin-bottom: -var(--spacingHorizontalL) !important; } .fui-Margin-start-lg-n4, .fui-Margin-x-lg-n4 { margin-left: -var(--spacingHorizontalL) !important; } .fui-Margin-lg-n5 { margin: -var(--spacingHorizontalXL) !important; } .fui-Margin-top-lg-n5, .fui-Margin-y-lg-n5 { margin-top: -var(--spacingHorizontalXL) !important; } .fui-Margin-end-lg-n5, .fui-Margin-x-lg-n5 { margin-right: -var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-lg-n5, .fui-Margin-y-lg-n5 { margin-bottom: -var(--spacingHorizontalXL) !important; } .fui-Margin-start-lg-n5, .fui-Margin-x-lg-n5 { margin-left: -var(--spacingHorizontalXL) !important; } .fui-Margin-lg-auto { margin: auto !important; } .fui-Margin-top-lg-auto, .fui-Margin-y-lg-auto { margin-top: auto !important; } .fui-Margin-end-lg-auto, .fui-Margin-x-lg-auto { margin-right: auto !important; } .fui-Margin-bottom-lg-auto, .fui-Margin-y-lg-auto { margin-bottom: auto !important; } .fui-Margin-start-lg-auto, .fui-Margin-x-lg-auto { margin-left: auto !important; } } @media (min-width: 1920px) { .fui-Margin-xl-0 { margin: 0 !important; } .fui-Margin-top-xl-0, .fui-Margin-y-xl-0 { margin-top: 0 !important; } .fui-Margin-end-xl-0, .fui-Margin-x-xl-0 { margin-right: 0 !important; } .fui-Margin-bottom-xl-0, .fui-Margin-y-xl-0 { margin-bottom: 0 !important; } .fui-Margin-start-xl-0, .fui-Margin-x-xl-0 { margin-left: 0 !important; } .fui-Margin-xl-1 { margin: var(--spacingHorizontalXS) !important; } .fui-Margin-top-xl-1, .fui-Margin-y-xl-1 { margin-top: var(--spacingHorizontalXS) !important; } .fui-Margin-end-xl-1, .fui-Margin-x-xl-1 { margin-right: var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-xl-1, .fui-Margin-y-xl-1 { margin-bottom: var(--spacingHorizontalXS) !important; } .fui-Margin-start-xl-1, .fui-Margin-x-xl-1 { margin-left: var(--spacingHorizontalXS) !important; } .fui-Margin-xl-2 { margin: var(--spacingHorizontalS) !important; } .fui-Margin-top-xl-2, .fui-Margin-y-xl-2 { margin-top: var(--spacingHorizontalS) !important; } .fui-Margin-end-xl-2, .fui-Margin-x-xl-2 { margin-right: var(--spacingHorizontalS) !important; } .fui-Margin-bottom-xl-2, .fui-Margin-y-xl-2 { margin-bottom: var(--spacingHorizontalS) !important; } .fui-Margin-start-xl-2, .fui-Margin-x-xl-2 { margin-left: var(--spacingHorizontalS) !important; } .fui-Margin-xl-3 { margin: var(--spacingHorizontalM) !important; } .fui-Margin-top-xl-3, .fui-Margin-y-xl-3 { margin-top: var(--spacingHorizontalM) !important; } .fui-Margin-end-xl-3, .fui-Margin-x-xl-3 { margin-right: var(--spacingHorizontalM) !important; } .fui-Margin-bottom-xl-3, .fui-Margin-y-xl-3 { margin-bottom: var(--spacingHorizontalM) !important; } .fui-Margin-start-xl-3, .fui-Margin-x-xl-3 { margin-left: var(--spacingHorizontalM) !important; } .fui-Margin-xl-4 { margin: var(--spacingHorizontalL) !important; } .fui-Margin-top-xl-4, .fui-Margin-y-xl-4 { margin-top: var(--spacingHorizontalL) !important; } .fui-Margin-end-xl-4, .fui-Margin-x-xl-4 { margin-right: var(--spacingHorizontalL) !important; } .fui-Margin-bottom-xl-4, .fui-Margin-y-xl-4 { margin-bottom: var(--spacingHorizontalL) !important; } .fui-Margin-start-xl-4, .fui-Margin-x-xl-4 { margin-left: var(--spacingHorizontalL) !important; } .fui-Margin-xl-5 { margin: var(--spacingHorizontalXL) !important; } .fui-Margin-top-xl-5, .fui-Margin-y-xl-5 { margin-top: var(--spacingHorizontalXL) !important; } .fui-Margin-end-xl-5, .fui-Margin-x-xl-5 { margin-right: var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-xl-5, .fui-Margin-y-xl-5 { margin-bottom: var(--spacingHorizontalXL) !important; } .fui-Margin-start-xl-5, .fui-Margin-x-xl-5 { margin-left: var(--spacingHorizontalXL) !important; } .fui-Padding-xl-0 { padding: 0 !important; } .fui-Padding-top-xl-0, .fui-Padding-y-xl-0 { padding-top: 0 !important; } .fui-Padding-end-xl-0, .fui-Padding-x-xl-0 { padding-right: 0 !important; } .fui-Padding-bottom-xl-0, .fui-Padding-y-xl-0 { padding-bottom: 0 !important; } .fui-Padding-start-xl-0, .fui-Padding-x-xl-0 { padding-left: 0 !important; } .fui-Padding-xl-1 { padding: var(--spacingHorizontalXS) !important; } .fui-Padding-top-xl-1, .fui-Padding-y-xl-1 { padding-top: var(--spacingHorizontalXS) !important; } .fui-Padding-end-xl-1, .fui-Padding-x-xl-1 { padding-right: var(--spacingHorizontalXS) !important; } .fui-Padding-bottom-xl-1, .fui-Padding-y-xl-1 { padding-bottom: var(--spacingHorizontalXS) !important; } .fui-Padding-start-xl-1, .fui-Padding-x-xl-1 { padding-left: var(--spacingHorizontalXS) !important; } .fui-Padding-xl-2 { padding: var(--spacingHorizontalS) !important; } .fui-Padding-top-xl-2, .fui-Padding-y-xl-2 { padding-top: var(--spacingHorizontalS) !important; } .fui-Padding-end-xl-2, .fui-Padding-x-xl-2 { padding-right: var(--spacingHorizontalS) !important; } .fui-Padding-bottom-xl-2, .fui-Padding-y-xl-2 { padding-bottom: var(--spacingHorizontalS) !important; } .fui-Padding-start-xl-2, .fui-Padding-x-xl-2 { padding-left: var(--spacingHorizontalS) !important; } .fui-Padding-xl-3 { padding: var(--spacingHorizontalM) !important; } .fui-Padding-top-xl-3, .fui-Padding-y-xl-3 { padding-top: var(--spacingHorizontalM) !important; } .fui-Padding-end-xl-3, .fui-Padding-x-xl-3 { padding-right: var(--spacingHorizontalM) !important; } .fui-Padding-bottom-xl-3, .fui-Padding-y-xl-3 { padding-bottom: var(--spacingHorizontalM) !important; } .fui-Padding-start-xl-3, .fui-Padding-x-xl-3 { padding-left: var(--spacingHorizontalM) !important; } .fui-Padding-xl-4 { padding: var(--spacingHorizontalL) !important; } .fui-Padding-top-xl-4, .fui-Padding-y-xl-4 { padding-top: var(--spacingHorizontalL) !important; } .fui-Padding-end-xl-4, .fui-Padding-x-xl-4 { padding-right: var(--spacingHorizontalL) !important; } .fui-Padding-bottom-xl-4, .fui-Padding-y-xl-4 { padding-bottom: var(--spacingHorizontalL) !important; } .fui-Padding-start-xl-4, .fui-Padding-x-xl-4 { padding-left: var(--spacingHorizontalL) !important; } .fui-Padding-xl-5 { padding: var(--spacingHorizontalXL) !important; } .fui-Padding-top-xl-5, .fui-Padding-y-xl-5 { padding-top: var(--spacingHorizontalXL) !important; } .fui-Padding-end-xl-5, .fui-Padding-x-xl-5 { padding-right: var(--spacingHorizontalXL) !important; } .fui-Padding-bottom-xl-5, .fui-Padding-y-xl-5 { padding-bottom: var(--spacingHorizontalXL) !important; } .fui-Padding-start-xl-5, .fui-Padding-x-xl-5 { padding-left: var(--spacingHorizontalXL) !important; } .fui-Margin-xl-n1 { margin: -var(--spacingHorizontalXS) !important; } .fui-Margin-top-xl-n1, .fui-Margin-y-xl-n1 { margin-top: -var(--spacingHorizontalXS) !important; } .fui-Margin-end-xl-n1, .fui-Margin-x-xl-n1 { margin-right: -var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-xl-n1, .fui-Margin-y-xl-n1 { margin-bottom: -var(--spacingHorizontalXS) !important; } .fui-Margin-start-xl-n1, .fui-Margin-x-xl-n1 { margin-left: -var(--spacingHorizontalXS) !important; } .fui-Margin-xl-n2 { margin: -var(--spacingHorizontalS) !important; } .fui-Margin-top-xl-n2, .fui-Margin-y-xl-n2 { margin-top: -var(--spacingHorizontalS) !important; } .fui-Margin-end-xl-n2, .fui-Margin-x-xl-n2 { margin-right: -var(--spacingHorizontalS) !important; } .fui-Margin-bottom-xl-n2, .fui-Margin-y-xl-n2 { margin-bottom: -var(--spacingHorizontalS) !important; } .fui-Margin-start-xl-n2, .fui-Margin-x-xl-n2 { margin-left: -var(--spacingHorizontalS) !important; } .fui-Margin-xl-n3 { margin: -var(--spacingHorizontalM) !important; } .fui-Margin-top-xl-n3, .fui-Margin-y-xl-n3 { margin-top: -var(--spacingHorizontalM) !important; } .fui-Margin-end-xl-n3, .fui-Margin-x-xl-n3 { margin-right: -var(--spacingHorizontalM) !important; } .fui-Margin-bottom-xl-n3, .fui-Margin-y-xl-n3 { margin-bottom: -var(--spacingHorizontalM) !important; } .fui-Margin-start-xl-n3, .fui-Margin-x-xl-n3 { margin-left: -var(--spacingHorizontalM) !important; } .fui-Margin-xl-n4 { margin: -var(--spacingHorizontalL) !important; } .fui-Margin-top-xl-n4, .fui-Margin-y-xl-n4 { margin-top: -var(--spacingHorizontalL) !important; } .fui-Margin-end-xl-n4, .fui-Margin-x-xl-n4 { margin-right: -var(--spacingHorizontalL) !important; } .fui-Margin-bottom-xl-n4, .fui-Margin-y-xl-n4 { margin-bottom: -var(--spacingHorizontalL) !important; } .fui-Margin-start-xl-n4, .fui-Margin-x-xl-n4 { margin-left: -var(--spacingHorizontalL) !important; } .fui-Margin-xl-n5 { margin: -var(--spacingHorizontalXL) !important; } .fui-Margin-top-xl-n5, .fui-Margin-y-xl-n5 { margin-top: -var(--spacingHorizontalXL) !important; } .fui-Margin-end-xl-n5, .fui-Margin-x-xl-n5 { margin-right: -var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-xl-n5, .fui-Margin-y-xl-n5 { margin-bottom: -var(--spacingHorizontalXL) !important; } .fui-Margin-start-xl-n5, .fui-Margin-x-xl-n5 { margin-left: -var(--spacingHorizontalXL) !important; } .fui-Margin-xl-auto { margin: auto !important; } .fui-Margin-top-xl-auto, .fui-Margin-y-xl-auto { margin-top: auto !important; } .fui-Margin-end-xl-auto, .fui-Margin-x-xl-auto { margin-right: auto !important; } .fui-Margin-bottom-xl-auto, .fui-Margin-y-xl-auto { margin-bottom: auto !important; } .fui-Margin-start-xl-auto, .fui-Margin-x-xl-auto { margin-left: auto !important; } } @media (min-width: 2560px) { .fui-Margin-xxl-0 { margin: 0 !important; } .fui-Margin-top-xxl-0, .fui-Margin-y-xxl-0 { margin-top: 0 !important; } .fui-Margin-end-xxl-0, .fui-Margin-x-xxl-0 { margin-right: 0 !important; } .fui-Margin-bottom-xxl-0, .fui-Margin-y-xxl-0 { margin-bottom: 0 !important; } .fui-Margin-start-xxl-0, .fui-Margin-x-xxl-0 { margin-left: 0 !important; } .fui-Margin-xxl-1 { margin: var(--spacingHorizontalXS) !important; } .fui-Margin-top-xxl-1, .fui-Margin-y-xxl-1 { margin-top: var(--spacingHorizontalXS) !important; } .fui-Margin-end-xxl-1, .fui-Margin-x-xxl-1 { margin-right: var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-xxl-1, .fui-Margin-y-xxl-1 { margin-bottom: var(--spacingHorizontalXS) !important; } .fui-Margin-start-xxl-1, .fui-Margin-x-xxl-1 { margin-left: var(--spacingHorizontalXS) !important; } .fui-Margin-xxl-2 { margin: var(--spacingHorizontalS) !important; } .fui-Margin-top-xxl-2, .fui-Margin-y-xxl-2 { margin-top: var(--spacingHorizontalS) !important; } .fui-Margin-end-xxl-2, .fui-Margin-x-xxl-2 { margin-right: var(--spacingHorizontalS) !important; } .fui-Margin-bottom-xxl-2, .fui-Margin-y-xxl-2 { margin-bottom: var(--spacingHorizontalS) !important; } .fui-Margin-start-xxl-2, .fui-Margin-x-xxl-2 { margin-left: var(--spacingHorizontalS) !important; } .fui-Margin-xxl-3 { margin: var(--spacingHorizontalM) !important; } .fui-Margin-top-xxl-3, .fui-Margin-y-xxl-3 { margin-top: var(--spacingHorizontalM) !important; } .fui-Margin-end-xxl-3, .fui-Margin-x-xxl-3 { margin-right: var(--spacingHorizontalM) !important; } .fui-Margin-bottom-xxl-3, .fui-Margin-y-xxl-3 { margin-bottom: var(--spacingHorizontalM) !important; } .fui-Margin-start-xxl-3, .fui-Margin-x-xxl-3 { margin-left: var(--spacingHorizontalM) !important; } .fui-Margin-xxl-4 { margin: var(--spacingHorizontalL) !important; } .fui-Margin-top-xxl-4, .fui-Margin-y-xxl-4 { margin-top: var(--spacingHorizontalL) !important; } .fui-Margin-end-xxl-4, .fui-Margin-x-xxl-4 { margin-right: var(--spacingHorizontalL) !important; } .fui-Margin-bottom-xxl-4, .fui-Margin-y-xxl-4 { margin-bottom: var(--spacingHorizontalL) !important; } .fui-Margin-start-xxl-4, .fui-Margin-x-xxl-4 { margin-left: var(--spacingHorizontalL) !important; } .fui-Margin-xxl-5 { margin: var(--spacingHorizontalXL) !important; } .fui-Margin-top-xxl-5, .fui-Margin-y-xxl-5 { margin-top: var(--spacingHorizontalXL) !important; } .fui-Margin-end-xxl-5, .fui-Margin-x-xxl-5 { margin-right: var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-xxl-5, .fui-Margin-y-xxl-5 { margin-bottom: var(--spacingHorizontalXL) !important; } .fui-Margin-start-xxl-5, .fui-Margin-x-xxl-5 { margin-left: var(--spacingHorizontalXL) !important; } .fui-Padding-xxl-0 { padding: 0 !important; } .fui-Padding-top-xxl-0, .fui-Padding-y-xxl-0 { padding-top: 0 !important; } .fui-Padding-end-xxl-0, .fui-Padding-x-xxl-0 { padding-right: 0 !important; } .fui-Padding-bottom-xxl-0, .fui-Padding-y-xxl-0 { padding-bottom: 0 !important; } .fui-Padding-start-xxl-0, .fui-Padding-x-xxl-0 { padding-left: 0 !important; } .fui-Padding-xxl-1 { padding: var(--spacingHorizontalXS) !important; } .fui-Padding-top-xxl-1, .fui-Padding-y-xxl-1 { padding-top: var(--spacingHorizontalXS) !important; } .fui-Padding-end-xxl-1, .fui-Padding-x-xxl-1 { padding-right: var(--spacingHorizontalXS) !important; } .fui-Padding-bottom-xxl-1, .fui-Padding-y-xxl-1 { padding-bottom: var(--spacingHorizontalXS) !important; } .fui-Padding-start-xxl-1, .fui-Padding-x-xxl-1 { padding-left: var(--spacingHorizontalXS) !important; } .fui-Padding-xxl-2 { padding: var(--spacingHorizontalS) !important; } .fui-Padding-top-xxl-2, .fui-Padding-y-xxl-2 { padding-top: var(--spacingHorizontalS) !important; } .fui-Padding-end-xxl-2, .fui-Padding-x-xxl-2 { padding-right: var(--spacingHorizontalS) !important; } .fui-Padding-bottom-xxl-2, .fui-Padding-y-xxl-2 { padding-bottom: var(--spacingHorizontalS) !important; } .fui-Padding-start-xxl-2, .fui-Padding-x-xxl-2 { padding-left: var(--spacingHorizontalS) !important; } .fui-Padding-xxl-3 { padding: var(--spacingHorizontalM) !important; } .fui-Padding-top-xxl-3, .fui-Padding-y-xxl-3 { padding-top: var(--spacingHorizontalM) !important; } .fui-Padding-end-xxl-3, .fui-Padding-x-xxl-3 { padding-right: var(--spacingHorizontalM) !important; } .fui-Padding-bottom-xxl-3, .fui-Padding-y-xxl-3 { padding-bottom: var(--spacingHorizontalM) !important; } .fui-Padding-start-xxl-3, .fui-Padding-x-xxl-3 { padding-left: var(--spacingHorizontalM) !important; } .fui-Padding-xxl-4 { padding: var(--spacingHorizontalL) !important; } .fui-Padding-top-xxl-4, .fui-Padding-y-xxl-4 { padding-top: var(--spacingHorizontalL) !important; } .fui-Padding-end-xxl-4, .fui-Padding-x-xxl-4 { padding-right: var(--spacingHorizontalL) !important; } .fui-Padding-bottom-xxl-4, .fui-Padding-y-xxl-4 { padding-bottom: var(--spacingHorizontalL) !important; } .fui-Padding-start-xxl-4, .fui-Padding-x-xxl-4 { padding-left: var(--spacingHorizontalL) !important; } .fui-Padding-xxl-5 { padding: var(--spacingHorizontalXL) !important; } .fui-Padding-top-xxl-5, .fui-Padding-y-xxl-5 { padding-top: var(--spacingHorizontalXL) !important; } .fui-Padding-end-xxl-5, .fui-Padding-x-xxl-5 { padding-right: var(--spacingHorizontalXL) !important; } .fui-Padding-bottom-xxl-5, .fui-Padding-y-xxl-5 { padding-bottom: var(--spacingHorizontalXL) !important; } .fui-Padding-start-xxl-5, .fui-Padding-x-xxl-5 { padding-left: var(--spacingHorizontalXL) !important; } .fui-Margin-xxl-n1 { margin: -var(--spacingHorizontalXS) !important; } .fui-Margin-top-xxl-n1, .fui-Margin-y-xxl-n1 { margin-top: -var(--spacingHorizontalXS) !important; } .fui-Margin-end-xxl-n1, .fui-Margin-x-xxl-n1 { margin-right: -var(--spacingHorizontalXS) !important; } .fui-Margin-bottom-xxl-n1, .fui-Margin-y-xxl-n1 { margin-bottom: -var(--spacingHorizontalXS) !important; } .fui-Margin-start-xxl-n1, .fui-Margin-x-xxl-n1 { margin-left: -var(--spacingHorizontalXS) !important; } .fui-Margin-xxl-n2 { margin: -var(--spacingHorizontalS) !important; } .fui-Margin-top-xxl-n2, .fui-Margin-y-xxl-n2 { margin-top: -var(--spacingHorizontalS) !important; } .fui-Margin-end-xxl-n2, .fui-Margin-x-xxl-n2 { margin-right: -var(--spacingHorizontalS) !important; } .fui-Margin-bottom-xxl-n2, .fui-Margin-y-xxl-n2 { margin-bottom: -var(--spacingHorizontalS) !important; } .fui-Margin-start-xxl-n2, .fui-Margin-x-xxl-n2 { margin-left: -var(--spacingHorizontalS) !important; } .fui-Margin-xxl-n3 { margin: -var(--spacingHorizontalM) !important; } .fui-Margin-top-xxl-n3, .fui-Margin-y-xxl-n3 { margin-top: -var(--spacingHorizontalM) !important; } .fui-Margin-end-xxl-n3, .fui-Margin-x-xxl-n3 { margin-right: -var(--spacingHorizontalM) !important; } .fui-Margin-bottom-xxl-n3, .fui-Margin-y-xxl-n3 { margin-bottom: -var(--spacingHorizontalM) !important; } .fui-Margin-start-xxl-n3, .fui-Margin-x-xxl-n3 { margin-left: -var(--spacingHorizontalM) !important; } .fui-Margin-xxl-n4 { margin: -var(--spacingHorizontalL) !important; } .fui-Margin-top-xxl-n4, .fui-Margin-y-xxl-n4 { margin-top: -var(--spacingHorizontalL) !important; } .fui-Margin-end-xxl-n4, .fui-Margin-x-xxl-n4 { margin-right: -var(--spacingHorizontalL) !important; } .fui-Margin-bottom-xxl-n4, .fui-Margin-y-xxl-n4 { margin-bottom: -var(--spacingHorizontalL) !important; } .fui-Margin-start-xxl-n4, .fui-Margin-x-xxl-n4 { margin-left: -var(--spacingHorizontalL) !important; } .fui-Margin-xxl-n5 { margin: -var(--spacingHorizontalXL) !important; } .fui-Margin-top-xxl-n5, .fui-Margin-y-xxl-n5 { margin-top: -var(--spacingHorizontalXL) !important; } .fui-Margin-end-xxl-n5, .fui-Margin-x-xxl-n5 { margin-right: -var(--spacingHorizontalXL) !important; } .fui-Margin-bottom-xxl-n5, .fui-Margin-y-xxl-n5 { margin-bottom: -var(--spacingHorizontalXL) !important; } .fui-Margin-start-xxl-n5, .fui-Margin-x-xxl-n5 { margin-left: -var(--spacingHorizontalXL) !important; } .fui-Margin-xxl-auto { margin: auto !important; } .fui-Margin-top-xxl-auto, .fui-Margin-y-xxl-auto { margin-top: auto !important; } .fui-Margin-end-xxl-auto, .fui-Margin-x-xxl-auto { margin-right: auto !important; } .fui-Margin-bottom-xxl-auto, .fui-Margin-y-xxl-auto { margin-bottom: auto !important; } .fui-Margin-start-xxl-auto, .fui-Margin-x-xxl-auto { margin-left: auto !important; } } .fui-Gap-0 { gap: 0 !important; } .fui-Gap-y-0 { row-gap: 0 !important; } .fui-Gap-x-0 { column-gap: 0 !important; } .fui-Gap-1 { gap: var(--spacingHorizontalXS) !important; } .fui-Gap-y-1 { row-gap: var(--spacingHorizontalXS) !important; } .fui-Gap-x-1 { column-gap: var(--spacingHorizontalXS) !important; } .fui-Gap-2 { gap: var(--spacingHorizontalS) !important; } .fui-Gap-y-2 { row-gap: var(--spacingHorizontalS) !important; } .fui-Gap-x-2 { column-gap: var(--spacingHorizontalS) !important; } .fui-Gap-3 { gap: var(--spacingHorizontalM) !important; } .fui-Gap-y-3 { row-gap: var(--spacingHorizontalM) !important; } .fui-Gap-x-3 { column-gap: var(--spacingHorizontalM) !important; } .fui-Gap-4 { gap: var(--spacingHorizontalL) !important; } .fui-Gap-y-4 { row-gap: var(--spacingHorizontalL) !important; } .fui-Gap-x-4 { column-gap: var(--spacingHorizontalL) !important; } .fui-Gap-5 { gap: var(--spacingHorizontalXL) !important; } .fui-Gap-y-5 { row-gap: var(--spacingHorizontalXL) !important; } .fui-Gap-x-5 { column-gap: var(--spacingHorizontalXL) !important; } .fui-TextAlignment-left { text-align: left !important; } .fui-TextAlignment-right { text-align: right !important; } .fui-TextAlignment-center { text-align: center !important; } .fui-TextAlignment-justify { text-align: justify !important; } .fui-TextSize-xs { font-size: var(--fontSizeBase100) !important; } .fui-TextSize-sm { font-size: var(--fontSizeBase200) !important; } .fui-TextSize-md { font-size: var(--fontSizeBase400) !important; } .fui-TextSize-lg { font-size: var(--fontSizeBase500) !important; } .fui-TextSize-xl { font-size: var(--fontSizeBase600) !important; } .fui-TextSize-1 { font-size: var(--fontSizeHero800); } .fui-TextSize-2 { font-size: var(--fontSizeHero700); } .fui-TextSize-3 { font-size: var(--fontSizeBase600); } .fui-TextSize-4 { font-size: var(--fontSizeBase500); } .fui-TextSize-5 { font-size: var(--fontSizeBase400); } .fui-TextSize-6 { font-size: var(--fontSizeBase300); } @media (min-width: 600px) { .fui-TextAlignment-sm-left { text-align: left !important; } .fui-TextAlignment-sm-right { text-align: right !important; } .fui-TextAlignment-sm-center { text-align: center !important; } .fui-TextAlignment-sm-justify { text-align: justify !important; } .fui-TextSize-sm-xs { font-size: var(--fontSizeBase100) !important; } .fui-TextSize-sm-sm { font-size: var(--fontSizeBase200) !important; } .fui-TextSize-sm-md { font-size: var(--fontSizeBase400) !important; } .fui-TextSize-sm-lg { font-size: var(--fontSizeBase500) !important; } .fui-TextSize-sm-xl { font-size: var(--fontSizeBase600) !important; } .fui-TextSize-sm-1 { font-size: var(--fontSizeHero800); } .fui-TextSize-sm-2 { font-size: var(--fontSizeHero700); } .fui-TextSize-sm-3 { font-size: var(--fontSizeBase600); } .fui-TextSize-sm-4 { font-size: var(--fontSizeBase500); } .fui-TextSize-sm-5 { font-size: var(--fontSizeBase400); } .fui-TextSize-sm-6 { font-size: var(--fontSizeBase300); } } @media (min-width: 960px) { .fui-TextAlignment-md-left { text-align: left !important; } .fui-TextAlignment-md-right { text-align: right !important; } .fui-TextAlignment-md-center { text-align: center !important; } .fui-TextAlignment-md-justify { text-align: justify !important; } .fui-TextSize-md-xs { font-size: var(--fontSizeBase100) !important; } .fui-TextSize-md-sm { font-size: var(--fontSizeBase200) !important; } .fui-TextSize-md-md { font-size: var(--fontSizeBase400) !important; } .fui-TextSize-md-lg { font-size: var(--fontSizeBase500) !important; } .fui-TextSize-md-xl { font-size: var(--fontSizeBase600) !important; } .fui-TextSize-md-1 { font-size: var(--fontSizeHero800); } .fui-TextSize-md-2 { font-size: var(--fontSizeHero700); } .fui-TextSize-md-3 { font-size: var(--fontSizeBase600); } .fui-TextSize-md-4 { font-size: var(--fontSizeBase500); } .fui-TextSize-md-5 { font-size: var(--fontSizeBase400); } .fui-TextSize-md-6 { font-size: var(--fontSizeBase300); } } @media (min-width: 1280px) { .fui-TextAlignment-lg-left { text-align: left !important; } .fui-TextAlignment-lg-right { text-align: right !important; } .fui-TextAlignment-lg-center { text-align: center !important; } .fui-TextAlignment-lg-justify { text-align: justify !important; } .fui-TextSize-lg-xs { font-size: var(--fontSizeBase100) !important; } .fui-TextSize-lg-sm { font-size: var(--fontSizeBase200) !important; } .fui-TextSize-lg-md { font-size: var(--fontSizeBase400) !important; } .fui-TextSize-lg-lg { font-size: var(--fontSizeBase500) !important; } .fui-TextSize-lg-xl { font-size: var(--fontSizeBase600) !important; } .fui-TextSize-lg-1 { font-size: var(--fontSizeHero800); } .fui-TextSize-lg-2 { font-size: var(--fontSizeHero700); } .fui-TextSize-lg-3 { font-size: var(--fontSizeBase600); } .fui-TextSize-lg-4 { font-size: var(--fontSizeBase500); } .fui-TextSize-lg-5 { font-size: var(--fontSizeBase400); } .fui-TextSize-lg-6 { font-size: var(--fontSizeBase300); } } @media (min-width: 1920px) { .fui-TextAlignment-xl-left { text-align: left !important; } .fui-TextAlignment-xl-right { text-align: right !important; } .fui-TextAlignment-xl-center { text-align: center !important; } .fui-TextAlignment-xl-justify { text-align: justify !important; } .fui-TextSize-xl-xs { font-size: var(--fontSizeBase100) !important; } .fui-TextSize-xl-sm { font-size: var(--fontSizeBase200) !important; } .fui-TextSize-xl-md { font-size: var(--fontSizeBase400) !important; } .fui-TextSize-xl-lg { font-size: var(--fontSizeBase500) !important; } .fui-TextSize-xl-xl { font-size: var(--fontSizeBase600) !important; } .fui-TextSize-xl-1 { font-size: var(--fontSizeHero800); } .fui-TextSize-xl-2 { font-size: var(--fontSizeHero700); } .fui-TextSize-xl-3 { font-size: var(--fontSizeBase600); } .fui-TextSize-xl-4 { font-size: var(--fontSizeBase500); } .fui-TextSize-xl-5 { font-size: var(--fontSizeBase400); } .fui-TextSize-xl-6 { font-size: var(--fontSizeBase300); } } @media (min-width: 2560px) { .fui-TextAlignment-xxl-left { text-align: left !important; } .fui-TextAlignment-xxl-right { text-align: right !important; } .fui-TextAlignment-xxl-center { text-align: center !important; } .fui-TextAlignment-xxl-justify { text-align: justify !important; } .fui-TextSize-xxl-xs { font-size: var(--fontSizeBase100) !important; } .fui-TextSize-xxl-sm { font-size: var(--fontSizeBase200) !important; } .fui-TextSize-xxl-md { font-size: var(--fontSizeBase400) !important; } .fui-TextSize-xxl-lg { font-size: var(--fontSizeBase500) !important; } .fui-TextSize-xxl-xl { font-size: var(--fontSizeBase600) !important; } .fui-TextSize-xxl-1 { font-size: var(--fontSizeHero800); } .fui-TextSize-xxl-2 { font-size: var(--fontSizeHero700); } .fui-TextSize-xxl-3 { font-size: var(--fontSizeBase600); } .fui-TextSize-xxl-4 { font-size: var(--fontSizeBase500); } .fui-TextSize-xxl-5 { font-size: var(--fontSizeBase400); } .fui-TextSize-xxl-6 { font-size: var(--fontSizeBase300); } } .fui-TextColor-primary { color: var(--colorBrandForeground1) !important; } .fui-TextColor-secondary { color: var(--colorNeutralForeground3) !important; } .fui-TextColor-success { color: var(--colorStatusSuccessForeground3) !important; } .fui-TextColor-danger { color: var(--colorPaletteRedForeground3) !important; } .fui-TextColor-warning { color: var(--colorStatusWarningBackground3) !important; } .fui-TextColor-info { color: var(--colorNeutralForeground3) !important; } .fui-TextColor-light { color: var(--colorNeutralForeground4) !important; } .fui-TextColor-dark { color: var(--colorNeutralForeground1) !important; } .fui-TextColor-link { color: var(--colorBrandForegroundLink) !important; } .fui-TextColor-white { color: #fff !important; } .fui-TextColor-body { color: var(--colorNeutralForeground1) !important; } .fui-TextColor-muted { color: var(--colorNeutralForeground3) !important; } .fui-TextColor-black-50 { color: rgba(0, 0, 0, 0.5) !important; } .fui-TextColor-white-50 { color: rgba(255, 255, 255, 0.5) !important; } .fui-TextColor-body { color: var(--colorNeutralForeground1); } .fui-TextColor-muted { color: var(--colorNeutralForeground3); } .fui-TextTransform-lowercase { text-transform: lowercase !important; } .fui-TextTransform-uppercase { text-transform: uppercase !important; } .fui-TextTransform-capitalize { text-transform: capitalize !important; } .fui-TextWeight-light { font-weight: var(--fontWeightLight); } .fui-TextWeight-regular { font-weight: var(--fontWeightRegular); } .fui-TextWeight-medium { font-weight: var(--fontWeightMedium); } .fui-TextWeight-semibold { font-weight: var(--fontWeightSemibold); } .fui-TextWeight-bold { font-weight: var(--fontWeightBold); } .fui-Text-italic { font-style: italic !important; } .fui-TextOverflow-justify { text-align: justify !important; } .fui-TextOverflow-wrap { white-space: normal !important; } .fui-TextOverflow-nowrap { white-space: nowrap !important; } .fui-TextOverflow-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-TextDecoration-underline { text-decoration: underline !important; } .fui-TextDecoration-overline { text-decoration: overline !important; } .fui-TextDecoration-line-through { text-decoration: line-through !important; } .fui-TextDecoration-inherit { text-decoration: inherit !important; } .fui-TextDecoration-none { text-decoration: none !important; } .fui-Visible { visibility: visible !important; } .fui-Invisible { visibility: hidden !important; } .flatpickr-months { margin: var(--spacingHorizontalM)/2 0; } .flatpickr-months .flatpickr-month, .flatpickr-months .flatpickr-next-month, .flatpickr-months .flatpickr-prev-month { height: auto; position: relative; } .flatpickr-months .flatpickr-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg { fill: var(--colorBrandBackground); } .flatpickr-months .flatpickr-month { color: var(--colorNeutralForeground1); } .flatpickr-current-month { white-space: nowrap; line-height: 28px; font-family: inherit; font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground1); } .flatpickr-current-month span.cur-month { font-weight: var(--fontWeightSemibold); } .flatpickr-current-month span.cur-month:hover { background: rgba(var(--colorBrandBackground), 0.15); } .flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: var(--fontWeightSemibold); } .flatpickr-current-month option { cursor: pointer; line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase300); font-family: var(--fontFamilyBase); color: var(--colorNeutralForeground1); } .numInputWrapper { white-space: nowrap; line-height: 28px; font-family: inherit; font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground1); } .numInputWrapper .numInput, .numInputWrapper .numInput.cur-year, .numInputWrapper .numInput.flatpickr-hour, .numInputWrapper .numInput.flatpickr-minute { white-space: nowrap; line-height: 28px; font-family: inherit; font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground1); } .numInputWrapper:hover { background: rgba(var(--colorBrandBackground), 0.15); } .flatpickr-day { flex: 1 0 14.2857142857%; height: 28px; line-height: 28px; border-radius: 0%; color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightRegular); } .flatpickr-day.today { position: relative; color: var(--colorNeutralForegroundOnBrand); border-color: inherit; } .flatpickr-day.today:not(:hover)::after { content: ""; position: absolute; top: 0; left: 5px; width: 26px; height: 26px; background-color: var(--colorBrandBackground); border-color: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); border-radius: 50%; z-index: -1; } .flatpickr-day.today:hover { background-color: var(--colorBrandBackgroundInvertedHover); border-color: rgba(0, 0, 0, 0); color: inherit; } .flatpickr-day.today:hover::after { content: ""; position: absolute; top: 0; left: 5px; width: 26px; height: 26px; border-color: var(--colorBrandBackground); border-radius: 50%; z-index: 1; } .flatpickr-day:hover { background-color: var(--colorBrandBackgroundInvertedHover); border-color: rgba(0, 0, 0, 0); } span.flatpickr-weekday { color: var(--colorNeutralForeground1); font-weight: var(--fontWeightRegular); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { font-weight: var(--fontWeightSemibold); background-color: var(--colorBrandBackgroundInvertedSelected); border-color: var(--colorBrandBackgroundInvertedSelected); color: var(--colorNeutralForeground1Static); } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--colorBrandBackground); } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { /*border-radius: 50%;*/ } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { /*border-radius: 50%;*/ } .flatpickr-monthSelect-month:hover, .flatpickr-monthSelect-month:focus { background: rgba(var(--colorBrandBackground), 0.1); } .flatpickr-monthSelect-month.selected { background-color: var(--colorBrandBackground); } .flatpickr-button { margin-top: 3px; margin-right: 16px; line-height: 30px; height: 30px; font-family: inherit; box-sizing: content-box; align-self: flex-end; bottom: 0px; background-color: var(--colorTransparentBackground); border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground1); padding: 0px 4px; overflow: visible; } .flatpickr-button:hover { cursor: pointer; color: var(--colorBrandForeground1); background-color: var(--colorTransparentBackground); } .flatpickr-button:hover:active { color: var(--colorBrandForeground2); } .b-is-autocomplete .fui-MenuPopover { width: 100%; max-height: var(--autocomplete-menu-max-height, 200px); overflow-y: scroll; } .b-is-autocomplete .fui-MenuPopover .fui-MenuList { width: 100%; } .b-is-autocomplete .fui-MenuPopover .fui-MenuList .fui-MenuItem.b-is-autocomplete-suggestion { width: 100%; display: flex; } .b-is-autocomplete .fui-MenuPopover .fui-MenuList .fui-MenuItem.b-is-autocomplete-suggestion:not(.b-is-autocomplete-suggestion-checkbox) { display: contents; } .b-is-autocomplete .fui-MenuPopover .fui-MenuList .fui-MenuItem.b-is-autocomplete-suggestion .fui-MenuItem__content:not([aria-disabled=true]):focus, .b-is-autocomplete .fui-MenuPopover .fui-MenuList .fui-MenuItem.b-is-autocomplete-suggestion .fui-MenuItem__content:not([aria-disabled=true]):focus-visible { outline-style: none; } .b-is-autocomplete .fui-MenuPopover .fui-MenuList .fui-MenuItem.b-is-autocomplete-suggestion .fui-MenuItem__content:not([aria-disabled=true]):hover { background-color: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground2Hover); } .b-is-autocomplete .fui-MenuPopover .fui-MenuList .fui-MenuItem.b-is-autocomplete-suggestion .fui-MenuItem__content:not([aria-disabled=true]):hover:active { background-color: var(--colorNeutralBackground1Pressed); color: var(--colorNeutralForeground2Pressed); } .b-datagrid.fui-Table .fui-TableHeader .fui-TableRow:first-child .fui-TableHeaderCell > div { align-items: center; } .b-datagrid.fui-Table .fui-TableHeader .fui-TableRow:first-child .fui-TableHeaderCell > div .fui-Menu .fui-Button.fui-MenuButton { border: 0; padding-left: 0; padding-right: 0; } .snackbar { z-index: calc(var(--zIndexPopover) + 1) !important; } .snackbar-stack-top-end, .snackbar-stack-top-start, .snackbar-stack-top, .snackbar-stack-bottom-end, .snackbar-stack-bottom-start, .snackbar-stack-bottom { z-index: var(--zIndexPopover) !important; }